Univerzita Hradec Králové Fakulta informatiky a managementu Katedra informatiky a kvantitativních metod

Transkript

1 Univerzita Hradec Králové Fakulta informatiky a managementu Katedra informatiky a kvantitativních metod Návrh a vývoj multiplatformních mobilních aplikací Bakalářská práce Autor: Marko Rumpli Studijní obor: Informační management (3) Vedoucí práce: doc. Mgr. Tomáš Kozel, Ph.D. Hradec Králové Srpen, 2015

2 Prohlášení: Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a s použitím uvedené literatury. V Hradci Králové dne Marko Rumpli

3 Poděkování: Děkuji vedoucímu bakalářské práce panu doc. Mgr. Tomáši Kozlovi, Ph.D., za metodické vedení práce, pomoc a odborné konzultace při přípravě teoretické i praktické části mé práce.

4

5 Anotace Tato bakalářská práce si klade za cíl představit a vysvětlit pojem multiplatformní vývoj mobilních aplikací a na konkrétní aplikaci demonstrovat postup tvorby takové aplikace. Ukázková aplikace se jmenuje Worktastic a jedná se o jednoduchý mobilní docházkový systém, který se skládá ze serverová části a z multiplatformní mobilní aplikace pro platformy Android a Windows Phone. V této práci je popsán celý proces tvorby multiplatformní aplikace od prvotního nápadu, přes návrh uživatelského rozhraní až po výběr vhodné multiplatformní technologie a následné vytvoření aplikace. Podrobně byly představeny tři nástroje pro multiplatformní vývoj PhoneGap, Titanium a Xamarin. Pro realizaci aplikace Worktastic byl vybrán nástroj Xamarin. Annotation Title: Design and development of multi-platform mobile applications This bachelor thesis aims to introduce and explain the concept of cross-platform mobile application development and demonstrate the process of development on a specific application. The sample application is called Worktastic and it's a simple mobile attendance system, which consists of a server part and cross-platform mobile application for Android and Windows Phone. This thesis describes the entire process of creating multi-platform applications from the initial idea through the design of User Interface to selecting a suitable platform technology and finally the subsequent creation of such applications. Cross-platform development tools described are PhoneGap, Titanium and Xamarin. For realization of the application Worktastic, Xamarin was chosen.

6 Obsah 1 Úvod Cíle práce Návrh mobilní aplikace Obecný popis aplikace Základní technické požadavky aplikace Popis funkcionalit Backend Mobilní aplikace Návrh struktury aplikace Wireframy a grafický návrh aplikace Další rozvoj aplikace a nové funkce Strategický plán rozvoje aplikace Worktastic Seznam možných nových funkcí Výběr vhodné technologie pro vývoj Popis cílových platforem Android Windows Phone Nativní vývoj aplikací Typický postup při vývoji Výhody Nevýhody Multiplatformní vývoj Typický postup při vývoji Výhody Nevýhody...24

7 3.4 Nástroje pro vývoj multiplatformních aplikací PhoneGap (HTML5/JS) Titanium Xamarin Další nástroje Výběr vhodného nástroje Popis technické realizace Serverová část (backend) Adresářová struktura serverové části Databáze RESTové API Administrátorské webového rozhraní Mobilní aplikace Nastavení řešení pro multiplatformní vývoj v Xamarin.Forms Projekt Worktastic.Droid Projekt Worktastic.WinPhone Projekt Worktastic (Portable) Výsledky a závěr Citovaná literatura Přílohy...53

8 Seznam obrázků Obr. 1.1 Zastoupení operačních systémů na trhu chytrých telefonů (zpracováno dle (3))...10 Obr. 2.1 Use Case diagram backendu aplikace (vlastní)...13 Obr. 2.2 Use Case diagram (vlastní)...15 Obr. 2.3 Návrh struktury aplikace (vlastní)...17 Obr. 3.1 Jak fungují aplikace napsané nástrojem PhoneGap (převzaté (9))...25 Obr. 3.2 Architektura nástroje Titanium (převzaté (10))...27 Obr. 3.3 Architektura Xamarin.Android (převzaté (11))...28 Obr Architektura multiplatformního řešení realizovaného přes Xamarin (převzaté (12))...29 Obr Architektura multiplatformního řešení realizovaného přes Xamarin.Forms (převzaté (12))...29 Obr. 4.1 Hlavní části aplikace (vlastní)...33 Obr. 4.2 Adresářová struktura serverové části...34 Obr. 4.3 Struktura administrátorského rozhraní...37 Obr Seznam podporovaných layoutů v Xamarin.Forms (převzaté (26))...38 Obr. 4.5 Typy podporovaných obrazovek (převzaté (27))...39 Obr. 4.6 Řešení pro aplikaci Worktastic (vlastní)...40 Obr. 4.7 Reference na projekt Worktastic (Portable) (vlastní)...41 Obr Různé velikosti ikonky pro různé hustoty pixelů (vlastní)...42 Obr. 4.9 Rozdělení stránek při startu aplikace (vlastní)...45 Obr Akční tlačítka (vlastní)...45

9 1 Úvod Trh s mobilními telefony prošel za posledních 10 let rychlým vývojem, který má dopad na celou moderní společnost. S příchodem chytrých mobilních telefonů, které zpravidla obsahují vyspělý operační systém, velký dotykový displej a uživatelské rozhraní uzpůsobené pro ovládání prsty na displeji, se z mobilních telefonů stal univerzální komunikační nástroj. Lidé používají mobilní telefony například pro přístup k internetu, chatování, videotelefonování, přístup na sociální sítě a pořizování fotek a videí ve vysokém rozlišení. Z mobilního telefonu se stal nejosobnější elektronický přístroj, který uživatelé používají. Podle výzkumu společnosti emarket (1) bylo v roce 2014 aktivních 1,64 miliardy chytrých telefonů a podle prognóz se má toto číslo v roce 2015 zvětšit na 1,91 miliardy aktivních zařízení. To představuje potenciálně obrovský trh pro vývojáře softwaru. Zájem vývojářů o mobilní platformy dokazuje například i Satya Nadella, ředitel společnosti Microsoft, se svou firemní vizí Mobile First, Cloud First (2). Tato vize představuje jasné zaměření jedné z největších softwarových firem na svět mobilních aplikací. Microsoft nejenom, že vyvíjí vlastní operační systém Windows Phone, ale zároveň začal své produkty vyvíjet i pro konkurenční platformy. Ať už se jedná o kancelářský balík Microsoft Office, který je dostupný jak pro Windows Phone, ios, tak i pro Android nebo například zvukovou asistentku Cortanu, která bude v nejbližší době také dostupná na všech třech platformách. V roce 2014 držely, podle společnosti IDC Corporate USA (3), celosvětově 99 % trhu s chytrými telefony tři operační systémy Android, ios a Windows Phone. Konkrétní procentuální rozdělení operačních systému je vidět na obrázku (Obr. 1.1). 9

10 Zastoupení operačních systémů na trhu chytrých telefonů Windows Phone ios Android Ostatní 1 2,7 18,3 78 Obr. 1.1 Zastoupení operačních systémů na trhu chytrých telefonů (zpracováno dle (3)) Každý z těchto tří dominantních operačních systémů používá jiné technologie, programovací jazyky a vývojové postupy při návrhu a realizaci aplikací. Faktickým důsledkem této rozdrobenosti je nutnost, pro pokrytí 99 % potencionálních uživatelů, vytvářet v podstatě samostatnou aplikaci pro každý z těchto tří systémů. To vede k tomu, že pro vývoj mobilních aplikací jsou často nutné tři různé vývojářské týmy a v krajních případech je vývoj software dokonce rozdělen i mezi více subdodavatelských společností, které se specializují podle platforem. Případně se vývoj softwaru rozděluje do vývojových vln, kdy se nejprve vytvoří aplikace pro kritickou platformu a až následně se vytváří verze pro zbylé platformy. Vše výše zmíněné v konečném důsledku značně ztěžuje a zdražuje vývoj mobilních aplikací, a proto firmy i programátoři hledají způsob, jak celý proces zjednodušit a vytvořit jeden univerzální kód, který bude fungovat na všech třech platformách totožně, případně s drobnými úpravami. Tato technika se nazývá multiplatformní vývoj. 10

