Použití webových technologií při vývoji mobilních aplikací na platformě Android

VYSOKÁ ŠKOLA EKONOMICKÁ V PRAZE Fakulta informatiky a statistiky Katedra informačního a znalostního inženýrství Použití webových technologií při vývoji mobilních aplikací na platformě Android Bakalářská práce Lukáš Kameníček Vedoucí práce: Ing. Jiří Kosek květen 2011

Čestné prohlášení Prohlašuji, že jsem vypracoval samostatně bakalářskou práci na téma Použití webových technologií při vývoji mobilních aplikací na platformě Android. Použitou literaturu a další podkladové materiály uvádím v přiloženém seznamu literatury. V Praze dne... května 2011... Podpis

Poděkování Rád bych poděkoval Ing. Jiřímu Koskovi za přijetí mého tématu a za vedení této bakalářské práce. Dále děkuji Ing. Tomáši Pětivokému, za možnost realizace Android aplikace pro jeho projekt a za cenné připomínky k jejímu vývoji.

Anotace Bakalářská práce se zabývá vývojem aplikací určených pro operační systém Android. Nejprve definuje jakými způsoby lze aplikaci pro tuto platformu poskytnout a poté vše potřebné pro to, abychom mohli s vývojem začít. Stručně uvádí výhody a nevýhody použití konkrétních přístupů a pojednává o souvisejících vývojových prostředích. V další kapitole se zaměřuje na hlavní téma, kterým je využití webových technologií HTML, CSS a JavaScript při vývoji aplikací. Obsažena je i možnost propojení webových technologií s Java aplikací na straně klienta. Dále pojednává o způsobu využití externích periferií telefonu jako je fotoaparát nebo GPS. V poslední části pak prověřuje teoretické poznatky prvních kapitol při jejich použití v praxi, a to realizací prototypové aplikace postavené na webových technologiích a využívající fotoaparátu telefonu. Klíčová slova: Android, aplikace, mobilní telefon, vývojové prostředí, webové technologie, HTML, CSS, ViewPort, WebView, Android Market

Annotation Bachelor work deals with applications development for operating system Android. First defines a ways of providing applications for this platform and after that defines everything necessary for us to be able to begin development. Briefly stated the advantages and disadvantages of specific approaches and discusses the related development environments. The next chapter focuses on the main theme, which is the use of Web technologies HTML, CSS and JavaScript during application development. The possibility of linking web technology with Java applications on the client side is included. It also deals with ways to use external periphery such as camera phone or GPS. In the last chapter examines the theoretical knowledge of the first chapters of their use in practical realization of prototype application based on Web technologies and using your camera. Keywords: Android, application, mobile phone, development environment, web technologies, HTML, CSS, ViewPort, WebView, Android Market

Obsah Úvod... 8 1. Operační systém Android... 10 2. Aplikace pro operační systém Android... 12 3. Prostředí a nástroje pro vývoj aplikací... 14 3.1. Požadavky na vývojovou PC stanici... 15 3.2. Nástroje pro vývoj... 15 3.2.1. Android SDK... 15 3.2.2. Android Development Tools plugin... 15 3.3. Vývojová prostředí... 15 3.3.1. Eclipse... 16 3.3.2. NetBeans... 20 3.3.3. Další vývojová prostředí... 20 3.4. Jazyky... 20 4. Použití webových technologií při vývoji Android aplikací... 22 4.1. Rozlišované typy displejů... 22 4.2. ViewPort a jeho nastavení... 23 4.3. Cílování CSS stylů pro různé displeje... 25 4.4. Cílování obrázků pro různé displeje... 26 4.5. Cílování JavaScriptu pro různé displeje... 26 4.6. Podpora HTML5... 27 4.6.1. HTML5: Client-side databáze... 28 4.6.2. HTML5: OFFLINE webové aplikace... 29 4.6.3. HTML5: Geolocation API... 30 4.7. CSS3... 31 4.8. Podpora externích periferií... 32 4.9. WebView... 32 4.10. Použití JavaScript rozhraní... 33 4.11. Využití XML... 34 4.12. Shrnutí webových aplikací pro Android... 36 5. Realizace Android aplikace... 37 5.1. Zadání, cíl a popis aplikace... 37 5.2. Proč Android?... 38 5.3. Způsob realizace... 38 5.4. Způsoby výdělku... 39 5.5. Vývoj... 40 6

Obsah 5.5.1. Na straně webového serveru... 40 5.5.2. Na straně client-side aplikace... 43 5.5.3. Využití JS rozhraní ve velkém... 46 5.5.4. Testování... 48 5.5.5. Publikování Android aplikace... 48 5.5.6. Obrazová ukázka vytvořené aplikace... 49 6. Závěr... 50 Literatura... 52 Seznam použitých zkratek... 54 A. Podíl verzí Androidu a typů displejů... 56 7

Úvod Operační systém Android určený pro mobilní telefony, je momentálně vyvíjen společností Google, Inc. Google je ukázkou jednoho z nejpozoruhodnějších internetových úspěchů dnešní doby. Díky jeho nekonvečnímu přístupu ohrožuje společnosti jako Microsoft a dokázal zatřást i Wall Streetem, jak o něm píše David A.Vise v knize Google story [1]. V roce 2005, tak jako jiné projekty, koupil Google menší kalifornskou firmu Android, Inc, která systém Android vyvíjela. Tímto, prozatím ne veřejně, vstoupil na trh mobilních telefonů [2]. Nejprve se spekulovalo o tom, že Google vyvíjí svůj vlastní mobilní telefon. V roce 2007 však byla ohlášena otevřená softwarová platforma pro mobilní telefony. V září 2008 byl oficiálně představen operační systém Android 1.0. Společně s tímto novým OS přišel na svět také Android Market, což je obdoba App Store firmy Apple, určeného zejména pro mobilní telefony iphone. V obou případech se jedná o službu pro stahování mobilních aplikací a her. Internetová stránka AndroLib.com, kterou jsem často navštěvoval pro dobrý přehled Android aplikací, k dnešnímu dni (15. února 2011) čítá 253 514 aplikací ke stažení. Veškeré tyto aplikace byly až donedávna přístupné pouze z mobilního zařízení. Nyní je již Android Market přístupný i z osobního počítače, a to od února 2011. Téma Android aplikací jsem si vybral, protože Android je stále poměrně nový a rychle se rozvíjející operační systém. V jeho budoucnost věřím a myslím si, že stále více firem bude chtít mít pro tuto platformu svou aplikaci. Zajímalo mne zejména to, jak se tyto aplikace vyvíjejí. Jak jsem později zjistil, tak při jejich vývoji mohu využít nejen zkušenosti z předmětů, kde se programovalo v Javě, ale i webové technologie, které často využívám při tvorbě webových projektů. Cílem této práce je zjistit, jakými způsoby lze vyvíjet aplikace určené pro operační systém Android, v jakých vývojových prostředích a za pomoci jakých jazyků. Pokud bude možností více, tak najít jejich výhody a nevýhody. Dále se pokusím specifikovat případné další potřeby nebo požadavky pro jejich vývoj a běh. Druhým cílem je popsat možnosti aplikací postavených na webových technologiích HTML5, CSS a JavaScript na platformě Android, s přihlédnutím k podpoře práce s externími periferiemi jako jsou GPS, akcelerometr nebo fotoaparát. 8

Úvod Posledním cílem této práce je aplikovat zjištěné teoretické poznatky na praktickou situaci. S využitím webových technologií bych rád realizoval aplikaci určenou pro operační systém Android, využívající externí periferie telefonu. 9

Kapitola 1 Operační systém Android Operační systém Android je postaven na Linuxu, což umožňuje výrobcům telefonů získat mobilní operační systém s nižšími náklady. Android má tak povahu open source, neboli otevřeného softwaru. To znamená, že jeho zdrojový kód je veřejně dostupný pro vývojáře, kteří jej mohou prohlížet i upravovat. Je však nutné dodržet určité podmínky blíže specifikované na stránce source.android.com, věnované zdrojovému kódu, licencování atd. [3]. Mezi výrobce mobilních telefonů, kteří začali OS Android instalovat a nabízet v jejich zařízeních, patří značky Dell, HTC, LG, Motorola, Samsung a Sony Ericsson [4]. Další známý výrobce mobilních telefonů NOKIA se spojil s konkurenčním produktem Windows Phone, jak oznámili Stephen Elop z Nokie a Steve Ballmer z Microsoftu na tiskové konferenci, jejíž záznam je dostupný na webu engadget.com [5]. U telefonů Nokia tedy v nejbližších pěti letech, na které je podepsána smlouva, OS Android očekávat nemůžeme. Nejnovější verze tohoto operačního systému, Android 3.0 s kódovým označením Honeycomb, je určen zejména pro výkonnější zařízení jako jsou tablety. Pro mobilní telefony jsou vhodnější předchozí verze. Kompletní přehled aktuálně používaných verzí spolu s jejich podílem obsahuje příloha A Podíl verzí Androidu a typů displejů. Podle zdroje StatCounter, který vede nejrůznější statistiky a jednou z nich je i zastoupení mobilních operačních systémů mezi uživateli internetu, je zřejmé, že Android je již delší dobu na vzestupu. V únoru 2011 překonal BlackBerry, čímž se dostal na třetí pozici. Graf za posledních 12 měsíců zobrazuje obrázek 1.1 Zastoupení mobilních OS mezi uživateli internetu ve světě [16]. První místo patří operačnímu systému SymbianOS, který vyvíjí a instaluje do svých zařízení Nokia. Do budoucna se ale se Symbianem nepočítá, a to z důvodu již zmíněné dohody mezi firmami Nokia a Windows. SymbianOS tak bude postupně nahrazován operačním systémem Windows Phone. Druhé místo drží systém ios, který je spojen s firmou Apple a zejména s telefony iphone. 10

