Vyvíjíme hybridní aplikace v Ionicu: Struktura, prototypování a nasazení do telefonu

V druhém díle seriálu o Ionicu si stručně popíšeme základní strukturu aplikace a ukážeme si, jak efektivně prototypovat aplikaci pomocí nástroje Ionic Creator. Výsledek si pak spustíme jako samostatnou aplikaci přímo v telefonu a také jej odešleme k testování na vzdálený telefon pomocí Ionic View.

Seriál: Vyvíjíme hybridní aplikace v Ionicu (4 díly)

  1. Vyvíjíme hybridní aplikace v Ionicu: Úvod a instalace 20.7.2015
  2. Vyvíjíme hybridní aplikace v Ionicu: Struktura, prototypování a nasazení do telefonu 10.8.2015
  3. Vyvíjíme hybridní aplikace v Ionicu: První mobilní aplikace 18.12.2015
  4. Vyvíjíme hybridní aplikace v Ionicu: Windows 10 Mobile 7.3.2016

V minulém díle seriálu jsme se zabývali lehkým úvodem do hybridních aplikací, nainstalovali jsme si Ionic, Cordovu, SDK jednotlivých platforem, vytvořili jsme jednoduchou aplikaci a spustili ji v prohlížeči. Jedná se o důležité znalosti, na které budeme v tomto článku navazovat, takže pokud jste o ně ještě nezavadili, určitě se vyplatí začít minulým článkem.

Dnes se podíváme na to, jak vypadá základní struktura aplikace, kterou jsme si nechali vygenerovat v minulém díle. V projektu si také aktivujeme SASS pro kompilaci kaskádových stylů a přidáme platformy iOS a Android, abychom pro ně mohli buildovat naši aplikaci. Ukážeme si, jak rychle vytvořit prototyp aplikace na základě předdefinovaných UI komponent pomocí Ionic Creatoru. Také tento prototyp proměníme ve zdrojový kód u nás v počítači a  spustíme jej v telefonu s aktivovaným live reloadem. Na závěr si ukážeme, jak aplikaci distribuovat na vzdálený telefon pomocí aplikace Ionic View.

Struktura Ionic aplikace

V minulém díle jsme si pomocí příkazu ionic start mojeAplikace tabs vygenerovali jednoduchou aplikaci s taby. Struktura této aplikace v Ionic frameworku je velmi podobná jako u klasických AngularJS aplikací, akorát je zde pár adresářů a souborů navíc:

├── bower.json             # Konfigurační soubor pro Bower
├── config.xml             # Konfigurační soubor pro Cordovu
├── gulpfile.js            # Konfigurační soubor pro Gulp
├── hooks                  # Skripty pro přizpůsobení cordova příkazů
├── ionic.project          # Konfigurační soubor pro Ionic projekt
├── package.json           # Ukazuje, které závislosti/pluginy projekt používá
├── platforms              # Zdrojové kódy pro buildování jednotlivých platforem
├── plugins                # Adresář s Cordova pluginy 
├── scss                   # Adresář pro SCSS, ze kterých se generuje CSS
└── www                    # Hlavní adresář webové aplikace (zobrazené ve WebView)
    ├── css                # Adresář s generovanými CSS
    ├── img                # Adresář s obrázky k aplikaci
    ├── index.html         # Hlavní šablona aplikace, do které se vkládají ostatní 
    ├── js                 # Adresář s logikou aplikace
    │   ├── app.js         # JS soubor s konfigurací a routováním
    │   ├── controllers.js # JS soubor s controllery
    │   └── services.js    # JS soubor s modely
    ├── lib                # Adresář s externími JS knihovnami
    └── templates          # Adresář se šablonami v aplikaci
        ├── chat-detail.html 
        ├── tab-account.html 
        ├── tab-chats.html   
        ├── tab-dash.html      
        └── tabs.html        

Při vývoji Ionic projektu nás bude v 90% času zajímat složka www. Tam se provádí veškerá magie a nachází se tam i samotná webová aplikace, která se zobrazuje ve Webview nativní aplikace. Tato složka obsahuje jednak HTML šablony (www/templates), ale také JS soubory s logikou a modely aplikace (www/js).