11 1.1 Cíle práce Tato bakalářská práce si klade za cíl představit a vysvětlit pojem multiplatformní vývoj a na praktické ukázce demonstrovat vývoj multiplatformní aplikace pro systémy Android a Windows Phone. V této bakalářské práci je ukázán celý postup tvorby aplikace od nápadu, wireframů a grafiky uživatelského rozhraní, výběru vhodné technologie pro multiplatformní vývoj až po realizaci navržené mobilní aplikace, REST API a administrátorského webového rozhraní. 11

12 2 Návrh mobilní aplikace Pro demonstraci multiplatformního vývoje byla zvolena aplikace pro zaznamenávání odpracovaného času. V podstatě se jedná o mobilní obměnu docházkového systém. 2.1 Obecný popis aplikace Aplikace jménem Worktastic je jednoduchý docházkový systém založený na mobilní aplikaci a webovém rozhraní pro správu docházky. Základní funkcí aplikace je měření odpracovaného času. Uživatel jedním kliknutím spustí časomíru, která měří čas strávený prací. Po dokončení práce uživatel zastaví časomíru a zaznamenaná data se automaticky nahrají na vzdálený server, kde k nim má přístup administrační pracovník firmy, pro kterou uživatel pracuje. Během pracovní doby může uživatel také nastavovat, jakou činnost dělá (pracuje, má schůzku, obědvá, kouří, přemísťuje se atd.) a jakou má náladu. V rámci firmy se uživatel může podívat, kteří kolegové jsou také aktuálně v práci, jakou právě vykonávají činnost a jakou mají náladu. Všechna data z pracovní doby se sbírají a následně si může uživatel zobrazit týdenní / měsíční statistiky své pracovní doby. 2.2 Základní technické požadavky aplikace Platformy o Android od verze 4.1 o Windows Phone od verze 8.0 Zobrazení o Pouze mobilní verze ve výškovém formátu Jazyk aplikace o Angličtina Backend o Aplikace bude komunikovat se vzdáleným serverem pomocí REST API o Součástí bude administrátorské webové rozhraní pro správu docházky 12

13 2.3 Popis funkcionalit Aplikace Worktastic se jako celek skládá z dvou hlavních částí backend a mobilní aplikace Backend Backendová část se stará o ukládání dat z mobilních telefonů za použití REST API a administračního rozhraní pro základní správu těchto dat. Navrhované API je popsáno v příloze 5 této práce. Administrační rozhraní určené pro správu dat je ve formě webové aplikace a poskytuje administrátorům funkce dle diagramu užití (Obr. 2.1). Obr. 2.1 Use Case diagram backendu aplikace (vlastní) Vytvoření profilu firmy Administrátor vytvoří profil pro svou firmu. Profil obsahuje základní informace o firmě jako její a kontaktní informace. Jedná se o základní entitu, ke které 13

14 jsou následně připojená všechna další data. Profil se dá později editovat případně smazat. Správa uživatelů Systém uživatelů a jejich přiřazování k dané firmě bude řízen z mobilní aplikace. Každé firmě bude přiřazen unikátní pětimístný PIN. Uživatel v mobilní aplikaci zadá ID společnosti a PIN. Následně bude uživatel připojen k dané firmě a jeho odpracované hodiny se budou zobrazovat v administračním rozhraní. Administrátor může uživatele případně smazat. Správa odpracovaných hodin Administrátor má k dispozici přehledy o odpracovaných hodinách pro všechny uživatele. Tato data může případně i upravovat. Administrační systém bude dále obsahovat reporty za jednotlivé měsíce. 14

15 2.3.2 Mobilní aplikace Mobilní aplikace je vystavená nad REST API, které jí poskytuje potřebná data. Mobilní aplikace poskytuje uživatelům funkce dle diagramu užití (Obr. 2.2). Obr. 2.2 Use Case diagram (vlastní) Registrace uživatele Aplikace po nainstalování na zařízení funguje i bez registrace, ale má omezené funkce. Uživatel může aplikaci využívat pro sledování svých odpracovaných hodin, ale nemůže se připojit k žádné firmě a nemůže sledovat své kolegy. Při registraci uživatel vyplní své základní údaje jako jméno, a heslo. 15

16 Přiřazení do firmy Po registraci se může uživatel připojit k již existující firmě. Uživatel zadá ID firmy a PIN, který získá od administrátora firmy. Po připojení k firmě se uživateli v aplikaci odemkne možnost sledovat kolegy a uživatel se začne zobrazovat kolegům v jejich seznamech. Měření pracovní doby Nejdůležitější funkce celé aplikace. Uživatel jedním kliknutím spustí časomíru, která začne počítat čas strávený prací. Během práce může uživatel libovolně měnit 2 základní veličiny prováděnou aktivitu a svou náladu. Obě veličiny budou mít 6 předdefinovaných možností. Sledování kolegů Zaregistrovaný uživatel, který je přiřazen do firmy, si může zobrazit seznam svých kolegů, kteří také aktuálně pracují, včetně jejich aktivity a aktuální nálady. Tato funkce může být diskutabilní v kontextu ochrany osobních údajů. Nicméně aplikace Worktastic je svým konceptem zaměřena na korporátní sféru, kde takovéto sdílení soukromých informací v rámci interního firemního použití není nebezpečné, ba naopak žádoucí. Sledování statistik Uživatel má k dispozici své statistiky filtrované po týdnech, nebo měsících. Statistiky zobrazují na základě nastaveného časového filtru následující data: Celkový čas strávený prací Čas rozdělený podle aktivit Čas rozdělený podle nálady Grafická interpretace dat 2.4 Návrh struktury aplikace Struktura aplikace vychází z návrhového vzoru Nejdříve obsah, který upřednostňuje zobrazování dat před navigací. Jako hlavní obsah je určena funkce pro zahájení 16

17 / ukončení pracovního intervalu včetně možnosti nastavit aktivitu a náladu. Druhý nejdůležitější obsah je seznam ukončených pracovních intervalů. Proto byly tyto dvě části umístěny na úvodní obrazovku. Návrh struktury aplikace je zobrazen na obrázku (Obr. 2.3). Obr. 2.3 Návrh struktury aplikace (vlastní) 2.5 Wireframy a grafický návrh aplikace Při tvorbě jakékoliv aplikace, která obsahuje nějaké uživatelské rozhraní, je vhodné připravit wireframy 1 tohoto rozhraní jako součást specifikace projektu. Wireframy by měly být dostatečně obecné a názorné, aby si i člověk bez znalosti programování a cílené platformy dokázal představit, jak přibližně bude aplikace vypadat a co konkrétně bude obsahem jednotlivých obrazovek. Kompletní wireframy celé aplikace Worktastic jsou přiloženy v příloze č. 1 této práce. Wireframy jsou vytvořeny pro platformu Android, nicméně finální grafické ztvárnění bude rozdílné dle cílové platformy. 1 Grafická interpretace uživatelského rozhraní pomocí jednoduchých diagramů a abstraktních prvků. Slouží k návrhu rozložení prvků uživatelského rozhraní na obrazovce zařízení. 17

18 Grafický návrh jednotlivých obrazovek aplikace Worktastic je přiložen v příloze č. 2 této práce. Grafický návrh obsahuje jak verzi pro Android, tak verzi pro Windows Phone. 2.6 Další rozvoj aplikace a nové funkce Vývoj softwaru je nekončící proces, který se neustále snaží postupně zlepšovat funkce a fungování aplikací. Žádná aplikace se nemůžu považovat za finálně hotovou, protože vždy ještě existuje něco, co je nutné opravit nebo co může být ještě vylepšeno. Proto je vhodné už při návrhu aplikace uvažovat o budoucích možných funkcích a způsobů využití Strategický plán rozvoje aplikace Worktastic Aplikace Worktastic by se měla v budoucnu rozvíjet ve dvou hlavních rovinách pomocník pro dodržování zdravého životního stylu během pracovní doby a nástroj firemní komunikace. Aplikace Worktastic by měla jako pomocník pro dodržování zdravého životního stylu během pracovní doby upozorňovat uživatele, aby nezapomínali správně jíst, pít a relaxovat. V rámci firemní komunikace se může aplikace obohatit o různé výzkumy mezi zaměstnanci, hodnocení kolegů a případně i nahradit jiné komunikační nástroje, jako jsou inter-firemní mailingy atd Seznam možných nových funkcí Vývoj ios verze Připomínky v intervalech pro jídlo, pití a relax Maximální pracovní doba za den Různě placené pracovní tarify za den Integrace softwaru třetích stran pro management projektů a úkolníčků Gamifikace (největší pracant, největší ulejvák ) Hodnocení kolegů Výzkum mezi zaměstnanci Kalendář firemních akcí Firemní novinky Integrace nositelností (wearables hodinky, chytré náramky atd.) A další 18

