MATURITNÍ PRÁCE. Dokumentace. Inventární systém. Knapo Dominik. Školní rok: 2013/2014 Obor: Elektronické Počítačové Systémy

Transkript

1 MATURITNÍ PRÁCE Dokumentace Inventární systém Knapo Dominik Školní rok: 2013/2014 Obor: Elektronické Počítačové Systémy Třída: PS4.

2

3 Nejprve bych chtěl poděkovat svému vedoucímu práce, Bc. Martinu Kovářovi, za přijetí mé práce pod své vedení, dále za poskytnuté konzultace a pomoc při tvorbě této maturitní práce. Chtěl bych také poděkovat svým přátelům za psychickou podporu při tvorbě samotné práce a také této dokumentace, zvláště pak Kamilu Jurkovi za korekturu chyb. Prohlašuji, že odevzdaná verze dokumentace maturitní práce a verze elektronická, nahraná do systému MATPRAC, jsou totožné. Při zpracování jsem vycházel z informačních zdrojů uvedených v seznamu na konci dokumentace a také prohlašuji, že je tato práce původní. Podpis žáka

4 ABSTRAKT Autor se v této práci zabývá tvorbou aplikace pro zařízení s operačním systémem Android. Aplikace se stará o inventury, výdaje a příjmy jednotlivých přidaných podniků. Každý podnik je možno spravovat přes tři inventární knihy, které obsahují vždy své funkce pro zpracování dat z databáze. Pro vytvoření aplikace bylo využito programu Android Developer Tools běžícího pod záštitou vývojového prostředí Eclipse společně s kompilátorem webového kódu, PhoneGap. Jako nadstavba kompilátoru je použito nového frameworku vyvinutého společností Intel, Intel Framework 2.0.

5 OBSAH ÚVOD CÍLE PRÁCE VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ Programovací Jazyk Intel s App Framework Eclipse Android Developer Tools PSPad PhoneGap / Cordova Reálné zařízení ZPŮSOBY ŘEŠENÍ A POUŽITÉ POSTUPY Nastudování zadání práce Podklady pro vypracování Tvorba ikonky Založení a vygenerování projektu Struktura projektu Zdrojové kódy aplikace Index.html Hlavička Základní tělo projektu Javascriptové funkce Vyskytnuté problémy při programování Testování aplikace ZHODNOCENÍ DOSAŽENÝCH VÝSLEDKŮ Splněné cíle Nesplněné cíle... 19

6 5 PŘÍRUČKA UŽIVATELE Verze operačního systému Instalace aplikace První použití aplikace Přidání baru (podniku) Přidání produktu Nastavení Záložka Produkty Záložka Bary Záložka týdne SHRNUTÍ SEZNAM POUŽITÝCH INFORMAČNÍCH ZDROJŮ SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK SEZNAM OBRÁZŮ SEZNAM PŘÍLOH... 31

7 ÚVOD Aplikace je navržena jako inventární systém pro barové podniky, které mají možnost spravovat příjmy a výdaje za jednotlivé týdenní období. Pro tvorbu Inventární aplikace se autor rozhodl po konzultaci se zaměstnavatelem a vlastníkem řetězce podniků, pro které je tato aplikace určena. Po dohodě se zaměstnavatelem byla tato práce navržena a následně schválena vybraným vedoucím jako maturitní téma. Dle autora byla nejtěžší část této práce navržení základních dotazovacích funkcí pro práci s databází v jazyce Javascript. Mezi další náročnější úkony práce patřilo vytvoření systematického rozvržení celé aplikace, pro její správnou a optimalizovanou funkci v systémovém jádru systému Android. K naprogramování aplikace byl vybrán program Android Developer Tools, který umožňuje snadnou kompilaci s přidaným kompilátorem PhoneGap. Program umožňuje kontrolu výstupu konzolového logu přímo z připojeného či virtualizovaného zařízení s operačním systémem Android. Přestože program lze využít jako editor kódu, autor se rozhodl využívat program pouze ke kompilaci a kontrole konzolových dat. K programování byl vybrán uživatelsky přívětivější program PSPad. 6

8 1 CÍLE PRÁCE Cílem této práce je tvorba aplikace pro operační systém Android. Aplikace se bude starat o kontrolu inventury, výdajů a příjmů. V aplikaci budou implementované inventární knihy, které budou mít své funkce. Vytvořte aplikaci pro operační systém android Navrhněte strukturu databáze, která bude společná pro všechny podniky Implementujte možnost přidání podniků Implementujte inventární knihy s požadovanými funkcemi Implementujte funkce pro práci s databází (výčty vstupních dat a položek pro případné vytištění všech inventárních knih) 7

