Ing. Michal Valenta, Ph.D.
vedoucí katedry doc. RNDr. Ing. Marcel Jiřina, Ph.D.
děkan
ZADÁNÍ DIPLOMOVÉ PRÁCE
Název: Implementace mobilní aplikace FLOWIO s využitím konceptu WebView Student: Bc. Luka Lukašević
Vedoucí: Ing. Petra Pavlíčková, Ph.D.
Studijní program: Informatika
Studijní obor: Webové a softwarové inženýrství Katedra: Katedra softwarového inženýrství Platnost zadání: Do konce zimního semestru 2021/22
Pokyny pro vypracování
Cílem práce je implementace nativních prvků mobilních aplikací do webové aplikace vykreslené ve WebView tak, aby se výsledná aplikace z uživatelského hlediska chovala co nejvíce jako mobilní aplikace.
1. Nastudujte a analyzujte koncept WebView.
2. Na základě poznatků prozkoumejte možnosti propojení konceptu WebView s programovacím jazykem React JS za pomoci nativních prvků z React Native.
3. Navrhněte kombinaci těchto tří technologií tak, aby se výsledná aplikace chovala z uživatelského hlediska jako nativní aplikace. S tím, že hlavní snahou je co nejméně měnit kód existující webové aplikace, kterou chceme zobrazovat na mobilních zařízeních.
4. Návrh aplikujte na podnikovou mobilní aplikaci FLOWIO.
5. Výsledek otestujte a vyhodnoťte náročnost použitého způsobu vývoje mobilní aplikace v porovnání s klasickým vývojem pomocí nativního jazyka.
Seznam odborné literatury
Dodá vedoucí práce.
Diplomov´ a pr´ ace
Implementace mobiln´ı aplikace FLOWIO s vyuˇ zit´ım konceptu WebView
Bc. Luka Lukaˇ sevi´ c
Katedra softwarov´eho inˇzen´yrstv´ı
Vedouc´ı pr´ace: Ing. Petra Pavl´ıˇckov´a, Ph.D.
Podˇ ekov´ an´ı
Nejdˇr´ıve bych chtˇel podˇekovat pan´ı Petˇre Pavl´ıˇckov´e, za skvˇel´e veden´ı pr´ace a za velmi pˇr´ıjemnou spolupr´aci i v t´eto nelehk´e dobˇe. D´ale bych chtˇel podˇekovat koleg˚um z pr´ace Jakubovi Petrovi a Martinovi Pongr´aczovi, za vnuknut´ı n´apadu
Prohl´ aˇ sen´ı
Prohlaˇsuji, ˇze jsem pˇredloˇzenou pr´aci vypracoval samostatnˇe a ˇze jsem uvedl veˇsker´e pouˇzit´e informaˇcn´ı zdroje v souladu s Metodick´ym pokynem o dodrˇzo- v´an´ı etick´ych princip˚u pˇri pˇr´ıpravˇe vysokoˇskolsk´ych z´avˇereˇcn´ych prac´ı.
Beru na vˇedom´ı, ˇze se na moji pr´aci vztahuj´ı pr´ava a povinnosti vypl´yvaj´ıc´ı ze z´akona ˇc. 121/2000 Sb., autorsk´eho z´akona, ve znˇen´ı pozdˇejˇs´ıch pˇredpis˚u.
V souladu s ust.§2373 odst. 2 z´akona ˇc. 89/2012 Sb., obˇcansk´y z´akon´ık, ve znˇen´ı pozdˇejˇs´ıch pˇredpis˚u, t´ımto udˇeluji nev´yhradn´ı opr´avnˇen´ı (licenci) k uˇzit´ı t´eto moj´ı pr´ace, a to vˇcetnˇe vˇsech poˇc´ıtaˇcov´ych program˚u, jeˇz jsou jej´ı souˇc´ast´ı ˇ
ci pˇr´ılohou a veˇsker´e jejich dokumentace (d´ale souhrnnˇe jen
”D´ılo“), a to vˇsem osob´am, kter´e si pˇrej´ı D´ılo uˇz´ıt. Tyto osoby jsou opr´avnˇeny D´ılo uˇz´ıt jak´ymkoli zp˚usobem, kter´y nesniˇzuje hodnotu D´ıla a za jak´ymkoli ´uˇcelem (vˇcetnˇe uˇzit´ı k v´ydˇeleˇcn´ym ´uˇcel˚um). Toto opr´avnˇen´ı je ˇcasovˇe, teritori´alnˇe i mnoˇzstevnˇe neomezen´e. Kaˇzd´a osoba, kter´a vyuˇzije v´yˇse uvedenou licenci, se vˇsak zava- zuje udˇelit ke kaˇzd´emu d´ılu, kter´e vznikne (byt’ jen zˇc´asti) na z´akladˇe D´ıla,
´
upravou D´ıla, spojen´ım D´ıla s jin´ym d´ılem, zaˇrazen´ım D´ıla do d´ıla souborn´eho ˇ
ci zpracov´an´ım D´ıla (vˇcetnˇe pˇrekladu) licenci alespoˇn ve v´yˇse uveden´em roz- sahu a z´aroveˇn zpˇr´ıstupnit zdrojov´y k´od takov´eho d´ıla alespoˇn srovnateln´ym zp˚usobem a ve srovnateln´em rozsahu, jako je zpˇr´ıstupnˇen zdrojov´y k´od D´ıla.
Cesk´ˇ e vysok´e uˇcen´ı technick´e v Praze Fakulta informaˇcn´ıch technologi´ı
c 2020 Luka Lukaˇsevi´c. Vˇsechna pr´ava vyhrazena.
Tato pr´ace vznikla jako ˇskoln´ı d´ılo na ˇCesk´em vysok´em uˇcen´ı technick´em v Praze, Fakultˇe informaˇcn´ıch technologi´ı. Pr´ace je chr´anˇena pr´avn´ımi pˇredpisy a mezin´arodn´ımi ´umluvami o pr´avu autorsk´em a pr´avech souvisej´ıc´ıch s pr´avem autorsk´ym. K jej´ımu uˇzit´ı, s v´yjimkou bez´uplatn´ych z´akonn´ych licenc´ı a nad r´amec opr´avnˇen´ı uveden´ych v Prohl´aˇsen´ı na pˇredchoz´ı stranˇe, je nezbytn´y sou- hlas autora.
Odkaz na tuto pr´aci
Lukaˇsevi´c, Luka.Implementace mobiln´ı aplikace FLOWIO s vyuˇzit´ım konceptu WebView. Diplomov´a pr´ace. Praha: ˇCesk´e vysok´e uˇcen´ı technick´e v Praze, Fakulta informaˇcn´ıch technologi´ı, 2020.
Abstrakt
Tato diplomov´a pr´ace se zab´yv´a studiem konceptu WebView a n´aslednou apli- kac´ı poznatk˚u na podnikovou aplikaci FLOWIO. C´ılem pr´ace je funkˇcn´ı mo- biln´ı aplikace FLOWIO, kter´a bude z uˇzivatelsk´eho hlediska vystupovat jako nativn´ı mobiln´ı aplikace. Hlavn´ı myˇslenkou bylo usnadnˇen´ı procesu v´yvoje pro spoleˇcnosti, kter´e potˇrebuj´ı k existuj´ıc´ı webov´e aplikaci vytvoˇrit i od- pov´ıdaj´ıc´ı mobiln´ı aplikaci. Po detailn´ı anal´yze konceptu WebView jsem zpra- coval poˇzadavky na mobiln´ı aplikaci FLOWIO a implementoval adekv´atn´ı ˇreˇsen´ı. V pr´aci jsem uk´azal, ˇze lze vyuˇz´ıt WebView k zobrazen´ı i sloˇzitˇejˇs´ıch webov´ych aplikac´ı, neˇz jsou pouh´e statick´e webov´e str´anky.
Kl´ıˇcov´a slova WebView, FLOWIO, cross-platformn´ı aplikace, React JS, React Native
Abstract
This diploma thesis deals with the study of the WebView concept and the subsequent application of knowledge to the enterprise application FLOWIO.
The aim of the work is a functional mobile application FLOWIO, which will act as a native mobile application from the user’s point of view. The main idea was to facilitate the development process for companies that need to create
a corresponding mobile application for an existing web application. After a detailed analysis of the WebView concept, I processed the requirements for the FLOWIO mobile application and implemented an adequate solution. In my work I showed that WebView can be used to display even more complex web applications than just static web pages.
Keywords WebView, FLOWIO, cross-platform applications, React JS, Re- act Native
viii
Obsah
Uvod´ 1
1 Sezn´amen´ı se s zadan´ymi technologiemi a souvisej´ıc´ımi pojmy 3
1.1 Aplikace . . . 3
1.2 Webov´a aplikace . . . 4
1.2.1 Webov´a str´anka vs. webov´a aplikace . . . 4
1.2.2 V´yhody webov´e aplikace . . . 5
1.2.3 Webov´e aplikace vs. jin´e typy aplikac´ı . . . 5
1.3 Mobiln´ı aplikace . . . 6
1.3.1 Co je mobiln´ı aplikace . . . 6
1.3.2 Typy mobiln´ıch aplikac´ı . . . 6
1.3.3 V´yvoj mobiln´ıch aplikac´ı . . . 7
1.4 Hybridn´ı aplikace . . . 8
1.4.1 V´yhody hybridn´ıch aplikac´ı . . . 8
1.4.1.1 Rychleji . . . 8
1.4.1.2 Levnˇeji . . . 9
1.4.1.3 L´epe . . . 9
1.4.2 Nev´yhody hybridn´ıch aplikac´ı . . . 9
1.4.2.1 Grafika a animace . . . 10
1.4.2.2 Pluginy a buginy . . . 10
1.4.2.3 Limitace v produkci . . . 10
1.5 WebView . . . 11
1.6 Pouˇzit´e programovac´ı jazyky a podp˚urn´e technologie . . . 12
1.6.1 JavaScript . . . 12
1.6.2 React JS . . . 12
1.6.3 NPM . . . 13
1.6.4 Yarn . . . 13
1.6.5 React Native . . . 13
2 Anal´yza pouˇzit´ych technologi´ı 15 2.1 Dalˇs´ı zp˚usoby, jak´ymi lze dos´ahnout stejn´eho v´ysledku jako s
WebView . . . 15
2.1.1 Nativn´ı v´yvoj mobiln´ı aplikace . . . 15
2.1.2 Hybridn´ı v´yvoj mobiln´ı aplikace . . . 17
2.1.2.1 Apache Cordova . . . 17
2.1.2.2 Ionic . . . 17
2.1.3 Cross-platformn´ı v´yvoj mobiln´ı aplikace . . . 18
2.1.4 Progresivn´ı webov´a aplikace . . . 19
2.1.5 V´ysledn´e shrnut´ı a d˚uvod proˇc bylo zvoleno WebView . 21 2.2 Koncept WebView . . . 24
2.2.1 Props komponenty WebView . . . 25
2.2.1.1 source . . . 25
2.2.1.2 originWhiteList . . . 27
2.2.1.3 renderLoading . . . 27
2.2.1.4 injectedJavaScript . . . 28
2.2.1.5 injectedJavaScriptBeforeContentLoaded . . . . 29
2.2.1.6 onFileDownload . . . 29
2.2.1.7 onMessage . . . 30
2.2.1.8 onLoad . . . 31
2.2.1.9 onError . . . 31
2.2.1.10 onScroll . . . 32
2.2.2 Metody komponenty WebView . . . 32
2.2.2.1 postMessage . . . 32
2.2.2.2 injectJavascript . . . 33
2.2.2.3 reload . . . 34
2.2.2.4 stopLoading . . . 34
2.2.2.5 goBack . . . 35
2.2.2.6 goForward . . . 35
2.2.2.7 clearCache . . . 35
2.2.2.8 clearHistory . . . 35
2.3 D˚uleˇzit´e JavaScriptov´e metody a promˇenn´e pro komunikaci s WebView . . . 35
2.3.1 Promˇenn´a window . . . 35
2.3.2 Promˇenn´a document . . . 36
2.3.3 EventTarget a jeho metody . . . 36
2.3.3.1 addEventListener . . . 37
2.3.3.2 removeEventListener . . . 38
2.3.3.3 dispatchEvent . . . 38
2.4 Vybran´e principy z jazyka React JS . . . 39
2.4.1 React Hooks . . . 40
2.4.1.1 useState . . . 40
2.4.1.2 useEffect . . . 41
2.4.1.3 useRef . . . 43 x
2.4.1.4 Udrˇzov´an´ı promˇenliv´e promˇenn´e . . . 44
2.5 Prvky pouˇzit´e z React Native pro spr´avn´e fungov´an´ı WebView 45 2.5.1 ScrollView . . . 45
2.5.1.1 onLayout . . . 46
2.5.1.2 refreshControl . . . 46
2.5.1.3 RefreshControl . . . 46
3 Anal´yza podnikov´e aplikace FLOWIO 47 3.1 Co je FLOWIO . . . 47
3.2 Vymezen´ı pˇr´ıpad˚u uˇzit´ı, kde bude potˇreba upravit webovou ˇ c´ast, aby spr´avnˇe komunikovala s nativn´ı ˇc´ast´ı a WebView . . . 47
3.2.1 Pˇrihlaˇsov´an´ı, respektive odhlaˇsov´an´ı uˇzivatele do, re- spektive z aplikace . . . 48
3.2.1.1 Nadstavba pro mobiln´ı aplikaci . . . 48
3.2.1.2 Samotn´e pˇrihl´aˇsen´ı a odhl´aˇsen´ı . . . 49
3.2.2 Zpracov´an´ı notifikac´ı . . . 49
3.2.3 Menˇs´ı ´upravy . . . 51
3.2.3.1 Zmˇena serveru z webov´e aplikace . . . 51
3.2.3.2 Vyˇciˇstˇen´ı lok´aln´ıho uloˇziˇstˇe . . . 52
3.2.3.3 Skryt´ı administraˇcn´ı ˇc´asti . . . 52
4 Aplikov´an´ı zjiˇstˇen´ych poznatk˚u na mobiln´ı aplikaci FLOWIO 57 4.1 Konfigurace WebView komponenty . . . 57
4.1.1 Definice samotn´e WebView komponenty . . . 58
4.1.1.1 style . . . 58
4.1.1.2 ref . . . 59
4.1.1.3 source . . . 59
4.1.1.4 originWhitelist . . . 60
4.1.1.5 onMessage . . . 60
4.1.1.6 injectedJavaScriptBeforeContentLoaded . . . . 61
4.1.1.7 onLoadEnd . . . 61
4.1.1.8 renderLoading . . . 62
4.1.1.9 onScroll . . . 62
4.1.2 Konfigurace komponenty ScrollView . . . 63
4.1.2.1 Definice samotn´e ScrollView komponenty . . . 63
4.1.2.2 onLayout . . . 63
4.1.2.3 refreshControl . . . 64
4.2 Implementace komunikace jednotliv´ych ˇc´ast´ı pro zobrazen´ı no- tifikac´ı v mobiln´ı aplikaci . . . 65
4.2.1 Uprava webov´´ e ˇc´asti aplikace FLOWIO pro zpracov´an´ı notifikac´ı . . . 65
4.2.1.1 Komponenta Notifications pˇred ´upravou pro mobiln´ı aplikaci . . . 66
4.2.1.2 Komponenta Notifications po ´upravˇe pro mo-
biln´ı aplikaci . . . 68
4.2.2 Implementace nativn´ı ˇc´asti pro zpracov´an´ı notifikac´ı . . 72
4.2.2.1 Odes´ıl´an´ı notifikac´ı webov´e ˇc´asti . . . 73
4.3 Pˇrihl´aˇsen´ı do aplikace . . . 75
4.4 Implementace odhl´aˇsen´ı z aplikace, zmˇena server˚u a vymaz´an´ı uloˇziˇstˇe . . . 76
4.4.1 Implementace akc´ı v webov´e ˇc´asti aplikace FLOWIO . . 76
4.4.1.1 Odhl´aˇsen´ı uˇzivatele z aplikace . . . 76
4.4.1.2 Zmˇena serveru . . . 79
4.4.1.3 Vyˇciˇstˇen´ı lok´aln´ıho uloˇziˇstˇe . . . 79
4.4.2 Implementace akc´ı v nativn´ı ˇc´asti aplikace FLOWIO . . 80
4.4.2.1 Odhl´aˇsen´ı uˇzivatele z aplikace . . . 81
4.4.2.2 Zmˇena serveru . . . 81
4.4.2.3 Vyˇciˇstˇen´ı uloˇziˇstˇe . . . 81
4.5 N´astroje, kter´e lze pouˇz´ıt pˇri v´yvoji nativn´ı aplikace s Web- View, pro zkoum´an´ı komponent a s´ıt’ov´ych prvk˚u . . . 81
4.5.1 Redux DevTools . . . 82
4.5.2 React Native Debugger . . . 83
4.5.3 Reactotron . . . 84
4.5.4 Ladˇen´ı WebView obsahu zobrazovan´em v mobiln´ım zaˇr´ızen´ı 85 4.6 Probl´emy, se kter´ymi jsem se v pr˚ubˇehu implementace pot´ykal 87 4.6.1 Zkoum´an´ı dotaz˚u na server volan´ych z obsahu WebView 87 4.6.2 Testov´an´ı novˇe vyv´ıjen´ych funkcionalit ve webov´e apli- kaci pro komunikaci s WebView . . . 88
4.6.3 Nekonzistence ukl´ad´an´ı cookies pro WebView na iOS a Android zaˇr´ızen´ıch . . . 89
4.6.4 Chybn´a navigace z nativn´ı ˇc´asti do webov´e ˇc´asti . . . . 90
4.6.5 Stejn´e datov´e typy na dvou r˚uzn´ych v´yvojov´ych prostˇred´ıch 91 5 Zhodnocen´ı v´ysledku a porovn´an´ı zvolen´eho pˇr´ıstupu s na- tivn´ım v´yvojem 93 5.1 Zhodnocen´ı mobiln´ı aplikace FLOWIO po vyd´an´ı prvn´ı verze . 93 5.1.1 Vlastn´ı pohled na v´yvoj aplikace a na v´yslednou formu jej´ı prvn´ı verze . . . 94
5.1.2 V´ysledek uˇzivatelsk´eho pouˇz´ıv´an´ı mobiln´ı aplikace FLOWIO 95 5.2 Porovn´an´ı zvolen´eho postupu s klasick´ym nativn´ım v´yvojem . . 96
5.2.1 Casov´ˇ a n´aroˇcnost v´yvoje aplikace . . . 97
5.2.2 Finanˇcn´ı n´aroˇcnost v´yvoje aplikace . . . 97
5.2.3 Sk´ˇ alovatelnost aplikace . . . 98
5.2.4 V´yvojov´e prostˇred´ı . . . 98
5.2.5 Testov´an´ı aplikace v pr˚ubˇehu v´yvoje . . . 99
5.2.6 Zhodnocen´ı porovn´an´ı . . . 99 xii
Z´avˇer 101
Literatura 103
A Seznam pouˇzit´ych zkratek 107
B Obsah pˇriloˇzen´eho CD 109
Seznam obr´ azk˚ u
2.1 Zvolen´ı pˇr´ıstupu v´yvoje mobiln´ı aplikace [1] . . . 16 2.2 Vyskakovac´ı liˇsta pro staˇzen´ı PWA . . . 20 2.3 Struktura document elementu . . . 36 3.1 Sekvenˇcn´ı diagram uˇzivatelsk´eho pˇrihl´aˇsen´ı a odhl´aˇsen´ı v mobiln´ı
aplikaci FLOWIO . . . 53 3.2 Sekvenˇcn´ı diagram zpracov´an´ı notifikac´ı v mobiln´ı aplikaci FLOWIO 54 3.3 Sekvenˇcn´ı diagram akce zmˇeny server˚u . . . 55 3.4 Sekvenˇcn´ı diagram akce vyˇciˇstˇen´ı lok´aln´ıho uloˇziˇstˇe . . . 56 4.1 Vzhled komponenty Notifications ve webov´e aplikaci, kde m´a sta-
vov´a promˇenn´a isOpen hodnotu false . . . 67 4.2 Vzhled komponenty Notifications ve webov´e aplikaci, kde m´a sta-
vov´a promˇenn´a isOpen hodnotu true a je rozbalen´y seznam no- tifikac´ı. . . 67 4.3 Vzhled seznamu notifikac´ı v mobiln´ı aplikaci (seznam obsahuje dva
r˚uzn´e datov´e zdroje DEV a Test) . . . 75 4.4 Vzhled uˇzivatelsk´e sekce pˇri zobrazen´ı aplikace v prohl´ıˇzeˇci . . . . 77 4.5 Vzhled uˇzivatelsk´e sekce v mobiln´ı aplikaci . . . 78 4.6 Grafick´e rozhran´ı doplˇnku Redux DevTools . . . 83 4.7 Potˇrebn´e verze react-native-debugger aplikace a react-native . . . . 84 4.8 Vzhled str´anky pro vzd´alen´e ladˇen´ı mobiln´ıch aplikac´ı - prvn´ı pˇr´ıstup 86 4.9 Vzhled str´anky pro vzd´alen´e ladˇen´ı mobiln´ıch aplikac´ı - pˇripojen´e
zaˇr´ızen´ı . . . 87 5.1 Shrnut´ı porovn´an´ı implementace mobiln´ı aplikace FLOWIO . . . . 100
Uvod ´
V dneˇsn´ı dobˇe je snahou vˇse digitalizovat a automatizovat. Vznik´a st´ale v´ıc a v´ıc aplikac´ı, kter´e se n´am snaˇz´ı usnadnit ˇzivot a urychlit nebo ulehˇcit pr´aci kterou dˇel´ame. Jsou r˚uzn´e typy aplikac´ı, ale nejrozˇs´ıˇrenˇejˇs´ımi jsou v dneˇsn´ı dobˇe zcela urˇcitˇe webov´e a mobiln´ı aplikace. V posledn´ıch letech nab´yvaj´ı na obl´ıbenosti pr´avˇe mobiln´ı aplikace, jelikoˇz kaˇzd´y z n´as m´a mobiln´ı tele- fon a pouˇz´ıv´a ho kaˇzd´y den. ˇCteme si na nich zpr´avy, poslouch´ame hudbu, hled´ame informace, komunikujeme s jin´ymi lidmi a mnoho dalˇs´ıch vˇec´ı. T´ım p´adem vznik´a na trhu i vˇetˇs´ı popt´avka po program´atorech, kteˇr´ı programuj´ı mobiln´ı aplikace. Popt´avka je ale vˇetˇs´ı, neˇz je poˇcet schopn´ych a spolehliv´ych program´ator˚u mobiln´ıch aplikac´ı. Firmy, jenˇz vyv´ıj´ı webov´e aplikace, mus´ı ˇreˇsit uˇzivatelskou spokojenost a mus´ı sledovat nov´e trendy a trh. T´ım p´adem je zapotˇreb´ı vedle webov´e aplikace m´ıt i odpov´ıdaj´ıc´ı mobiln´ı aplikaci pro vyˇsˇs´ı spokojenost uˇzivatel˚u. Velik´e firmy s dobrou povˇest´ı a vysok´ym majet- kem tento probl´em snadno vyˇreˇs´ı, jelikoˇz finanˇcn´ı prostˇredky pro nˇe nejsou probl´em a mohou si dovolit na zak´azku mobiln´ı aplikaci pro sv˚uj produkt vy- tvoˇrit na m´ıru a nebo zaloˇzit cel´e nov´e oddˇelen´ı pro mobiln´ı v´yvoj. Na trhu je ovˇsem mnoho menˇs´ıch firem a startup˚u, kter´e takov´e prostˇredky nemaj´ı a vyv´ıjet dvˇe aplikace souˇcasnˇe je pro nˇe velmi ˇcasovˇe i finanˇcnˇe n´aroˇcn´e.
Existuj´ı ale moˇznosti, kter´e tento probl´em mohou do zaˇc´atku alespoˇn ˇ
c´asteˇcnˇe vyˇreˇsit. Takov´e moˇznosti vych´az´ı ze skuteˇcnosti, ˇze staˇc´ı m´ıt ho- tovou webovou aplikaci a za pouˇzit´ı urˇcit´ych postup˚u a koncept˚u z n´ı vytvoˇrit mobiln´ı aplikaci. A to bez nutn´e znalosti nativn´ıch programovac´ıch jazyk˚u a nebo s pouˇzit´ım pouh´ych z´aklad˚u tˇechto jazyk˚u. V´ysledek ovˇsem neb´yv´a tak uspokojiv´y, jako kdyˇz by aplikace byla naprogramov´ana pˇr´ımo jako mobiln´ı aplikace. Spln´ı ale sv˚uj ´uˇcel, kter´ym je pˇredat uˇzivatel˚um funkˇcn´ı produkt do doby, neˇz bude moˇzno dodat nativn´ı aplikaci. Z moˇznost´ı, kter´e m´ame v t´eto dobˇe dostupn´e, jsem si vybral koncept WebView a budu se j´ım v t´eto pr´aci zab´yvat.
Uvod´
WebView je obecnˇe pouˇz´ıvan´y koncept a mnoho mobiln´ıch aplikac´ı ho vyuˇz´ıv´a tak dobˇre, ˇze uˇzivatel´e ani nepoznaj´ı rozd´ıl od nativn´ı aplikace. Je to jednoduch´e, kdyˇz je zapotˇreb´ı pouze zobrazit jednu nebo dvˇe webov´e str´anky slouˇz´ıc´ı sp´ıˇse k informativn´ım ´uˇcel˚um. J´a budu ve sv´e pr´aci zkoumat, jak nejl´epe vyuˇz´ıt konceptu WebView k implementaci funkˇcn´ı mobiln´ı aplikace. Po d˚ukladn´e anal´yze budu poznatky aplikovat na podnikovou aplikaci FLOWIO.
V´ysledkem pr´ace bude funkˇcn´ı mobiln´ı aplikace, kter´a se bude z uˇzivatelsk´eho hlediska chovat zcela jako nativn´ı mobiln´ı aplikace.
Hlavn´ım pˇr´ınosem t´eto pr´ace by mˇela b´yt podrobn´a studie konceptu Web- View a jeho propojen´ı s vybran´ym programovac´ım jazykem. Kromˇe sezn´amen´ı s konceptem, se budu snaˇzit pˇredevˇs´ım proniknout do jeho hloubky a ma- xim´alnˇe vyuˇz´ıt jeho moˇznosti k dosaˇzen´ı poˇzadovan´eho v´ysledku, kter´ym je funkˇcn´ı mobiln´ı aplikace vych´azej´ıc´ı z jiˇz existuj´ıc´ı webov´e aplikace. Moti- vac´ı k v´ybˇeru tohoto t´ematu mi byl nedostatek materi´al˚u, kter´e by popisovaly ˇreˇsen´ı zadan´eho probl´emu. Jak uˇz jsem zm´ınil v´yˇse, nebyl jsem schopn´y dohle- dat podrobnˇejˇs´ı informace, kromˇe uk´azek vyuˇzit´ı z´akladn´ıch prvk˚u konceptu a samotn´e dokumentace r˚uzn´ych typ˚u komponent WebView. Takov´a dokumen- tace avˇsak m˚uˇze b´yt nepˇrehledn´a a bez uk´azek pouˇzit´ı nemus´ı na prvn´ı pohled d´avat potˇrebn´e ˇreˇsen´ı. Pˇri podrobnˇejˇs´ım prozkoum´an´ı dokumentace, lze zjis- tit, ˇze WebView m´a daleko vˇetˇs´ı moˇznosti, neˇz je pouh´e vykreslov´an´ı webov´e str´anky, na zadan´e URL (Uniform Resource Locator). Aplikace poznatk˚u z analytick´e ˇc´asti pr´ace na podnikovou aplikaci FLOWIO kr´asnˇe uk´aˇze vyuˇzit´ı tˇechto moˇznost´ı.
2
Kapitola 1
Sezn´ amen´ı se s zadan´ ymi technologiemi a souvisej´ıc´ımi pojmy
Tato kapitola popisuje technologie a postupy, kter´e jsou v pr´aci zm´ınˇeny a kter´ymi se pr´ace zab´yv´a. Nejedn´a se o anal´yzu, ale pouze o sezn´amen´ı ˇcten´aˇre s term´ıny, aby pak v ˇc´astech jako je anal´yza a aplikace zjiˇstˇen´ych poznatk˚u na re´aln´y probl´em, bylo vˇse srozumiteln´e a jasn´e. Hlavn´ım a nejd˚uleˇzitˇejˇs´ım term´ınem pr´ace je zcela jistˇe WebView. Tento koncept se ale poj´ı s programo- vac´ımi jazyky, kter´e tento koncept implementuj´ı. V tomto pˇr´ıpadˇe je pouˇzit programovac´ı jazyk JavaScript a jeho knihovny React, kter´a slouˇz´ı pro tvorbu uˇzivatelsk´eho rozhran´ı a React Native, kter´a slouˇz´ı k tvorbˇe mobiln´ıch aplikac´ı.
Pot´e budou v analytick´e ˇc´asti rozebr´any zp˚usoby propojen´ı tˇechto programo- vac´ıch jazyk˚u s konceptem WebView. Tato pr´ace by mohla do budoucna slouˇzit jako uk´azka moˇzn´ych zp˚usob˚u pouˇzit´ı WebView pro sloˇzitˇejˇs´ı projekty, proto je nutn´e moˇznosti WebView dopodrobna rozebrat. Zaˇcnu ale od z´akladn´ıch term´ın˚u, jako napˇr´ıklad co jsou aplikace a jak´e typy aplikac´ı se v pr´aci objev´ı.
1.1 Aplikace
Aplikace, nebo aplikaˇcn´ı software, je software, kter´y je vyvinut k tomu aby prov´adˇel specifick´e ´ukoly se specifick´ym ´uˇcelem. V podstatˇe je to program, nebo kolekce program˚u, kter´e jsou vyuˇz´ıv´any koncov´ymi uˇzivateli. V podstatˇe kaˇzd´y software, kter´y nen´ı syst´emov´y software nebo programovac´ı software je aplikaˇcn´ı software. Tyto dva dalˇs´ı typy softwaru se v pr´aci nebudou objevo- vat, proto se jimi d´ale nebudu zab´yvat. V z´avislosti na ˇcinnosti, pro kterou byla aplikace navrˇzena, m˚uˇze aplikace manipulovat s textem, ˇc´ısly, zvukem, grafikou a nebo tyto prvky kombinovat. Nˇekter´e bal´ıˇcky aplikac´ı, se zamˇeˇruj´ı pouze na jeden ´ukol, napˇr´ıklad na zpracov´an´ı textu (MS Word). Jin´e aplikace,
1. Sezn´amen´ı se s zadan´ymi technologiemi a souvisej´ıc´ımi pojmy
kter´e zahrnuj´ı v´ıce aplikac´ı, naz´yv´ame integrovan´y software.
Pˇr´ıklady aplikaˇcn´ıch softwar˚u:
• Software pro zpracov´an´ı textu
• Datab´azov´e programy
• Z´abavn´y software
• Obchodn´ı software
• Vzdˇel´avac´ı software
• Software pro poˇc´ıtaˇcov´y design (CAD)
• Tabulkov´y software a dalˇs´ı[2]
Webov´e a mobiln´ı aplikace patˇr´ı do skupiny integrovan´ych aplikac´ı a budou bl´ıˇze pops´any v t´eto kapitole.
1.2 Webov´ a aplikace
Webov´a aplikace je typ aplikaˇcn´ıho softwaru, kter´y je uloˇzen na vzd´alen´em serveru a je doruˇcov´an pˇres internet prostˇrednictv´ım rozhran´ı internetov´eho prohl´ıˇzeˇce. Webov´e sluˇzby jsou podle definice webov´e aplikace, a mnoho webov´ych str´anek, ne ale vˇsechy, obsahuj´ı webov´e aplikace. Podle editora port´alu Web.AppStorm Jarela Remicka se jak´akoliv webov´a souˇc´ast, kter´a pro uˇzivatele vykon´av´a
nˇejakou funkci, klasifikuje jako webov´a aplikace.
Webov´e aplikace mohou b´yt navrˇzeny pro nejr˚uznˇejˇs´ı ´uˇcely a m˚uˇze je vyuˇz´ıvat kdokoliv, od organizace po jednotlivce, kv˚uli r˚uzn´ym d˚uvod˚um. Mezi bˇeˇznˇe vyuˇz´ıvan´e aplikace patˇr´ı webmaily, online kalkulaˇcky nebo e-shopy. K nˇekter´ym webov´ym aplikac´ım maj´ı pˇr´ıstup pouze konkr´etn´ı prohl´ıˇzeˇce nebo pouze urˇcit´e zemˇe, vˇetˇsina je vˇsak volnˇe dostupn´a.
1.2.1 Webov´a str´anka vs. webov´a aplikace Webov´a aplikace
Webov´a aplikace je software nebo program, kter´y je pˇr´ıstupn´y pomoc´ı libo- voln´eho internetov´eho prohl´ıˇzeˇce. Jej´ı front-end je vˇetˇsinou vytv´aˇren pomoc´ı programovac´ıch jazyk˚u jako je HTML, CSS a JavaScript, kter´e jsou pod- porov´any vˇsemi prohl´ıˇzeˇci. Back-end m˚uˇze vyuˇz´ıvat jak´ykoliv programovac´ı stack jako je LAMP (Linux, Apache, MySQL, PHP/Perl/Python), MEAN (bezplatn´y open source JavaScriptov´y software stack) a dalˇs´ı. Na rozd´ıl od mobiln´ıch aplikac´ı, nepotˇrebuj´ı ˇzadn´y specifick´y SDK (Software Development Kit) pro v´yvoj. Webov´e aplikace se dostaly do popˇred´ı s pˇr´ıchodem Software as a Service (SaaS).[3]
4
1.2. Webov´a aplikace Webov´a str´anka (website)
Webov´a str´anka (website) je skupina glob´alnˇe dostupn´ych, prov´azan´ych webov´ych str´anek, kter´e maj´ı stejnou dom´enu. M˚uˇzou b´yt vyv´ıjeny a udrˇzov´any jed- notlivcem, podnikem nebo celou organizac´ı. C´ılem webov´e str´anky (website) je slouˇzit r˚uzn´ym ´uˇcel˚um, napˇr´ıklad jako blog. Webov´a str´anka (website) je hostov´ana na jednom nebo na v´ıce webov´ych serverech. Jsou pˇr´ıstupn´e prostˇrednictv´ım s´ıtˇe, jako je internet nebo pokud je s´ıt’ priv´atn´ı tak pomoc´ı IP adresy. Jelikoˇz je WebView pouˇz´ıv´ano v pˇr´ıpadˇe t´eto pr´ace v kombinaci s webovou aplikac´ı, nebudu se webov´ymi str´ankami d´ale zab´yvat.[4]
1.2.2 V´yhody webov´e aplikace
Webov´e aplikace m˚uˇzeme vyuˇz´ıvat na mnoho zp˚usob˚u, a s tˇemito zp˚usoby pˇrich´az´ı mnoho v´yhod. Mezi z´akladn´ı v´yhody webov´ych aplikac´ı patˇr´ı:
• Umoˇzˇnuj´ı pˇr´ıstup v´ıce uˇzivatel˚um ve stejnou chv´ıli k stejn´e verzi apli- kace.
• Webov´e aplikace nen´ı potˇreba instalovat.
• Webov´e aplikace nez´avis´ı na platformˇe. M˚uˇzeme k nim pˇristupovat po- moc´ı poˇc´ıtaˇce, telefonu, tabletu a dalˇs´ıch zaˇr´ızen´ı, kter´e se dok´aˇzou pˇripojit k s´ıti.
• Jsou pˇr´ıstupn´e skrze r˚uzn´e internetov´e prohl´ıˇzeˇce 1.2.3 Webov´e aplikace vs. jin´e typy aplikac´ı
V r´amci odvˇetv´ı mobiln´ıch poˇc´ıtaˇc˚u, jsou webov´e aplikace nˇekdy v kontrastu s nativn´ımi aplikacemi, coˇz jsou aplikace vyvinut´e speci´alnˇe pro konkr´etn´ı platformu nebo zaˇr´ızen´ı a jsou na nˇem nainstalovan´e. Nativn´ı aplikace mohou bˇeˇznˇe vyuˇz´ıvat hardware specifick´y pro dan´e zaˇr´ızen´ı, napˇr´ıklad GPS nebo fotoapar´at na mobiln´ım telefonu.
Programy, kter´e kombinuj´ı oba dva pˇr´ıstupy, jsou naz´yv´any hybridn´ı apli- kace. Hybridn´ı aplikace funguj´ı podobnˇe webov´ym aplikac´ım, jsou ale nain- stalov´any na zaˇr´ızen´ı jako nativn´ı aplikace. Hybridn´ı aplikace mohou tak´e vyuˇz´ıvat v´yhod speci´aln´ıch prvk˚u pro zaˇr´ızen´ı pomoc´ı intern´ı API (Appli- cation Programming Interface). Staˇzen´e nativn´ı aplikace mohou fungovat i bez pˇripojen´ı do s´ıtˇe, hybridn´ı aplikace tuto v´yhodu bohuˇzel nemaj´ı. Hyb- ridn´ı aplikace typicky sd´ıl´ı podobn´e prvky v navigaci jako webov´e aplikace, jelikoˇz jsou postaveny sp´ıˇse nad webovou aplikac´ı neˇz nad nativn´ı.[3]
1. Sezn´amen´ı se s zadan´ymi technologiemi a souvisej´ıc´ımi pojmy
1.3 Mobiln´ı aplikace
Mobiln´ı aplikace jsou rostouc´ı odvˇetv´ı, kter´e pˇritahuje spoleˇcnosti a podniky ze vˇsech r˚uzn´ych trh˚u. Nen´ı se ˇcemu divit, podle port´alu statista.com, se pˇredpokl´ad´a, ˇze zisky mobiln´ıch aplikac´ı dos´ahnou za rok 2020 aˇz k hranici 600 miliard dolar˚u [5]. D´ıky nar˚ustaj´ıc´ı popularitˇe chytr´ych telefon˚u a tablet˚u, se mobiln´ı aplikace staly extr´emnˇe popul´arn´ımi mezi podnikov´ymi majiteli po cel´em svˇetˇe.
1.3.1 Co je mobiln´ı aplikace
Mobiln´ı aplikace je typ aplikace, kter´a je navrˇzena tak, aby bˇeˇzela na mobiln´ım zaˇr´ızen´ı, kter´ym m˚uˇze b´yt chytr´y telefon nebo tablet. I pˇres to, ˇze jsou mobiln´ı aplikac´ı vˇetˇsinou mal´e softwarov´e jednotky s limitovan´ym poˇctem funkc´ı, st´ale dok´aˇzou dopˇr´at uˇzivatel˚um kvalitn´ı sluˇzby a zkuˇsenosti. Na rozd´ıl od aplikac´ı, kter´e jsou navrˇzeny pro stoln´ı poˇc´ıtaˇce a notebooky, jdou mobiln´ı aplikace smˇerem pryˇc od integrovan´ych softwarov´ych syst´em˚u. Kaˇzd´a mobiln´ı aplikace dod´av´a nˇejakou limitovanou a izolovanou funkcionalitu.
Napˇr´ıklad to m˚uˇze b´yt hra, kalkulaˇcka nebo internetov´y prohl´ıˇzeˇc. Jelikoˇz mo- biln´ı zaˇr´ızen´ı ze zaˇc´atku nemˇely tolik v´ykonn´y hardware, museli se v´yvoj´aˇri vy- hnout multifunkˇcnosti aplikac´ı. Dnes uˇz jsou mobiln´ı zaˇr´ızen´ı daleko v´ykonnˇejˇs´ı, nˇekdy i v´ıce neˇz nˇekter´e poˇc´ıtaˇce, i pˇres to ale z˚ustala mobiln´ım aplikac´ım jed- noduch´a funkcionalita. Takto majitel´e mobiln´ıch aplikac´ı umoˇzˇnuj´ı z´akazn´ık˚um vyb´ırat pˇresnˇe ty funkce, kter´e by jejich zaˇr´ızen´ı mˇelo m´ıt.
1.3.2 Typy mobiln´ıch aplikac´ı
Mobiln´ı aplikace maj´ı r˚uzn´e ´uˇcely a jsou r˚uznˇe velk´e. Zde je v´ypis nejpo- pul´arnˇejˇs´ıch typ˚u aplikac´ı, na kter´e m˚uˇzeme na trhu narazit.
• Hern´ı aplikace - Nejpopul´arnˇejˇs´ı kategorie aplikac´ı. Podniky inves- tuj´ı st´ale v´ıce a v´ıce zdroj˚u do v´yvoje mobiln´ıch aplikac´ı, jelikoˇz jsou z tohoto typu aplikac´ı na trhu nejvˇetˇs´ı zisky. Podle ned´avn´e studie pˇredstavuj´ı mobiln´ı aplikace 33% vˇsech staˇzen´ych aplikac´ı, 74% zisku penˇez od uˇzivatel˚u a 10% veˇsker´eho ˇcasu pˇri pouˇz´ıv´an´ı aplikac´ı [6].
• Podnikov´e a produktivn´ı aplikace - Tyto aplikace se drˇz´ı hned za hern´ımi aplikacemi co se popt´avky na trhu t´yˇce. Lid´e jsou st´ale n´achylnˇejˇs´ı k pouˇz´ıv´an´ı chytr´ych telefon˚u a tablet˚u k prov´adˇen´ı mnoha sloˇzit´ych ´ukol˚u na cest´ach. Tyto aplikace jim napˇr´ıklad pom´ahaj´ı s rezer- vac´ı l´ıstk˚u, pos´ıl´an´ım email˚u nebo sledov´an´ım stavu jednotliv´ych ´ukol˚u v pr´aci. Podnikov´e aplikace jsou vytv´aˇreny tak, aby podpoˇrily pro- duktivitu a minimalizovaly v´ydaje t´ım, ˇze umoˇzn´ı uˇzivatel˚um prov´adˇet ˇsirokou ˇsk´alu ´ukol˚u, od n´akupu firemn´ıch potˇreb pˇres nab´ır´an´ı nov´ych zamˇestnanc˚u.
6
1.3. Mobiln´ı aplikace
• Vzdˇel´avac´ı aplikace - Tato kategorie zahrnuje aplikace, kter´e pomo- hou uˇzivatel˚um z´ıskat nov´e zkuˇsenosti a znalosti. Vzdˇel´avac´ı hern´ı apli- kace jsou v´yborn´ym n´astrojem pro dˇeti. Mnoho vzdˇel´avac´ıch aplikac´ı usnadˇnuje kantor˚um jejich pr´aci. Nˇekteˇr´ı je pouˇz´ıvaj´ı pro organizaci a pro jejich vlastn´ı vzdˇel´an´ı do budoucna.
• Aplikace pro ˇzivotn´ı styl - Aplikace, kter´e se soustˇred´ı na r˚uzn´e aspekty osobn´ıho ˇzivota. M˚uˇzou se zamˇeˇrovat na n´akup, m´odu, virtu´aln´ı kabinky, fitness, online seznamky nebo dietn´ı j´ıdeln´ıˇcky.
• N´akupn´ı aplikace- Nejpopul´arnˇejˇs´ı n´akupn´ı aplikace jakou jsou Ama- zon nebo eBay dod´avaj´ı verze jejich poˇc´ıtaˇcov´ych ˇreˇsen´ı i pro mobiln´ı te-
lefony. Umoˇzˇnuj´ı t´ım uˇzivatel˚um pˇristupovat k jejich produkt˚um prostˇrednictv´ım chytr´ych telefon˚u a tablet˚u a vyuˇz´ıvat platebn´ıch moˇznosti tˇechto zaˇr´ızen´ı jako je Apple Pay nebo Android Pay.
• Aplikace pro z´abavu- Tyto aplikace umoˇzˇnuj´ı uˇzivatel˚um sd´ılet video obsah, hledat ud´alosti, chatovat nebo sledovat obsah online. Soci´aln´ı me- dia jako Facebook nebo Instagram jsou t´ım nejlepˇs´ım pˇr´ıkladem. Dalˇs´ımi jsou aplikace jako Netflix nebo HBO Go, kter´e umoˇzˇnuj´ı uˇzivatel˚um sle- dovat video obsah a udrˇzuj´ı si z´ajem uˇzivatel˚u tak, ˇze ˇcasto aktualizuj´ı jejich obsah.
• N´astrojov´e aplikace - Tyto aplikace jsou tak bˇeˇzn´e, ˇze obˇcas za- pom´ın´ame, ˇze je v˚ubec pouˇz´ıv´ame. Jsou to napˇr´ıklad zdravotn´ı aplikace, skenery ˇc´arov´ych k´od˚u nebo sledovaˇce.
• Cestovn´ı aplikace- Hlavn´ım n´apadem tˇechto typ˚u aplikac´ı je umoˇznit uˇzivatel˚um cestovat jednoduˇse. Cestovn´ı aplikace udˇelaj´ı z chytr´eho te- lefonu nebo tabletu cestovn´ı den´ık a uloˇz´ı vˇsechny potˇrebn´e informace o cestˇe pˇrehlednˇe na jedno m´ısto. D´ale tak´e pom´ahaj´ı napˇr´ıklad v pˇrepravˇe a ubytov´an´ı osob, jako je Uber nebo AirBnb.[7]
1.3.3 V´yvoj mobiln´ıch aplikac´ı
V´yvoj mobiln´ıch aplikaci je proces, kter´y se velmi podob´a procesu v´yvoje kla- sick´ych aplikac´ı. V´yvoj´aˇri se avˇsak mus´ı zamˇeˇrit na to, aby vytvoˇrili software, kter´y bude vyuˇz´ıvat v´yhody unik´atn´ıch funkc´ı mobiln´ıch zaˇr´ızen´ı. Nejjed- noduˇsˇs´ım sc´en´aˇrem pro v´yvoj mobiln´ıch aplikac´ı je vz´ıt klasickou poˇc´ıtaˇcovou aplikaci a vloˇzit j´ı do mobiln´ıho zaˇr´ızen´ı. ˇC´ım je ale klasick´a aplikace ro- bustnˇejˇs´ı, t´ım problematiˇctˇejˇs´ı je tato technika. Lepˇs´ı pˇr´ıstup je vyv´ıjet apli- kace dˇelan´e pˇr´ımo pro mobiln´ı prostˇred´ı. Tato technika m˚uˇze vyuˇz´ıvat vˇsech v´yhod, kter´e mohou mobiln´ı zaˇr´ızen´ı poskytnout. Tento proces bere v ´uvahu jejich omezen´ı a pom´ah´a majitel˚um firem nastolit rovnov´aho mezi n´aklady a funkˇcnost´ı.
1. Sezn´amen´ı se s zadan´ymi technologiemi a souvisej´ıc´ımi pojmy
Modern´ı chytr´e telefony a tablety jsou vybaveny funkcemi jako je Blueto- oth, NFC (Near Field Communication), GPS, gyroskopick´e senzory, kamery a mnoho jin´ych. V´yvoj´aˇri pak mohou tyto funkce vyuˇz´ıvat pro vytvoˇren´ı apli- kac´ı s technologiemi jako je virtu´aln´ı realita, sn´ım´an´ı ˇc´arov´ych k´od˚u, sluˇzby pro kontrolu polohy a dalˇs´ı. Nej´uspˇeˇsnˇejˇs´ı a nejpopul´arnˇejˇs´ı mobiln´ı aplikace vyuˇz´ıvaj´ı tyto funkce chytr´ych telefon˚u na ten nejlepˇs´ı moˇzn´y zp˚usob. Ne vˇsechny chytr´e telefony maj´ı ale stejn´y hardware a proto jsou zde i komplikace.
V´yvoj´aˇri vyv´ıjej´ıc´ı aplikace pro iOS mohou oˇcek´avat, ˇze tyto aplikace pobˇeˇz´ı na dvou typech zaˇr´ızen´ı, kter´ymi jsou IPhony a IPady. Android v´yvoj´aˇri mus´ı ale poˇc´ıtat s t´ım, ˇze kaˇzd´y chytr´y telefon a tablet mohou m´ıt r˚uzn´y hadrware a r˚uzn´e verze operaˇcn´ıch syst´em˚u. Vedle toho je zde probl´em pro podniky, kter´e se rozhodnou vedle existuj´ıc´ı webov´e aplikace vytvoˇrit odpov´ıdaj´ıc´ı mobiln´ı aplikaci a to takov´y, ˇze mus´ı myslet na r˚uznorodost typ˚u mobiln´ıch zaˇr´ızen´ı a vytvoˇrit tak hned dvˇe mobiln´ı aplikace (iOS a Android)[8].
1.4 Hybridn´ı aplikace
Hybridn´ı aplikace funguj´ı troˇsku jako hybridn´ı auta. Kombinuj´ı starˇs´ı techno- logie (HTML, CSS, JavaScript) s inovativn´ımi nov´ymi technologiemi (mobiln´ı zaˇr´ızen´ı) a vytv´aˇr´ı produkt, kter´y pom´ah´a sniˇzovat spotˇrebu paliva (zdroje v´yvoj´aˇr˚u). Hybridn´ı aplikace pouˇz´ıv´a jedinou k´odovou z´akladnu ke sd´ılen´ı lo- giky aplikace mezi v´ıce zaˇr´ızen´ımi (mobiln´ı vs. webov´e) a platformami (iOS vs.
Android). Jinak ˇreˇceno, v´yvoj´aˇri nemus´ıˇreˇsit na jak´ym zaˇr´ızen´ı aplikaci pobˇeˇz´ı a jedin´e o co se mus´ı starat, je aby se aplikace dok´azala jednotliv´ym zaˇr´ızen´ım pˇrizp˚usobit. Hybridn´ı aplikace toto dok´aˇzou pomoc´ı naprogramov´an´ı apli- kace v bˇeˇzn´ych jazyc´ıch jako je HTML, CSS a JavaScript v kombinaci s mal´ym mnoˇzstv´ım nativn´ıho k´odu slouˇz´ıc´ım pro pr´aci s prvky specifick´ymi pro zaˇr´ızen´ı, jako jsou senzory, GPS, data a s´ıtˇe.
1.4.1 V´yhody hybridn´ıch aplikac´ı
Kdyˇz se pˇri v´yvoji mobiln´ıch aplikac´ı rozhoduje, jestli se bude aplikace vyv´ıjet jako nativn´ı aplikace nebo jako hybridn´ı aplikace, je tˇreba urˇcit jak´e jsou v´yhody a jak´e jsou nev´yhody jednotliv´ych pˇr´ıstup˚u. Technologie se rychle vyv´ıj´ı a trh se mus´ı efektivnˇe a sviˇznˇe pˇrizp˚usobovat aby udrˇzel krok s nej- novˇejˇs´ımi trendy. Hybridn´ı aplikace n´am umoˇzˇnuj´ı dostat se na poˇzadovan´y trh rychleji, levnˇeji a efektivnˇeji.
1.4.1.1 Rychleji
Sd´ılen´y k´od znamen´a m´enˇe ˇcasu. Schopnost hybridn´ıch aplikac´ı sd´ılet jednu k´odovou z´akladnu (codebase) napˇr´ıˇc nˇekolika platformami nab´ız´ı tempo v´yvoje, kter´e by nebylo v pˇr´ıpadˇe v´yvoje oddˇelen´ych aplikac´ı pro r˚uzn´e platformy 8
1.4. Hybridn´ı aplikace moˇzn´e. V´yvoj´aˇri hybridn´ıch aplikac´ı jsou tak´e schopni vyuˇz´ıvat dobˇre defino- van´e a dokumentovan´e API a velkou komunitu uˇzivatel˚u, kteˇr´ı pom˚uˇzou dia- gnostikovat pˇr´ıˇcinu probl´emu a vyˇreˇsit ho. D´ale jsou schopn´ı vyuˇz´ıt existuj´ıc´ı knihovny pro pouˇzit´ı z´akladn´ıch funkcionalit jako je pˇrihlaˇsov´an´ı, autentizace, platby a dalˇs´ı.
1.4.1.2 Levnˇeji
Cas jsou pen´ıze a hybridn´ı aplikace nejsou levnˇˇ ejˇs´ı jenom d´ıky tomu, ˇze jsou rychleji vytvoˇreny. Vzhledem k tomu, ˇze jsou hybridn´ı aplikace vyv´ıjeny pomoc´ı ˇsiroce pouˇz´ıvan´ych programovac´ıch jazyk˚u, je tak´e jednoduˇsˇs´ı naj´ıt v´yvoj´aˇre za rozumnou mzdu nebo smluvn´ı sazbu. Talentovan´ı v´yvoj´aˇri na- tivn´ıch aplikac´ı jsou hork´ym zboˇz´ım na trhu a proto mohou poˇzadovat za sv´e sluˇzby vyˇsˇs´ı ceny.
Hybridn´ı aplikace umoˇzˇnuj´ı tak´e jednomu v´yvojov´emu t´ymu efektivnˇe pra- covat na vytv´aˇren´ı aplikace pro v´ıce platforem ve srovn´an´ı s dvˇema nebo v´ıce odliˇsn´ymi t´ymy, kde kaˇzd´y vyv´ıj´ı troˇsku odliˇsnou aplikaci. Je nutno po- dotknout, ˇze hybridn´ı aplikace mohou b´yt levnˇejˇs´ı, ale hroz´ı zde to, ˇze se postupem ˇcasu stanou n´akladnˇejˇs´ımi. Pokud t´ym udˇel´a z´asadn´ı chyby v archi- tektuˇre nebo dostane nˇejak´y technick´y dluh, m˚uˇze doj´ıt k celkov´emu pˇrepsan´ı k´odov´e z´akladny.
1.4.1.3 L´epe
Je sporn´e ˇr´ıkat l´epe v kaˇzd´em pˇr´ıpadˇe, jelikoˇz v nˇekter´ych pˇr´ıpadech prostˇe d´av´a smysl vyv´ıjet nativn´ı aplikaci. Prvn´ı verze aplikace Instagram byla napˇr´ıklad k dispozici pouze pro iOS, protoˇze byla p˚uvodn´ı verze vytvoˇrena pro dobov´y fenom´en zn´am´y jako iPhonografie - fotky poˇr´ızen´e pomoc´ı iPhone zaˇr´ızen´ı.
Nakonec se vˇsak Instagram rozhodl aplikaci pˇredˇelat na hybridn´ı aplikaci, aby bylo moˇzn´e nab´ıdnout sd´ılenou z´akladnu k´odu, lepˇs´ı offline z´aˇzitek a sd´ılen´e WebView. Hybridn´ı aplikace mohou b´yt jednoduˇse konfigurovan´e a nasazen´e jako Progresivn´ı Webov´a Aplikace (PWA), coˇz umoˇzˇnuje aplikaci bˇeˇzet v webov´em prohl´ıˇzeˇci jako je Chrome, Safari, Firefox a mnoho dalˇs´ıch.
1.4.2 Nev´yhody hybridn´ıch aplikac´ı
Neexistuje zde ˇz´adn´a jednoduch´e ˇreˇsen´ı pˇri v´yvoji mobiln´ıch aplikac´ı. Eko- syst´em je neust´ale v pohybu a program´atoˇri se mus´ı starat o to, aby byl st´ale vyv´aˇzen´y. Firma m˚uˇze v pr˚ubˇehu v´yvoje ˇcelit r˚uzn´ym omezen´ım, jako je napˇr´ıklad ˇcas do uveden´ı aplikace na trh, vyschnut´ı finanˇcn´ıch zdroj˚u a dalˇs´ım probl´em˚um. Mus´ı proto peˇclivˇe zv´aˇzit v´yhody a nev´yhody strategick´ych roz- hodnut´ı v r´amci ˇzivotn´ıho cyklu aplikace.
1. Sezn´amen´ı se s zadan´ymi technologiemi a souvisej´ıc´ımi pojmy
1.4.2.1 Grafika a animace
Hybridn´ı aplikace zvl´adaj´ı jednoduˇse transformovat z´akladn´ı elementy jako jsou tlaˇc´ıtka, formul´aˇre, checkboxy a dalˇs´ı do nativn´ıho UI. Na druhou stranu komplexn´ı animace, grafiky a interakce s hardwarem je sloˇzitˇejˇs´ı. Animace je moˇzn´e vykreslit v hybridn´ıch aplikac´ıch pomoc´ı WebView, k´od se ale prov´ad´ı pomaleji neˇz by tomu tak bylo u nativn´ıho k´odu, kter´y m´a pˇr´ım´y pˇr´ıstup k hardwaru zaˇr´ızen´ı. To znamen´a, ˇze grafika a animace nemus´ı b´yt tak plynul´e pˇri pouˇz´ıv´an´ı aplikace. To je hlavn´ı d˚uvod toho, proˇc v´yvoj´aˇri mobiln´ıch her upˇrednostˇnuj´ı nativn´ı jazyky pˇred hybridn´ım pˇr´ıstupem.
1.4.2.2 Pluginy a buginy
Hybridn´ı aplikace nejsou vyv´ıjeny pomoc´ı nativn´ıch programovac´ıch jazyk˚u, kter´e jsou pˇrirozenˇe kompatibiln´ı s operaˇcn´ım syst´emem zaˇr´ızen´ı, na kter´em aplikace pobˇeˇz´ı. Proto mus´ı hybridn´ı aplikace vyuˇz´ıvat pluginy. Pluginy pom˚uˇzou aplikaci bˇeˇzet plynule, ale nesou sebou p´ar ´uskal´ı. Vzhledem k tomu, ˇze plu- giny vytv´aˇrej´ı tˇret´ı strany, je moˇzn´e ˇze funkcionalita, kter´e je d˚uleˇzit´ı pro chod aplikace, bude zastaral´a a nebo nebude v˚ubec v pluginu implementovan´a. Tato funkcionalita m˚uˇze b´yt tak d˚uleˇzit´a, ˇze se t´ym rozhodne pro pˇreps´an´ı pluginu nebo jeho vytvoˇren´ı, a to m˚uˇze v´est k dalˇs´ı finanˇcn´ı z´atˇeˇzi. Pluginy jsou tak´e velmi n´achyln´e k chyb´am v aplikaci. Tyto chyby vˇetˇsinou b´yv´a velmi obt´ıˇzn´e nal´ezt a opravit, jelikoˇz chybov´e hl´aˇsky a dokumentace jsou ps´any r˚uzn´ymi lidmi s r˚uzn´ymi konvencemi a kaˇzd´y plugin je vˇetˇsinou d´ılem nˇekoho jin´eho.
1.4.2.3 Limitace v produkci
Uˇz jsem diskutoval limity hybridn´ıch aplikac´ı, kter´e zahrnuj´ı kvalitu grafiky a animac´ı a probl´emy, kter´e mohou nastat pˇri pouˇzit´ı plugin˚u. Celkovˇe by se tedy dalo ˇr´ıci, ˇze hybridn´ı aplikace nejsou tak rychl´e jako nativn´ı mobiln´ı aplikace. Hybridn´ı aplikace potˇrebuj´ı nˇejak´y zabalen´y interface a pluginy, aby bylo moˇzn´e aplikaci zkompilovat a pouˇz´ıvat j´ı na mobiln´ım zaˇr´ızen´ı. Tyto kroky nav´ıc podstatnˇe zpomaluj´ı rychlost naˇc´ıt´an´ı aplikace.
I navzdory tˇemto nev´yhod´am hybridn´ıch aplikac´ı, jsou zde moˇznosti, jak tyto omezen´ı obej´ıt a dodat tak uˇzivatel˚um plynulou a funkˇcn´ı aplikaci. Napˇr´ıklad Instagram pˇriˇsel s velmi efektivn´ım a elegantn´ım ˇreˇsen´ım, jak vyuˇz´ıt spr´avnˇe ˇcas, potˇrebn´y pro naˇcten´ı fotografie. Kdyˇz uˇzivatel pˇrid´a fotografii, zaˇcne se automaticky nahr´avat na pozad´ı, zat´ımco uˇzivatel p´ıˇse popisek a vyb´ır´a tagy. Pot´e kdyˇz je uˇzivatel pˇripraven fotografii nahr´at, bude to vypadat, ˇze se nahr´ala okamˇzitˇe, bez jak´ychkoliv prodlev.[9]
10
1.5. WebView
1.5 WebView
Kdyˇz se firma rozhodne pro v´yvoj mobiln´ı aplikace, mus´ı myslet na dvˇe rozd´ıln´e platformy jako jsou iOS a Android. Pokud uˇz existuje android apli- kace, je potˇreba vyvinout podobnou aplikaci pro iOS a obr´acenˇe. Kdyˇz dojde k aktualizaci v jednom k´odu, mus´ı se aktualizovat i ten druh´y. Vˇsechnu tu tˇeˇzkou pr´aci je potˇreba vykon´avat dvakr´at. Nen´ı to ide´aln´ı stav, je ale potˇreba dˇelat vˇse co se d´a, aby se obeˇsla omezen´ı kladen´a na to, co je moˇzno vyvinout.
Je zde ale nadˇeje. Je tu cesta, jak pouˇz´ıt 80% stejn´eho k´odu na v´yvoj iOS i Android aplikace. Strategie je takov´a, ˇze se aplikace nap´ıˇse pomoc´ı programo- vac´ıch jazyk˚u jako je JavaScript, HTML a CSS. Pot´e se pouˇzije koncept Web- View (kontejner pro webov´e str´anky) v nativn´ı mobiln´ı aplikaci k tomu, aby zobrazil str´anky v aplikaci (ukl´ad´an´ı uˇzivatelsk´ych preferenc´ı. dynamick´eho obsahu, grafiky a dalˇs´ıch). HTML, CSS a JavaScript by mˇely b´yt vyhovuj´ıc´ı, aby prov´adˇely vˇsechny tyto operace uvnitˇr WebView, na jak´emkoliv zaˇr´ızen´ı, kter´e podporuje WebView.
Aplikace, kter´e vyuˇz´ıv´a konceptu WebView je prim´arnˇe utvoˇrena z JavaScriptu, HTML a CSS soubor˚u. Webovou aplikaci tvoˇr´ı klasicky jedna nebo v´ıce webov´ych str´anek. Tyto str´anky utvoˇr´ı front-end rozhran´ı. Dalo by se tedy ˇr´ıci, ˇze Web- View je okno, skrz kter´e vaˇse zaˇr´ızen´ı zobrazuje tyto webov´e str´anky. Norm´alnˇe uˇzivatel´e pouˇz´ıvaj´ı pro zobrazen´ı webov´ych str´anek webov´e prohl´ıˇzeˇce. Web- View v tomto pˇr´ıpadˇe nahrazuje webov´e prohl´ıˇzeˇce. M´ısto toho, aby uˇzivatel´e mohli mˇenit webov´e str´anky, WebView zobraz´ı pouze str´anky, kter´e souvis´ı pˇr´ımo s aplikac´ı. Mechanicky je aplikace pouze smˇesice webov´ych str´anek. Es- teticky se ale aplikace chov´a a vypad´a jako nativn´ı aplikace. To je koncept WebView.
WebView m˚uˇze ale pokr´yt nejv´yˇse 80% k´odu pro oba syst´emy. Zbyl´ych 20%
bude potˇreba pokr´yt k´odem, kter´y je specifick´y pro dan´y operaˇcn´ı syst´em, aby se WebView chovalo spr´avnˇe jak by mˇelo. WebView pro iOS se liˇs´ı od WebView pro Android a je proto zapotˇreb´ı ps´at specifick´y k´od pro kaˇzd´y jin´y typ WebView. Jestli se nˇekdo rozhodne pro vytvoˇren´ı aplikace pro obˇe dvˇe platformy ve WebView, mus´ı pracovat s unik´atn´ımi technikami WebView, pro dva r˚uzn´e svˇety. Je tˇreba podotknou, ˇze odhad 80% ku 20%, je velmi hrub´a aproximace pomˇeru WebView k´odu a k´odu specifick´eho pro r˚uzn´e platformy.
Procenta mohou kolerovat pro r˚uzn´e projekty s ohledem na to, co bude jejich c´ılem a ˇceho budou cht´ıt dos´ahnout.[10]
1. Sezn´amen´ı se s zadan´ymi technologiemi a souvisej´ıc´ımi pojmy
1.6 Pouˇ zit´ e programovac´ı jazyky a podp˚ urn´ e technologie
Jazyky, jako je HTML a CSS, kter´e jsou ´uzce spjat´e s WebView, jsem se rozhodl v pr´aci bl´ıˇze nepopisovat, jelikoˇz nemaj´ı na c´ıl pr´ace ˇz´adn´y vliv ani dopad. Pro sezn´amen´ı se s pouˇzit´ymi programovac´ımi jazyky jsem se rozhodl zvolit obecnou kapitolu a jednotliv´e jazyky popsat pouze okrajovˇe. Tˇemito jazyky se budu hloubˇeji zab´yvat v analytick´e ˇc´asti pr´ace, kde budu popisovat jejich moˇznosti propojen´ı pro z´ısk´an´ı uˇzivatelsky pˇr´ıvˇetiv´e nativn´ı aplikace ve formˇe WebView. Pop´ıˇsi zde jazyky jako jsou JavaScript, React a React Native.
D´ale zde pop´ıˇsi technologie, kter´e s tˇemito jazyky jdou ruku v ruce a jejich pouˇz´ıv´an´ı usnadˇnuje program´ator˚um kaˇzd´y dalˇs´ı den.
1.6.1 JavaScript
JavaScript je scriptovac´ı jazyk, kter´y se pouˇz´ıv´a ke kontrole a vytv´aˇren´ı dy- namick´ych ˇc´ast´ı webov´e aplikace. Jinak ˇreˇceno, vˇse co se pohybuje nebo jak- koliv jinak mˇen´ı na obrazovce bez manu´aln´ı aktualizace webov´e aplikace nebo str´anky. M˚uˇze to b´yt animovan´a grafika, prezentace fotek, naˇsept´av´an´ı textu, interaktivn´ı formul´aˇre a dalˇs´ı. Skriptovac´ı jazyky jsou programovac´ı jazyky, kter´e slouˇz´ı k automatizaci pr´ace, kterou by bylo jinak zapotˇreb´ı prov´adˇet krok za krokem. D´ıky tomu, ˇze je JavaScript tolik integrovan´a webov´a funkci- onalita, vˇsechny hlavn´ı prohl´ıˇzeˇce uˇz maj´ı v z´akladu vestavˇen´e n´astroje, kter´e umoˇzˇnuj´ı vykreslovat JavaScript. JavaScript je moˇzn´e ps´at pˇr´ımo do HTML dokumentu a nen´ı zapotˇreb´ı stahovat dodateˇcn´e kompil´atory. JavaScript se pouˇz´ıv´a jak pro front-end tak pro back-end aplikace.[11]
1.6.2 React JS
React je JavaScriptov´a knihovna, kter´a se vyuˇz´ıv´a pro vytv´aˇren´ı rychl´ych a interaktivn´ıch rozhran´ı pro weby a mobiln´ı aplikace. Je to pro vˇsechny do- stupn´a (open-source), komponentovˇe zaloˇzen´a, front-endov´a knihovna, kter´e se star´a pouze o View vrstvu aplikace. V MVC architektuˇre je View vrstva zodpovˇedn´a za to, jak aplikace vypad´a a jakou d´av´a uˇzivatel˚um zkuˇsenost. Re- act byl vytvoˇren Jordanem Walkerem, softwarov´ym inˇzen´yrem z Facebooku.
React rozdˇeluje UI (uˇzivatelsk´e rozhran´ı) na komponenty, kde kaˇzd´a kompo- nenta m´a svoji unik´atn´ı funkcionalitu.
Hlavn´ı s´ılou reactu jsou dva vestavˇen´e typy promˇenn´ych, kter´e se naz´yvaj´ı stav (state) a vlastnosti (properties, zkracenˇe props). State slouˇz´ı k ukl´ad´an´ı dat a props k pˇred´av´an´ı dat mezi komponentami. React si uchov´av´a lehˇc´ı verzi opravdov´eho DOMu (Document Object Model) v pamˇeti, jinak tak´e zn´amou jako Virtu´aln´ı DOM (VDOM). T´ım p´adem, kdyˇz dojde v nˇekter´e z komponent ke zmˇenˇe stavu nebo vlastnosti komponenty (dojde ke zmˇenˇe 12
1.6. Pouˇzit´e programovac´ı jazyky a podp˚urn´e technologie promˇenn´ych state nebo props), VDOM zmˇen´ı pouze tu jednu dotyˇcnou kom- ponentu v DOM a uˇsetˇr´ı t´ım znovunaˇc´ıt´an´ı cel´eho DOM. To znaˇcnˇe urychluje chod aplikace.[12]
1.6.3 NPM
NPM je zkratka pro Node Package Manager a je to z´akladn´ı metoda, jak ˇr´ıdit a zach´azet s bal´ıˇcky v bˇehov´em prostˇred´ı Node.js. Pouˇz´ıv´a se prostˇrednictv´ım klienta z pˇr´ıkazov´eho ˇr´adku a pˇristupuje k datab´azi veˇrejn´ych a pr´emiov´ych bal´ıˇck˚u zn´am´ych jako registr npm. Vˇetˇsina bal´ıˇck˚u je open-source a uˇzivatel´e je mohou dle libosti pouˇz´ıvat. Npm i jeho registr jsou spravov´any spoleˇcnost´ı npm, Inc.[13]
1.6.4 Yarn
Yarn byl vyvinut spoleˇcnost´ı Facebook s c´ılem vyˇreˇsit nˇejak´e neduhy v´yˇse zm´ınˇen´eho npm. Technicky vzato, Yarn nen´ı n´ahraˇzkou za npm, jelikoˇz z´avis´ı na nˇekter´ych modulech z npm registr˚u. Yarn by se dal tedy br´at jako nov´y instanˇcn´ı prvek, kter´y st´ale vych´az´ı se stejn´e struktury npm. Registr jako takov´y se nezmˇenil, ale pouze jeho instalaˇcn´ı metoda. Hlavn´ı rozd´ıl oproti npm je jeho rychlost, yarn je skoro dvakr´at rychlejˇs´ı neˇz posledn´ı verze npm.
D´ıky tomu, ˇze yarn vyuˇz´ıv´a stejn´e bal´ıˇcky jako npm je pˇrechod z npm na yarn plynul´y a nen´ı potˇreba mˇenit workflow.[14]
1.6.5 React Native
React Native nebo tak´e jinak zn´am´y jako RN, je velmi popul´arn´ı, rozˇs´ıˇren´a, JavaScriptovˇe zaloˇzen´a knihovna, urˇcen´a pro v´yvoj mobiln´ıch aplikac´ı jak pro iOS tak pro Android. Knihovna umoˇzˇnuje vytv´aˇret aplikace pro r˚uzn´e aplikace pouˇzit´ım stejn´eho k´odov´eho z´akladu. React Native byl vyvinut stejnˇe jako React JS spoleˇcnost´ı Facebook v roce 2015. Uˇz za p´ar let se z nˇej stal fenom´en ve v´yvoji mobiln´ıch aplikac´ı. V React Native jsou naps´any jedny z nejvˇetˇs´ıch mobiln´ıch aplikac´ı na svˇetˇe, jako jsou Facebook, Instagram nebo Skype. D´ıky tomu, ˇze v React Native lze vyv´ıjet aplikace pro iOS i pro Android soubˇeˇznˇe, mohly firmy, kter´e ho zaˇcaly pouˇz´ıvat znaˇcnˇe uˇsetˇrit pen´ıze i ˇcas. React Native je zaloˇzen na React JS, kter´y je stejnˇe popul´arn´ı v oddˇelen´ı webov´ych aplikac´ı.
D´ıky tomu nen´ı probl´em pro zkuˇsen´e React v´yvoj´aˇre pˇrej´ıt na v´yvoj mobiln´ıch aplikac´ı, jenˇz byl dˇr´ıve z´aleˇzitost´ı jazyk˚u, kter´e se znaˇcnˇe liˇsily.[15]
Kapitola 2
Anal´ yza pouˇ zit´ ych technologi´ı
V t´eto ˇc´asti bych se chtˇel vˇenovat podrobn´e anal´yze WebView. Nejdˇr´ıve zm´ın´ım dalˇs´ı moˇznosti, jak lze v dneˇsn´ı dobˇe vyvinout mobiln´ı aplikace jinak, neˇz za pouˇzit´ı nativn´ıho programovac´ıho jazyka a pot´e tak´e zhodnot´ım, z jak´eho d˚uvodu jsem se rozhodl zrovna pro koncept WebView. Budu se v t´eto kapi- tole tak´e vˇenovat jednotliv´ym programovac´ım jazyk˚um, kter´e jsem zm´ınil v´yˇse a pop´ıˇsu zp˚usob, jak nejl´epe je vyuˇz´ıt v kombinaci s WebView.
2.1 Dalˇ s´ı zp˚ usoby, jak´ ymi lze dos´ ahnout stejn´ eho v´ ysledku jako s WebView
Jak uˇz je zm´ınˇeno v n´azvu pr´ace i v ´uvodu, pro v´yvoj mobiln´ı aplikace, kter´a bude m´ıt stejnou k´odovou z´akladnu jak pro syst´em iOS tak pro Android, jsem zvolil koncept WebView. Mobiln´ı aplikace, kter´a je implementov´ana formou WebView, je typ hybridn´ı mobiln´ı aplikace. Existuj´ı ale dalˇs´ı moˇznosti, jak doc´ılit stejn´eho v´ysledku. R´ad bych tedy pˇredt´ım neˇz se dostanu k anal´yze samotn´eho WebView zm´ınil tyto dalˇs´ı moˇznosti, vyzdvihl jejich v´yhody a nev´yhody a vysvˇetlil, z jak´eho d˚uvodu jsem zvolil pr´avˇe koncept WebView.
V dneˇsn´ı dobˇe, jiˇz nen´ı nativn´ı aplikace jedin´a cesta, pro vytvoˇren´ı funkˇcn´ı a uˇzivatelsky pˇr´ıvˇetiv´e mobiln´ı aplikace. Firmy se mohou rozhodnout, jestli zvol´ı cestu hybridn´ı aplikace, kter´a spoˇc´ıv´a na webov´ych technologi´ıch. Nebo mohou vyuˇz´ıvat benefity cross-platformn´ıch v´yvojov´ych n´astroj˚u jako je React Native nebo Flutter. Na obr´azku 2.1 m˚uˇzete vidˇet diagram, jak postupovat pˇri rozhodov´an´ı, jak´y zp˚usob pro v´yvoj mobiln´ı aplikace by mˇel nejv´ıce vyhovovat poˇzadavk˚um spoleˇcnosti.
2.1.1 Nativn´ı v´yvoj mobiln´ı aplikace
Tento zp˚usob v´yvoje mobiln´ı aplikace je samozˇrejmˇe nejˇz´adanˇejˇs´ı, ale ne vˇsichni si takov´y luxus mohou dovolit. Zahrnuje to vytvoˇren´ı mobiln´ı aplikace, kter´a je
2. Anal´yza pouˇzit´ych technologi´ı
Obr´azek 2.1: Zvolen´ı pˇr´ıstupu v´yvoje mobiln´ı aplikace [1]
pˇrizp˚usobena kaˇzd´e platformˇe zvl´aˇst’. V tomto pˇr´ıpadˇe program´atoˇri vyuˇz´ıvaj´ı programovac´ı jazyky, kter´e jsou nativn´ı k dan´emu operaˇcn´ımu syst´emu. M˚uˇze to b´yt Java nebo v posledn´ı dobˇe Kotlin pro Android, a Swift nebo Objective- C pro iOS. Uˇzivatel´e vˇzdy ocen´ı nativn´ı aplikace kv˚uli jejich v´ykonu a na m´ıru ˇsit´em UX (User Experience). Tento pˇr´ıstup vˇsak odrad´ı pˇredevˇs´ım startupy kv˚uli finanˇcn´ı n´aroˇcnosti. Cena je kl´ıˇcov´ym rozd´ılem mezi nativn´ım a hyb- ridn´ım v´yvojem mobiln´ıch aplikac´ı.
Pˇri v´yvoji nativn´ı aplikace maj´ı v´yvoj´aˇri pln´y pˇr´ıstup ke vˇsem moˇznostem dan´eho zaˇr´ızen´ı. To jim umoˇzˇnuje vyv´ıjet pokroˇcilejˇs´ı funkcionality jako je spr´ava pamˇeti, komplexn´ı s´ıt’ov´an´ı a dalˇs´ı. Nejvˇetˇs´ı v´yzvou je zde ale rozbˇehnout aplikaci na dvou platform´ach. K doc´ılen´ı toho je zapotˇreb´ı oddˇelen´e k´odov´a z´akladna. Nˇekter´a nativn´ı rozˇs´ıˇren´ı umoˇzˇnuj´ı sd´ılen´ı k´odu. Napˇr´ıklad m˚uˇzete sd´ılet C++ knihovny mezi iOS a Android aplikac´ı za pomoci Java Native In- terface.
V´yvoj´aˇri pˇri v´yvoji iOS aplikac´ı pouˇz´ıvaj´ı n´astroje jako je XCode, AppCode, Atom a pro Android aplikace zase Android Studio, Android IDE nebo IDEA od Intellij. Android aplikace lze vyv´ıjet jak na macOS tak na Windows, iOS aplikace lze ale vyv´ıjet pouze na syst´emu macOS a to tak´e m˚uˇze b´yt dalˇs´ı fi- nanˇcn´ı z´atˇeˇz´ı pro firmy, jelikoˇz Apple poˇc´ıtaˇce b´yvaj´ı draˇzˇs´ı neˇz ty na kter´ych bˇeˇz´ı Windows. ˇCistˇe nativn´ı aplikace jsou pak napˇr´ıklad Artsy, Pinterest nebo iOS kalkulaˇcka.[16]
16
2.1. Dalˇs´ı zp˚usoby, jak´ymi lze dos´ahnout stejn´eho v´ysledku jako s WebView 2.1.2 Hybridn´ı v´yvoj mobiln´ı aplikace
Aplikace nemus´ı b´yt nativn´ı, aby uˇzivatel˚um dopˇr´ala dobrou mobiln´ı zkuˇsenost.
Projekt m˚uˇze m´ıt jin´e priority, jako je napˇr´ıklad dostat aplikaci rychle na trh.
Hybridn´ı aplikace nen´ı jenom levnˇejˇs´ı alternativa, pro jej´ı v´yvoj je zapotˇreb´ı menˇs´ı mnoˇzstv´ı ˇcasu a umoˇzˇnuje sd´ılen´ı k´odu. Druhou stranou mince m˚uˇze b´yt pomal´y v´ykon a neoptim´aln´ı uˇzivatelsk´a zkuˇsenost. Teoreticky je vˇsak moˇzn´e dos´ahnout skvˇel´eho UX a navigaˇcn´ıch vzor˚u z vizu´aln´ıho hlediska, je zapotˇreb´ı ale zkuˇsen´ych program´ator˚u aby aplikace splˇnovala takov´e poˇzadavky. V´ıce o hybridn´ıch aplikac´ıch je pops´ano v sekci 1.4.
Dvˇema nejzn´amnˇejˇs´ımi frameworky pro psan´ı hybridn´ıch mobiln´ıch aplikac´ı jsou zcela jistˇe Ionic a Apache Cordova.[17]
2.1.2.1 Apache Cordova
Apache Cordova je open-source mobiln´ı framework. Umoˇzˇnuje vyuˇz´ıvat stan- dardn´ı webov´e technologie jako je HTML, CSS a JavaScript pro cross-platformn´ı v´yvoj. Aplikace je vˇzdy zaobalena do kontejneru, kter´y odpov´ıd´a platformˇe, na kter´e je aplikace spouˇstˇena. Pˇri pˇr´ıstupu k senzor˚um, dat˚um a s´ıt’ov´ym prvk˚um zaˇr´ızen´ı spol´eh´a na standardy vyhovuj´ıc´ıho API. Aplikace psan´e v tomto frameworku vych´az´ı z souboru config.xml, kde jsou uloˇzeny informace o aplikaci a specifikuje parametry, kter´e ovlivˇnuj´ı chod aplikace. Aplikace jako takov´a je implementovan´e jako webov´a str´anka, kter´a zaˇc´ın´a souborem in- dex.html, kter´e odkazuje na styly CSS, JavaScript, soubory, fotografie a dalˇs´ı prvky, kter´e jsou d˚uleˇzit´e pro chod aplikace.
Aplikace je spouˇstˇena jako WebView v nativn´ım kontejneru, ze kter´eho se vy- tvoˇr´ı bin´arn´ı soubor a je vloˇzen na Apple Store nebo Google Play. WebView s podporou Apache Cordova m˚uˇze tvoˇrit celou aplikaci, ale m˚uˇze tak´e b´yt pouˇzito pouze jako komponenta ve vˇetˇs´ı hybridn´ı aplikaci, kde se kombinuje WebView s nativn´ım komponentami aplikace.[18]
2.1.2.2 Ionic
Ionic je framework kter´y se pouˇz´ıv´a k v´yvoji mobiln´ıch aplikac´ı za pouˇzit´ı HTML, CSS a JavaScriptu. Kromˇe tˇechto jazyk˚u ho lze kombinovat tak´e s jin´ymi front-endov´ymi jazyky, jako je Angular, React a dalˇs´ı. Ionic vych´az´ı a vˇzdycky vych´azel z Apache Cordova viz 2.1.2.1. Ionic samotn´y je sp´ıˇse UI (User Interface) framework, kter´y poskytuje upraven´e vstupn´ı a v´ystupn´ı ele- menty, kter´e jsou navrˇzeny pro mobiln´ı zaˇr´ızen´ı.[19]
2. Anal´yza pouˇzit´ych technologi´ı
2.1.3 Cross-platformn´ı v´yvoj mobiln´ı aplikace
Je nutn´e hned ze zaˇc´atku ˇr´ıci, ˇze hybridn´ı a cross-platformn´ı zp˚usob v´yvoje nejsou to sam´e. Jedin´ym spoleˇcn´ym rysem tˇechto dvou pˇr´ıstup˚u je sd´ılen´ı k´odu pro r˚uzn´e platformy. D´ıky tomu oba dva zp˚usoby umoˇzˇnuj´ı znaˇcnˇe urychlit v´yvoj. Cross-platformn´ı zp˚usob v´yvoje vyuˇz´ıv´a nativn´ı vykreslovac´ı modul. K´odov´a z´akladna napsan´a v JavaScriptu se napoj´ı na nativn´ı kom- ponenty pˇres tak zvan´e mosty. D´ıky tomuto pˇr´ıstupu je moˇzn´e doc´ılit skoro stejn´e uˇzivatelsk´e zkuˇsenosti jako pˇri pouˇz´ıv´an´ı nativn´ı aplikace. Nab´ız´ı bez- probl´emovou funkˇcnost, snadnou implementaci a n´aklady na v´yvoj aplikace nemus´ı b´yt vysok´e. Pˇrizp˚usoben´ı r˚uzn´ym platform´am je vˇsak omezov´ano pouˇz´ıvan´ym frameworkem a to si m˚uˇze vybrat svoj´ı daˇn na v´ykonu aplikace. Takov´ymi frameworky mohou b´yt React Native, Xamarin nebo Flutter. Mnoho velmi pouˇz´ıvan´ych aplikac´ı bylo vytvoˇreno t´ımto pˇr´ıstupem a klasick´y uˇzivatel by ne- poznal rozd´ıl. Je to napˇr´ıklad aplikace Bloomberg, Insightly nebo Reflectly.[20]
React Native
React Native uˇz jsem popisoval v sekci 1.6.5 a d´ale v pr´aci se bl´ıˇze budu zab´yvat pouze jednotliv´ymi komponentami, kter´e poskytuje pro ˇreˇsen´ı za- dan´eho probl´emu. Jedin´e co zm´ın´ım je to, ˇze s pouˇzit´ım tohoto frameworku lze dos´ahnout dobr´eho v´ykonu aplikace. Na rozd´ıl od Apache Cordova totiˇz pˇrev´ad´ı zdrojov´y k´od na nativn´ı aplikaci m´ısto toho, aby aplikace bˇeˇzela v zabudovan´em prohl´ıˇzeˇci jako je WebView. V tomto frameworku ale existuje knihovna, kter´e umoˇzˇnuje vyuˇz´ıvat WebView jako komponentu a lze ji kombi- novat s nativn´ım pˇr´ıstupem, kter´y dod´av´a React Native. Tyto dvˇe technologie spolu mohou vz´ajemnˇe komunikovat a lze tedy vyuˇz´ıt lepˇs´ı v´ykon kter´y dod´av´a React Native v kombinaci s daleko vˇetˇs´ım mnoˇzstv´ım znovupouˇziteln´eho k´odu, kter´ym se pyˇsn´ı WebView.[21]
Xamarin
Xamarin je n´astroj, jenˇz se vyuˇz´ıv´a pro cross-platformn´ı v´yvoj mobiln´ıch apli- kac´ı a umoˇzˇnuje v´yvoj´aˇr˚um sd´ılet aˇz 90% k´odu napˇr´ıˇc hlavn´ımi platformami.
Xamarin pˇriˇsel na svˇet v roce 2011 pod veden´ım Miguela Icaza jako open- source v´yvojov´a platforma zaloˇzen´a na framworku .NET. V roce 2016 z´ıskal Xamarin Microsoft a udˇelal z nˇej bal´ıˇcek pro v´yvoj softwaru (SDK), kter´y je dostupn´y jako doplnˇek ve sv´ych v´yvojov´ych prostˇred´ıch. Technicky ˇreˇceno, Xamarin pouˇz´ıv´a nativn´ı knihovny jazyka C# zabalen´e v .NET vrstvˇe urˇcen´e pro cross-platformn´ı mobiln´ı v´yvoj.
Zat´ımco k´od, spojen´y s business logikou, pˇr´ıstupy do datab´aze a s´ıt’ov´ymi prvky m˚uˇze b´yt sd´ılen´y mezi jednotliv´ymi platformami, Xamarin um´ı vytv´aˇret vrstvy UI specifick´e pro kaˇzdou platformu. D´ıky tomu cross-platformn´ı apli- 18
2.1. Dalˇs´ı zp˚usoby, jak´ymi lze dos´ahnout stejn´eho v´ysledku jako s WebView kace vytvoˇren´e pomoc´ı Xamarinu vypadaj´ı 100% jako nativn´ı aplikace a po- skytnou uˇzivatel˚um lepˇs´ı uˇzivatelsk´y z´aˇzitek neˇz hybridn´ı aplikace.[22]
Flutter
Flutter je bezplatn´y a veˇrejnˇe dostupn´y UI framework, pouˇz´ıvan´y pro v´yvoj cross-platformn´ıch aplikac´ı, vydan´y spoleˇcnost´ı Google v roce 2017. Jako po- dobn´e frameworky, umoˇzˇnuje vytv´aˇret mobiln´ı aplikace pro r˚uzn´e platformy za pouˇzit´ı jedn´e k´odov´e z´akladny. Flutter se skl´ad´a ze dvou ˇc´ast´ı a to z
1. kolekce n´astroj˚u, urˇcen´e pro jednoduˇsˇs´ı v´yvoj aplikac´ı zvan´e SDK. To zahrnuje n´astroje potˇrebn´e pro kompilaci k´odu do nativn´ıho strojov´eho k´odu (k´od pro Android nebo pro iOS).
2. A knihovny zaloˇzen´e na widgetech. Coˇz je kolekce znovupouˇziteln´ych UI element˚u jako jsou tlaˇc´ıtka, textov´a vstupy, nadpisy a dalˇs´ı, kter´e lze upravovat dle potˇreby.
Flutter pouˇz´ıv´a programovac´ı jazky Dart, coˇz je jazyk, kter´y pˇredstavila spoleˇcnost Google v roce 2011 a za ty roky se z nˇej stal velmi pouˇz´ıvan´y jazyk. Dart se zamˇeˇruje na front-end, lze jej tedy pouˇz´ıt k programov´an´ı mobiln´ıch a webov´ych aplikac´ı. Je to objektovˇe orientovan´y jazyka a m´a podobnou syn- taxi jako JavaScript. [23]
2.1.4 Progresivn´ı webov´a aplikace
Progresivn´ı webov´a aplikace, zkr´acenˇe PWA, je nov´a technologie se kterou pˇriˇsla na trh firma Google. D´ıky t´eto technologii lze na mobiln´ım zaˇr´ızen´ı pˇridat webovou aplikaci na domovskou str´anku chytr´eho telefonu ve formˇe ikonky a umoˇzˇnuje k t´eto str´ance pˇristupovat i bez pˇripojen´ı k s´ıti. Aby se z webov´e aplikace stala PWA je zapotˇreb´ı pouze tˇr´ı vˇec´ı.
1. Pˇridat ikonku pro webovou aplikaci na domovsk´e str´ance zaˇr´ızen´ı.
2. Pˇridat manifest pro webovou aplikaci.
3. Pˇridat nˇejak´eho spr´avce sluˇzeb, kter´y se bude starat o naˇc´ıt´an´ı aplikace i bez pˇripojen´ı k s´ıti, o rychlejˇs´ı naˇc´ıt´an´ı a o zas´ıl´an´ı push notifikac´ı (notifikace vyskakuj´ıc´ı kdyˇz uˇzivatel nepouˇz´ıv´a aplikaci).
Z pohledu rychlosti v´yvoje a finanˇcn´ı n´aroˇcnosti je tento zp˚usob zaruˇcenˇe nej- lepˇs´ı. Pokud existuje webov´a aplikace, staˇc´ı ji pouze doplnit o tˇri aspekty nutn´e pro PWA a m´ıt responzivn´ı design pro mobiln´ı aplikace. Kdyˇz se uˇzivatel ve sv´em chytr´em telefonu dostane pˇres internetov´y prohl´ıˇzeˇc na webovou str´anku nebo aplikaci, kter´a m´a upraven´y zdrojov´y k´od podle PWA poˇzadavk˚u, vy- skoˇc´ı liˇsta, jenˇz d´a uˇzivateli vˇedˇet, ˇze je tato webov´a aplikace PWA a m˚uˇze si j´ı uloˇzit na domovskou str´anku zaˇr´ızen´ı. Tato liˇsta obsahuje vˇetˇsinou kr´atkou
2. Anal´yza pouˇzit´ych technologi´ı
informaci a tlaˇc´ıtko, na kter´e kdyˇz se klikne, tak se provede akce uloˇzen´ı. Jak to vypad´a lze vidˇet na obr´azku 2.2.[24]
Obr´azek 2.2: Vyskakovac´ı liˇsta pro staˇzen´ı PWA
Nastaven´ı aplikace mus´ı splˇnovat jist´a pravidla, aby internetov´y prohl´ıˇzeˇc vy- hodnotil aplikaci jako PWA a zobrazil vyskakovac´ı liˇstu. Prohl´ıˇzeˇc zobraz´ı liˇstu kdyˇz:
• Webov´a aplikace jeˇstˇe nen´ı staˇzena do zaˇr´ızen´ı.
• Splˇnuje heuristiku zapojen´ı uˇzivatel˚u.
• Webov´a aplikace pouˇz´ıv´a https protokol.
• Zahrnuje manifest webov´e aplikace, kter´y mus´ı m´ıt atributy jako:
– short namenebo name 20
2.1. Dalˇs´ı zp˚usoby, jak´ymi lze dos´ahnout stejn´eho v´ysledku jako s WebView – icons - mus´ı zahrnovat 192px a 512px ikonu
– start url
– display - mus´ı b´yt jedno zfullscreen,standalone nebominimal-ui
• Registrovan´y spr´avce sluˇzeb [25]
Tyto krit´eria plat´ı pro prohl´ıˇzeˇc Chrome, kde pro ostatn´ı se mohou v nˇejak´ych aspektech liˇsit. Tyto odchylky nejsou ale d˚uleˇzit´e a proto se jimi nebude d´ale zab´yvat. V´yhodou tohoto pˇr´ıstupu je zcela urˇcitˇe jednoduchost ˇreˇsen´ı, moˇznost spouˇstˇen´ı webov´ych str´anek bez pˇr´ıstupu do s´ıtˇe, push noti- fikace a aplikace, kter´e jsou PWA, maj´ı lepˇs´ı ranking pˇri hled´an´ı kl´ıˇcov´ych slov v prohl´ıˇzeˇci. Tato technologie ale pouze zaobaluje prohl´ıˇzeˇc, nen´ı to plnˇe funkˇcn´ı nativn´ı aplikace a technicky to je poˇr´ad webov´a str´anka. Metriky jako interakce, animace a v´ykon se nemohou rovnat nativn´ım aplikac´ım jelikoˇz je uˇzivatelsk´e rozhran´ı pouze internetov´y prohl´ıˇzeˇc bez URL ˇc´asti v horn´ı ˇc´asti zaˇr´ızen´ı. A nejvˇetˇs´ım nedostatkem t´eto technologie je nulov´a podpora pro iOS syst´emy (iPhony a iPady).
Avˇsak i pˇres tyto nedostatky je tato technologie vyuˇz´ıv´ana a naˇsla uplatnˇen´ı pˇredevˇs´ım v sektoru internetov´ych obchod˚u. PWA jsou napˇr´ıklad Flipkart, Forbes nebo AliExpress.[26]
2.1.5 V´ysledn´e shrnut´ı a d˚uvod proˇc bylo zvoleno WebView At’ uˇz m´a spoleˇcnost jiˇz hotovou webovou aplikaci a k n´ı chce vytvoˇrit od- pov´ıdaj´ıc´ı mobiln´ı aplikaci a nebo chce vytvoˇrit pouze mobiln´ı aplikaci, mˇela by pˇred samotn´ym v´yvojem urˇcit, jak´a moˇznost se pro danou firmu a typ apli- kace nejl´epe hod´ı. V sekc´ıch v´yˇse, jsem zm´ınil ty nejˇcastˇeji a nejv´ıce uˇz´ıvan´e postupy a technologie kdyˇz dojde na ˇreˇsen´ı tohoto probl´emu. Na ˇcem ale z´aleˇz´ı nejv´ıce, jsou poˇzadavky spoleˇcnosti nebo z´akazn´ıka na aplikaci. M´a b´yt aplikace rychle vydan´a, je dostatek finanˇcn´ıch prostˇredk˚u na v´yvoj mobiln´ı aplikace, m´a b´yt aplikace pˇripravena na vysokou uˇzivatelskou z´atˇeˇz, to zna- men´a m´a b´yt v´ykonn´a? Jestli dok´aˇze spoleˇcnost jasnˇe urˇcit tyto aspekty, tak pot´e m˚uˇze sn´aze urˇcit spr´avn´y postup pro v´yvoj aplikace. Pro lepˇs´ı pˇrehled lze v tabulce 2.1 vidˇet kr´atkou rekapitulaci vˇsech metod na jednom m´ıstˇe.
Typ aplikace Nativn´ı Hybridn´ı Cross-platformn´ı
N´astroje
XCode Ionic React Native
AppCode Apache Cordova Xamarin
Android Studio Visual Studio Flutter
2. Anal´yza pouˇzit´ych technologi´ı
Zp˚usob vykreslen´ı Nativn´ı V prohl´ıˇzeˇci Nativn´ı
Knihovny Nez´avis´ı moc
na open-source knihovn´ach a na platformˇe (kaˇzd´a platforma m´a sv˚uj k´od)
Silnˇe z´avis´ı na knihovn´ach a frameworc´ıch
Silnˇe z´avis´ı na knihovn´ach a frameworc´ıch
Ladˇen´ı (debug-
ging) Nativn´ı debuggo-
vac´ı n´astroje
Nativn´ı + webov´e debuggovac´ı n´astroje
Z´av´ıs´ı na pouˇzit´em fra- meworku
K´odov´a z´akladna Oddˇelen´y k´od - pro kaˇzdou plat- formu jeden k´od
Jeden k´od s potencion´aln´ımi platformˇe speci- fick´ymi prvky
Jeden k´od s potencion´aln´ımi platformˇe speci- fick´ymi prvky V´yhody
• Pln´y pˇr´ıstup k funkc´ım zaˇr´ızen´ı
• V´yborn´y v´ykon
• Nativn´ı UI
• Efektivn´ı bˇeh aplikac´ı
• Vysok´a kvalita funkcionalit a UX
• N´ızˇs´ı cena za v´yvoj
• Podpora r˚uzn´ych OS
• Znovupouˇzit´ı k´odu
• Cenovˇe efek- tivn´ı v´yvoj
• Podpora r˚uzn´ych OS
• V´ykon UI je skoro tak rychl´y jako u nativn´ıho pˇr´ıstupu
• Znovupouˇzit´ı k´odu
• Cenovˇe efek- tivn´ı v´yvoj (je potˇreba se ale nauˇcit nov´y jazyk nebo pˇr´ıstup)
22
