O hybridních aplikacích se mezi vývojáři mluví už dlouho. Možná až moc dlouho, protože kvůli tomu, že tato technologie zatím nenaplnila původní očekávání, ji mnoho lidí raději prohlásilo za mrtvou. Do jisté míry s tím lze souhlasit, ale místo toho, aby tato technologie mrtvá zůstala, ji Ionic během jednoho roku vzkřísil z hrobu. Takže filozoficky řečeno, hybridní aplikace lze označit za zombie technologii.

V tomto prvním článku a několika dalších, které budou brzy následovat, se plánuji věnovat vývoji hybridních aplikací, založeném na Ionic SDK a Cordově. Jelikož v současné době chybí jakákoliv literatura v našem krásném jazyce, plánuji tento vývoj pojmout komplexněji. Rád bych alespoň z části obsáhl všechna důležitá témata, kterých se Ionic dotýká – ať už se jedná o psaní kódu, práci s Cordovou, filozofii mobilních aplikací nebo distribuci aplikace k testování či produkci. Pokud budete mít jakékoliv podněty nebo otázky, neváhejte je napsat do komentářů nebo mě rovnou kontaktovat.

Co je to Ionic?

Na začátek by bylo vhodné definovat, co přesně Ionic vlastně obsahuje. Je to klasické SDK, nebo-li soubor nástrojů, pomocí něhož lze vyvíjet software – v tomto případě hybridní aplikace. Jednou z nejdůležitějších částí v tomto SDK je Ionic framework. O tom si zde budeme povídat asi nejčastěji.

Mezi další zajímavé nástroje patří například:

• prototypovací nástroj Ionic Creator,
• mocné konzolové CLI,
• odesílač push notifikací,
• mobilní analytika přizpůsobená pro hybridní aplikace nebo
• speciální nástroj pro nasazování aktualizací do produkce bez nutnosti čekat na schválení od App Store / Google Play.

S některými těmito nástroji se potkáme v dalších částech seriálu, kde si je podrobněji popíšeme.

Ionic framework byl vytvořen na bázi AngularJS a pro buildování aplikací na cílových platformách používá Cordovu (dříve také PhoneGap). Cordova v hybridních aplikacích slouží jako jakýsi „obal“, který zobrazuje webovou aplikaci v komponentě WebView a poskytuje jí spojení s nativními službami v telefonu. Mezi služby, které telefon poskytuje, patří například geolokace, přístup k fotoaparátu, ale také třeba push notifikace nebo TouchID. Je jich však mnohem více. Cordova přístup k těmto službám poskytuje pomocí pluginů a s trochou nadsázky lze říci, že drtivou většinu užitečných API lze v hybridní aplikaci implementovat. Fungování těchto služeb se pak neliší od použití v nativních aplikací.

Diagram Cordova hybridní aplikace – mobilní OS poskytuje data ze svých služeb, vstupů a senzorů pomocí Cordova pluginů WebView, kde k nim může přistupovat webová aplikace

Ionic framework se rychle dostal mezi nejvíce používané frameworky pro vývoj hybridních mobilních aplikací. O tom svědčí i to, že je dnes 35. nejhvězdičkovanějším projektem na Githubu a od začátku jeho vývoje v 11/2013 do 5/2015 (kdy vyšla verze 1.0.0) pomocí něj bylo vytvořeno přes 600 000 mobilních aplikací. Ionic má také vynikající dokumentaci, skvělá funkční dema na codepen, rozsáhlou komunitu vývojářů a dobrý tah na branku ze strany hlavního vývojářského týmu. Okolo Ionicu vznikají také četné komunity v jednotlivých zemích. Na Twitteru lze najít mimo jiné i Českou Ionic komunitu! Takže pokud vás vývoj v Ionicu zaujme, neváhejte se přidat. :-)

Write once, deploy anywhere

Ionic framework je postaven na přístupu Write once, deploy anywhere, neboli: napiš jednou, nasaď kamkoliv. Tento přístup není používán pouze z důvodu, že by vývojáři byli příliš líní, jako spíše z kvůli tomu, že v dlouhodobém horizontu nedává smysl dělat stejné věci několikrát jinak. Vývojáři Ionicu odlišnosti mezi platformami neignorují, ale zároveň s těmito relativně triviálními záležitostmi neobtěžují ostatní vývojáře. Snaží se je totiž vyřešit sami rovnou na úrovni frameworku. V některém z dalších článků si podrobněji rozebereme, jak konkrétně přizpůsobují aplikace napříč jednotlivými platformami.

