Sem vložte zadání Vaší práce

Sem vložte zadání Vaší práce.

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství

Bakalářská práce

Mobilní aplikace výběru jména Adam Řezníček

Vedoucí práce: Ing. Jiří Hunka

24. června 2015

Poděkování Na tomto místě bych chtěl poděkovat svému vedoucímu Ing. Jiřímu Hunkovi za odborné vedení, rodině za podporu nejen během studia, a především své sestře, která mi je vždy oporou.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval(a) samostatně a že jsem uvedl(a) veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů. V souladu s ust. § 46 odst. 6 tohoto zákona tímto uděluji nevýhradní oprávnění (licenci) k užití této mojí práce, a to včetně všech počítačových programů, jež jsou její součástí či přílohou, a veškeré jejich dokumentace (dále souhrnně jen „Dílo“), a to všem osobám, které si přejí Dílo užít. Tyto osoby jsou oprávněny Dílo užít jakýmkoli způsobem, který nesnižuje hodnotu Díla, a za jakýmkoli účelem (včetně užití k výdělečným účelům). Toto oprávnění je časově, teritoriálně i množstevně neomezené. Každá osoba, která využije výše uvedenou licenci, se však zavazuje udělit ke každému dílu, které vznikne (byť jen zčásti) na základě Díla, úpravou Díla, spojením Díla s jiným dílem, zařazením Díla do díla souborného či zpracováním Díla (včetně překladu), licenci alespoň ve výše uvedeném rozsahu a zároveň zpřístupnit zdrojový kód takového díla alespoň srovnatelným způsobem a ve srovnatelném rozsahu, jako je zpřístupněn zdrojový kód Díla.

V Praze dne 24. června 2015

.....................

České vysoké učení technické v Praze Fakulta informačních technologií c 2015 Adam Řezníček. Všechna práva vyhrazena.

Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.

Odkaz na tuto práci Řezníček, Adam. Mobilní aplikace výběru jména. Bakalářská práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2015.

Abstrakt Práce se zabývá vývojem mobilní aplikace pro operační systém Android, která si klade za cíl usnadnit budoucím rodičům výběr jména pro svého potomka zábavným a efektivním způsobem. Součástí práce je analýza konkurenčních aplikací, průzkum uživatelů, návrh a implementace jak klienta, tak serveru. Výsledné řešení je podrobeno důkladnému testování. Klíčová slova výběr jména, mobilní aplikace, Android, synchronizace

Abstract This thesis deals with development of a mobile android application, which should simplify choosing baby names by potential parents with fun and effective way. It consist of a competitive application analysis, an user survey, design and implementation of both client and server applications. The final solution was thoroughly tested. Keywords name choosing, mobile application, Android, sync

ix

Obsah Úvod Uvedení do problematiky . . . . . . . . . . . . . . . . . . . . . . . . Stanovení cíle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Analýza 1.1 Analýza konkurence . . . 1.2 Průzkum uživatelů . . . . 1.3 Persony . . . . . . . . . . 1.4 Požadavky . . . . . . . . . 1.5 Případy užití . . . . . . . 1.6 Tabulka pokrytí funkčních 1.7 Doménový model . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . požadavků . . . . . . .

2 Návrh 2.1 Platforma . . . . . . . . . . . 2.2 Technologie . . . . . . . . . . 2.3 Architektura . . . . . . . . . 2.4 Databázový model . . . . . . 2.5 Grafický design . . . . . . . . 2.6 Návrh uživatelského rozhraní

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

1 1 2

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

3 3 10 16 17 20 20 20

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

27 27 29 32 33 34 34

3 Realizace 43 3.1 Volba nástrojů . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 3.2 Použité knihovny třetích stran . . . . . . . . . . . . . . . . . . 44 3.3 Implementace . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 4 Testování 53 4.1 Testování programátorem . . . . . . . . . . . . . . . . . . . . . 53 4.2 Testování použitelnosti . . . . . . . . . . . . . . . . . . . . . . . 54 xi

Závěr 57 Možná rozšíření aplikace . . . . . . . . . . . . . . . . . . . . . . . . . 57 Literatura

59

A Seznam použitých zkratek

61

B Obsah přiloženého CD

63

xii

Seznam obrázků 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 1.10 1.11 1.12 1.13 1.14 1.15 1.16 1.17

Vzhled aplikace Baby Names od Sevenlogics Vzhled aplikace Baby Name - Simple! . . . Vzhled aplikace Million Baby Names . . . . Vzhled aplikace Baby Name Together . . . Diagram průchodu dotazníkem . . . . . . . Primární zařízení - Facebook . . . . . . . . Primární zařízení - Modrý koník . . . . . . Zkušenosti s výběrem jména . . . . . . . . . Metody výběru jména . . . . . . . . . . . . Zdrobněliny a jiné variace jmen . . . . . . . Sdílení výběru na sociálních sítí . . . . . . . Popularita jmen . . . . . . . . . . . . . . . Připojení k internetu . . . . . . . . . . . . . Mobilní aplikace: Případy užití . . . . . . . Webová aplikace: Případy užití . . . . . . . Doménový model - mobilní aplikace . . . . Doménový model - webová aplikace . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . .

4 5 6 7 10 11 12 12 13 14 14 15 15 21 22 24 25

2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11

Podíl mobilních operačních systémů 4Q 2014 . Podíl verzí Androidu v červnu 2015 . . . . . . . Sociální sítě v Česku . . . . . . . . . . . . . . . Fat client - třívrstvá architektura . . . . . . . . Databázový model - mobilní aplikace . . . . . . Databázový model - webová aplikace . . . . . . Úvodní obrazovka s hlavní nabídkou . . . . . . Výběr jména . . . . . . . . . . . . . . . . . . . Interní databáze jmen . . . . . . . . . . . . . . Přidání jména a karta s detailními informacemi Výběrová metoda po vzoru Facebook „lajku“ .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

28 28 31 32 34 35 37 38 39 40 41

xiii

. . . . . . . . . . . . . . . . .

3.3 3.4

Webová aplikace - desktop zobrazení seznamu jmen . . . . . . . . Webová aplikace - responsivní zobrazení . . . . . . . . . . . . . . .

xiv

51 51

Seznam tabulek 1.1 1.2 1.3 1.4

Přehled testovaných aplikací . . . . . . . . . . . . . . . Funkcionalita testovaných aplikací . . . . . . . . . . . Tabulka pokrytí funkčních požadavků mobilní aplikace Tabulka pokrytí funkčních požadavků webové aplikace

. . . .

8 9 21 23

3.1

Kódování popularity . . . . . . . . . . . . . . . . . . . . . . . . . .

47

xv

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

Úvod Uvedení do problematiky Dnešek je svět mobilních a webových technologií. Služeb, které jsou dostupné odkudkoliv a kdykoliv. Pro většinu běžných uživatelů je již stolní počítač nezajímavou platformou z důvodu mobility a efektivity práce. Není divu, připojení k internetu je dnes téměř samozřejmostí a do velké míry tomu pomohl rychlý nástup LTE1 vysokorychlostního internetu mobilních operátorů. Trend chytrých telefonů je již v plném proudu a nelze k němu přistupovat jako k minoritní platformě a tedy zanedbatelnému objemu potencionálních uživatelů. Už v roce 2013 podíl smartphonů na všech mobilních telefonech překročil 55,1 %[1] a to je jasný signál k tomu, že vývojáři musí s obsahem pro chytré telefony, plně počítat. Pro některé je mobilní telefon tak osobní věc, že si bez něj nedokáží představit běžný život. Nosíme jej s sebou téměř všude, kam nám to je umožněno. Telefon již dávno není jen zařízení pro telefonní hovory a psaní textových zpráv. Telefonem pořizujeme stovky fotografií, navazujeme kontakty prostřednictvím chatovacích služeb a sociálních sítí, platíme jím za oběd, vyřizujeme emailovou komunikaci, používáme jej jako organizátor pracovního i osobního života, a v neposlední řadě jako multimediální centrum. Můžeme jen spekulovat, jakým způsobem bude mobilní telefon používat další generace. Každého budoucího rodiče čeká zásadní rozhodnutí a to, jaké jméno zvolí pro svého potomka. Výběr jména přitom může do určité míry ovlivnit i jeho život, a proto bychom neměli uspěchat naši volbu. Existuje mnoho metod výběru, které se používají již mnoho let, nicméně v době informačních technologií máme možnosti, jak výběr usnadnit i zábavným způsobem. 1

LTE, někdy též 4G, je technologie určená pro vysokorychlostní internet v mobilních sítí

1

Úvod

Stanovení cíle Cílem této práce je vytvořit mobilní aplikaci, která proces výběru jména usnadní (zefektivní) a vloží do něj prvky zábavy jak pro páry, tak jednotlivce a k tomu přidá i nadstandardní funkcionalitu. V první fázi je nutné provést analýzu konkurenčního řešení a průzkum uživatelů pro lepší pochopení situace. Analýza slouží ke zformování funkčních a nefunkčních požadavků na výslednou aplikaci, aby byla co možná nejužitečnější a nic zásadního uživatel nepostrádal. V návrhu aplikace se zabývám návrhem intuitivního a uživatelsky přitažlivého rozhraní, které je jednou z hlavních podmínek úspěšné mobilní aplikace. Dále je nutné zhodnotit vybranou architekturu a návrh databázového schématu. Realizace se zaměřuje na zajímavé případy implementace či využití pokročilejších technologií. Na závěr, jako každý softwarový projekt, je nutné výsledný produkt otestovat reálnými uživateli pomocí usability testů.

2

Kapitola

Analýza 1.1

Analýza konkurence

V rámci analýzy požadavků je nutné prozkoumat trh a tedy, jaká konkurenční řešení v současné době existují. Primárně jsem se zaměřil na mobilní aplikace pro platformu Android. Aplikace byly vyhledány v Google Play obchodu za pomocí klíčových slov „jména“, „dětská jména“, „jména pro děti“, „names“, „baby names“. Vyhledávací výrazy nicméně vrátily velmi podobné výsledky. Aplikací na toto téma je opravdu mnoho, ale po bližším testování se jeví jako obdobná a představují povětšinou jednoduchou databázi jmen, která můžete přidávat do oblíbených či sdílet pomocí mnoha kanálů. V důsledku toho jsem vybral jen několik zástupců, které považuji za nejpropracovanější. Nicméně jsem nenalezl žádnou aplikaci, která by nabízela česká a slovenská jména na vyšší úrovni, než jen pouhý seznam jmen, a proto jsou všechny testované aplikace od zahraničních vývojářů. V dotazníkové akci, která sloužila pro průzkum uživatelů, jsem zmínil i několik tradičních metod, které jsou velmi populární, a proto jsem je neopomněl také prozkoumat.

1.1.1

Baby Names od Sevenlogics

První aplikace, kterou Google Play nabídne po zadání klíčového slova „baby names“ je právě aplikace Baby Names od Sevenlogics2 . Již samotná ikona aplikace působí poutavě, což je jedním z mnoha faktorů úspěchu. Ikona v první řadě tvoří jeden z nástrojů marketingu[2], jelikož slouží k přitáhnutí potencionálního uživatele. To se této aplikaci daří. O tom možná svědčí i fakt, že si 2 Aplikace dostupná com.cg.android.babynames

z

https://play.google.com/store/apps/details?id=

3

1

1. Analýza ji po celém světě stáhlo v intervalu 500 000 až 1 000 000 uživatelů3 a to i přes to, že aplikace nenabízí žádný nadstandardní obsah.

(a) Karta jména

(b) Země původu - mapa

(c) Země původu - seznam

