Cordova a Sencha Touch aneb mobilní aplikace pomocí webových technologií

V článku si popíšeme, jak lze snadno vytvářet mobilní aplikace podporující více platforem pomocí webových technologií. Poslouží nám k tomu Sencha Touch a Apache Cordova.

Přístupy k tvorbě mobilních aplikací

Nejprve si musíme udělat přehled v tom, jaké jsou možnosti tvorby mobilních aplikací.

1. Nativní aplikace

Nativní aplikace pro jednotlivé platformy budou vždy lepší (z hlediska rychlosti i vzhledu). Nicméně vzhledem k tomu, že aplikace pro jednotlivé platformy je nutné vyvíjet každou samostatně, tak je to také nejnákladnější řešení.

2. Sjednocující Platforma/SDK

Pokud si nemůžeme dovolit vyvíjet aplikace pro jednotlivé platformy zvlášť, může nám dobře posloužit vývoj na nějaké platformě, která pak umí vytvořit aplikaci, která používá nativní prvky konkrétního mobilního systému. Třeba v případě Appcelerator Titanium je možné psát v kombinaci JS a XML, s tím že výsledná aplikace používá části nativního UI (toolbary, menu, dialogová okna) a další funkcionalitu (filesystém, geolokaci, zvuky). Je možné ho připodobnit k Flexu. Podobně funguje MarmeladeSDK, sloužící pro vývoj her v C++ frameworku, které je pak možné spustit na různých mobilních OS.

3. Webová aplikace zabalená jako nativní

Poslední možností je vytvořit mobilní aplikaci jako webovou stránku (HTML5, CSS, JS) a tu zabalit jako nativní aplikaci. Výhodou je snadný vývoj pro více platforem (podobně jako případě 2.). Nevýhodou může být v některých případech pomalejší běh a ne 100% vzhled jako nativní aplikace. Samotnou webovou aplikaci lze vytvořit například v Sencha Touch nebo jQuery Mobile, které již mají předpřipravené komponenty imitující vzhled nativních ovládacích prvků. V nich vytvořená aplikace se potom zabalí pomocí Apache Cordova (dříve Phonegap) jako nativní aplikace.

V článku se budu zabývat jen touto 3. možností.

Co jsem udělal?

V poslední době jsem se zabýval vytvořením mobilních aplikací (resp. předěláním původních) pro portál MojeMedicina.cz. Výsledkem jsou aplikace pro iOS, Android a WP8. Webová aplikace je vytvořená s využitím Sencha Touch a nativní aplikace pro jednotlivé platformy jsou zabalené pomocí Apache Cordova. Aplikace vypadají pro jednotlivé platformy co nejblíže nativnímu vzhledu. Kromě samotné webové aplikace je tam použita integrace se systémem (přehrávání videí, sdílení obsahu, ukládání událostí do kalendáře). I když počítám, že čtenáři tohoto článku nebudou cílová skupina té aplikace, tak ji sem dávám jako ukázku a pro případné vyzkoušení a porovnání s čistě nativními aplikacemi.

Teď pracuji na další aplikaci, která bude používat geolokaci, fotoaparát a opět sázím na Sencha Touch a Apache Cordova.

Jak to vlastně funguje?

Prvním krokem je vytvoření webové aplikace v HTML5, CSS, JS, která třeba komunikuje se serverem přes nějaké RESTové API. Můžeme používat běžné webové JS frameworky, vše, co funguje v prohlížečích na mobilních zařízeních, která chceme podporovat. Aplikace je vlastně založena na moderním SPA (Single Page Application) principu. Pokud chceme, aby se výsledná aplikace co nejvíce podobala nativní, tak je dobré použít nějaký framework, který už má předpřipravené komponenty s co nejvíce nativním vzhledem (již zmíněná Sencha Touch nebo jQuery Mobile).