19 3 Výběr vhodné technologie pro vývoj Jak již bylo zmíněno v úvodu této práce, aby vývojáři svou aplikací pokryli 99 % trhu s chytrými telefony, musí vyvíjet své aplikace pro tři různé platformy. Každá z těchto platforem je jiná, používá jiné technologie, strukturu kódu, architekturu, uživatelské rozhraní a v neposlední řadě jiné programovací jazyky. To vede k různým problémům a komplikacím při vývoji, které jsou popsány níže. Druhou možností jak přistoupit k programování pro více platforem je multiplatformní vývoj, při kterém lze za pomoci různých nástrojů a postupů, dosáhnout až na hranici 100% znovupoužitelnosti kódu mezi platformami. Ovšem i tento přístup má svá proti, která jsou zmíněná v dalších kapitolách. 3.1 Popis cílových platforem Android Operační systém Android je, dle výzkumu společnosti IDC Corporate USA (3), aktuálně nejrozšířenější mobilní operační systém na světě s celkovým podílem na trhu 78 %. Android původně vzniknul v roce 2003 jako projekt společnosti Android Inc. Tato společnost byla v roce 2005 koupena společností Google (4). Operační systém je vystaven na Linuxovém jádře a je open source. Aplikace pro něj jsou psány v programovacím jazyce Java a interpretovány virtuálním strojem Dalvik, který byl vyvinut speciálně pro běh aplikací napsaných pro tuto platformu. Všechny komerční aplikace navržené pro tuto platformu musí být dostupné přes aplikační obchod Play Store, který je provozován společností Google. V tomto obchodě se dle výzkumu společnosti Statista Inc. (5) nacházelo zhruba 1,5 milionu aplikací v měsíci květnu To představuje obrovské množství možností pro koncové uživatele a na druhou stranu to vytváří vysoce konkurenční prostředí pro vývojáře mobilních aplikací Windows Phone Tento operační systém má podle výzkumu společnosti IDC Corporate USA (3) aktuální podíl na trhu 2,7 %, což ho řadí na třetí místo za Android a ios. 19

20 Windows Phone je vyvíjený společností Microsoft od roku 2010, kdy byla uvolněna první verze tohoto systému s názvem Windows Phone 7. Aktuální verze systému Windows Phone 8.1 bude v druhé polovině roku 2015 nahrazena zbrusu novým operačním systémem Windows 10 Mobile, který bude postavený na stejném jádře jako desktopový operační systém Windows 10. Společnost Microsoft v této souvislosti ještě více rozvíjí svůj koncept univerzálních aplikací (6), který umožňuje sdílet kód mezi mobilními a desktopovými aplikacemi a upravovat pouze uživatelské rozhraní. Společně s Windows 10 Mobile budou uvolněny dva další projekty, které podpoří vývoj multiplatformních aplikací. Konkrétně půjde Project Astoria (7) a Project Islanwood (8), které umožní vývojářům použít jejich existující aplikace pro Android nebo ios a s drobnými úpravami je vydat i pro Windows 10 Mobile. Pro aktuální Windows Phone 8.1 je za nativní programovací jazyk považován C#, ale v budoucnu to dle předchozího odstavce bude i Java nebo C++. Všechny komerční aplikace pro Windows Phone jsou dostupné přes aplikační obchod Windows Store. 3.2 Nativní vývoj aplikací Nativní mobilní aplikace je program, který byl speciálně navržen a vytvořen pouze pro daný mobilní operační systém, a to jak po stránce technické, tak i po stránce struktury a grafického rozhraní. Nativní aplikace mohou plně využívat všechny možnosti operačního systému a dostupného hardwaru zařízení. Tyto aplikace jsou napsané v programovacím jazyce dané platformy, za použití dostupných oficiálních SDK a dodržují platformou stanovené vývojářské postupy Typický postup při vývoji Při čistě nativním vývoji aplikací se často postupuje v oddělených týmech podle platforem, kde pro každou platformu se vytváří vlastní implementace uživatelského rozhraní, datového modelu i business logiky aplikace. V podstatě tedy vznikají různé aplikace pro každou platformu. Tyto aplikace sice plní stejnou funkci, nicméně uvnitř mohou fungovat odlišně. 20

21 To se může případně projevit i na tvorbě serverové části aplikace, kde mohou vznikat různá specifická API pro danou platformu Výhody 1. Rychlost a optimalizace aplikace Aplikace jsou vždy psané pro danou konkrétní platformu v nativním jazyce a dle nejlepších postupů, které stanovili architekti dané platformy. U nativních aplikací také není nutné část systémových zdrojů rezervovat pro režii aplikace, což je častý problém multiplatformních aplikací. 2. Uživatelské rozhraní na míru Každá z platforem má specifické rozložení a vzhled ovládacích prvků na displeji. Aby se uživatel v aplikaci cítil komfortně, je nutné dodržovat stanovené rozložení a vzhled prvků. Proto u nativních aplikací jsou často viditelné rozdíly mezi verzemi pro různé platformy. 3. Rychlejší vývoj pro jednotlivé platformy Pokud je pro úspěch aplikace jedním z rozhodujících faktorů takzvaný time to market, tedy čas od začátku vývoje po úspěšné publikování aplikace do aplikačního obchodu, je vhodné zvolit nativní vývoj, protože odpadá nutnost psát často obecnější a náročnější kód multiplatformních aplikací. Tento faktor samozřejmě záleží i na typu aplikace a její složitosti. Obecně lze tvrdit, že pokud je nutné rychle vytvořit mobilní aplikaci pro jednu konkrétní platformu, je vhodné využít nativní vývoj. 4. Specifické funkce Při vývoji velmi specifických aplikací nebo aplikací, které využívají ve větší míře hardwarové zdroje systému, na kterém jsou provozovány, jako například kameru, mikrofon, GPS lokaci, senzor přiblížení, akcelerometr, gyroskop nebo kompas, je vhodné použít nativní vývoj, protože různé platformy přistupují k těmto zdrojům různým způsobem, a to včetně bezpečnosti a oprávnění k těmto zdrojům přistupovat. 21

22 3.2.3 Nevýhody 1. Cena Pro nativní vývoj je často nutné mít pro každou platformu vlastní vývojový tým (případně jednoho vývojáře), což zvyšuje celkovou cenu za aplikaci. 2. Udržování a opravování více zdrojových projektů V každém softwaru se čas od času najde chyba. Při nativním vývoji je nutné udržovat a průběžně opravovat zvlášť kód aplikace pro každou platformu. To klade vyšší nároky na tým i finanční stránku provozu aplikace. 3. Nulová znovu-použitelnost kódu Všechny funkcionality aplikace jsou implementovány specificky pro cílovou platformu, takže se stejné funkce musí programovat tolikrát, kolik platforem má aplikace podporovat. 4. Více programovacích jazyků, více knihoven, více služeb Každá platforma má svůj vlastní hlavní programovací jazyk. Každá platforma má své vlastní knihovny, komponenty a služby, které se průběžně upgradují a opravují se v nich chyby. To vše řádově zvyšuje náročnost na hlídání všech vztahů a celkovou správu aplikace a použitých knihoven. 3.3 Multiplatformní vývoj Multiplatformní vývoj umožňuje částečně nebo zcela znovu použít kód napsaný pro jednu platformu na platformě další. Míra znovupoužitelnosti záleží na více faktorech: konkrétní multiplatformní nástroj použitý pro vývoj, specifičnost vyvíjené aplikace a míra a způsob použití hardwarových zdrojů, zkušenost vývojového týmu, uživatelské rozhraní aplikace. Dobrou analýzou a vhodným výběrem multiplatformního nástroje lze dosáhnout % sdílení kódu mezi aplikacemi. Pro multiplatformní vývoj se vždy používají nástroje třetích stran, které umožňují psát kód aplikace v jednom programovacím jazyce, dodávají jedno unifikované API 22