Struktura aplikace není pevně daná a lze ji libovolně modifikovat. Při vytváření větších projektů se určitě vyplatí rozdělit si controllery a modely podle jednotlivých modulů. Abychom byli konkrétnější, v případě tohoto projektu bychom soubor s controllery www/js/controllers.js mohli rozdělit na následující soubory:

www/controllers/account.js
www/controllers/dash.js
www/controllers/chats.js
www/controllers/chat-detail.js

U modelu by to bylo jednodušší, protože soubor www/js/services.js obsahuje pouze jeden model, takže výsledná cesta k souboru by byla následující:

www/models/chats.js

Přidání platforem do projektu

V hlavním adresáři aplikace nás také (alespoň při založení nového projektu) bude zajímat složka platforms. V ní jsou uložena data potřebná pro buildování na jednotlivé mobilní platformy (Android, iOS, Windows Phone,…).

Jako první je potřeba tyto platformy definovat. Abychom to mohli udělat, musíme mít nainstalovaná jejich SDK, což jsme si vysvětlili v minulém díle. Potom stačí v terminálu v příslušném adresáři spustit následující příkaz:

ionic platform add android ios

Tím jsme přidali do projektu platformy Android a iOS. Kromě platforem lze velmi podobným způsobem přidávat do projektu i pluginy, které slouží k propojení nativní funkčnosti telefonů s webovou aplikací. To si ale ukážeme v některém z dalších článků, až tuto rozšířenou funkčnost budeme potřebovat.

Aktivace SCSS

Důležitá věc, bez které se snad žádný správný Ionic projekt neobejde, je kompilace kaskákových stylů z SCSS. Standardně je tato volba vypnutá, ale pomocí následujícího příkazu v konzoli ji lze zapnout:

ionic setup sass

Od této chvíle už se soubory SCSS automaticky kompilují. Projekt je potřeba stylovat aplikaci v adresáři scss namísto www/css. O SCSS se tady nebudu příliš rozepisovat, protože už v této oblasti bylo napsáno mnoho zajímavějších článků. Pomocí SCSS jsme schopni rozšířit funcionalitu CSS o proměnné, mixiny, můžeme importovat soubory nebo vnořovat selektory do sebe. Při správném použití SASS dokážeme výrazně zpřehlednit kód a ušetřit spoustu času, nervů i zbytečného psaní. Pro více informací doporučuji navštívit stránky oficiální dokumentace SASS/SCSS. SASS je méně ukecanou verzí SCSS. V SASS se nepíší středníky, složené závorky a záleží zde na odsazování řádků. SCSS se na rozdíl od něj více podobá klasickému CSS (nebo LESS) a přechod na něj je z CSS pravděpodobně i jednodušší.

Terminálové rozhraní Ionic CLI

Ptáte se, proč tak často něco „bušíme“ do terminálu? No, má to vcelku dobrý důvod – šetří nám to hromadu práce. Ionic v sobě totiž zahrnuje tzv. Ionic CLI (Command-line interface), což je velmi užitečné terminálové rozhraní, pomocí něhož jsme schopni ovládat, konfigurovat a tvořit mnoho věcí. Některé věci jdou řešit i jinými způsoby, ale málokdy jsou tyto způsoby snazší než přes Ionic CLI. V následujícím seznamu pro představu uvedu několik příkladů nejvíce využívaných činností, které děláme přes Ionic CLI:

  • Vytvoření nového Ionic projektu (prázdného, podle šablony nebo z Ionic Creatoru)
  • Spuštění serveru pro testování aplikace v prohlížeči (včetně live reloadu nebo překládání SCSS)
  • Přidávání a odebírání platforem / Cordova pluginů
  • Buildování a spouštění mobilní aplikace na simulátoru/zařízení
  • Automatické generování ikonek a splash screenů
  • Sdílení aplikace pomocí Ionic View (viz níže)
  • Přidávání Crosswalku
  • Hledání v dokumentaci
  • Reset pluginů a platforem