9 2 VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ 2. 1 Programovac í Jazyk Jako programovací jazyk pro tuto aplikaci byl zvolen stále se rozšiřující a vyvíjející jazyk Javascript. Jedná se o multiplatformní, objektově orientovaný jazyk, který se převážně používá k vývoji interaktivních webových stránek. K použití tohoto jazyka se autor rozhodl na základě předchozích zkušeností se syntaxí a funkcemi. Jako podpora při programování byl použit framework a API vyvíjené společností Intel, Intel s App Framework Intel s App Framework 2.0 App Framework se skládá ze tří částí, (App Framework, AF UI, Pluginy) které společně tvoří v současné době nejrychlejší a zároveň nejmenší knihovny pro vývoj mobilních aplikací v jazyce Javascript. Framework využívá výhod nových funkcí prohlížečů a podporuje platné W3C CSS selektory. Obr. 1. : App Framework UI 2. 3 Eclipse Eclipse je open source vývojové prostředí, které je určeno primárně k programování v jazyce Java. Vývojové prostředí je však díky množství přídavných pluginů možno rozšířit o podporu více jazyků. V základní verzi Eclipse však neobsahuje podporu pro grafický návrh aplikací. Vývojové prostředí však nabízí pomocí pluginů modifikovat kompilátor a výstup debuggeru či konzolového výstupu. Pro tvorbu Inventárního Systému autor použil 8

10 nadstavby tohoto vývojového prostředí Android Developer Tools, nabízeného striktně pro vývoj aplikací operační systém Android Android Developer Tools Android Developer Tools (ADT) je nadstavbovým pluginem pro vývojové prostředí Eclipse. ADT využívá podpůrných programů pro kompilaci kódu, možnost vytvoření virtuálního testovacího zařízení či log pro zobrazení výstupu z debuggeru. Přestože ADT nabízí bohaté funkce a možnost rozšíření o množství pluginů, které usnadňují práci při vytváření aplikace, autor se rozhodl k využití běžnějšího textového editoru PSPad. ADT bylo použito pro kompilaci kódu a ke kontrole konzolového výstupu z debuggeru. Obr. 2. : Program Eclipse s pluginem Android Developer Tools 2. 4 PSPad Je program, vyvíjený českým programátorem Janem Fialou. Program nabízí rozsáhlé funkce pro práci s textem, proto je vhodný nejen pro programátory. Mezi přednosti programu patří zvýraznňování syntaxe jednotlivých programovacích jazyků. Autor si tento program vybral z důvodu kladných zkušeností z předchozího používání. 9

11 Obr. 3. : Textový editor PSPad 2. 5 PhoneGap / Cordova Apache Cordova či PhoneGap je multiplatformní sada rozhraní API, která umožňuje developerům mobilních aplikací přístup k nativním funkcím zařízení, jako je kamera nebo akcelerometr, pomocí programovacího jazyku Javascript. V kombinaci s frameworkem jako třeba jquery Mobile, Dojo Mobile nebo Intel s App Framework umožňuje aplikacím chytrých zařízení vyvíjet aplikace jen za použití HTML5 CSS3 a Javascriptu. V případě používání Cordova API, lze aplikaci vytvořit bez použití programovacích jazyků běžných pro vývoj v jednotlivých operačních systémech. Namísto použití těchto jazyků je užito webových technologií Díky tomu, že tyto technologie jsou podporovány v různých platformách a jsou postaveny na webových standardech, aplikace by měla být jednoduše přenositelná na jiná zařízení s žádnými nebo minimálními úpravami.[1] 2. 6 Reálné zařízení K vývoji, testování a korektuře chyb v reálném čase bylo použito mobilní zařízení s operačním systémem Android, Samsung Galaxy S II (GT-I9100). Zařízení disponuje verzí Androidu s právy root a aktivním vývojářským módem. 10

12 Obr. 4. : Samsung Galaxy S II [2] Obr. 5. : Aktivovaný vývojářský mód 11