23 a aplikační vrstvu, která se stará o zobrazování uživatelského rozhraní a o překládání univerzálních volání API do specifických volání API pro danou platformu. Několik z těchto nástrojů je popsáno v kapitole 3.4 této práce Typický postup při vývoji Prvním a zcela zásadním krokem je vybrat si vhodný multiplatformní nástroj pro vývoj aplikace. Od tohoto rozhodnutí se odvíjí všechna další rozhodnutí. Následný vývoj probíhá nejprve se zaměřením na jednu konkrétní platformu a po úplném dokončení aplikace pro primární platformu se buď vytváří její modifikace pro platformu další, nebo se přímo rozšiřuje a modifikuje kód původní aplikace, aby fungoval stejně i na další platformě. Na celé aplikaci často pracuje jeden vývojářský tým Výhody 1. Cena Pro vývoj aplikace na více platforem stačí jeden vývojový tým. Výhodnost investice se zvyšuje s počtem podporovaných platforem. 2. Nutnost udržovat pouze jeden zdrojový projekt Pokud se v kódu aplikace najde nějaká chyba, stačí jí opravit na jednom místě. Případně, pokud se přidávají nové funkce, stačí je naprogramovat pouze jednou. 3. Vysoká znovupoužitelnost kódu Jednou napsaný kód se může úplně nebo částečně znovu použít na dalších platformách 4. Jeden programovací jazyk, jedny knihovny a jedny komponenty Díky použití jednoho programovacího jazyka je možné na všech platformách používat i stejné knihovny a komponenty, což snižuje komplexnost při hlídání vztahů mezi nimi a udržování aktuálnosti všech knihoven a komponent. 23

24 3.3.3 Nevýhody 1. Generické uživatelské rozhraní Častým problémem multiplatformních aplikací je, že mají jedno uživatelské rozhraní pro všechny platformy, čímž se značně degraduje uživatelský zážitek. Řešením je vytvářet uživatelské rozhraní specificky pro každou platformu, což ovšem zase činí samotný vývoj složitějším. 2. Rychlost a optimalizace aplikací Část systémových zdrojů je použita na režii samotného běhu aplikace a aplikační vrstvy, která se stará o zobrazení uživatelského rozhraní a překládání volání multiplatformních API do nativních volání. To vše způsobuje, že multiplatformní aplikace reagují pomaleji než aplikace nativní. V jaké míře, většinou záleží na nástroji, který byl použit pro vytvoření multiplatformní aplikace, a samozřejmě i na kvalitě kódu. 3. Závislost na nástrojích třetích stran Multiplatformní aplikace jsou zcela závislé na použitém multiplatformním nástroji. S tím jsou spojena různá rizika, například vývoj nástroje může být ukončen, může obsahovat chybu, nemusí podporovat aktuální verzi operačního systému, nemusí implementovat všechna nativní API atd. 4. Složitost kódu Multiplatformní kód je často psán obecněji a komplexněji než v případě nativního kódu. Navíc se často využívají různé techniky jak psát i specifický kód pro různé platformy do multiplatformního kódu, což snižuje jeho čitelnost a zvyšuje náchylnost k chybám. 3.4 Nástroje pro vývoj multiplatformních aplikací Na trhu existuje celá řada různých nástrojů, které umožňují multiplatformní vývoj. Tyto nástroje se často liší svým přístupem k multiplatformnímu vývoji i použitými technologiemi. Obecně lze tvrdit, že existují 3 velké skupiny nástrojů pro multiplatformní vývoj: 1. Nástroje založené na webových technologiích (HTML5, CSS, JS) 2. Nástroje založené na JavaScriptovém běhovém prostředí 24

25 3. Jiné, které používají různé nízkoúrovňové jazyky jako například C, C++ a C# V této kapitole je představeno několik hlavních multiplatformních nástrojů, které pokrývají všechny 3 skupiny PhoneGap (HTML5/JS) PhoneGap je framework umožňující vývoj multiplatformních mobilní aplikací za použití webových technologií jako jsou HTML5, JavaScript a CSS (kaskádové styly). PhoneGap je jedna z distribucí open-source projektu Apache Cordova. Tento nástroj podporuje všechny důležité platformy Androi, ios i Windows Phone. PhoneGap je dostupný zdarma. Jak funguje PhoneGap PhoneGap aplikace jsou v podstatě mobilní webové stránky. Tyto stránky jsou následně pro každou podporovanou platformu zabaleny do spustitelného balíčku (Obr. 3.1) Obr. 3.1 Jak fungují aplikace napsané nástrojem PhoneGap (převzaté (9)) Po zapnutí aplikace v telefonu se spustí nativní komponenta webového okna, takzvané Webview. Tato komponenta se chová jako klasický webový prohlížeč, který interpretuje webové stránky, postrádá ovšem navigační panel s funkcemi jako obnovení stránky nebo navigaci v historii prohlížení. V této komponentě se následně spustí připojená webová aplikace. Spuštěná webová aplikace má díky frameworku 25

26 Apache Cordova přístup k nativním API telefonu, které může volat přes JavaScriptové API (9). Uživatelské rozhraní je kompletně napsané pomocí jazyků HTML a CSS, což s sebou přináší i největší nevýhody tohoto nástroje, kterými jsou nízký výkon oproti nativním aplikacím a často generické uživatelské rozhraní Titanium Titanium je open-source produkt společnosti Appcelerator Inc., který umožňuje psát nativní mobilní aplikace v jazyce JavaScript. Aplikace se píší ve vlastním IDE nazvaném Appcelerator Studio. Titanium podporuje všechny tři nejdůležitější platformy Android, ios i Windows Phone. Všechny nástroje od Appceleratoru jsou dostupné zdarma, až dokud programátor nevypublikuje první aplikaci pro zveřejnění v aplikačních obchodech, následně se platí měsíční poplatek za vývojáře, který začíná na 39 amerických dolarech. Jak funguje Titanium Titanium v podstatě spustí nativní mobilní aplikaci a s ní propojené výkonné JavaScriptové prostředí. V JavaScriptovém prostředí běží vytvořená multiplatformní aplikace, ovšem její uživatelské prostředí se renderuje v nativní aplikaci. Titanium následně funguje jako most, který spojuje Javascriptovou aplikaci s nativním uživatelským rozhraním a dále poskytuje přístup k nativním API dané platformy (Obr. 3.2) (10). 26

27 Obr. 3.2 Architektura nástroje Titanium (převzaté (10)) Součástí Titania je i framework s názvem Alloy, díky kterému je možné psát aplikace pomocí MVC paradigmatu, což zvyšuje přehlednost a hlavně znovupoužitelnost kódu. Výhody oproti webovému přístupu PhoneGapu jsou zřejmé. Uživatelské rozhraní je renderováno nativně, a uživatelova zkušenost je tak znatelně lepší Xamarin Xamarin je produkt stejnojmenné společnosti, který má k nativnímu vývoji nejblíže ze všech uvedených nástrojů. Jedná se o produkt vystavěný nad technologiemi Microsoftu, konkrétně nad jeho platformou.net. Jako hlavní programovací jazyk slouží C#. Aplikace je možné psát v IDE, které vytvořila přímo společnost Xamarin a které se jmenuje Xamarin Studio, nebo v IDE od Microsoftu - Visual Studiu od verze Xamarin podporuje všechny tři nejdůležitější mobilní platformy Android, ios i Windows Phone. Základní licence pro jednoho vývojáře stojí 25 amerických dolarů měsíčně. 27

28 Jak funguje Xamarin Xamarin je trochu odlišný od dříve představených nástrojů, protože každá platforma má vlastní implementaci. Produkt Xamarinu je tak rozdělen na 3 hlavní podprodukty Xamarin.Android, Xamarin.iOS a Xamarin.Forms. Xamarin.Android používá ke svému běhu na platformě Android běhové prostředí postavené na open-source projektu Mono. Mono je napsané v programovacím jazyce C a běží současně vedle vlastního běhového prostředí Androidu nad linuxovým jádrem. Programátor má následně 2 možnosti, jak může přistupovat k systémovým zdrojům, a to buď za použití standardních.net knihoven, nebo přes API poskytované běhovým prostředí Androidu, které je pomocí takzvaného API bindingu k dispozici i v jazyce C# (Obr. 3.3) (11). Obr. 3.3 Architektura Xamarin.Android (převzaté (11)) Xamarin.iOS používá Ahead-of-Time compiler, který překládá aplikace přímo do asemblerového kódu pro procesory postavené na architektuře ARM. Všechna nativní API jsou přeložena do jazyka C# a dají se volat přímo z jazyka C#. Xamarin.Android a Xamarin.iOS pracují zcela odděleně, a je tak možné psát nativní uživatelské rozhraní a aplikační logiku zvlášť pro Android a ios, ale využívat společný datový model a business logiku aplikace. Stejný datový model a business logika se dá použít i pro aplikace psané pro Windows Phone (tato platforma má nativní podporu jazyka C# a knihoven z framework.net). 28