1. Operační systém Android Obrázek 1.1. Zastoupení mobilních OS mezi uživateli internetu ve světě [16] V České republice jsou výsledky pro Android ještě příznivější. Na následujícím obrázku je zobrazen stejný graf, ale omezený na ČR. Podíl OS Android u nás činíl na konci dubna 25,5 %. Obrázek 1.2. Zastoupení mobilních OS mezi uživateli internetu v ČR [25] 11

Kapitola 2 Aplikace pro operační systém Android Existují dva způsoby, jak poskytnout aplikaci pro systém Android. Jedním je client-side aplikace, která využívá oficiální balíček SDK a instaluje se kompletně do telefonu uživatele. Většina z nich je zveřejněna v Android Marketu na adrese http://market.android.com, odkud je potom možné stahovat i všechny další aktualizované verze, pokud nějaké vyjdou. Zda je stažení aplikace zpoplatněno nebo je zcela zdarma závisí na rozhodnutí autorů, kteří ji tam zveřejní 1. Ohledně plateb ještě Google umožnil takzvaný In-app Billing, což je služba umožňující uživatelům koupit digitální obsah až v dané aplikaci. Příkladem by mohli být platby za jednotlivé knihy, mp3 nebo herní předmět [17]. Druhým způsobem je webová aplikace. Ta se nikam neinstaluje, využívá webových technologií a zpřístupněná je pomocí webového prohlížeče. Pokud nějaký web má verzi pro mobilní telefony a detekuje přístup právě z mobilu (většinou na základě zjištěného rozlišení), tak bývá zvykem uživatele automaticky přesměrovat. Webové aplikace určené nejen pro Android, ale obecně pro mobilní telefony, kladou důraz zejména na minimum přenášených dat a uspořádání přizpůsobené menšímu displeji. Měly by počítat i s většími klikacími prvky pro snazší ovládání webové stránky pomocí prstů na dotykových displejích. Pokud určitá aplikace vyžaduje stálé připojení k internetu pro získávání dat (například emailový klient, nebo nějaká vyhledávácí služba), je použití webové aplikace vhodnější. Jelikož v client-side aplikaci bychom museli stále dokola sestavovat síťové požadavky, zpracovávat obdržená data a umisťovat je do uživatelského rozhraní (layoutu) Android aplikace. V tomto případě hodně ušetří práci, když jednoduše zobrazíme webovou stránku se všemi potřebnými uživatelskými daty. Android navíc podporuje možnosti, jak zobrazovat webovou stránku stejně pro různé typy a velikosti displejů. Pomocí CSS a JavaScriptu umí například načítat jiné styly a různé obrázky. Díky tomu je tvorba webových aplikací vypadajících stejně pro různá Android zařízení mnohem snazší. 1 V ČR ale prozatím placené aplikace zveřejnit nejdou. Kdy bude Česká republika zařazena mezi další země, ve kterých lze aplikace zpoplatnit není prozatím známo. 12

2. Aplikace pro operační systém Android I tak ale může webová aplikace představovat určité nevýhody. Není možné ji umístit na Android Market, kde se dobře prezentuje a případně si účtovat za její stažení drobné platby tak jako za jiné aplikace. U aplikací, které by dokázaly fungovat bez internetu, je tu nevýhoda nemožnosti použít aplikaci offline 2. Další omezení webových aplikací by mohla být nemožnost tvorby widgetů, což jsou malá okna na pracovní plochu systému Android, ve kterých je možné zobrazit nějaké nejpodstatnější info z dané aplikace. Nevyužijeme ani Android notifikace, či služby běžící na pozadí. A tak se dostáváme ještě ke třetímu způsobu, který je kombinací předchozích dvou variant. Existuje možnost vytvořit client-side aplikaci, která v sobě zobrazí webovou aplikaci pomocí prvku WebView, který je popsán v kapitole 4.9 WebView. Webová stránka pak může být zobrazena v určitém okně klientské aplikace, buď jen v části layoutu, nebo i kompletně přes celé zobrazení. Jako rozhraní pro komunikaci mezi webovou a client-side aplikací se pak používá JavaScript. Toto spojení představuje nejvhodnější variantu pro vývoj mé prototypové aplikace, kterou souběžně s touto prací vyvíjím. Měla by zpřístupnit jednu již fungující webovou aplikaci ve verzi pro mobilní zařízení Android. Požadavkem je mít synchronizovaná data uživatelského účtu nehledě na způsob, kterým se do aplikace uživatel přihlásí a bude provádět změny. Zároveň by ale měla využít výhod client-side aplikací a používat fotoaparát, na což samotná webová aplikace nestačí. Více o této aplikaci a její realizaci naleznete v kapitole 5 Realizace Android aplikace. 2 Platí pouze pro Android nižší verze než 2.0. Od Androidu 2.0 lze využít databáze na straně klienta a cachování právě pro účely fungování offline. 13

Kapitola 3 Prostředí a nástroje pro vývoj aplikací Na úvod k této kapitole si připomeneme rozdělení aplikací na webové (na straně serveru a dostupné přes webový prohlížeč) a na aplikace klientské (instalované do mobilního telefonu). Proto i popis vývojových prostředí a jazyků potřebných pro vývoj těchto aplikací je potřeba rozlišit. K webovým aplikacím postačí jeden odstavec, protože potřebné jazyky nebudeme nijak rozebírat, a co se vývojových prostředí týká, tak tam je to velmi individuální. Zdatnější vývojáři zvládnou napsat webovou aplikaci i v poznámkovém bloku. Rozebrat všechny možné textové editory pro různé platformy nebo specifičtější prostředí pro skriptovací jazyky by vystačilo na samostatnou práci. Webové aplikace pro Android zvládneme stejně jako každé jiné webové aplikace napsat v jakémkoli textovém editoru na kterékoli platformě. Pro jejich běh potřebujeme server, na kterém běží například Apache HTTP Server. Nezbytné minimum je znalost značkovacího jazyku HTML. Pro kvalitnější webové stránky je třeba znát kaskádové styly CSS. Pro dynamické webové stránky s databází ještě skriptovací programovací jazyk (např. PHP) a dotazovací jazyk (SQL) pro práci s daty v databázi. Dalším jazykem, který je také hojně využíván, je JavaScript. JavaScript je skriptovací jazyk spouštěný na straně klienta v jeho prohlížeči, často používaný k různým efektům spouštěným na události (např. kliknutí, najetí myši, tažení myši). Pro více informací o tvorbě webových stránek doporučuji web http://www.jakpsatweb.cz. Tato kapitola dále pojednává pouze o prostředí a nástrojích pro vývoj client-side aplikace. I když bychom se zabývali poskytnutím jenom webové aplikace, tak pro otestování výsledku určitě nebude na škodu využít např. emulátoru. Můžeme pak otestovat chování a zobrazení webových stránek na virtuálních zařízeních s různou verzí Androidu i různě velkými displeji. Proto shledávám i následující kapitoly za užitečné, pro moje zvolené téma. Navíc mnoho vývojářů klientské aplikace spolu s webovými aplikacemi spojuje, což je další důvod nutné instalace vývojového prostředí a nástrojů od Googlu. 14

3. Prostředí a nástroje pro vývoj aplikací 3.1. Požadavky na vývojovou PC stanici Pro vývoj potřebujeme jeden z podporovaných operačních systému, jejichž výpis pochází z oficiální dokumentace dostupné online na adrese http://developer.android.com. Windows XP (32-bit), Vista (32- nebo 64-bit), nebo Windows 7 (32- nebo 64-bit) Mac OS X 10.5.8 nebo novější (pouze x86) Linux (Ubuntu Linux verze 8.04 nebo novější, Lucid Lynx, GNU C Library (glibc) 2.7 nebo novější) Dále pak vývojové prostředí, o kterých pojednává kapitola 3.3 Vývojová prostředí a Java development kit (JDK) verze 5 nebo 6. K hardwarovým požadavkům Google uvádí pouze volné místo na disku, které jsem i s volitelnými součástmi spočítal přibližně na 600 MB. 3.2. Nástroje pro vývoj 3.2.1. Android SDK SDK je vývojářský balíček od Googlu, obsahující nástroje jako emulátor, knihovny Androidu, debugger, ukázkové kódy či kompletní dokumentaci. První stažení SDK je nutné provést ručně. Jedná se o takzvaný Starter balíček. Pro stažení dalších částí SDK a pozdější aktualizace je nejpohodlnější použít ADT plugin pro Eclipse. Nejnovější vydanou verzí je od února 2011 SDK pro Android 3.0. 3.2.2. Android Development Tools plugin Pro Eclipse vydal Google velmi užitečný Android Development Tools (ADT) plugin umožňující pohodlné ovládání a aktualizování všech částí SDK balíčku. Přidává do Eclipse v různých menu další možnosti, které při vývoji Android projektů můžeme použít. Dále umožňuje ladění aplikace na virtuálním zařízení ale i na reálném telefonu přes USB debugging. 3.3. Vývojová prostředí Pro vývoj aplikací můžeme podle oficiální dokumentace [6] použít nejlépe vývojové prostředí Eclipse, které má také povahu open source. Připouští se i jiné prostředí, kterým se ale dokumentace téměř nevěnuje. 15