13 3 ZPŮSOBY ŘEŠENÍ A POUŽITÉ POSTUPY Řešení a použité postupy jsou voleny na základě stanovených cílů práce zadavatele Nastudování zadání práce Autor byl seznámen se základní problematikou a požadovanou strukturou aplikace. Rozhodl se pro řešení pomocí nadstavby PhoneGap a opensource frameworku poskytovaného firmou Intel. Po nastudování byl vytvořen návrh grafického rozhraní pro aplikaci, tak aby odpovídala co nejvíce nativním aplikacím. Obr. 6. : Nativní rozvržení hlavního menu Podklady pro vypracování Jako podklady pro vypracování základního návrhu posloužila rozsáhlá dokumentace AF UI, která nabízí náhledy zdrojových kódů pro vypracování grafického vzhledu aplikace. Samotná grafická struktura AF UI je psána v HTML5. 12

14 Obr. 7. : Struktura App Framework UI[3] 3. 2 Tvorba ikonky Pro tvorbu hlavní ikonky aplikace bylo využito zkřížení dvou ikon, které byly zdarma staženy z free sekce webových stránek Ke zkřížení ikonek byl použit grafický program GIMP, který podporuje řadu funkcí pro práci s grafikou. Ikonka je tvořena ze dvou vrstev, v každé se nachází jedna ze stažených ikonek, svrchní vrstva obsahující dvě šipky byla zmenšena na poloviční velikost (32x32) a následně zarovnána do pravého dolního rohu. Poté byly vrstvy sloučeny do jedné a vyexportovány ve formátu png do jednotného návrhu finální ikonky. Formát PNG byl zvolen na základě možnosti použití alfa kanálu čili transparentnosti ikony. Obr. 8. : Vytvoření ikonky ze dvou původních 3. 3 Založení a vygenerová ní projektu Pro vytvoření projektu a případných dalších prací autor vytvořil jednoduchou aplikaci, která generuje základní zdrojové kódy nadstavby PhoneGap. Aplikace se stará o vytvoření projektu, vytvoření ikonek aplikace a smazání nepotřebných kódů. Následný vygenerovaný projekt se spouští jako nový Android projekt s existujícím kódem v prostředí ADT, ve kterém se také kompiluje. 13

15 Obr. 9. : Nový projekt z existujícího kódu 3. 4 Struktura projektu Projekt inventárního systému byl ve zkratce nazván InvSys. Struktura celého projektu je rozdělena do podložek, které obsahují jednotlivé části android aplikace. Mezi hlavní složky projektu patří assets, ve které se v podsložce www nachází celá aplikace, dále složka bin, která obsahuje zkompilované kódy v podobě InvSys.apk. Mezi další hlavní položky projektu určitě patří cordova, která obsahuje veškeré knihovny, přídavné aplikační vrstvy a kompilátor projektu. Obr. 10. : Struktura projektu InvSys 14

16 3. 5 Zdrojové kódy aplikace Zdrojové kódy aplikace se nachází, jak již bylo zmíněno v podsložce www. Tato složka obsahuje hierarchicky roztříděné podsložky v závislosti na typu souboru, tedy soubory obsahující kaskádové styly jsou uloženy v podsložce css a soubory obsahující Javascriptové kódy jsou uloženy v podsložce js. Ostatní HTML zdrojové kódy jsou obsaženy v kořenovém adresáři www Index.html V souboru index je obsažena tělo a hlavička projektu, ve které jsou obsaženy hlavní údaje projektu, jako jsou například metadata, kódování, cesty ke kaskádovým stylům a Javascriptovým knihovnám, frameworku a naprogramovanou aplikační vrstvu Hlavička Hlavička souboru obsahuje mimo cest k souborům také metadata, ve kterých je uvedeno jak se má aplikace chovat na různých zařízeních, od mobilních telefonů po desktopově orientovaná zařízení s OS Android. Do hlavičky je také přidán javascriptový kód, který se stará o obsluhu programu po startu aplikace. Javascript v hlavičce naslouchá startu aplikace, poté co se aplikace nastartuje, vytvoří se propojení s databází a je zavolána funkce ondeviceready. V této funkci jsou přidány úkony, které jsou následně vykonávány. Mezi první tyto funkce patří vytvoření databází, pokud již neexistují. Po úplném načtení UI je vykonána funkce pro schování nepotřebné patičky a následně načtení přídavných panelů z databáze. Obr. 11. : Hlavička dokumentu index.html 15

