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?
Martin Hujer
Martin Hujer je PHP a Symfony vývojář na volné noze. V minulosti pracoval pro auto startup Driveto.cz, předtím pro Lavito a Shopio. Martin vede školení PHP pro začátečníky Úvod do PHP a pro pokročilé Školení objektového programování v PHP. Nabízí také Školení Symfony pro firmy. A píše web o Lanzarote
Nevím jak ostatní, ale já osobně bych pokračování ocenil. Momentálně stojím před problémem, který bych takto mohl elegantně vyřešit, aniž bych musel platit externí a většinou velmi nespolehlivé programátory.
Díky!
Vícedílný seriál by byl super. Chtěl bych do telefonu dopsat appku a nechce se mi zatím učit Javu a věci okolo Androidu, když, jak se zdá, není problém to udělat v jazycích, které znám důvěrně, zvlášť když podpora vývoje pod Linuxem na Android mi nepříšla úplně dodělaná. Takže jestli by jste byl tak ochotný a dal si s tím práci, tak mně by to pomohlo.
Nevim proč ti nepřijde podpora pod linuxem uúplně dodělaná, ale co se týče android dev-stacku tak jsem nikdy s ničím neměl problém, ba naopak oproti win. noflame
Pokracovanie by bolo super, mna by hlavne zaujimalo ako prebieha vyvoj a testovanie na androide. Otestovat appku v ios simulatore je jednoduche, no android to je pre mna jeden velky WTF, mam na mysli hlavne nepouzitelny emulator.
Android emulátor je opravdu jedno velké WTF, takže jsem aplikaci testoval přímo na telefonu. Výhoda Sencha Touch je, že většina toho jde testovat jen v prohlížeči (na tom Androidu). A teprve na věci, které používají nativní API je to potřeba kompilovat.
Mrknete na http://www.genymotion.com/ – virtualizace androidu, emulator je opravdu useless.
Jsem určitě pro pokračování, ideální by byl nějaký malý step by step projekt od začátku vývoje v js až po publikování do jednotlivých store. Myslím, že to tak bude u všech, že mají zkušenost s jednou platformou a ostatní jsou zatím velká neznámá. Možná by stálo zato i zmínit nějaké prerekvizity co se týká vývojových nástrojů (a jejich konfiguraci) pro jednotlivé platformy atd…
Díky za článek.
Dodám, že o publikaci androidích app do storu jsme už psali dříve na konci našeho seriálu http://www.zdrojak.cz/serialy/vyvijime-pro-android/
Hlasuji pro pokračování:-)
Moje zkusenost je, ze aplikace vyrobene timto zpusobem maji VELKY problem se dostat v pripade Apple do AppStore. Ani po nekolikamesicnim dohadovani s review board se nam nepovedlo ji tam dostat. Jejich hlavni argumenty jsou, ze nepouziva dost nativnich funkci a jevi se jako pomala. Tecka, vic vam k tomu nereknou – kde, proc co a jak. Jen vam doporuci ji napsat nativne ;)
Měl Martin Hujer problém/komplikace při nasazování do Apple Storu? Chystám se za pár dní něco takového ven poslat, takže budu rád za každé informace. Díky!
Se schvalováním kvůli rychlosti nebo něčemu podobnému jsme problém neměli. Ale ta aplikace samozřejmě nesmí být jen wrapper, který by otevřel normální web.
První verzi nám z AppStore vrátili kvůli jinému formátu videí – museli jsme vyřešit speciální formát pro videa na iOS (samo si pak umí zvolit kvalitu podle rychlosti připojení). Jinak pak schváleno vždy na poprvé (jak iOS, tak WP).
Oo to takhle bylo dřív, když ještě původní phonegap používal privátní API ( např. https://groups.google.com/forum/#!topic/phonegap/OrjMZLXW6jU%5B1-25-false%5D) Ale pokud vím, tak to už dávno není problém. Jak psal Martin, prakticky jediný problém byla videa. Ale je možné, že to bylo tím, že jsme hned používali iOS player a nepřehrávali video v HTML5 tagu – s HTML5 tagem by nám to možná taky nevzali…
Docela by mě zajímalo víc informací. Ta aplikace byl v Sencha Touch? Jaká verze? Tuším, že u první bylo občas potřeba vynechat nějakou animaci, aby to bylo dostatečně rychlé.
Nasa skusenost je opacna. Mame live aplikaciu buildovanu cez Cordovu (nepouziva ale Senchu, ale iny solution). Je to http://tickk.me/cz/ keby to chcel niekto vyskusat.
A v čem to je udělané? Z obrázků to vypadá dobře, ale nemůžu si to vyzkoušet, protože není WP8 verze ;)
V prvom rade chválim za zhrnutie. A čo sa týka seriálu, tak ja by som ho tiež ocenil, pretože ako si spomínal ..ponúka to rýchlejšiu alternatívu pre menej dôležité / zložité aplikácie.
Zdravím,
článok je super, ale chcelo by to viac detailov. Takže som rozhodne za pokračovanie.
Téma môže byť napr. vytvorenie aplikácie TODO listu komunikujúceho s webovou službou.
Problematika mě dlouhodobě zajímá, ale pokusy jsem nikdy nedotáhl do konce.. Rád blíže poznám jak Sensa Touch, tak i průběh zabalení aplikací jako nativní. Díky.
Drzim palce…
Diky za inspirujici clanek a take hlasuji pro serial
:)
Naneštěstí výkon je na úkor abstrakce tristní. UX se rozhodně nemůže srovnávat s nativní aplikací.
jj, to jsem zmiňoval i v článku, že rychlost a vzhled nebudou nikdy (?) takové, jako v nativní aplikaci
Ahoj, díky všem za podporu a zájem. Domluvím se tedy s Martinem Hassmanem, jak se seriálem.
Díky za super článek a těším se na případné další k tomuto tématu.
Klidně zaplatim, tenhle článek mi může vydělat 240 tisíc :-)
je to uz nejaky cas a zatim ticho ?
Bude. Teď dělám na aplikaci v Cordově a Sencha Touch na diplomku (geolokace, focení, upload souborů), takže ta má teď prioritu. A hlavně jsem se během toho naučil další věci.
Určitě hlasuji pro seriál, ale osobně bych uvítal zvlášť téma PhoneGap/Cordova (zabalení html5 aplikace pro smartphone či tablet) a Sensa Touch. PhoneGap/Cordova je jeden veliký chaos, a pokud se pokusíte něco vytvořit pomocí zdrojů na netu tak je to jeden velký projekt pokud/omyl, třeba už proto, že existuje řada verzí a různé nástroje, včetně emulátorů, které se nedají libovolně kombinovat, často vadí už mezery nebo české znaky v cestách k souborům. Matoucí je pro mě pořád i rozdíl mezi PhoneGap a Cordova, PhoneGap jinak pořád existuje, takže se dá nainstalovat podobně jako Cordova:
npm install -g phonegap
a pokud jsem to pochopil tak Cordovu zahrnuje. Pracuje se s tím podobně, ale zatímco v PhoneGap (verze 3) se mi podařilo vytvořil pomocí Eclipse a ADT bundle testovací aplikaci i pro starý Android (2.2), v Cordova změna minimální verze Androidu vždycky skončila fiaskem.
Otázkou je, do jaké míry je pomalost a menší výkonost Cordova/PhoneGap daná tím, že to prostě není nativní aplikace a do jaké použitým frameworkem (jQuery Mobile, Sensa Touch atd.). Například tento zdroj je v přístupu k html aplikaci doslova rouhačský, ale něco na tom možná bude:
http://www.sitepoint.com/building-a-low-memory-web-application/
Rozdělit to do dvou menších seriálů je dobrý nápad, díky za tip!
Koukám že to celé nějak usnulo :(
Není čas :(
měl bych zájem spíše o něco málo o JQuery mobile. Seriál zní jako super nápad.