3. Prostředí a nástroje pro vývoj aplikací 3.3.1. Eclipse Jako open source byl projekt Eclipse uvolněn společností IBM v roce 2004 [7]. V základu je Eclipse určen pro programování v jazyce Java. Tato platforma je ale postavena na možnosti dalších rozšiřitelných balíčků. Na tomto principu je po nainstalovaní dalších pluginů možné v Eclipse tvořit v PHP, C++, UML nebo HTML jazycích. Nehledě na to, zda se jedná o programovací, značkovací či jiný jazyk. Toto vývojové prostředí je silně doporučováno, zejména kvůli zmíněnému ADT pluginu od Googlu. Tento ADT plugin je tak sám o sobě ukázkou zmíněné rozšiřitelnosti prostředí Eclipse. Eclipse je ke stažení na adrese http://www.eclipse.org/downloads/. Nejnižší požadovaná verze pro vývoj Android aplikací je dle dokumentace Eclipse 3.5 (Galileo). Software je dostupný pro operační systémy Windows, Linux i MAC OS X (vše pro 32- i 64-bit). Toto vývojové prostředí se mi podařilo bez problému stáhnout i nainstalovat. Jeho uživatelské rozhraní mi vyhovuje, jelikož jsem se s ním již dříve setkal. Myslím, že nebude dělat problém ani pokud jste ho zatím nepoužili. Veškerými potřebnými úkony před vývojem Android aplikací nás provede oficiální dokumentace. Zejména ohledně použití oficiálního SDK balíčku a instalace ADT pluginu. Následně se vytvoří Android projekt. V průvodci zadáme několik základních údajů, ke kterým je v Eclipse vždy komentář a rovnou i kontrola s vysvětlením chyby při špatném vyplnění. Celý tento proces mi přišel jednoduchý. Na Eclipse si tak nemůžu v ničem stěžovat a sám bych jej také doporučil. Na následujících obrázcích je ukázka prostředí Eclipse doplněného o součásti ADT pluginu. 16

3. Prostředí a nástroje pro vývoj aplikací Obrázek 3.1. Manažer pro balíček SDK s výpisem stažených součástí a možností jejich aktualizace [zdroj: autor] Obrázek 3.2. Nově nabízené součásti SDK ke stažení, pro nejnovější verzi Android 3.0 [zdroj: autor] 17

3. Prostředí a nástroje pro vývoj aplikací Obrázek 3.3. Manažer pro vytvoření virtuálního zařízení [zdroj: autor] 18

3. Prostředí a nástroje pro vývoj aplikací Obrázek 3.4. Pohled na virtuální zařízení s operačním systémem Android 2.1 a low density displejem [zdroj: autor] Obrázek 3.5. GUI pro návrh uživatelského rozhraní [zdroj: autor] 19

3. Prostředí a nástroje pro vývoj aplikací 3.3.2. NetBeans Ještě nedávno v dokumentaci bylo přímo zmíněno vývojové prostředí NetBeans, ale dnes (17. března 2011) jsem ho už mezi jmenovanými nenašel, nicméně vyvíjet v něm je stále možné. NetBeans vznikl v České republice roku 1996, původně jako studentský projekt [12]. Je vyvíjen také jako open-source, za podpory firmy Oracle. Aktuální verzí je od srpna 2010 NetBeans IDE 6.9.1. NetBeans není tak jako Eclipse založen na rozšiřitelných balíčcích. Opravdu velkou nevýhodou je tak u něj nedostupnost oficiálního pluginu jako je ADT pro Eclipse. A tak ohledně používání SDK platí to samé co pro ostatní vývojová prostředí, popsána v kapitole 3.3.3 Další vývojová prostředí. Jednou významnou výhodou NetBeans vždy byl zabudovaný GUI builder, který pomáhá k rychlejšímu a snazšímu návrhu vzhledu uživatelského rozhraní Java aplikací. Ten v Eclipse chybí a je tam nahrazován ne tak dobře propracovanými open-source pluginy [13]. To by skutečně platilo pro vývoj běžných Java aplikací, ale když se na to podíváme z pohledu vývoje pro Android, tak tato výhoda bohužel ztrácí význam. Android aplikace mají uživatelské rozhraní založené na jazyce XML [14]. A oproti tomu ADT plugin pro Eclipse zrovna grafický návrh uživatelského rozhraní, který generuje příslušné XML tagy, obsahuje. Vidět jste jej mohli v předchozí kapitole na obrázku 3.5 GUI pro návrh uživatelského rozhraní [zdroj: autor] 3.3.3. Další vývojová prostředí Jakákoliv jiná vývojová prostředí nejsou vylučována a požadován je akorát zmíněný JDK 5 nebo 6 a dále pak Apache Ant verze 1.8 nebo novější. Apache Ant je Java knihovna, zajišťující kompilaci, testování či běh Java aplikací [8]. Ať už se pro jiné vývojové prostředí než Eclipse rozhodneme z jakéhokoliv důvodu, je třeba mít na paměti, že bez ADT pluginu šitého na míru pro vývoj Android aplikací budou muset být mnohé úkony prováděny přes příkazovou řádku. Což může někomu vyhovovat více, ale mě se lépe pracuje s ADT pluginem. 3.4. Jazyky K vývoji Android klientských aplikací potřebujeme primárně znalost Javy. Využije se i znalost základních API, které jsou pak doplněny spoustou dalších, určených přímo pro Android. Příkladem těch doplňujících by mohly být API pro práci s bluetooth, grafikou, SQLite databází, dotykovými gesty a další [9]. Odlišností od klasické Javy je následný překlad, který není do Java bytekódu, ale do bytekódu pro běh na Dalvik Virtual Machine, což by mělo být optimálnější pro mobilní zařízení. 20

3. Prostředí a nástroje pro vývoj aplikací Jak uvedl v článku na root.cz pan Petřek: Instrukce Dalvik bytekódu jsou úspornější nejen v binárním zápisu, ale také při emulaci [2]. Dále také zmiňuje, že u částí aplikace, kde vyžadujeme vysoký výkon, můžeme kód napsat v jazyce C/C++, který je pak přeložen přímo do nativního kódu. K tomu je potřeba Android NDK (Native Development Tools) [10]. 21

Kapitola 4 Použití webových technologií při vývoji Android aplikací Jakým způsobem můžeme využít webové technologie pro vývoj Android aplikací již bylo řečeno v předchozích kapitolách. Tak jako tak se jedná o klasické webové stránky. Jenom s tím rozdílem, že by měli být přizpůsobené pro různé mobilní zařízení, nebo konkrétně pro OS Android. V této kapitole se podíváme detailněji na možnosti přizpůsobování webové aplikace pro různé typy displejů u Android zařízení a také na způsob začlenění webové stránky do client-side Android aplikace pomocí prvku zvaného WebView, o kterém pojednává kapitola 4.9 WebView. Způsob, jakým se nám webová stránka jednak v prohlížeči tak ve WebView zobrazí, lze ovlivnit pomocí meta tagu viewport přímo v HTML kódu stránky. Pojem ViewPort představuje prostor pro vykreslení stránky. Více o ViewPortu a meta tagu naleznete v kapitole 4.2 ViewPort a jeho nastavení. 4.1. Rozlišované typy displejů V převážné většině dalších kapitol budou rozlišovány různé displeje mobilních telefonů. Podle jakých parametrů operační systém Android různé displeje odlišuje? Mezi často uváděné parametry výrobců a následně i obchodů patří rozlišení a velikost úhlopříčky. Ale ani jedno není v tomto případě zásadní. Android obecně rozlišuje tři typy displejů podle jiného, ne tak různorodého parametru. V dokumentaci je využíván pojem density (přeloženo jako hutnost). Tento pojem udává počet bodů na palec, neboli DPI (dots per inch). A zařízení s OS Android mají doposud právě 3 různé hodnoty DPI (120, 160 a 240). Přehled několika takových displejů znázorňuje tabulka 4.1 Přehled typů displejů, které lze emulovat v Android SDK. [zdroj: autor], 22

