Předpokládá se, že čtenář je relativně počítačově zdatný a schopný řešit vzniklé problémy.

0. Nativní a hybridní aplikace

Všeobecně známým jazykem pro Android je Java; co už tolik známé není, je fakt, že lze úspěšně vyvíjet androidí aplikace jen s použitím HTML + CSS + Javascript.

Mobilní androidí aplikace (pro mobily a tablety) lze rozdělit na nativní (napsány v Javě) a hybridní (HTML, CSS, Javascript + převod do jako-nativní podoby). Hybridní aplikace sice nemají takový výpočetní výkon jako ty nativní, v praxi to ale nijak vadit nemusí.

1. Úvod, aneb chci to jen zkusit

Tato část se zabývá jen rychlým úvodem, bez zbytečných technických podrobností. Opět opakuji: předpokládá se, že čtenář je relativně počítačově zdatný.

HTML je značkovací jazyk, který se používá na (webové) HTML stránky. Dá se říct, že pomocí HTML tagů nějak zobrazíme obsah stránky. CSS dodá (lepší) vizuální podobu webové stránky. A Javascriptem zajistíme „logiku“, tj. aby aplikace dokázala vůbec něco dělat.
Pokud tedy už máte alespoň nějaké znalosti HTML, CSS a Javascriptu, máte otevřenou cestu k naprogramování vlastní aplikace.

a) napsání kódu

Při programování lze použít i ten nejobyčejnější textový editor Poznámkový blok, jenže ten nám práci s kódem vůbec neusnadní. Naopak, existují skvělá vývojová prostředí, za všechny jmenujme Eclipse, NetBeans a Intel XDK (viz dále v textu). Umí zvýrazňovat syntaxi, mají „našeptávač kódu“, upozorní na (některé) chyby atd.

Primárně tedy budeme psát náš kód na PC, kde bude současně probíhat i ladění naší aplikace – a to v prohlížeči (Chrome, Opera, Firefox, IE) s povoleným prováděním Javascriptu. Až budeme s výsledkem spokojeni (nebo budeme chtít vidět, jak aplikace vypadá v reálu), „přeložíme“ ji do jako-nativní podoby a stáhneme ji do telefonu.

Naše aplikace tedy obsahuje tři fyzické soubory: HTML, CSS, Javascript; např. index.html, style.css a app.js. Máme vyzkoušeno, že v prohlížeči na PC vše funguje tak, jak má.

b) převod do jako-nativní podoby

Pro první seznámení se s převedením aplikace do podoby spustitelné na telefonu (tabletu) stačí nainstalovat vývojové prostředí Intel XDK, zaregistrovat se (email, heslo) a založit nový projekt a naimportovat existující soubory naší aplikace (cesta k souborům index.html, style.css a app.js).

Na záložce Develop najdeme náš zdrojový kód.

Na záložce Build zvolíme, jakým způsobem se nám naše aplikace převede do podoby apk souboru (spustitelné na telefonu a tabletu).

Možností je více, doporučím vyzkoušet nejprve Crosswalk for Android (1); pokud se něco zadrhne, pak Cordova for Android (2) a jako poslední možnost Android (3).

Klepnutím na tlačítko Build se odešlou zdrojové soubory (index.html, style.css a app.js) na server Intelu a lze nastavit některé vlastnosti a parametry naší aplikace:

Pokud je na všech záložkách zelené zatržítko, lze spustit překlad tlačítkem Build App Now.

V prostředí XDK se po chvíli objeví odkaz na stažení apk souboru (je možné, že bude zabalen v ZIP archivu). Tento soubor tedy uložíme na disk do PC.

c) uložení aplikace do telefonu (tabletu)

Klasicky se aplikace instalují z Google Play (dříve Android Market). My se ale vydáme jinou cestou.
Rychlý návod:
Povolit instalování aplikací z "neznámých zdrojů" - bod 3. na stránce http://www.androidmarket.cz/navod/instalovani-apli kaci-do-androida-pro-zacatecniky-i-pokrocile/
Připojit telefon s Androidem k PC
Zkopírovat aplikaci (soubor *.apk) do mobilu
Přes správce souborů v mobilu spustit instalaci aplikace (soubor *.apk)

Na závěr nezbývá než se pyšně kochat Ovšem, něco tomu chybí…

2. Zajímavé, chci znát víc

Předchozí kapitola byla vlastně jen rychlým seznámením „jak na to“, bez hlubších souvislostí a informací. Teď si poodhalíme víc.

a) profi vzhled aplikace