Obrázek znázorňující hlavní rozdíl mezi hybridní a nativní aplikací. U hybridní aplikace je dobře vidět přístup: „Write once, deploy anywhere“

Podpora platforem v Ionicu

Ionic framework v současné verzi 1.0.1 podporuje platformy iOS a Android. Framework obsahuje jejich UI a dokonce lze využívat i Material Design.

Ionic zatím oficiálně nepodporuje Windows Phone, ALE existují návody, kde je řešeno, jak na této platformě Ionic aplikace rozběhat. Nicméně v případě této platformy v Ionicu chybí nativní komponenty uživatelského rozhraní Windows Phone a občas se zde nacházejí opravdu podivné chyby. Do budoucnosti by ale měla být podle oficiálních zdrojů platforma Windows Phone podporována. Ionic dokonce nedávno ohlásil partnerství s Microsoftem, což by mohlo tuto událost poněkud urychlit. První vlašťovka přilétla už ve verzi 1.0.0, kde vývojáři oznámili opravu některých zásadních bugů na Windows Phone 8.

Instalace SDK

Obecně, pokud chcete vyvíjet aplikace pro mobilní platformy, potřebujete SDK těchto platforem. Aby to nebylo tak jednoduché, tak určitá SDK fungují jen na určitých počítačových operačních systémech. Nejlépe toto řeší Android SDK, které je možno rozběhat jak na Linuxu, Mac OS X tak i na Windows. Naopak iOS SDK je možno nainstalovat pouze na Mac OS X a Windows Phone SDK zase funguje pouze na Windows.

Pokud prozatím nechcete aplikaci nasazovat na telefon, ale postačí vám ji otestovat ve webovém problížeči, tak můžete tuto kapitolu o instalaci SDK s čistým svědomím přeskočit.

Takže pokud chcete vyvíjet mobilní aplikace pro iOS a Android, nejlepší volbou je Mac OS X, a pokud chcete dělat i pro Windows Phone, je potřeba nainstalovat i Windows. Další možností je potom vyvíjet pouze pro Android aplikace a mít kamaráda s jiným OS, který nám ochotně zkompiluje iOS / Windows Phone verze aplikace (poznámka na okraj: nebude vás mít rád).

Teď už ale k samotné instalaci SDK. Ta je u jednotlivých platforem poněkud odlišná. Nejsnazší to s instalací mají iOS vývojáři, kterým stačí pouze nainstalovat XCode přes App Store. Tím ale výhody iOS vývojářů víceméně končí. Obecně si troufám tvrdit, že jsou ze strany své platformy nejvíce šikanováni, i když to ve finále většinou slouží ku prospěchu věci a jejich aplikace bývají nejlépe vyladěné. Pokud by přeci jen něco nebylo jasné, doporučuji navštívit stránky Cordovy, kde je podrobně popsána instalace iOS SDK.

Android vývojáři to mají o trochu horší. Android SDK si stáhnou do počítače a nainstalují ho. Android Studio je pro vývoj na Ionicu úplně zbytečné, takže můžete ušetřit místo na disku a stáhnout Android stand-alone SDK. Jako další krok je potřeba přidat cestu k Android nástrojům do proměnné PATH. Toto se dělá na každém operačním systému jinak. Na Macu stačí vytvořit/editovat skrytý soubor ~/.bash_profile , například pomocí editoru nano:

nano ~/.bash_profile

Do tohoto souboru se pak vloží následující řádek, kam je ale nutné ještě zadat správnou cestu k Android SDK ve vašem počítači:

export PATH=${PATH}:/Applications/android-sdk-macosx/platform-tools 

Pak tento soubor uložíme (pokud používáme editor nano, klikneme na CTRL + X, když se program zeptá, zda chceme soubor uložit, stiskneme y a pak ENTER). Na Windows je proces přidání cesty do proměnné PATH mnohem složitější.

Nyní je potřeba spustit Android Manager. To lze udělat buď pomocí Android Studia nebo jednodušeji pomocí terminálu (v tomto případě záleží na tom, kde máte rozbalené Android SDK a je potřeba příkaz příslušně upravit):

/Applications/android-sdk-macosx/tools/android

