MATURITNÍ PRÁCE dokumentace
Jídelníček SŠIEŘ pro Android Martin Bartoň
školní rok: 2012/2013
obor: třída:
Počítačové systémy PS4.A
ABSTRAKT Práce je zaměřená na problematiku tvorby Android aplikací, konkrétně tvorbu aplikace Jídelníček SŠIEŘ. Je zde popsán použitý software a nastíněn postup tvorby této aplikace od návrhu v grafickém editoru přes tvorbu adresářové struktury až po ukázky částí kódu. Práce obsahuje podrobný uživatelský manuál, který popisuje jak aplikaci používat a rozebírá detaily jednotlivých prvků.
OBSAH ÚVOD .................................................................................................................................... 6 1
CÍLE PRÁCE ............................................................................................................. 7
2
VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ ................................................................ 8 2.1
POUŽITÉ JAZYKY .................................................................................................... 8
2.2 POUŽITÝ SOFTWARE ............................................................................................... 8 2.2.1 Eclipse IDE .................................................................................................... 8 2.2.2 Android SDK ................................................................................................. 9 2.2.3 Adobe Photoshop ......................................................................................... 10 3 ZPŮSOBY ŘEŠENÍ A POUŽITÉ POSTUPY ....................................................... 11 3.1 ZÁKLADNÍ NÁVRH APLIKACE ................................................................................ 11 3.1.1 Návrh GUI .................................................................................................... 11 3.1.2 Rozložení obsahu do více aktivit ................................................................. 12 3.1.3 Adresářová struktura aplikace ...................................................................... 13 3.2 NÁVRH STRUKTURY KÓDU.................................................................................... 14 3.2.1 Základní návrh kódu..................................................................................... 14 3.2.2 HTML parser ................................................................................................ 14 3.2.3 Rozdělení jídelníčku na jednotlivé elementy ............................................... 15 3.2.4 Práce s časem ............................................................................................... 15 3.2.5 Práce se soubory ........................................................................................... 16 4 ZHODNOCENÍ DOSAŽENÝCH VÝSLEDKŮ .................................................... 17
5
4.1
SPLNĚNÉ CÍLE ....................................................................................................... 17
4.2
OBTÍŽNÉ ČÁSTI KÓDU ........................................................................................... 18
PŘÍRUČKA UŽIVATELE ...................................................................................... 19
5.1 POŽADAVKY PRO SPRÁVNOU PRÁCI A CHOD APLIKACE ......................................... 19 5.1.1 Základní požadavky pro spuštění ................................................................. 19 5.1.2 Systémové požadavky .................................................................................. 19 5.2 POUŽÍVÁNÍ APLIKACE ........................................................................................... 20 5.2.1 První spuštění aplikace ................................................................................. 20 5.2.2 Procházení jídelníčku ................................................................................... 20 5.2.3 Tlačítko menu a nastavení aplikace ............................................................. 21 5.2.4 Informace o aplikaci ..................................................................................... 21 5.3 DETAIL JEDNOTLIVÝCH PRVKŮ APLIKACE ............................................................. 22 5.3.1 Tlačítka pro volbu týdne............................................................................... 22 5.3.2 Detail dne ..................................................................................................... 22 5.3.3 Tlačítko menu............................................................................................... 23 5.3.4 Prvky aktivity Nastavení .............................................................................. 23 5.3.5 Prvky aktivity Info ........................................................................................ 23 6 SHRNUTÍ .................................................................................................................. 24 SEZNAM OBRÁZKŮ ....................................................................................................... 25
ÚVOD Tvorba aplikací pro mobilní operační systém Android je v dnešní době velmi atraktivní oblast programování a přináší spoustu nových, na PC nepoznaných možností. Z pohledu vývojáře jde o velmi přívětivý systém s dobrou podporou a širokou komunitou. Tato práce je obsáhlý projekt, k jehož vytvoření bylo třeba nejen proniknout do jazyku Java, ale také se hlouběji seznámit se systémem Android a jeho API. Aplikace se skládá z XML šablon, které tvoří GUI, dále z Java souborů, ve kterých je samotný program a z Android Manifestu, ve kterém se definují práva aplikace a požadavky na systém. Tyto soubory přeložené kompilátorem do Dalvik byte kódu se zpracují do *.apk souboru, se kterým již umí pracovat běžný Android smartphone nebo tablet.
1 CÍLE PRÁCE Hlavním cílem práce je vytvořit aplikaci, která bez nutnosti otevírat webový prohlížeč či navštívit školní jídelnu, svému uživateli ukáže aktuální jídelníček. Aplikace bude jídelníček stahovat ze stránek školy v HTML formátu, ze kterého následně získá všechny položky pro oba týdny a ty uloží pro snadný přístup offline. Aplikace po spuštění zobrazí jídelníček pro aktuální den a v paměti bude mít uložený jídelníček pro zbytek týdne a další týden. Další cíle aplikace jsou nabídnout uživateli možnost zvolit si vzhled GUI a jednoduché automatické aktualizace každý týden. Dlouhodobým cílem je rozvíjet aplikaci, tak jak budou její uživatelé vyžadovat a rozšířit aplikaci na více škol než jen SŠIEŘ.
2 VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ 2.1
Použité jazyky
Java -
programovací jazyk, ve kterém je napsána většina kódu celé aplikace
-
použitá verze Java ME JDK 7
XML -
značkovací jazyk, je v něm vytvořeno GUI aplikace a soubory obsahující informace o stylu a rozměrech aplikace
-
2.2
použitá verze XML 1.1
Použitý software 2.2.1
Eclipse IDE
Vzhledem k oficiální podpoře přímo od společnosti Google byla volba vývojového prostředí jasně nakloněná pro Eclipse, ve verzi Juno (4.2).
Obr. 1. Eclipse Juno
Eclipse nabízí velmi intuitivní prostředí s nepřeberným množstvím pluginů a nástrojů. Aby bylo možné v Eclipsu vyvíjet pro Android, je třeba nainstalovat Android Development Tools Plugin. Po instalaci v prostředí přibudou zkratky na Android SDK Manager, Android AVD a další nástroje z balíčku Android SDK a hlavně nástroj pro tvorbu GUI.
Obr. 2. Nástroj pro tvorbu GUI 2.2.2
Android SDK
Android Software Developer Kit je balík programů, který obsahuje například Android Virtual Device – emulátor Android zařízení pro platformu x86, nástroj pro převod programu z Javy do Dalvik byte kódu a další, z nichž nejdůležitější součástí jsou jednotlivé platformy Android.
Obr. 3. Android SDK Manager 2.2.3
Adobe Photoshop
Nepostradatelný pomocník pro práci s grafikou, našel uplatnění pro návrh GUI aplikace a návrh jednotlivých grafických prvků.
Obr. 4. Adobe Photoshop CS3
3 ZPŮSOBY ŘEŠENÍ A POUŽITÉ POSTUPY 3.1
Základní návrh aplikace 3.1.1
Návrh GUI
GUI byl sestavován dle standardů systému Android Ice Cream Sandwitch, které je pro uživatele přívětivé a dobře známé jak ze samotného systému, tak z jiných aplikací. Nejdůležitějším nástrojem zde byl Adobe Photoshop, ve kterém se celý návrh realizoval. Pozdější kompletace prostředí probíhala v editoru, který je součástí ADT Pluginu pro Eclipse.
Obr. 5. Práce na návrhu v Adobe Photoshop
3.1.2
Rozložení obsahu do více aktivit
Vzhledem k rozsahu aplikace bylo třeba oddělit informace, které uživatel chce zobrazit od zbytku informací, které ho až tolik nezajímají. Proto byla aplikace rozložena na tři „podprogramy“ které se v Androidu označují aktivity. Aktivita Jidelnicek – pro uživatele hlavní část, kde bude zobrazován obsah jídelníčku. Aktivita Nastaveni – obrazovka kde uživatel může nastavit automatické stahování atd. Aktivita Info – bude sloužit pro informace o aplikaci.
Obr. 6. Android Manifest – rozložení aktivit
3.1.3
Adresářová struktura aplikace
Vývojové prostředí Eclipse při vytvoření nového projektu samo vytvoří základní adresářovou strukturu, kterou je dále třeba rozšiřovat dle potřeb daného projektu. Pro jídelníček stačilo základní rozložení do následujících adresářů: -
src - složka určená pro balíčky, které dále obsahující jednotlivé zdrojové *.java soubory
-
gen - složka se soubory generovanými kompilátorem
-
assets - složka, ve které mohou být podpůrné soubory aplikace jako zvuky, obrázky atd.
-
bin - složka obsahující přeložené části programu
-
libs - složka pro knihovny
-
res -
složka pro soubory s GUI, soubory obsahující informace o stylech, obrázky,
rozměry a další podpůrné soubory
Obr. 7. Kořenový adresář projektu
3.2
Návrh struktury kódu 3.2.1
Základní návrh kódu
Celý kód aplikace je tvořen třemi soubory pro tři aktivity. Hlavní část programování se odehrává v souboru Jidelnicek.java, který odpovídá aktivitě Jidelnicek. V kódu je nutné obstarat načtení všech částí GUI, načíst všechny uložené data a dle rozhodovacího stromu zkontrolovat aktuálnost jídelníčku a poté stáhnout, případně pouze načíst jídelníček a zobrazit jeho prvky v GUI. Dále je třeba obstarat menu aplikace, propojit přes něj všechny aktivity a nakonec obstarat reakce na změnu týdne. 3.2.2
HTML parser
Jedna z klíčových částí aplikace, které se stará o stažení HTML souboru ze školních stránek a získání HTML tabulky obsahující jídelníček. Po prvotním neúspěchu s vlastním HTML parserem byla použita rozšířená open source knihovna JSOUP, která se o celý problém velmi elegantně postarala. Výstupem je objekt typu String s požadovanou HTML tabulkou, ovšem bez HTML tagů.
Obr. 8. Použití parseru JSOUP
3.2.3
Rozdělení jídelníčku na jednotlivé elementy
Výkonově nejnáročnější část, protože je nutné zhruba 4000 znaků dlouhý jídelníček rozložit na dva týdny, které se následně rozloží na dny a ze dnů se získají jednotlivé prvky. Celý tento proces se musí vykonávat asynchronně vůči hlavnímu vláknu aplikace, jinak totiž dochází k několik sekund dlouhému „zamrznutí“ aplikace.
Obr. 9. Rozdělení jídelníčku na jednotlivé elementy 3.2.4
Práce s časem
V aplikaci je třeba pracovat s aktuálním datem kvůli zobrazení aktuálního dne a s týdnem v roce kvůli automatickým aktualizacím. Využívá se zde vnitřní Java třídy Calendar, která nabízí funkce přesně dle potřeb aplikace.
Obr. 10. Zjištění aktuálního data a týdne v roce
3.2.5
Práce se soubory
Protože cílem je funkčnost jídelníčku i offline, bylo třeba zajistit ukládání staženého obsahu do vnitřní paměti a jeho zpětné načítání. Kvůli uživatelskému nastavení a automatickým aktualizacím se musí ukládat i tyto dodatečné parametry.
Obr. 11. Ukládání dat
4 ZHODNOCENÍ DOSAŽENÝCH VÝSLEDKŮ 4.1
Splněné cíle
Na začátku tohoto projektu bylo stanoveno několik cílů: -
jednoduchý a moderní vzhled
-
zobrazení jídelníčku na oba týdny
-
funkčnost offline
-
automatické aktualizace
-
možnost změnit vzhled
Splnění některých bylo velmi komplikované, hlavně proto, že ve skutečnosti jsou mnohem obtížnější než by se mohlo zdát. Splnění jiných bylo spíše za odměnu, protože celou aplikaci významně vylepšily, ale co je hlavní – byly splněny všechny na začátku stanovené cíle. Díky tomu aplikace tvoří funkční celek, který nedávno dosáhl dalšího neoficiálního cíle - umístění na Google Play. Kvůli umístění v oficiálním Android obchodu s aplikacemi si již Jídelníček SŠIEŘ našel cestu k bezmála padesáti uživatelům a počet snad bude do budoucna narůstat.
Obr. 12. Jídelníček SŠIEŘ na Google Play
4.2
Obtížné části kódu
Pravděpodobně nejobtížnější částí kódu celé aplikace byla asynchronní vnitřní třída, která se stará o volání náležitých funkcí, které je třeba vykonávat na pozadí. Během činnosti této třídy se na popředí displeje zobrazuje dialog, který uživatele informuje o probíhající činnosti. Volá se zde funkce pro načtení obsahu uloženého jídelníčku, pokud není žádný uložený, je zde funkce, která ho stáhne a následně uloží. Vykonává se zde cyklus pro rozdělení jídelníčku na jednotlivé elementy. Před spuštěním této třídy je třeba inicializovat dialog, který informuje uživatele a po dokončení je třeba tento dialog vypnout, nastavit připravený obsah jídelníčku do GUI a zavolat funkci pro zobrazení aktuálního dne.
Obr. 13. Asynchronní vnitřní třída
5 PŘÍRUČKA UŽIVATELE 5.1
Požadavky pro správnou práci a chod aplikace 5.1.1
Základní požadavky pro spuštění
Kvůli nutnosti používat systémové API, které nejsou dostupné od první verze systému, je pro spuštění aplikace nutné mít smartphone, nebo tablet s operačním systémem Android 2.2 Froyo a vyšší, doporučený systém je Android 4.0 Ice Cream Sandwitch. Ovládání je přizpůsobené k používání s dotykovým displejem, s doporučeným rozlišením 480x800 a vyšším. Aplikaci je možné plně používat i pouze pomocí hardwarového D-padu, nebo trackballu a systémových kláves. 5.1.2
Systémové požadavky
Kvůli kontrole jestli je zařízení online, aplikace vyžaduje povolení pro zjištění stavu připojení. Aby bylo možné stáhnout HTML soubor s jídelníčkem, aplikace vyžaduje systémové povolení přístupu k internetu. Dále kvůli ukládání obsahu do paměti je třeba povolení pro zápis do paměti, se kterým je od API verze 4 spojené také povolení pro zjištění stavu telefonu. Uživatel s těmito požadavky souhlasí při potvrzení instalace a je na ně upozorněn.
Obr. 14. Systémové požadavky aplikace
5.2
Používání aplikace 5.2.1
První spuštění aplikace
Aplikace, která je čerstvě stažená v zařízení, zatím neobsahuje žádný jídelníček. Jakmile je dokončena instalace a aplikace se poprvé spustí, zapne se automatické první stažení. Pokud je zařízení při prvním spuštění aplikace offline, uživatel je o tom informován. Pokud je uživatel online, zobrazí se oznámení o stahování dat a poté se načte jídelníček.
Obr. 15. Oznámení uživateli 5.2.2
Procházení jídelníčku
Uživatel jednotlivé dny prochází posouváním prstu po displeji, tzv. swipem. Dny jsou řazeny z leva do prava, tak jak jdou v týdnu, aby bylo celé prostředí intuitivní. K procházení dnů je možné využít také D-padu, nebo trackballu. Pro volbu týdne slouží dvě horní tlačítka, defaultní vybraný je Tento týden.
Obr. 16. Procházení aplikace swipem
5.2.3
Tlačítko menu a nastavení aplikace
Pro otevření menu aplikace slouží tlačítko ve spodním pravém rohu, případně hardwarové tlačítko menu. Po jeho stisknutí se uživateli zobrazí nabídka, ve které může aktualizovat stažený jídelníček, přejít do nastavení, nebo přejít na stránku s informacemi o aplikaci. V nastavení je možné zapnout automatické aktualizace a vybrat si vzhled aplikace.
Obr. 17. Menu a nastavení aplikace 5.2.4
Informace o aplikaci
Část věnovaná informacím o aplikaci a jejím vývoji od raných počátků až do poslední zveřejněné verze. Je zde název aktuální verze, jméno autora a changelog aplikace popisující změny od první zveřejněné verze .
Obr. 18. Informace o aplikaci
5.3
Detail jednotlivých prvků aplikace 5.3.1
Tlačítka pro volbu týdne
Od horního okraje obrazovky jde o první prvek, se kterým se uživatel setká. Vybraný týden je podtržen tlustou modrou čarou a má světlejší pozadí. Defaultní hodnota je Tento týden.
Obr. 19. Tlačítka pro volbu týdne ve dvou barevných variantách 5.3.2
Detail dne
Každý den se skládá ze čtyř částí: název dne a datum, snídaně, oběd a večeře. Z těchto čtyř částí se oběd dále dělí na polévku, nápoj, volbu 1 a volbu 2. Vzhledem k tomu, že volba 2 nemusí být na jídelníčku každý den uvedena, nadpis se v tomto případě skryje a zůstane zobrazena pouze volba 1. Veškeré prvky dne jsou uloženy v posuvném scrollview, aby se veškerý obsah vlezl i na displeje s nízkým rozlišením, případně pro zobrazení na šířku.
Obr. 20. Detail dne ve dvou barevných variantách
5.3.3
Tlačítko menu
Poslední prvek v aktivitě Jídelníček je tlačítko menu v pravém dolním rohu. Jeho stisk doprovází zesvětlení pozadí tlačítka a vysunutí nabídky ze spodního okraje obrazovky. Nabídka překrývá samotné tlačítko a pro její zrušení je zapotřebí zmáčknout systémovou šipku zpět. Detail tlačítka menu ve dvou barevných provedeních je možné vidět na obrázku 18. 5.3.4
Prvky aktivity Nastavení
V nastavení jsou pouze dva prvky, jedním z nich je dobře známý checkbox u automatických aktualizací, ve kterém se po kliknutí objeví šipka. Druhým prvkem je radio button list pro výběr vzhledu aplikace, po jehož kliknutí se otevře seznam obsahující témata aplikace, z nichž jde vybrat pouze jedno.
Obr. 21. Prvky aktivity nastavení 5.3.5
Prvky aktivity Info
Aktivita Info je jediná aktivita, která neobsahuje žádné interaktivní prvky, pouze je veškerý obsah uložen v posuvném scrollview, aby zde bylo dostatek prostoru pro zobrazení všech informací. Detail aktivity Info je možné vidět na obrázku 16.
6 SHRNUTÍ Jídelníček SŠIEŘ je aplikace, která je již téměř rok ve stádiu vývoje, ale ten stále není u konce. Od vzniku úplně první verze nad ním autor strávil nespočetně mnoho hodin, prošel bezmála desítkou vylepšení a dvakrát kompletním přepsáním kódu. Hlavním problémem vývoje Android aplikace, je vývoj samotného systému, který letí raketovým tempem nahoru a výrobci chrlí stovky, ne-li tisíce zařízení, které je každé v jistém ohledu unikátní. Díky tomu vzniká spousta problémů s kompatibilitou aplikací, které vývojářům komplikují život. Naštěstí Jídelníček nepatří mezi nejnáročnější projekty, takže největší problém, na který autor při vývoji narazil, byla absence potřebných vědomostí v dané problematice. Z těch technických problémů to byly především problémy s plynulostí aplikace, s nedostatkem operační paměti a s absencí hardwarového tlačítka menu na některých telefonech. Čas naštěstí všechny tyto chyby pomohl vyřešit a tak je poslední verze aplikace zatím bez známých technických problémů. Do budoucna autor plánuje pokračovat ve vývoji aplikace a první z dalších vylepšení by měl být widget aplikace, což je něco na způsob miniaplikace na plochu. Vzhledem k tomu, že aplikace již má své uživatele, otázka dalšího vývoje bude směřovat na ně a z autorovy strany bude snaha aplikaci vylepšovat k maximální spokojenosti uživatelů. Jídelníček SŠIEŘ ovšem není sám, od začátku února 2013 má svého „bratra“ v podobě Jídelníčku SRŠ Vodňany, což je obdobná aplikace připravená pro Střední Rybářskou Školu Vodňany a rozšiřování na další střední a vysoké školy je v plánu, počítaje se středními školami v regionu Valašsko.
SEZNAM OBRÁZKŮ Obr. 1. Eclipse Juno ............................................................................................................... 8 Obr. 2. Nástroj pro tvorbu GUI.............................................................................................. 9 Obr. 3. Android SDK Manager ............................................................................................ 10 Obr. 4. Adobe Photoshop CS3 ............................................................................................. 10 Obr. 5. Práce na návrhu v Adobe Photoshop ....................................................................... 11 Obr. 6. Android Manifest – rozložení aktivit....................................................................... 12 Obr. 7. Kořenový adresář projektu....................................................................................... 13 Obr. 8. Použití parseru JSOUP ............................................................................................ 14 Obr. 9. Rozdělení jídelníčku na jednotlivé elementy ........................................................... 15 Obr. 10. Zjištění aktuálního data a týdne v roce .................................................................. 15 Obr. 11. Ukládání dat ........................................................................................................... 16 Obr. 12. Jídelníček SŠIEŘ na Google Play.......................................................................... 17 Obr. 13. Asynchronní vnitřní třída ....................................................................................... 18 Obr. 14. Systémové požadavky aplikace ............................................................................. 19 Obr. 15. Oznámení uživateli ................................................................................................ 20 Obr. 16. Procházení aplikace swipem .................................................................................. 20 Obr. 17. Menu a nastavení aplikace ..................................................................................... 21 Obr. 18. Informace o aplikaci .............................................................................................. 21 Obr. 19. Tlačítka pro volbu týdne ve dvou barevných variantách ....................................... 22 Obr. 20. Detail dne ve dvou barevných variantách .............................................................. 22 Obr. 21. Prvky aktivity nastavení......................................................................................... 23