29 Obr Architektura multiplatformního řešení realizovaného přes Xamarin (převzaté (12)) Xamarin.Forms je framework, který ještě dále integruje Xamarin.Android, Xamarin.iOS a vývoj pro Windows Phone a kromě datového modelu a business vrstvy unifikuje a umožňuje sdílet i aplikační vrstvu, která se stará o otevírání nových obrazovek, navigaci mezi obrazovkami a předávání dat mezi uživatelským rozhraním a business vrstvou (13). Obr Architektura multiplatformního řešení realizovaného přes Xamarin.Forms (převzaté (12)) 29

30 3.4.4 Další nástroje Samozřejmě existuje mnoho dalších nástrojů, které lze použít, ale většinou se jedná pouze o variace na představené technologie: React Native od společnosti Facebook, který je podobně jako Framework Titanium, založený na JavaScriptu, který se překládá do nativního uživatelského rozhraní. V tuto chvíli podporuje pouze operační systém ios. DevExtreme Mobile od společnosti DevExpress, který je založený na stejném principu jako PhoneGap, tedy webovém vývoji s následnou interpretací za použití nativní komponenty webview. Qt od společnosti The Qt Company, který je založený na jazyce C++ Adobe AIR od společnosti Adobe je multiplatformní běhové prostředí pro spouštění Flashových a ActionScriptových aplikací. 3.5 Výběr vhodného nástroje Jaký nástroj použít na multiplatformní vývoj? To je zcela zásadní otázka. Výběr špatné technologie může mít neblahé dopady v pozdějších fázích provozování projektu, kdy se může projevit nedostatečná podpora nativních funkcí telefonu, nedostatečná stabilita dané technologie nebo nižší výkon multiplatformních řešení. Příkladem z praxe může být společnost Facebook provozující největší sociální síť na světě. Facebook v červenci 2008 zveřejnil svoji mobilní aplikaci pro systém ios (14) a v září 2009 zveřejnil první verzi mobilní aplikace pro systém Android (15). Obě verze aplikace byly napsané pomocí webových technologií HTML5, JavaScriptu a CSS. Pro běh aplikací byl vytvořen interní projekt, který fungoval podobně jako nástroj PhoneGap. V roce 2012 ovšem Facebook vydal nové verze svých aplikací, které byly kompletně vytvořeny jako nativní aplikace pro obě platformy. V září 2012 přiznal Mark Zuckerberg, provozní ředitel společnosti, že multiplatformní vývoj za použití webových technologií byl pravděpodobně největší strategická chyba, kterou společnost udělala a kvůli které promrhala jedenáct měsíců vývoje (16). 30

31 Ne vždy je tedy multiplatformní vývoj vhodný. To jestli použít multiplatformní vývoj, případně jaký nástroj a technologii zvolit, závisí vždy na konkrétním projektu. Obecně lze tvrdit následující: Nativní aplikace mají vždy lepší výkon a uživatelský zážitek než multiplatformní řešení. Proto pokud nízká cena není jedním z hlavních faktorů při výběru technologie, je většinou nejvhodnější zvolit nativní vývoj. Použití webových technologií (PhoneGap, DevExtreme Mobile atd.) je vhodné především u menších aplikací, kde je nutné pouze minimální propojení s funkcemi telefonu (GPS, kamera, kontakty atd.) a hlavním zaměřením je konzumace obsahu (různé RSS čtečky, novinové aplikace atd.) Technologie JavaScriptových aplikací, které používají nativní uživatelské rozhraní (Titanium, React Native), je vhodná pro aplikace, které jsou vysoce datově závislé na připojení k internetu a velmi často komunikují se vzdáleným serverem přes API. Nespornou výhodou v tomto případě je možnost použít stejný programovací jazyk pro vývoj mobilních aplikací i serverové části. Nástroj Xamarin je díky své naprosto rozdílné implementaci na platformách Android a ios výkonově asi nejblíže nativním aplikacím, čímž vzniká zajímavá možnost plně oddělit vývoj na specifické uživatelské rozhraní pro každou platformu a společnou business logiku a datový model pro všechny aplikace. V tomto ohledu se dá Xamarin považovat za levnější variantu nativního vývoje a proto je vhodný pro téměř jakoukoliv aplikaci. Aplikaci Worktastic, popsanou v kapitole č. 2 této práce, by bylo možné naprogramovat za použití všech tří představených nástrojů. Nicméně s přihlédnutím k plánu dalšího rozvoje aplikace byl vybrán nástroj Xamarin jako nejvhodnější. Hlavními důvody pro výběr tohoto nástroje byly: 1. Snadná implementace rozdílného uživatelského rozhraní pro každou platformu 31

32 2. Podpora nositelností se systémem Android Wear (17) a watchos (18), což bylo vzhledem k zaměření aplikace vyhodnoceno jako důležitá možnost dalšího rozvoje. 32

33 4 Popis technické realizace Celá aplikace Worktastic se skládá ze dvou hlavních částí, které na sobě technologicky nejsou závislé, a v budoucnu by například bylo možné přejít na nativní vývoj aplikací, nebo změnit technologii serverové části. Obr. 4.1 Hlavní části aplikace (vlastní) 4.1 Serverová část (backend) Serverová část aplikace se dále dělí na 3 oddělené komponenty. Konkrétně se jedná o databázi, RESTové API a administrátorské webové rozhraní. K realizaci API i administrátorského rozhraní byl použit programovací jazyk PHP s frameworkem Nette (19). Nette je český PHP framework vyvíjený pod záštitou Nette Foundation. Jedná se o plně objektový framework, který využívá návrhový vzor Model View Controller (MVC). Část administračního rozhraní je založena na vlastním redakčním systému Super- Fast. Kompletní zdrojová data k serverové části jsou uložena v GIT repozitáři. Odkaz na něj a další informace jsou v příloze č. 3 této práce. 33

34 4.1.1 Adresářová struktura serverové části adminer databázový správce Adminer (20) app/adminmodule kód administračního rozhraní app/apimodule obslužný kód, který zpracovává požadavky na API app/superfcore data redakčního systému SuperFast app/config konfigurační soubory app/bootstrap.php inicializační soubor resources CSS a JavaScript soubory a obrázky user_uploads slouží pro ukládání obrázků uploadovaných uživateli vendor externí PHP knihovny Obr. 4.2 Adresářová struktura serverové části composer.json seznam závislostí na externích PHP knihovnách (pro použití se správcem závislostí Composer (21)) database-init.sql dump databáze se základními daty index.php obecný startovací script Databáze Veškerá aplikační data se ukládají do MySQL databáze s uložištěm InnoDB. Kompletní relační diagram databázových tabulek je přiložený v příloze č. 4 této práce. Popis vybraných tabulek users obsahuje všechny uživatele systému (administrátory i uživatele mobilních aplikací) a jejich šifrované přihlašovací údaje. Podle sloupce role se dělí uživatelé do uživatelských skupin. Role registered je určená pro uživatele mobilní aplikace a role companyadmin je určena pro administrátory docházkového systému. 34

