Jak vytvářet mobilní aplikace jednodušeji

28. 12. 2011 Bc. Ján Križanský

Firmy a vývojáři zaměřující se na vývoj mobilních aplikací dnes řeší dilema, zda takové aplikace vyvíjet, nebo nikoliv. Hodně z nich tato platforma láká, ale zároveň odrazuje. Především díky různorodosti systémů, které na těchto zařízeních běží. Každá mobilní aplikace totiž vyžaduje osobitý přístup ve vývoji a následné optimalizaci pro jednotlivá zařízení. V tomto článku se podíváme na dva zajímavé nástroje, které vám mohou pomoci tohle dilema vyřešit.

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 (AndroidiOS), 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.


Hodnoťte: 12345

O autorovi

Bc. Ján Križanský

Bc. Ján Križanský

Jano se věnuje vývoji, programování a všemu, co k tomu patří. Z těchto oblastí připravuje zajímavé příspěvky a postřehy na blog.


Rubrika: IT technologie Tagy: IT technologie Mobilní aplikace Komentáře: (3)

Zapojte se do diskuze







23.12.2015 | 13:42 |  rns: [Reagovat] mozná pomoc s tvorbou app

Pokud si nebudete jisti s vlastní tvorbou mobilní aplikace tak vyzkoušejte služby firmy RnS www.vytvorime-aplikaci.cz pomůžou Vám jak s naplánováním tak vývojem tak i propagaci :) Pěkný den

04.11.2014 | 16:32 |  nikola Szotkowská: [Reagovat] dotaz

Dobrý den, měla bych na Vás dotaz, který bych ráda poslala přímo Vám. Můžete mi prosím odpovědět na e-mail Thesotki@seznam.cz. Děkuji

21.08.2014 | 12:37 |  Roman: [Reagovat] PhoneGap

Rad bych se zeptal na vas nazor ohledne PhoneGapu? Jake hlavni vyhody ma podle Vas vývoj nativnich appek?




Vývoj mobilních aplikací http://pixelmate.cz