Obrázek 1.1: Vzhled aplikace Baby Names od Sevenlogics Po poutavé úvodní obrazovce se zobrazí první karta, která zobrazí seznam jmen dle popularity. U každého jména je zobrazeno pohlaví a jakého je původu. Po kliknutí na dané jméno je zobrazena karta jména, na které jsou soustředěny všechny relevantní informace. Uživatel může hodnotit jméno na standardní stupnici 0 až 5, dále se zobrazí výslovnost, význam jména a sdílení na sociální síti Facebook či pomocí elektronické pošty. Po kliknutí na zemi původu se zobrazí místo pomocí Google Maps (viz. obrázek 1.1b). Karta nese i informaci o tom, jak je dané jméno populární4 . V režimu landscape5 zobrazí aplikace graf namísto holých dat. Druhá karta slouží k filtrování jmen dle země původu, kde každá lokalita nese údaj o počtu nositelů jména (viz. obrázek 1.1c). Pomocí třetí karty může uživatel vyhledávat jméno dle několika filtrů - pohlaví, počáteční písmeno, významu jména, země původu a popularity v daném roce. Lze zvolit i náhodný výběr anebo vygenerovat vhodné jméno dle jmen rodičů. Zajímavá funkcionalita, nicméně se mi nepodařilo zjistit, na jakém principu algoritmus funguje (nejspíše analýza písmen jmen rodičů). Poslední záložka zobrazí uživateli jeho oblíbená jména dle zvoleného ratingu jmen, která již hodnotil. Aplikace je nabízena zdarma se zobrazením reklam, nicméně pro náročnější 3

Informace dostupná na detailu aplikace v Google Play Počet narození dětí s daným jménem v daném roce 5 Režim zobrazení obsahu na šířku - větší rozměr displeje v horizontálním stavu 4

4

1.1. Analýza konkurence uživatele je i možnost zakoupit verzi Premium za aktuální cenu 37,72 Kč k 10. březnu 2015. Placená verze aplikace nabízí možnost přidání vlastního jména, které může uživatel sdílet. Aplikace přidané jméno jen uloží do interní databáze. Placená verze dále nabízí náhodné návrhy jmen a to v nastavené časové periodě. Deaktivování reklam je samozřejmostí.

1.1.2

Baby Name - Simple! od JustFunApps

Grafický design aplikace Baby name - Simple!6 působí velmi minimalisticky a decentním způsobem, který hodnotím velmi kladně. Použité barvy harmonizují jako celek. I proto na potencionálního uživatele působí aplikace serióznějším dojmem.

(a) Seznam jmen

(b) Karta jména

(c) Swipe

Obrázek 1.2: Vzhled aplikace Baby Name - Simple! Úvodní obrazovka nabízí filtrování dle pohlaví, země původu, významu jména a počátečního písmena. Tedy nic neobvyklého. Po zobrazení seznamu jmen (viz. obrázek 1.2a) má možnost uživatel rozkliknout detail daného jména. Karta jména zobrazuje standardní informace, jako je pohlaví, země původu, výslovnost a význam. Dále můžeme přidat jméno do seznamu oblíbených (viz. obrázek 1.2b) nebo jej sdílet. Jako velmi efektní způsob navigace mezi jednotlivými jmény bych rád zmínil Swipe7 , který ukazuje obrázek 1.2c. Na tuto techniku je většina uživatelů moderních mobilních operačních systémů zvyklá. Po podrobnějším testování jsem objevil možnost změny barvy tématu aplikace při kliknutí na logo aplikace. 6

Aplikace dostupná z https://play.google.com/store/apps/details?id= com.jmon.mybabyname 7 Technika Swipe: tažení prstem po displeji přístroje

5

1. Analýza Jako obrovskou přednost považuji podporu tabletů. Vývojáři připravili speciální layout, který využívá celé plochy zařízení. Dále aplikace nabízí tisknutelné jméno na oblečení dítěte, ale vzhledem k tomu, že se jedná o zahraniční službu, nebyla tato funkčnost předmětem podrobnějšího testování.

1.1.3

Million Baby Names od Lakeba - TechBeach

Aplikace Million Baby Names8 nenabízí mnoho nového, nicméně se najde pár zajímavostí, které stojí za zmínění.

(a) Vyhledávání jména

(b) Hlavní nabídka

(c) Seznam jmen

Obrázek 1.3: Vzhled aplikace Million Baby Names První zajímavostí je tzv. Facebook Poll, který slouží jako anketní systém na již zmíněné sociální síti. Uživatel vloží do tohoto seznamu několik jmen, které sdílí na síti jako anketu s hlasováním. Přátelé mohou k výběru jmen přidat svůj vlastní názor a tím uživateli předat cenné rady. Dále mě překvapila kategorie jako „Jména pro dvojčata“, která zobrazí vždy dvě jména, které se k sobě patřičně hodí. Další zajímavá kategorie je „Palindromická jména“9 . Na základě vyhodnocení dotazníkové akce jsem zjistil, že jeden z respondentů používá pro výběr jména knihu Jméno je Váš osud10 , která na základě numerické metody analyzuje jméno. Metoda se nazývá Cheirova numerologie a právě tato aplikace tuto analýzu jména nabízí. Aplikace zobrazí výpočet a následně to, co dané numero znamená. 8 Aplikace dostupná z https://play.google.com/store/apps/details?id= com.broov.freebabynames 9 Palindrom je jakákoliv sekvence symbolů, která má tu vlastnost, že ji lze číst v libovolném směru a má vždy stejný význam. 10 Kniha dostupná na http://knihy.abz.cz/prodej/jmeno-je-vas-osud

6

1.1. Analýza konkurence Aplikace nabízí tematický grafický design, který se nicméně zobrazí jen v hlavním menu a na obrazovce s vyhledáváním. Ve výčtu vlastností aplikace na Google Play je zmíněna i placená verze, kterou se mi nepodařilo dohledat.

1.1.4

Baby Name Together od Linkinet

Aplikace Baby Name Together11 je jediná, která nabízí hlubší metodu výběru, než jen seznam jmen, která uživatel může přidávat do oblíbených.

(a) Výběr jména

(b) Seznam jmen

(c) Oblíbenost jmen

Obrázek 1.4: Vzhled aplikace Baby Name Together Princip je jednoduchý. Oba rodiče si aplikaci nainstalují na své mobilní zařízení, každý si vybere pohlaví jména výběru, zemi původu a procházením seznamu vybere u každého jména zda se mu líbí, či ne (viz. obrázek 1.4a). Akci provádí tak dlouho, dokud jsou v seznamu nějaká jména, která zatím nebyla zobrazena. Následně budoucí rodiče společně konzultují, jaké jména se líbí oběma (viz. obrázek 1.4b). Seznam preferovaných jmen lze sdílet pomocí emailu. Jako nedostatek považuji, že aplikace neprovádí párování oblíbených jmen automaticky. Akci tedy musí vykonat uživatel. Jelikož se jedná o službu, aplikace vyžaduje registraci. To s sebou nese několik výhod. Aplikace zobrazuje oblíbená jména ostatních registrovaných uživatelů (viz. obrázek 1.4c). Registrace umožní sdílení svých preferovaných jmen napříč zařízeními. Tato možnost je nicméně za poplatek v rámci placené verze za cenu 24,86 Kč. 11 Aplikace dostupná com.BabyName.start

z

https://play.google.com/store/apps/details?id=

7

1. Analýza

1.1.5

Srovnání testovaných aplikací

Z následující tabulky 1.1 je patrné, že většina testovaných aplikací financuje samotný vývoj pomocí reklam, nebo nabízí placenou verzi. Jedinou výjimkou je aplikace Million Baby Names, která nabízí pouze verzi zdarma s reklamami. První testovaná aplikace zaujala jen přitažlivou ikonou aplikace, zato obsahem nepřekypuje. Za cenu 37,72 Kč dostane uživatel jen možnost ukládat vlastní jména, periodické návrhy a generování vhodného jména vzhledem ke jménům rodičů. Grafický návrh působí zastarale. Baby Name - Simple! chválím za jednoduchý grafický design, který je funkční a moderní. Aplikace nicméně nenabízí, oproti konkurenci, nic zajímavého. Aplikace od TechBeach s jménem Million Baby Names přináší několik zajímavých funkcionalit a to jak Facebook Poll a analýzu jména pomocí numerologického výpočtu, tak i zajímavé kategorie. Nejzajímavější aplikace je dle mého názoru poslední testovaná. Jako jediná umožňuje usnadnění výběru jména nějakou efektivní metodou a počítá i s druhou polovičkou. Aplikace

Cena

Baby Names Baby Name - Simple! Million Baby Names Baby Name Together

Free / 37,72 Kč Free / ? Free Free / 24,86 Kč

Testovaná verze 3.1.11296 1.10.2.f 2.9.0 1.6.2

Vyžaduje Android 3.0 a vyšší 2.3 a vyšší 2.1 a vyšší 4.0 a vyšší

Tabulka 1.1: Přehled testovaných aplikací Jak ukazuje tabulka1.2, velmi mne překvapilo, že žádná z testovaných aplikací nenabízí informaci o skutečnosti, kdy dané jméno slaví svátek. To je nicméně v důsledku toho, že svátky jmen nejsou v zahraničí běžnou praktikou. Na variace a zdrobněliny jmen vývojáři také pozapomněli. Zajímavostí je i to, že jen jediná aplikace dovolí uživateli přidat vlastní jméno, ačkoliv se jedná jen o přidání uživatelského jména do interní databáze. Očekával bych, že ostatní aplikace, které jsou modernější, budou tuto možnost také nabízet. Zajímavá funkce je i Facebook Poll, které uživateli pomůže s výběrem pomocí ankety stejnojmenné sociální sítě.

1.1.6

Tradiční metody

Jak později ukázal průzkum uživatelů, velká skupina respondentů používá kalendáře se svátky. Uživatel může využít tedy papírové formy a u každého jména, které se mu líbí, udělá značku. Podobnou možnost poskytují i elektronické kalendáře (např. mobilní), kde můžeme přidat poznámku, ale nemusí tomu tak být vždy. Webové svátky takovou možnost povětšinou nenabízí, a proto je nutné jednotlivá jména vypisovat stranou. 8

1.1. Analýza konkurence Funkce Pohlaví Původ jména Výslovnost Význam Variace Svátek Popularita Přidat do oblíbených Sdílení Speciální kategorie Filtrování Přidání jména Návrh jména Hlasování Výběr s partnerem Registrace Tablet layout

Baby Names 3 3 3 3 7 7 3 3

Baby Name Simple! 3 3 3 3 7 7 7 3

Million Baby Names 3 3 7 3 7 7 3 3

Baby Name Together 3 3 7 3 7 7 3 3

3 7

3 7

3 3

3 7

3 3

3 7

3 7

3 7

3 7 7

7 7 7

7 3 7

7 7 3

7 7

7 3

7 7

3 3

Tabulka 1.2: Funkcionalita testovaných aplikací Výběr s partnerem probíhá následovně. Každý z partnerů sepíše seznam jmen, která preferují a následně provedou tzv. matching12 a tímto způsobem vyberou jméno. Vyřazovací metoda je také oblíbená. Ta probíhá tak, že uživatel postupně prochází všechna jména za pomoci již zmíněného kalendáře a jméno, které se uživateli nelíbí, škrtne. Uživatel vyřazuje jména tak dlouho, dokud mu nezůstane tolik jmen, kolik je pro něho akceptovatelné. Tyto metody jsou důkladné, nicméně propojení všech, docílíme efektivního řešení.

12

Spárují jména, která mají v seznamu oba

9

1. Analýza

1.2

Průzkum uživatelů

Pro bližší porozumění potencionálním uživatelům jsem vytvořil dotazníkovou akci pomocí populární webové aplikace Google Formuláře, která poskytuje vše potřebné pro průzkum a přináší výhodu snadné distribuce a vyhodnocení. Respondenty jsem získal ze dvou zdrojů. První byl rozeslán na sociální síti Facebook. Ten měl za cíl získat data velké škály uživatelů, kteří zatím nutně výběr jména prakticky neřešili. Druhý zdroj byl již cílen na uživatele, kteří se v minulosti výběrem jména zabývali. Pro získání respondentů s praktickými zkušenostmi jsem zvolil webový portál Modrý koník13 , kde se scházejí ženy čekající miminko či již stávající maminky. Díky cílení na různé skupiny uživatelů, jsem získal velmi cenná data a také informace o tom, jak zástupci těchto skupin přemýšlejí o výběru jména. Přece jen myšlení studenta, je diametrálně rozdílné od již současného rodiče.