Většinu z těchto činností se naučíme během tohoto seriálu využívat. Pro ty, kterým se práce v terminálu z nějakého důvodu hnusí a raději by ji přenechali studentům v kobkách na vysokoškolských kolejích, mám špatnou zprávu. Žádné grafické rozhraní pro Ionic neexistuje a ani se neplánuje. Pravděpodobně by to totiž vývoj aplikací neurychlilo, ale spíše naopak. Práce s terminálem je totiž až nečekaně efektivní a jakmile se jednou s Ionic CLI seznámíte, stanete se dobrými kamarády. Možná toto kamarádství překoná i pár „reálných“ přátel z Facebooku.

Prototypování aplikace pomocí Ionic Creator

Ještě před tím, než opravdu začneme psát vlastní kód aplikace, si ukážeme jeden mocný nástroj, který nám v začátcích nového projektu dokáže hodně pomoci. Pokud plánujeme udělat nějakou konkrétní mobilní aplikaci, máme už rozmyšlené, jak bude fungovat wireframy už jsou na papíře, tak zbývá poslední věc – nějakým způsobem ji naprogramovat v Ionicu. Asi nejlepší způsob, jak s tím začít, je použít Ionic Creator. Jedná se o on-line nástroj, který slouží k rychlému prototypování Ionic aplikací. Pomocí něho lze vytvořit základní strukturu aplikace s již předpřipravenými UI komponentami v jednotlivých view a pak tento prototyp stáhnout jako zdrojový kód do svého počítače.

Jediné, co je potřeba, je registrace nebo přihlášení do Ionic účtu. Po přihlášení a vytvoření projektu byste pak měli vidět něco podobného jako následující okno:

Náhled nástroje Ionic Creator, umožňující rychlé prototypování Ionic aplikace a následné vygenerování zdrojových kódů.

Náhled nástroje Ionic Creator, umožňující rychlé prototypování Ionic aplikace a následné vygenerování zdrojových kódů.

Jednotlivé komponenty, které jsou umístěné vlevo, můžete myší přetahovat na obrazovku aplikace (prototypu). Vlevo nahoře můžete vytvořit nové stránky, a to buď prázdné nebo jako předdefinované šablony (například přihlášení, registrace, modální okno nebo taby). U každé komponenty pak lze konfigurovat její nastavení, byť se to zpravidla omezuje jen na texty, okraje a podobně.

Vpravo nahoře je potom přepínač mezi editací a testovacím režimem. Pokud otevřeme testovací režim, můžeme si aplikaci vyzkoušet. Myš zde slouží klasicky jako prst a je zde vidět například i bounce efekt při scrollování (testovací režim se tváří jako iOS).

To nejlepší je ale na celém Creatoru asi nejméně vidět. Jedná se o ikonku se šipkou dolů, která se umístěna v hlavičce aplikace. Pomocí ní jsme schopni nechat si tuto aplikaci vygenerovat přímo v počítači. Máme tři možnosti, buď si ji stáhneme jako ZIP, koukneme se na ni jako HTML, anebo – a tato možnost je vůbec nejlepší – necháme si ji vygenerovat pomocí Ionic CLI přímo v konzoli jako nový projekt. Například v případě mojí aplikace to udělám pomocí příkazu:

$ ionic start [appName] creator:6b4318bd28b2

Za [appName] pak dosadím název nové aplikace, která je založena na tomto prototypu.

Spuštění aplikace

Za jednu z velkých výhod hybridních aplikací považuji její snadnou testovatelnost v prohlížeči bez nutnosti spouštět simulátor nebo nasazovat ji na reálné zařízení. Jak toho docílíme, jsme si už ukázali v minulém díle, ale v následujících odstavcích si tento přístup více rozvedeme a ukážeme si, jak můžeme řešit přizpůsobitelnost rozlišení nebo jak využít vývojářské nástroje.

