Univerza v Ljubljani
Fakulteta za raˇ cunalniˇ stvo in informatiko
Klemen Volk
Progresivna spletna aplikacija eLovskaDruˇ zina
DIPLOMSKO DELO
VISOKOˇSOLSKI STROKOVNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE
RA ˇCUNALNIˇSTVO IN INFORMATIKA
Mentor : viˇs. pred. dr. Aljaˇ z Zrnec Somentor : asist. dr. Marko Poˇ zenel
Ljubljana, 2021
rezultatov diplomske naloge je potrebno pisno privoljenje avtorja, Fakultete za raˇcunalniˇstvo in informatiko ter mentorja
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Kandidat: Klemen Volk
Naslov: Progresivna spletna aplikacija eLovskaDruˇzina
Vrsta naloge: Diplomska naloga na visokoˇsolskem strokovnem programu prve stopnje Raˇcunalniˇstvo in informatika
Mentor: viˇs. pred. dr. Aljaˇz Zrnec Somentor: asist. dr. Marko Poˇzenel Opis:
Trenuten proces delovanja lovskih druˇzin je zastarel, saj se mora vsak ˇclan pred odhodom na lov vpisati v lovsko knjigo, ki se nahaja na dogovorjenem mestu v loviˇsˇcu. V okviru diplomske naloge pripravite spletno aplikacijo, ki bo odpravila nepotrebno prevoˇzeno pot do lovske knjige, prihranila ˇcas uporabnikov in omogoˇcila laˇzje vodenje lovske druˇzine. Aplikacija mora iz- polnjevati kriterije PWA (progressive web application).
Title: Progressive web application eLovskaDruˇzina Description:
The current process of hunting families operations is outdated, as each mem- ber must register in the hunting book, which is located at the agreed place in the hunting ground, before going hunting. As part of your diploma thesis, prepare a web application that will eliminate unnecessary travel to the hun- ting book, save users’ time and make it easier to manage a hunting family.
The application must meet the criteria of PWA (progressive web application).
Zahvaljujem se mentorju viˇs. pred. dr. Aljaˇzu Zrnecu in somentorju asist.
dr. Marku Poˇzenelu za pomoˇc pri izdelavi diplomske naloge.
Kazalo
Povzetek Abstract
1 Uvod 1
1.1 Motivacija . . . 1
1.2 Predlog reˇsitve . . . 2
1.3 Obstojeˇce reˇsitve . . . 3
2 Progresivna spletna aplikacija 7 2.1 Lastnosti progresivne spletne aplikacije . . . 7
2.2 Razlike med posameznimi vrstami aplikacij . . . 8
2.2.1 Domorodna aplikacija . . . 8
2.2.2 Spletna aplikacija . . . 9
2.2.3 Hibridna aplikacija . . . 11
2.2.4 Progresivna spletna aplikacija . . . 12
2.3 Zahteve progresivne spletne aplikacije . . . 13
2.4 Temeljne tehnologije progresivne spletne aplikacije . . . 17
2.4.1 Manifest spletne aplikacije . . . 17
2.4.2 Storitveni delavec . . . 20
2.4.2.1 Zivljenjski cikel storitvenega delavca . . . . .ˇ 20 2.4.2.2 Naˇcini obravnave dogodkafetch . . . 25
2.4.2.3 Dogodek sync . . . 29
2.4.3 IndexedDB . . . 30
3.1 Uporabljene tehnologije . . . 34
3.1.1 SAPUI5 . . . 34
3.1.2 HTML5 . . . 34
3.1.3 CSS . . . 34
3.1.4 XML . . . 35
3.1.5 Javascript . . . 35
3.1.6 NodeJS . . . 35
3.1.7 MySQL . . . 36
3.2 Uporabljena orodja . . . 36
3.2.1 phpMyAdmin . . . 36
3.2.2 Visual Studio Code . . . 36
3.2.3 Postman . . . 36
4 Razvoj PWA aplikacije eLovskaDruˇzina 39 4.1 Arhitektura aplikacije . . . 39
4.2 Funkcionalnosti aplikacije . . . 41
4.3 Podatkovna baza . . . 43
4.4 API za komunikacijo med podatkovno bazo in uporabniˇskim vmesnikom aplikacije . . . 45
4.5 Uporabniˇski vmesnik aplikacije . . . 45
4.6 Implementacija zahtev PWA . . . 49
4.6.1 Manifest spletne aplikacije eLovskaDruˇzina . . . 49
4.6.2 Implementacija IndexedDB . . . 51
4.6.3 Implementacija storitvenega delavca . . . 55
5 Zakljuˇcek 59 5.1 Evalvacija . . . 59
5.2 Sklep . . . 59
5.3 Nadgradnja aplikacije eLovskaDruˇzina . . . 60
Literatura 61
kratica angleˇsko slovensko HTML5 HyperText Markup Language
5
Jezik za oznaˇcevanje nadbese- dila 5
WHATWG Web Hypertext Application Technology Working Group
Delovna skupina za tehnolo- gijo uporabe spletnega nadbe- sedila
W3C World Wide Web Consortium Mednarodni inˇstitut za sve- tovni splet
WWW World Wide Web Svetovni splet
CSS Cascading Style Sheets kaskadne stilske podloge XHTML Extensible HyperText Mar-
kup Language
Razˇsirljiv jezik za oznaˇcevanje nadbesedila
XML Extensible Markup Language Razˇsirljiv oznaˇcevalni jezik SVG Scalable Vector Graphics umerljiva vektorska grafika XUL XML User Interface Language XML jezik za uporabniˇski
vmesnik
UI User Interface Uporabniˇski vmesnik
HTTP HyperText Transfer Protocol Protokol za prenos hadbese- dila
API application programming in- terface
aplikacijski programski vme- snik
PHP Personal Home Page Tools orodja za osebno spletno stran NPM Node Package Manager Upravitelj paketov Node DOM Document Object Model Objektni model dokumenta
Povzetek
Naslov: Progresivna spletna aplikacija eLovskaDruˇzina Avtor: Klemen Volk
Diplomsko delo se ukvarja z informatizacijo zastarelega delovnega procesa lovskih druˇzin. V veˇcini lovskih druˇzin se morajo lovci pred odhodom na lov vpisati v vpisno knjigo. Vpisna knjiga pa se lahko nahaja veˇc kilometrov od njihovih domov in/ali lokacije lova. Informacijsko podprt proces bi vplete- nim omogoˇcil prihranke ˇcasa in denarja. Aplikacija, ki sem jo razvil v okviru diplomskega dela, je progresivna spletna aplikacija, ki bi delovala tudi brez internetne povezave in lovcem omogoˇcala vpis na lov ter administracijo in- terne strani lovske druˇzine. Izkuˇsnje z dosedanjo uporabo aplikacije kaˇzejo, da je uporabnikom oz. lovcem vˇseˇc predvsem uporabniˇski vmesnik, saj je zelo enostaven in starejˇsim omogoˇca laˇzjo uporabo aplikacije.
Kljuˇcne besede: PWA, service worker, spletna aplikacija, IndexedDB, SA- PUI5.
Abstract
Title: Progressive web application eLovskaDruˇzina Author: Klemen Volk
Our diploma thesis presents the introduction of software support for one of the legacy work processes of hunting families. In most hunting families, hunters must register in the registration book before going hunting. This book can be located several kilometers from the hunter’s home and / or hunting location. Software supported hunting log process would require less time and effort from hunters and would bring hunter’s cost down. The ap- plication I developed as part of our diploma thesis is a progressive web ap- plication that works even without an internet connection and allows hunters to enroll for hunting and administer the internal web pages of the hunting family. Experience with the use of applications so far to show that the user or hunters especially appreciate user interface, because it is comfortable to interact with and facilitates older users to use the application.
Keywords: PWA, service worker, web application, IndexedDB, SAPUI5.
Poglavje 1 Uvod
Priljubljenost spletnih aplikacij z leti naraˇsˇca, saj imajo pred klasiˇcnimi veliko prednosti, ker jih ni treba nameˇsˇcati, posodabljati ali skrbeti za sistem- ske zahteve, a je dostop do njih mogoˇc samo, ko ima naprava vzpostavljeno internetno povezavo. ˇCeprav je povezavnost z mobilnim internetom ˇsiroko dostopna, lahko na nekaterih lokacijah povezavo izgubimo. V tem primeru je spletna aplikacije neuporabna, saj je dostop onemogoˇcen. Progresivne spletne aplikacije (angl. progressive web application – PWA) pa so tiste, ki omogoˇcijo delovanje spletne aplikacije brez internetne povezave [7]. Ob prvem dostopu v mobilno napravo si prenesejo vse potrebne podatke, da ka- sneje prikaˇzejo in omogoˇcijo funkcionalnosti spletne aplikacije brez internetne povezave.
1.1 Motivacija
Diplomsko delo predstavlja informatizacijo enega od procesov lovskih druˇzin, in sicer vpis lovca v vpisno knjigo lova. Veˇcina lovskih druˇzin v Sloveniji trenutno deluje tako, da imajo po loviˇsˇcu razporejene vpisne knjige lovov, v katere lovci pred vsakim izhodom na lov vpiˇsejo, kam gredo na lov, in po uspeˇsnem lovu, kaj so uplenili. Vpisne knjige lovskih druˇzih po Sloveniji nimajo vedno enakih vsebin; v nekaterih so tudi razna obvestila, dogodki,
1
zapisi o delovnih akcijah in podobno. Vsak lovec, ki je ˇclan lovske druˇzine, se mora pred odhodom na lov najprej odpraviti na veˇc kilometrov dolgo pot do vpisne knjige, kjer izpolni vse potrebne podatke, in ˇsele nato gre na lovno mesto. ˇCe je bil lov uspeˇsen, se mora vrniti nazaj do vpisne knjige, kjer izpolni podatke o plenu in o ˇstevilu strelov. Zastarel proces vpisa v vpi- sno knjigo povzroˇca nepotrebne stroˇske in porabo ˇcasa. Preprosta spletna aplikacija, ki bi informacijsko podprla obstojeˇc proces, bi zmanjˇsala stroˇske, porabo ˇcasa in poveˇcala zadovoljstvo lovcev. Kljub dosedanjim pobudam za informatizacijo tega procesa, se lovske druˇzine zanj do sedaj praviloma niso odloˇcile zaradi slabe pokritosti loviˇsˇc z mobilnim signalom.
1.2 Predlog reˇ sitve
Lovska druˇzina za uporabo potrebuje preprosto aplikacijo, ki ni vezana na doloˇceno platformo in jo je mogoˇce uporabljati tudi takrat, ko dostop do spleta ni na voljo. Reˇsitev je torej progresivna spletna aplikacija. V diplomskem delu bom zato predstavil naˇcrt in implementacijo progresivne spletne aplikacije za podporo beleˇzenja aktivnosti lovcev na loviˇsˇcih, ki v celoti deluje brez internetne povezave z izjemo postopka vpisa izhoda na lov.
Zaradi varnosti lovcev na lovu mora aplikacija vzdrˇzevati aˇzuren vpogled v stanje aktivnosti izhoda lovcev in omogoˇcati preveranje trenutnega stanja na loviˇsˇcu. V primeru neobstojeˇce internetne povezave se podatki shranijo v lokalni bazi podatkov aplikacije. Ob ponovni vzpostavitvi internetne pove- zave se podatki iz lokalne podatkovne baze prenesejo v podatkovno bazo na streˇzniku. Poleg osnovne funkcije vpisa na lov je v aplikaciji mogoˇce opra- vljati ˇse nekaj administracijskih funkcij, ki ˇse dodatno olajˇsajo delo lovskim druˇzinam.
Diplomska naloga 3
1.3 Obstojeˇ ce reˇ sitve
Podobne spletne aplikacije na mednarodnem trgu niso primerljive z apli- kacijo, predstavljeno v tem diplomskem delu, saj je prilagojena procesom lovskih druˇzin v Sloveniji. Delovanja lovskih druˇzin iz razliˇcnih drˇzav se na- mreˇc moˇcno razlikujejo.
Edina aplikacija na slovenskem trgu, ki predstavlja konkurenco naˇsi apli- kaciji, je aplikacija elovec [5]. Ta uporabnikom omogoˇca vpis na lov, pregled plana odstrela, roˇcno urejanje plana odstrela, prikaz osebne strani posame- znega uporabnika in moˇznost urejanja vpisov na lov. Za uporabo te aplikacije morajo lovske druˇzine odˇsteti od 29.90€do 39.90€na mesec glede na paket naroˇcnine, ki si ga izberejo.
Med predlagano reˇsitvijo in konkurenˇcno aplikacijo elovec so ˇstiri glavne raz- like:
• Aˇzurnost podatkov vpisa na lov: v naˇsi aplikaciji se vpis na lov zgodi pred odhodom na lov, da drugi lovci ne zaidejo na isto loviˇsˇce. V aplika- ciji elovec se vpis na lov zgodi po zakljuˇcku lova (glej sliko 1.1). Zaradi ne aˇzurnosti podatkov se lahko lovci znajdejo v nevarnem poloˇzaju, saj ne vedo kdo se nahaja na loviˇsˇcu.
• Samodejen vnos v plan odstrela: v predstavljeni aplikaciji se pregled odstrela posodobi glede na plen, ki je vpisan v vpisni knjigi. V aplikaciji elovec se pregled odstrela ureja roˇcno (glej sliko 1.2).
• Skupni portal: naˇsa spletna aplikacija uporabnikom ponuja skupni portal za objavo obvestil ali raznih novic, aplikacija elovec tega ne omogoˇca.
• Progresivna spletna aplikacije: naˇsa spletna aplikacija v z izjemo akcije Vpis na lov v celoti deluje brez internetne povezave. Aplikacija elovec podpira delovanje brez povezave, vendar samo na domaˇci strani [5]. V spletni aplikaciji elovec za naroˇcnika ni konfiguriranega spletnega ma- nifesta (opisan v poglavju 2.4.1), ki je minimalna zahteva za delovanje
progresivne spletne aplikacije (opisane so v poglavju 2.3).
Slika 1.1: Zaslonska maska za vpis podatkov o lovu v aplikaciji elovec.
Diplomska naloga 5
Slika 1.2: Zaslonska maska za pregled in urejanje plana odstrela v aplikaciji elovec.
Slika 1.3: V spletni aplikaciji elovec naroˇcnika LD Dreˇznica [6] ni konfiguri- ranega spletnega manifesta.
Poglavje 2
Progresivna spletna aplikacija
Koncept progresivne spletne aplikacije je predstavil Steve Jobs leta 2007 pod imenom Web Apps. Te aplikacije naj bi delovale v brskalniku Safari in bile zmoˇzne uporabljati vse funkcionalnosti naprav iPhone. Ideja za Web Apps je nekaj mesecev po predstavitvi potonila v pozabo, vendar jo je obudil razvijalec podjetja Google Alex Russell in jo poimenoval Progresivna spletna aplikacija [31].
2.1 Lastnosti progresivne spletne aplikacije
Progresivne spletne aplikacije predstavljajo dokaj mlado tehnologijo, ki jo je predstavilo podjetje Google leta 2015 [25]. To so spletne aplikacije, ki delujejo kot domorodne aplikacije in ponujajo polno podporo pri delovanju brez internetne povezave [7, 30]. Podjetje Google je definiralo PWA kot spletno izkuˇsnjo, ki je:
• Zanesljiva: ker se nemudoma zaˇzenejo, tudi ob slabi internetni pove- zavi.
• Hitra: ker se hitro odzivajo na uporabnikove interakcije.
S PWA ˇzelimo doseˇci, da bi uporabniki imeli uporabniˇsko izkuˇsnjo, podobno kot pri uporabi domorodnih aplikacij [16]. Progresivne spletne aplikacije
7
podpirajo naslednje funkcije [1]:
• delovanje brez internetne povezave,
• uporaba push API za prikaz obvestil,
• namestitve aplikacije na domaˇci zaslon,
• sinhronizacije podatkov v ozadju,
• ocenjevanje koliˇcine proste shrambe,
• uporaba web share API,
• zmoˇznost delovanja na vseh veˇcjih brskalnikih,
• uporaba payment request API.
2.2 Razlike med posameznimi vrstami apli- kacij
2.2.1 Domorodna aplikacija
Domorodna aplikacija (angl. native application) je razvita z orodji, ki prevedejo programsko kodo v strojno kodo izbrane mobilne platforme. Za uporabo aplikacije na drugi platformi, je treba postopek prevajanja program- ske kode ponoviti. Aplikacija, ki je na voljo na veˇc razliˇcnih platformah, je privlaˇcna za uporabnike in poslediˇcno pridobi veˇcji trˇzni deleˇz [1, 7, 16, 15].
Prednosti domorodne aplikacije:
• Ima popoln dostop do funkcij in senzorjev naprav.
• Izgled aplikacije je bolj domaˇc, ker za izgled komponent zaslonskih mask uporablja vmesnike, ki jih nudi operacijski sistem, zato je izgled aplikacije usklajen z ostalimi aplikacijami.
• Z lahkoto dostopna v trgovinah z aplikacijami [12].
• Viˇsja uˇcinkovitost v primerjavi s spletno, hibridno in progresivno apli- kacijamo [1, 7].
Pomanjkljivosti domorodne aplikacije:
• Programski jeziki in orodja so lahko odvisna od platforme.
• Veˇckratno prevajanje in/ali razvijanje aplikacije (npr. aplikacije raz-
Diplomska naloga 9 vite v programskem jeziku Swift ni mogoˇce prevesti v strojno kodo platforme Android) za podporo na razliˇcnih platformah.
• Testiranje aplikacije se izvaja na razliˇcnih platformah, zato traja dlje [1, 7].
Slika 2.1: Primer domorodne aplikacije, razvite na veˇc platformah, kjer vse implementacije uporabljajo skupen zaledni del [1].
2.2.2 Spletna aplikacija
Spletno aplikacijo (angl. web application) se lahko razvije s pomoˇcjo razliˇcnih programskih jezikov (npr. php, Python, Javascript, CSS, HTML, XML ...) in ogrodij (npr. React, Vue.js, Django ...). Do vira, npr. do sple- tne strani, na streˇzniˇski strani dostopamo s pomoˇcjo naslova URL (Uniform
Resource Locator – URL), ki vir enoliˇcno doloˇca. Spletna aplikacija upora- blja arhitekturo odjemalec-streˇznik (angl. client-server architecture). Za to arhitekturo velja, da odjemalec poˇslje zahtevo na streˇznik, ta pa mu glede na zahtevo odgovori. Komunikacija med odjemalcem in streˇznikom poteka po protokolu HTTP [1, 7, 16].
Slika 2.2: Primer delovanja spletne aplikacije na razliˇcnih mobilnih platfor- mah [1].
Prednosti spletne aplikacije:
• Spletna aplikacija zagotavlja enotno uporabniˇsko izkuˇsnjo ne glede na mobilno platformo.
• Uporabniku ni treba neposredno skrbeti za posodobitve aplikacije, ker za to poskrbi ponudnik aplikacije / storitve na streˇzniˇski strani.
• Aplikacijo se razvije samo enkrat.
• Hitrejˇsi razvoj v primerjavi z domorodno aplikacijo [1, 7].
Diplomska naloga 11 Pomanjkljivosti spletne aplikacije:
• Omejen dostop do funkcij in orodij mobilne naprave.
• Uporaba je mogoˇca le ob vzpostavljeni internetni povezavi.
• Manjˇsa uˇcinkovitost v primerjavi z domorodno aplikacijo, ker se koda za prikaz aplikacije izvaja v brskalniku [1, 7].
2.2.3 Hibridna aplikacija
Hibridna aplikacija (angl. hybrid application) zdruˇzuje prednosti tako sple- tne kot domorodne aplikacije z uporabo domorodnega ovoja (angl. native wrapper). Domorodni ovoj vsebuje spletno kodo in Javascript aplikacijski vmesnik (angl. Application Programming Interface – API), ki sluˇzi za komu- nikacijo med spletno kodo in aplikacijskim vmesnikom na mobilni napravi [7, 1]. Primeri bolj znanih hibridnih aplikacij so: Evernote [8], Instagram [11], Uber, Amazone app store ...
Slika 2.3: Primer delovanja hibridne aplikacije na razliˇcnih mobilnih platfor- mah [1].
Prednosti hibridne aplikacije:
• Na voljo je v trgovini z aplikacijami.
• Podprta je na vseh platformah.
• Aplikacijo se razvije samo enkrat.
• Lahko dostopa do domorodnih funkcij mobilnih naprav [1, 7].
Pomanjkljivosti hibridne aplikacije:
• Uporabniˇska izkuˇsnja je enaka na vseh napravah, kar pa je lahko tudi pomanjkljivost, saj nekaterih funkcij ni na voljo na vseh napravah (npr.
nekatere naprave uporabljajo fiziˇcni gumb za navigacijo nazaj, pri dru- gih pa se navigacija izvede ob dotiku zaslona).
• Za polno funkcionalnost aplikacije potrebujemo delujoˇco internetno po- vezavo.
• Omejena je glede na zmoˇznosti prevajanja komunikacijskega mostu, saj mora spletno kodo prevesti v strojno kodo doloˇcene platforme.
• Manjˇsa uˇcinkovitost v primerjavi z domorodnimi aplikacijami, ker se koda za prikaz aplikacije izvaja v brskalniku [1, 7].
2.2.4 Progresivna spletna aplikacija
Progresivna spletna aplikacija poizkuˇsa odpraviti pomanjkljivosti spletne, domorodne in hibridne aplikacije. Za osnovo uporablja koncept spletne apli- kacije. Na ta naˇcin ohranimo prednost, da aplikacije za uporabo ni potrebno predhodno namestiti. Zaradi veˇcje varnosti uporablja izkljuˇcno protokol HT- TPS. Podobno kot pri domorodni aplikaciji, je za PWA moˇzno dodati pove- zavo do aplikacije na domaˇci zaslon. Progresivna spletna aplikacija nudi ˇse nekaj dodatnih funkcij, kot so uporaba aplikacije in zmoˇznost prikazovanja obvestil brez internetne povezave [1, 7, 16].
Prednosti progresivne spletne aplikacije:
• Je cenovno dostopnejˇsa, saj za podporo naˇcina brez povezave ni po- trebno razvijati loˇcene domorodne aplikacije.
• Omogoˇca namestitev, ki pa ni obvezna.
• Vsebina aplikacije se prikaˇze ob iskanju v poljubnem spletnem iskal- niku.
• Neodvisna od trgovin z aplikacijami, iskanje spletne aplikacije je omogoˇceno s spletnim iskalnikom.
Diplomska naloga 13
• Manjˇsa poraba mobilnih podatkov zaradi serviranja datotek iz shrambe.
• Zaradi obvezne uporabe protokola HTTPS je bolj varna [1, 16].
Pomanjkljivosti progresivne spletne aplikacije:
• Deluje samo v novejˇsih brskalnikih.
• Slabˇsa podpora za operacijski sistem iOS, deluje namreˇc samo v br- skalniku Safari.
• Omejena dostopnost do funkcij naprave v primerjavi s hibridnimi in domorodnimi aplikacijami [1, 16].
Slika 2.4: Primer delovanja progresivne spletne aplikacije na razliˇcnih mobil- nih platformah [1].
2.3 Zahteve progresivne spletne aplikacije
Da lahko govorimo o neki aplikaciji kot o progresivni spletni aplikaciji, mora zadoˇsˇcati naslednjim minimalnim zahtevam:
• Pravilno nastavljena datoteka manifest spletne aplikacije, ki vsebuje meta podatke za zagon aplikacije iz domaˇcega zaslona.
• Registracija in implementacija skripte storitvenega delavca (angl. Ser- vice worker), ki omogoˇca odgovarjanje na omreˇzne zahtevke brez inter- netne povezave.
• Dostop do spletne aplikacije po protokolu HTTPS.
Da spletna aplikacija postane optimizirana progresivna spletna aplikacija, mora izpolnjevati naslednje zahteve:
• Pravilno nastavljena datoteka manifest spletne aplikacije.
• Registracija in implementacija storitvenega delavca.
• Dostop do spletne aplikacije po protokolu HTTPS.
• Nastavljena vrednost za prikaz zaslona ob zagonu aplikacije.
• Nastavljena barva teme.
• Nastavljena znaˇcka <meta name="viewport, ki predstavlja navodila za velikost prikaza spletne aplikacije.
• Nastavljena znaˇcka apple-touch-icons katero nastavimo ikono sple- tne aplikacije za Apple naprave.
• V manifestu spletne aplikacije, ki skrbi za zagon aplikacije izven brskal- nika, mora biti nastavljena ikona z vrednostjo maskable.
Zadoˇsˇcanje zahtevam lahko preverimo s pomoˇcjo razvojnega orodja pod- jetja Google, Chrome DevTools. To orodje zaˇzenemo v brskalniku Chrome s pritiskom tipke F12. Na zaslonu se prikaˇze okno na sliki 2.5, kjer izberemo zavihek Lighthouse. Z oznaˇceno kategorijo Progresivna spletna aplikacija in s klikom na gumbGeneriraj poroˇcilo (glej sliko 2.5) se preverijo zahteve. ˇCe so zahteve izpolnjene, se v ikono PWA doda zelena kljukica (glej sliko 2.6).
V kolikor spletna aplikacija ni optimizirana, se izpiˇse seznam neizpolnjenih zahtev, kot je prikazan na sliki 2.7.
Diplomska naloga 15
Slika 2.5: Zavihek Lighthouse v razvijalskih orodjih podjetja Google.
Slika 2.6: Poroˇcilo prikazuje optimizirano progresivno spletno aplikacijo.
Diplomska naloga 17
Slika 2.7: Poroˇcilo prikazuje neoptimizirano progresivno spletno aplikacijo.
2.4 Temeljne tehnologije progresivne spletne aplikacije
2.4.1 Manifest spletne aplikacije
V datoteki manifest spletne aplikacije so zapisani podatki o aplikaciji (glej sliko 2.8). V njem doloˇcimo naˇcin prikazovanja, dodamo ikone, barvo ozadja ali teme in URL spletne aplikacije. S pravilno nastavljeno vsebino datoteke .webmanifest lahko ustvarimo bliˇznjico do spletne aplikacije na domaˇcem zaslonu z imenom in ikono, ki sta doloˇcena v datoteki. Ustrezno nastavljena datoteka .webmanifest spremeni obnaˇsanje aplikacije tako, da
uporabnik dobi obˇcutek, da uporablja domorodno aplikacijo [14]. Datoteka .webmanifest lahko vsebuje naslednje kljuˇce [32]:
• name: ime aplikacije, ki se prikaˇze na pozdravnem zaslonu (angl. splash screen),
• short name: krajˇse ime, ki se prikaˇze na domaˇcem zaslonu,
• description: namen aplikacije,
• icons: tabela z ikonami – src: pot do datoteke, – sizes: velikost datoteke, – type: tip datoteke,
– purpose: namen datoteke
∗ any: (privzeta vrednost) ikona se prikaˇze v kateremkoli kon- tekstu,
∗ maskable: del ikone, ki je zunaj varnega obmoˇcja se ne prikaˇze,
∗ monochrome: zunanji del ikone se pobarva z doloˇceno barvo,
• start url: URL, ki se odpre ob kliku na bliˇznjico,
• display: naˇcin prikaza aplikacije
– fullscreen: aplikacija se odpre v celozaslonskem naˇcinu, uporabniˇski vmesnik brskalnika je skrit,
– standalone: aplikacija dobi izgled domorodne aplikacije,
– minimal-ui: podobno kot standalone, dodani so ˇse navigacijski gumbi in nekateri drugi elementi brskalnika,
– browser: (privzeta vrednost) aplikacija se odpre v brskalniku
• theme color: barva teme,
• backgound color: barva ozadja
Primer dokumenta .webmanifest prikazuje slika 2.8.
Diplomska naloga 19 {
"name": "Progresivna spletna aplikacija",
"short_name": "PWA",
"description": "PWA opis",
"icons": [ {
"src": "images/bigLogo.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
}, {
"src": "images/Logo.png",
"sizes": "60x78",
"type": "image/png",
"purpose": "maskable"
}, {
"src": "images/biggerLogo.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
} ],
"start_url": "index.html",
"display": "fullscreen",
"theme_color": "#00FF7F",
"background_color": "#00FF7F"
}
Slika 2.8: Primer datoteke.webmanifest.
2.4.2 Storitveni delavec
Storitveni delavec je skripta, ki deluje v uporabnikovem brskalniku, ne- odvisno od spletne aplikacije. Razvijalcu omogoˇci dodajanje virov (dato- tek, slik,...) v lokalni predpomnmilnik in prestrezanje ter odgovarjanje na omreˇzne zahtevke z interneta ali lokalnega predpomnilnika v brskalniku, ki ga doloˇci razvijalec. Te funkcije reˇsijo problem dostopa do spletnih aplikacij brez internetne povezave [17, 22].
Zaradi moˇznosti zlorabe funkcionalnosti prestrezanja zahtevkov, mora sto- ritveni delavec delovati v varnem okolju, zato mora biti spletna aplikacija, ki ga uporablja, dostopna po protokolu HTTPS [18].
2.4.2.1 Zivljenjski cikel storitvenega delavcaˇ
Zivljenjski cikel storitvenega delavca (prikazan na sliki 2.9) je potek de-ˇ lovanja skripte storitvenega delavca od stanja registracije, do stanja, ko je pripravljen na prestrezanje in obdelavo zahtevkov.
Diplomska naloga 21
Slika 2.9: ˇZivljenjski cikel storitvenega delavca [21].
Registracija in namestitev
Implementacija storitvenega delavca se priˇcne z njegovo registracijo, ki je prikazana na sliki 2.10. V primeru napake ob registraciji, storitveni delavec prekine ˇzivljenjski cikel in spletna aplikacija izgubi podporo delovanja brez internetne povezave. Ob uspeˇsni registraciji se storitveni delavec samodejno prestavi v stanje nameˇsˇcanja, ki sproˇzi dogodek install, kjer se v lokalni predpomnilnik dodajo pomembni viri s pomoˇcjo internetne povezave. To so vse datoteke (npr. .css, .js, .html,...), ki so pomembne za delovanje spletne aplikacije [7]. Dodajanje virov v lokalni predpomnilnik je prikazano na sliki 2.11.
if (’serviceWorker’ in navigator) {
window.addEventListener(’load’, function() {
navigator.serviceWorker.register(’/sw.js’).then(function(registration) {
// Registration was successful
console.log(’ServiceWorker registration successful with scope: ’ , registration.scope);
}, function(err) {
// registration failed :(
console.log(’ServiceWorker registration failed: ’, err);
});
});
}
Slika 2.10: Primer registracije storitvenega delavca.
Diplomska naloga 23 var CACHE_NAME = ’my-site-cache-v1’;
var urlsToCache = [
’/’,
’/styles/main.css’,
’/script/main.js’
];
self.addEventListener(’install’, function(event) {
// Perform install steps event.waitUntil(
caches.open(CACHE_NAME) .then(function(cache) {
console.log(’Opened cache’);
return cache.addAll(urlsToCache);
}) );
});
Slika 2.11: Primer dogodka namestitve storitvenega delavca.
Prestrezanje zahtevkov
Ko je storitveni delavec nameˇsˇcen, lahko ob navigaciji na spletno stran do- stopa do virov, ki so shranjeni v lokalnem predpomnilniku. ˇCe vira v pred- pomnilniku ni, ga poiˇsˇce s pomoˇcjo internetne povezave (primer obravnave dogodka fetch je prikazan na sliki 2.12). To se zgodi ob dogodku fetch, ki se sproˇzi ob vsakem zahtevku spletne aplikacije [2]. Omreˇzne zahtevke v dogodku fetch se lahko obdela na razliˇcne naˇcine, ki so predstavljeni v po- glavju 2.4.2.2. Razvijalec ga izbere glede na potrebno aˇzurnost podatkov za prikazovanje spletne aplikacije [21].
self.addEventListener(’fetch’, function(event) { event.respondWith(
caches.match(event.request) .then(function(response) {
// Cache hit - return response if (response) {
return response;
}
return fetch(event.request);
} ) );
});
Slika 2.12: Primer dogodkafetch storitvenega delavca.
Posodobitev predpomnilnika
Zaradi morebitnega posodabljanja spletne aplikacije, se mora lokalni pred- pomnilnik ob vsaki novi verziji posodobiti. Posodabljanje predpomnilnika se implementira ob dogodku activate, kjer se izbriˇse stara razliˇcica predpomnil- nika in doda nova (posodabljanje predpomnilnika je prikazano na sliki 2.13).
Dogodek activate se zgodi, ko storitveni delavec postane aktiven, to je po konˇcanem stanju nameˇsˇcanja in ob vsakem ponovnem dostopanju do spletne aplikacije. V tem stanju lahko prestreza zahtevke [2].
Diplomska naloga 25 self.addEventListener(’activate’, function(event) {
var cacheAllowlist = [’pages-cache-v1’, ’blog-posts-cache-v1’];
event.waitUntil(
caches.keys().then(function(cacheNames) { return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheAllowlist.indexOf(cacheName) === -1) { return caches.delete(cacheName);
} }) );
}) );
});
Slika 2.13: Primer brisanja starih predpomnilnikov.
Storitveni delavec lahko vstopi v stanje terminate kadarkoli. Po prejetem zahtevku v tem stanju, se bo ponovno zagnal, ampak ne bo preˇsel v stanje activate [2].
2.4.2.2 Naˇcini obravnave dogodka fetch Samo omreˇzje
Samo omreˇzje (angl. network only) je naˇcin obravnave dogodka fetch, ki od- govori na vse omreˇzne zahtevke s pomoˇcjo internetne povezave. Ta naˇcin se veˇcinoma ne uporablja, saj je primeren samo za zahtevke, ki nimajo metode GET [21]. Implementacijo naˇcina samo omreˇzje prikazuje slika 2.14.
self.addEventListener(’fetch’, function (event) { event.respondWith(caches.match(event.request));
});
Slika 2.14: Primer implementacije naˇcina samo omreˇzje.
Samo predpomnilnik
Samo predpomnilnik (angl. cache only) je naˇcin obravnave dogodka fetch, ki odgovori na vse omreˇzne zahtevke z virom iz predpomnilnika. Ta naˇcin se veˇcinoma ne uporablja, saj je primeren samo za statiˇcne spletne strani, katerim se vsi potrebni viri shranijo v predpomnilnik ob dogodku namesti- tve storitvenega delavca [21]. Implementacija naˇcina samo predpomnilnik je prikazana na sliki 2.15.
self.addEventListener(’fetch’, function (event) { event.respondWith(fetch(event.request));
});
Slika 2.15: Primer implementacije naˇcina samo predpomnilnik.
Najprej predpomnilnik
Najprej predpomnilnik (angl. cache first) je naˇcin obravnave dogodka fetch, ki poizkuˇsa odgovoriti na omreˇzne zahtevke z virom iz predpomnilnika. ˇCe predpomnilnik ne vsebuje tega vira, odgovori na zahtevek preko internetne povezave. Ta naˇcin dogodkafetch je primeren za spletne aplikacije, ki so pri- lagojene uporabi brez internetne povezave po prvem obisku spletne aplikacije (angl. offline-first) [21]. Slika 2.16 prikazuje implementacijo naˇcina najprej predpomnilnik.
Diplomska naloga 27 self.addEventListener(’fetch’, function (event) {
event.respondWith(
caches.match(event.request).then(function (response) { return response || fetch(event.request);
}), );
});
Slika 2.16: Primer implementacije naˇcina najprej predpomnilnik.
Najprej omreˇzje
Najprej omreˇzje (angl. network first) je naˇcin obravnave dogodka fetch, ki poizkuˇsa odgovoriti na omreˇzne zahtevke preko interneta. ˇCe odgovor ne uspe, odgovori na zahtevek z virom iz predpomnilnika. Ta naˇcin dogodka fetch je primeren za spletne aplikacije, ki pogosto posodabljajo svoje vire.
Pomanjkljivost tega naˇcina je, da se v primeru poˇcasne internetne povezave aplikacija zelo poˇcasi naloˇzi, saj mora vsak odgovor na omreˇzni zahtevek vrniti napako, da se lahko uporabijo viri iz predpomnilnika [21]. Implemen- tacija naˇcina najprej omreˇzje je prikazana na sliki 2.17.
self.addEventListener(’fetch’, function (event) { event.respondWith(
fetch(event.request).catch(function () { return caches.match(event.request);
}), );
});
Slika 2.17: Primer implementacije naˇcina najprej omreˇzje.
Predpomnilnik nato omreˇzje
Predpomnilnik nato omreˇzje (angl. cache then network) je naˇcin obravnave
dogodka fetch, ki je izboljˇsava naˇcina najprej omreˇzje. V dogodku fetch se ustvarita dva zahtevka, eden v lokalni predpomnilnik, drugi v omreˇzje. Na ta naˇcin se najprej prikaˇze stran s starimi viri iz predpomnilnika, ki se po opravljenih zahtevkih v omreˇzju posodobi z novimi. Ta naˇcin je moˇzen le, ˇce posodabljanje starih virov ne uniˇcuje vsebine, ki jo uporabnik gleda [21].
Implementacijo naˇcina predpomnilnik nato omreˇzje prikazuje slika 2.18.
self.addEventListener(’fetch’, function (event) { event.respondWith(
caches.open(’mysite-dynamic’).then(function (cache) { return fetch(event.request).then(function (response) {
cache.put(event.request, response.clone());
return response;
});
}), );
});
Slika 2.18: Primer implementacije naˇcina predpomnilnik nato omreˇzje.
Statiˇcna stran
Statiˇcna stran (angl. generic fallback) je naˇcin obravnave dogodka fetch, ki lahko dopolne vse druge naˇcine. V primeru, da katerikoli naˇcin ne uspe prikazati spletne aplikacije ali pridobiti doloˇcenega vira, ki je pomemben za spletno aplikacijo, se prikaˇze stran s statiˇcno vsebino ali sekundarnim virom.
Ta naˇcin je primeren za spletne aplikacije, ki ˇzelijo uporabnikom prikazati sporoˇcilo, ko so v naˇcinu brez internetne povezave ali za pridobivanje sekun- darnih virov [21]. Slika 2.19 prikazuje implementacijo naˇcina statiˇcna stran.
Diplomska naloga 29 self.addEventListener(’fetch’, function (event) {
event.respondWith(
caches
.match(event.request)
.then(function (response) {
return response || fetch(event.request);
})
.catch(function () {
return caches.match(’/offline.html’);
}), );
});
Slika 2.19: Primer implementacije naˇcina statiˇcna stran.
2.4.2.3 Dogodek sync
Sinhronizacija v ozadju (angl. background sync) je funkcija, ki omogoˇca storitvenemu delavcu izvajanje akcij po ponovni vzpostavitvi internetne po- vezave. Ta funkcija deluje tudi, ˇce spletna aplikacija ni odprta. Primerna je predvsem za nenujne posodobitve [21].
Dogodeksync je potrebno najprej registrirati, kot je prikazano na sliki 2.20.
Nato se ob ponovni vzpostavitvi internetne povezave izvede koda na sliki 2.21, ki posodobi vir v predpomnilniku.
navigator.serviceWorker.ready.then((swRegistration) =>
swRegistration.sync.register(’update-leaderboard’) ).catch(console.log);
Slika 2.20: Primer registracije dogodka sync.
self.addEventListener(’sync’, function (event) { if (event.id == ’update-leaderboard’) {
event.waitUntil(
caches.open(’mygame-dynamic’).then(function (cache) { return cache.add(’/leaderboard.json’);
}), );
} });
Slika 2.21: Primer posodobitve virov ob dogodkusync.
2.4.3 IndexedDB
IndexedDB je podatkovna baza, ki omogoˇca shranjevanje podatkov v upo- rabnikov brskalnik. Uporablja se jo predvsem za shranjevanje veˇcje koliˇcine podatkov ob uporabi progresivnih spletnih aplikacij brez internetne povezave [27]. Izvajanje akcij nad podatki, shranjenimi v IndexedDB, poteka na naˇcin, prikazan na sliki 2.22. Lastnosti IndexedDB:
• IndexedDB deluje asinhrono, kar pomeni, da deluje na naˇcin zahtevkov.
Npr. ob akciji dodajanja podatkov v podatkovno bazo, se ustvari zah- tevek za pisanje v podatkovno bazo. Ko se zahtevek zakljuˇci, obvesti razvijalca z dogodkom objektnega modela dokumenta (angl. document object model – DOM).
• Podatki se v podatkovno bazo IndexedDB shranjujejo na naˇcin kljuˇc - vrednost. Kljuˇc je lahko vrednost, ki jo doloˇci razvijalec, ali se sa- modejno poveˇcuje ob vsakem vnosu v shrambo objektov (angl. object store).
Diplomska naloga 31
Slika 2.22: Potek dela IndexedDB [27].
Poglavje 3
Predstavitev tehnologij in orodij pri razvoju PWA aplikacije eLovskaDruˇ zina
V nadeljevanju so predstavljene tehnologije in orodja, ki sem jih uporabil pri razvoju progresivne spletne aplikacije eLovskaDruˇzina. Za razvoj upo- rabniˇskega vmesnika sem uporabil tehnologijo SAPUI5, ki za delovanje po- trebuje podporo tehnologij HTML5, CSS, XML in Javascript. Za razvoj API-ja za komunikacijo med podatkovno bazo in uporabniˇskim vmesnikom sem uporabil razvojno okolje NodeJS in Javascript. Za razvoj podatkovne baze pa sem uporabil MySQL. Za razvoj uporabniˇskega in aplikacijskega vmesnika sem uporabil urejevalnik Visual Studio Code. Podatkovno bazo, sem razvil s pomoˇcjo orodja phpMyAdmin. Za testiranje komunikacije iz API-ja sem uporabil program Postman.
33
3.1 Uporabljene tehnologije
3.1.1 SAPUI5
SAPUI5 je tehnologija za razvoj uporabniˇskega vmesnika, ki temelji na jezikih Javascript, CSS in HTML5. Aplikacije, zgrajene s to tehnologijo, so odzivne v vseh brskalnikih in napravah, delujejo na pametnih telefonih, tabliˇcnih in namiznih raˇcunalnikih. Kontrole na uporabniˇskem vmesniku se samodejno prilagodijo glede na zmogljivost naprave. SAPUI5 je namenjen predvsem za implementacijo bogatih uporabniˇskih vmesnikov za sodobne poslovne spletne aplikacije [28].
3.1.2 HTML5
HTML5 je oznaˇcevalni jezik, ki se uporablja za strukturiranje in prikazo- vanje vsebine na svetovnem spletu. Trenutni standard je znan kot HTML Living Standard, ki ga vzdrˇzuje delovna skupina za tehnologijo uporabe sple- tnega nadbesedila (angl. Web Hypertext Application Technology Working Group – WHATWG). HTML5 je bil prviˇc v javnosti objavljen 22. janu- arja 2008. Veˇcjo posodobitev in status ”W3C Recommendation”je pridobil oktobra 2014. Glavni cilji te posodobitve so bili izboljˇsanje kompatibilno- sti z najnovejˇsimi veˇcpredstavnostnimi vsebinami, ohraniti jezik, ki je lahko berljiv za ljudi in raˇcunalnike ter ohranjanje kompatibilnosti s starejˇso pro- gramsko opremo [9, 10].
3.1.3 CSS
Kaskadne stilske podloge (angl. cascading style sheets – CSS) je preprost slogovni jezik, ki skrbi za predstavitev dokumenta, napisanega v oznaˇcevalnem jeziku (npr. HTML). CSS je osnovna tehnologija svetovnega spleta (angl.
world wide web – WWW) skupaj s tehnologijama HTML in Javascript. Za- snovan je tako, da omogoˇca loˇcevanje predstavitvenega dela in vsebine, kar lahko izboljˇsa dostopnost vsebine in zagotovi veˇcjo prilagodljivost. Poleg je-
Diplomska naloga 35 zika HTML, tudi drugi oznaˇcevalni jeziki podpirajo uporabo CSS, vkljuˇcno z XHTML, XML, SVG in XUL [3, 10].
3.1.4 XML
XML je razˇsirljiv oznaˇcevalni jezik, ki vsebuje strukturirane informacije.
Te vsebujejo vsebino (npr. slike, besedilo,...) in pravila o vlogi vsebine v dokumentu (npr. glava, noga dokumenta, naslov, tabela,...). Oznaˇcevalni jezik je mehanizem, ki identificira strukture v dokumentu. Specifikacija XML doloˇca standardni naˇcin dodajanja oznak v dokument [33].
3.1.5 Javascript
Javascript je objektni skriptni jezik za kreiranje interaktivnih spletnih strani. Poleg oznaˇcevalnega jezika HTML in slogovnega jezika CSS je eden izmed temeljnih tehnologij svetovnega spletna. Veˇc kot 97% spletnih strani ga uporablja za delovanje na strani uporabnika. Javascript je bil prvotno namenjen uporabi samo v spletnih brskalnikih, zdaj pa je tudi eden izmed temeljnih komponent drugih programskih sistemov [13, 26].
3.1.6 NodeJS
NodeJS je odprtokodno okolje, ki razvijalcem omogoˇca implementacijo razliˇcnih orodij in aplikacij na streˇzniku. Namenjen je izvajanju izven br- skalnika (npr. na streˇzniku ali raˇcunalniku). Zato ne uporablja Javascript API-jev za uporabo na brskalniku, temveˇc podpira tradicionalne sistemske API-je vkljuˇcno s HTTP. Pri razvijanju spletnih aplikacijskih streˇznikov ima kar nekaj prednosti [20]:
• Koda je napisana v programskem jeziku Javascript, kar pomeni, da se za uporabo ni potrebno nauˇciti novega programskega jezika.
• V primerjavi s tradicionalnimi programskimi jeziki za razvijanje sple- tnih streˇznikov (npr. Python, PHP,...), se Javascript ˇse vedno razvija in z novimi razliˇcicami vkljuˇcuje sodobne koncepte.
• Upravitelj paketov Node (NPM) zagotavlja dostop do veˇc sto tisoˇcih paketov.
• NodeJS je prenosljv med raˇcunalniˇskimi sistemi. Njegova uporaba je omogoˇcena na operacijskih sistemih Microsoft Windows, macOS, Li- nux, Solaris, FreeBSD, OpenBSD, WebOS in NonStop OS.
3.1.7 MySQL
MySQL je odprtokoden sistem za upravljanje relacijskih podatkovnih baz, ki deluje na razliˇcnih platformah. Zagotavlja dostop za veˇc uporabnikov za podporo ˇstevilnih mehanizmov za shranjevanje podatkov [19].
3.2 Uporabljena orodja
3.2.1 phpMyAdmin
phpMyAdmin je brezplaˇcno programsko orodje napisano v PHP. Name- njen je za upravljanje administracije MySQL ali MariaDB podatkovnih baz.
Podpira veˇcino administrativnih nalog, kot je kreiranje podatkovne baze, poganjanje poizvedb in dodajanja novih uporabnikov [23].
3.2.2 Visual Studio Code
Visual Studio Code je zmogljiv urejevalnik kode, ki je enostaven za upo- rabo. Vsebuje vgrajeno podoro za Javascript, TypeScript in NodeJS. Je visoko prilagodljiv, saj vsebuje veliko razˇsiritev, ki dodajo podporo ˇse za druge programske jezike [4].
3.2.3 Postman
Postman je aplikacija, ki se jo uporablja za testiranje API-jev. Je HTTP odjemalec, ki testira HTTP zahteve z uporabo grafiˇcnega uporabniˇskega vme-
Diplomska naloga 37 snika, preko katerega dobi razliˇcne odgovore, ki jih je nato potrebno potrditi.
Vsebuje veˇc metod za manipulacijo informacij, najbolj uporabljene so [24]:
• GET: za pridobivanje informacij.
• POST: za dodajanje informacij.
• PUT: za menjavo informacij.
• PATCH: za posodabljanje informacij.
• DELETE: za brisanje informacij.
Poglavje 4
Razvoj PWA aplikacije eLovskaDruˇ zina
V nadeljevanju predstavim arhitekturo, funkcionalnosti in razvoj progre- sivne spletne aplikacije eLovskaDruˇzina. Opis razvoja aplikacije je razdeljen na:
• Opis podatkovne baze aplikacije, kjer so opisane tabele in njihov na- men.
• Opis API-ja za komunikacijo med podatkovno bazo in uporabniˇskim vmesnikom.
• Opis uporabniˇskega vmesnika in opis funkcionalnosti za razliˇcne vloge uporabnikov.
• Opis razvoja progresivne spletne aplikacije.
4.1 Arhitektura aplikacije
Progresivna spletna aplikacije eLovskaDruˇzina je sestavljena iz uporabniˇskega vmesnika, podatkovne baze na streˇzniku, lokalne podatkovne baze IndexedDB,
39
storitvenega delavca in aplikacijskega vmesnika za komunikacijo med upo- rabniˇskim vmesnikom in podatkovno bazo na streˇzniku. Na sliki 4.1 je ar- hitektura sistema in prikaz obdelave zahtevka za pridobivanje podatkov iz podatkovne baze na streˇzniku. Ob vsakem zahtevku se v podatkovni bazi IndexedDB posodobijo podatki za prikaz, ko naprava nima internetne pove- zave.
Slika 4.1: Arhitektura sistema in potek komunikacije med sestavnimi deli sistema.
Diplomska naloga 41
4.2 Funkcionalnosti aplikacije
Aplikacija eLovskaDruˇzina svojim uporabnikom ponuja veˇc funkcionalno- sti, ki so odvisne od vloge uporabnika. Funkcionalnosti, ki so dodeljene vlogam so prikazane v diagramu primerov uporabe na sliki 4.2. Obiskovalec je vloga, ki od uporabnika ne zahteva prijave in ima na voljo najmanj funkci- onalnosti. Vloga Uporabnik lahko poleg svojih funkcionalnosti uporablja ˇse vse funkcionalnosti vloge Obiskovalec. Vloga, ki lahko uporablja vse funkci- onalnosti aplikacije je Administrator.
Slika 4.2: Diagram primerov uporabe aplikacije eLovskaDruˇzina z razliˇcnimi vlogami.
Diplomska naloga 43
4.3 Podatkovna baza
V podatkovni bazi progresivne spletne aplikacije eLovskaDruˇzina se na- haja deset tabel (glej sliko 4.3). Tabele uporabnik, uporabnik vloge in vloge so namenjene shranjevanju podatkov o uporabnikih spletne aplikacije. Iz njih pridobimo vse potrebne podatke za avtentikacijo uporabnikov in nji- hove vloge za uporabo spletne aplikacije.
Tabelo uporabnik uporabljamo tudi v relaciji z lovska druzina, lov in ob- vestilo. V prvi so shranjeni podatki o lovskih druˇzinah, glede na te podatke se doloˇci pripadnost uporabnika na lovsko druˇzino. V drugi so shranjeni po- datki o izhodih na lov, z njo je v relaciji tabela lovisce, ki vsebuje podatke o loviˇsˇcih v lovski druˇzini. V tabeli obvestilo pa so shranjeni podatki o javnih in zasebnih obvestilih.
V podatkovni bazi sta tudi tabeli divjad, v kateri so shranjeni podatki o divjadi, in plan odstrela, ki vsebuje podatke o planiranem in izvrˇsenem od- strelu divjadi za vsako lovsko druˇzino.
Tabela prijava skode vsebuje podatke o prijavah ˇskode in na katero lovsko druˇzino se nanaˇsajo.
Slika 4.3: Logiˇcni model podatkovne baze.
Diplomska naloga 45
4.4 API za komunikacijo med podatkovno bazo in uporabniˇ skim vmesnikom aplikacije
Komunikacija med uporabniˇskim vmesnikom in podatkovno bazo poteka preko API-ja. Razvoj API-ja je potekal v NodeJS, ki sem ga izbral za- radi velike izbire raznih razˇsiritvenih paketov (npr. express, cors, bcrypt,...).
Veˇcina komunikacije, ki poteka preko API-ja je zavarovana z JSON spletnimi ˇzetoni. Ta naˇcin omogoˇca le uporabnikom z veljavnim uporabniˇskim ime- nom in geslom dostop do informacij, ki so namenjene doloˇceni lovski druˇzini.
Nekatere poti za pridobivanje podatkov iz podatkovne baze so dostopne tudi brez JSON spletnega ˇzetona. Te so namenjene prijavi v aplikacijo, prijavi ˇskode in pridobivanju seznama lovskih druˇzin, ki uporabljajo aplikacijo.
4.5 Uporabniˇ ski vmesnik aplikacije
Pri razvijanju uporabniˇskega vmesnika sem uporabil SAPUI5 (opisan v poglavju 3.1.1), ki deluje po naˇcelu MVC. MVC je model za razvijanje pro- gramske opreme, ki je pogosto uporabljen za razvijanje uporabniˇskih vmesni- kov. Namen MVC arhitekture je loˇciti definicijo uporabniˇskega vmesnika od podatkov in kontrolerjev za procesiranje podatkov, kar omogoˇci veˇcjo pregle- dnost napisane kode [29]. Tehnologijo SAPUI5 sem izbral zaradi enostavnega videza komponent. Te komponente so omogoˇcile razvoj uporabniˇskega vme- snika, ki je prijaznejˇsi uporabnikom, ki niso veˇsˇci pri uporabi raˇcunalnikov in mobilnih naprav.
Uporabniˇski vmesnik je sestavljen iz treh delov, javnega, zasebnega z osnov- nimi funkcijami in nadzorne ploˇsˇce. Javni del je dostopen vsem obiskovalcem spletne aplikacije. Sestavljajo ga javna obvestila, moˇznost prijave ˇskode in prijava uporabnikov, kar je prikazano na sliki 4.4.
Slika 4.4: Zaslonske maske za javna obvestila, prijavo in prijavo ˇskode.
Zasebni del z osnovnimi funkcionalnostimi omogoˇca vsem uporabnikom, ki se uspeˇsno prijavijo, dostop do internih obvestil lovske druˇzine (glej sliko 4.5) in vpisa na lov. Vpis na lov je glavna funkcionalnost progresivne spletne aplikacije eLovskaDruˇzina. Sestavljena je iz treh zaslonskih mask: vpis na lov, lov v teku in zakljuˇci lov, kot je prikazano na 4.6. V zaslonski maski vpis na lov uporabnik izbere lokacijo in ˇcas zaˇcetka lova. Pod obrazcom se nahaja seznam lovcev, ki so trenutno na lovu. Ob pravilno vnesenih podatkih dobi dostop do druge zaslonske maske, lov v teku. V tem pogledu se prikaˇze seznam lovcev, ki se nahajo na istem loviˇsˇcu. Poleg seznama se prikaˇzeta moˇznosti za preklic, ki lov odstrani iz podatkovne baze, in zakljuˇcevanje lova, s klikom na to moˇznost se zaslonska maska zakljuˇci lov. Na tej zaslon- ski maski, lovec vpiˇse podatke o morebitnih strelih in plenu ter zakljuˇci lov.
Diplomska naloga 47
Slika 4.5: Zaslonska maska za zasebna obvestila.
Prikaz nadzorne ploˇsˇce je omogoˇcen uporabnikom, ki imajo vlogoadmini- strator. Glede na dodeljene pravice se prikaˇzejo naslednje kontrolne ploˇsˇcice:
• Clani: omogoˇˇ ca dodajanje in brisanje uporabnikov.
• Vloge: omogoˇca dodeljevanje in odvzem vlog.
• Pregled odstrela: omogoˇca pregled planiranega in izvrˇsenega odstrela.
• Obvestila: omogoˇca pisanje javnih in internih obvestil.
• Pregled ˇskode: omogoˇca pregled prijavljenih ˇskod za lovsko druˇzino uporabnika.
Slika 4.6: Zaslonske maske za vpis na lov.
Slika 4.7: Zaslonska maska nadzorne ploˇsˇce.
Diplomska naloga 49
4.6 Implementacija zahtev PWA
Da spletna apikacija eLovskaDruˇzina postane progresivna je potrebno im- plementirati ˇse tehnologiji storitveni delavec in IndexedDB ter ustvariti pra- vilno nastavljen manifest spletne aplikacije.
4.6.1 Manifest spletne aplikacije eLovskaDruˇ zina
Manifest za progresivno spletno aplikacijo eLovskaDruˇzina je izpolnjen z nastavitvami prikazanimi na sliki 4.8. Pri dodajanju na domaˇci zaslon se kot ikona aplikacije doda Logo.png, zaradi nastavitvepurpose. Za nastavitev display sem izbral vrednost fullscreen, ker uporabnik ob zagonu aplikacije dobi obˇcutek, da uporablja domorodno aplikacijo.
{
"name": "eLovskaDruˇzina",
"short_name": "eLD",
"description": "Progresivna spletna aplikacija za
informatizacijo delovanja lovskih druˇzin",
"icons": [ {
"src": "images/bigLogo.png",
"sizes": "180x180",
"type": "image/png"
}, {
"src": "images/Logo.png",
"sizes": "60x78",
"type": "image/png",
"purpose": "maskable"
}, {
"src": "images/biggerLogo.png",
"sizes": "520x520",
"type": "image/png"
} ],
"start_url": "index.html",
"display": "fullscreen",
"theme_color": "#00FF7F",
"background_color": "#00FF7F"
}
Slika 4.8: Datoteka.webmanifestza progresivno spletno aplikacijo eLovska- Druˇzina.
Diplomska naloga 51
4.6.2 Implementacija IndexedDB
Ob vsakem zagonu progresivne spletne aplikacije se preveri ali brskalnik podpira tehnologijo IndexedDB in odpre podatkovno bazo. Ob prvem zagonu podatkovne baze se kreira 22 shramb objektov, ki so potrebne za delovanje aplikacije brez internetne povezave. Kreiranje shramb objektov je prikazano na sliki 4.9.
function createObjectStores(db) {
db.createObjectStore("javnaObvestila",{ keyPath: "id"});
db.createObjectStore("zasebnaObvestila",{ keyPath: "id"});
db.createObjectStore("lovskaDruzina",{ keyPath: "id"});
db.createObjectStore("user",{ keyPath : "username"});
db.createObjectStore("lov",{ autoIncrement : true});
db.createObjectStore("pregledOdstrela",
{ autoIncrement : true});
db.createObjectStore("aktivniLov",{ autoIncrement : true});
db.createObjectStore("lovisca",{ autoIncrement : true});
db.createObjectStore("divjad",{ autoIncrement : true});
db.createObjectStore("trenutenLov",{ autoIncrement : true});
db.createObjectStore("token",{ autoIncrement : true});
db.createObjectStore("LovOffline",{ autoIncrement : true});
db.createObjectStore("UserToAdd",{ autoIncrement : true});
db.createObjectStore("UserToDelete",
{ autoIncrement : true});
db.createObjectStore("AllUsers",);
db.createObjectStore("AllVloge",{ keyPath : "vloga_id"});
db.createObjectStore("UsersVloge",
{ autoIncrement : true});
db.createObjectStore("RolesToAdd",
{ autoIncrement : true});
db.createObjectStore("RolesToDelete",
{ autoIncrement : true});
db.createObjectStore("ObvestiloToAdd",
{ autoIncrement : true});
db.createObjectStore("PrijavaSkode",
{ autoIncrement : true});
db.createObjectStore("SkodaToUpdate",
{ autoIncrement : true});
}
Slika 4.9: Kreiranje shramb objektov za aplikacijo eLovskaDruˇzina.
Diplomska naloga 53 Veˇcina shramb objektov se uporablja za shranjevanje podatkov, ki so po- trebni za pravilen prikaz aplikacije (npr. javna obvestila, zasebna obvestila, seznam lovskih druˇzin,...). Te shrambe se ob zagonu, prijavi in vsakem ponov- nem klicu do podatkovne baze na streˇzniku posodobijo z aˇzurnimi podatki.
Nekatere druge shrambe (to so: RolesToAdd,RolesToDelete,ObvestiloToAdd, SkodaToUpdate, LovOffline, UserToAdd, UserToDelete), pa se uporablja za izvajanje akcij brez internetne povezave (npr. dodajanje uporabnika se zapiˇse v shrambo objektovUserToAdd). Do podatkov iz teh shramb dostopa samo skripta storitveni delavec ob ponovni vzpostavitvi internetne povezave.
Vsaka akcija manipulacije podatkov v IndexedDB deluje po enakem naˇcelu, kar je prikazano na sliki 4.10. ˇCe ima aplikacija dostop do internetne pove- zave, pridobi podatke iz podatkovne baze na streˇzniku, v IndexedDB pobriˇse stare in doda aˇzurne podatke. Ce dostopa do internetne povezave nima,ˇ pridobi podatke iz IndexedDB.
if(window.navigator.onLine){
var settings = {
"url": backend + "lovisca",
"method": "POST",
"timeout": 0,
"headers": {
"Content-Type": "application/json",
"Authorization": globals.puo.token },
"data": JSON.stringify(
{
"LD": globals.puo.ime_druzine }
), };
$.ajax(settings).done(function (response) { clearLovisca(response);
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({lovisca : response});
that.getView().setModel(oModel);
});
} else{
readLovisca(that);
}
Slika 4.10: Primer implementacije pridobivanja loviˇsˇc lovske druˇzine uporab- nika z in brez internetne povezave.
Diplomska naloga 55
4.6.3 Implementacija storitvenega delavca
Tehnologija storitveni delavec omogoˇca delovanje progresivne spletne apli- kacije eLovskaDruˇzina brez internetne povezave in ob ponovni vzpostavitvi povezave poˇslje podatke na streˇznik.
Ob prvem zagonu se v predpomnilnik shranijo vse datoteke, ki so pomembne za delovanje aplikacije brez internetne povezave (npr. kontrolerji, slike, da- toteke za prikaz zaslonskih mask, spletni manifest,...). Shranjevanje se zgodi ob dogodku nameˇsˇcanja, kot je prikazano na sliki 4.11.
self.addEventListener(’install’, function(event) { // Perform install steps
event.waitUntil(
caches.open(CACHE_NAME) .then(function(cache) {
console.log(’Opened cache’);
return cache.addAll(urlsToCache);
}) );
});
Slika 4.11: Implementacija dogodka install v aplikaciji eLovskaDruˇzina.
Dogodek fetch je implementiran na naˇcin najprej predpomnilnik. Ta naˇcin je razˇsirjen s kontrolo, ki na zahtevke z metodo POST vedno odgovori preko omreˇzja. Implementacija dogodka fetch je na sliki 4.12.
self.addEventListener(’fetch’, function(event) { if(event.request.method == "POST"){
event.respondWith(fetch(event.request));
} else{
event.respondWith(
caches.match(event.request) .then(function(response) {
// Cache hit - return response if (response) {
return response;
}
return fetch(event.request);
} ) );
} });
Slika 4.12: Implementacija dogodka fetch v aplikaciji eLovskaDruˇzina.
Implementiran je tudi dogodek sync, ki omogoˇca izvajanje akcij v ozadju.
Ta dogodek uporabljajo vse kontrolne ploˇsˇcice nadzorne ploˇsˇce in akcijaza- kljuˇci lov. Da se dogodek sync sproˇzi, ga je potrebno najprej registrirati.
Registracija dogodka se zgodi, ˇce poˇsiljanje podatkov preko omreˇzja ne uspe.
Glej sliko 4.13.
Diplomska naloga 57 navigator.serviceWorker.ready.then((swRegistration) =>
swRegistration.sync.register(’deleteRoles’) ).catch(console.log);
Slika 4.13: Registracija dogodka sync z znaˇcko deleteRoles v aplikaciji eLo- vskaDruˇzina.
Ob ponovni vzpostavitvi internetne povezave se izvede funkcija pod regi- strirano znaˇcko. V tej funkciji se preberejo podatki iz IndexedDB in izvede se akcija manipulacije podatkov v podatkovni bazi na streˇzniku. Glej sliko 4.14.
self.addEventListener(’sync’, function(event) { if (event.tag == ’sendLov’) {
event.waitUntil(sendLovSync());
}
else if(event.tag == "addUser"){
event.waitUntil(handleAddUser());
}
else if(event.tag == "deleteUser"){
event.waitUntil(handleDeleteUser());
}
else if(event.tag == "addRoles"){
event.waitUntil(handleAddVloge());
}
else if(event.tag == "deleteRoles"){
event.waitUntil(handleDeleteVloge());
}
else if(event.tag == "addObvestilo"){
event.waitUntil(handleAddObvestilo());
}
else if(event.tag == "setPregledano"){
event.waitUntil(handleUpdateSkoda());
} });
Slika 4.14: Implementacija dogodka sync v aplikaciji eLovskaDruˇzina.
Poglavje 5 Zakljuˇ cek
5.1 Evalvacija
Progresivno spletno aplikacijo eLovskaDruˇzina sem v preizkuˇsanje predal ˇclanom Lovske druˇzine Bukovca. Od trinajstih ˇclanov sem pridobil dokaj podobne odgovore, ki jih lahko povzamem v naslednjih ugotovitvah:
• Uporabniki so bili z aplikacijo zadovoljni, pohvalili so enostaven izgled uporabniˇskega vmesnika.
• ˇSest uporabnikov je bilo zaskrbljenih, da starejˇsi ˇclani kljub enostav- nemu uporabniˇskemu vmesniku ne bodo znali uporabljati aplikacije.
• Veˇcina uporabnikov si ob vpisu na lov ˇzeli pregled nad vsemi vpisanimi lovi, ne le nad aktivnimi.
5.2 Sklep
V okviru diplomskega dela sem razvil progresivno spletno aplikacijo, ki informacijsko podpre enega od procesov delovanja lovskih druˇzin. Osrednji del aplikacije predstavlja funkcionalnostVpis na lov. Opisal sem tehnologije, ki so omogoˇcile delovanje spletne aplikacije brez internetne povezave, in tiste, ki sem jih uporabil pri razvijanju uporabniˇskega vmesnika, podatkovne baze in API-ja za pridobivanje podatkov iz podatkovne baze.
59
5.3 Nadgradnja aplikacije eLovskaDruˇ zina
Progresivno spletno aplikacijo eLovskaDruˇzina se lahko nadgradi na dva naˇcina, ki sta: informatizacija ostalih delovnih procesov lovskih druˇzin (delo- vanje cenilca ˇskod, beleˇzenje delovnih ur v loviˇsˇcu, delo ˇclanov odbora lovske druˇzine) in integracija aplikacije eLovskaDruˇzina s sistemom Lisjak. Sistem Lisjak je namenjen pregledu delovanja lovskih druˇzin, ki ga izvaja Lovska zveza Slovenije.
Lovske druˇzine svoje delovanje med lovsko sezono beleˇzijo v razne evidenˇcne knjige (knjiga za vpis na lov, knjiga cenilca ˇskod,...). Ob zakljuˇcku lovske sezone morajo vsebino evidenˇcnih knjig roˇcno vnesti v sistem Lisjak. Integra- cija aplikacije eLovskaDruˇzina s sistemom Lisjak bi tako omogoˇcila samodejni prenos vseh podatkov delovanja lovskih druˇzin v sistem Lisjak.
Literatura
[1] Oluwatofunmi Adetunji in sod. “Dawning of Progressive Web Appli- cations (PWA): Edging Out the Pitfalls of Traditional Mobile Deve- lopment”. V: American Scientific Research Journal for Engineering, Technology, and Sciences (ASRJETS) 68.1 (2020), str. 85–99.
[2] Sean Amarasinghe.Service worker development cookbook. Packt Publi- shing Ltd, 2016.
[3] CSS. url: https://developer.mozilla.org/en- US/docs/Learn/
CSS(pridobljeno 21. 8. 2021).
[4] Alessandro Del Sole. Visual Studio Code Distilled: Evolved Code Edi- ting for Windows, MacOS, and Linux. Apress, 2018.
[5] Elovec. url: https://elovec.si/ (pridobljeno 3. 9. 2021).
[6] Elovec - Dreˇznica. url: https://dreznica.elovec.si/ (pridobljeno 3. 9. 2021).
[7] Abhi Gambhir in Gaurav Raj. “Analysis of cache in service worker and performance scoring of progressive web application”. V:2018 Internati- onal Conference on Advances in Computing and Communication Engi- neering (ICACCE). IEEE. 2018, str. 294–299. doi: 10.1109/ICACCE.
2018.8441715.
[8] Karen Hine. “Evernote”. V: Journal of the Canadian Health Libraries Association/Journal de l’Association des biblioth`eques de la sant´e du Canada 35.1 (2014), str. 41–43. doi:10.5596/c14-001.
61
[9] HTML5.url:https://html.spec.whatwg.org/multipage/introduction.
html#introduction (pridobljeno 21. 8. 2021).
[10] HTMLCSS. url: https : / / www . w3 . org / standards / webdesign / htmlcss(pridobljeno 21. 8. 2021).
[11] Yuheng Hu, Lydia Manikonda in Subbarao Kambhampati. “What we instagram: A first analysis of instagram photo content and user types”.
V:Eighth International AAAI conference on weblogs and social media.
2014.
[12] Slinger Jansen in Ewoud Bloemendal. “Defining app stores: The role of curated marketplaces in software ecosystems”. V: International Con- ference of Software Business. Springer. 2013, str. 195–206. doi: 10 . 1007/978-3-642-39336-5_19.
[13] Javascript. url: https : / / www . w3 . org / standards / webdesign / script (pridobljeno 21. 8. 2021).
[14] Fabian Johannsen. “Progressive Web Applications and Code Comple- xity: An analysis of the added complexity of making a web application progressive”. Doktorska disertacija. 2018. url: http://urn.kb.se/
resolve?urn=urn:nbn:se:liu:diva-149496.
[15] Gunwoong Lee in T Santanam Raghu. “Determinants of mobile apps’
success: Evidence from the app store market”. V:Journal of Manage- ment Information Systems 31.2 (2014), str. 133–170. doi: 10.2753/
MIS0742-1222310206.
[16] V S Magomadov. “Exploring the role of progressive web applications in modern web development”. V: Journal of Physics: Conference Series 1679 (nov. 2020), str. 022043. doi: 10 . 1088 / 1742 - 6596 / 1679 / 2 / 022043.
[17] Tim A. Majchrzak, Andreas Biørn-Hansen in Tor-Morten Grønli. “Pro- gressive Web Apps: the Definite Approach to Cross-Platform Develop- ment?” V: jan. 2018. doi:10.24251/HICSS.2018.718.
Diplomska naloga 63 [18] Manel Mena in sod. “A Progressive Web Application Based on Micro- services Combining Geospatial Data and the Internet of Things”. V:
IEEE Access 7 (2019), str. 104577–104590. doi: 10 . 1109 / ACCESS . 2019.2932196.
[19] MySQL. url: https : / / www . edureka . co / blog / what - is - mysql/
(pridobljeno 21. 8. 2021).
[20] NodeJS. url: https : / / developer . mozilla . org / en - US / docs / Learn / Server - side / Express _ Nodejs / Introduction (pridobljeno 21. 8. 2021).
[21] Offline cookbook.url:https://web.dev/offline-cookbook/ (prido- bljeno 3. 9. 2021).
[22] Dang Chuong Pham. “Progressive web applications as a solution for businesses: Case study: Twitter”. V: (2020). url: http : / / urn . fi / URN:NBN:fi:amk-2020120826847.
[23] phpMyAdmin. url: https : / / docs . phpmyadmin . net / en / latest / intro.html (pridobljeno 21. 8. 2021).
[24] Postman. url: https : / / www . encora . com / insights / what - is - postman-api-test (pridobljeno 21. 8. 2021).
[25] Progressive Web Apps: Escaping Tabs Without Losing Our Soul. url: https://medium.com/@slightlylate/progressive-apps-escaping- tabs-without-losing-our-soul-3b93a8561955(pridobljeno 3. 9. 2021).
[26] Narayan Prusty.Learning ECMAScript 6. Packt Publishing Ltd, 2015.
[27] Carlos Rojas. “IndexedDB”. V:Building Progressive Web Applications with Vue. js. Springer, 2020, str. 147–161.
[28] SAPUI5.url:https://blogs.sap.com/2015/05/12/introduction- of-sapui5-technology/ (pridobljeno 21. 8. 2021).
[29] SAPUI5 MVC. url: https://sapui5.hana.ondemand.com/1.36.
6 / docs / guide / 91f233476f4d1014b6dd926db0e91070 . html (prido- bljeno 3. 9. 2021).
[30] S Tandel in Abhishek Jamadar. “Impact of progressive web apps on web app development”. V: International Journal of Innovative Research in Science, Engineering and Technology 7.9 (2018), str. 9439–9444. doi: 10.15680/IJIRSET.2018.0709021.
[31] The history of PWA development. url: https://www.divante.com/
pwabook/chapter/02-the-history-of-pwas(pridobljeno 3. 9. 2021).
[32] W3C Web Application Manifest. url: https : / / www . w3 . org / TR / appmanifest/(pridobljeno 3. 9. 2021).
[33] Norman Walsh. “A technical introduction to XML”. V: World Wide Web Journal (1998), str. 1–2.