35 companies obsahuje všechny firmy vedené v systému devices obsahuje ID všech zařízení, které používají aplikaci. ID zařízení slouží k anonymnímu sbírání dat, pokud uživatel není přihlášený v mobilní aplikaci activities, feelings obsahují všechny možné stavy aktivit a stavy nálad, které se používají v aplikaci sessions obsahuje všechny pracovní intervaly, které uživatelé v aplikaci dokončili sessions_activities obsahuje seznam všech aktivit, které uživatelé prováděli během každého uloženého pracovního intervalu sessions_feelings obsahuje seznam všech nálad, které uživatelé měli během každého uloženého pracovního intervalu sessions_opened obsahuje seznam všech aktuálně probíhajících pracovních intervalů. Tyto informace se následně v aplikaci používají pro zobrazení seznamu aktuálně pracujících spolupracovníků Další použité tabulky slouží převážně jako servisní tabulky pro další obsah administrátorského webového rozhraní a v budoucnosti i produktového webu RESTové API Pro veškerou komunikaci mezi mobilní aplikací a serverovou částí se používá RES- Tové API, jehož logika je implementována v jazyce PHP a za použití frameworku Nette (19) a jeho rozšíření Restful (22). Kompletní návrh API napsaný v jazyce Blueprint (23) je přiložen v příloze č. 5 této práce. Co je to REST API REST je zkratka ze slov Representational State Trasfer a jedná se o architekturu webového rozhraní pro distribuované systémy, kdy jsou důsledně rozdělené role na klienta a server. Klient se vždy dotazuje na určitý zdroj (resource, případně endpoint) a určuje metodu dotazování. REST podporuje čtyři základní metody dotazování, které implementují princip CRUD. Konkrétně se jedná o: 35

36 GET, který slouží pro získání dat daného zdroje, POST, která slouží pro vytvoření nové položky na daném zdroji, PUT, který slouží k editaci položky na daném zdroji, DELETE, který slouží ke smazání položky na daném zdroji. Každý zdroj musí mít unikátní URL adresu, ovšem ne každý zdroj musí nutně implementovat všechny čtyři metody. Pro přenášení samotných dat slouží většinou formát JSON nebo XML. REST je bezstavový protokol. Takže každé volání RESTového API musí obsahovat všechna potřebná data pro úspěšné zpracování. (24) Seznam použitých API [POST] /homepage/session Ukládá pracovní interval do systému [PUT] /homepage/session Upravuje aktuální aktivitu a pocit pro právě probíhající pracovní interval. [GET] /user/stats Vrací aktuální statistiky pro daného uživatele [GET] /user/fellows Vrací seznam všech spolupracovníků, kteří mají aktuálně otevřený pracovní interval [POST] /user/profile Vytváří nový uživatelský profil a uživatele hned i přihlašuje [PUT] /user/profile Přihlašuje uživatele [PUT] /user/company Připojuje uživatele k dané společnost [DELETE] /user/company Odpojuje uživatele od dané společnosti 36

37 4.1.4 Administrátorské webového rozhraní Webová aplikace pro administrátory je určena pro administrativní pracovníky firem, které využívají aplikaci Worktastic. Umožňuje jim registraci firmy do aplikace a následnou správu profilu a docházky jejich pracovníků. Toto rozhraní je naprogramováno v jazyce PHP a frameworku Nette (19). Přístup do ukázkové webové aplikace je možný na adrese s následujícími přístupovými údaji: Uživatelské jméno: info@uhk.cz Heslo: uhk123 Grafický návrh a popis funkcionality administrátorského rozhraní jsou součástí přílohy č. 6 této práce. Grafické ztvárnění rozhraní je založeno na open-source grafické šabloně SB Admin (25) Adresářová struktura administrátorského rozhraní Obr. 4.3 Struktura administrátorského rozhraní app/adminmodule/companymodule Obsahuje kontrolery a šablony administrátorského rozhraní app/adminmodule/models Obsahuje třídy pro práci daty app/visualcomponents Obsahuje vizuální prvky jako formuláře a seznamy 37

38 app/presenters a app/templates Obsahuje obecné kontrolery a šablony 4.2 Mobilní aplikace Pro realizaci multiplatformního vývoje mobilní aplikace byl vybrán nástroj Xamarin, konkrétně framework Xamarin.Forms. Xamarin.Forms díky své architektuře umožňuje vytvářet komplexní multiplatformní aplikace, které sdílí nejenom datový model a business vrstvu, ale i aplikační vrstvu a značnou část uživatelského rozhraní, které je ovšem pro každou platformu vykresleno jako plně nativní prostředí. Tento framework obsahuje sedm základních mobilních layoutů a 20 ovládacích prvků jako jsou seznamy, tlačítka, formuláře atd. Všechny tyto prvky uživatelského rozhraní se na cílových platformách interpretují jako nativní ovládací prvky. Obr Seznam podporovaných layoutů v Xamarin.Forms (převzaté (26)) Vedle samotných ovládacích prvků sjednocuje framework Xamarin.Forms i práci s jednotlivými obrazovkami aplikace, jejich otevírání, zavírání a navigaci mezi nimi. V tomto frameworku se používá pro zobrazení obrazovky třída Page, tato třída je na každé platformě implementována rozdílně. Pro Windows Phone je implementována jako nativní třída Page, pro platformu Android se jedná o kontejner, který vyplňuje celý prostor displeje (ovšem nejedná se o nativní implementaci třídy Activity) a pro 38

39 ios je implementována jako nativní View kontroler. Xamarin.Forms podporuje pět základních typů obrazovek. Obr. 4.5 Typy podporovaných obrazovek (převzaté (27)) Nastavení řešení pro multiplatformní vývoj v Xamarin.Forms Multiplatformní aplikace pro Xamarin.Forms je možné vyvíjet buď v IDE od společnosti Xamarin, které se jmenuje Xamarin Studio, nebo v IDE Visual Studio (od verze 2012) od společnosti Microsoft. Vzhledem k cíleným platformám je vhodnější použít Visual Studio, protože Xamarin Studio nepodporuje sestavování aplikací pro Windows Phone, proto v něm není možné testovat aplikaci na tomto systému. Ve Visual Studiu je možné sestavit jak Android aplikaci, tak Windows Phone aplikaci a následně obě testovat v emulátoru nebo na připojeném zařízení. Nastavení řešení a sdílení multiplatformního kódu Multiplatformní vývoj aplikací za použití Xamarin.Forms obecně probíhá tak, že v řešení je vytvořen jeden projekt, který obsahuje multiplatformní kód a dále je pro každou cílenou platformu vytvořen jeden specifický platformní projekt, který obsahuje specifický kód pro danou platformu. Takže pro aplikaci Worktastic byly v rámci řešení vytvořeny tři projekty Worktastic (Portable) obsahující multiplatformní kód, Worktastic.Droid obsahující kód pro platformu Android (projekt vychází z implementace Xamarin.Android), Worktastic.WinPhone obsahující kód pro platformu Windows Phone. 39

40 Obr. 4.6 Řešení pro aplikaci Worktastic (vlastní) Xamarin.Forms nabízí pro sdílení multiplatformního kódu dvě základní techniky, buď přenosné knihovny tříd (v originále Portable Class Libraries (28)), nebo sdílený projekt (v originále Shared Project (29)). Pro sdílení kódu je důležité, aby cílená platforma byla schopná zpracovat použité knihovny při vývoji. Zde vzniká problém, protože různé platformy implementují různé knihovny a verze.net jádra. Sdílený projekt tento problém řeší tak, že v multiplatformním kódu dovoluje používat kompilační podmínky pro volání specifických knihoven.net jádra zvlášť pro každou platformu. Přenosné knihovny tříd se s tímto problémem vypořádávají tím, že programátor předem stanoví konečný seznam knihoven a funkcí z.net jádra, které je možné použít ve všech cílených platformách (takzvaný.net Core Library Profile). Obě techniky mají svá pro a proti. V aplikaci Worktastic je použita technika přenosných knihoven tříd Projekt Worktastic.Droid Projekt Worktastic.Droid obsahuje specifický kód pro platformu Android. Vzhledem k tomu, že drtivá většina aplikace Worktastic je napsána v multiplatformním kódů slouží kód v tomto projektu hlavně ke spuštění aplikace, ale o samotný chod se stará již multiplatformní kód obsažený v projektu Worktastic (Portable). Tento projekt musí nutně obsahovat referenci na projekt Worktastic (Portable), aby se multiplatformní kód zkompiloval společně se specifickým kódem pro platformu Android. 40