4. Použití webových technologií při vývoji Android aplikací která zobrazuje všechny 1 možné varianty dostupné jako virtuální zařízení v Android SDK. Dále budeme tedy rozlišovat low density, medium density a high density displeje. U jednotlivých displejů je v závorce uvedeno rozlišení v pixelech. Tabulka 4.1. Přehled typů displejů, které lze emulovat v Android SDK. [zdroj: autor] Low density (120), ldpi QVGA (240x320) WQVGA400 (240x400) WQVGA432 (240x432) Medium density (160), mdpi HVGA (320x480) High density (240), hdpi WVGA800 (480x800) WVGA854 (480x854) Toto rozdělení tří typů displejů podle parametru density je využíváno v obou typech aplikací pro Android. U client-side aplikací se s ním setkáme například při návrhu grafických prvků jako jsou ikony pro nabídku menu, notifikační ikony pro horní lištu (status bar) nebo u spouštěcí ikony viditelné v marketu a přehledu nainstalovaných aplikací. Každou z těchto ikon je totiž potřeba navrhnout a uložit ve třech velikostech pro každý typ displeje zvlášť. U webových aplikací nalezneme využití pro různé zobrazení webové stránky. Tu totiž můžeme přizpůsobit zvlášť pro low, medium i high density displej, například pomocí cílených CSS stylů. 4.2. ViewPort a jeho nastavení Jak bylo již zmíněno, ViewPort představuje prostor pro vykreslení stránky. Pozor ale musíme dát na to, že velikosti displeje a velikost ViewPortu nejsou to samé. ViewPort může bez problému přesahovat i mimo displej a pak webová stránka pokračuje i dále za okrajem displeje. Možnosti pro nastavení ViewPortu, které jsou dále popisovány, platí pro zobrazení ve webovém prohlížeči v každé verzi Androidu. Pro zobrazení stránky v client-side aplikaci pomocí WebView až od verze Android 2.0 2 [11]. Odlišné jsou jejich přednastavené hodnoty. V základním Android internetovém prohlížeči je stránka standardně zobrazována v módu overview, při kterém se na webovou stránku díváme s nadhledem jako na zmenšenou (oddálený pohled). Zde je zoom povolen. Ve WebView je ale standardně šířka ViewPortu nastavena na stejnou hodnotu jako je šířka displeje. Oproti webovému prohlížeči je zde mód overview 1 Mimo těchto předdefinovaných displejů je však možné vytvořit i virtuální zařízení se zcela vlastními parametry. A to jak rozlišení tak parametr density, což je vidět i na obrázku 3.3 Manažer pro vytvoření virtuálního zařízení [zdroj: autor]. 2 WebView standardně nastavení viewportu ignoruje. Je tedy potřeba jeho zohlednění v kódu aplikace povolit. 23

4. Použití webových technologií při vývoji Android aplikací vypnutý a tak se díváme na webovou stránku bez oddálení a navíc kvůli šířce ViewPortu stránka horizontálně nepokračuje za okraj displeje. Zde je zoom standardně blokován. V obou případech je změna vlastností tohoto vykreslování velmi snadná. Pomocí HTML meta tagu viewport můžeme nastavit šířku stránky, ve které se má na telefonu zobrazit. Dovolí nám například i nastavit, jak hodně bude možné stránku přiblížit nebo oddálit. Podmínkou je, že tento meta tag musí být umístěn v hlavičce <head> HTML kódu. Následuje seznam vlastností, které můžeme použít: height = výška ViewPortu, může být nastavena jako počet pixelů nebo na "device-height", což nastaví výšku dle parametrů zařízení width = šířka ViewPortu, může být nastavena jako počet pixelů nebo na "device-width", což nastaví výšku dle parametrů zařízení initial-scale = desetinné číslo udávající, v jakém přiblížení se má stránka zobrazit. Pro žádné přiblížení je hodnota 1.0 minimum-scale = desetinné číslo udávající maximální oddálení maximum-scale = desetinné číslo udávající maximální přiblížení user-scalable = hodnota yes/no povolující uživateli oddalovat a přibližovat stránku A teď již konkrétní příklady: Příklad 4.1. Nastavení prostoru pro vykreslení stránky na hodnotu šířky displeje cílového zařízení a zakázání funkce zoom <head> <title>titulek stránky</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> Příklad 4.2. Nastavení prostoru pro vykreslení stránky na 800 px s povolením funkce zoom <head> <title>titulek stránky</title> <meta name="viewport" content="width=800, user-scalable=yes" /> </head> 24

4. Použití webových technologií při vývoji Android aplikací 4.3. Cílování CSS stylů pro různé displeje Pokud chceme odlišit nějaké CSS vlastnosti podle typu displeje, tak jednou z možností je použití 3 meta tagů, které stačí umístit do HTML hlavičky <head>. Příklad 4.3. První způsob rozlišení CSS pro různé displeje [11] <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /> Druhým způsobem je cílování v jednom CSS souboru, kde odlišíme vlastnosti takto: Příklad 4.4. Druhý způsob rozlišení CSS pro různé displeje [11] #header { } background:url(medium-density-image.png); @media screen and (-webkit-device-pixel-ratio: 1.5) { // CSS pro high-density displeje #header { background:url(high-density-image.png); } } @media screen and (-webkit-device-pixel-ratio: 0.75) { // CSS pro low-density displeje #header { background:url(low-density-image.png); } } 25

4. Použití webových technologií při vývoji Android aplikací V CSS3 ještě navíc přibyla možnost zjištění orientace cílového zařízení. A tak se naskytla další možnost přizpůsobení vzhledu pomocí CSS stylů. Při dotazování na cílové médium je k dispozici parametr orientation, který může nabývat pouze dvou hodnot. První je portrait pro orientaci mobilního telefonu (či tabletu) klasicky na výšku. Druhá hodnota je landscape pro orientaci na šířku [21]. Příklad 4.5. Rozlišení CSS pro jinou orientaci zařízení @media all and (orientation:portrait) { } @media all and (orientation:landscape) { } Jelikož překlopení virtuálně vytvořeného Android zařízení emulátor neumožňuje, nemohl jsem tuto vlastnost řádně otestovat na starších verzích. Na telefonu s Androidem 2.2, který jsem měl k dispozici cílování funguje. Vzhledem k podpoře téměř všech CSS3 vlastností již od verze 1.5 (viz kapitola 4.7 CSS3 ) ale věřím, že vlastnost orientation podporována již od verze 1.5 bude také. 4.4. Cílování obrázků pro různé displeje Načítání různých obrázků pro jiné displeje je možné přes již zmíněné cílené CSS styly nebo s využitím cíleného JavaScriptu. Při využití CSS obrázky musí být nastaveny na pozadí nějakého objektu, u kterého bude odlišena CSS vlastnost backgroud-image. V samotném HTML kódu odlišení není možné. Ale pomocí JavaScriptu lze měnit cestu k obrázku uvedenou v atributu src u HTML tagu např: <img src="/slozka/obrazek.gif" />. 4.5. Cílování JavaScriptu pro různé displeje Příklad 4.6. Cílování JavaScriptu pro různé displeje [11] if (window.devicepixelratio == 1.5) { alert("toto je high-density displej"); } else if (window.devicepixelration == 0.75) { alert("toto je low-density displej"); } 26

4. Použití webových technologií při vývoji Android aplikací 4.6. Podpora HTML5 Je těžké přesně stanovit, od jaké verze Androidu začala podpora HTML5. Jednotlivé součásti totiž přibývají postupně. Základní HTML5 tagy pro definici layoutu jako je <header>, <nav>, <aside>, <article> a další, fungují už na nejstarší verzi 1.5, kterou mohu spustit v emulátoru. Pokud budeme procházet informace k jednotlivým vydaným verzím Androidu, v kapitole o novinkách verze 2.0 nalezneme jedinou, ale významnou zmínku týkající se HTML5 [15]. Operační systém Android (respektive jeho internetový prohlížeč) podporuje podle dokumentace od verze 2.0 tyto HTML5 součásti: Podpora API pro práci s client-side databází, využívající SQL. Podpora pro využití paměti cache, pro offline aplikace. Podpora Geolocation API pro využití informací o poloze. Podpora tagu <video>. Video se spouští ve fullscreen zobrazení. Za přínosné zlepšení v HTML5 dále považuji rozšíření parametru type vstupních polí formuláře. Toto jsem v mé aplikaci využil jako první. Příkladem je kód <input type="number">, který říká, že do vstupního pole má uživatel zadat číselnou hodnotu. Při otestovaní na virtuálním zařízení s Android 2.1 mne ale čekalo zklamání. Po prokliku na uvedené pole se mi zobrazila běžná klávesnice a mohl jsem zadávat i písmena a jiné znaky. Až na platformě Android 2.2+ jsem byl úspěšný. Nejen že se zobrazila rovnou numerická klávesnice pro vstup, ale zadání jiných znaků, které do číselné hodnoty nepatří, bylo nemožné. Zcela bez podpory zůstal typ email nebo url. Zdá se, že podpora tohoto je zatím i u běžných prohlížečů mizivá. Podle W3C Schools [18] ale například Safari v telefonech iphone typ email podporuje. iphone tak v klávesnici rovnou nabídne tlačítka @ a.com a po odeslání formuláře sám kontroluje, zda je vyplněný email ve správném tvaru. Podporu tagu <video> jsem otestoval také. Nutno podotknout, že v Android prohlížeči se video vložené v HTML5 v pořádku přehrálo, ale když jsem to zkusil ve WebView, tak nikoliv. WebView podle všeho používá stejné jádro jako základní prohlížeč Android. Ovládací prvky se sice objevily, ale víc nic. Z vlastností HTML5, které jsem testoval jsem sestavil pro lepší přehled následující tabulku: 27