17 Základní tělo projektu Tělo projektu začíná tagem div s přidaným id afui, který se stará o přidělení kaskádových stylů samotnému dokumentu. V tomto celku se nachází podtřídy a prvky opět s určenými id, které se starají o zobrazení dat v aplikaci a jejich správné umístění. Jednotlivá menu jsou dělena do tzv. panelů, které v sobě uchovávají nahraná statická nebo dynamická data získaná z databáze. Hlavní panel zobrazovaný po startu aplikace má navíc proměnnou selected s hodnotou true. Ostatní panely lze načítat z externího souboru nebo přímo v hlavním dokumentu, případně je lze postupně připínat ke statickým tagům s určeným id pomocí Javascriptové funkce append. V případě že je nutné pozměnit název titulku, lze tohoto docílit dvěma způsoby a to buď umístěním do panelu proměnnou title s hodnotou, kterou chceme zobrazovat nebo pomocí tagu header, ve kterém přidáme tag h1 opět s hodnotou, která bude zobrazována. Rozdíl mezi těmito dvěma způsoby je v možnosti do tagu header přidávat více tagů s různými funkcemi. Obr. 12. : Panel s tagem header pro změnu title Javascriptové funkce Všechny hlavní funkce programu jsou obsaženy v souboru inv.sys.index.js, jedná se o autorem vytvořený soubor. Mezi hlavní funkce obsažené v tomto souboru patří databázové dotazovací modely. Tyto modely obstarávají SQL databázi, přidávání, odebírání, obnovování a výběr dat z této databáze. Každá funkce je napsána tak, aby po vykonání dotazu SQL obnovila data v určených panelech UI. Mezi nejsložitější funkce se řadí výběr z databáze. Tato funkce je navržena tak, aby každý řádek z databáze, který vybere, přiřadila do pole, které je následně pomocí funkce push přiřazeno do pole dalšího. Tímto vzniká dvoudimenzionální pole, které je následně převedeno na JSON řetězec a uloženo do lokálního uložiště, se kterým je dále pracováno. 16

18 Obr. 13. : Funkce pro vybrání z databáze produktů 3. 6 Vyskytnuté problémy při programová ní Při vytváření aplikace se autor setkal jen s jedním větším problémem a to právě u funkce pro výběr z databáze. Problém se vyskytoval při navrácení dat z této funkce. Jelikož se jedná o funkci, která má další podfunkce, které využívá pro zjednodušení úkonu, nebylo možné navracet data zpětně pomocí proměnné. Nepodařilo se však navracet data ani z globální proměnné, proto se autor rozhodl k využití lokálního uložiště. Lokální uložiště však přijímá pouze data v podobě textového řetězce, proto je nutné tato data převést do formátu JSON a teprve poté uložit v lokálním uložišti. Při výpisu dat je nutné data opět převést z formátu JSON. Jako jeden z dalších problémů se ukázalo být přepisování dat v panelech, v případě, že byla data v databázi obnovena, je zavolána funkce, která tato data přepíše také v určitém panelu. Problém se podařilo vyřešit dvojitým zavoláním funkce. Toto řešení však není plně optimální a tak se jim autor bude i nadále v budoucnu zaobírat. Problém, který se však vyřešit nepodařilo, je vytištění inventárních knih. Naneštěstí PhoneGap nenabízí žádné rozšíření, které by bylo schopné komunikovat s tiskárnou, proto byl autor nucen od tohoto bodu práce upustit. Druhým problémem, který nebyl autor schopen vyřešit je dynamické vykreslování grafiky. V aplikaci je občas problém s posunem některých inputů, vykreslovací jádro poté nezvládá správně vykreslit rámečky a vznikají nevzhledné posuny mezi čárami rámce. V tomto 17

19 případě se jedná o vykreslovací jádro PhoneGapu, do kterého však autor nemá přístup, proto zůstává tento problém nevyřešen. Obr. 14. : Chybné vykreslení rámce 3. 7 Testování aplikace Testování aplikace probíhalo na reálném mobilním zařízení s OS Android. O kompilaci a výstup se stará vývojové prostředí Eclipse společně s ADT, které nabízí přehledný konzolový log pro potřebný debugging. Jelikož se jedná o aplikaci používající webové technologie, je možnost zobrazení také ve webovém prohlížeči, kde však nelze používat funkce nadstavby PhoneGap. Pro jednodušší debugging autor využil opensource funkci dump, naprogramovanou v souboru inv.sys.debug.js. Funkce dump slouží k rozkouskování vloženého objektu, pole nebo řetězce, který následně vypíše do logu. Obr. 15. : ADT se spuštěným konzolovým logem 18