1.2.1

Analýza odpovědí

Dotazník je rozdělen do třech částí, kde první obsahuje obecné informace o osobě. Druhá se zaměřuje na osoby, které již v minulosti výběr jména prováděli a třetí sestává z otázek na obecné požadavky aplikace. Tyto požadavky jsem sestavil převážně v závislosti na analýzu konkurenčního řešení. Průchod celou anketou je znázorněn diagramem na obrázku 1.5 a v přiloženém souboru anketa-otazky.pdf na CD je výpis všech otázek se všemi možnostmi odpovědí.

Obrázek 1.5: Diagram průchodu dotazníkem Dotazník obsahuje celkem 18 otázek, nicméně pro respondenty, kteří nemají praktické zkušenosti s výběrem jména je dostupných pouze 11. Celkem dotazník vyplnilo 277 respondentů14 . Každou otázku, která je podstatná, posléze podrobně analyzuji. Přehled odpovědí naleznete na přiloženém CD v souboru anketa-odpovedi-fb.ods a anketa-odpovedi-mk.ods. 13 14

10

Dostupný z http://www.modrykonik.cz/ Facebook: 142 respondentů, Modrý koník: 135 respondentů

1.2. Průzkum uživatelů 1.2.1.1

Obecné informace

Pohlaví respondentů sociální sítě Facebook bylo zastoupené téměř rovnocenně (53,5 % mužské a 46,5 % ženské), zato respondenti Modrého koníka byli zcela ženského pohlaví, což se vzhledem k cílové skupině tohoto portálu dalo očekávat. Respondenti jsou ve věku 18 až 40 let, tedy studenti až po ty, kteří jsou v produktivním věku. Tyto respondenty můžeme považovat za naši cílovou skupinu. Nejvyšší dosažené vzdělání je převážně střední s maturitou a výše, tedy vzdělaná populace. Respondenti sociální sítě jsou více než z poloviny v partnerském vztahu. Celých 43 % partnera nemá, což potvrzuje nižší věkovou kategorii v období studentského života. Oproti tomu respondenti z portálu Modrý koník jsou většinou již v manželství (68,9 %) a následně v partnerství s výsledkem 28,1 %. Otázka č. 5 byla položena za účelem získání informace o tom, jaké zařízení primárně naši potencionální uživatelé používají v souvislosti s řešením osobních záležitostí. To ukazuje graf 1.6 a 1.7.

Obrázek 1.6: Primární zařízení - Facebook Ukázalo se, že téměř polovina respondentů portálu Modrý koník používá primárně mobilní telefon a téměř rovnocenně stolní počítač či notebook. To ukazuje na trend chytrých telefonů, které začínají vytlačovat běžné počítače při nepracovní činnosti. U mladší populace vládne s 63,4 % stolní počítač či notebook. To může být i důsledkem toho, že studenti používají počítač pro řešení školních projektů. Tablet představuje pouze minoritní skupinu, tudíž se nebudu zabývat návrhem speciálního layoutu. Graf 1.8 ukazuje, jak se dělí respondenti průzkumu na dvě skupiny a to na ty, kteří se již zabývali výběrem jména a na ty, kteří doposud ne. 11

1. Analýza

Obrázek 1.7: Primární zařízení - Modrý koník

Obrázek 1.8: Zkušenosti s výběrem jména

1.2.1.2

Metody výběru jména

Metoda, která je nejvíce oblíbená při výběru jména, je výběr s partnerem. Nepřekvapí ani fakt, že se k výběru používají kalendáře se svátky. Vyřazovací metoda je také celkem populární. Jedná se o velmi efektivní a přímočarou metodu. Doporučení od třetí strany využívá pouze zanedbatelná část. Velmi mne překvapilo, že mobilní aplikace využívají pouze ojediněle. Z toho nanejvýše mohu usoudit, že uživatelé nenašli žádnou vhodnou. Žádný respondent neuvedl, jakou mobilní aplikaci používá, abych ji mohl hlouběji analyzovat. Webové aplikace jsou na tom o poznání lépe, nicméně také se jedná o zanedbatelné procento. Využívání jednotlivých metod je znázorněno grafem 1.9. 12

1.2. Průzkum uživatelů

Obrázek 1.9: Metody výběru jména 1.2.1.3

Přidání jména

Celkem 77 respondentů odpovědělo, že jimi použitá metoda výběru jména neobsahovala nějaké jméno. Jedná se sice o menšinu, nicméně je velmi vhodné implementovat funkcionalitu, pomocí které by mohl uživatel jméno přidat, pokud jej databáze neobsahuje. 1.2.1.4

Single vs. zadaný

Výsledek odpovědí respondentů ze sociální sítě ukázal, že se najdou i tací, kteří vybírají jméno bez partnera. To poukazuje na fakt, že při návrhu musím myslet např. na svobodné matky a tudíž metoda výběru musí obsahovat jak mód pro páry, tak pro jednotlivce. 1.2.1.5

Svátky jsou důležité

Dle očekávání nadpoloviční většina uvedla, že výběr ovlivní den, na který připadá svátek daného jména. Žádná z testovaných aplikací tuto funkcionalitu nenabízí. 1.2.1.6

Zdrobněliny