41 Obr. 4.7 Reference na projekt Worktastic (Portable) (vlastní) Spuštění Android aplikace Pro spuštění aplikace slouží třída MainActivity, která spustí nativní aplikaci pro Android a následně předá řízení aplikace multiplatformnímu kódu. Obsah souboru MainActivity.cs using Android.App; using Android.Content.PM; using Android.OS; namespace Worktastic.Droid { [Activity (Theme = "@style/worktastic", Label = "Worktastic", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize ConfigChanges.Orientation)] public class MainActivity : global::xamarin.forms.platform.android.formsapplicationactivity { protected override void OnCreate (Bundle bundle) { base.oncreate (bundle); } } // Starts multiplatform code global::xamarin.forms.forms.init (this, bundle); LoadApplication (new App ()); } Statické soubory Aplikace Worktastic obsahuje celou řadu statických souborů, jako jsou obrázky a různé ikony, které se používají v aplikaci. Tyto soubory se neukládají v multiplatformním projektu, ale ve specifických projektech. V projektu Worktastic.Droid slouží k ukládání těchto souborů složka Resources. 41

42 Vzhledem k tomu, že operační systém Android je používán na stovkách různých typů zařízení, která mají různá rozlišení displejů a různé velikosti displejů, je nutné toto zohlednit při vývoji aplikace. V systému Android je možné do aplikačního balíčku přibalit několik různých velikostních verzí statického obrázku. To, která verze obrázku se zobrazí uživateli, se rozhoduje podle hustoty pixelů na displeji zařízení. Tímto je zaručeno, že na velmi jemných displejích se zobrazí kvalitnější (a tím pádem i ostřejší) obrázky. Obr Různé velikosti ikonky pro různé hustoty pixelů (vlastní) Pro ukládání různých verzí stejného obrázku slouží složky drawable, drawablehdpi, drawable-xhdpi, drawable-xxhdpi v rámci složky Resources. Specifická implementace pro systém Android Ne všechny funkce je vždy možné realizovat v multiplatformním kódu. V aplikaci Worktastic se jedná konkrétně o dvě funkce, které je nutné naprogramovat specificky pro danou platformu: 1. Připojení k SQLite databázi, které je realizováno třídou SQLite_Android 2. Získání unikátního ID zařízení, které je realizováno třídou DeviceID_Android Tyto specifické implementace je možné následně používat v multiplatformním kódu pomocí služby DependencyService (30). Implementace DependencyService je podrobněji popsaná v kapitole této práce. 42

43 4.2.3 Projekt Worktastic.WinPhone Stejně jako projekt Worktastic.Droid obsahuje i tento projekt specifický kód pro danou platformu. Tento projekt musí nutně obsahovat referenci na projekt s multiplatformním kódem. Spuštění Windows Phone aplikace Pro spuštění Windows Phone aplikace slouží třída MainPage, která po spuštění aplikace a nahrání hlavní obrazovky předá řízení multiplatformnímu kódu. Obsah souboru MainPage.xaml.cs using System; using System.Collections.Generic; using System.Linq; using System.Net; using Microsoft.Phone.Controls; using Xamarin.Forms; namespace Worktastic.WinPhone { public partial class MainPage : global::xamarin.forms.platform.winphone.formsapplicationpage { // Constructor public MainPage() { InitializeComponent(); SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape; } // Starts multiplatform code Forms.Init(); LoadApplication(new Worktastic.App()); } } Statické soubory Statické soubory pro platformu Windows Phone jsou umístěny ve složce images. Vzhledem k tomu, že diverzita rozlišení na platformě Windows Phone není tak široká, společnost Microsoft sama doporučuje vložit do projektu pouze statické soubory pro rozlišení WXGA (31). Specifická implementace pro systém Windows Phone Specifické připojení k SQLite databázi je realizováno třídou SQLite_WinPhone. 43

44 Specifické získávání ID zařízení je realizováno třídou DeviceID_WinPhone Projekt Worktastic (Portable) Tento projekt obsahuje celé uživatelské rozhraní aplikace, aplikační vrstvu, business logiku, datový model a webové služby pro komunikaci s REST API. Všechny obrázky uživatelského rozhraní v této sekci zobrazují pouze vzhled aplikace na platformě Androidu. V aplikaci pro Windows Phone prvky vypadají trochu jinak, ovšem jedná se pouze o odlišnou vizualizaci, funkčně fungují naprosto stejně jako na platformě Android. Start multiplatformní aplikace Pro spuštění aplikace slouží třída App, která je obsažená v souboru Worktastic.cs. Při startu aplikace Worktastic na dané platformě se po nativní inicializaci aplikace vždy volá vždy tato třída, která následně přebírá chod celé aplikace. V této třídě se definují základní prvky: 44

45 1. Struktura úvodní obrazovky a rozložení stránek Obr. 4.9 Rozdělení stránek při startu aplikace (vlastní) a. Homescreen (typ NavigationPage) b. TabsHolder (typ TabbedPage) c. SessionsPage (typ ContentPage) d. StatsPage (typ ContentPage) e. FellowsPage (typ ContentPage) 2. Akční tlačítka a akce po jejich zmáčknutí Obr Akční tlačítka (vlastní) 45

46 3. Inicializace připojení k lokální databázi 4. Inicializace webových služeb 5. Definování chování aplikace při jejím spuštění (metoda OnStart()), návratu z pozadí (metoda OnResume()) a jejím uspání (metoda onsleep()) Layouty aplikace Framework Xamarin.Forms umožňuje vytvářet uživatelské rozhraní dvěma způsoby: 1. Pomocí značkovacího jazyka XAML (32). Jedná se jazyk založený na formátu XML 2. Programově v kódu za použití API volání V rámci aplikace Worktastic byl zvolen programový přístup. Kompletní uživatelské rozhraní a business logika se nachází ve složce Views. Datový model aplikace Aplikace Worktastic používá pro ukládání dat lokální SQLite databázi. Tato databáze obsahuje následující tabulky: ActivityTable obsahuje data o možných typech aktivit, které může uživatel provádět během pracovního intervalu FeelingTable obsahuje data o možných typech pocitů, které může uživatel mít během pracovního intervalu UserTable slouží k uložení uživatelského profilu pro registraci nebo přihlášení CompanyTable slouží k uložení profilu společnosti po připojení se ke společnosti SessionTable slouží k ukládání pracovních intervalů ActivitySessionTable slouží k ukládání aktivit, které uživatel prováděl během pracovního intervalu FeelingSessionTable slouží k ukládání pocitů, které uživatel měl během pracovního intervalu 46

47 StatsTable slouží k ukládání statistik daného uživatele FellowTable slouží k ukládání seznam ostatních aktuálně pracujících kolegů v připojené společnosti FilterTable obsahuje možné filtry pro statistiky PeriodTable obsahuje možné časové periody pro filtrování statistik Pro každou tabulku je vytvořena obslužná třída ve složce Data. Pro práci s uloženými daty v kódu aplikace se využívá ORM frameworku. Mapované objekty jsou uloženy ve složce Models. Pro získávání dat z databáze a ukládání do ní se v kódu aplikace používá statická třída WorktasticDatabase umístěná ve složce Data. Jak již bylo zmíněno dříve, tak samotné připojení k databázi je realizováno specificky pro každou platformu zvlášť. Pro jeho získání v multiplatformním kódu se používá služba DependencyService (30). Pro použití DependencyService je nutné implementovat tři části: 1. V multiplatformním kódu vytvořit rozhraní (v projektu Worktastic se jedná o rozhraní ISQLite) 2. Nativní implementaci dané funkce (třída SQLite_Android v projektu Worktastic.Droid a třída SQLite_WinPhone v projektu Worktastic.WinPhone) 3. Získání a použití dané funkce v multiplatformním kódu database = DependencyService.Get<ISQLite> ().GetConnection (); Webové služby Aplikace Worktastic komunikuje se vzdáleným serverem prostřednictvím REST API. Veškerá komunikace probíhá přes třídy obsažené ve složce WebServices. Zdrojové kódy aplikace Kompletní zdrojové kódy aplikace jsou k dispozici ve formě GIT repozitáře. Odkaz na repozitář a sestavenou spustitelnou aplikaci je součástí přílohy č. 3 této práce. Testovací uživatel 47

48 V mobilní aplikaci je možné se přihlásit pod těmito údaji: Heslo: uhk123 Tento testovací uživatel má připojenou firmu Univerzita Hradec Králové a v seznamu pracujících kolegů má 2 další uživatele. 48

49 5 Výsledky a závěr Cílem této práce bylo na konkrétní aplikaci představit multiplatformní vývoj mobilních aplikací. Výsledkem této práce je mobilní aplikace Worktastic, která slouží jako jednoduchý mobilní docházkový systém. Aplikace Worktastic se skládá z backendové části, jejíž součástí je REST API a administrátorské webové rozhraní, a z multiplatformní mobilní aplikace. Na aplikaci Worktastic byl ukázan celý proces tvorby mobilní aplikace od návrhu struktury aplikace (wireframy) přes návrh grafického rozhraní po výběr vhodného multiplatformního vývojového nástroje až po samotnou realizaci backendové části a mobilní aplikace. Po porovnání třech různých nástrojů pro multiplatformní vývoj byl nakonec pro realizaci aplikace Worktastic vybrán nástroj Xamarin, a to konkrétně jeho framework Xamarin.Forms. Tento nástroj umožňuje multiplatformní vývoj mobilních aplikací, kdy aplikační vrstva, business vrstva a datový model jsou sdíleny mezi platformami, ovšem uživatelské rozhraní je renderováno pomocí nativních komponent. Při vývoji aplikace se projevila i jedna z popisovaných nevýhod multiplatformního vývoje, a to konkrétně závislost na nástroji třetí strany. Interní komponenta frameworku Xamarin.Forms, která se stará o zobrazení seznamu položek, totiž obsahuje chybu na platformě Windows Phone. Tuto chybu objevil autor této práce a dne ji reportoval společnosti Xamarin. Chyba zatím nebyla opravena. Detail a popis chyby je k dispozici na této adrese Součástí této práce je i strategický plán rozvoje aplikace Worktastic. V budoucnu by se měla tato aplikace dále vyvíjet, a to především dvěma hlavními směry. Jako pomocník pro dodržování zdravého životního stylu během pracovní doby a nástroj firemní komunikace. 49

50 6 Citovaná literatura 1. emarketer. 2 Billion Consumers Worldwide to Get Smart(phones) by emarketer.com. [Online] [Citace: ] Smartphones-by-2016/ Satya, Nadella. Satya Nadella: Mobile First, Cloud First Press Briefing. news.microsoft.com. [Online] [Citace: ] 3. IDC Corporate USA. Smartphone OS Market Share, Q idc.com. [Online] [Citace: ] 4. Brachmann, Steve. A Brief History of Google s Android Operating System. ipwatchdog.com. [Online] IPWatchdog, Inc., [Citace: ] 5. Inc., Statista. Number of apps available in leading app stores as of May statista.com. [Online] Statista Inc., [Citace: ] 6. Microsoft. Building Windows and Windows Phone apps with shared code. [Online] Microsoft, [Citace: ] UWP Bridge for the Android Runtime. [Online] Microsoft, [Citace: ] UWP Bridge for ios. [Online] Microsoft, [Citace: ] 9. Wargo, John M. Apache Cordova 4 Programming. Crawfordsville : Pearson Education, ISBN-13: Titanium Platform Overview. Appcelerator Documentation. [Online] Appcelerator Inc, [Citace: ] 50

51 Overview. 11. Android Architecture. Xamarin Developers. [Online] Xamarin Inc., [Citace: ] e/. 12. Looking at Xamarin.Forms from Enterprise view. Mark's Blog. [Online] [Citace: ] Xamarin.Forms. Xamarin.com. [Online] Xamarin Inc., [Citace: ] Apple App Store. Aplikace Facebook. [Online] [Citace: ] Warren, Christina. Facebook Launches Official Google Android Application. Mashable.com. [Online] Mashable, Inc., [Citace: ] Fireside Chat With Facebook Founder and CEO Mark Zuckerberg. TechCrunch.com. [Online] AOL Inc., [Citace: ] Android Wear. Xamarin Developers. [Online] Xamarin Inc., [Citace: ] Watch Kit. Xamarin Developers. [Online] Xamarin Inc., [Citace: ] Nette Dokumentace. Nette.org. [Online] Nette Foundation, [Citace: ] Adminer. [Online] [Citace: ] Composer. [Online] [Citace: ] Nette REST API bundle. [Online] [Citace: ] 51

52 23. API Blueprint Tutorial. apiary.io. [Online] Apiary Inc., [Citace: ] Abeysinghe, Samisa. RESTful PHP Web Services. Birmingham : Packt Publishing Ltd., ISBN-13: SB Admin. [Online] [Citace: ] Xamarin.Forms Layouts. Xamarin Dokumentace. [Online] [Citace: ] Xamarin.Forms Pages. Xamarin Dokumentace. [Online] [Citace: ] Portable Class Libraries. Xamarin Dokumentace. [Online] [Citace: ] Shared Projects. Xamarin Dokumentace. [Online] [Citace: ] Accessing Native Features via the DependencyService. Xamarin Dokumentace. [Online] [Citace: ] Multi-resolution apps for Windows Phone 8. MSDN. [Online] [Citace: ] Xamarin.Forms XAML Basics. Xamarin Dokumentace. [Online] [Citace: ] 52

53 7 Přílohy 1) Wireframy mobilní aplikace 2) Grafický návrh mobilní aplikace 3) Zdrojové kódy 4) Návrh serverové databáze 5) Návrh REST API 6) Návrh administrátorského rozhraní 53

