Upozornění pro čtenáře a uživatele této knihy
Všechna práva vyhrazena. Žádná část této tištěné či elektronické knihy nesmí být reprodukována ani šířena v papírové, elektronické či jiné podobě bez předchozího písemného souhlasu nakladatele. Neoprávněné užití této knihy bude trestně stíháno.

Jiří Vávrů

iPhone
vývoj aplikací

TIRÁŽ TIŠTĚNÉ PUBLIKACE:

Vydala Grada Publishing, a.s.
U Průhonu 22, Praha 7
jako svou 4979. publikaci

Odpovědná redaktorka Zuzana Malečková
Sazba Tomáš Brejcha
Počet stran 192
První vydání, Praha 2012

© Grada Publishing, a.s., 2012
Cover Photo © allphoto.cz

V knize použité názvy programových produktů, firem apod. mohou být ochrannými známkami nebo registrovanými ochrannými známkami příslušných vlastníků.

Vytiskly Tiskárny Havlíčkův Brod, a.s.

ISBN 978-80-247-4457-5

ELEKTRONICKÉ PUBLIKACE:

E-knihu ve formátu EPUB vytvořil Štěpán Böhm

ISBN 978-80-247-8338-3 (elektronická verze ve formátu PDF)
ISBN 978-80-247-8339-0 (elektronická verze ve formátu EPUB)

Úvod

HTML5 se prosazuje i na mobilních platformách, jako jsou iPhone, Android, BlackBerry nebo Bada. Díky všeobecně výborné podpoře tohoto formátu je možné vytvářet univerzální aplikace pro mobilní zařízení. Prostředí PhoneGap a jQuery Mobile vám dovolí psát aplikace, které budou přenosné na různé mobilní platformy, budou skvěle vypadat a navíc budou schopné využívat specifické vlastnosti konkrétních zařízení. Pomocí PhoneGap je možné aplikaci v HTML5 zabalit tak, že bude plně použitelná jako nativní aplikace a bude možné ji distribuovat do marketů. Jednoduše řečeno můžete vyvíjet pro všechny dnes dostupné mobilní platformy v rámci obrovsky úspěšného frameworku PhoneGap, to vše v JavaScriptu a HTML5.

O autorovi

Jiří Vávrů je freelance programátor mobilních aplikací pro iPhone a Android založených na platformě HTML5, JavaScript a frameworku PhoneGap. Vývoji mobilních aplikací a mobilních webů se věnuje dva roky a vytvořil několik aplikací na výše uvedených platformách. Dále se věnuje vývoji mobilních aplikací za použití frameworku Sensa Touch a jeho oblíbený UI framework je Kendo UI a jQuery Mobile. Jeho další oblíbený programovací jazyk je PHP, především pak CakePHP framework, na kterém vytváří API rozhraní pro serverové části mobilních aplikací. V současné době pracuje na vlastním projektu mobilního vyhledávače restaurací a jejich nabídek s názvem Sněz.mě.

Koncept knihy

Kniha je pojata jako návod pro ty vývojáře, kteří by rádi začali vytvářet své vlastní mobilní aplikace pro jednu z nejrozšířenějších mobilních platforem současnosti, iOS a její zařízení iPhone a iPad. Kniha je koncipována tak, aby uživatel, který má základní znalosti v oblasti JavaScriptu a HTML5, byl schopen vytvořit krok za krokem funkční mobilní aplikaci a nahrát ji do App Store, ať už k prodeji, či ji nabídnout zdarma. To vše bez znalostí nativního programování pro platformu iOS. Kniha je vhodná i pro pokročilé vývojáře, kteří již mají s JavaScriptem a HTML5 zkušenosti a chtěli by se naučit použít své předchozí znalosti pro vývoj mobilních aplikací pro iPhone a další platformy a také se dozvědět spoustu užitečných informací o uživatelském rozhraní, optimalizaci aplikace pro běh na reálném zařízení, či rozšiřujících pluginech a ušetřit tak obrovské množství času, jelikož vše potřebné tato publikace obsahuje.