Na většinu práce při tvorbě mobilní aplikace simulace v prohlížeči bohatě stačí. Nemusí se zde provádět žádné buildování aplikace, takže tím dokážeme ušetřit dost času. Vynikající možností je také využití možnosti automatického obnovování stránky v prohlížeči pomocí live reloadu. A co je ještě zajímavější, je, že live reload je možné spustit i přímo na reálném zařízení (viz níže).

Spuštění aplikace v prohlížeči

Moderní prohlížeče, jako například Chromium / Google Chrome mají mnoho nástrojů pro vývojáře. Pokud v jejich horním menu kliknete na Zobrazit → Vývojář → Nástroje pro vývojáře nastkytne se vám podobný pohled jako na následujícím obrázku:

Vývojářské nástroje v prohlížeči Chromium / Google Chrome

Vývojářské nástroje v prohlížeči Chromium / Google Chrome

Na obrázku jsou popsány nejdůležitější části vývojářských nástrojů pro vývoj mobilních aplikací v prohlížeči. Je zde také aktivována simulace mobilního zařízení (tlačítko s telefonem vedle lupy), pomocí níž lze přizpůsobit rozlišení a identifikaci jako na mobilním zařízení. Ionic tuto identifikaci rozeznává, takže pokud přepneme mezi iPhonem a telefonem s Androidem, tak je výsledek po znovunačtení stránky platformně přizpůsobený.

Vývojářské nástroje Chromia (Google Chrome) obsahují mnoho zajímavých nástrojů – lze zde procházet a měnit DOM, vytvářet breakpointy, sledovat síťové přenosy, dělat audity, ale i třeba simulovat gyroskop. Pro více informací doporučuji navštívit a pročíst vynikající web Chrome Dev Tools.

Jak spustit samotnou aplikaci v prohlížeči jsme si ukázali už minule, stačí zadat příkaz:

ionic serve

Spuštění aplikace v simulátoru

Simulátor je dobrá věc, pokud vyvijíte aplikaci na iOS. Sice to nenahradí reálné zařízení (které vzhledem k vyšší ceně často nemáte) ve všech ohledech, ale alespoň tento simulátor funguje dobře. Na Androidu je situace o poznání horší. Pokud člověk nainstaluje simulátor, který je standardně dodáván s SDK, práce s ním je příšerná. Vše je v tomto simulátoru neuvěřitelně pomalé a prakticky vůbec nezáleží na hardwarovém vybavení počítače, kde je simulátor provozován – pomalý je totiž vždy. Je to asi takové, jako byste chtěli provozovat Windows Vista na 10 let starém telefonu. Mnohem lepší volbou je použití alternativního simulátoru Genymotion. Ten je zdarma pro osobní potřebu, ale nikoliv pro komerční použití. To, že je základní simulátor tak nepoužitelný, je pravděpodobně způsobeno i tím, že cena telefonů s Androidem je relativně nízká a investice 2 000 Kč do reálného zařízení není tak neproveditelná, jako v případě iOS. Na toto pravděpodobně Google spoléhá, protože od té doby, co jsem před mnoha lety poprvé vyvíjel pro nativní Android verze 2.3, je simulátor stále stejně špatný.

Další nevýhodou simulátorů obecně je to, že nabízejí omezenější funkčnost než reálná zařízení. Například není možné na těchto zařízeních fotografovat nebo třeba posílat push notifikace. Omezení mají samozřejmě mnohem více, ale ne každá aplikace tyto funkcionality využívá.

Spuštění aplikace v samotném simulátoru potom provedeme pomocí příkazů:

ionic emulate android
ionic emulate ios

Nebo na obě platformy pomocí:

ionic emulate

Spuštění aplikace v telefonu

