Vysoká škola ekonomická v Praze
Fakulta informatiky a statistiky Katedra informačních technologií
Studijní program: Aplikovaná informatika Obor: Informační systémy a technologie
Vývoj mobilní aplikace dle webových technologií
DIPLOMOVÁ PRÁCE
Student : Bc. Marcel Jäger
Vedoucí : Ing. Rudolf Pecinovský, CSc.
Praha
prosinec 2020
Prohlášení:
Prohlašuji, že jsem diplomovou práci Vývoj mobilní EET aplikace pomocí webových technologií zpracoval za použití v práci uvedených pramenů a literatury.
V Praze dne 6. prosince 2020 . . . Marcel Jäger
Poděkování
Děkuji vedoucímu této diplomové práce Ing. Rudolf Pecinovský, CSc. za odborné vedení této práce. V neposlední řadě bych chtěl podekovat všem, kteří mě podporovali během celého studia, především své rodině.
Abstrakt
Cílem práce je vyvinout mobilní aplikaci pomocí webových technologií a programovacího jazyka JavaScript. Vyvinutá aplikace slouží k evidenci elektronických tržeb a splňuje všechny požadavky a nařízení Ministerstva financí.
V teoretické části jsou představeny technologie a postupy, které se v současné době používají k vývoji mobilních aplikací a webových stránek.
V praktické části je pomocí těchto technologií kompletně navrhnuta a následně vyvinuta webová aplikace, která je následně převedena do formy nativní aplikace, kterou je možné provozovat na zařízení s operačním systémem Android. Tohoto cíle je dosaženo použitím frameworku Cordova, ten umožňuje převést webovou aplikaci do nativní a nabízí řadu rozšíření, které těmto aplikacím zpřístupňují přístup k funkcím, které čistě webová aplikace nenabízí. Do aplikace je implementována možnost připojení pokladní tiskárny přes rozhraní Bluetooth, pomocí které je možné tisknout daňové doklady.
Klíčová slova
Vývoj aplikace, návrh aplikace, webová aplikace, mobilní aplikace, návrh uživatelského rozhraní, vývoj JavaScript aplikace, React, EET, elektronická evidence tržeb
Abstract
The main goal of this thesis is to develop mobile application using web technologies and JavaScript programming language. The developed application is used record electronic sales and meets all requirements and regulations of the Ministry of Finance.
The theoretical part presents the technologies and procedures that are currently used to develop mobile applications and websites.
In the practical part, using these technologies, a web application is completely designed and subsequently developed, which is then converted into a native application that can be run on a device with the Android operating system. This is achieved by using the Cordova framework, which allows you to convert a web application to a native one and offers a number of extensions that give these applications access to features that a purely web application does not offer. The application implements the option of con- necting a cash register printer via Bluetooth, which can be used to print receipt.
Keywords
Application development, application design, web application, mobile application, user interface design, JavaScript application development, React, EET, electronic records of sales
Obsah.
Obsah………. ... vi
Seznam obrázků ... x
Seznam tabulek ... xii
Seznam výpisů kódu ... xiii
Seznam zkratek ... xvi
Úvod……… ... 1
Cíle práce ... 1
Důvody výběru tématu ... 2
Použité metody ... 2
Struktura práce ... 2
1 Komentovaná rešerše informačních zdrojů ... 4
2 Definice požadavků ... 5
Zákon o EET ... 5
Požadavky Finanční správy ... 6
Popis komunikace ... 6
Módy a prostředí pro odesílání datových zpráv ... 7
Struktura datové zprávy ... 8
Popis požadavků na vyvíjený software ... 10
Požadavky na funkcionalitu ... 10
Softwarové požadavky a požadavky na příslušenství ... 11
3 Mobilní aplikace ... 12
Trh mobilních aplikací ... 12
Typy mobilních aplikací ... 12
Webová aplikace ... 12
Nativní mobilní aplikace ... 13
Progresivní webové aplikace ... 14
Typ aplikace vyvíjené v této práci ... 14
Typy internetových stránek a webových aplikací ... 15
Multiple Page Application (MPA) ... 16
Single Page Application (SPA) ... 17
Kombinovaný přístup ... 18
Technologie používané pro vývoj webových aplikací ... 18
HTML (Hypertext Markup Language) ... 18
CSS (Cascading Style Sheet) ... 19
JavaScript ... 19
TypeScript ... 20
Babel…………. ... 20
Cordova ... 21
Storybook ... 23
Frameworky pro vývoj webových aplikací ... 24
Angular ... 24
Vue.js……… ... 25
React……. ... 25
4 Proces vývoje aplikací ... 30
Definice požadavků klienta ... 30
Plánování ... 30
Návrh ... 30
Vývoj ... 31
Testování a nasazení ... 31
Údržba ... 31
5 Využité nástroje ... 32
Sketch ... 32
Visual Studio Code ... 32
Webový prohlížeč Google Chrome ... 33
6 Popis vyvíjeného software ... 34
Mobilní aplikace ... 34
Prezentační webová stránka ... 34
Klientská aplikace ... 37
7 Návrh databáze ... 41
Objednávka ... 41
Podnikatel ... 42
Transakce ... 42
8 Návrh aplikace ... 43
Návrh struktury stránek aplikace ... 43
Vytvoření drátových modelů ... 45
Vytvoření grafického návrhu aplikace ... 46
9 Vývoj aplikace ... 50
API…….. ... 50
Příprava API ... 50
Komunikace mezi serverem a aplikací ... 51
Odeslání požadavku ... 52
Zpracování odpovědi ... 54
Struktura mobilní aplikace ... 55
Řešení ikon a ilustrací v aplikaci ... 56
Vektorová a bitmapová grafika ... 56
Použití SVG souboru na webové stránce ... 60
Rozdělení na stránky ... 63
Číslování verzí aplikace ... 65
Přihlášení uživatele ... 67
Proces přihlášení uživatele do aplikace ... 67
Ověření uživatelských údajů na serveru ... 68
Uchování informací o uživateli ... 68
Uložení stavu aplikace ... 70
Dialogová okna ... 72
Vytvoření a odeslání nové tržby ... 77
Uživatelské prostředí pro zadání tržby ... 77
Generování kontrolních kódů ... 80
Odeslání tržby na servery Finanční správy ... 82
Uložení tržby při nedostupném internetovém připojení ... 84
Responzivní design aplikace ... 85
Zkušební verze aplikace ... 87
10 Vytvoření Storybook dokumentace ... 89
Přidání TypeScript podpory ... 90
Přidání dalších rozšíření ... 93
Vytvoření vlastního rozšíření ... 94
11 Konverze aplikace z webové do nativní ... 99
Příprava aplikace ... 99
Příprava Cordova projektu ... 99
Přidání funkcionality nativních aplikací ... 102
Přidání Bluetooth funkcionality ... 102
Připojení Bluetooth zařízení ... 103
Seznam dostupných Bluetooth zařízení ... 103
Nastavení Bluetooth tiskárny ... 105
Tisk daňového dokladu ... 106
12 Závěr………… ... 109
Použité informační zdroje ... 111
Seznam obrázků
Obrázek 1: Diagram popisující proces komunikace. Zdroj: Finanční správa České republiky 2020 ... 7
Obrázek 2: Pokladní tiskárna a mobilní zařízení s operačním systémem Android, na kterém je provozována aplikace TvojePokladna. Zdroj: Autor ... 11
Obrázek 3: Architektura Cordova aplikace podle oficiální dokumentace frameworku. Zdroj: Cordova 2020 ... 22
Obrázek 4: Popularita frameworků dle každoročního průzkumu State of JavaScript z roku 2019. Zdroj: State of JavaScript 2019 ... 24
Obrázek 5: Struktura komponentové React aplikace. Zdroj: Holla 2019 ... 27
Obrázek 6: Porovnání popularity IDE podle průzkumu StackOverflow. Vlevo 2018, vpravo 2019. Zdroj: StackOverflow 2018, StackOverflow 2019 ... 33
Obrázek 7: Prezentační webová stránka se zkušební verzí aplikace. Zdroj: Autor ... 35
Obrázek 8: Prezentační webová stránka popisující použití aplikace při stánkovém prodeji. Zdroj: Autor ... 36
Obrázek 9: Uživatelské rozhraní klientské aplikace – stránka Přehled. Zdroj: Autor ... 38
Obrázek 10: Uživatelské rozhraní klientské aplikace – stránka Historie. Zdroj: Autor ... 39
Obrázek 11: Uživatelské rozhraní klientské aplikace – stránka Můj účet. Zdroj: Autor ... 40
Obrázek 12: Schéma databáze vyvíjené aplikace. Zdroj: Autor ... 41
Obrázek 13: Sitemap aplikace TvojePokladna. Zdroj: Autor ... 44
Obrázek 14: Drátový model aplikace TvojePokladna popisující proces přihlášení uživatele a zadání nové tržby. Zdroj: Autor ... 45
Obrázek 15: První návrh grafického uživatelského rozhraní aplikace TvojePokladna. Zdroj: Autor .... 47
Obrázek 16: Finální grafický návrh uživatelského rozhraní aplikace TvojePokladna. Zdroj: Autor ... 48
Obrázek 17: Grafický vzhled obrazovky pro nastavení vzhledu daňového dokladu. Zdroj: Autor ... 49
Obrázek 18: Rozdíl zobrazení obrázku s odlišnou hustotou obrazových bodů. Zdroj: Duggal 2019 ... 57
Obrázek 19: Ilustrace znázorňující odpojení od serveru. Zdroj: Autor ... 58
Obrázek 20: Zdrojový kód ilustrace po exportu z aplikace Sketch. Zdroj: Autor ... 59
Obrázek 21: Zdrojový kód ilustrace po optimalizaci nástrojem SVGO. Zdroj: Autor ... 60
Obrázek 22: Dialogové okno upozorňující na dostupnost nové aktualizace. Zdroj: Autor ... 66
Obrázek 23: Vzhled přihlašovacího formuláře. Zdroj: Autor ... 67
Obrázek 24: Vzhled dialogových oken. Zdroj: Autor ... 72
Obrázek 25: Vzhled dialogových oken, které vyžadují akci uživatele. Zdroj: Autor ... 73
Obrázek 26: Vzhled dialogových oken, které mají čistě informativní charakter. Zdroj: Autor ... 74
Obrázek 27: Uživatelské prostředí obrazovek pro zadání nové tržby. Zdroj: Autor ... 77
Obrázek 28: Zobrazení virtuálního daňového dokladu pomocí internetového prohlížeče. Zdroj: Autor ... 79
Obrázek 29: Historie daňových dokladů uvnitř aplikace. Zdroj: Autor ... 80
Obrázek 30: Srovnání prostředí nastavení aplikace na mobilním telefonu a tabletu. Zdroj: Autor ... 86
Obrázek 31: Srovnání prostředí pro zadání nové tržby na mobilním telefonu a tabletu. Zdroj: Autor .. 87
Obrázek 32: Grafické prostředí zkušební verze aplikace. Zdroj: Autor ... 88
Obrázek 33: Úprava vstupních parametrů (props) komponenty v aplikaci Storybook. Zdroj: Autor ... 90
Obrázek 34: Automaticky generovaná tabulka parametrů (props) aplikací Storybook. Zdroj: Autor ... 91
Obrázek 35: Rozšíření do aplikace Storybook, které upozorňuje na problematické prvky uživatelského rozhraní. Zdroj: Autor ... 94
Obrázek 36: Zobrazení vytvářeného rozšíření pro responsivní zobrazování komponent. Zdroj: Autor 95 Obrázek 37: Ikona pro přepnutí do responsivního zobrazení. Zdroj: Autor ... 98
Obrázek 38: Rozhraní pro ladění aplikací na připojeném mobilním zařízení v aplikaci Google Chrome. Zdroj: Autor ... 101
Obrázek 39: Mobilní zařízení připojené k počítači v režimu ladění. Zdroj: Autor ... 102
Obrázek 40: Dialogové okno pro výběr pokladní tiskárny. Zdroj: Autor ... 104
Obrázek 41: Nastavení parametrů tisku. Zdroj: Autor ... 105
Seznam tabulek
Tabulka 1: Tabulka hodnot datové XML zprávy, odesílané na zařízení správce daně. Zdroj: Finanční správa České republiky 2020 ... 10 Tabulka 2: Srovnání velikosti ilustrace dle formátu. Zdroj: Autor ... 58
Seznam výpisů kódu
Výpis 1: Struktura XML datové zprávy. Zdroj: Finanční správa České republiky 2020 ... 8
Výpis 2: Komponenta List. Zdroj: Autor ... 28
Výpis 3: Komponenta List s možností odebrání prvku z pole hodnot. Zdroj: Autor ... 28
Výpis 4: Komponenta FoodList obsahující logiku odebírání prvků z pole hodnot. Zdroj: Autor ... 28
Výpis 5: Struktura odpovědi od serveru. Zdroj: Autor ... 51
Výpis 6: Komponenta pro komunikaci se serverem. Zdroj: Autor ... 53
Výpis 7: Použitá komponenty pro komunikaci se serverem. Zdroj: Autor ... 54
Výpis 8: Struktura datové zprávy. Zdroj: Autor ... 54
Výpis 9: Provider pro zobrazování informačních hlášek. Zdroj: Autor ... 55
Výpis 10: Implementace provideru v globální App komponentě. Zdroj: Autor ... 55
Výpis 11: Použití komponenty zobrazující informační hlášky. Zdroj: Autor ... 55
Výpis 12: Struktura hlavní App komponenty. Zdroj: Autor ... 56
Výpis 13: Loader pro práci s inline svg soubory. Zdroj: Autor ... 61
Výpis 14: Import svg souboru do komponenty aplikace. Zdroj: Autor ... 61
Výpis 15: Použití svg souboru uvnitř komponenty. Zdroj: Autor ... 61
Výpis 16: Loader pro práci s externími svg soubory. Zdroj: Autor ... 62
Výpis 17: Import svg souboru do komponenty aplikace. Zdroj: Autor ... 62
Výpis 18: Použití externího svg souboru uvnitř komponenty. Zdroj: Autor ... 63
Výpis 19: Struktura komponenty rozdělující aplikaci na stránky. Zdroj: Autor ... 64
Výpis 20: Element odkazující na jiný HTML dokument. Zdroj: Autor ... 64
Výpis 21: Komponenta pro změnu stránky uvnitř React aplikace. Zdroj: Autor ... 64
Výpis 22: Komponenta držící data o uživateli. Zdroj: Autor ... 69
Výpis 23: Implementace provideru přidávají funkcionalitu globálního uložiště dat. Zdroj: Autor ... 69
Výpis 24: Použití globálního uložiště uvnitř komponenty. Zdroj: Autor ... 70
Výpis 25: Práce s daty uvnitř globálního uložiště. Zdroj: Autor ... 70
Výpis 26: Implementace localStorage do globálního uložiště uživatelských dat. Zdroj: Autor ... 71
Výpis 27: Struktura komponenty dialogového okna. Zdroj: Autor ... 74
Výpis 28: Komponenta obsahující logiku dialogového okna. Zdroj: Autor ... 75
Výpis 29: Komponenta uzamykající možnost posouvání obrazovky. Zdroj: Autor ... 76
Výpis 30: Použití dialogového okna uvnitř komponenty. Zdroj: Autor ... 76
Výpis 31: Funkce pro získání RSA textu. Zdroj: Autor. ... 81
Výpis 32: Získání PKP kódu. Zdroj: Autor ... 81
Výpis 33: Získání PKP kódu. Zdroj: Autor ... 82
Výpis 34: Import knihovny pro práci s EET. Zdroj: Autor ... 83
Výpis 35: Vytvoření instance třídy Receipt. Zdroj: Autor ... 83
Výpis 36: Vytvoření instance třídy Dispatcher. Zdroj: Autor ... 83
Výpis 37: Odeslání odpovědi zpět aplikaci. Zdroj: Autor ... 84
Výpis 38: Komponenta hlídající stav připojení k internetu. Zdroj: Autor ... 85
Výpis 39: Nastavení hodnoty timeout. Zdroj: Autor ... 85
Výpis 40: Definice bodu zlomu v jazyce CSS. Zdroj: Autor ... 86
Výpis 41: Konfigurace TypeScript podpory pro knihovnu Storybook. Zdroj: Autor ... 92
Výpis 42: Konfigurační soubor TypeScript určený pro Storybook. Zdroj: Autor ... 92
Výpis 43: Registrace Storybook rozšíření do aplikace. Zdroj: Autor ... 93
Výpis 44: Komponenta pro zobrazení ikony vytvářeného rozšíření. Zdroj: Autor ... 95
Výpis 45: Komponenta vykreslující jednotlivé obrazovky. Zdroj: Autor ... 96
Výpis 46: Komponenta Decorator s nově vytvořeným rozšířením. Zdroj: Autor ... 97
Výpis 47: Registrace rozšíření do aplikace Storybook. Zdroj: Autor ... 98
Výpis 48: Přidání nového rozšíření do aplikace Storybook. Zdroj: Autor ... 98
Výpis 49: Konfigurace příkazů v souboru package.json. Zdroj: Autor ... 99
Výpis 50: Konfigurace cesty k souborům v aplikaci package.json. Zdroj: Autor ... 99
Výpis 51: Import rozšíření přidávající Bluetooth funkcionalitu. Zdroj: Autor ... 103
Výpis 52: Získání seznamu dostupných Bluetooth zařízení. Zdroj: Autor ... 103
Výpis 53: Funkce pro připojení Bluetooth zařízení. Zdroj: Autor ... 105
Výpis 54: Funkce pro tisk textu pomocí Bluetooth knihovny. Zdroj: Autor ... 106
Výpis 55: Úprava funkce pro tisk textu, která před samotným tiskem odstraňuje diakritiku z textu. Zdroj: Autor ... 106
Výpis 56: Funkce pro zarovnání tisknutého textu. Zdroj: Autor ... 107
Výpis 57: Využití funkce pro zarovnání textu v aplikaci. Zdroj: Autor ... 107 Výpis 58: Funkce pro tisk daňového dokladu. Zdroj: Autor ... 108
Seznam zkratek
Zkratka Význam
Adobe Illustrator Grafický editor od společnosti Adobe, určen k práci s vektorovou grafikou. (Parrish 2013)
Adobe Photoshop Grafický editor od společnosti Adobe, určen k práci s bitmapovou grafikou. (Parrish 2013)
Android Mobilní operační systém založený na jádře Linux. Používán na
mobilních telefonech, tabletech, chytrých televizích a dalších zařízeních.
Systém je vyvinut společností Google. (Carvantes 2020)
Android Studio Vývojové prostředí určené k vývoji Android aplikací. (Rouse 2018) Angular.js JavaScript framework, který se zaměřuje na tvorbu Single Page apli-
kací. (Arora 2020)
API Rozhraní pro programování, pomocí kterého si aplikace předávají informace. (Kaďousková 2020)
ASCII Tabulka znaků anglické abecedy a dalších znaků používaných v informatice. (Computer Hope 2020)
ASP.NET Framework pro tvorbu webových aplikací a služeb. Součást .NET frame- worku. (Wiseley 2018)
Babel JavaScript kompilátor, dovoluje vývojáři využívat moderní zápis syntaxe a převádí tento kód do formy, kterou podporují starší prohlížeče.
(Johnson 2020)
Backend Část internetových stránek, která je neviditelná pro uživatele a stará se o funkčnost. Má možnost přistupovat k databázi a pomocí API tento přístup zprostředkovat frontend části aplikace. (Pastorino 2019) Base64 kódování
Kódování, které převádí binární data na posloupnost tisknutelných znaků. Umožňuje přenos binárních dat přes kanály, které dovolují přenášet pouze textové řetězce. (Li 2019)
Bluetooth
Standard pro bezdrátovou komunikaci, která propojuje dvě a více zařízení (mobilní telefon, tablet, tiskárna, sluchátka). (technology a Uy 2020)
Cache Mezipaměť, ve které jsou dočasně uložena data. Využití této mezipaměti zrychluje přístup k takto uloženým datům. (Rouse 2020)
Cookies Data uložena na zařízení uživatele. Využívají se k uchovávání informací webových stránek. (JBallin 2019)
Cordova
Framework od společnosti Adobe. Slouží k převodu webových aplikací do nativních. Framework využívá WebView komponentu. (Panangipalli 2014)
CSS Definice vzhledu a způsobu zobrazení HTML, XHTML a XML elementů.
(Backes 2019) Demoverze
Zdarma dostupná verze komerčního programu. Jedná se o verzi, které je v určitých směrech omezená a slouží pouze k vyzkoušení prodávaného produktu. (Cambridge Dictionary 2020)
DOM Document Object Model (objektový model dokumentu). Rozhraní, pomocí kterého může jazyk JavaScript přistupovat k prvkům HTML doku- mentu (elementy, tagy, atributy). (Aderinokun 2018)
Firefox Internetový prohlížeč od společnosti Mozilla Corporation. (Computer Hope 2018)
Framework Aplikační rámec, který může obsahovat podpůrné programy, knihovny, podporu pro návrhové vzory nebo doporučené postupy při vývoji. (Singh 2020)
Frontend Část internetových stránek, kterou vidí uživatel. Tato část je tvořena technologiemi HTML, CSS a JavaScript. (Pastorino 2019)
Google Chrome Internetový prohlížeč od společnosti Google. (John 2020) Google Chromium
Otevřený softwarový projekt od společnosti Google. Jedná se o jádro internetového prohlížeče, které využívají společnosti Microsoft, Opera a Amazon pro své internetové prohlížeče. (Hoffman 2018)
GPS Jednotka umožňující pomocí elektronického přijímače určit přesnou po- lohu na povrchu země. (Kyes 2020)
Hash hesla Digitální otisk textu, který po zašifrování nelze zpětně dešifrovat. Jedná se o shluk písmen a čísel. (Greenberg 2016)
Hexadecimální soustava
Číselná soustava, která je tvořena 16 znaky. Jedná se o alternativu ke dvojkové soustavě, se kterou pracují téměř všechny současné počítače.
Tato soustava je kratší a jednoduše oboustranně převeditelná do dvojkové soustavy. (Fisher 2020)
Hook (React) Komponenta, která dovoluje sdílet logiku mezi několika komponentami.
(Morgan 2020)
HTML Hypertext Markup Language. Značkovací jazyk používaný pro tvorbu webových stránek. (Backes 2019)
IDE Integrated Development Enviroment (Vývojové prostředí). Software, který zjednodušuje práci programátorů. Nabízí editor zdrojového kódu a často nástroje jako kompilátor, interpret a debugger. (Walker 2018) Index
(programování) Ukazatel neboli číselné označení pozice prvku v poli. (Computer Hope 2017)
Indexace stránek Proces, při kterém webový crawler prochází webové stránky a zaznamenává jejich obsah k sobě do databáze. (Muller 2019) iOS Mobilní operační systém vyvinut společností Apple. Je využíván
výhradně na zařízeních této značky. (Speight 2020)
Java
Objektově orientovaný programovací jazyk. Jeden z nejpoužívanějších programovacích jazyků na světě. Využívá se mimo jiné i pro vytváření aplikací pro operační systém Android. (Johari 2017)
JavaScript Událostmi řízený skriptovací jazyk. Využívá se k přidání dynamičnosti k HTML souborům. (Backes 2019)
Kompilace Převod zapsaného algoritmu v programovacím jazyce do strojového kódu. (Ghosh 2018)
Linux Open-source počítačový operační systém. (Fruhlinger 2019)
Loader (JavaScript)
Umožňuje otevřít a zpracovat soubor. Takto zpracovaný soubor může být následně zpřístupněn jazyku JavaScript. Dovoluje tedy jazyku
JavaScript přistupovat k jinak nepodporovaným typům souborů.
(DevelopIntelligence 2016)
macOS Operační systém od společnosti Apple pro stolní a přenosné počítače.
Využíván výhradně na zařízeních této značky. (LeBvre 2020)
Mikroslužba Varianta softwarové architektury orientované na služby. Aplikace jsou definovány jako soubor volně provázaných služeb. (Fowler 2014)
Mobile-first Způsob vývoje, kde je nejprve vyvinuta mobilní verze aplikace a dále při- způsobena na další zařízení s větším displejem. (Xia 2020)
Multiple Page Application
Webová aplikace, která je tvořena několika HTML dokumenty, které jsou vzájemně provázány pomocí hypertextových odkazů. (Noeteric 2016)
MySQL Systém pro správu relačních databází, vytvořen společností MySQL AB, nyní vlastněn společností Oracle Corporation. (Kinsta 2020)
NodeJS
Systém pro vytváření vysoce škálovatelných webových aplikací,
především webových serverů. Programy jsou psány v jazyce JavaScript.
Umožňuje využívat asynchronní operace pro maximalizaci výkonu.
(Patel 2018) NPM
Node Package Manager (Správce Node balíčků). Správce
JavaScriptových balíčků, který umožňuje jejich instalaci a následnou údržbu. (Nguyen 2020)
Open-source
Počítačový software, který nabízí technicky dostupný kód a zároveň legální dostupnost. V licenci tohoto software je definováno, jaká práva k tomuto software vývojář získá a jak s ním může nakládat uživatel.
(Hoffman 2017)
PHP Skriptovací programovací jazyk, určený převážně pro tvorbu dynamických internetových stránek. (Morris 2012)
Postprocesor
Odstraňuje ze zdrojového kódu zbytečné a nadbytečné vlastnosti.
Dovoluje do jazyku přidat jinak nepodporované postupy, které jsou v rámci tohoto zpracování převedeny do formy, která je srozumitelné pro cílové zařízení. (Baumgartner 2015)
Props (React) Parametry komponent, které jsou určeny pouze pro čtení. (Morgan 2020)
Provider (React)
Komponenta nacházející se na nejvyšší vrstvě struktury aplikace.
Přidává do aplikace globální funkce, které jsou přístupné v jednotlivých komponentách. (Thakur 2019)
React JavaScript framework pro tvorbu uživatelského rozhraní. Vyvíjena společností Facebook. (Arora 2020)
React Native Odnož frameworku React, která je určena pro tvorbu nativních aplikací pro mobilní zařízení. (Thinkwik 2018)
Regulární výraz Textový řetězec, který umožňuje popsat množinu slov. (Andreou 2019) REST API Způsob, jak lze vytvářet, modifikovat, číst a mazat data na serveru
pomocí jednoduchých http volání. (Buckler 2020)
SDK Software development kit. Sada vývojových nástrojů, která umožňuje vytvářet aplikace pro určité operační systémy, herní konzole a další platformy. (Kamenetsky 2020)
SEO Search engine optimization. Optimalizace internetové stránky pro vyhledávače. Soubor metod, jejichž cíl je, aby se internetové stránka zobrazovala na předních pozicích výsledků vyhledávání. (Hummel 2018) Service Workers
Část kódu, která je prohlížečem prováděna nezávisle na webové stránce.
Pomocí tohoto kódu lze posílat notifikace uživateli nebo zpřístupnit ce- lou webovou aplikaci bez nutnosti připojený k internetu. (Rajat 2020)
Single Page Application
Webová aplikace, která je tvořena pouze jedním HTML souborem. Pro následné překreslování obsahu této stránky se stará jazyk JavaScript.
(Noeteric 2016)
Sketch Grafický editor pro práci s vektorovou grafikou. Slouží primárně
k návrhu uživatelského rozhraní aplikací a webových stránek. (Bogawat 2019)
SOAP Protokol pro výměnu XML zpráv přes síť. (Cortuk 2019)
State (React) Interní stav komponenty. Ostatní komponenty k tomuto stavu nemají přístup. (Morgan 2020)
Storybook Open-source nástroj pro vytváření dokumentace a vývoj komponent uživatelského rozhraní. (Fayock 2020)
Swift
Open-source programovací jazyk od společnosti Apple. Jedná se o
kompilovaný jazyk, který je určen pro vývoj aplikací pro systémy macOS a iOS. (Shepherd 2020)
TypeScript
Open-source programovací jazyk od společnosti Microsoft. Nadstavba nad jazykem JavaScript, která jej rozšiřuje o statické typování a další atributy, které jsou známy z objektově orientovaného programování.
(Kartha 2019)
URL adresa Jedinečná adresa, podle které je možné najít internetovou stránku.
(Hughes 2018)
Visual Studio Code
Editor zdrojového kódu od společnosti Microsoft. (Cangemi 2020)
Vue.js Open-source framework pro vytváření uživatelského rozhraní. Nabízí jednoduchou implementaci do stávajících projektů. (Arora 2020) Webový crawler
Specializovaný internetový robot, který prochází internetové stránky a vytváří jejich databázi. Tato databáze následně slouží jako základ pro funkčnost vyhledávačů internetových stránek. (Haas 2019)
Webpack Nástroj pro zpracování souborů, který usnadňuje práci vývojářům.
Jedná se o kombinaci balíčkovače a spouštěče úloh. (Singh 2019)
WebView Systémová komponenta využívající technologii Chrome, která umožňuje aplikacím pro Android zobrazovat webový obsah. (Rosser 2017)
Úvod.
React.js je framework, který je založen na programovacím jazyku JavaScript. Tato knihovna nabízí možnost vývoje interaktivních uživatelských rozhraní. Vývoj pomocí tohoto frameworku probíhá tak, že jsou nejprve vytvořeny jednotlivé komponenty a následně je z těchto komponent složena výsledná aplikace. V současnosti se jedná o jednu z nejpopulárnějších knihoven pro vývoj moderních webových a mobilních aplikací, která je používaná největšími technologickými firmami na světě. (Khandelwal 2020)
Na jádru tohoto frameworku v průběhu let vzniklo několik rozšíření, které mají různé zaměření. V současné době nejpopulárnější odnož tohoto frameworku React Native slouží výhradně k vývoji nativních mobilních aplikací. Výhodou vývoje pomocí toho frameworku je, že je možné vyvíjet nativní aplikace pro mobilní operační systémy s totožným zdrojovým kódem. (Khandelwal 2020)
Při vývoji aplikace, která je tématem této práce, byla však tato varianta React frameworku ve velmi rané fázi. Tématem této práce je tedy vývoj nativní aplikace alternativní metodou. Aplikace je vyvinuta pomocí frameworku React jako čistě webová aplikace. Následně je tato webová aplikace převedena do nativní aplikace, která bude spustitelná na zařízeních s operačním systémem Android. Výsledná aplikace je tedy pro uživatele nerozeznatelná od nativních aplikací, které jsou vyvíjené klasickým způsobem.
Aplikace, jejíž výkon je v této práci popisován slouží k elektronické evidenci tržeb. Tento zákon nařizuje, aby všechny hotovostní tržby byly před vytištěním daňového dokladu odeslány na servery Finanční správy. Zavedení tohoto zákonu dostalo mnoho drobných podnikatelů do nelehké situace, jelikož spousta těchto podnikatelů do zavedení tohoto zákonu nepoužívala žádnou pokladnu. Zároveň spoustu těchto uživatelů nemá příliš velké zkušenosti s používáním informačních technologií a hlavním cílem této aplikace bylo co nejvíce pomoci těmto uživatelů a zpřístupnit jim odesílání tržeb. Aplikace by tedy měla poskytnout uživatelům jednoduché uživatelské rozhraní, které pochopí a zvládne ovládat kdokoliv.
Cíle práce
Hlavním cílem práce je navrhnout a pomocí webových technologií vyvinout aplikaci, kterou bude možné provozovat na mobilních zařízeních a využívat funkce těchto zařízení, které jsou jinak dostupné pouze nativním aplikacím. Vyvíjená aplikace je ur- čena k elektronické evidenci tržeb, a bude tisknout daňové doklady přes pokladní tis- kárnu, která je připojena přes rozhraní Bluetooth.
Tento cíl bude řešen prostřednictvím postupného řešení následujících podcílů:
● Analyzovat možnosti a trendy vývoje mobilních aplikací za pomoci webových tech- nologií.
● Navrhnout vlastní aplikaci, která vyhovuje zákonu o elektronické evidenci tržeb.
● Vytvořit dokumentaci k navrhnuté aplikaci.
Důvody výběru tématu
Hlavním důvodem výběru tématu je autorova několikaletá zkušenost a zájem o vývoj internetových stránek a webových aplikací. Zaměření vyvíjené aplikace na elektronickou evidenci tržeb je ideálním případem užití, kdy je tento způsob vývoje vhodný. Jedná se o jednoduchou aplikaci, kterou ale není možné vyvinout pouze pomocí webových technologií a je zapotřebí využít i možností, které běžně nabízejí pouze nativní aplikace. V době začátku vývoje zároveň neexistovala téměř žádná podobná aplikace a zdálo se, že by finální produkt mohl najít praktické využití pro řadu uživatelů. Cílem bylo vytvořit jednoduché řešení, které by za minimální náklady mohl využívat každý podnikatel, který již vlastní chytré zařízení s operačním systémem Android.
Použité metody
V teoretické části práce jsou využity znalosti, získané analýzou elektronických a literárních zdrojů. Praktická část práce čerpá znalosti především z oficiální dokumentace frameworku React, která bude doplněná znalosti autora, odborné články a publikace týkající se tohoto tématu. Práce využívá především znalostí z těchto odborných online zdrojů a dokumentací, jelikož se jedná o odvětví, které se neustále vyvíjí a mění.
Při vývoji aplikace bude respektována a dodržována dokumentace, která popisuje požadavky, které musí řešení k elektronické evidenci tržeb splňovat. Tato část práce má implementační charakter. Během praktické části budou využity znalosti a informace získané v teoretické části.
Primárním prostředkem k posuzování bude modelová aplikace. Na této aplikaci budou posouzeny výhody a nevýhody tohoto způsobu vývoje. Zároveň budou zdokumentovány vzniklé problémy a způsoby, jak jsou tyto problém řešeny.
Struktura práce
Úvod práce obsahuje seznámení s tématem a obsahem práce. V této části jsou představeny cíle, metody, struktura práce a komentovaná rešerše zdrojů.
Teoretická část práce se popisuje problematiku vývoje řešení pro elektronickou evidenci tržeb. V této části práce jsou detailněji přiblíženy jednotlivé technologie a nástroje použité při vývoji. Práce se rovněž v této části zabývá popisem alternativních technologií a aplikací, pomocí kterých by bylo možné problém řešit a následně odůvodňuje, proč byly vybrány použité technologie namísto konkurenčních variant.
Praktická část se zabývá nejprve návrhem aplikace, během kterého jsou vytvořeny drátové modely aplikace a na základě těchto modelů je vytvořena grafika jednotlivých komponent a obrazovek. Následně je aplikace podle tohoto grafického návrhu za pomoci webových technologií vyvinuta. V této části práce je zdokumentována především celková struktura vyvíjeného řešení a kritické komponenty a funkce, které byly při vývoji potřeba.
V závěrečných kapitolách praktické je zdokumentován převod webové aplikace do nativní pomocí nástroje Cordova. V této části práce je rovněž zdokumentována implementace funkcí, které jsou běžně dostupné pouze nativním aplikacím.
V závěrečné části je na základě zkušeností z předchozích částí zhodnocen tento způsob vývoje.
1 Komentovaná rešerše informačních zdrojů
Úvodní kapitoly této práce jsou věnovány definici mobilních aplikací a technologií, které se k vytváření těchto aplikací v současné době používají. Tato část práce čerpá znalosti z knihy Single Page Web Applications: JAVASCRIPT END-TO-END od autorů Michael S. Mikowski a Josh C. Powell. Tato kniha popisuje využití jazyku JavaScript při tvorbě jednostránkových aplikací. Jedná se o starší titul z roku 2014, ačkoliv se zápis jazyka za tuto dobu podstatně zjednodušil, tak se spousta principů popsaných v této knize používá dodnes. Kniha mimo jiné popisuje propojení jazyka JavaScript a vzdáleného serveru s databází.
V těchto úvodních kapitolách je také rozebíráno uživatelské prostředí a grafický návrh tohoto prostředí. Tato část práce čerpá znalosti z knihy Modern web development:
understanding domains, technologies, and user experience od Dina Esposita, která byla vydána v roce 2016. Tato kniha popisuje využití jazyka CSS při tvorbě responzivních uživatelských prostředí, mobile-first návrh nebo návrh REST API. Kniha tyto přístupy nejdříve rozebírá teoreticky a následně prakticky implementuje v jazyku ASP.NET. Vzhledem k značným odlišnostem jazyka ASP.NET v některých částech je proto využita především teoretická část tohoto zdroje.
Tématem vývoje aplikace pro Elektronickou evidenci tržeb se zabývala také bakalářská práce Vývoj aplikace s podporou EET pro gastro provozy od autora Marek Klimt. Téma této práce je úzce spojeno s využitím v gastro provozu a tomu odpovídají i určité funkce aplikace, které jsou v ostatních odvětvích nevyužitelné. Tato práce je z roku 2016, v době, kdy byla tato práce zpracovávána však nebyla k dispozici kompletní technická specifikace o posílání dat mezi vytvářenou aplikací a Ministerstvem financí. Aplikace vyvíjená v této práce je, vzhledem k nedostupnosti specifikace, pouze připravena k odesílání transakcí a pouze ukládá data do formátu XML. Aplikace je zároveň vyvíjena v jazyce Java a je určena pro stolní počítače a notebooky, tisk daňových dokladů probíhá pomocí klasické tiskárny. Tato aplikace zároveň nijak neřeší fázi návrhu uživatelského rozhraní a je tvořena pouze ze základních prvků operačního systému jako jsou tlačítka a textová pole.
Znalosti z těchto knih a prací jsou doplněny o odborné články a informace získané z oficiální dokumentace jednotlivých jazyků a technologií, které jsou dostupné online.
Těchto článků je využito vzhledem k jejich aktuálnosti. Ačkoliv některé principy tohoto jazyka stále zůstávají stejné, tak se jazyk JavaScript neustále vyvíjí a rozvíjí a je téměř nemožné tyto knihy udržovat aktuální.
2 Definice požadavků
Zákon o EET
Návrh zákona o elektronické evidenci tržeb byl Poslanecké sněmovně parlamentu České republiky předložen v roce 2015. V únoru následujícího roku byl tento zákon č.
112/2016 Sb. Schválen a v dubnu roku 2016 nabyl platnosti.
Podle tohoto zákonu, jsou v určitých vlnách obchodníci povinni při vystavení daňového dokladu odeslat zaúčtovanou sumu na servery Finanční správy. Skupiny podnikatelů, které musí EET využívat jsou rozděleny do skupin podle oblasti ve které podnikají.
Zákon začal platit pro první skupinu obchodníků 1. prosince 2016, tato skupina zahrnovala živnostníky podnikající v oblasti ubytování, stravování a pohostinství.
Během následujících let se zákon dotkl i dalších odvětví, poslední vlna byla zahájena 1.
května 2020 a postihla většinu výrobních odvětví, zpracovatelský průmysl, stavební činnosti a ostatní osobní služby jako jsou kadeřnictví, maserské salóny a další. (Solitea 2020)
Nutnost využívat tento systém se tak momentálně týká všech obchodníků, kteří realizují hotovostní prodeje ale i platby kartou, šeky nebo podobnými platidly. (Solitea 2020)
Jedná se o systém, od kterého si Ministerstvo financí slibuje účinnější Finanční správu a lepší výběr daní. Zároveň se tímto systémem Ministerstvo financí snaží omezit šedou ekonomiku.
Tento systém funguje na principu, kdy uživatel ze svého pokladního zařízení odešle datovou zprávu o transakci na servery Finanční správy. Systém Finanční správy odešle uživateli odpověď, které obsahuje potvrzení o přijetí s unikátní fiskálním identifikačním číslem. Pokladní zařízení na základě této odpovědi musí vytvořit a následně vytiskne daňový doklad, který obsahuje tento fiskální identifikační kód.
Obchodník předá daňový doklad zákazníkovi, kteří si jí může následně v systému Finanční správy ověřit.
Ministerstvem financí není předepsán žádný software, který je nutné k odesílání transakcí používat a jejich API je volně přístupné. To znamená, že kdokoliv může vytvořit systém pro pokladnu nebo aplikaci pro počítače, tablety a telefony.
Požadavky Finanční správy
Popis komunikace
Z pokladního zařízení zákazníka jsou odesílány jednotlivé datové zprávy na společné technické zařízení správce daně. Na tomto zařízení je vyhodnoceno, zda datová zpráva odpovídá kritické kontrole a v případě, že kontrole odpovídá tak je na zařízení správce daně uložena a zároveň je okamžitě vytvořena potvrzovací datová zpráva. Tuto datovou zprávu zařízení správce daně odešle zpět na pokladní zařízení, které odeslalo datovou zprávu evidované tržby.
Komunikace mezi těmito dvěma zařízeními tedy probíhá na principu požadavek – odpověď. Cílem zařízení správce daně je tedy ověřit správnost požadavku a odeslat zpět odpověď, která v případě správného požadavku obsahuje bezpečnostní kód poplatníka (BKP) a fiskální identifikační kód (FIK). V případě, že datová zpráva neprojde kritickou kontrolou nebo nastane technická chyba na straně technické zařízení správce daně, je pokladnímu zařízení odeslána odpověď obsahující kód chyby.
Uživatel odešle ze svého zařízení prostřednictvím internetu datovou zprávu ve formátu XML. Server Finanční správy odešle zpět na zařízení uživatele potvrzení o přijetí této zprávy a datovou zprávu zaeviduje.
Po úspěšném přijetí odpovědi od serveru Finanční správy je pomocí uživatelského zařízení vystavěn daňový doklad.
Tento daňové doklad obsahuje kontrolní kódy, pomocí kterých je kdykoliv možné tento doklad ověřit na Daňovém portále ve webové aplikaci Elektronická evidence tržeb. Diagram popisující proces komunikace je zobrazen na obrázku č. 1.
Obrázek 1: Diagram popisující proces komunikace. Zdroj: Finanční správa České republiky 2020
Módy a prostředí pro odesílání datových zpráv
Datové zprávy lze z pokladního zařízení odesílat ve dvou různých módech – ostrý mód a ověřovací mód. Tyto módy se liší nastavením parametru v hlavičce datové zprávy.
• Ostrý mód slouží k běžnému odesílání datových zpráv, tyto zprávy jsou ukládány a v odpovědi na tyto zprávy je fiskální identifikační kód.
• Ověřovací mód se od produkčního liší tím, že navíc obsahuje v hlavičce navíc příznak ověřovacího módu, který je nastaven na hodnotu true. Zprávy v tomto modu nejsou na serveru ukládány a slouží pouze k ověření správného nastavení a funkčnosti pokladního zařízení.
Pro odesílání zpráv jsou také dostupná dvě prostředí, produkční prostředí a neprodukční prostředí.
• Produkční prostředí je určeno pro poplatníky EET.
• Neprodukční prostředí je určeno pouze pro vývojáře softwaru určeného pro pokladní zařízení. Obsah datových zpráv odeslaných v neprodukčním prostředí se nijak neliší od produkčního prostředí, fiskální identifikační kód, který se nachází v odpovědi, je v neplatný. Obě tato prostředí umožňují odesílat zprávy v ostrém i ověřovacím módu.
Struktura datové zprávy
Všechny datové zprávy odesílané mezi pokladním zařízením a zařízením správce daně mají společný základní datový formát určený protokolem Simple Object Access Protocol (SOAP). Zprávy v tomto protokolu mají strukturu XML a jsou vloženy do tzv. SOAP obálky. Datová zpráva odeslaná z pokladního zařízení a úspěšná odpověď jsou pode- psány certifikátem. Chybová odpověď podepsána není.
Struktura datové XML datová zprávy je zobrazena výpisu č. 1.
Výpis 1: Struktura XML datové zprávy. Zdroj: Finanční správa České republiky 2020
Jednotlivé atributy a hodnoty této datové zprávy jsou popsány v tabulce č. 1.
Datová oblast Název položky Povinné XML klíč
Hlavička UUID zprávy Ano uuid_zpravy
Datum a čas odeslání zprávy Ano dat_odesl První zaslání údajů o tržbě Ano prvni_zaslani Příznak ověřovacího módu odesílání Ne overeni
Data DIČ poplatníka Ano dic_popl
DIČ pověřujícího poplatníka Ne dic_poverujiciho
Označení provozovny Ano id_provozovny
Označení pokladního zařízení Ano id_pokl Pořadové číslo daňového dokladu Ano porad_cis Datum a čas přijetí tržby Ano dat_trzby
Celková částka tržby Ano celk_trzba
<eet:Trzba>
<eet:Hlavicka atributy ... />
<eet:Data atributy ... />
<eet:KontrolniKody>
hodnoty ...
</eet:KontrolniKody>
</eet:Trzba>
Celková částka plnění osvobozených od DPH, ostatních plnění
Ne zakl_nepodl_dph
Celkový základ daně se základní saz- bou DPH
Ne zakl_dan1
Celková DPH se základní sazbou Ne dan1 Celkový základ daně s první sníže-
nou sazbou DPH
Ne zakl_dan2
Celková DPH s první sníženou saz- bou
Ne dan2
Celkový základ daně s druhou sníže- nou sazbou DPH
Ne zakl_dan3
Celková DPH s druhou sníženou saz- bou
Ne dan3
Celková částka v režimu DPH pro cestovní službu
Ne cest_sluz
Celková částka v režimu DPH pro prodej použitého zboží se základní sazbou
Ne pouzit_zboz1
Celková částka v režimu DPH pro prodej použitého zboží s první sníže- nou sazbou
Ne pouzit_zboz2
Celková částka v režimu DPH pro prodej použitého zboží s druhou sní- ženou sazbou
Ne pouzit_zboz3
Celková částka plateb určená k ná- slednému čerpání nebo zúčtování
Ne urceno_cerp_zuct
Celková částka plateb, které jsou ná- sledným čerpáním nebo zúčtováním platby
Ne cerp_zuct
Kontrolní kódy
Podpisový kód poplatníka (PKP) Ano pkp
Bezpečnostní kód poplatníka (BKP) Ano bkp
Tabulka 1: Tabulka hodnot datové XML zprávy, odesílané na zařízení správce daně. Zdroj:
Finanční správa České republiky 2020
Popis požadavků na vyvíjený software
Požadavky na funkcionalitu
Základním účelem a cílem aplikace je odeslání provedené tržby na servery Finanční správy. Aplikace bude nabízí možnost zadat cenu jednotlivých položek, jejich množství a vybrat kategorii položky. Po úspěšném odeslání tržby na server je vytištěn daňový doklad, který obsahuje všechny požadované kódy. V případě, že nebyla tržba úspěšně odeslána, jsou vygenerovány kódy podle požadavků technické dokumentace a následně jsou tyto vygenerované kódy vytištěny na daňový doklad. Zákon o elektronické evidenci tržeb nevyžaduje odesílat rozpis jednotlivých položek daňového dokladu. Uživatel může přes aplikaci odeslat pouze celkovou sumu, následné rozdělení na jednotlivé položky, počty kusů a kategorie jsou volitelné.
Aplikace nabízí uživatelům zobrazení historie tržeb. V této historii si je možné prohlédnout detail tržby nebo tržbu stornovat.
V nastavení aplikace bude možné nastavit parametry tisku, aby aplikace fungovala se všemi dostupnými pokladními tiskárnami. Zároveň bude možné upravit informace doplněné do záhlaví a zápatí daňového dokladu, jako je adresa provozovny a text na konci daňového dokladu.
Aplikace umožňuje uživateli přidat kategorie a rychlé volby. Kategorie slouží pouze jako textové označení položek. Rychlé volby jsou speciální typ kategorie, který obsahuje navíc cenu položky. Aplikace je doplněna o klientskou aplikaci. V této klientské aplikaci je možné zobrazit sumu tržeb. Tuto sumu je možné filtrovat dle vybraného data nebo kategorie.
Aplikace musí umožňovat vytisknout daňový doklad i v případě výpadku internetového připojení. Během nedostupnosti internetového připojení bude vytištěn daňový doklad, který bude obsahovat požadované předepsané kontrolní kódy. Tyto kontrolní kódy jsou stejné, jako v případě, kdy se nepodaří tržbu úspěšně odeslat. Aplikace musí umožňovat odeslat tržbu dodatečně při opětovném připojení k internetu, zároveň aplikace uživatele upozorní, že je potřeba neodeslané transakce synchronizovat se servery Fi- nanční správy.
Softwarové požadavky a požadavky na příslušenství
Pro provoz aplikace je potřeba mobilní zařízení s operačním systémem Android. Toto zařízení musí disponovat rozhraním Bluetooth a přístupem k internetu. Ačkoliv aplikace dovoluje vystavit daňový doklad bez připojení k internetu, tak je obchodním podle zákona povinen takto vystavený doklad do 48 hodin odeslat na servery Finanční správy a možnost účtovat bez připojení k internetu je určena pouze pro nouzové případy.
Aplikace nabízí dva různé způsoby vydávání daňových dokladů – vygenerování URL adresy s online daňovým dokladem a tisk daňového dokladu. Pro tisk daňového dokladu je potřeba specializovaná pokladní tiskárna, která nabízí možnost připojení přes rozhraní Bluetooth. Pro tisk daňových dokladů není možné využít standartní tiskárnu ani pokladní tiskárnu připojenou kabelem. Na následujícím obrázku je vidět pokladní tiskárna a tablet s operačním systémem Android, na kterém je nainstalována aplikace.
Obrázek 2: Pokladní tiskárna a mobilní zařízení s operačním systémem Android, na kterém je provozována aplikace TvojePokladna. Zdroj: Autor
3 Mobilní aplikace
Trh mobilních aplikací
Jak vyplývá z průzkumu společnosti Broadband Search, tak využívání mobilních zařízení pro přístup k internetu neustále roste. Zatímco v roce 2013 přistupovalo k internetu pomocí těchto zařízení pouhých 16.2 % uživatelů. V roce 2019 už je to více než polovina všech uživatelů internetu, přesněji 53.3 %. Je nutné podotknout, že do tohoto průzkumu jsou zahrnuty pouze mobilní telefony. Průzkum nezahrnuje další mobilní zařízení jako jsou např. tablety. (BroadbandSearch.net 2019)
Jak je z tohoto trendu patrné, tak stále více uživatelů využívá mobilní zařízení. Podle průzkumu od společnosti Statista v roce 2015 vlastnilo chytrý telefon nebo tablet 53 % obyvatel. V roce 2020 vlastní tato zařízení přibližně 68 % obyvatel. Z těchto čísel se dá usuzovat, že trh pro mobilní aplikace je nejen obrovský ale zároveň neustále roste.
(Statista 2020)
Na základě této informace se dá předpokládat, že většina podnikatelů, pro které platí zákon o elektronické evidenci tržeb už vlastní nějaké zařízení, na kterém je vyvíjenou aplikaci možné používat a je tedy pro ně méně nákladné využívat aplikaci tohoto typu než si zakoupit pokladní zařízení, které je speciálně určeno, aby vyhovovalo tomuto zákonu.
Typy mobilních aplikací
Vzhledem k rozšíření mobilních zařízení se také neustále vyvíjí trh mobilních aplikací a cest, jak tyto aplikace získávat a provozovat. V současné době existují tři hlavní kategorie těchto aplikací, které se liší nejenom způsobem vývoje ale i způsobem, jak je uživatelé používají a jaké možnosti tyto aplikace nabízejí.
Webová aplikace
Jedná se o aplikace, které nejsou nijak závislé na zařízení uživatele. Tyto aplikace nerozlišují operační systém, na kterém je aplikace provozována a jejich zdrojový kód je jednotný napříč všemi cílovými zařízeními. Aplikace je provozována uvnitř internetového prohlížeče a k fungování této aplikace tedy uživatel potřebuje pouze internetový prohlížeč a přístup k internetu. Tento typ aplikací jsou nejčastěji tvořené kombinací jazyků HTML, CSS a JavaScript. Jedná se o programovací jazyky, které nemusí být nijak kompilovány a není tak potřeba nijak upravovat zdrojový kód pro
internetové prohlížeče. To s sebou nese výrazné zjednodušení vývoje, jelikož je kód možné ihned po uložení spustit, ale i nevýhody v podobě nízkého výkonu u složitějších operací. Některé z těchto aplikací mohou být dynamické, tyto aplikace ke svému provozu vyžadují neustále fungující server, který zpracovává požadavky od aplikace.
Aplikace odesílá jednotlivé požadavky na tento server, server požadavek zpracuje a odešle aplikaci odpověď. Práce se serverem je potřeba v případě, že je potřeba k provozu aplikace získávat data z databáze, odesílat emaily nebo ověřovat informace zadané uživateli nezávisle na zařízení uživatelů aplikace.
Aplikace mohou ale fungovat i čistě jako statické aplikace. To znamená, že server slouží pouze k doručení souborů uživateli a poté se již nepoužívá. Uživateli se stáhnou všechna potřebná data při návštěvě stránky a následně se uvnitř aplikace pohybuje bez jakékoliv interakce se serverem. V současné době však většina webových aplikací je nějakým způsobem dynamická a při svém provozu vyžaduje kooperaci se serverem, jelikož i jednoduchá prezentační stránka často nabízí např. možnost odeslat email přes kontaktní formulář.
Jak již bylo zmíněno na začátku této kapitoly, tak tyto aplikace ke svému provozu potřebují pouze internetový prohlížeč a internetové připojení. To je jedna z hlavních výhod těchto aplikací, jelikož uživatel nemusí nic instalovat. Další výhoda těchto aplikací je, že uživatel vždy používá nejnovější verzi aplikace. Soubory potřebné k provozu aplikace jsou sice při první návštěvě uloženy do cache prohlížeče, ale při další návštěvě je nejprve zkontrolováno, zda se tyto soubory od poslední návštěvy nezměnily.
Pokud má uživatel v cache již nejnovější verzi souborů, tak jsou tyto soubory využity, jinak jsou staženy soubory nové a staré jsou z cache odebrány. Tento typ aplikací také nelze nelegálně stáhnout a provozovat, jelikož jsou soubory uloženy na serveru poskytovatele aplikace a bez tohoto serveru je aplikace nepoužitelná.
Jednou z posledních výhod těchto aplikací je jejich jednoduchá škálovatelnost. U webových aplikací je také možnost využít výkonu serveru a výkonově náročné operace provádět přímo na serveru, kde je možné zátěž škálovat a tyto operace provádět mnohem rychleji, než když by je uživatel prováděl přímo na svém zařízení.
Nativní mobilní aplikace
Tento typ aplikací je vyvíjen v programovacím jazyku určenému pro platformu nebo operační systém, kde bude aplikace provozována. Aplikace jsou distribuovány skrze obchod s aplikacemi na daném zařízení a aby byla aplikace do tohoto obchodu zařazena, tak musí vývojář většinou platit určitý roční poplatek.
Aplikace jsou do zařízení instalovány. Aby uživatel mohl tento typ aplikace používat, tak si jí musí nejprve do zařízení stáhnou a nainstalovat. S touto vlastností aplikací se váže i to že je aplikace potřeba verzovat. Uživatel tedy nemusí nutně používat nejnovější aplikaci a v případě že chce využívat nejnovější verzi aplikace, tak si musí
nejprve stáhnout a nainstalovat aktualizaci této aplikace. Tento typ aplikací nabízí vývojáři největší kontrolu nad výkonem aplikace. Tento typ aplikací je vhodný především pro složité aplikace anebo aplikace, které potřebují ke svému provozu vysokou optimalizaci jako jsou např. videohry. Tato kategorie aplikací se hodí také pro aplikace, které potřebují využívat některé ze systémových funkci operačního systému jako např. přístup k fotoaparátu, Bluetooth nebo GPS.
Tento typ aplikací může fungovat i bez připojení k internetu, jelikož jsou všechny soubory staženy z internetu a nainstalovány v zařízení uživatele. Značná část těchto aplikací však ke svému fungování internetové připojení i tak vyžaduje, jelikož je k jejich fungování potřeba získat informace z databáze. Toto je jeden z důvodů proč v současné době na popularitě nabírají tzv. progresivní webové aplikace.
Progresivní webové aplikace
Jedná se o jeden z trendů vývoje webových aplikací, který se snaží využít některých výhod nativních mobilních aplikací a zkombinovat je s výhodami webových. V jádru se stále jedná o webovou aplikaci, která splňuje specifické vlastnosti, které jí dovolují v jistých ohledech fungovat jako nativní aplikace.
K tomu, aby byla aplikace považována za progresivní webovou aplikaci, tak tato aplikace musí fungovat všem uživatelům stejně, tedy bez ohledu na jejich prohlížeč internetových stránek. Aplikace musí být responzivní, to znamená že musí fungovat na všech velikostech displejů. Nesmí být závislá na internetovém připojení, toho lze dosáhnout pomocí služby Service Workers, které se postarají o to, že uloží všechny potřebné soubory pro provoz aplikace do paměti zařízení a není tedy tyto soubory při další návštěvě potřeba znovu stahovat. Nakonec by také mělo být možné přidat aplikaci na domovskou stránku zařízení mezi ostatní nativní aplikace.
Ačkoliv je tedy možné tyto aplikace používat bez připojení k internetu, mají vlastní ikonu a přizpůsobují svoje uživatelské rozhraní velikosti obrazovky, tak se stále jedná o webové aplikace. Tento typ aplikací stále nemá přístup k systémovým funkcím zařízení a není v nich tedy možná např. využívat Bluetooth.
Typ aplikace vyvíjené v této práci
Aplikace vyvíjená v této práci bude kombinací všech tří typů mobilních aplikací.
Většina zdrojového kódu bude spadat do kategorie klasických webových aplikací a zároveň bude splňovat některé charakteristiky progresivních webových aplikací, jako je např. responsivní zobrazení. Vzhledem k tomu, že progresivní webové aplikace nemají k přístup k systémovým funkcím zařízení, tak se bude jednat o jakési hybridní řešení mezi progresivní webovou aplikací a nativní aplikací.
Značná část vývoje probíhá jako u klasických webových aplikací. Při vývoji jsou využity moderní webové technologie a je tedy potřeba po vývoji zdrojový kód kompilovat. Touto kompilací je dosaženo kompatibility aplikace se zařízeními, které disponují starší verzí internetového prohlížeče.
Po kompilaci však nejsou exportované soubory nahrány na webový server, jako by tomu bylo u webové aplikace ale jsou pomocí frameworku Cordova převedeny do formy nativní aplikace. Do této aplikace je následně přidána funkce přidávající podporu pro bezdrátovou komunikaci pomocí protokolu Bluetooth. Takto převedená aplikace je následně distribuována skrz obchod s aplikacemi Google Play. Jelikož se od této doby jedná o nativní aplikaci a tu nelze spustit v internetovém prohlížeči.
Typy internetových stránek a webových aplikací
Při vzniku internetu byly všechny internetové stránky velmi podobné. Jednalo se o HTML dokumenty, které obsahovaly minimum stylů psaných jazykem CSS. Tyto dokumenty byly navzájem provázány přes hypertextové odkazy. Po kliku na některý z těchto odkazů se stáhnul nový HTML dokument, který znovu obsahoval styly a další hypertextové odkazy, které odkazovaly na další a další stránky. Tento jednoduchý koncept webových stránek byl postupem času doplňován o další funkčnost, které byla do webové stránky přidána především jazykem JavaScript. Tento typ internetových stránek je nazýván Multiple Page Application. Stránky jsou tvořeny kombinací jazyků HTML, CSS a JavaScript. HTML poskytuje základní strukturu dokumentu, včetně všech textů a hypertextových odkazů na webové stránce. CSS umožňuje těmto HTML elementům přidat vizuální styl. CSS je tedy využíváno k definování layoutu, barev a celkových stylů jednotlivých elementů. JavaScript slouží k přidání dynamičnosti HTML elementům. Pomocí tohoto jazyku lze přidávat, upravovat a odebírat tyto HTML elementy, ovládat CSS styly, přidávat posluchače událostí (event listener) a mnohem více, to vše bez toho, aby uživatel musel stahovat nový HTML soubor nebo znovu načíst aktuální okno (Kolowich 2018)
S narůstající oblibou internetu se také zvyšovaly nároky uživatelů a z webových stránek se tak začaly stávat více aplikace než internetové stránky. Moderní internetové stránky a webové aplikace jsou často vyvíjeny jako Single Page Application. I tento typ internetových stránek stále v základu využívá jazyky HTML, CSS a JavaScript, ale staví více na dynamičnosti těchto stránek. Tento typ internetových stránek se stává už více aplikacemi než klasickou internetovou stránkou, jelikož jsou stránky skládány z komponent, tyto komponenty mohou mít svůj interní stav, předávat si parametry, reagovat na různé události a dynamicky překreslovat to co uživatel na obrazovce vidí.
To vše bez toho, aby uživatel, jakkoliv opustil stránku. Tento typ webových aplikací se tak snaží odstranit hlavní nedostatek klasických internetových stránek a to je, že po kliku na hypertextový odkaz se začne stahovat nový HTML soubor, který neuchovává
žádný stav a nijak nereaguje na chování uživatele. Jedná se o princip, na kterém staví všechny existující stránky a který se od počátku internetu nijak nezměnil ani nevyvinul. (Mozilla nedatováno)
Všechny moderní frameworky pro vývoj webových aplikací fungují právě na tomto principu Single Page Application a v podstatě obchází chování internetových stránek tím, že i když se uživateli zdá, že klikl na hypertextový odkaz a stránka se změnila, tak se žádný nový HTML soubor ve skutečnosti stažen nebyl a framework pouze pomocí jazyku JavaScript vyměnil všechny komponenty zobrazené uvnitř internetového prohlížeče. Všechny moderní webové aplikace i internetové stránky ale stále využívají stejné technologie, které byly k dispozici v době, kdy internet vzniknul – tedy jazyky HTML, CSS a JavaScript.
Multiple Page Application (MPA)
Tento typ webových aplikací je stále jeden z nejrozšířenějších druhů, se kterým se na internetu uživatel setká. Jak již bylo zmíněno, tak se jedná o model, kdy uživatel prochází jednotlivé HTML dokumenty skrz hypertextové odkazy. Při každém kliknutí na jakýkoliv odkaz je uživateli ze serveru stažen nový HTML dokument. (Omelchenko 2020) V současné době je tento typ stránek stále hojně využíván, je však doplněn o JavaScript. To v praxi znamená, že není potřeba znovu načítat HTML dokument při každé akci. JavaScript je často využívat např. při odesílání formulářů, kdy je toto odeslání prováděno na pozadí prohlížeče a uživateli je do HTML dokumentu promítnut výsledek této akce a není tak potřeba při odesílání formuláře načítat celou stránku znovu. (Adomavicius 2019)
Výhody
• Hlavní výhodou tohoto přístupu je jednoduchost přizpůsobení webové stránky pro internetové vyhledávače. Jelikož se internetová stránka chová tak, jak vyhledávače očekávají, tak je pro ně velmi jednoduché stránku pochopit a zaindexovat do svého katalogu. Vývojář také může každé stránce definovat unikátní titulek a popis, které vyhledávači pomůžou pochopit obsah stránky následně zobrazit webovou stránku ve výsledcích vyhledávání.
• Pro uživatele je také jednoduché se v těchto webových stránkách orientovat.
Jelikož každý hypertextový odkaz, který uživatel na stránce vidí vede na nějaký další dokument a pokud se chce vrátit, tak může využit odkazy na webové stránce nebo nativní ovládací prvky umístěné v prohlížeči. Pomocí těchto prvků se lze pohybovat zpět a vpřed v historii. Pro uživatele je tak velmi jednoduché se dostat třeba i o několik stránek zpět.
Nevýhody
• Pohyb po internetové stránce je pro uživatele pomalejší než v případě Single Page Application, jelikož je při každé akci potřeba znovu stáhnout nový HTML dokument a často i nové CSS styly nebo JavaScript kód.
Single Page Application (SPA)
Jak již název napovídá, tak u tohoto přístupu je webová aplikace tvořena pouze jednou stránkou. Při návštěvě stránky je uživateli stažen prázdný HTML dokument a následně je stahován JavaScript kód. Uživatel nemůže tedy webovou aplikaci využívat hned, ale musí počkat až se stáhne všechen JavaScript kód, který vygeneruje HTML strukturu.
Uživatel se následně po webové aplikaci pohybuje bez toho, aby se znovu stahovat jakýkoliv další HTML dokument. Při jakékoliv interakci s aplikací uživatel stále zůstává na stejné stránce a pouze se pomocí JavaScriptu překreslují elementy, které uživatel vidí.
Výhody
• Tento typ aplikace může být na první pohled k nerozeznání od Multiple Page Application, rozdíl je však v rychlosti při přechodu mezi jednotlivými stránkami, který je u tohoto přístupu mnohem rychlejší. Uživatel si při příchodu na stránku stáhne všechny potřebná data a může tak přecházet mezi stránkami téměř okamžitě.
• Aplikace tohoto typu jsou nejčastěji vyvíjeny pomocí těchto rozšíření pro JavaScript – React JS, Vue JS a Angular JS. (Doglio 2019) Tyto frameworky nabízí rozšíření do prohlížečů, které rozšiřují možnosti ladění aplikace a zároveň ho velmi zjednodušují.
Nevýhody
• I přes to, že internetový vyhledávač od společnosti Google už tento typ aplikací indexovat zvládá, tak spoustu méně rozšířených vyhledávačů tolik pokročilých není a mají s indexací tohoto typu webových stránek problém. (Portney 2018) Problém těchto vyhledávačů vzniká především kvůli tomu, že vyhledávače se snaží po porozumět obsahu webové stránky na základě HTML souboru. Tento soubor je ale u tohoto typu aplikaci téměř prázdný a obsah je následně vygenerován pomocí JavaScriptu.
• Je potřeba vyřešit změnu URL adresy v adresovém řádku prohlížeče a pohyb v historii, pomocí tlačítek v internetovém prohlížeči.