20 4 ZHODNOCENÍ DOSAŽENÝCH VÝSLEDKŮ 4. 1 Splněné cíle Vytvořte aplikaci pro operační systém Android Navrhněte strukturu databáze, která bude společná pro všechny podniky Implementujte možnost přidání podniku Implementujte inventární knihy s požadovanými funkcemi Implementujte funkce pro práci s databází 4. 2 Nesplněné cíle Zajištění případného vytištění všech inventárních knih 19

21 5 PŘÍRUČKA UŽIVATELE 5. 1 Verze operačního systému Aplikace InvSys je tvořena pro Android 4.0 a vyšší. Je potřeba dbát na tuto skutečnost, kompatibilita s nižšími verzemi není zajištěna avšak ani vyloučena Instalace aplikace Pro první použití aplikace je potřeba instalace, tudíž je potřeba zajistit přenesení InvSys.spk do zařízení, například pomocí Bluetooth čí přes USB kabel. Poté co byl balíček apk přetažen do zařízení, jej pomocí interního file manageru najdeme ve složce, do které jsme jej umístili. Pro instalaci stačí InvSys.apk pouze otevřít. Aplikace se nainstaluje sama. Po instalaci aplikaci najdeme v menu svého zařízení. Obr. 16. : Nainstalovaná aplikace 20

22 5. 3 První použití aplikace Po instalaci aplikaci otevřeme kliknutím na její ikonu. Před námi se zobrazí menu, ve kterém nalezneme položky pro správu Inventárního systému. Inventární systém nabízí možnost přidání barů, které následně naleznete v záložce Bary. Případně přidání produktů, které po přidání naleznete v záložce Produkty. V případě, že vám nesedí temné prostředí aplikace, je možnost jeho změny v záložce Nastavení. Pokud se chcete dozvědět více O Aplikaci, je možnost nalézt tyto údaje ve stejnojmenné záložce. V celé aplikaci jsou v levém horním rohu přítomny šipky Zpět pro navrácení na předchozí stránku Přidání baru (podniku) Pro přidání podniku klikneme v menu na záložku Přidat bar, v této záložce naleznete pouze jedno textové pole, do kterého po kliknutí můžete vepsat název vašeho podniku. Po napsání jména klikněte na tlačítko Přidat, tím přidáte váš podnik do databáze. Po přidání vyskočí hláška, potvrzující, že opravdu k přidání do databáze došlo. V případě, že chcete přidání podniku zrušit, klikněte na tlačítko Zrušit, případně na šipku Zpět v levém horním rohu. Obr. 17. : Záložka pro přidání podniku 21

23 5.3.2 Přidání produktu K přidání produktu do databáze, se dostanete přes záložku v hlavním menu, Přidat produkt, po kliknutí na tuto záložku se zobrazí formulář se třemi textovými poli. Pro přidán produktu je tedy nutné znát jeho název, cenu a případně množství. Cenu do pole uvádějte pouze číselně! Množství slouží pro informaci, můžete vepsat například 100g nebo 0,75l v jakém formátu množství zadáte, je jen na vás. Aby se produkt do databáze přidal, je nutné kliknout na tlačítko Přidat. O tom, že byl produkt přidán, budete informováni varovnou hláškou. V případě, že chcete přidání produktu zrušit, klikněte na tlačítko Zrušit nebo případně na šipku Zpět v levém horním rohu. Obr. 18. : Přidání produktu do databáze 22

24 5.3.3 Nastavení V případě, že nejste spokojeni s temným zobrazením aplikace, je možnost v záložce Nastavení změnit vzhled kliknutím na záložku Změnit vzhled. Obr. 19. : Světlý vzhled aplikace Záložka Produkty Po kliknutí v hlavním menu na záložku Produkty, se zobrazí výčet produktu zapsaných v databázi. Po kliknutí na jednotlivé položky se zobrazí možnost editace produktu. Textová pole jsou stejná jako u přidání produktu. V případě, že chcete produkt editovat, pozměňte patřičná data v textových polích a klikněte na tlačítko Editovat. O provedení editace vás informuje hláška. Produkt [jméno produktu] byl editován!. V případě že chcete produkt smazat, je pod formulářem tlačítko Smazat pro vymazání z databáze, smazání však musíte potvrdit Pro zrušení editace klikneme v levém horním rohu na šipku Zpět. 23

25 Obr. 20. : Zobrazení přidaných produktů Obr. 21. : Editace produktu 24