54 Příloha č. 1 1) Wireframy mobilní aplikace

55 Příloha č. 1 Úvodní obrazovka aplikace Moje statistiky

56 Příloha č. 1 Spolupracovníci Nastavení

57 Příloha č. 2 2) Grafický návrh mobilní aplikace (Vlevo vždy verze pro systém Android a vpravo verze pro Windows Phone)

58 Příloha č. 2 Úvodní obrazovka aplikace se zapnutým časovačem Výběr aktivity

59 Příloha č. 2 Moje statistiky Výběr časového úseku

60 Příloha č. 2 Spolupracovníci Nastavení - registrace / přihlášení uživatele

61 Příloha č. 2 Nastavení - profil přihlášeného uživatele

62 3) Zdrojové kódy Příloha č. 3

63 Příloha č. 3 Serverová část (backend) Kompletní zdrojové kódy serverové části jsou dostupné online ve veřejném GIT repozitáři, který je možné nalézt na adrese Tento repozitář neobsahuje PHP knihovny třetích stran, které je nutné naimportovat pomocí správce závislostní Composer ( Seznam závislostí je definován v souboru composer.json v kořenovém adresáři projektu. Funkční testovací instance serverové části je dostupná na adrese Do administrátorské části je možné se přihlásit pomocí přihlašovacích údajů: Uživatelské jméno: info@uhk.cz Heslo: uhk123 Mobilní aplikace Kompletní zdrojové kódy mobilní aplikace jsou dostupné online ve veřejném GIT repozitáři, který je možné nalézt na adrese Repozitář se skládá ze tří projektů: Worktastic obsahuje multiplatformní kód aplikace Droid obsahuje specifický kód pro běh Android aplikace WinPhone obsahuje specifický kód pro běh Windows Phone aplikace Sestavenou aplikaci pro Android je možné stáhnout a nainstalovat na libovolný mobilní telefon s tímto operačním systémem ve verzi 4.1 a vyšší. Aplikace je ke stažení na této adrese: Pro úspěšnou instalaci je nutné v nastavení telefonu v záložce Vývojář povolit možnost Instalovat aplikace z neznámých zdrojů.

64 Příloha č. 3 Platforma Windows Phone nemá žádný podobný ekvivalent distribuce vývojářských verzí aplikací. Nicméně aplikaci je možné sestavit z přiloženého repozitáře a následně spustit v emulátoru, případně na reálném zařízení. K sestavení je nutné vývojářské prostředí Visual Studio a SDK pro Windows Phone 8.0.

65 Příloha č. 4 4) Návrh serverové databáze Návrh databáze byl vytvořen pomocí programu Workbench (

66 Příloha č. 4

67 Příloha č. 5 5) Návrh REST API Návrh API v jazyce API Blueprint ( je dostupný na této adrese: Grafická interpretace návrhu REST API pro aplikaci Worktastic je dostupná na této adrese:

68 Příloha č. 6 6) Návrh administrátorského rozhraní

69 Příloha č. 6 Přihlášení administrátora / registrace společnosti Profil společnosti

70 Příloha č. 6 Seznam pracovních intervalů pro všechny uživatele dané společnosti

71 Příloha č. 6 Seznam uživatelů v dané společnosti Měsíční reporting odpracovaných hodin