4. Použití webových technologií při vývoji Android aplikací Tabulka 4.2. Funkčnost vybraných HTML5 vlastností v různých verzích OS Android Testovaný HTML5 prvek Android 1.5 1.6 2.1 2.2 2.3.1 2.3.3 input typu number input typu email/url tag video (prohlížeč) tag video (WebView) 4.6.1. HTML5: Client-side databáze Téma klientských databází v prohlížečích obecně shledávám za dost komplikované. Jak jsem po hledání informací zjistil, není ustanoven jednotný formát pro tuto databázi, který by technologie HTML5 přinesla. Zvláště se mi zalíbil výrok, který s nadsázkou uvedl ve svém článku Martin Malý: A přesně v dobrých tradicích webových technologií: Nabídneme rovnou dvě databáze, navzájem nekompatibilní, to aby si mohl vývojář vybrat, ve kterých prohlížečích jeho aplikace nebude fungovat. [24]. A dále vysvětluje: První, nazvaná Web Database 3, vychází z logického předpokladu: Většina dnešních prohlížečů si ukládá data do SQLite nebo podobné databáze, takže umožnit přístup k této databázi přes nějaké API je logické. Druhá specifikace, nazvaná IndexedDB 4, vychází z neméně logického předpokladu: SQL je pro klienty s JavaScriptem kanón na vrabce, mnohem užitečnější bude nabídnout objektové úložiště s možností indexace dat. [24]. Podpora jednotlivých prohlížečů je dost protichůdná. Jedni podporují to a druzí ono. Pro běžné webové stránky si tedy troufnu tvrdit nepoužitelné. Naštěstí při vývoji mobilních webových aplikací určených pro Android je to o něco snazší. Google a jeho prohlížeč Chrome, je na straně varianty Web Database a tak ani u prohlížeče v Androidu tomu není jinak. V základním prohlížeči jsem na mém telefonu otevřel testovací stránku html5demos.com/database a datábáze funguje korektně. Aby nám ale nadšení nevydrželo dlouho, uživatelé Androidu jsou dost nároční a základní webový prohlížeč jim často nestačí. Se zájmem jsem sledoval vydání Opery jako aplikace pro Android a není tomu tak dávno kdy vyšel i Firefox 4 pro Android. No a jsme tam, kde jsme byli. Firefox totiž Web Database nepodporuje a podle již odkazovaného článku ani nebude. 3 http://www.w3.org/tr/webdatabase/ 4 http://www.w3.org/tr/indexeddb/ 28

4. Použití webových technologií při vývoji Android aplikací 4.6.2. HTML5: OFFLINE webové aplikace Předchozí kapitola o zavedení podpory HTML5 prvků zmínila podporu offline aplikací. V HTML5 můžeme u libovolných souborů specifikovat, zda mají být uloženy do cache paměti a tím pádem dostupné i bez internetového připojení. První návštěva s online připojením je pochopitelně nutná. V Androidu je tedy podpora od verze 2.0. Realizace se zdá být velmi snadná. Ohledně použití offline cache jsem čerpal z webu Marka Pilgrima [19]. Do tagu <html> je třeba zadat cestu k manifest souboru. <html manifest="cache.manifest">. Tento textový soubor umístěný na webovém serveru 5, obsahuje názvy zdrojových dat, která smí být přístupná offline. Ale může jmenovat naopak i soubory, které připojení k internetu vyžadují. Potom slouží k definici klíčová slova NETWORK a CACHE, jak ukazují následující příklady, které jsem počeštil. Soubor při tom vždy musí začínat úvodním CACHE MANIFEST. Příklad 4.7. Ukázka obsahu cache.manifest souboru pro offline aplikace CACHE MANIFEST /offline-stranka.php /styl.css /javascript.js /obrazek.jpg Příklad 4.8. Ukázka obsahu cache.manifest i s definicí souboru, který připojení naopak bude požadovat CACHE MANIFEST # nejaky komentar NETWORK: /prihlaseni.php CACHE: /offline-stranka.php /styl.css /javascript.js /obrazek.jpg 5 MIME typ manifest souboru musí být text/cache-manifest. Většinou je tedy potřeba přidat ho do konfigurace serveru. 29

4. Použití webových technologií při vývoji Android aplikací Za zmínku ještě určitě stojí třetí klíčové slovo: FALLBACK, které slouží pro určení souborů i s alternativou. Zde se prohlížeč nejprve pokusí načíst první soubor a až při neúspěchu alternativní, většinou offline z paměti cache. FALLBACK: /něco.html /offline.html Offline přístup přes základní prohlížeč Androidu jsem otestoval na ukázkové JavaScript hře odkazované na stejné stránce, ze které jsem čerpal [19]. Při návštěvě této stránky offline funguje skvěle. Lze ji načíst mnohokrát a i když jsem se snažil stránku aktualizovat, tak zobrazení hlášky chybějícího internetového připojení jsem se nedočkal. 4.6.3. HTML5: Geolocation API Pomocí Geolocation API získává internetová stránka informace o aktuální poloze uživatele. Samozřejmě pokud uživatel mobilního telefonu považuje danou stránku za důvěryhodnou a zjištění polohy jí dovolí. V tomto případě, pokud je zjištěna přítomnost externího modulu GPS, tak je využit. Eventuelně se poloha určuje i na základě internetového připojení, ale to bývá méně přesné. Podpora Geolocation API přibyla spolu s dalšími HTML5 součástmi od verze 2.0. Geolocation API se z webové stránky používá pomocí nového objektu navigator.geolocation. Nejjednodušší použití jsem opět našel na webu Marka Pilgrima [20]: function get_location() { } navigator.geolocation.getcurrentposition(udelej_neco); function udelej_neco(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // máme souřadnice, a s nimi již můžeme udělat cokoliv } Tento zápis neobsahuje žádnou detekci chyb ani nezjišťuje přítomnost Geolocation API. Call back funkce udelej_neco je vlastní napsaná funkce, která se sama zavolá z té první. Jejím vstupním parametrem je objekt position s údaji o poloze (coords) a údajem (timestamp), který obsahuje datum a čas zjištění polohy. 30

4. Použití webových technologií při vývoji Android aplikací Detailnější přehled dostupných informací zobrazuje následující tabulka [20] [Překlad: autor]. Tabulka 4.3. Dostupné údaje objektu: position Položka coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeaccuracy coords.heading coords.speed timestamp Typ double double double nebo null double double nebo null double nebo null double nebo null DOMTimeStamp Poznámka stupně jako desetinné číslo (zeměpisná šířka) stupně jako desetinné číslo (zeměpisná délka) metrů nad referenčním ellipsoidem 6 metry (přesnost) metry (přesnost altitude viz. výše) stupně ve směru hod. ručiček od skutečného severu 7 m/s (rychlost) stejný jako objekt Date() 4.7. CSS3 Co se CSS3 týká, tak ani zde není v novinkách k verzím jasná informace o podpoře této webové technologie. Po několika provedených testech na virtuálních zařízeních jsem ale zjistil, že nebudu daleko od pravdy s tvrzením, že většina nových CCS3 vlastností je podporována již ve verzi Android 1.5. Ta je nejstarší, jakou mi SDK dovolí testovat. Testované CSS3 vlastnosti, které mě přišli nejpoužitelnější a sám bych je někdy rád využil, jsem sestavil do následující tabulky: Tabulka 4.4. Funkčnost vybraných CSS3 vlastností v různých verzích OS Android CSS3 vlastnost Popis Android 1.5 1.6 2.1+ border-radius zaoblené rohy background: -webkit-gradient a barevné přechody v CSS 6 http://en.wikipedia.org/wiki/reference_ellipsoid 7 http://en.wikipedia.org/wiki/true_north 31

4. Použití webových technologií při vývoji Android aplikací CSS3 vlastnost Popis Android 1.5 1.6 2.1+ opacity průhlednost text-shadow stín textu font použití fontu webu background b více obrázku na pozadí a Příklad celé definice: background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff)); b Více obrázku včetně jejich pozice a dalších parametrů se odděluje čárkou. Vlastnosti byly testovány na stránce www.css3.info, kterou jsem prohlížel přímo přes WebView v client-side aplikaci na různých verzích Androidu. 4.8. Podpora externích periferií Jediné mně známé využití externího zařízení přímo z webové stránky, bez žádného kódu na straně klienta je určení polohy pomocí Geolocation API zmíněné v kapitole 4.6.3 HTML5: Geolocation API. Takto dokáže web využít externího GPS přijímače, pokud je k dizpozici a uživatel zjištění polohy dovolí. Jinak možnost využití externích periferií jako je fotoaparát, akcelerometr nebo mikrofon pouze z webové stránky není. Využívat periferie je možné z webové stránky pouze na základě propojení s client-side aplikací přes JavaScript rozhraní. 4.9. WebView Pomocí WebView můžeme přímo do layoutu client-side aplikace začlenit webovou stránku. Tato varianta pak představuje spojení výhod obou způsobů, jak poskytnout aplikaci pro platformu Android. Webová stránka se pak může načítat jen v určité části aplikace, nebo i přes celý displej. WebView je k dispozici pro Android aplikace již od verze Androidu 1.0, a to i s podporou předávání JavaScript událostí do Android aplikace. Android 2.0, respektive jeho internetový prohlížeč, ale podporuje mnoho dalších užitečných funkcí. A tak i do WebView, který používá stejný WebKit framework, přibyla podpora pro zařízení s různými typy displeje [11]. Pokud nic nenastavujeme a na zařízení s medium density displejem pomocí WebView načteme stránku, zobrazí se nám v poměru 1:1 tak, jak byla vytvořena. Pro low nebo hight density displej ale samo WebView zajistí zvětšení či zmenšení obsahu, čímž za nás vyřeší prázdná místa na vysokém rozlišení, nebo zbytečné rolování na nízkém. Překreslování probíhá obdobně jako zoom v integrovaném webovém prohlížeči. 32