Druhým krokem je zabalení této aplikace jako nativní pomocí Apache Cordova. Tu si lze představit, jako předpřipravené nativní aplikace pro jednotlivé platformy, které mají přes celou plochu WebView komponentu, kam se načte webová aplikace z minulého kroku. Hlavní výhodou tohoto přístupu (oproti samostatné webové aplikaci) je možnost ji odeslat do App Store/Google Play/WP Store. A samozřejmě také to, že nám Cordova umí do JavaScriptu zpřístupnit systémová API (geolokaci, filesystém, fotoaparát atd.)

Sencha Touch

Nejprve k té webové části. Já jsem pro vývoj použil Sencha Touch 2, protože původní verze aplikace byla vytvořené v Sencha Touch 1. jQuery Mobile se pro původní verzi nezvolilo, protože existovala teprve alfa verze a Sencha Touch byla mnohem dále. Nicméně dnes bych o jQuery Mobile na nějakou menší aplikaci možná uvažoval.

Sencha Touch se mi líbí, protože:

  • je postavena na prověřeném Ext JS (a přitom je na rozdíl od něj zdarma),
  • v základu má MVC, šablonovací systém,
  • razí objektový přístup (vlastní nadstavba nad JS objekty),
  • v základu má předpřipravené styly pro iOS, Android, WP8 a BlackBerry
  • umí „mediaqueries“ i podle zařízení , takže na WP8 zobrazíme jiné CSS než na iPhone
  • s mediaqueries souvisí i device profiles, kdy můžeme pro různá zařízení načíst různý JS (třeba jiné view pro tablet)
  • SASS FTW! (pro CSS se v Sencha Touch používá SASS)
  • částečně podporuje Cordovu – má například vlastní API pro geolokaci, takže se v browseru použije browserová a v Cordově nativní
  • existuje komerční podpora a nástroje
  • tím, že za tím stojí firma, tak je dokumentace na hodně dobré úrovni

Jak to funguje?

Důležitým nástrojem pro Sencha Touch je Sencha Cmd, což je konzolový nástroj, který umí generovat kostru aplikace, nabízí scaffolding a řeší kompilaci aplikace. Po vygenerování kostry pomocí Sencha Cmd už se aplikace vyvíjí jako běžná HTML/JS/CSS aplikace (já používám PHPStorm). Ale samozřejmě je možné používat oficiální placené IDE, které umí věci jako wysiwyg návrh UI, tvorbu barevných témat a další. Aplikaci v průběhu vývoje stačí testovat v prohlížeči (Chrome + DevTools) a případně v prohlížeči na konkrétním mobilním zařízení.

Dalším krokem je kompilace opět pomocí Sencha Cmd, během které se řeší i takové věci jako závislosti mezi komponentami, a jejímž výsledkem je složka s index.html, app.js, css a případnými dalšími soubory.

ProTip k Senche: Pokud se vám nějaká komponenta nebude zobrazovat, tak se mrkněte přes Chrome DevTools, jestli je v DOM vytvořená. Několikrát jsem řešil, proč se komponenta nevytvořila a často to jsem měl jen špatně nastavený layout, takže komponenta nebyla vidět, protože měla nulovou výšku.

Když teď už máme webovou aplikaci připravenou, takže můžeme přejít na další krok – zabalení jako nativní.

Apache Cordova (dříve Phonegap)

Jak již bylo zmíněno, Cordova jsou vlastně šablony pro nativní aplikace, které mají přes celý display jednu WebView komponentu. Důležitý je systém pluginů, který zpřístupňuje nativní API (fotoaparát, geolokaci, filesystém, orientaci zařízení, …) do JavaScriptu uvnitř WebView. Silnou stránkou je možnost napsat pluginy vlastní (stačí napsat javascriptový wrapper a nativní implementaci pro všechny platformy, které chceme podporovat). Spoustu takových už existuje v Cordova Plugin Repository.

Mohli byste namítnout, že pro mnoho věcí, které Cordova řeší, už existuje podpora v prohlížečích. Nicméně ta je často nedokonalá a jednotlivá API se liší. Nicméně ve chvíli, kdy budou všechny browsery podporovat potřebná API, tak projekt může zaniknout. Sami autoři Phonegapu říkají„The ultimate purpose of PhoneGap is to cease to exist.“

