Jak vytvářet mobilní aplikace jednodušeji

Není to tak dávno, co se mohli vývojáři z různých zdrojů dočíst o novém vývojářském nástroji PhoneGap, který zásadně usnadňuje tvorbu multiplatformních mobilních aplikací. Jedná se o moderní cloudovou aplikaci, která umožňuje tvůrcům webových aplikací uplatnit své znalosti HTML a JavaScriptu při tvorbě mobilních aplikací, které dnes zažívají, a ještě nějakou dobu zažívat budou, celosvětový boom.

Vytváření mobilních aplikací v Cloudu - s Tiggr-em a PhoneGap-em

Stejně tak u nás, i když s mírným opožděním, dochází k nárůstu počtu stažení mobilních aplikací z online prodejen, kde se jim říká familiárně „Apps“.

Na blogu PhoneGap.com nás zaujal článek, který upozorňuje na povedenou kombinací dvou nástrojů z různých vývojářských dílen, které, když se použijí společně, nabídnou vývojářům úžasně jednoduchou možnost k vytváření i sofistikovanějších (samozřejmě do určité míry) webových nebo nativních mobilních aplikací.

Jedná se propojení služby PhoneGap s online nástrojem Tiggr (původní článek najdete na blogu PhoneGap).

Tiggr: nejjednodušší platforma pro tvorbu mobilních aplikací v Cloudu

Tiggr je cloudový nástroj pro tvorbu mobilních aplikací. Umožňuje vývojářům velice rychle vytvářet HTML5/JavaScript aplikace, případně nativní aplikace, to vše v Cloudu. Není nutné nic stahovat, nic instalovat a ani konfigurovat. Jen založíte nový projekt, a jste připraveni vytvořit novou mobilní aplikaci s pomocí HTML5/JavaScript-u a PhoneGap-u.

Tvorba mobilního UI s pomocí jQuery Mobile

K vytváření mobilního UI slouží vizuální editor a komponenty jQuery Mobile, jak je znázorněno níže. Jednoduše přetáhněte potřebné komponenty na plochu telefonu.

Můžete vytvořit několik obrazovek, navigovat mezi obrazovkami, ukládat data do lokální paměti, a psát vlastní JavaScript kód. To znamená, že můžete vytvořit celé UI pro vaši mobilní aplikaci a zároveň ji otestovat ve webovém prohlížeči.

Testování mobilní aplikace

Testování je jednou z nejvíce inovativních vlastností v Tiggru. V horní části se nachází velké tlačítko „Test“. Kliknutím na toto tlačítko otevřete prohlížeč, ve kterém běží vyvíjená mobilní aplikace. Potřebujete-li aplikaci otestovat na skutečném zařízení, stačí oskenovat QR kód a odeslat jeho URL adresu do svého zařízení. Nezapomeňte zároveň nastavit aplikaci jako veřejnou. (Více o testování píšeme níže.)

Využívaní cloudové služby

Jakmile je UI připraveno, dalším krokem je připojení na cloudovou službu. V Tiggru se můžete připojit na jakoukoliv REST službu. Níže uvádíme příklad editoru služeb pro definování připojení k Twitterovské vyhledávací REST službě:

Jakmile je služba nadefinovaná, je namapována do UI. Služba běžně nabízí možnost vstupů i výstupů. Namapování specifikuje, jak jsou různé elementy UI provázány s různými parametry služby pro vstupy a výstupy. Dokonce je zde dostupný i editor pro vizuální mapování dat (výstup služby je zobrazen vlevo, komponenty obrazovky jsou zobrazeny vpravo:

Sloupec JavaScript (vlevo) vám umožňuje psát vlastní JavaScriptový kód pro možnost vyšší kontroly a flexibility při mapování služeb na UI (možnost použít JavaScript je taky dostupná při mapování UI).

Posledním krokem je přidání události pro vyvolání služby. Například, při kliknutí na specifické tlačítko (HTML událost „click“) může být zaslán dotaz na službu. Můžete, samozřejmě využít libovolné události. S Tiggrem je to opravdu jednoduché.

Nativní aplikace s PhoneGap

PhoneGap je skvělá platforma pro mobilní aplikace. Využívá výhod webových technologií, které jsou již vývojářům známé: HTML a JavaScript. S PhoneGap-em je velice jednoduché zabalit jakoukoli mobilní webovou aplikaci a vytvořit z ní aplikaci nativní, ale taky umožňuje aplikaci přístup k nativním funkcím zařízení přes elegantní a jednoduše použitelné API.

Export nativní aplikace

Každá aplikace (nativní) má v Tiggru předinstalovaný PhoneGap. Pro vyexportování nativní aplikace není zapotřebí nic jiného, než kliknout na tlačítko Export:

Pokud se zaměřujete na Android, můžete stáhnout binární soubor pro Android (.apk). Takový soubor je připraven pro vystavení na Andorid Marketu. Tiggr má editor pro Androidové .apk soubory, kde můžete zadat všechny nutné informace.

Pokud se orientujete spíše na iOS, tak vyexportujete iOS xCode projekt (Eclipse). Poté můžete aplikací sestavit na svém počítači, nebo na cloudové službě PhoneGap Build.

Jako alternativa pro oba systémy, Android i iOS, nebo jakoukoli jinou platformu, můžete stáhnout mobilní webovou verzi (webové podklady, HTML/CSS/JS) a použít PhoneGap Build službu pro sestavení aplikace.

Například, pokud potřebujete sestavit aplikaci pro BlackBerry, jednoduše stáhnete mobilní webovou verzi a uploadujete ji do PhoneGap Build. A to je vše. Je to tak jednoduché.

Používání PhoneGap API

Co když potřebujete vyvolat PhoneGap API abyste mohli přistoupit k jednotlivým prvkům zařízení? To je taky více než jednoduché. Tiggr nabízí možnost vyvolání libovolné JavaScriptové akce prostřednictvím HTML události.

Například lze jednoduše implementovat tlačítko Vibrate (Vibrace).

Nejdříve přidáme událost "click" na tlačítko:

Následně navážeme akci – Run Custom JavaScript (spusť vlastní JavaScript):

a na závěr přidáme JavaScriptové volání PhoneGap API:

Další možností je vytvoření JavaScriptového souboru, (Project > JavaScript), napsání veškeré funkcionality do funkcích v souboru a následného vyvolání libovolné funkce s pomocí akce Run Custom JavaScript.

Všimněte si, že lze importovat již existující JavaScriptový soubor (z konkrétní URL nebo uploadováním).

Vyvolání funkce je prováděno pomocí akce Run Custom JavaScript:

Testování nativních aplikací

V případě, že používáte nativní API, testování v prohlížeči již není dostačující. Pro otestování nativních aplikací můžete využít nástroj Tiggr Mobile Tester. Jedná se o nativní aplikaci (Android, iOS), která obsahuje všechny vaše mobilní aplikace vytvořené v Tiggru. Jednoduše kliknete na libovolnou aplikaci v seznamu, a ta se spustí jako nativní aplikace, kterou následně můžete testovat. Je to ten nejjednodušší a nejrychlejší způsob, jak testovat nativní aplikace bez nutnosti je instalovat. Testovací aplikaci vypadá následovně:

Komponenty zařízení

Mít možnost spustit libovolný JavaScriptový kód (nebo PhoneGap API) z téměř libovolného místa dělá Tiggr a PhoneGap opravdu silnými nástroji. Ale to není vše. Tiggr nyní obsahuje komponenty v paletě Device (Zařízení), které vycházejí z PhoneGap API:

Tohle je výrazně jednodušší, než používání API. V plánu je doplnění dalších komponent, jako fotoaparát a jiné.

Tiggr a PhoneGap – Dokonalá kombinace pro tvorbu mobilních aplikací?

Určitě si to myslíme.

Máte zde Tiggr, couldový nástroj pro tvorbu aplikací. Není potřeba nic instalovat nebo konfigurovat. Tiggr využívá jQuery Mobile, HTML5, JavaScript a CSS pro tvorbu mobilních aplikací. Aplikační UI se vytváří ve vizuálním editoru, aplikace jsou schopny napojit se na cloudové služby a mohou být testovány v kterémkoliv momentu, a to v prohlížeči nebo na zařízení. Následně můžete vyexportovat výslednou aplikaci.

Také zde máme PhoneGap, silný framework který využívá HTML5 a JavaScript pro tvorbu nativních mobilních aplikací a umožňuje přístup k nativním funkcím zařízení, jako jsou kontakty nebo fotoaparát. Cloudová služba PhoneGapu pro kompilaci výsledných aplikací vám umožňuje rychle vytvářet Apps pro několik platforem.

Když oba nástroje zkombinujete (Tiggr a PhoneGap), získáte silný nástroj pro tvorbu mobilních HTML5 aplikací s jednoduchou možností pro zakomponování nativních funkcí zařízení a možností exportovat pro několik platforem.

Max Katz je vedoucím vývojářských vztahů pro Tiggr v společnosti Exadel. Jeho příspěvky k webu a mobilním technologiím můžete sledovat na jeho blogu nebo na Twittru @maxkatz. Zároveň vede Tiggr blog a případně je možné ho kontaktovat mailem na max@exadel.com.