4. Použití webových technologií při vývoji Android aplikací Na následujícím obrázku můžete vidět vykreslení webové stránky, která má šířku 320 px. Bez žádného vlastního nastavení ViewPortu se sama na virtuálním low, medium i high density displeji zobrazila stejně, ačkoliv má každé zařízení displej s jiným počtem DPI a různým rozlišením. Obrázek 4.1. Automaticky překreslené zobrazení webové stránky široké 320 px na třech různých velikostech displeje. [zdroj: autor] Výhodou WebView je možnost využít JavaScript jako rozhraní pro komunikaci mezi webovou aplikací a client-side aplikací. Není potom problém z webové stránky JavaScriptem vykonat cokoliv, co v client-side aplikaci pro určitou JavaScript funkci naprogramujeme. Více o tomto rozhraní v kapitole 4.10 Použití JavaScript rozhraní 4.10. Použití JavaScript rozhraní Pomocí JavaScript rozhraní můžeme dovolit webové aplikaci volat libovolnou metodu aplikace na straně klienta, kterou si pro účely tohoto rozhraní sami připravíme. Poté lze například JavaScriptem vyvolávat dialogová okna Androidu, zobrazovat Android notifikace (Toast message), načítání (progress dialog), kontextové menu či provést jakýkoli v Javě napsaný kód. Ukázku použití rozhraní zobrazují příklady dále: 33

4. Použití webových technologií při vývoji Android aplikací Příklad 4.9. Použití JavaScript rozhraní [zdroj: autor] JavaScript rozhraní v kódu Android aplikace: public class JavaScriptInterface { Context mcontext; /** Konstruktor, nastavení kontextu */ JavaScriptInterface(Context c) { mcontext = c; } } /** Zobrazení Android vyskakovací zprávy */ public void ukaztoast(string zprava) { Toast.makeText(mContext, zprava, Toast.LENGTH_SHORT).show(); } Nastavení rozhraní určitému WebView prvku: mojewebview.getsettings().setjavascriptenabled(true); mojewebview.addjavascriptinterface(new JavaScriptInterface(this), "Android"); Následně lze z HTML stránky použít takto: <script type="text/javascript"> Android.ukazToast('Toto je Android Toast Message vyvolaná JavaScriptem'); </script> Více prvků Android aplikace, které jsem vyzkoušel přes JavaScript rozhraní použít naleznete na obrázku 5.3 Ukázka prvků Androidu, vyvolaných webovou aplikací přes JavaScript rozhraní. [zdroj: autor] v praktické realizaci aplikace. 4.11. Využití XML Do použití webových technologií sice XML nepatří v takovém smyslu jako HTML, CSS nebo JavaScript, ale využijeme ho přímo v client-side aplikaci. A tak jsem se rozhodl ho v souvislosti 34

4. Použití webových technologií při vývoji Android aplikací s využitím webových technologií také zmínit. V XML souborech se totiž definují nabídky menu, uživatelská rozhraní (layout) pro jednotlivá okna aplikace nebo konfigurační soubor AndroidManifest.xml obsahující všechny možné parametry aplikace. Pro ukázku je níže prvních několik řádků ze dvou těchto souborů. Příklad 4.10. Ukázka z konfiguračního souboru AndroidManifest.xml <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="mujbalicek.nazevapp" android:versioncode="1" android:versionname="1.0"> <uses-sdk android:minsdkversion="4" /> <uses-permission android:name="android.permission.internet" /> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".homepage" Příklad 4.11. Ukázka definice nabídky menu <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/home" android:icon="@drawable/ikona_menu_home" android:title="@string/home" /> <item android:id="@+id/jidelnicek" android:icon="@drawable/ikona_menu_jidelnicek" android:title="@string/jidelnicek" /> <item android:id="@+id/graf" android:icon="@drawable/ikona_menu_graf" android:title="@string/graf" /> Vysvětlení významu jednotlivých XML tagů a jejich atributů je k dispozici v oficiální dokumentaci [6]. 35

4. Použití webových technologií při vývoji Android aplikací 4.12. Shrnutí webových aplikací pro Android Webové aplikace v základním internetovém prohlížeči Androidu 1.0+ umožňují: Rozlišovat 3 typy displejů a použít pro ně odlišné CSS styly nebo vykonávat jiný JavaScript kód Použít odlišné CSS styly pro orientaci mobilního telefonu na výšku a na šířku Pomocí meta tagu viewport nastavit přiblížení, v jakém se stránka zobrazí a zoom třeba zablokovat Pomocí meta tagu viewport určit velikost prostoru pro vykreslení webové stránky Používat HTML5 tagy <header>, <nav>, <aside> a mnoho dalších Používat CSS3 vlastnosti Webové aplikace v základním internetovém prohlížeči Androidu 2.0+ umožňují: Zjišťovat informace o poloze pomocí Geolocation API (html5) Pracovat s lokální databází na straně klienta, pomocí Database API (html5) Využít cache paměť pro aplikace dostupné v režimu OFFLINE (html5) Spouštět video z html tagu <video> ve fullscreenu Používat formulářový prvek input typu number, pro omezení vstupu na číselnou klávesnici (verze 2.2+) Webové aplikace v základním internetovém prohlížeči NEUMOŽŇUJÍ, ale lze je řešit přes propojení s klientskou aplikaci: využívat externích periferií jako je fotoaparát nebo akcelerometr využít hardwarových tlačítek mobilního telefonu: lupa pro hledání a menu tlačítko zamezit přejití do režimu spánku tvorbu widgetů na plochu OS Android zveřejnění aplikace v Android Marketu 36

Kapitola 5 Realizace Android aplikace Tato část práce prověřuje teoretické předpoklady předcházejících kapitol v praxi. Souběžně s vypracováním bakalářské práce probíhal i vývoj Android aplikace, založené z co největší části na webových technologiích. 5.1. Zadání, cíl a popis aplikace O zadání stěžejních bodů pro vývoj aplikace se postaral Ing. Tomáš Pětivoký, který je majitelem několika úspěšných webových projektů. Jedním z nich jsou i KalorickéTabulky.cz 1, pro které je Android aplikace vyvíjena. Tento projekt se zabývá zdravým životním stylem a konkrétně vyváženou stravou, doplněnou pohybovými aktivitami. Pravidelnými uživateli tak jsou zejména lidé, snažící se zhubnout nebo udržet se v dobré kondici a jíst ve správném množství. Pro všechny uživatele je tak zásadní v průběhu dne zapisovat všechny snědené potraviny i vykonané aktivity a nechat si tak počítat přijatou či vydanou energii. Cílem realizace mobilní verze projektu je usnadnit toto sledování přes mobilní telefon, protože při stravování v průběhu celého dne není možné stále odbíhat k počítači či notebooku pro přidání každé drobnosti. Dalším nápadem, který způsob realizace aplikace dále ovlivnil, bylo využití mobilního fotoaparátu ke skenování čárových kódů potravin. Jedná se o pohodlnější způsob přidání snědené potraviny do výpočtu, než její ruční vyhledávání. Tuto myšlenku nastínil vedoucí mé bakalářské práce Ing. Jiří Kosek a nakonec se úspěšně povedlo ji realizovat. Finální požadavky na realizaci aplikace: 1. Synchronizovaná uživatelská data bez ohledu na způsob, kterým se uživatel do systému přihlásí a dělá změny. 1 www.kaloricketabulky.cz 37

5. Realizace Android aplikace 2. Nedistribuování databáze potravin do jednotlivých mobilních zařízení, aby byla data stále aktuální. Data o potravinách se mění i několikrát denně. Druhým důvodem je možné riziko zneužití databáze. 3. Využití externího fotoaparátu pro skenování čárových kódů potravin. 5.2. Proč Android? Na tuto otázku jsem se zeptal přímo zadavatele Ing. Pětivokého, pro kterého Android aplikaci realizuji: Operační systém Android je jednoznačně nejrychleji rostoucím operačním systémem používaným v mobilních telefonech. Předpokládám, že maximálně do dvou let bude mít více než 50% chytrých mobilních telefonů právě OS Android, kdy podle stávajícího trendu jednoznačně předstihne veškerou konkurenci včetně systému ios od Apple. V současné době zaznamenává projekt KalorickéTabulky.cz několik tisíc návštěv měsíčně z mobilních zařízení. Nejčastější přístupy jsou ze zařízení iphone a ipad se systémem ios a zařízení s operačním systémem Android. Z toho důvodu jsem se rozhodl pro vývoj aplikace KalorickéTabulky.cz pro OS Android. Ještě doplním, že realizace aplikace pro ios zařízení bude následovat také, ale až po Androidu. Webová část aplikace na straně serveru by mohla být pro obě platformy totožná. 5.3. Způsob realizace V teoretické části této práce jsem definoval dva způsoby poskytnutí aplikace pro systém Android a pak ještě třetí, který byl jako spojení prvních dvou do jednoho. Zvolit ten správný nebylo vzhledem ke stanoveným základním požadavkům na aplikaci nijak těžké. 1. Aplikace pouze na straně klienta Tento způsob bychom mohli použít, pokud by se databáze potravin a aktivit dodala jako součást instalačního balíčku. Výpočty by pak probíhaly v mobilním telefonu bez problému offline, čistě na straně klienta. To ale nesplňuje požadavek na synchronizovaná data s již existujícím webovým projektem. Nabízí se pak možnost klientské aplikaci umožnit komunikovat s běžícím projektem formou nějakých XML zpráv nebo jiné webové služby, ale tvorba HTTP požadavku, zpracování a zobrazení obdržených dat jsou úkony zbytečně náročné. Bez připojení k internetu se neobejdeme, a tak je rozumnější použít variantu webové aplikace, jak popisuje další způsob. 2. Pouze webová aplikace cílená pro mobilní zařízení Tato varianta představuje zcela nejjednodušší způsob realizace zadání. Webový projekt už sám o sobě běží a pro běžné internetové prohlížeče je hotový. Má oddělenou PHP logiku 38

