Přejít k navigační liště

Zdroják » Mobilní vývoj » Cordova a Sencha Touch aneb mobilní aplikace pomocí webových technologií

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

Články Mobilní vývoj

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?

Komentáře

Subscribe
Upozornit na
guest
34 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
pesu

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!

michal

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.

Michal Haták

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

vidya

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.

cvakiitho

Mrknete na http://www.genymotion.com/ – virtualizace androidu, emulator je opravdu useless.

petr.sikola.9

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.

Martin Hassman

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/

rybajz1

Hlasuji pro pokračování:-)

nextsux

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 ;)

VlaFiser

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!

Tomáš Fejfar

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…

teo_sk

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.

Yess

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.

Roman Mátyus

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.

Tomáš Vozábal

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.

Majo

Drzim palce…

Petr Medek

Diky za inspirujici clanek a take hlasuji pro serial

Karel

:)

toomkis

Naneštěstí výkon je na úkor abstrakce tristní. UX se rozhodně nemůže srovnávat s nativní aplikací.

Martin Kejzlar

Díky za super článek a těším se na případné další k tomuto tématu.

vojta

Klidně zaplatim, tenhle článek mi může vydělat 240 tisíc :-)

Zvedavec

je to uz nejaky cas a zatim ticho ?

Leoš Ondra

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/

Zvedavec

Koukám že to celé nějak usnulo :(

Mis012

měl bych zájem spíše o něco málo o JQuery mobile. Seriál zní jako super nápad.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.