Jak už jsem naznačil v předchozích odstavcích, lepší než používat simulátor je testovat na reálném zařízení. V případě Android zařízení je potřeba povolit vývojářský mód. To se dělá trochu záludně. V nastavení je potřeba najít informace o zařízení a v něm je položka „Číslo sestavení“ (Build number). Pro zobrazení vývojářských nástrojů je potřeba na něj 7x poklepat. Potom se v menu objeví nová položka „Vývojářské nástroje“. Po připojení telefonu k počítači by se na telefonu potom mělo objevit vyskakovací okno, kde je možné potvrdit, že chcete důvěřovat počítači, ke kterému je telefon připojen. Díky tomu potom můžete vesele testovat aplikace na reálném Android zařízení. V případě iOS je tento proces kupodivu jednodušší (to se nestává příliš často). Pokud fyzicky připojím zařízení k počítači, přes XCode se si synchronizují data a můžu na toto zařízení rovnou nasazovat.

Samotné nasazení na zařízení se provádí pomocí příkazů:

ionic run android
ionic run ios

Pokud není připojeno žádné zařízení, tak se spustí simulátor.

Live reload v telefonu

To, že při práci v prohlížeči lze spustit live reload neboli automatické obnovování stránky při změnách v kódu, dnes asi málokoho překvapí. Co by ale překvapit mohlo je to, že Ionic umí dělat live reload i přímo v reálném telefonu nebo v simulátoru. Jediné, co musíte udělat proto, aby live reload fungoval, je přidat parametr -l při spouštění aplikace:

ionic run ios -l

Distribuce aplikace pomocí Ionic View

Velmi zajímavým nástrojem, který ocení především vývojáři iOS, je mobilní aplikace Ionic View. Tato aplikace je dostupná ke stažení v App Store i Google Play. Pomocí ní lze přímo z konzole nasadit aplikaci k otestování na vzdáleném telefonu. V Androidu s tím většinou není žádný velký problém – vygenerované APK je se libovolným způsobem nasdílí a z cílového telefonu potom stáhne a nainstaluje. Pokud jste však někdy už nasazovali k testování aplikaci na iOS, asi víte, že to na této platformě tak jednoduché není. Je potřeba tam vytvořit certifikáty, založit aplikaci v iTunesConnect, archivovat, odeslat archivovanou aplikaci přes XCode a nakonec to nejhorší – nechat ji alespoň poprvé projít schvalovacím procesem Apple Beta Testing. To trvá zpravidla „pouze“ jeden den. Není to trochu moc práce vzhledem k tomu, že pouze chci někomu ukázat koncept nehotové aplikace? Jsou zde samozřejmě další možnosti, jako například Crashlytics (Fabric), ale ani tam není cesta tak jednoduchá jako v případě Ionic View. Jediné, co je potřeba pro to, aby jste mohli používat Ionic View, je zaregistrovat si Ionic účet. V terminálu pak stačí zadat:

ionic upload

Po přihlášení se aplikace nahraje aplikace na server a lze ji stáhnout přímo v Ionic View aplikaci nebo podle konkrétního ID. Aby to ale nebylo tak jasné vítězství, je nutné dodat, že Ionic View zatím není úplně dokonalá aplikace. Pokud používáte některé méně známé pluginy, nastává problém, že nemusí být plugin při tomto testování podporován. Nicméně minimálně na rychlé testování prototypů neznám nic lepšího než Ionic View. Nemusíte na nic čekat a aplikaci nasadíte na jakýkoliv telefon prakticky během minuty.

V příštím díle

Ani v tom současném díle jsme příliš nezavadili o psaní zdrojových kódů. Před tím, než je totiž začneme psát, je vhodné vysvětlit si mnoho věcí, které nám pomohou v pozdějších fázích. V příštím díle se na Ionic framework podíváme opět o trochu víc prakticky – popíšeme si základní komponenty a ukážeme si, jak nechat Ionic vygenerovat různé rozměry ikonek a splash screenů pro naši aplikaci.

Vystudoval jsem ČVUT FIT a pracuji v Userte.ch jako vývojář hybridních aplikací. Baví mě cestovat do neznámých krajin, lézt po horách a občas o tom píšu na blog. Na Twitteru mě najdete jako @janvaclavik.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 4

Přehled komentářů

Jan Pokorný
Ondra Pěkný seriál
Pablo74 Re: Pěkný seriál
Jan Václavík Re: Pěkný seriál
Zdroj: https://www.zdrojak.cz/?p=15392