5. Realizace Android aplikace od vzhledu pomocí šablonového systému zvaného Smarty. Teoreticky vzato by tedy stačilo upravit pár HTML šablon a při zjištění přístupu přes mobilní telefon je načíst místo těch původních. K tomu ještě načíst jiný CSS styl a je hotovo. Touto cestou jsem se tedy téměř vydal, ale je ještě jedna věc, kvůli které toto řešení dokonale nepokrývá zadání. Chybí využití fotoaparátu, které pouze z webové aplikace není možné. 3. Kombinace klientské a webové aplikace Toto je výsledný způsob vývoje Android aplikace pro KalorickéTabulky.cz. Dalo by se říci, že se jedná o realizaci předchozího bodu pouze s tím rozdílem, že nezobrazíme uživatelům výsledek ve webovém prohlížeči, ale jako obsah nainstalované klientské aplikace. Ta bude doplněna o nezbytně nutný Java kód pro možnost skenování čárových kódu potravin. Tuto aplikaci si budou uživatelé stahovat z Android Marketu, kde bude zveřejněna. 5.4. Způsoby výdělku Tak jako již běžící projekt bude aplikace pro OS Android vydělávat na základě zobrazovaných kontextových reklam. Na webu využíváme systému AdSense od společnosti Google. AdSense poskytuje způsob, jakým majitelé webových stránek mohou na svém webu zobrazit reklamy z reklamního systému AdWords. Tyto reklamy generují vlastníkům stránek zisk, pokud na ně uživatelé kliknou. Pro mobilní telefony má Google obdobnou službu, kterou pojmenoval AdMob. Nabízí umístění reklamních ploch v Android, Flash, ipad, iphone, webos (palm) aplikacích a v mobilních verzích webových stránek. Reklamy pro operační systém Windows Phone 7 jsou v systému momentálně (duben 2011) uvedené jako Beta verze. Jiné způsoby příjmů se realizovat prozatím nechystáme, ale alespoň je dále zmíním. Dalším hodně využívaným způsobem výdělku je dodat na Android Market dvě verze aplikace. První zdarma, která může obsahovat právě reklamy nebo ji může chybět některá pokročilá funkcionalita. A druhá, často u anglických názvů aplikací označovaná jako PRO verze, která nemá reklamy ani žádná omezení, ale je zpoplatněna nějakou drobnou platbou za její stažení. V ČR je v Marketu možné nakupovat prostřednictvím platební karty, ale zveřejnit placené aplikace u nás prozatím nelze. Kdy bude Česká republika zařazena mezi další země, ve kterých lze aplikace zpoplatnit není prozatím známo. Posledním způsobem, který připadá v úvahu použít, je tzv. donation. Jedná se o způsob dobrovolných příspěvků na vývoj a další zlepšování aplikace. Autoři na svých stránkách nebo někde v aplikaci prezentují možnost dobrovolně přispět libovolnou částkou na jejich účet. 39

5. Realizace Android aplikace In-app Billing, představený v kapitole 2 Aplikace pro operační systém Android se pro povahu mnou vyvíjené aplikace nehodí. 5.5. Vývoj Jak bylo odůvodněno ve výběru způsobu realizace, je potřeba zobrazovat mobilní verzi projektu KalorickéTabulky.cz v klientské aplikaci. Ta bude obsahovat nezbytně nutný Java kód, který tu webovou zobrazí a přidá jí možnost vyvolat skenování čárových kódů potravin. Na detailnější popis vývoje jak na straně webové aplikace tak klientské se podíváme odděleně. 5.5.1. Na straně webového serveru Na webovém serveru byla připravena mobilní verze již běžícího projektu, obsahující kompletně nové CSS vlastnosti a odlišéné html šablony. Tento přizpůsobený web jsem se snažil co nejvíce zjednodušit a omezit na pouze nutné prvky. Mnoho zákázníků českých mobilních operátorů má omezený internetový tarif na určitý počet přenesených dat, při jehož překročení se sníží přenosová rychlost. Tomuto omezování se v angličtině říká Fair User Policy, od toho používaná zkratka FUP. Je tedy třeba přenášenými daty maximálně šetřit. Více o tomto tématu v samostatné kapitole 5.5.1.1 Minimalizace mobilních dat a GET požadavků. Cílování CSS vlastností jsem nakonec nevyužil. Vzhledem k zobrazení webové stránky v Java aplikaci ve WebView, je stránka různým šířkám displejů sama přizpůsobována a tak nebyl důvod pro větší displej ručně něco odlišovat. Navíc šířku blokových prvků stránky jsem se snažil v co největší míře neuvádět, což se potom chová obdobně jako kdybych ji nastavil na width: 100%;. Tím jsem vyřešil i situaci po překlopení telefonu na šířku. Nadpis i obsah s textem nebo tabulkami se tak dynamicky přizpůsobuje a roztáhne vždy na celou šířku. Z CSS3 prvků, které jsem v teoretické části této práce testoval, jsem použil zejména lineární barevné přechody. Ty skvěle nahradí jinak nutné použítí obrázků na pozadí. Jedinný HTML5 prvek, který jsem nasadil, je nový typ number u formulářového vstupního pole. Velkou výhodou je pak na mobilním telefonu automatické zobrazení číselné klávesnice pro vstupy, kde číslo je to jedinné co od uživatele očekáváme. Jednoduchý zápis vypadá takto: <input type="number" name="hmotnost" /> A výsledek: 40

5. Realizace Android aplikace Obrázek 5.1. Automatické zobrazení číselné klávesnice po nastavení type="number" na Adroidu 2.2+ [zdroj: autor] Meta tag viewport své využití nakonec také nenašel, protože WebView za mne nastavuje všechny hodnoty tak jak přesně potřebuji. A sice pohled zblízka, prostor pro vykreslení stránky na šířku displeje telefonu a zoom blokovaný. V případě, že bychom uvažovali, že uživatelé budu prohlížet web v Android webovém prohlížeči, vypadal by meta tag takto: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" /> Jinak konkrétni vzhled výsledné webové aplikace na straně serveru je indivuduální záležitost, tak nemá význam se tomuto blíže věnovat. Pouze úvodní menu bude jěště zmíněno v kapitole 5.5.1.1 Minimalizace mobilních dat a GET požadavků. 5.5.1.1. Minimalizace mobilních dat a GET požadavků Tato kapitola je zaměřená na dva hlavní aspekty ovlivňující rychlost provádění úkonů v aplikaci. Prvním je co nejvíce minimalizovat objem přenášených dat a druhým je snížit počet GET požadavků na server na naprosté minimum. Dalšími aspekty jsem se nyní již nezabýval, protože ty jsou již v běžícím webovém projektu vyřešeny. Kdybych měl vyřešené faktory ovlivňujicí 41