Drtivá většina souhlasí, že různé variace jména ovlivní výběr jména (viz. graf 1.10. Je tedy více než vhodné, aby aplikace zobrazila u každého jména (pokud existují) různé varianty, jak lze nositele jména oslovovat. 13

1. Analýza

Obrázek 1.10: Zdrobněliny a jiné variace jmen

1.2.1.7

Další požadavky na aplikaci

Rozdělení jmen na významné kategorie se ukázalo jako velmi vhodné, zato sdílení vybraného jména na sociálních sítí (viz. graf 1.11) by nejspíše většina nevyužila, nicméně je tu i skupina, která ano, a proto je vhodné tuto funkcionalitu také implementovat. Ale pouze jako volitelnou a žádným způsobem vynucenou. To, co platí o sdílení na sociálních sítích, platí téměř výhradně o důležitosti popularity jména (viz. graf 1.12). Je vhodné nějakou formou popularitu jména implementovat, nicméně v žádném případě uživatele k této činnosti nutit.

Obrázek 1.11: Sdílení výběru na sociálních sítí

14

1.2. Průzkum uživatelů

Obrázek 1.12: Popularita jmen Graf 1.13 ukazuje, že přístup k internetu dnes mnoho uživatelů považuje za samozřejmost, a proto nepředstavuje pro uživatele problém, pokud aplikace vyžaduje připojení k internetu. Najde se ale poměrně početná skupina z řad mladších respondentů, která si nepřeje, aby aplikace na internet přistupovala vůbec. To znamená, že není vhodné, aby byla aplikace čistě jako služba implementována.

Obrázek 1.13: Připojení k internetu

1.2.2

Shrnutí

Dotazníková akce byla velmi užitečným zdrojem informací. Rozdělení do více sběrných kanálů vnímám taktéž pozitivně. V důsledku toho bylo zjištěno ně15

1. Analýza kolik rozdílů ve skupinách uživatelů. Fakt, že mobilní telefony bere velká část cílového publika jako hlavní platformu, je pro tuto práci zásadní. Průzkum také dokázal, že vyřazovací metoda je stále jednou z nejpoužívanějších praktik, jak efektivně jméno vybírat, a proto jsem se ji rozhodl implementovat jak pro páry, tak jednotlivce. O sdílení jmen není dle průzkumu zájem. To nicméně nemusí být směrodatné a stále se najde skupina, která hodnotí tuto funkcionalitu pozitivně. Svátky a variace jmen jsou zásadní požadavky, které nesmí aplikaci chybět. Drtivá většina si také žádá rozdělení jmen do náležitých kategorií. Dle odpovědí mladších respondentů nebudu implementovat aplikaci jako službu, jelikož si nepřejí, aby byla trvale připojena k veřejné síti.

1.3

Persony

Pokud má aplikace plnit určitý cíl a řešit nějaké potřeby, nesmí se její návrh omezit pouze na vzhled či na první dojem, ale měl by zahrnovat i další úroveň návrhu a to návrhu používání.[3] Pro přesně tento účel vznikl obor UX design15 . UX designer má za cíl přemýšlet nad návrhem aplikace směrem k potřebám uživatele a tedy navrhnout interakci co možná pro uživatele nejpříjemnější. Aby si UX designer mohl co nejlépe představit, jak potencionální uživatel aplikace bude aplikaci používat, vytvoří tzv. persony. Persona je fiktivní profil uživatele, který obsahuje informace jako jméno, fotku, věk, povolání, záliby a mnoho dalších informací. Je na každém, jak podrobný profil persony vytvoří, ale obecně platí, že čím podrobnější informace máme, tím lépe můžeme aplikaci navrhnout. Persony slouží především k tomu, aby si designer uvědomil, jaké jsou potřeby uživatele. Celé kouzlo je v tom, že vytvoření person, které mají jméno, práci a nějak tráví svůj volní čas, se dokáže designer dostatečně vžít do oné postavy a dívat se na problém jejíma očima, nikoli zaujatě svým pohledem.[3] Pro návrh aplikace výběru jména, jsem vytvořil několik person, které považuji za typické uživatele aplikace. K vyprofilování person mi pomohl průzkum uživatelů.

15

16

UX - česky uživatelská zkušenost

1.4. Požadavky

1.3.1

Vytvořené persony

Jméno: Kateřina Věk: 28 let Povolání: učitelka prvního stupně základní školy Profil: Společenská a inteligentní žena, která v současné době se svým manželem plánuje miminko. Denně používá sociální sítě na svém mobilním telefonu a je aktivním členem webových portálů o těhotenství. Jelikož je velmi svědomitá, tak se snaží co nejlépe na těhotenství připravit. Má ráda minimalistické aplikace, které usnadňují život. Jméno: Natálie Věk: 21 let Povolání: studentka Profil: Studentka vysoké školy oboru architektury a designu. Veškerý čas věnuje studiu a projektům, které většinou zpracovává na svém notebooku či v ateliéru. Vlastní smartphone pro sociální sítě, Instagram a podobné aplikace. Díky svému oboru má cítění pro umění a estetiku, dá na první dojem. Ve volném čase ráda sportuje, nakupuje a chodí ven s kamarádkami. S výběrem jména nemá větší praktické zkušenosti. Jméno: Lukáš Věk: 33 let Povolání: manažer Profil: Vysoce postavený manažer jedné přední automobilky. Se svojí ženou se často nevidí, jelikož je jeho běžná pracovní náplň práce mimo trvalé bydliště. Razí moto „čas jsou peníze“. Má rád, když má vše svůj systém a hledá aplikace/nástroje, které by mu usnadnily práci. Nemá rád sociální sítě jako je Facebook a Twitter, pracuje celý den a je tedy na telefonu 24/7.

1.4

Požadavky

V návaznosti na analýzu konkurenčních řešení a analýzu uživatelů mohu stanovit požadavky, které jsou kladeny na finální řešení. Z důvodu nedostatku času, rozsáhlosti a pro co nejlepší výsledek, nebudou implementovány požadavky označené kurzívou.

1.4.1

Funkční požadavky na mobilní aplikaci

Funkční požadavky slouží pro určení funkcionality aplikace a tedy to, co uživatel od dané aplikace očekává, aby poskytovala. F1 Výběr jména jednotlivcem Aplikace musí umožnit uživateli výběr jména jako jednotlivci. To znamená, 17

1. Analýza že aplikace musí počítat s tím, že uživatel v době používání aplikace nemá partnera, nebo se v jeho blízkosti nenachází. Výběr jména bude probíhat jako postupné označování jmen, které daný uživatel preferuje. F2 Výběr jména pro dvojice Aplikace bude umožňovat rozšířený mód výběru jména pro dvě osoby. Výběr provede nejdříve první uživatel a poté provede, v rámci stejného zařízení, obdobnou akci druhý uživatel. Aplikace, po skončení výběru obou uživatelů, zobrazí spárovaná jména. F3 Přidání jména Uživatel musí mít možnost přidání jména, pokud v databázi chybí. Jméno může uložit do interní databáze, nebo odeslat do externí ke korektuře. F4 Popularita Aplikace bude u každého jména zobrazovat, jak je dané jméno mezi uživateli oblíbené. F5 Kategorie Jména budou zařazena do kategorií dle společných rysů, jako jsou např. jména zahraniční, staročeská. F6 Lajkování jmen Uživatel bude moci určovat preferenci jmen napříč celou databází. F7 Seznam Aplikace umožní procházet kompletní databázi jmen. F8 Sdílení Každé jméno a výsledek výběru je možné sdílet na sociální síti. F9 Synchronizace DB Aplikace musí nabízet uživateli možnost synchronizace interní databáze s externí. Tato akce nesmí být v žádném případě vynucená.

1.4.2

Nefunkční požadavky na mobilní aplikaci

Platforma Cílová platforma je operační systém Android. Databáze Aplikace bude uchovávat jednotlivá jména v interní databázi. Lokalizace Aplikace bude vyvíjena primárně pro český trh. 18

1.4. Požadavky Stabilita Aplikace musí být stabilní a nesmí docházet k neočekávaným pádům a nestandardnímu chování aplikace. Funkčnost bez internetového pripojení Aplikace musí být funkční bez internetového připojení. Nesmí být závislá na webové aplikaci. Grafický design Grafický design aplikace musí být navržen s ohledem na aktuální zvyklosti a v závislosti na Android Guidelines.

1.4.3

Funkční požadavky na webovou aplikaci

F1 Přihlášení a odhlášení Přístup do administrace externí databáze jmen bude výhradně pro předem daného administrátora bez možnosti další registrace. Administrátorské jméno a heslo zadá uživatel do formuláře. Hesla budou uložená v databázi jako hash a tzv. sůl (salt). F2 Manipulace s položkami databáze Administrační rozhraní umožní administrátorovi standardní práci s položkami databáze a to přidání, editování a smazání jména. F3 Schválení/zamítnutí uživatelského jména Webová aplikace musí nabídnout administrátorovi možnost, jak navržená jména uživatelem schvalovat. Každé navržené jméno musí být zkontrolováno, zda obsahuje pravdivé údaje. Pokud údaje nejsou korektní, či úplné, administrátor musí údaje doplnit. Aplikace dovolí navržená jména zamítnout. F4 Zobrazení seznamu jmen Aplikace bude zobrazovat celou databázi jmen. F5 Filtrování Webová aplikace dovolí administrátorovi filtrovat databázi dle předem daných atributů, jako je pohlaví, kategorie a jiné. F6 Notifikace Po navržení jména do externí databáze je administrátorovi odeslána notifikace v podobě emailové zprávy.

1.4.4

Nefunkční požadavky na webovou aplikaci

Databáze Data ve webové aplikaci musí být uloženy v persistentním uložišti dat. 19

1. Analýza Responzivní design Webová aplikace musí být obecně nezávislá na jakémkoliv rozlišení zobrazovacího zařízení. Stabilita Aplikace musí být stabilní a nesmí docházet k neočekávaným pádům a nestandardnímu chování aplikace.

1.5

Případy užití

Případy užití znázorňují, jak bude aplikace používaná uživatelem. To souvisí s tím, jakou funkčnost musí aplikace nabízet a tedy odráží práci, kterou musí programátor s grafikem odvést. Jelikož případy užití odrážejí funkčnost aplikace, tak přímo vycházejí z požadavků na aplikaci. V praxi to znamená, že případy užití by měly pokrýt všechny požadavky. Případy užití slouží také k tvorbě testů a může být vstupem pro tvorbu uživatelské příručky. Na diagramu 1.14 a 1.15 je znázorněno, jaké akce může uživatel na aplikaci vykonat.

1.5.1

Scénáře

Scénáře simulují jednotlivé akce, které jsou nutné vykonat ke splnění požadovaného cíle. „Include“ vyjadřuje povinné provedení jiného scénáře, zato scénář označený jako „extend“ povinný není. Jednotlivé scénáře můžete najít na CD v přiloženém souboru scenare-mobile-app.pdf a scenare-web-app.pdf.

1.6

Tabulka pokrytí funkčních požadavků

Tabulka pokrytí (viz. 1.3 a 1.4) funkčních požadavků slouží pro kontrolu, zda bude implementováno vše, co je potřeba.

1.7

Doménový model

Doménový model slouží k popisu dat a vazeb mezi existujícími entitami v rámci aplikace. Následně je vstupem pro tvorbu databázového modelu či modelu tříd. Na diagramu 1.16 a 1.17 lze vidět analytický doménový model pro mobilní i webovou aplikaci. Každá entita je detailně popsaná, jakou roli plní a které atributy obsahuje. 20

1.7. Doménový model

Obrázek 1.14: Mobilní aplikace: Případy užití

FP/PU F1 F2 F3 F4 F5 F6 F7 F8 F9

U1 3 -

U2 3 -

I1 3 3 -

U3 3 -

U4 3 -

I2 3 -

I3 3 -

U5 3 -

U6 3 -

U7 3 -

U8 3 -

U9 3

Tabulka 1.3: Tabulka pokrytí funkčních požadavků mobilní aplikace

21

1. Analýza

Obrázek 1.15: Webová aplikace: Případy užití

1.7.1 1.7.1.1

Mobilní aplikace Name

Jméno je nejdůležitější entitou aplikace, která obsahuje atributy jako název jména, pohlaví, den svátku, variace jména, popularitu a zda se konkrétnímu uživateli aplikace jméno líbí, či nikoliv. Popularita udává, do jaké míry je jméno populární napříč všemi instalacemi. U každého jména je zaznamenána informace o tom, kolikrát se dané jméno objevilo mezi výslednými jmény vý22

1.7. Doménový model FP/PU F1 F2 F3 F4 F5 F6

U1 3 -

U2 3 -

U3 3 -

U4 3 -

U5 3 -

U6 3 -

U7 3 -

U8 3 -

I1 3 3 -

I2 3 3 3 -

U9 3

Tabulka 1.4: Tabulka pokrytí funkčních požadavků webové aplikace

běrové metody. 1.7.1.2

Category

Každé jméno patří do jedné či více kategorií současně. Kategorie se vždy nějak jmenuje, např. staročeská, moderní, zahraniční atp. V rámci aplikace může existovat i taková kategorie, která neobsahuje žádná jména. 1.7.1.3

Choise method

Entita Výběr představuje skupinu kategorií, ze kterých si uživatel chce vyřazovací metodou vybrat jméno. Uživatel volí ze dvou módů a to pro jednotlivce anebo pro páry. 1.7.1.4

Result

Jakmile uživatel dokončí výběr jména, aplikace zobrazí pět preferovaných jmen, která obstála nejvíce. Tato entita nemůže bez entity Výběr existovat a po ukončení výběru zaniká. 1.7.1.5

User suggestion

Návrh jména reprezentuje jak přidaná jména, tak editaci jednotlivých jmen aplikace. Atribut Stav určuje, v jakém stavu se konkrétní návrh nachází.

1.7.2 1.7.2.1

Webová aplikace Administrator

Webová aplikace má právě jednoho administrátora, který systém spravuje. Entita administrátor obsahuje atribut jméno, heslo a následně e-mailovou adresu, která je nutná pro zaslání notifikace při navrhnutí jména uživatelem. 23

1. Analýza

Obrázek 1.16: Doménový model - mobilní aplikace

1.7.2.2

Name

Jedná se o tutéž entitu, jako v mobilní aplikaci, nicméně neobsahuje atribut Like a Úspěšnost, které slouží jen pro informaci uživateli mobilní aplikace.

1.7.2.3

Category

Viz. stejnojmenná entita mobilní aplikace.

1.7.2.4

User suggestion

Jakmile uživatel v rámci mobilní aplikace přidá jméno do interní databáze, je možné tento návrh odeslat ke schválení. U každého návrhu se zaznamená čas přijetí a stav, ve kterém se entita nachází.

1.7.2.5

Notification

V případě, že existuje entita Uživatelský návrh, je zaslána administrátorovi notifikační emailová zpráva, která osobu informuje o navrženém jménu. 24

1.7. Doménový model

Obrázek 1.17: Doménový model - webová aplikace

25

Kapitola

Návrh Tato kapitola se zaměřuje na výběr technologií a volbu architektury jak mobilní, tak webové aplikace. Dále zde bude rozebrán návrh uživatelského rozhraní a grafický design, který vychází z Android Guidelines. V neposlední řadě je součástí návrh databázového schématu.

2.1 2.1.1

Platforma Android OS

Při volbě platformy jsem se nechal inspirovat tím, jaký podíl má konkrétní mobilní operační systém na trhu a jaké požadavky klade systém na vývojáře. Jak ukazuje graf 2.1[4], tak globálnímu trhu dominuje s drtivým náskokem operační systém Android, což není neočekávané. Na trhu je těchto zařízení opravdu mnoho a to převážně znamená vyšší požadavky na optimalizaci aplikace. Vývoj pro mobilní platformu Android je i přesto velmi příznivý a to i následné publikování na Google Play, jelikož Google neklade tak vysoké nároky na kvalitu publikované aplikace, jako např. Apple. Důsledek toho je fakt, že na Google Play uživatel může najít aplikace, které se nechovají korektně. Primárním programovacím jazykem na platformu Android je Java, která se řadí mezi vysokoúrovňové multiplatformní programovací jazyky. To není překvapivé, jelikož OS Android je založený na jádře Linuxu. Android je znán obrovskou fragmentací, co se týče verzí, které jsou aktuálně na trhu. To s sebou nese mnoho problémů s kompabilitou, nicméně Google připravil pro vývojáře knihovnu, tzv. Support Library, kteří chtějí podporovat i starší systémy. Na grafu 2.2[5] je zřetelné, že nejrozšířenější verzí je 4.416 16

KitKat: API 19

27

2

2. Návrh

Obrázek 2.1: Podíl mobilních operačních systémů 4Q 2014 spolu s verzemi 4.1-4.317 . Stařičký Gingerbread18 zaujímá 5,6 %, což není v globálním měřítku málo, nicméně podpora této verze s sebou nese několik komplikací, a proto jsem se rozhodl ji nepodporovat. Zajímavé je, že nová verze s kódovým označením Lollipop19 nabírá každým měsícem na síle a je tedy více než vhodné, se na tuto verzi zaměřit jako na cílovou platformu.

Obrázek 2.2: Podíl verzí Androidu v červnu 2015 V závislosti na statistice jsem se rozhodl implementovat podporu od verze Jelly Bean až po nejnovější Lollipop. 17

Jelly Bean: API 16-18 Gingerbread: API 9 19 Lollipop: API 21+ 18

28

2.2. Technologie

2.1.2

Webová aplikace

Z pohledu programovacích jazyků pro vývoj webové aplikace mám několik možností. První možnost je programovací jazyk PHP. PHP je velmi oblíbený jazyk pro tvorbu webových aplikací. Řadí se do kategorie dynamicky typovaných jazyků, což znamená, že datový typ se určí až při překladu v závislosti na použití dané proměnné. Z tohoto důvodu má ale i mnoho odpůrců. Syntaxe se přesto velmi podobá jiným jazykům, jako je programovací jazyk C. Druhá možnost je využití platformy JEE a to konkrétně specifikaci JSP. Využití JEE je vhodné především pro velmi rozsáhlé, podnikové aplikace z důvodu robustnosti technologie. Třetí možnost je Microsoft řešení pro tvorbu webových aplikací v podobě ASP.NET, který je přímý konkurent JSP. Nevýhoda této technologie je závislost na operačním systému Windows. Jako programovací jazyk jsem si zvolil PHP, se kterým mám zkušenosti díky mnoha školním projektům, semestrálním pracím a také pro rozsah webové aplikace. Pro frontend jsem si zvolil standardní moderní webové technologie jako je HTML5, CSS3 a bude-li třeba, javascriptovou knihovnu jQuery.

2.2 2.2.1

Technologie Responzivní design - Bootstrap

Bootstrap je javascriptový framework, který značným způsobem usnadňuje vývoj moderních webových aplikací. Jeho hlavní výhodou je tzv. Grid system, který soustředí layout stránky do mřížky. Tento systém je velmi efektivní a vhodný pro responzivní design20 . Dále obsahuje předpřipravené třídy pro responzivní a moderní formuláře, tlačítka a mnoho dalšího.[6]

2.2.2

Využití PHP frameworku

V dnešní době, kdy existuje mnoho profesionálních řešení pro vývoj PHP aplikací v podobě frameworků, je téměř nežádoucí, vyvíjet aplikaci od píky, pokud to povaha projektu nevyžaduje. V dnešní době je kladen důraz na rychlý a co nejméně finančně náročný vývoj a to má za úkol právě framework, který poskytuje sadu rutinních funkcí pro usnadnění vývoje a tedy zefektivnění implementace. 20 Responzivní design je způsob jak stylovat dokument, aby se zobrazoval korektně na všech zařízeních

29

2. Návrh Existuje celá řada PHP frameworků, ale nejznámější jsou především Laravel, Symfony a Nette[7]. Z počátku jsem byl rozhodnut pro framework Symfony. Hlavním důvodem bylo, že Symfony je vyučovaný PHP framework na Fakultě Informačních technologií a mám s ním tedy zkušenosti. Po hlubší analýze českého prostředí jsem ale došel k názoru, že pro můj budoucí karierní rozvoj bude vhodnější získat zkušenosti s nejrozšířenějším PHP frameworkem v České republice. Dle průzkumu[7] je právě Nette nejpopulárnějším PHP frameworkem u nás. Jedním z důvodů je, že je tento framework vyvíjen právě českými vývojáři z Nette Foundation, ale také pro jeho efektivnost, jednoduchost a vysokou bezpečnost.[8]

2.2.3

MySQL jako databáze

Pro uchování dat jsem zvolil databázový stroj MySQL, který je vhodný pro nasazení malých a středně velkých projektů. MySQL databáze je také velmi populární a tudíž rozšířená. Administrátor může také zvolit storage engine pro uchování dat dle toho, co je pro daný projekt typické.

2.2.4

REST API

Výměna dat mezi mobilní aplikací a webovou aplikací bude probíhat pomocí REST API. REST je architektura rozhraní, navržená pro distribuované prostředí. REST je orientován datově, nikoli procedurálně jako u obdobných služeb XML-RPC či SOAP. REST určuje, jak se přistupuje k datům pomocí čtyř základních metod, které jsou známé pod označením CRUD, tedy vytvoření dat CREATE, získání požadovaných dat RETRIEVE, změnu UPDATE a smazání DELETE. Jelikož architektura REST využívá HTTP protokol, tyto metody jsou implementovány odpovídajícími metodami HTTP protokolu.[9]

2.2.5

Výměna dat

Pro výměnu dat lze použít formát JSON, XML a jiné jako např. YAML. JSON je oblíbený textový formát určený k ukládání a výměně hierarchicky strukturovaných dat. Během několika posledních let se JSON prosadil především jako silně odlehčená náhrada XML či jako alternativa k němu. Jeho syntaxe je převzata, jak už název napovídá, z jazyka JavaScript, JSON však na JavaScriptu nijak přímo nezávisí a je velmi dobře použitelný i v jiných programovacích jazycích.[10] Výhodou tohoto formátu je především jeho jednoduchá syntaxe, která má za důsledek to, že se s daty ve fromátu JSON snadno pracuje. Data se jednoduše naparsují do základních datových typů, jakým je třeba object v JavaScriptu. XML je značkovací jazyk, který slouží pro popis dat a především pro výměnu popsaných dat mezi aplikacemi. Výhodou tohoto formátu dat je přede30

2.2. Technologie vším dostupnost nástrojů a technologií typu XPath, XSLT či XQuery, které slouží k manipulaci a vyhledávání dat ve formátu XML. Jako formát pro výměnu dat jsem zvolil JSON, který je datově efektivnějším formátem než XML. Nedostupnost technologií, které XML nabízí, není pro mne zásadním nedostatkem.

2.2.6

Facebook API

Je to jen několik let, co Facebook odstartoval masové používání sociálních sítí a dnes má účet na těchto serverech téměř každý a to dokonce i firmy, které prezentují své výrobky, budují jméno společnosti a komunikují se zákazníky pro uchování dobrých vztahů. Dle statistiky 2.3[11] je patrné, že právě Facebook dominuje v České republice. Ostatní sociální sítě nejsou v ČR nijak zvlášť rozšířené. Je nasnadě říci, že data pocházejí ze statistiky publikované v dubnu 2013. Od té doby se mnohé změnilo a rozdíl již není tak propastný. Nicméně i přes to, jsem se rozhodl pouze pro podporu služby Facebook.

Obrázek 2.3: Sociální sítě v Česku

Facebook Inc., jakožto světově nejpopulárnější sociální síť, připravilo pro vývojáře aplikací třetích stran své API, které umožní vývojářům napojit své aplikace na sociální síť a to velmi jednoduchým způsobem. Vývojáři např. mohou místo své autentizace využít přihlašovací metody přes Facebook účet, odesílat příspěvky, sdílet, či „lajkovat“. Stačí stáhnout oficiální Facebook SDK pro operační systém Android21 a využívat předpřipravených metod. Obdobně jsou na tom i ostatní sociální sítě. 21 Facebook SDK pro OS Android dostupné z https://developers.facebook.com/docs/ android

31

2. Návrh

2.3

Architektura

Vzhledem k nutnosti komunikace mobilní aplikace se serverem, se přímo nabízí zvolit model architektury klient/server. Mobilní aplikace bude implementována jako tzv. Fat client22 . Tento typ klienta se používá typicky v situacích, kde není komunikace mezi klientem a severem zaručena. Důvod, proč jsem si zvolil tuto implementaci je ten, jelikož je nutné, aby mobilní aplikace uchovávala data ve své lokální databázi a jen v případě, kdy uživatel požádá, naváže klient se serverem spojení. Aplikace tedy bude plně nezávislá na vzdáleném serveru. Fat client typicky obsahuje jednu až tři vrstvy, v závislosti na rozsahu aplikace a finančních/časových zdrojů. Každá vrstva by měla být nezávislá a obecně platí, že čím více vrstev programátor implementuje, tím by měl být kód čitelnější a v budoucnu lépe udržovanější.

Obrázek 2.4: Fat client - třívrstvá architektura Android framework nemá přesně daný návrhový vzor, jako je tomu např. u iOS aplikací, kde je návrhovým vzorem MVC. Při vývoji aplikací pro platformu Android si volíme a implementujeme vrstvy sami. Během návrhu aplikace jsem se nicméně nechal MVC návrhovým vzorem inspirovat, používám tedy mírně upravenou variantu. 22

32

česky tlustý klient

2.4. Databázový model Každá aktivita dědí standardně od třídy Activity, kterou můžeme přirovnat ke controlleru23 . Jednotlivé Views24 jsou definovány pomocí jazyka XML a následně datová vrstva25 , která se stará o přístupy k databázím, mapování na modelové třídy a komunikaci se serverem. Webová aplikace bude implementovat návrhový vzor MVC, který implementuje Nette framework. Architektura bude tedy třívrstvá.

2.4

Databázový model

Aplikace je navržena tak, že využívá 2 databáze. První databáze v rámci mobilní aplikace je interní. Uložiště uchovává vše potřebné, tudíž zaručuje nezávislý chod na internetovém připojení. Druhá databáze je externí a primárně slouží pro synchronizaci uživatelských návrhů a popularity napříč všemi instalacemi. Každý návrh musí schválit, respektive zkontrolovat a případně upravit, administrátor webové aplikace.

2.4.1

Interní DB

Nejdůležitější tabulkou celé databáze (viz. 2.5) je tabulka jmen. Zaznamenává vše potřebné pro chod aplikace a také atribut timestamp pro zjištění, kdy bylo naposledy konkrétní jméno synchronizováno. S tím souvisí i samostatná tabulka synchronizace, která taktéž obsahuje atribut timestamp, který uchovává časovou značku, kdy byla naposledy provedena úspěšná synchronizace. Slouží jako optimalizační prvek. Řazení jmen do jednotlivých kategorií zjednodušuje výběr správného jména a přidává další relevantní informaci. Pro jednotlivé uživatelské návrhy slouží tabulka UserSuggestions.

2.4.2

Externí DB

Webová aplikace slouží pro synchronizaci jmen napříč všemi instalacemi mobilní aplikace. To má za následek to, že je databáze (viz. 2.6) z velké části podobná mobilní. Oproti interní, obsahuje navíc tabulku Administrator, která uchovává osobní a bezpečnostní informace o spravující osobě. Pokud uživatel mobilní aplikace přidá jméno do interní databáze a odešle jej do externí, je administrátorovi odeslána notifikace, která si drží informaci o datu odeslání. Pro zajímavost jsem uložil do databáze informaci, jak často naši uživatelé používají funkci synchronizace. Tato hodnota je uložena v tabulce Sync s názvem sync_count. 23

Controller/řídící/business vrstva slouží jako zprostředkovatel mezi Views a Model objekty 24 Pohledy/prezentační vrstva definuje, jak se objekty vykreslí na obrazovce 25 Model/datová vrstva zapouzdřuje data aplikace

33

2. Návrh

Obrázek 2.5: Databázový model - mobilní aplikace

2.5

Grafický design

2.6

Návrh uživatelského rozhraní

Uživatelské rozhraní je jednou ze stěžejních částí při vývoji aplikace. Správný návrh často rozhoduje o tom, zda je aplikace úspěšná, či ne. Pro uživatele je důležité, aby aplikace vypadala působivě a ovládala se intuitivně. Aby se tyto důležité faktory co nejvíce eliminovaly, vznikají tzv. guidelines26 , které by měla každá aplikace dodržovat. Tím by měla být zaručena konzistence napříč danou platformou a uživatel by neměl mít pocit, že design aplikace je v rozporu s designem dané platformy. Google pro systém Android Lollipop vytvořil Material Design Guidelines[12], který se zaměřuje na vše potřebné, od použitých fontů, barevných palet, až po animace.

26

34

Někdy též Human Interface Guidelines, představující soubor doporučených pravidel

2.6. Návrh uživatelského rozhraní

Obrázek 2.6: Databázový model - webová aplikace

35

2. Návrh

2.6.1

Material design

Material design dorazil do OS Android spolu s verzí Lollipop, který se nese v duchu flat designu27 plného animací. Hlavní myšlenkou je, že prvky uživatelského rozhraní reagují na dotek velmi intuitivním způsobem, animace jsou jemnější a barvy jasnější a to pro to, aby vynikly důležité informace. Uživatel má tedy vždy přehled o tom, že se provedla nějaká akce. Jelikož tento trend vychází z flat designu, je kladen velký důraz na jednoduchost. Používají se převážně jednolité barvy a kvalitní typografické zpracování. Důležitá je především použitelnost a účelnost. Prostředí Material designu je reprezentováno jako 3D prostor, to tedy znamená, že každý prvek uživatelského rozhraní lze pozicovat pomocí os X, Y a nově Z. Čím kladnější je hodnota osy Z, tím je daný prvek blíže k uživateli. To je následně znázorněno pomocí vrženého stínu, což je v rozporu s flat designem. V závislosti na Material Design Guidelines budu používat pouze standardní ikony systému Android a též doporučených barevných palet Material Designu.

2.6.2

Wireframe potažmo prototyp

Wireframe28 slouží pro prvotní náhled implementovaného řešení. Tento náčrtek by měl obsahovat veškerý obsah, který je na aplikace kladen. Wireframe by měl být tvořen pomocí čar a textu, nicméně v dnešní době již existuje mnoho online nástrojů, které tuto vlastnost porušují. Nástroje obsahují již standardní ovládací prvky cílové platformy. To nese s sebou ty výhody, že již v takto raném stádiu máme přehled, jak by měla daná aplikace ve výsledku vypadat. K tomuto úkolu jsem využil výborný nástroj JustInMind[13], který dokáže vytvořit velmi pokročilé wireframy. Wireframy můžeme obohatit o gesta a různé přechody, dále definovat interakce a následně odeslat prototyp do mobilního zařízení. Vše je velmi jednoduché a rychlé. Prototyp můžeme ihned testovat reálnými uživateli a zjistit tak důležité informace. Při návrhu jsem se snažil dbát na obecný postup, kdy je vhodné wireframy postupně zdokonalovat. Nejdříve jsem tedy vytvořil kostru jednotlivých obrazovek, následně nahradil abstraktní objekty standardními widgety29 pro systém Android a nakonec koloroval. Výsledný prototyp by měl být tedy velmi podobný implementovanému řešení. 27

Flat design je styl designu bez elementů, které obsahují iluzi třetího rozměru, jako stíny, přechody, vzory. Zaměřuje se na jednoduchost, typografii a jednolité barvy. 28 Česky drátěný model, někdy též skica 29 Ovládací prvek či základní element pro interakci programu s uživatelem

36

2.6. Návrh uživatelského rozhraní Jakmile jsem byl s prototypem spokojen, odeslal jsem jej do mobilního telefonu a otestoval několika uživateli z cílové skupiny. 2.6.2.1

Ukázka prototypu

Jediným grafickým prvkem, krom standardní Android infografiky, je ikona hlavičky miminka. Vektor jsem zakoupil v databance Iconfinder30 za cenu 2 dolarů. Originální soubor babyFace.ai lze najít na přiloženém CD. Na hlavní obrazovku jsem umístil jen již zmíněnou ikonu a tříprvkové menu, které obsahuje tlačítko pro jednotlivce, pro partnery a pro vstup do databáze jmen.

(a) Úvodní obrazovka

Obrázek 2.7: Úvodní obrazovka s hlavní nabídkou Vyřazovací metoda probíhá v několika krokách. Nejdříve uživatel zvolí, jakého pohlaví má jméno být a následně kategorii. Fragment výběru jména 2.8b zobrazí pětici jmen, kde výchozím stavem je dislike (ikonka palce dolů), uživatel kliknutím na jméno provede změnu stavu z dislike na like (palec nahoru). Rozdá maximálně tři „lajky“ a klikne na tlačítko další. Barevné pruhy jsou pouze pro zajímavější grafický design. Fragment 2.8c je velmi jednoduchý, pouze zobrazí 3 nejúspěšnější jména. Každá položka seznamu se omezuje jen na jméno, žádné další informace o jménu 30 Dostupné z: https://www.iconfinder.com/icons/109361/ baby_baby_girl_newborn_raw_simple_icon

37

2. Návrh již nejsou nutné zobrazovat. V blízkosti tlačítka pro ukončení jsem umístil tlačítko pro sdílení výběru, abych umocnil pravděpodobnost, že si této možnosti uživatel povšimne. Je nasnadě upozornit, že každý z fragmentů výběrové metody, je také v barevném podání pro dívčí jména.

(a) Filtr

(b) Vyřazovací metoda

(c) Výsledek

Obrázek 2.8: Výběr jména Obrázek 2.9 ukazuje jednotlivé fragmenty aktivity seznamu jmen. Snažil jsem se, aby bylo ihned uživateli patrné, o jaké pohlaví se jedná. K tomu jsem využil barevné rozlišení - modrá pro chlapecké jméno a růžová pro dívčí. Mezi jednotlivými fragmenty lze jednoduše přecházet pomocí gesta swipe, na který jsou uživatele smartphonů již zvyklí. První fragment zobrazuje důležité informace o filtrovaných jmen. Dále lze přímo v seznamu označovat preferovaná jména pomocí toggle31 tlačítka. Fragment 2.9b zobrazí pětici nejúspěšnějších jmen vyřazovací metody. Poslední fragment 2.9c obsahuje jména, která jsou nejpreferovanější na základě „lajků“ napříč všemi instalacemi. Fragment seznamu jmen 2.9a obsahuje i jednu zajímavost, kterou přinesl Material design. Jedná se o tzv. Floating action button, který reprezentuje důležitou akci v rámci aktivity. Tou bezesporu přidání jména je. Na obrázku 2.10a je zobrazen formulář pro uživatelské návrhy. 31 Toggle funguje jako vypínač, má dva stavy a jednoduchým stiskem se mezi těmito stavy přechází

38

2.6. Návrh uživatelského rozhraní

(a) Seznam jmen

(b) Nejúspěšnější jména

(c) Populární jména

Obrázek 2.9: Interní databáze jmen Obrázky 2.10b a 2.10c slouží pro zobrazení veškerých informací o jménu. První zajímavostí je to, že jsem se snažil zachovat myšlenku toho, aby bylo ihned patrné, jakého pohlaví jméno je. Detail jména jsem zobrazil jako kartu, nebo spíše lísteček, kde jsem se nechal inspirovat konkurenční aplikací Baby Name Together od Linkinet1.1.4. Z prototypu je patrné dodržování Material design Guidelines využíváním jednolitých barev, standardní infografiky a tam, kde je to nutné, tak používání i třetího rozměru. Snažil jsem se také o co nejjednodušší a vše říkající design, který pomocí barevného nádechu uživateli prozradí pohlaví jména. 2.6.2.2

Testování prototypu

Jak již bylo zmíněno, prototypovací nástroj JustInMind umožňuje přiřazovat jednotlivým prvkům interakce a prototyp odeslat na mobilní zařízení. Této výhody jsem využil, abych zjistil první reakce na navržené uživatelské rozhraní. Prototyp byl otestován zástupci potencionálních skupin uživatelů1.3.1, pro ověření, že je uživatelské rozhraní přehledné a srozumitelné. K testování prototypu jsem využil již vytvořené scénáře, které jsou součástí CD v souboru scenare-mobil-app.pdf. Uživateli jsem zadal pouze cíl a v případě, že si nevěděl rady s dalším postupem, odhalil postup. Tímto jednoduchým způsobem je možné odhalit chyby v návrhu uživatelského rozhraní 39

2. Návrh

(a) Přidání jména

(b) Detail jména - chlapec

(c) Detail jména - dívka

Obrázek 2.10: Přidání jména a karta s detailními informacemi

a včasně na ně zareagovat. Po skončení byla provedena shrnující diskuze, kde uživatelé mohli navrhnout případné úpravy funkčnosti či návrhu uživatelského rozhraní. 2.6.2.3

Postřehy z testování

Nejcennější zjištění pro mne bylo, že ne každý uživatel pochopil systém vyřazovací metody. Problém byl ten, že nebylo na první pohled zřetelné, jakým způsobem vyjádřit preferenci jmen. Po hlubším zkoumání jsme s uživateli došli k závěru, který se odkazuje na způsob „lajkování“ příspěvků na sociální síti Facebook. Uživatel má prý tento systém spojen právě s touto sociální sítí, kde žádná infografika pro dislike ve formě palce dolů neexistuje. Tuto vlastnost vyjadřuje tatáž ikonka palce, nicméně pouze v odstínu šedi, která reprezentuje neaktivní stav. Tento problém jsem se tedy snažil vyřešit a po opětovném testování byl zahrnut do finální podoby aplikace. Výsledek úpravy prototypu lze vidět na obrázkách 2.11 Velmi mne potěšila reakce na změnu tématu dle volby pohlaví. Nicméně jsem byl upozorněn, že by bylo vhodné, aby změna byla zřetelná již při kliknutí na radio button filtru. To navíc přímo potvrzuje cíle Material designu, který 40

2.6. Návrh uživatelského rozhraní

(a) Default stav výběru

(b) Preferovaná jména

Obrázek 2.11: Výběrová metoda po vzoru Facebook „lajku“ klade důraz na zřetelné změny stavu a všude přítomné interaktivní prvky. Dále byl odhalen nedostatek v nabízené funkčnosti a nejasné infografice aktivity detailu jména. Ikonku přidání pochopil uživatel jako editaci. Možnost editace jména jsem přitom vůbec nebral v potaz. Editace schválených jmen nepřipadá v úvahu, nicméně by uživatelé chtěli mít možnost alespoň navrhovat další zdrobněliny jmen.

41

Kapitola

Realizace Tato kapitola popisuje implementaci jak mobilní, tak webové aplikace. Cílem není přesný a detailní popis, pouze snaha popsat zvolené nástroje, zajímavosti a problémy, které se v průběhu vývoje vyskytly. Při implementaci jsem čerpal z [14], [15] a [16].

3.1 3.1.1

Volba nástrojů Prostředí pro vývoj mobilní aplikace v OS Android

Pro vývoj nativní Android aplikace existuje více vývojových prostředí, nicméně pokud se chceme omezit pouze na ty nejpoužívanější, jsou to bezesporu Android Studio a Eclipse. Android Studio je přímo podporováno a tím pádem doporučováno Googlem pro vývoj nativních Android aplikací. Tohle IDE32 provázelo během vývoje mnoho problémů. Není to dávno, kdy bylo ve vývoji jako BETA33 . Prostředí vykazovalo mnoho chyb a pro svoji horší optimalizaci nebyla práce efektivní. Proto si mnoho vývojářů zvolilo jako vývojové prostředí konkurenční Eclipse. Doba se nicméně změnila a dnes je jich na trhu verze 1.2.2 34 , která je velmi stabilní, a proto není důvod, proč využívat pro vývoj jiné IDE. Jádrem Android Studia je IntelliJ IDEA editor od společnosti JetBrains[17], díky kterému získává výborné možnosti práce s kódem, našeptávání a mnoho dalšího. Poskytuje integraci drag-and-drop editoru pro tvorbu layoutu, který nicméně slouží spíše jako podpůrná funkcionalita. 32

Vývojové prostředí usnadňující práci programátorů BETA označuje software, který není finální a je vydán pro testování mezi běžnými uživateli 34 Vydána dne 3. června 2015 33

43

3

3. Realizace

3.1.2

Prostředí pro vývoj webové aplikace

Pro vývoj webové aplikace jsem zvolil dnes velmi populární prostředí PhpStorm, který vyvíjí stejná společnost, jako Android Studio, JetBrains. PhpStorm nabízí mnoho stažitelných pluginů pro vývoj PHP aplikací včetně podpory nejpoužívanějších frameworků, javascriptu a v neposlední řadě HTML s CSS. Navíc existuje i plugin pro šablonovací systém Latte, který framework Nette nativně používá. JetBrains nabízí roční education licenci, kterou jsem pro vývoj využil.

3.1.3

Emulátor

I přes to, že Android Studio obsahuje virtuální stroj pro testování vyvíjené aplikace, je nutné pro jeho pomalé reakce, sáhnout po specializovaném nástroji třetích stran. Leaderem na trhu s virtuálními stroji pro systém Android je Genymotion[18]. Genymotion Android emulátor je velmi rychlý a jednoduše použitelný. Navíc lze snadno integrovat do Android Studia včetně Eclipse.

3.1.4

Databáze

Jelikož OS Android využívá jako nativní uložiště dat databázový stroj SQLite, využil jsem pro správu a vytvoření databázového schématu SQLite Manager35 , který je dodáván jako rozšíření pro prohlížeč Mozilla Firefox. Jedná se o miniaturní nástroj, který uživateli poskytuje vše potřebné pro vytvoření nové databáze, psaní SQL dotazů, import a export databáze do souboru a mnoho dalšího. Jako nástroj pro správu webové databáze byl použit řádkový klient dodávaný spolu s MySQL databází. Některé úkony však byly prováděny ve webové aplikaci PhpMyAdmin, pro vyšší komfort.

3.2

Použité knihovny třetích stran

Abych co nejvíce porozuměl vývoji mobilní aplikace, snažil jsem se co nejméně využívat knihoven třetích stran. Nicméně pro synchronizaci a implementaci REST API jsem využil hotového řešení jak na straně klienta, tak na straně serveru.

3.2.1

Restrofit a jsonschema2pojo

Retrofit36 je Android REST klient, který jsem si zvolil pro jeho jednoduchost a efektivitu[19]. Jako komunikační formát jsem si zvolil Json. Praktika 35

Add-on dostupný z https://addons.mozilla.org/cs/firefox/addon/sqlitemanager/ 36 Knihovna dostupná z http://square.github.io/retrofit/

44

3.3. Implementace je taková, že Json požadavek (respektive odpověď) je následně mapovaný na objekt modelující třídy, se kterým lze potažmo pracovat jako s kterýmkoliv jiným objektem. K vygenerování modelu jsem využil online nástroje jsonschema2pojo37 .

3.2.2

Drahak/Restful a JsonMapper

Jedná se o obdobnou knihovnu38 , jako je Retrofit, nicméně pro Nette framework. JsonMapper39 je jednoduchá knihovna, která se stará o mapování Json do modelující třídy.

3.3 3.3.1

Implementace Výběrová metoda

Primárním cílem aplikace je výběr jména, a proto byla této části věnována velká pozornost. Celý průběh výběrové metody jsem implementoval jako aktivitu a jednotlivé kroky následně jako fragmenty. Při implementaci jsem se snažil, aby byla manipulace se jmény co nejrychlejší a také paměťově efektivní. Poté, co uživatel zvolí kategorii a pohlaví, vrácená jména náhodně promíchám a uložím ukazatele do Listu jmen prvního uživatele. Pokud uživatel zvolil mód pro partnery, vytvořím hlubokou kopii tohoto Listu pro druhého uživatele, jelikož budu v rámci výběru členské proměnné jmen modifikovat. Řazení ponechám taktéž stejné, abych zaručil, že bude mít jméno stejné soupeře a také šance na úspěch, jako u prvního uživatele. Jakmile uživatel dokončí výběr, aplikace zobrazí výsledná jména, která obstála v souboji nejdéle. Zohledňuji i číslo aktuálního kola, aby jména, která vstoupí do souboje mezi posledními, měla srovnatelné šance na úspěch. Ukazatele jmen uložím do separátního Listu. Uživateli se zobrazí pouze pětice nejúspěšnějších jmen, nicméně si musím uchovávat odkaz na všechny, která vydržela alespoň jedno kolo, abych mohl provést párování s výslednými jmény druhého uživatele. Listy jsou seřazené sestupně dle počtu kol. Zde přichází na řadu optimalizační prvek. Abych zaručil vyhledávání v konstantním čase, uložím si ke každému jménu index, na kterém se nachází v Listu vítězných jmen. Matching funguje na principu: Porovnej vítězná pole dle počtu jmen, menší pole vezmi a pro každé jméno zjisti, na jakém pořadí se nachází ve vítězném 37

Nástroj dostupný z http://www.jsonschema2pojo.org/ Knihovna dostupná z https://github.com/drahak/Restful 39 Knihovna dostupná z https://github.com/netresearch/jsonmapper

38

45

3. Realizace poli druhého uživatele. To můžu zaručit v konstantním čase, jelikož jsem si uchoval index u každého jména. Pořadí sečtu a ukazatel na jméno uložím do Listu. Výsledný seznam jmen seřadím vzestupně. Čím nižší pořadí, tím vyšší úspěšnost. Řešení by mělo být paměťově nenáročné, což je jeden z cílů mobilní aplikace a pro konstantní vyhledávání i velmi rychlé.

3.3.2

Synchronizace

Rest API klient implementovaný knihovnou Retrofit, vyžaduje implementovat interface, který předepisuje jednotlivé HTTP requesty pomocí standardních metod. Implementovat budu pouze metodu pro odeslání jména ke korektuře a pro synchronizaci. public interface RestApi { //user suggestion sent to correction @POST("/sync/names") void crateName(@Body NameModel name, Callback<StatusModel> response); //sync the databases @PUT("/sync/names") void sync(@Body SyncModel syncPackage, Callback<SyncModel> response); }

Synchronizace je navržena tak, že nejdříve odešle uživatelská data klient a to uživatelské „lajky“ jmen (od kterých se odvíjí popularita) a poté uživatelské návrhy, které zatím nebyly odeslány ke korektuře. Při odeslání „lajku“ do webové aplikace jsem nicméně musel řešit problém s tím, jak poznám, zda klient již tuto informaci odeslal. Pokud bych se tím nezabýval, znamenalo by to, že by při každé synchronizaci aplikace odeslala popularitu +1 (pokud by bylo jméno „lajknuto“), nebo bez změny, pokud by byl userLike nastaven na false. Jelikož jsem potřeboval zakódovat 3 stavy (+1, 0, -1), potřeboval jsem alespoň dva bity. To reprezentovalo 2 booleovské proměnné, které znázorňuje tabulka 3.1. Jakmile má mobilní aplikace připravena data k odeslání, zavolá se asynchronně metoda sync(). Webová aplikace nejdříve synchronizuje data z mobilní aplikace. Následně má za úkol připravit pole jmen, která jsou nutné synchronizovat. Při každé změně (přidání, editace, korekce jména administrátorem) je upravena jak lokální časová značka, tak globální pro celou databázi. Server porovná časovou značku serveru se značkou klienta. Pokud je na ser46

3.3. Implementace Popularita 0 +1 -1 0

userLike 1 1 0 0

externalLike 1 0 1 0

Tabulka 3.1: Kódování popularity veru starší, tak existují jména, která je nutné synchronizovat. Server připraví pole jmen, která mají vyšší timestamp, než přijatá requestem. Mobilní aplikace přidá jména, která obdržel a nastaví novou globální timestamp. Jak jsem již zmínil, synchronizace probíhá asynchronně. To má za výhodu, že uživatel nemusí čekat, až proběhne synchronizace. Jelikož může uživatel plně používat aplikaci, je nutné zamezit zápis do databáze, abych po synchronizaci tyto změny neztratil. Využil jsem tedy booleovské proměnné isLockDB, kterou nastavím na true, před synchronizací. Jakmile synchronizace skončí, nastavím proměnnou znovu na false a uživatel může do databáze znovu zapisovat.

3.3.3

Změna tématu aktuální aktivity

Při testování prototypu jsem zjistil, že si uživatelé přejí, aby změna tématu byla ihned viditelná již při zvolení radio buttonu, představující pohlaví jména uvnitř FilterActivity. Nastavení tématu probíhá již v metodě onCreate(), která se volá při startování aktivity. Je tedy nutné aktivitu ukončit a znovu nastartovat. Pro tento účel byla vytvořena třída ThemeUtils, která nabízí 2 metody: onActivityCreateSetTheme(), která má za úkol při startu aktivity zvolit téma dle statické proměnné a changeToTheme(), která zvolí požadované téma, ukončí a nastartuje znovu aktivitu. Jedná se o knihovní třídu návrhový vzor, která se vyznačuje tím, že má všechny atributy a metody statické. Tento postup jde lehce proti objektovému programování, nicméně jde o osvědčený a používaný postup. public class ThemeUtils { public static int sTheme; public final static int THEME_BLUE = 0; public final static int THEME_PINK = 1; private ThemeUtils() { }

47

3. Realizace

public static void changeToTheme(Activity activity, int theme) { sTheme = theme; activity.finish(); activity.startActivity(new Intent(activity, activity.getClass())); activity.overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out); } public static void onActivityCreateSetTheme(Activity activity, int currentTheme) { sTheme = currentTheme; switch (sTheme) { default: case THEME_BLUE: activity.setTheme(R.style.Theme_blue); break; case THEME_PINK: activity.setTheme(R.style.Theme_pink); break; } } }

3.3.4

Výpočet výšky položky adapteru výběrové metody

Při testování aplikace na různých typech telefonů, které se lišily rozlišením displeje, jsem se všiml problému u vyřazovací metody. FragmentChoosing má vždy ukázat 5 jmen (pokud to jde). ListView nelze přímo nastavit procentuální výšku položky, a proto jsem musel problém řešit programově. Nejdříve jsem musel zjistit, jakou výšku v pixelech zaujímá ListView. To jsem zařídil tak, že jsem nejdříve zjistil, jakou výšku má celý displej, StatusBar a ActionBar. Tyto hodnoty jsem od sebe odečetl. Vrácená hodnota byla výška ListView. Výsledek jsem vydělil počtem položek, které chci ve výběrové metodě současně zobrazit. Tuto hodnotu jsem potom nastavil pro každou položku ListView.

3.3.5

Odeslání notifikace

Téměř každá webová aplikace potřebuje odesílat emaily, ať už newslettery, nebo třeba potvrzení objednávky. Proto Nette Framework poskytuje potřebné 48

3.3. Implementace nástroje, které tuto rutinu umožňují snadno a rychle implementovat. Nette umožňuje odesílat emailové zprávy pomocí SmtpMailer třídy, použití je velmi jednoduché. Konstruktoru předám asociativní pole se všemi náležitostmi pro připojení k SMTP serveru, ze kterého chci mail odeslat. Následně vytvořím obsah zprávy. Následující kód ukazuje, jak byla implementována notifikační emailová zpráva. public function sendNotification($suggestionId, $nameId) { //create notification to db $notification = $this->db->table(’notifications’)->insert(array( ’user_suggestion_id’ => $suggestionId, ’administrator_id’ => 1 )); $suggestionName = $this->db->table(’names’)->get($nameId); $admin = $this->db->table(’administrators’) ->get($notification->administrator_id); $smtpMailer = new SmtpMailer(array( ’host’ => ’smtp.fit.cvut.cz’, ’username’ => ’[email protected]’, ’password’ => ’********’, ’secure’ => ’ssl’, )); $email = new Message(); $email->setFrom(’Jména ’) ->addTo($admin->email) ->setSubject(’Nový návrh jména’) ->setBody("Do databáze bylo odesláno nové jméno ke korektuře.\n\n" . "Jméno: " . $suggestionName->name . "\n" . "Pohlaví: " . $suggestionName->gender . "\n" . "Svátek: " . $suggestionName->name_day . "\n" . "Varianty: " . $suggestionName->variants . "\n" . "Kategorie: " . $this->getCategoriesAsString($suggestionName) . "\n" . "Odesláno: " . $notification->send_at ); $smtpMailer->send($email); } }

49

3. Realizace

3.3.6

Výsledek mobilní aplikace

(a) Upravená homepage

(b) Seznam jmen

(c) Změna tématu

(d) Synchronizace

(e) Přidaná editace

(f) Výběrová metoda

(a) Ikona

50

3.3. Implementace 3.3.6.1

Výsledek webové aplikace

(a) Seznam jmen

Obrázek 3.3: Webová aplikace - desktop zobrazení seznamu jmen

(a) Přihlašovací formulář

(b) Navrhovaná jména

(c) Korekce jména

Obrázek 3.4: Webová aplikace - responsivní zobrazení

51

Kapitola

Testování 4.1 4.1.1

Testování programátorem Testování kódu

Testování kódu spočívalo v psaní průběžných testů nad konkrétními částmi kódu. Cílem testů bylo ověřit správnost implementace tříd a jednotlivých metod server i klient aplikace. Testování bylo obdobné testování pomocí Unit testů, nicméně pro jednoduchost a nezávislost na ostatních knihovnách, byly ponechány jen po dobu vývoje.

4.1.2

Testování funkcionality

Testování probíhalo na již zmíněném emulátoru Genymotion. Jako virtuální zařízení jsem zvolil několik zástupců a jedno zařízení fyzické.

1. virtual Samsung Galaxy S2 - 4.1.1 - API 16 - 480 x 800px 2. virtual Samsung Galaxy S5 - 4.4.4 - API 19 - 1080 x 1920px 3. virtual Google Nexus 6 - 5.1.0 - API 22 - 1440 x 2560px 4. LG G2 16GB - 4.4.2 - API 19 - 1080 x 1920px

Během testů funkcionality bylo zkoumané, zda aplikace plní požadavky a to za pomocí scénářů užití. Cílem bylo zjištění, zda se aplikace chová korektně a také odhalení fatálních i drobných chyb, kterých jsem se chtěl vyvarovat. Všechny tyto odhalené chyby bylo možné rychle opravit během implementace a urychlit tím vývoj obou aplikací. 53

4

4. Testování

4.2

Testování použitelnosti

Po dokončení implementace a úspěšném interním testováním, jsem uskutečnil usability test, který měl za úkol zhodnotit celkovou použitelnost a korektní chování aplikace, testované cílovou skupinou uživatelů. Testování použitelnosti se dělí na kvalitativní a kvalitativní. Kvantitativní testování má za cíl testovat a získat data od velkého množství uživatelů. K vyhodnocování výsledků se používají statistické metody a výsledkem standardně bývají čísla. Naopak u kvalitativního testování provede testy malá skupina lidí, kteří jsou potencionálními uživateli systému. Během testování je přítomen pozorovatel, který zadává uživateli úkoly. Sleduje chování uživatele, někdy pokud s tím uživatel souhlasí, lze použít i monitorovací nástroje, jako kamerový záznam či záznam dění na obrazovce počítače. Výsledkem těchto testů je odhalení problémů týkajících se použitelnosti a přehlednosti systému[20].

4.2.1

Průběh testování

Na testovacím lokálním serveru byla spuštěna aktuální verze webové aplikace, která obsahovala omezenou databázi (pouze několik desítek jmen). K testování byli vyzváni uživatelé, kteří již testovali prototyp uživatelského rozhraní mobilní aplikace. Každému uživateli bylo postupně předáno testovací zařízení LG G2 s předinstalovanou aplikací. Následně uživatel obdržel sérii úkolů s krátkým popisem, které měl vykonat. Pokud se rozhodnete testovat implementované řešení, postupujte dle stručného návodu, který je přiložen na CD v souboru deployment.pdf. Úkoly: Lajkování filtrovaného jména Za několik měsíců se vám narodí vaše první miminko a má to být holčička. S přítelem jste se rozhodli, že byste chtěli zvolit spíše zahraniční jméno. Najdi v seznamu jmen všechna holčičí jména kategorie zahraniční. Vyber 3 jména, která se ti líbí a „olajkuj“ je. Přidání uživatelského jména a následná editace Aplikace ti nabídla jména, nicméně jsi mezi nimi nenašla jméno Kirsten. Přidej jméno do seznamu jmen, zadej svátek dne 28. 2. a zdrobněliny Kristn, Krystyn. Návrh odešli ke schválení a následně přidej mezi jména. Po přidání sis uvědomila, že jméno Kirsten slaví svátek dne 24. 7. Editaci opětovně odešli ke schválení a ulož změnu. 54

4.2. Testování použitelnosti Výběrová metoda pro partnery Se svým partnerem jste se rozhodli zkusit vybrat jméno pomocí výběrové metody. Započni výběrovou metodu pro partnery, zvol zahraniční holčičí jména. Dokončete úspěšně výběr jmen. Synchronizace Po nějaké době jste se rozhodla k aplikaci vrátit a zjistit, jak je vámi vybrané jméno populární. Proveďte synchronizaci jmen a zjistěte, jak je jméno populární.

4.2.2

Výsledky testování

Zpočátku se uživatelé snažili databázi jmen projít a zjistit, co je na jednotlivých obrazovkách aplikace zajímavé. Po několika kliknutí nalezli ikonku filtrace a poté již nebyl problém dokončit úkol. Důvodem, proč ihned nefiltrovali jména, i přes to, že standardní ikonku filtrace z OS android dobře znají, byl ten, že prvotní průchod aplikací je pro testovací subjekty zvykem. Při druhém úkolu byl největší problém zadání validních údajů o jménu i přes to, že formulář obsahuje nápovědu. Domnívám se, že jsem zvolil validaci až příliš striktní. To lze řešit tak, že vstup bude case insensitive40 a nebudu trvat na zadání bílých znaků, jako je mezera. Vstup následně zvaliduji a upravím tak, jak potřebuji. Výběrová metoda proběhla nadmíru dobře a změna ikonky palce byla úspěšná. Poslední úkol zjistil zásadní nedostatek v komunikaci s uživatelem. Uživatelé sice synchronizaci provedli správně, nicméně již nebylo patrné, jaká jména byla synchronizována. S touto myšlenkou jsem při návrhu nepočítal, naštěstí by neměl být problém rozšířit databázi o informaci, zda bylo jméno přidáno, či editováno. Tyto jména by byla následně graficky znázorněna a uživatel by měl ihned přehled o tom, co synchronizace vykonala.

40

Nezáleží na velikosti písmen

55

Závěr Práce měla za cíl vytvořit aplikaci, která by usnadnila budoucím rodičům výběr jména pro jejich potomky. Na základě provedené analýzy konkurenčních řešení byl shledán hlavní nedostatek v absenci výběrové metody a také českých jmen. Po detailním průzkumu vznikl návrh všech potřebných požadavků, které byly posléze implementovány. Výsledkem práce vznikla mobilní aplikace pro operační systém Android, která se snaží zaujmout uživatele jednoduchým, zato zajímavým grafickým designem a použitelným uživatelským rozhraním. K tomu navíc přidává i nadstandardní funkcionalitu, která se mezi konkurenčními aplikace nenachází. Požadovaná funkcionalita si nicméně vyžádala i implementaci jednoduché webové aplikace, se kterou v případě potřeby mobilní aplikace komunikuje. Mým soukromým cílem bylo získání zkušeností s vývojem mobilní aplikace, Nette Frameworkem a také vytvořit užitečnou aplikaci, která pomůže v dnešním uspěchaném životě a to se z mého pohledu povedlo. Výsledné aplikace nejsou pouhým prototypem, ale použitelným řešením. V budoucnu chci aplikaci věnovat další péči a průběžně implementovat funkcionalitu, na kterou se během této práce nedostalo.

Možná rozšíření aplikace V rámci práce nebyla vytvořena kompletní databáze jmen, a proto bude logicky prvním krokem při budoucím rozšíření. Jediný požadavek, který jsem nestihl implementovat, byla integrace sociální služby Facebook, na kterou se chci v budoucnu také zaměřit a na odstranění nedostatků, které se zjistily při testech použitelnosti. Dále přidání animací, které uživateli zpříjemní zážitek při používání aplikace. 57

Závěr Logický je i krok podpory ostatních platforem, zejména iOS či vytvořit jazykové mutace se separátními databázemi jmen. Tohle rozšíření může vést i k tomu, že bude nutné proškolit více administrátorů pro správu webové aplikace a korekci jmen. Následně bych chtěl celý koncept přetvořit ve webovou službu, kde by měl každý uživatel svůj účet a telefon by byl pouze klientem. To by s sebou neslo nižší náklady na vývoj a celá mobilní aplikace by tím byla zjednodušena.

58

Literatura [1]

Urbánek, V.: IDC: Prodeje smartphonů loni poprvé překročily 1 miliardu přístrojů, dominuje Samsung, růst táhnou levné modely [online]. 3.3.2014, [cit. 2015-02-27]. Dostupné z: http://www.kurzy.cz/zpravy/362905idc-prodeje-smartphonu-loni-poprve-prekrocily-1-miliardupristroju-dominuje-samsung-rust-tahnou

[2]

Hruška, D.: Aplikace a jejich ikony [online]. 19.2.2013, [cit. 2015-03-03]. Dostupné z: http://jablickar.cz/aplikace-a-jejich-ikony

[3]

Štefan Ihnát: UX design. Pixel, ročník 3, 2015.

[4]

Pavlíček, M.: Android drží spolu s iOS více než 96% podíl mezi operačními systémy [online]. 30.1.2015, [cit. 2015-03-10]. Dostupné z: http://mobilenet.cz/clanky/android-spolu-s-ios-drzivice-nez-96-podil-mezi-operacnimi-systemy-18872

[5]

Google, inc.: Dashboards [online]. [cit. 2015-06-15]. Dostupné z: https: //developer.android.com/about/dashboards/index.html

[6]

Craig Sahrkie, A. F.: Responzivní webdesign Okamžitě. Brno: Computer Press, první vydání, ISBN 978-80-251-4384-1.

[7]

Skvorc, B.: Best PHP Framework for 2015 – SitePoint Survey Results [online]. 28.3.2015, [cit. 2015-04-07]. Dostupné z: http://www.sitepoint.com/best-php-framework-2015-sitepointsurvey-results

[8]

Nette Foundation: Nette [online]. [cit. 2015-04-07]. Dostupné z: http: //nette.org

[9]

Leonard Richardson, S. R.: RESTful Web Services. O’Reilly Media, první vydání, 2007. 59

Literatura [10] Lhotka, L.: Nové standardy pro JSON [online]. 11.4.2013, [cit. 2015-0408]. Dostupné z: http://www.root.cz/clanky/nove-standardy-projson [11] Michl, P.: Infografika: Sociální sítě v Česku [online]. 8.4.2013, [cit. 2015-04-15]. Dostupné z: http://www.m-journal.cz/cs/ internet/socialni-site/infografika--socialni-site-vcesku__s416x9788.html [12] Google, Inc.: Introduction - Material design - Google design guidelines [online]. [cit. 2015-05-02]. Dostupné z: https://www.google.com/design/ spec/material-design/introduction.html [13] JustInMind: Prototype Faster Communicate Better [online]. [cit. 201505-09]. Dostupné z: http://www.justinmind.com [14] Schildt, H.: Java 7: Výukový kurz. Brno: Computer Press, první vydání, 2012, ISBN 978-80-251-3748-2. [15] Grant, A.: Android 4: Průvodce programováním mobilních aplikací. Brno: Computer Press, první vydání, 2013, ISBN 978-80-251-3782-6. [16] Google, Inc.: Android Developers [online]. [cit. 2015-05-12]. Dostupné z: http://developer.android.com/develop [17] JetBrains, Inc.: JetBrains :: World’s Leading Vendor of Professional Development Tools [online]. [cit. 2015-06-17]. Dostupné z: https:// www.jetbrains.com [18] Genymobile SAS: Genymotion [online]. [19] Ruesch, J.: Android Async HTTP Clients: Volley vs Retrofit [online]. 9.12.2013, [cit. 2015-06-17]. Dostupné z: https:// instructure.github.io/blog/2013/12/09/volley-vs-retrofit [20] Schmidt, J.: BI-TUR - Přednáška č.8 - Testování použitelnosti. Duben 2014, [cit. 2015-06-17].

60

Příloha

Seznam použitých zkratek ASP Active Server Pages API Application Programming Interface CSS Cascading Style Sheets GUI Graphical User Interface HTML HyperText Markup Language HTTP HyperText Transfer Protocol IDE Integrated Development Environment JEE Java Enterprise Edition JSON JavaScript Object Notation JSP Java Server Pages LTE Long Term Evolution MVC Model-View-Controller OS Operation System PHP Hypertext Preprocessor REST REpresentational State Transfer SDK Software Development Kit SMTP Simple Mail Transfer Protocol SOAP Simple Object Access Protocol 61

A

A. Seznam použitých zkratek SQL Structured Query Language UX User eXperience XML Extensible Markup Language XSLT eXtensible Stylesheet Language Transformations YAML Ain’t Markup Language

62

Příloha

Obsah přiloženého CD

readme.txt...................................stručný popis obsahu CD vyberJmena.apk.....................instalační balíček mobilní aplikace src........................................adresář se zdrojovými kódy impl...................................zdrojové kódy implementace thesis ...................... zdrojová forma práce ve formátu LATEX text ....................................................... text práce thesis.pdf ............................. text práce ve formátu PDF db .................................. adresář s dump soubory databází names_mobile_db.sql ......................dump databáze klienta names_web_db.sql .........................dump databáze serveru attach ................................. adresář s přiloženými soubory anketa-odpovedi-fb.ods .....................odpovědi - Facebook anketa-odpovedi-mk.ods ................odpovědi - modrykonik.cz anketa-otazky.pdf .......................otázky dotazníkové akce babyFace.ai ............................. originál grafického prvku deployment.pdf .................nasazení implementovaného řešení scenare-mobile-app.pdf ................. scénáře mobilní aplikace scenare-web-app.pdf .....................scénáře webové aplikace 63

B