Kniha Vás provede krok za krokem třinácti kapitolami, od základního popisu jednotlivých nástrojů pro vývoj, přes návrh UseCase aplikace, samotný vývoj až po návod pro nasazení aplikace do App Store. Na konci knihy tak budete schopni vytvářet kvalitní mobilní aplikace pro několik platforem současně, to vše za použití JavaScriptu.

1.Vývojové prostředí a výběr frameworku

Pro vývoj nativní mobilní aplikace bude v našem případě použito dvou frameworků.

První má název PhoneGap (ve verzi 1.7) a díky jeho vlastnostem je možno přistupovat ke standardním funkcím telefonu jako jsou například GPS, fotoaparát, souborový systém, akcelerometr a mnohé další.

Dalším frameworkem, který bude použit, je jQuery Mobile (ve verzi 1.1.0). Tento framework nám bude sloužit především k vytváření jednotného a přívětivého uživatelského rozhraní.

Jako vývojové prostředí pro naši aplikaci bude použito Xcode studio (je ale možno použít jakýkoliv jiný editor), pro testování aplikace v iPhone simulátoru a na reálném zařízení budeme potřebovat Xcode studio, v našem případě bude použito Xcode studio ve verzi 4.

Xcode studio a tedy i testování aplikace v iPhone emulátoru a na reálném zařízení je možné pouze na zařízeních Macintosh. Pokud Mac nemáte, nemusíte si ho kvůli vytvoření funkční aplikace pořizovat. Musíte ale počítat s tím, že aplikaci nebude možno otestovat v iPhone emulátoru a ani v reálném iPhone zařízení. Většinu funkcí budete moci reálně vyzkoušet pomocí emulátoru s názvem Ripple, a to vše v rámci webového prohlížeče. O Ripple se ještě zmíním později dále v knize.

1.1PhoneGap

PhoneGap je aplikační platforma založená na HTML5, která umožňuje autorům aplikací přistupovat k nativním funkcionalitám iPhone a tyto aplikace umístit do aplikačních obchodů, v našem případě App Store. PhoneGap umožňuje vývoj aplikací i pro další platformy, jako Android, BlackBerry, Symbian, Windows Phone 7 a Bada, a to vše s minimálními změnami v kódu.

Zjednodušeně je tedy možno říci, že vývojáři stačí aplikaci napsat pouze jednou a poté jen provést nezbytné změny pro nasazení na další platformu. Jistě v tomto sami vidíte obrovskou výhodu, a to především v jednotnosti vývojového procesu a ohromné časové úspoře. To vše při použití HTML a JavaScriptu.

PhoneGap je open source implementací otevřených standardů, což znamená, že vývojáři a firmy mohou používat PhoneGap pro mobilní aplikace, které jsou zdarma, placené, open source nebo jakákoliv jiná kombinace výše zmíněných.

PhoneGap jako multiplatformní nástroj pro vývoj mobilních aplikací umožňuje přistupovat k funkcím telefonu, tato podpora se platformu od platformy liší. Pro lepší ilustraci je seznam podporovaných funkcí pro iPhone i další platformy uveden níže v přehledné tabulce.

Obrázek č. 1: Seznam podporovaných vlastností PhoneGap frameworku

Více informací naleznete na webové adrese http://PhoneGap.com/.

1.2jQuery Mobile