5. Realizace Android aplikace rychlost jmenovat, tak je to například již optimalizovaná databáze spolu s SQL dotazy, omezení počtu SQL dotazů na minimum jen pro nutné úkony nebo ukládání do cache paměti tam, kde to je možné. Minimalizace přenášených dat spočívala zejména ve zrušení všech možných externích knihoven, které se používají u běžícího projektu. Například pro AJAX požadavky a nějaká další JavaScript řešení, bylo využíváno frameworku prototype 2. Ten ale zabíral 130 kb. AJAX požadavek se s trochou úsilí dá vytvořit i bez ní a tak jsem tak učinil. Využití Lightboxu 3, který přidává efekt při otevírání obrázků zde byl také zcela odebrán. Obrázky sami o sobě jsme se rozhodli nezobrazovat. A kdyby ano, tak určitě jen malé náhledy. Díky použití CSS3 vlastností pro lineární barevné přechody jsem dále mohl zcela upustit od obrázků na pozadí. Sice ne v takové míře, ale pomáhá i snaha o minimalizaci HTML či CSS kódu. Odebrat zbytečné konce řádků, použít více obecných CSS selektorů, než pro každý prvek mnoho zcela jiných vlastností apod. Podle Mobile Web Best Practices, sepsaných organizací W3C, by mobilní webová stránka se vším neměla přesáhnout 20 kb [22]. Minimalizace GET požadavků na server spočívá v co nejmenším počtu požadovaných souborů (CSS a JS soubory, obrázky). Pro mou mobilní verzi webu používám pouze jeden CSS soubor default.css a jedinný JavaScript soubor default.js. Dále jak znázorňuje obrázek 5.2 Úvodní menu webové aplikace pro Android [zdroj: autor], pro úvodní menu potřebuji 5 ikon. To by zaslalo 5 GET požadavků serveru. Podle mne vhodným řešením je spojit tyto ikony do jednoho obrázku, což jsem také zrealizoval. Spojené ikony do jednoho obrázku jsou znázorněny vpravo. Tento jeden obrázek potom zobrazím každé položce menu na pozadí, s odlišnou hodnotou CSS vlastnosti background-position. Objem dat je sice téměř totožný, ale bude mi stačit 1 GET požadavek. Je třeba si uvědomit, že s každým požadavkem se zasílá také odchozí hlavička, obsahující údaje o prohlížeči, akcepovaném formátu, kódování, cookies atd. Příchozí hlavička odpovědi za zmínku stojí také. Ať chceme nebo ne, představuje to zbytečně přenášená data navíc. 2 http://www.prototypejs.org 3 http://www.huddletogether.com/projects/lightbox2/ 42

5. Realizace Android aplikace Obrázek 5.2. Úvodní menu webové aplikace pro Android [zdroj: autor] 5.5.2. Na straně client-side aplikace Pro vývoj klientské části aplikace jsem se rozhodl použít doporučované vývojové prostředí Eclipse. Jeho stažení, instalace pluginu ADT a stažení kompletního SDK balíčku bylo zcela bez problémů. Vše se podařilo úspěšně nainstalovat a nastavit, za pomoci dokumentace [6]. Několik následujících kroků jsem pro větší přehlednost očísloval. Účelem je zobrazit webovou aplikaci jako obsah klientské a přidat možnost skenování čárového kódu potraviny pro její přidání do seznamu uživatelem snědených potravin. 1. Vytvoření nového Android projektu Projekt jsem vytvořil přes horní menu volbou File > New > Project, následně vybral Android Project. Po stisku Next následovalo zadání několika údajů: Project name: KalorickeTabulky Build target: Android 1.5 Application name: Kalorické tabulky Package name: mypackage.kt Create Activity: Main 43

5. Realizace Android aplikace Min SDK version: 3 Build target, je verze Androidu, na jaké bude aplikace postavena. Pokud nějaká námi potřebná funkcionalita přibyla až ve vyšší verzi, tak je nutné takovou verzi zvolit, abychom měli k dispozici potřebné nové objekty a jejich metody. Já jsem nic takto zásadně omezujícího nepoužil. WebView i JavaScript rozhraní je k dizpozici od počáteční verze. Aplikace Barcode Scanner od Google, jejíž součást použiji pro skenování také běží na starších verzích. Jediná věc, kterou jsem použil a bude fungovat až od verze 2.2, je input typu number. Není to ale nic kritického, jenom se na starších verzích jednoduše ukáže běžná klávesnice namísto číselné. Kontrola vstupu je stejně zajištěna i v PHP kódu. Pomocí Min SDK version potom můžeme jednoduše určit, na jakou minimální verzi Androidu bude možné naši aplikaci nainstalovat. Vytvoření aktivity (Create Activity) zajistí vytvoření prvního java souboru se třídou (v mém případě třídou Main), která bude potomkem rodičovské třídy Activity. Aktivita představuje v Android aplikacích jednu obrazovku (uživatelské rozhraní). 2. Použití WebView, které zobrazí připravenou webovou aplikaci. Z prvního kroku již máme vytvořené všechny základní soubory. Pro přidání WebView jsou potřeba tři věci. Přidat aplikaci právo používat internet, přidat prvek WebView do XML layoutu aplikace a vytvořit instanci WebView ve třídě Main. Příklad 5.1. Ukázka přidání WebView Právo používat internetové připojení, které se přidává do souboru /AndroidManifest.xml: <uses-permission android:name="android.permission.internet" /> Definice WebView v XML layoutu, soubor /res/layout/main.xml: <?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /> Přidání WebView ve třídě Main a načtení obsahu v něm: 44

5. Realizace Android aplikace WebView mojewebview =(WebView) findviewbyid(r.id.webview); mojewebview.loadurl("http://www.stranka.cz"); Tímto jsme kompletně dokončili zobrazení naší webové aplikace v aplikaci klientské. Nic nám teď nebrání využít cokoliv, co samotná webová aplikace nezvládne. 3. Cokoliv, na co potřebujeme klientskou aplikaci. V mém případě využití fotoaparátu. Pro skenování čárových kódů potravin jsem se rozhodl využít aplikaci Barcode Scanner, založenou na knihovně zxing od Google. Na webu o zxing je příklad [23], jak z mé Android aplikace začít skenovat přeš tzv. Intent. To je něco jako událost, kterou pošlu do zmíněné aplikace, která za mne čárový kód oskenuje a vrátí mi výsledek. Minimální potřebný kód, bez kontroly chyb nebo přítomnosti druhé aplikace ukazuje následující příklad. Příklad 5.2. Skenování čárového kódu Ukázka definice metody, která skenování spustí. Tato připravená metoda skenuj() bude muset být také odněkud zavolána. Já ji umístíl do JavaScript rozhraní, a budu ji volat z webové stránky pomocí JavaScriptu. Jak vypadá rozhraní již bylo vysvětlěno v kapitole 4.10 Použití JavaScript rozhraní. Po získání výsledku ze skenování se načte ve WebView stránka přidávající potravinu do seznamu. Této stránce předáme čárový kód jako parametr v URL. // metoda, kterou umístím do JS rozhraní public void skenuj() { Intent intent = new Intent("com.google.zxing.client.android.SCAN"); intent.setpackage("com.google.zxing.client.android"); intent.putextra("scan_mode", "PRODUCT_MODE"); startactivityforresult(intent, 0); } // překrytá metoda, která patří do třídy Main @Override public void onactivityresult(int requestcode, int resultcode, Intent intent) { if (requestcode == 0) { if (resultcode == RESULT_OK) { 45

5. Realizace Android aplikace String contents = intent.getstringextra("scan_result"); String format = intent.getstringextra("scan_result_format"); // vysledný čárový kód přidám jako GET proměnnou při načtení PHP stránky, která přidání provede mojewebview.loadurl("http://www.stranka.cz/pridej.php?barcode="+contents+"&format="+format); } } } Pokud bychom chtěli JS rozhraní vynechat, tak vyvolání skenování je možné ještě jednou cestou. Můžeme klienské aplikaci definovat menu a v něm položku např. čárový kód, na kterou metodu skenuj() navážeme. Toto menu se v aplikacích zobrazuje po stisknutí hardwarového tlačítka telefonu, nazývaného právě jako menu tlačítko. 5.5.3. Využití JS rozhraní ve velkém Když už byla klientská část aplikace nutná, rozhodl jsem se otestovat více prvků Android aplikace vyvolaných přes JavaScript na webové stránce. Vše se podařilo bez problémů a fungovalo na první spuštění. Obrázek 5.3 Ukázka prvků Androidu, vyvolaných webovou aplikací přes JavaScript rozhraní. [zdroj: autor] ukazuje Android Toast message (dole), jednoduchý ProgressDialog (vlevo) a provedení čekoholiv jiného, v mém případě třeba otevření kontextového menu (vpavo), které jsem si zvlášť definoval jinde, ale jeho zobrazení navázal na JavaScript onclick událost. Pod cokoliv jiného spadá i zmíněný kód pro vyvolání skenování v předchozí kapitole. Takové navázání všeho možného na prvky klienstké aplikace, založené na Androidu je třeba zvážit. Když začneme moc věcí z webové stránky vázat na klientskou aplikaci, část na straně serveru přestává být takzvaně znovupoužitelná. Pořád jsou to běžné internetové stránky a když nebudu myslet na specifickou možnost skenování, tak proč by tato webová část nemohla být dostupná i pro všechny ostatní mobilní telefony, přes jejich běžné internetové prohlížeče, včetně třeba pro iphone se systémem ios. Jednoduše by mohlo vše fungovat, akorát bez přidaného skenování, bez widgetu na plochu, bez nějaké běžící služby na pozadí Použití klienstké aplikace na více věcí, než je skutečně nutné, takže spíše pro efekt a více User Friendly prostředí, je na rozhodnutí každého. 46

5. Realizace Android aplikace Obrázek 5.3. Ukázka prvků Androidu, vyvolaných webovou aplikací přes JavaScript rozhraní. [zdroj: autor] Příklad 5.3. JavaScript rozhraní v kódu Android aplikace [zdroj: autor] public class JavaScriptInterface { Context mcontext; /** Konstruktor, nastavení kontextu */ JavaScriptInterface(Context c) { mcontext = c; } // Zobrazení Android vyskakovací zprávy public void showtoast(string toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } // Otevření menu kategorie public void categorymenu() { View v = findviewbyid(r.id.webview); registerforcontextmenu(v); opencontextmenu(v); 47