Jak to funguje?

Od verze 3 je Cordova CLI napsaná v JavaScriptu, takže se instaluje standardně přes npm (npm install -g cordova). Konzolový nástroj nám poté umožní vytvořit strukturu aplikace. Vytvoří se nám mj. složka www, kam umístíme to, co nám zkompilovala Sencha Cmd. Poté zvolíme, jaké platformy chceme podporovat a necháme vygenerovat šablony projektů. Cordova CLI nám také usnadní instalaci pluginů (stáhne je z githubu, umístí příslušné soubory do projektů jednotlivých platforem).

Aplikaci pro jednotlivé platformy také můžeme zkompilovat pomocí konzolového nástroje. Pořád jsou na to potřeba potřeba příslušná IDE (Xcode, Visual Studio, Android SDK + Eclipse), nicméně lze to řešit i bez nich, pomocí cloudového Phonegap Build (ale není tam možné udělat něco nestandardního – třeba si upravit šablonu pro konkrétní platformu).

Cordova vs Phonegap

Na první pohled může být matoucí, co je Phonegap, kde se vzala Cordova a podobně. Společnost Nitobi už někdy v roce 2009 vyvinula Phonegap, který umožňoval vytvářet mobilní aplikace v HTML/JS/CSS a ty zabalit jako nativní. V roce 2011 bylo Nitobi koupeno Adobe. To pak darovalo Phonegap komunitě pod Apache Foundation, ale protože si značku Phonegap chtěli ponechat, tak se Phonegap přejmenoval na Apache Cordova.

Pod značkou Phonegap teď Adobe nabízí online build HTML/JS/CSS aplikací pro různé platformy (PhoneGap Build), který je založený právě na Apache Cordova.

Závěr

Mobilní aplikace jde docela dobře dělat s použitím webových technologií. V případě, že by naše aplikace byla hodně úspěšná, tak už může dávat smysl investovat do jejího přepsání jako nativní. Na druhou stranu, mobilní zařízení, browsery a JS enginy jsou stále rychlejší, takže to s vývojem mobilních aplikací pomocí webových technologií vypadá stále růžověji.

Byl by zájem o vícedílný seriál? Od vytvoření aplikace v Sencha Touch, přes použití pluginů až po build nativních aplikací? Máte někdo nápad na nějakou jednoduchou aplikaci?

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

Komentáře: 34

Přehled komentářů

pesu Pokračování? Určitě...
michal Pokračovat!
Michal Haták Re: Pokračovat!
vidya
Martin Hujer Re: Testování na Androidu
cvakiitho Re:
petr.sikola.9 určitě pokračovat
Martin Hassman Re: určitě pokračovat
rybajz1 Pokračovat:-)
nextsux neprojdete appstorem
VlaFiser Re: neprojdete appstorem
Martin Hujer Re: neprojdete appstorem
Tomáš Fejfar Re: neprojdete appstorem
Martin Hujer Re: neprojdete appstorem
teo_sk Re: neprojdete appstorem
Martin Hujer Re: neprojdete appstorem
Yess palec hore
Roman Mátyus Rozhodne pokračovanie
Tomáš Vozábal Rozhodně pokračovat
Majo Urcite pokracuj
Petr Medek Pokracovani prosim
Karel zajem o pokracovani by byl
toomkis Výkon
Martin Hujer Re: Výkon
Martin Hujer Pokračování
Martin Kejzlar Díky
vojta Jasně, že pokračovat!
Zvedavec Jak to vypada se serialem
Martin Hujer Re: Jak to vypada se serialem
Leoš Ondra PhoneGap, Cordova a Sensa Touch
Martin Hujer Re: PhoneGap, Cordova a Sensa Touch
Zvedavec Pokračování ?
Martin Hujer Re: Pokračování ?
Mis012 JQuery mobile?
Zdroj: https://www.zdrojak.cz/?p=10975