Unifikovaný framework pro tvorbu uživatelského mobilního rozhraní využívajícího HTML5 a CSS3 vlastností, určený pro všechny současné populární mobilní platformy. Framework staví na jQuery a jQuery UI frameworku. jQuery Mobile přináší také výhodu v lehce přizpůsobitelném a skinovatelném designu pomocí on-line nástroje ThemeRoller (http://jquerymobile.com/themeroller/index.php).

Více informací naleznete na webové adrese http://jquerymobile.com/.

1.3Výběr vývojového prostředí

Samotný aplikační balíček určený pro spuštění aplikace na reálném iPhone zařízení je možno zkompilovat a vytvořit pouze za pomoci počítače Mac a vývojového studia Xcode. Pokud ale výše uvedené nástroje nevlastníte, nemusíte věšet hlavu. Jelikož aplikační logika aplikace bude psaná za pomoci JavaScriptu, je možno velké množství funkcionalit vyzkoušet i rámci emulátoru s názvem Ripple.

Xcode 4 je vývojové prostředí od firmy Apple, je určeno pro vývoj aplikací pro iPhone/iPad a celkově celou Mac platformu. Běží na Mac OS X Snow Leopard a zahrnuje Xcode IDE, Instruments, iOS Simulator a poslední SDK pro Mac OS X a iOS.

Abyste mohli vyvíjet pro iOS (iPhone/iPad/iPod), je nutné zaregistrovat se u Apple jako vývojář. To je zdarma. Registrací získáte přístup ke všemu, co potřebujete k vývoji jak na iOS, tak i na OSX (v pozdějších kapitolách bude vše podrobně popsáno). Po registraci máte přístup k SDK i k vývojovému prostředí Xcode. Vše se stahuje z Apple zdarma. Toto vše je podmíněno nákupem počítače Mac, jinde totiž Xcode nerozeběhnete a nelze jej tedy jinde vyvíjet (existují samozřejmě různé postupy, jak rozběhnout Xcode na Mac OS i pod Windows, ale to je mimo rámec této knihy).

S ohledem na maximální možnou použitelnost této publikace budeme zde uváděné příklady testovat v rámci zmiňovaného Ripple emulátoru. Použití Xcode a vytvoření aplikačního balíčku pro testování na reálném zařízení vytvoříme až v pozdějším kroku, jakmile dokončíme a otestujeme aplikaci v rámci Ripple emulátoru. Tím taktéž celý proces velmi zrychlíme, jelikož změny v rámci Ripple emulátoru dokážeme rychleji zapracovat, než kdybychom znovu a znovu kompilovali kód v rámci Xcode. Nyní si ale pojďme představit blíže některá vývojová prostředí.

S ohledem na výše uvedené jsme tedy v současné chvíli zcela nezávislí na výběru našeho editoru. Zde uvedené příklady jsou psány v open source vývojovém prostředí s názvem Eclipse, které je možno stáhnout na adrese http://www.eclipse.org/downloads/. Jedná se o open source vývojovou platformu, která je pro většinu lidí známa jako vývojové prostředí (IDE) určené pro programování v jazyce Java. Flexibilní návrh této platformy dovoluje rozšířit seznam podporovaných programovacích jazyků za pomoci pluginů. Právě pluginy umožňují toto vývojové prostředí rozšířit například o návrh UML, či zápis HTML nebo XML a získat tak velice robustní nástroj pro vývoj mobilních aplikací. Dalším aspektem pro výběr tohoto vývojového prostředí je i ta skutečnost, že za použití pluginu sloužícího vývoji pro platformu Android získáme plnohodnotné vývojové prostředí, včetně emulátoru Android zařízení pro vývoj nativních aplikací i pro tuto platformu. Více informací naleznete na adrese http://developer.android.com/sdk/index.html.

Dalším nástrojem, který je možno doporučit, především díky jeho integraci jQuery Mobile, je nástroj od firmy Adobe s názvem DreamWeaver. Jeho předností je již zmiňovaná integrace jQuery Mobile společně s dobře fungujícím IntelliSense doplňováním kódu a v neposlední řadě také souběžné zobrazení editovaného kódu a zároveň okamžité zobrazení provedených změn v designu aplikace a export aplikačního balíčku pro iPhone i Android přímo z DreamWeaveru. Nutno podotknout, že tento nástroj je placený, 30denní testovací verze je ale ke stáhnutí zdarma. Více informací naleznete na adrese http://www.adobe.com/cz/products/dreamweaver.html.

1.4Emulátory

Xcode, iPhone a iPad emulátor

V rámci Xcode studio je možno testovat aplikace na iPhone a iPad, Xcode ve verzi 4 nabízí možnost otestovat aplikace na iPhone a iPad ve verzi 4 a nižší. Pro každé emulované zařízení je možno mít samostatné nastavení.

Obrázek č. 2: iPhone emulátor v rámci Xcode prostředí

Ripple emulátor

Ripple je multiplatformní mobilní emulátor, který je vyroben na míru pro vývoj a testování mobilních aplikací za pomoci HTML5. Ripple si klade za cíl eliminovat úskalí, jimž čelí mobilní vývojáři díky roztříštěnosti dnešní platformy na trhu s mobilními zařízeními.

Ripple je zaměřen mimo jiné také na práci s PhoneGap frameworkem, který, jak již bylo uvedeno, nám umožňuje pracovat s nativními funkcemi dnešních chytrých telefonů, a to vše v rámci JavaScriptu a HTML5!

Ripple emulátor nám také umožňuje využití stávajících nástrojů k provádění ladění JavaScriptu, HTML DOM inspekce, automatizovaného testování, stejně tak jako testování na více zařízeních a rozlišení displeje v reálném čase a bez nutnosti znovu restartovat emulátor.

Díky Ripple máte možnost simulovat funkce jako GPS, kompas, akcelerometr, datové připojení, polohu displeje a další. Emulátor jako takový je nabízen zdarma a jeho používání je velice intuitivní a jednoduché.

Emulátor je dostupný ve dvou provedeních, v první jako plugin do Google Chrome prohlížeče, který jednoduše nainstalujete z tohoto odkazu: https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc. V dalším provedení jako samostatná aplikace, která je ke stáhnutí na tomto odkazu: https://bdsc.webapps.blackberry.com/HTML5/download/.

Obrázek č. 3: Ripple emulátor v rámci prohlížeče Google Chrome

1.5Nastavení a konfigurace (stáhnutí PhoneGap pro Xcode, workspace)

Abychom naši první aplikaci mohli otestovat, potřebujeme si připravit nový projekt a nastavit si vše potřebné. Připravíme si tedy podklady pro náš první projekt (dále jen workspace). Pojďme se podívat, co k tomu budeme potřebovat.

Pokud nepoužíváte Mac OS a nemůžete tedy stáhnout a používat Xcode, přeskočte tuto kapitolu a pro svůj projekt si založte adresář pojmenovaný HiWorld, do kterého budete přidávat postupně všechny části našeho prvního projektu.

1.Stáhnutí a instalace Xcode – Xcode je možno stáhnout do Macintoshe přímo z iTunes, a to pomocí odkazu http://iTunes.apple.com/us/app/xcode/id497799835?mt=12. Poté Xcode nainstalujeme klasickým způsobem.

2.Stáhnutí a instalace PhoneGap – PhoneGap plugin nalezneme ke stáhnutí na adrese http://PhoneGap.com/download. V závislosti na použitém operačním systému je nabídnut ke stáhnutí instalátor. Tento instalátor nainstalujete klasickým způsobem.

3.Založení nového projektu v Xcode studio – po spuštění Xcode zvolte z menu New a poté New Project. Uvidíte následující nabídku, viz obrázek č. 4. Poté klikněte na tlačítko Next pro pokračování.

Obrázek č. 4: Nabídka s výběrem aplikace založené na PhoneGap frameworku

4.Na další obrazovce vyplňte položky Product Name a Company Identifier, přičemž pole Product Name označuje název naší aplikace, například tedy „HiWorld“, a jako Company Identifier zadejte řetězec „com.PhoneGap“, viz obrázek č. 5.

Obrázek č. 5: Zadání názvu aplikace

5.Po kliknutí na tlačítko Next zvolte adresář, do kterého nový projekt uložíte.

6.V tuto chvíli byste měli již vidět strukturu projektu uvnitř Xcode studia. Stiskněte tlačítko s nápisem Run nahoře v levém rohu. Po stisknutí tohoto tlačítka se spustí sestavení projektu.

7.Po spuštění projektu v emulátoru bychom v tuto chvíli měli vidět chybové hlášení, které nás bude informovat o tom, že soubor s názvem index.html nebyl nalezen. Toto hlášení je v tuto chvíli v pořádku a hned se dozvíte, jak situaci ošetřit.

8.Chybového hlášení se zbavíme tak, že zkopírujeme adresář s názvem www do projektu. Kliknutím pravého tlačítka v levém navigačním okně zobrazíme kontextovou nabídku. Zde klikneme na tlačítko s názvem Show in Finder, to nám otevře aktuální adresář projektu ve Finderu.

9.Zde uvidíme již vytvořený www adresář, který musíme přidat do našeho projektu.

10.Následující krok je důležitý! Myší chytněte www adresář a přetáhněte jej do Xcode 4. Nestačí pouze přetáhnout www adresář do adresáře aplikace. Adresář musí být přetažen přímo do Xcode 4, viz obrázek níže.

Obrázek č. 6: Adresář www musí být zkopírován zde

11.Po přetažení by se měla zobrazit obrazovka s několika doplňujícími nastaveními. Důležité: ujistěte se, že jste zvolili správně volbu Create folder references for any added folders, a klikněte na tlačítko Dokončit.

Tímto krokem jsme úspěšně založili nový PhoneGap projekt pro iPhone v rámci Xcode studia. Ověření, že vše proběhlo v pořádku a náš projekt obsahuje soubory, které potřebujeme, provedeme tak, že na našem projektu nalezneme adresář s názvem www, který by měl obsahovat soubor s názvem index.html. Pokud jste soubor nalezli, je vše připraveno k vytvoření naší první aplikace a otestování v simulátoru. O tom bude pojednávat následující podkapitola.

1.6Jednoduchá aplikace Hi World

V této podkapitole bude popsána velmi jednoduchá aplikace a její otestování v iPhone emulátoru.

Hello World, či v našem případě Hi World, je aplikace, která vypíše na výstupní zařízení (v našem případě displej telefonu) text „Hi, world!“. Aplikace „Hi World“ se používá jako ukázka při výuce programování v určitém programovacím jazyce a mnoho studentů ji píše jako svůj první malý program.

V prvním kroku nalezneme v rámci našeho projektu adresář s názvem www a v něm soubor s názvem index.html. Tento soubor otevřeme buďto přímo v editoru Xcode, popřípadě v jakémkoliv jiném textovém editoru.

Jedná se o klasickou HTML stránku, která obsahuje klasické HTML tagy a několik meta tagů.

Kód je okomentovaný, aby byl dobře pochopitelný i pro začátečníky.

<!DOCTYPE HTML>

<HTML>

<head>

<title>Titulek stránky</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<h1> Hi, World!</h1>

</body>

</HTML>

<!DOCTYPE HTML>: doctype definice HTML dokumentu, jedná se o nepárový tag

<HTML>: Uvozovací značka HTML dokumentu

<head>: Hlavička HTML dokumentu, bude obsahovat všechny v budoucnu obsažené skripty (PhoneGap, jQuery Mobile a další)

<title>: Titulek stránky, při použití kódu pro nativní mobilní aplikace se jedná o téměř nepodstatný tag, situace by se změnila, pokud by se jednalo o mobilní web, v tom případě by tento tag měl relativně velký význam

<meta name="viewport">: Toto nastavení říká prohlížeči, jak má rozmístit obsah na displej, a informuje prohlížeč o tom, že stránka je optimalizovaná pro mobily. Náš příklad říká prohlížeči, aby nastavil viewport na šířku zařízení a zachoval měřítko

<body>: Uvnitř tohoto tagu se bude vyskytovat všechen viditelný obsah stránky naší mobilní aplikace. Ať už to tedy bude hlavička stránky, tlačítka, seznamy, vše bude obsaženo uvnitř tohoto tagu. V tuto chvíli obsahuje pouze nápis „Hi, World!“ obalený v tagu nadpisu <h1>. Tento nadpis tak bude jediná viditelná část z naší aplikace, jakmile aplikaci spustíme v emulátoru

Náš nový kód uložíme a přejdeme ke spuštění v emulátoru.

Zájemcům o hlubší problematiku mobilního webu v HTML5 doporučuji k pročtení článek Mobilizujeme web v HTML5 na webu Zdroják.cz, více na http://www.zdrojak.cz/clanky/mobilizujeme-web-v-HTML5/.

1.7Spuštění v emulátoru

Xcode

1.Ujistěte se, že aktivní SDK v levém horním menu je nastaveno na Simulator+version.

2.Stiskněte tlačítko s nápisem Run nahoře v levém rohu.

3.Po stisknutí tohoto tlačítka se spustí sestavení projektu a během několika okamžiků byste měli vidět svou první aplikaci v iPhone emulátoru, viz obrázek č. 7.

Obrázek č. 7: Ukázka první aplikace v iPhone emulátoru prostředí Xcode

Ripple emulátor

1.Zjistěte cestu k umístění souboru index.html a tuto cestu zadejte do adresního řádku Chrome prohlížeče. Načte se klasická HTML stránka.

2.Nyní stiskněte tlačítko pro aktivaci Ripple emulátoru, je umístěno vpravo nahoře, viz obrázek č. 8.

3.Z nabídky zvolte možnost Enable a z výběru prostředí pro běh emulátoru zvolte PhoneGap.

4.Inicializace emulátoru může chvilku trvat, a pokud jste vše udělali správně, měli byste svůj první projekt vidět v emulátoru Ripple, viz obrázek č. 9.

Obrázek č. 8: Aktivace Ripple emulátoru

Obrázek č. 9: Aplikace Hi, World v prostředí Ripple emulátoru

2.Vývoj reálné aplikace krok za krokem

Následující kapitola bude zaměřena na vývoj reálně funkční aplikace. Pro naše účely zvolíme vývoj jednoduchého klienta pro sociální síť Twitter. V rámci této aplikace se naučíte pracovat s protokolem OAUTH, zpracovávat data v JSON formátu, pracovat s GPS navigací a Google mapami.

2.1Vlastnosti a popis aplikace

Aplikaci Hi World máme úspěšně za sebou. Bohužel, aplikace kromě spuštění sebe sama a vypsání textu na displej neumí nic jiného. Byla by tedy škoda si nevytvořit aplikaci, jejíž funkcionalita bude přeci jen na vyšší úrovni.

Jako vhodnou aplikaci zvolíme klienta pro sociální síť Twitter. Tato aplikace byla zvolena z důvodu, že v rámci jejího vývoje si procvičíme nejpoužívanější funkcionality dnešních mobilních aplikací, zejména práci s technologiemi:

■JSON a AJAX

■GPS

■Google Maps

V neposlední řadě procvičíme také práci s lokálním úložištěm. Aplikace tedy bude kompletně funkční Twitter klient, který bude umožňovat následující funkcionality:

■Přihlášení uživatele pod svůj uživatelský účet na Twitteru.

■Získání nových příspěvků (Tweetů) od ostatních uživatelů.

■Odeslání nového příspěvku na Twitter včetně GPS souřadnic uživatele.

■Vizualizace příspěvků v rámci Google Maps.

V průběhu celého procesu vytváření aplikace budete moci nahlédnout do referenčního manuálu na konci této knihy. Manuál jako takový slouží k popisu jednotlivých funkcí frameworku PhoneGap.

Pokud se rozhodnete po dokončení aplikace její funkcionalitu rozšířit například o možnost pořízení fotografií, stačí jen nahlédnout do strukturované referenční příručky a dohledat si informace o potřebné funkcionalitě a jejím použití.

Pojďme se tedy pustit do práce na naší reálně použitelné mobilní aplikaci.

2.2Use Case diagram aplikace

Před samotným programováním aplikace je třeba si navrhnout takzvaný Use Case diagram aplikace, který nám slouží k zobrazení dynamické (funkční) struktury systému z pohledu uživatele. Je primárně určen k definici chování systému, aniž by odhaloval jeho vnitřní strukturu.

Na níže uvedeném diagramu si tedy zjednodušeně ukážeme, jak v naší budoucí aplikaci bude fungovat přihlášení uživatele pod Twitter účet.

2.2.1Use Case přihlášení uživatele

1.Po spuštění aplikace je uživatel vyzván k zadání svých přihlašovacích údajů.

2.Pokud už své přihlašovací údaje zadal dříve (již se úspěšně přihlásil), je automaticky přesměrován na hlavní stránku aplikace.

3.Pokud se přihlášení nezdařilo, je uživateli zobrazena zpráva.

Use Case přihlášení by tedy vypadal zhruba jako na obrázku č. 10.

Obrázek č. 10: Diagram pro přihlášení

2.2.2Use Case hlavní stránky aplikace

2.2.3Use Case přidání nového příspěvku

2.2.4Use Case výpis historie mých příspěvků

2.2.5Use Case Nastavení aplikace

2.3Založení nového projektu

2.4Spuštění aplikace

2.5Import důležitých knihoven pro běh aplikace

■adresář/images

2.6Úvodní strana – rozložení ovládacích prvků

2.7Inicializace aplikace a ověření funkčnosti