26 5.3.5 Záložka Bary V záložce Bary, naleznete přidané podniky z databáze. Přes tyto záložky podniků, se dostanete k výpisu jednotlivých inventárních týdnů. Po kliknutí na Přidat Týden se přidá k záložkám nový týden. V jednotlivých týdnech naleznete inventární knihy FAS, HAUS a Inventura. Obr. 22. : Záložka baru Klub Kotva" Záložka týdne Každá záložka týdne obsahuje jednotlivé inventární knihy (HAUS, FAS a Inventura), ve kterých je možno dynamicky přidávat produkty. Uživatel si tak může vést jednotlivé vydané a přijaté položky do podniku. Na stejném principu funguje také Inventární kniha, do které uživatel vkládá produkty na základě jejich inventury v podniku. Do budoucna se plánuje v aplikaci zprovoznění jednoduchého ekonomického systému, který se podle požadavků přizpůsobí uživateli. 25

27 Obr. 23. : Ukázka záložky 1. Týden Obr. 24. : Ukázka inventární knihy HAUS 26

28 6 SHRNUTÍ Aplikace inventárního systému byla navržena, aby mohla být použita v praxi pro malé podniky či bary. V praxi bude používána pro řetězce malých barů, ve kterých poslouží k přehlednosti vydaného, prodaného, nakoupeného a zbylého zboží. Naprogramování aplikace zabralo nemalé množství času, které však již jen z učebního hlediska může být zúročeno v budoucnu. Začátku programování předcházelo naučení se syntaxí a funkcí, které poskytuje nadstavba PhoneGap a Intel App Framework. Tyto znalosti se dají využít pro pokračování ve vývoji aplikace. Vývoj aplikace bude i nadále pokračovat podle požadavků zadávajícího práce. Do budoucna bude implementován malý ekonomický systém, který bude dále zpracovávat data umístěna v databázi. 27

29 SEZNAM POUŽITÝCH INFORMAČNÍCH ZDROJŮ [1] Apache Cordova [online] [cit ]. Dostupné z: [2] Samsung Galaxy S II GT-I9100 [online] [cit ]. Dostupné z: [3] App Framework User Interface [online] [cit ]. Dostupné z: [4] INTEL. Intel's App Framework 2.0 [online] [cit ]. Dostupné z: [5] ADOBE SYSTEMS INC. PhoneGap [online] [cit ]. Dostupné z: [6] STACK EXCHANGE. StackOverflow [online] [cit ]. Dostupné z: [7] HTML5 Input Types. W3Schools.com [online] [cit ]. Dostupné z: 28

30 SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK API Application Programming Interface App UI AF UI HTML CSS W3C ADT SQL JSON USB APK Application User Interface App Framework User Interface HyperText Markup Language Cascading Style Sheets The World Wide Web Consortium Android Developer Tools Structured Query Language JavaScrip Object Notation Universal Seriál Bus Android Application Package 29

31 SEZNAM OBRÁZŮ Obr. 1. : App Framework UI... 8 Obr. 2. : Program Eclipse s pluginem Android Developer Tools... 9 Obr. 3. : Textový editor PSPad Obr. 4. : Samsung Galaxy S II [2] Obr. 5. : Aktivovaný vývojářský mód Obr. 6. : Nativní rozvržení hlavního menu Obr. 7. : Struktura App Framework UI[3] Obr. 8. : Vytvoření ikonky ze dvou původních Obr. 9. : Nový projekt z existujícího kódu Obr. 10. : Struktura projektu InvSys Obr. 11. : Hlavička dokumentu index.html Obr. 12. : Panel s tagem header pro změnu title Obr. 13. : Funkce pro vybrání z databáze produktů Obr. 14. : Chybné vykreslení rámce Obr. 15. : ADT se spuštěným konzolovým logem Obr. 16. : Nainstalovaná aplikace Obr. 17. : Záložka pro přidání podniku Obr. 18. : Přidání produktu do databáze Obr. 19. : Světlý vzhled aplikace Obr. 20. : Zobrazení přidaných produktů Obr. 21. : Editace produktu Obr. 22. : Záložka baru Klub Kotva" Obr. 23. : Ukázka záložky 1. Týden Obr. 24. : Ukázka inventární knihy HAUS

32 SEZNAM PŘÍLOH Příloha č.1: CD s dokumentací, zdrojovými kódy a zkompilovanou aplikací 31