Aby aplikace vypadala profesionálně, lze použít některý z mnoha CSS frameworků, namátkou třeba Bootstrap, Onsen UI nebo Ionic. Nebo lze využít i App Designer obsažený v Intel XDK a v něm vybrat příslušný framework (na výběr je z několika možností):

Psaní aplikace pak může probíhat ve dvou režimech: psaní kódu (tlačítko Code) a návrhové zobrazení (tlačítko Design).

Výhodou CSS frameworků je konzistentní grafická podoba; pokud zvolíme framework přímo určený pro mobilní aplikace (patří sem Onsen UI nebo Ionic), pak již máme připraveno hotové řešení.

b) …aby to umělo něco pořádného!

Zdálo by se, že použitím kombinace HTML + CSS + Javascript vlastně nemůžeme naprogramovat něco opravdu „androidího“, tedy že jsme omezeni jen na nějaké to sčítání čísel nebo zobrazení času. Nic není tak vzdáleno pravdě.

Existují totiž řešení, jak v naší aplikaci zpřístupnit i funkce telefonu (tabletu), jako fotoaparát, telefonní seznam, interní paměť, geolokaci, akcelerometr atd. Mezi populární platformy se řadí Cordova nebo Crosswalk. S jejich pomocí tedy zpřístupníme androidí funkce telefonu (tabletu) v naší aplikaci.

Můžeme si tedy napsat vlastní aplikaci, která umožní pořídit fotografii a doplnit ji hlasovým komentářem, můžeme si zobrazit telefonní seznam, zjišťovat aktuální polohu, používat vibrace atd.

Záleží jen na představivosti…

c) něco lepšího než Javascript (?)

Existuje pro psaní aplikací (HTML + CSS + Javascript) něco lepšího než Javascript? Ano, je to… (překvapivě) Javascript
Pro vysvětlení: američan (původem ze Slovenska) Miško Hevery vytvořil legendární a (skoro se chce říct magickou) knihovnu AngularJS. Pokud je vám znám pojem MVC architektura (model, view, controller), pak víte vše
Pomocí Angularu lze vyvíjet aplikace v Javascriptu velmi rychle a pohodlně, s podstatně menším kódem. Může ho použít jak relativní začátečník a vzít si z Angularu jenom maličko. Nebo se ho chytne profík a ponoří se opravdu do hloubky a dokáže divy

3. Chci to dotáhnout do konce

a) vývojové prostředí

Lze použít již výše zmíněný Intel XDK, kde není nutné se starat o vlastní konfiguraci, vše je již funkční po úspěšném přihlášení se.

Další možností je nepoužívat služeb Intelu a spolehnout se na vlastní PC. Pak lze instalovat např. NetBeans, Java JDK, Android SDK Tools, Cordova a hlavně – vše správně nakonfigurovat.
Poznámka: konfigurace těchto SW nemusí být triviální, autor strávil nespočet času a nervů, než se mu podařila funkční konfigurace.

b) ikona

Každá android aplikace je v telefonu reprezentována ikonou. Pokud nechceme výchozí a nic neříkající ikonu, nezbývá než vytvořit vlastní. Pro začátek je možné udělat návrh velkého (!) obrázku, řekněme 400px na 400px a webovou službu, která zajistí ikony pro různé rozlišení telefonu. Jednou z nich je Launcher Icon Generator.

c) překlad do apk

Cordova (aktuální verze: 3.5.0) umožní převedení aplikace do podoby apk souboru. Pro zpřístupnění funkcí telefonu je nutné použít pluginy, které se (po jednom) podle potřeby přidají do projektu.

Ještě více možností (zejména podpora nejnovějších technologií) je umožněna překladem přes Crosswalk.

Důležitým místem pro překlad je soubor AndroidManifest.xml a config.xml

Poznámka: aplikaci lze přeložit buď jako „debug“ nebo jako „release“.

d) umístění na Google Play

Ve zkrace: je nutné se zaregistrovat, zaplatit jednorázový poplatek (aktuálně $25), pro každou aplikaci mít nejen výsledný apk soubor (ideáně s vlastní ikonou), ale i náhledy aplikace z telefonu (tabletu), logo velikosti 512px na 512 px, vymyslet rozumný název, vhodně ji popsat.

e) jak to může vypadat?

Následuje několik náhledů z mé aplikace Vectors 2D, která je napsána v HTML + CSS + Javascript, na platformě Cordova, s využitím frameworku Ionic a knihovny AngularJS.

Ptejte se...