V této fázi by se nám mělo otevřít okno, které nám nabízí instalaci mnoha důležitých, ale i nedůležitých balíčků. Zbývá nám poslední krok – nainstalovat konkrétní verzi nebo verze platforem, které budeme potřebovat. Osobně mám nainstalováno pouze minimum těchto balíčků. Konkrétně jsou to:

• Tools
  • Android SDK Tools
  • Android SDK Platform-tools
  • Android SDK Build-tools
• Android 5.1.1
  • SDK Platform
• Android 4.4.2.
  • SDK Platform
  • Google APIs (x86 a ARM)
• Extras
  • Android Support Library

Pro více informací opět se doporučuji podívat na podrobný návod pro instalaci Android SDK. Pokud máte v plánu vyzkoušet i platformu Windows Phone, opět stačí zabrousit na stránky Cordovy.

Instalace Ionic frameworku

Jako první je potřeba nainstalovat Node.js. Stačí stáhnout balík a nainstalovat ho podle instrukcí. Společně s Node.js se nainstaluje i balíčkovací systém npm. Díky němu lze potom snadno nainstalovat globálně Cordovu i Ionic následujícím příkazem:

npm install -g cordova ionic

Vyvijíme první Ionic aplikaci

Nyní už máme připraveno vše potřebné k tomu, abychom mohli začít s vývojem aplikace. Na začátku si vytvoříme jakýsi „Hello World“, akorát s tím rozdílem, že si necháme vygenerovat základní aplikaci s taby a žádný „Hello World text“ tam nebude.

Pro vygenerování nové aplikace v konzoli zadáme následující příkaz:

ionic start mojeAplikace tabs

Tímto se nám vytvoří Ionic aplikace, s názvem mojeAplikace, která vychází z ionicové šablony tabs. Kromě této šablony lze také použít sidemenu (šablona s postranním menu) nebo blank (prázdný projekt).

Jak se nyní můžeme podívat na výsledek, který jsme vytvořili? Buď si jej můžeme spustit ve webovém prohlížeči, v simulátoru nebo rovnou na fyzickém zařízení. Prozatím si jej spustíme pouze v prohlížeči a ostatní možnosti si probereme hned v dalším díle našeho seriálu.

Předtím, než aplikaci spustíme, se musíme dostat do jejího hlavního adresáře. Proto jako první věc napřed změníme své umístění v konzoli pomocí příkazu:

cd mojeAplikace

Pro spuštění aplikace v prohlížeči pak použijeme následující příkaz:

ionic serve -l

Pomocí parametru  -l jsme docílili toho, že se nám spustil tzv. Ionic Lab, což nám umožňuje vidět jednu a tutéž aplikaci, ale s rozlišením jednotlivých platforem. Po spuštění tohoto příkazu by měla vypadat aplikace stejně jako na obrázku (s tím rozdílem, že budete mít kliknuto na prvním tabu). Aplikace je normálně proklikávatelná a obsahuje demonstrativní ukázky některých UI komponent.

Pokud spustíme Ionic Lab, lze dobře pozorovat rozdíly mezi jednotlivými platformami. Na tomto obrázku je vidět, že se platforma Android (vpravo) liší od iOS (vlevo) zarovnáním a velikostí nadpisu, umístěním tabů a stylem toggle buttonu. Pokud se na aplikaci při proklikávání důkladně zadíváme, zjistíme, že se mezi platformami liší i takové detaily jako například animace přechodu mezi stránkami.

Při běžném vývoji ale Ionic Lab většinou potřebovat nebudete a bude stačit pouze jedna obrazovka telefonu. V takovém případě stačí zavolat předchozí příkaz bez parametru nebo případně s parametrem -b, pokud nechceme, aby se nám server hned spustil v prohlížeči.

Další možností je spustit si tuto aplikaci přes nějaký svůj webový server, ale tuto možnost příliš nedoporučuji – zbytečně se tím ošidíte o mnohá vylepšení, které Ionic CLI nabízí (například live reload nebo kompilování SCSS).

V příštím díle

Nyní jsme si vysvětlili základy, které jsou nutnou podmínkou pro vývoj hybridních aplikací v Ionicu. První díl byl poněkud více teoretický, ale v příštím díle už se konkrétněji podíváme na strukturu jednoduché aplikace a otestujeme ji v simulátoru i na reálném zařízení.