Platforma za beleˇzenje in spremljanje rekreacijskih poti

Celotno besedilo

(1)Univerza v Ljubljani Fakulteta za računalništvo in informatiko. Žan Malenšek. Platforma za beleženje in spremljanje rekreacijskih poti DIPLOMSKO DELO VISOKOŠOLSKI STROKOVNI ŠTUDIJSKI PROGRAM PRVE STOPNJE RAČUNALNIŠTVO IN INFORMATIKA. Mentor: doc. dr. Jure Žabkar Ljubljana, 2022.

(2) Copyright. Rezultati diplomske naloge so intelektualna lastnina avtorja in Fakultete za računalništvo in informatiko Univerze v Ljubljani. Za objavo in koriščenje rezultatov diplomske naloge je potrebno pisno privoljenje avtorja, Fakultete za računalništvo in informatiko ter mentorja.. Besedilo je oblikovano z urejevalnikom besedil LATEX..

(3) Fakulteta za računalništvo in informatiko izdaja naslednjo nalogo: Tematika naloge: Za spremljanje rekreacijskih poti (peš, s kolesom) obstajajo številne aplikacije, ki se osredotočajo predvsem na prikaz poti na zemljevidu s pomočjo podatkov iz GPS naprave. Uporabniška izkušnja z vidika priprave in zajema podatkov je potisnjena nekoliko na stran - uporabnik ima običajno precej dela s pravočasnim zagonom samega beleženja poti, morebitnim ustavljanjem le-tega na poti in shranjevanjem na koncu. Raziščite smiselne izboljšave uporabniške izkušnje in jih implementirajte v sistemu za avtomatsko beleženje in spremljanje poti..

(4)

(5) Kazalo Povzetek Abstract 1 Uvod. 1. 1.1. 1. Pregled sorodnega dela . . . . . . . . . . . . . . . . . . . . . .. 2 Priprava. 3. 2.1. Postopek izdelave . . . . . . . . . . . . . . . . . . . . . . . . .. 3. 2.2. Določanje funkcionalnosti aplikacije . . . . . . . . . . . . . . .. 3. 2.3. Testiranje naprav za namene zaznavanja bližine . . . . . . . .. 4. 2.4. Izbira tehnologij . . . . . . . . . . . . . . . . . . . . . . . . . .. 5. 3 Priprava oblikovanja. 7. 3.1. Spletna aplikacija . . . . . . . . . . . . . . . . . . . . . . . . .. 3.2. Mobilna aplikacija. 8. . . . . . . . . . . . . . . . . . . . . . . . . 12. 4 Izdelava zalednega sistema. 17. 4.1. Načrtovanje podatkovne baze . . . . . . . . . . . . . . . . . . 17. 4.2. Priprava modelov entitet . . . . . . . . . . . . . . . . . . . . . 18. 4.3. Vmesnik za komunikacijo z mobilnimi aplikacijami - API . . . 19. 5 Izdelava spletne aplikacije. 21. 5.1. Registracija in prijava . . . . . . . . . . . . . . . . . . . . . . 21. 5.2. Zabeležene poti . . . . . . . . . . . . . . . . . . . . . . . . . . 21.

(6) 5.3. Statistika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22. 6 Izdelava mobilne aplikacije. 23. 6.1. Izbor in priprava arhitekture aplikacije . . . . . . . . . . . . . 23. 6.2. SwiftUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27. 6.3. Modularnost . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27. 6.4. Komunikacija s strežnikom . . . . . . . . . . . . . . . . . . . . 28. 6.5. Zaznavanje bližine naprav in dodajanje nove naprave . . . . . 28. 6.6. Beleženje poti - zagon, postopek in ustavitev . . . . . . . . . . 29. 7 Postavitev strežnika za zaledni sistem in spletno aplikacijo. 31. 7.1. Varnost . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31. 7.2. Namestitev programov . . . . . . . . . . . . . . . . . . . . . . 32. 7.3. Postavitev projekta Laravel na strežniku . . . . . . . . . . . . 33. 8 Objava mobilne aplikacije. 35. 9 Zaključek. 37. 9.1. Testiranje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37. 9.2. Diskusija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38. Literatura. 40.

(7) Seznam uporabljenih kratic kratica angleško. slovensko. BLE. Bluetooth Low Energy. Nizkoenergijski Bluetooth. NFC. Near Field Communication. Tehnologija za izmenjavo podatkov na kratki razdalji. RFID. Radio frequency identification. Radiofrekvenčna identifikacija. TLS. Transport Layer Security. Protokol, ki omogoča zaupnost in integriteto podatkov ter avtentikacijo. JSON. JavaScript Object Notation. Odprti standard za format podatkov. HTTP. Hyper Text Transfer Protocol. Komunikacijski protokol med odjemalcem in strežnikom. CLI. Command Line Interface. Vmesnik z ukazno vrstico. SSH. Secure Shell. Varna lupina. API. Application Programming in- Aplikacijski programski vmeterface. snik.

(8)

(9) Povzetek Naslov: Platforma za beleženje in spremljanje rekreacijskih poti Avtor: Žan Malenšek Če pri športnih aktivnostih uporabljamo tehnologijo, ki zahteva, da ročno aktiviramo začetek aktivnosti, se lahko pogosto zgodi, da na aktivacijo pozabimo ali pa se nanjo spomnimo, ko smo že na polovici poti. To bomo reševali s pomočjo brezžičnega modula, ki ga bo pametni telefon zaznal preko tehnologije Bluetooth [4]. Ko bo telefon zaznal bližino modula, bo aktiviral aktivnost namesto uporabnika. Po zaključeni aktivnosti se bo le-ta naložila na strežnik in uporabnik bo imel vpogled v vse svoje zabeležene poti in osnovno statistiko. Ključne besede: mobilna aplikacija, spletna aplikacija, rekreacija, bluetooth..

(10)

(11) Abstract Title: A platform for saving and viewing recreational tracks Author: Žan Malenšek If we use technology that requires the activation of the beginning of sports activity manually, we may forget to activate it or we do it when we are half way through it. We address this issue using a wireless module, which detects the start of the activity by a smartphone using Bluetooth [4]. The smartphone starts the activity automatically when it detects the nearby presence of the module. Activity is saved to the server after it is finished and the user is able to see all of their logged routes and basic statistics. Keywords: mobile application, web application, recreation, bluetooth..

(12)

(13) Poglavje 1 Uvod Mobilne aplikacije so precej razširjene tudi pri športu. Omogočajo različne funkcionalnosti - od beleženja korakov do analize športnih aktivnosti. Cilj tega diplomskega dela je izdelati mobilno aplikacijo, ki beleži opravljene rekreacijske poti in je zmožna beleženje začeti samodejno. Zaznavanje se izvaja preko ene izmed tehnologij za brezžično komunikacijo, ki jo podpirajo pametni telefoni in naprava, ki je nameščena na kolesu uporabnika. Po zaznavi bližine naprave aplikacija samodejno zažene beleženje in o tem obvesti uporabnika. Poleg mobilne aplikacije pa je na voljo tudi spletna aplikacija, s pomočjo katere uporabnik lahko vidi svoje zabeležene poti in osnovno statistiko. Predstavljen je celoten postopek izdelave takšnega sistema - od načrtovanja do namestitve na strežnik.. 1.1 1.1.1. Pregled sorodnega dela Strava. Strava [27] je mobilna aplikacija, ki omogoča zajem in pregled nad zajetimi podatki pri športnih aktivnostih. Ponuja izbiro različnih tipov aktivnosti, od teka do smučanja. Poleg zajema aktivnosti omogoča tudi deljenje vsebine z drugimi uporabniki in deluje kot športno družbeno omrežje. Vsebuje 1.

(14) 2. Žan Malenšek. tudi možnost tekmovanja z drugimi uporabniki s primerjanjem rezultatov po celotni progi in po posameznih segmentih. Naša rešitev se od aplikacije Strava razlikuje po tem, da omogoča samodejno zaznavanje začetka aktivnosti na podlagi bližine predmeta, ki ga uporabljamo za izbrano aktivnost. Strava omogoča samo ročni zagon aktivnosti. Naša rešitev ne vsebuje lastnosti družbenega omrežja kot sta deljenje z ostalimi uporabniki in primerjanje rezultatov.. 1.1.2. Fitbit. Fitbit [17] ponuja pametne zapestnice, ki omogočajo funkcionalnosti kot sta spremljanje srčnega utripa in beleženje športne aktivnosti z lokacijskimi podatki. Zapestnico je potrebno povezati z aplikacijo, kjer si lahko ogledamo zajete podatke. Na voljo pa je tudi ročni vnos aktivnosti in ostalih podatkov kot je na primer zaužita hrana. Fitbit omogoča avtomatski zajem aktivnosti na podlagi različnih podatkov, med katere sodi tudi srčni utrip. Prednost takšnega avtomatskega zajema v primerjavi z našo rešitvijo je, da ni potrebna dodatna naprava za zaznavanje, saj zapestnica sama zajema srčni utrip uporabnika. Vendar pri takšni rešitvi zaznavanje ni vedno zanesljivo, saj se nam srčni utrip lahko poviša tudi iz drugih razlogov. Sam zajem srčnega utripa je funkcionalnost, ki je naša rešitev ne omogoča oziroma bi potrebovala dodatno napravo za ta namen..

(15) Poglavje 2 Priprava 2.1. Postopek izdelave. Postopek se začne z določitvijo funkcionalnosti aplikacije. Sledita izbira in testiranje naprave, ki jo telefon lahko zazna v bližini. Izbrati moramo tudi ustrezne tehnologije, ki bodo uporabljene za izdelavo sistema in pripraviti ustrezno oblikovno podobo aplikacije z uporabo izbrane barvne palete. Na tej točki imamo pripravljeno vse potrebno za nadaljevanje, zato pričnemo z načrtovanjem zalednega sistema in spletne aplikacije in ju nato izdelamo po zastavljenem načrtu. Ko je zaledni sistem pripravljen, lahko nanj preko vmesnika (API) povežemo mobilno aplikacijo, zato nadaljujemo z načrtovanjem in izdelavo mobilne aplikacije. Po zaključku razvoja zalednega sistema ter spletne in mobilne aplikacije je čas za namestitev zalednega sistema na strežnik in objavo aplikacije.. 2.2. Določanje funkcionalnosti aplikacije. Želene funkcionalnoti si zastavimo na začetku, saj lahko tako lažje ocenimo, kako dolgo bo trajala izdelava aplikacije. Naknadne spremembe funkcional3.

(16) 4. Žan Malenšek. nosti načeloma niso zaželene, ker se s tem lahko podre vse korake izdelave, ki sledijo. Nekatere funkcionalnosti lahko s seboj prinesejo tudi celovite spremembe v aplikaciji in jih je zato lahko nesmiselno implementirati, kar pa se težje zgodi, če vse funkcionalnosti načrtujemo že pred začetkom postopka izdelave. V sklopu izdelave tega sistema smo določili naslednje funkcionalnosti za spletno aplikacijo: • prijava in registracija uporabnikov, • prikaz zgodovine zabeleženih poti, • prikaz osnovne statistike na tedenski, mesečni in skupni osnovi, in naslednje funkcionalnosti za mobilno aplikacijo: • prijava in registracija uporabnikov, • zaznavanje bližine brezžične naprave, • samodejni začetek beleženja lokacije, ko je zaznana bližina brezžične naprave, • shranjevanje poti na zalednem sistemu po zaključku poti.. 2.3. Testiranje naprav za namene zaznavanja bližine. 2.3.1. RFID NFC nalepke. Preizkusili smo nekaj NFC nalepk. S pametnim telefonom ne moremo zaznati vseh RFID nalepk. Tiste, ki jih je telefon lahko zaznal pa so delovale na zelo kratki razdalji (približno do enega centimetra). Razdalja je premajhna, da bi bila NFC nalepka uporabna za namen tega projekta. Poleg tega pa mora aplikacija omogočati zaznavanje med delovanjem v ozadju..

(17) Diplomska naloga. 2.3.2. 5. Obesek za ključe. V preizkušanju je bil tudi obesek, ki podpira tehnologijo BLE. Prvo povezavo moramo vzpostaviti tako, da aktiviramo obesek (s pritiskom na gumb na obesku), nato pa si ga telefon zapomne in lahko povezavo vzpostavi brez pritiska na obesek. Torej bi lahko preverjali, če je obesek v dosegu in je signal dovolj močan, kar bi pomenilo, da je uporabnik pri kolesu.. 2.3.3. IBeacon. Zadnja naprava, ki je bila preizkušena je zelo podobna obesku za ključe, le da podpira programski protokol iBeacon [5], ki ga je Apple [3] razvil in dal v uporabo. Ta protokol uporablja tehnologijo BLE in pošilja podatke v točno določenem formatu. Ena izmed primernih uporab tega protokola je postavitev takšnih naprav po trgovskem centru in prikazovanje prilagojenih informacij na mobilnih telefonih mimoidočih - ko se uporabnik približa napravi jo telefon zazna. Zaradi tega pa je tovrstna naprava uporabna tudi za potrebe tega projekta. Ko se uporabnik približa kolesu, na katerem ima to napravo, lahko aplikacija požene beleženje poti in o tem tudi obvesti uporabnika.. 2.4 2.4.1. Izbira tehnologij PHP, Laravel, Bootstrap. Za izdelavo zalednega sistema in spletne aplikacije bomo uporabili programski jezik PHP [25] in ogrodje Laravel [21]. Slednje je (v času pisanja) popularno ogrodje, ki vsebuje osnovne funkcionalnosti kot sta interakcija s podatkovno bazo izpis podatkov ter elemente varnosti kot sta preprečeganje CSRF (ang. cross-site request forgery) in zgoščevanje gesel uporabnikov. Za izdelavo uporabniškega vmesnika spletne aplikacije bomo uporabili ogrodje Bootstrap [13], ki vsebuje vizualne gradnike, na primer gumbe, mrežno postavitev in osnovno paleto barv..

(18) 6. Žan Malenšek. 2.4.2. Mobilne aplikacije. V svetu mobilnih naprav sta v času pisanja najbolj razširjena dva operacijska sistema - Apple iOS [10] in Android [1]. Običajno želimo, da je aplikacija prisotna na obeh operacijskih sistemih saj s tem pokrijemo skoraj celoten trg. Apple [3] in Google ponujata razvojno okolje za svoja operacijska sistema - za razvoj iOS [10] aplikacij je to Xcode [6], za razvoj Android [1] aplikacij pa Android Studio [2]. Na ta način moramo razviti dve aplikaciji - vsako za eno platformo. Obstajajo pa tudi druge rešitve, pri katerih nam ni potrebno razvijati za vsako platformo posebej. Za potrebe izdelave tega sistema smo izbrali izdelavo mobilne aplikacije samo za eno platformo, iOS [10]. Programski jezik, ki ga bomo uporabili pri izdelavi se imenuje Swift. Za izgradnjo uporabniškega vmesnika pa bo uporabljena tehnologija SwiftUI [11]. Na platformi Android [1] se podobna tehnologija imenuje Jetpack Compose [20]..

(19) Poglavje 3 Priprava oblikovanja. Ker že sama izdelava grafične podobe aplikacije na računalniku vzame kar nekaj časa, je dobro pred tem oblikovanje pripravit na papirju. Ni potrebno, da naredimo celotno grafično podobo aplikacije na papirju - pripraviti moramo samo osnovno postavitev elementov. Tako lahko hitro opazimo morebitne težave pri oblikovanju in jih hitro odpravimo. S tem papirjem si nato pomagamo pri izdelavi grafične podobe na računalniku. Za oblikovanje uporabniških vmesnikov so na voljo različni programi - Adobe Illustrator [7], Adobe XD [8], Sketch [26], in Figma [16]. Odločili smo se za uporabo programa Sketch. V izbranem programu za oblikovanje si lahko pripravimo osnovne gradnike za oblikovanje. Za nekatere programe obstajajo paketi ali knjižnice, ki že vsebujejo sistemske gradnike pripravljene za uporabo. Apple [3] ponuja paket za programe Sketch, Adobe Photoshop in Adobe XD na svoji spletni strani ”Apple Design Resources”[9]. Na platformi Android [1] pa je na voljo stil ”material design”[23], za katerega so prav tako na voljo paketi za oblikovanje. Za potrebe tega projekta smo dodatno pripravili gradnike kot sta na primer gumb in kartica (ang. card) z zaobljenimi robovi in senco. 7.

(20) 8. 3.1 3.1.1. Žan Malenšek. Spletna aplikacija Registracija. Zaslon za registracijo (slika 3.1) vsebuje polja za vnos vseh podatkov, ki so potrebni za ustvarjanje vsakega uporabnika. Poleg obrazca vsebuje še gumb za prijavo, ki odpre obrazec za prijavo.. Create account Name Email Password. Register Login. Slika 3.1: Zaslon za registracijo v spletni aplikaciji.

(21) 9. Diplomska naloga. 3.1.2. Prijava. Zaslon za prijavo je podoben zaslonu za registracijo, le da nima polja za vnos imena in vsebuje tudi gumb za registracijo, ki vodi do obrazca za registracijo.. 3.1.3. Seznam zabeleženih poti. Seznam zabeleženih poti (slika 3.2) vsebuje seznam poti z osnovnimi podatki - ime poti, datum, opravljena razdalja, opravljena višinska razlika in trajanje poti. Nad seznamom sta vidna dva gumba (poti in statistika) na levi strani, na desni strani pa je gumb z imenom uporabnika, ki omogoča odjavo uporabnika.. Paths. John. Statistics. Rožnik. 10.08.2021. 3.25 km. 255 m. 00:25:30. Rožnik - Šiška. 10.08.2021. 3.25 km. 255 m. 00:25:30. Rožnik. 10.08.2021. 3.25 km. 255 m. 00:25:30. Date. Date. Date. Distance. Distance. Distance. Altitude. Altitude. Altitude. Duration. Duration. Duration. Slika 3.2: Zaslon s seznamom zabeleženih poti v spletni aplikaciji.

(22) 10. 3.1.4. Žan Malenšek. Podrobnosti zabeležene poti. Ta zaslon (slika 3.3) vsebuje poleg osnovnih podatkov še prikaz zemljevida koordinat, ki so zabeležene za prikazano pot. Izrisana je ikona na lokaciji začetka poti, sledi izris poti po zabeleženih koordinatah, na koncu pa je prikazana še ikona na lokaciji zaključene poti.. Paths. Rožnik. John. Statistics. 10.08.2021 Date. 3.25 km Distance. 255 m Altitude. 00:25:30 Duration. Slika 3.3: Zaslon s podrobnostmi o poti in zemljevidom v spletni aplikaciji.

(23) 11. Diplomska naloga. 3.1.5. Statistika. Za prikazane statistične podatke so uporabljeni osnovni podatki, ki so zabeleženi pri poteh. Združeni so po obdobju, torej zadnji teden, zadnji mesec, in vse skupaj. Oblikovanje tega zaslona je prikazano na sliki 3.4. Paths. John. Statistics. WEEK. 14.5 km. 522 m. 01:02:13. Distance. Altitude. Time. 67.3 km. 2428 m. 04:42:38. Distance. Altitude. Time. 367.8 km. 25.128 m. 62:31:41. Distance. Altitude. Time. Rožnik Top. MONTH. Rožnik Top. TOTAL. Slika 3.4: Zaslon s statistiko v spletni aplikaciji.

(24) 12. Žan Malenšek. 3.2. Mobilna aplikacija. 3.2.1. Registracija. Prikazani so vnosna polja za enako vrsto podatkov kot pri spletni aplikaciji - ime, elektronski naslov in geslo. Prav tako je na tem zaslonu gumb za prijavo, ki odpre obrazec za prijavo. Oblikovanje je prikazano na sliki 3.2. 9:41. Create account Name Email Password. Register Login. Slika 3.5: Zaslon z obrazcem za registracijo v mobilni aplikaciji. 3.2.2. Prijava. Zaslon za prijavo je tako kot pri spletni aplikaciji podoben zaslonu za registracijo, le da nima polja za vnos imena..

(25) 13. Diplomska naloga. 3.2.3. Naprava ni dodana. Ta zaslon vsebuje gumb, s katerim uporabnik odpre meni za povezovanje z napravo. To povezavo je potrebno vzpostaviti samo enkrat, potem pa si aplikacija napravo zapomne in jo lahko zazna na podlagi identifikatorja. Oblikovanje je prikazano na sliki 3.6. 9:41. ! No device connected.. Connect a device. Slika 3.6: Zaslon s prikazom stanja brez povezane naprave v mobilni aplikaciji.

(26) 14. 3.2.4. Žan Malenšek. Dodajanje naprave. Prikazan je seznam iBeacon [5] naprav, ki so trenutno zaznane v bližini. Po izbiri naprave si jo bo aplikacija zapomnila in samodejno zagnala beleženje, ko pride v bližino te naprave. Oblikovanje je prikazano na sliki 3.7. 9:41. Connect a device. ! !. Nearby devices. Chiptracker. !. Headphones H32211. !. Phone 200. !. !. !. ". Slika 3.7: Zaslon za dodajanje naprave v mobilni aplikaciji.

(27) 15. Diplomska naloga. 3.2.5. Naprava ni v bližini. Po tem, ko je naprava povezana in shranjena v aplikaciji se v primeru, ko ni v bližini prikazuje ta zaslon, ki uporabniku sporoča, da mora priti bližje k napravi, če želi začeti z beleženjem. Oblikovanje je prikazano na sliki 3.8. 9:41. ! "Chiptracker" not nearby. Bring your phone closer to the device.. Slika 3.8: Zaslon mobilne aplikacije s prikazom obvestila, ko naprave ni v bližini.

(28) 16. 3.2.6. Žan Malenšek. Beleženje. Ko je beleženje aktivno, se prikaže zaslon z osnovnimi podatki o trenutnem stanju (slika 3.9) kot so čas beleženja, opravljena razdalja in povprečna hitrost. 9:41. ! "Chiptracker" not nearby. Bring your phone closer to the device.. Slika 3.9: Zaslon mobilne aplikacije s prikazom trenutnega stanja aktivnega beleženja.

(29) Poglavje 4 Izdelava zalednega sistema 4.1. Načrtovanje podatkovne baze. Z načrtovanjem začnemo pri strukturi podatkovne baze. Pripravimo posamezne entitete, kot so na primer uporabnik in posamezna zabeležena pot. Pri načrtovanju moramo upoštevati način delovanja aplikacije, saj so od tega odvisne tudi povezave med posameznimi entitetami. V našem primeru je vsaka posamezna zabeležena pot vezana na posameznega uporabnika. Vsem entitetam dodamo enolični primarni ključ, ki je nato lahko uporabljen v povezavah z ostalimi entitetami (z uporabo tujih ključev). Entitete v ogrodju Laravel običajno vsebujejo tudi atributa za datum, ko je bila entiteta ustvarjena in datum, ko je bila entiteta posodobljena. Pri uporabniku hranimo še ime, elektronski naslov in izvleček gesla (ang. hash). Pomembno je, da je v atributu za geslo zgolj izvleček uporabnikovega gesla. Ni priporočljivo hraniti dejanskega gesla uporabnika. Izvleček je enosmerno izračunana vrednost - iz izvlečka ni možno pridobiti prvotne vrednosti, torej gesla uporabnika. To zmanjša morebitne težave, ki nastanejo v povezavi z morebitnim vdorom v sistem ali podatkovno bazo, saj napadalec ne pridobi gesel uporabnikov. Hraniti je potrebno še sejne žetone za potrebe mobilnih aplikacij. V spletni aplikaciji se sejni žeton v ogrodju Laravel privzeto hrani v sejnih 17.

(30) 18. Žan Malenšek. podatkih PHP [25] in v piškotkih spletnega brskalnika. Za mobilne aplikacije pa za hranjenje žetonov poskrbimo sami. Sejni žeton je preprost niz znakov, ki je naključno generiran ob prijavi uporabnika. Entiteta, ki hrani sejni žeton, mora vsebovati sam žeton, tuji ključ za vezavo na uporabnika in datum poteka. Omejitev življenjske dobe sejnega žetona je varnostni ukrep - v primeru, da se morebitni napadalec polasti sejnega žetona uporabnika se zmanjša možnost, da bi nastala škoda, saj napadalec v primeru poteklega sejnega žetona le-tega ne more uporabiti. Zadnja entiteta, ki jo potrebujemo je pot. Hraniti moramo tuji ključ za vezavo na uporabnika, ki je to pot zabeležil, seznam koordinat, ime poti, opravljeno razdaljo, pridobljeno višinsko razliko in trajanje beleženja poti.. 4.2. Priprava modelov entitet. Najprej ustvarimo vse entitete, ki smo jih predvideli pri načrtovanju podatkovne baze. V ogrodju Laravel se za vsako entiteto ustvari nov razred (ang. class), ki bo uporabljen za pridobivanje podatkov o tej entiteti (in povezanih entitetah) iz podatkovne baze.. 4.2.1. Razmerja (ang. relations). Ogrodje Laravel vsebuje tudi uporaben koncept razmerij (ang. relations) med entitetami, ki zna naložiti povezane entitete in si jih tudi shrani za čas izvajanja posamezne zahteve, tako da zaporedni dostopi do povezanih entitet ne povzročajo vedno ponovnega nalaganja. Poznamo različne vrste razmerij, ki prihajajo neposredo iz sveta relacijskih podatkovnih baz..

(31) Diplomska naloga. 4.3. 19. Vmesnik za komunikacijo z mobilnimi aplikacijami - API. Mobilna aplikacija bo z zalednim sistemom komunicirala preko vmesnika z uporabo protokola HTTP in enotnega podatkovnega formata na obeh straneh - JSON. Komunikacijski protokol je priporočljivo podpreti s protokolom za varno izmenjavo podatkov - TLS. Vmesnik mora za delovanje vseh zastavljenih funkcionalnosti vsebovati naslednje metode: • registracija uporabnikov, • prijava uporabnikov, • shranjevanje poti. Ko mobilna aplikacija pokliče eno izmed metod, ta uporabi poslane parametre in izvede potrebno akcijo. V primeru registracije uporabnikov metoda uporabi poslano ime, elektronski naslov ter geslo in ustvari uporabnika. Nato še vrne nov sejni žeton aplikaciji, da ga bo lahko le-ta poslala pri nadaljnih klicih metode za shranjevanje poti..

(32) 20. Žan Malenšek.

(33) Poglavje 5 Izdelava spletne aplikacije Spletna aplikacija mora prav tako vsebovati možnosti za registracijo in prijavo uporabnika. Poleg tega pa bo vsebovala še prikaz zabeleženih poti in osnovno statistiko na tedenskem, mesečnem in skupnem nivoju.. 5.1. Registracija in prijava. Obrazec za registracijo vsebuje vsa potrebna polja, ki jih zaledni sistem potrebuje za ustvarjanje novega uporabnika. To so ime, elektronski naslov in geslo. Pri prijavi pa zaledni sistem potrebuje le elektronski naslov in geslo, da lahko poišče in primerno avtenticira uporabnika.. 5.2. Zabeležene poti. Najprej je potrebno prikazati seznam vseh zabeleženih poti in nekaj osnovnih podatkov o posamezni poti, kot so ime, trajanje, opravljena razdalja in podobno. Ko uporabnik izbere posamezno pot, pa se odprejo vse podrobnosti poti, vključno z zemljevidom. Za prikaz zemljevida uporabimo knjižnico in storitev Google Maps [18], ki ji lahko podamo tudi seznam koordinat (lokacije, ki jih je aplikacija zabeležila in shranila kot novo pot). 21.

(34) 22. 5.3. Žan Malenšek. Statistika. Pri prikazu statistike kategoriziramo prikaz po obdobju - zadnjih 7 dni, zadnjih 30 dni in vse skupaj. Vrste statistike, ki jo prikazujemo so skupna razdalja, skupna dosežena nadmorska višina, skupno trajanje in najbolj pogosta pot (glede na ime)..

(35) Poglavje 6 Izdelava mobilne aplikacije 6.1. Izbor in priprava arhitekture aplikacije. Pri izdelavi mobilnih aplikacij se pogosto srečujemo z izbiro načrtovalskega vzorca arhitekture. Omenjeni vzorci nam pomagajo strukturirati aplikacijo, ta pa je potem bolj konsistentno in robustno izdelana. Predstavljeni bodo nekateri bolj razširjeni arhitekturni vzorci, uporabljeni pri izdelavi mobilnih aplikacij za Android [1] in iOS [10].. 23.

(36) 24. Žan Malenšek. 6.1.1. MVP. ”Model View Presenter”je sestavljen iz 3 glavnih gradnikov: • model vsebuje podatke, s katerimi upravljamo, • pogled (ang. view) predstavlja uporabniški vmesnik, ki se prikazuje uporabniku, • predstavljalec (ang. presenter) pa je pravzaprav posrednik in reagira na spremembe v drugih dveh gradnikih ter posodablja njuno stanje. Struktura vzorca je prikazana na sliki 6.1.. Slika 6.1: Prikaz strukture MVP vzorca. 6.1.2. MVVM. ”Model View ViewModel”uporablja precej drugačen princip imenovan vezava podatkov (ang. data binding), sestavljajo pa ga 3 osnovni gradniki: ”Model View Presenter”je sestavljen iz 3 glavnih gradnikov: • model deluje na enak princip kot model pri vzorcu MVP - vsebuje podatke, • pogled modela (ang. view-model) bere podatke iz modela in jih pretvarja v obliko, ki jo lahko pogled prikaže, • pogled (ang. view) se priklopi na pogled modela in opazuje spremembe v podatkih - če pride do sprememb, se pogled osveži in posodobi podatke, ki jih prikazuje..

(37) Diplomska naloga. 25. Princip vezave podatkov (ang. data binding) vsebuje 2 elementa - en element priskrbi podatke, drugi pa jih pridobiva od njega. Pogosto imamo en element, ki priskrbi podatke, nanj pa lahko nato priključimo več elementov, ki od njega pridobivajo podatke. Ko element priskrbi podatke, jih posreduje vsem elementom, ki jih pridobivajo od njega. Pri vzorcu MVVM pogled modela (ang. view-model) predstavlja element, ki priskrbi podatke, pogled pa predstavlja element, ki jih od njega pridobiva. Struktura vzorca je prikazana na sliki 6.2.. Slika 6.2: Prikaz strukture MVVM vzorca. 6.1.3. VIPER. ”View Interactor Presenter Entity Router”je bolj kompleksen vzorec, ki je sestavljen iz 5 osnovnih gradnikov, ki so prisotni pri vsakem izmed modulov (module si lahko predstavljamo kot posamezne zaslone v aplikaciji, lahko pa je delitev tudi drugačna). Primer modula je registracija uporabnikov. Osnovni gradniki modula v vzorcu VIPER so: • usmerjevalnik (ang. router) poskrbi za navigacijo med moduli, • entiteta (ang. entity) predstavlja podatke, tako kot model pri vzorcih MVP in MVVM, • interaktor (ang. interactor) pridobiva podatke iz različnih virov in jih posreduje predstavljalcu (ang. presenter), • prikazuje podatke, ki mu jih posreduje predstavljalec. Le-temu sporoča tudi o raznih spremembah na vmesniku (na primer pritisk na gumb),.

(38) 26. Žan Malenšek • predstavljalec (ang. presenter) pa je edini gradnik v modulu, ki se zaveda vseh ostalih gradnikov in jih združuje v celoto (modul). Pridobiva podatke preko interaktorja in jih posreduje v gradnik pogled za prikaz. Usmerjevalniku posreduje morebitne zahteve po prikazu drugega modla. Struktura vzorca je prikazana na sliki 6.3.. Slika 6.3: Prikaz strukture MVP vzorca. 6.1.4. Izbira vzorca. Eden izmed glavnih ciljev arhitekturnih vzorcev je zmanjševanje odgovornosti posameznih gradnikov (na primer tako, da se gradnik pogled ukvarja izključno samo s prikazom podatkov in sporočanjem sprememb v vmesniku, usmerjevalnik se ukvarja izključno samo z navigacijo med moduli, in tako dalje). Drugi cilj pa je ohlapno spajanje (ang. loose coupling) gradnikov - to pomeni, da gradniki vedo čim manj oziroma nič o ostalih gradnikih s čimer pa dosežemo lažjo zamenljivost gradnikov, kar je zelo dobrodošlo pri dolgoročnem razvoju in vzdrževanju ter pri testiranju, saj lahko gradnik nadomestimo s testnim gradnikom, ki ponuja (gledano s strani ostalih gradnikov) enako funkcionalnost kot osnovni gradnik, le da posreduje podatke, s katerimi izvajamo testiranje. Pri ohlapnem spajanju nam pomagajo vmesniki (ang. interfaces), ki so del objektno orientiranega programiranja..

(39) Diplomska naloga. 27. Izbrali smo arhitekturni vzorec MVVM, ker se dobro prilega tehnologiji SwiftUI [11].. 6.2. SwiftUI. SwiftUI [11] je nov način izgradnje uporabniškega vmesnika na Apple [3] platformah. Vmesnik se gradi s pomočjo deklarativne sintakse - napišemo, kar želimo prikazat. Na primer za prikaz besedila napišemo Text(’vsebina’) in prikaže se besedilo ’vsebina’. Seveda lahko vstavimo tudi spremenljivke. Opis nekaterih osnovnih gradnikov: Z gradnikom VStack se ustvari navpična postavitev elementov, ki jih vsebuje. Po enakem principu deluje gradnik HStack, le da ta ustvari vodoravno postavitev elementov. Gradnik Text prikazuje besedilo, ki mu ga podamo, gradnik Spacer pa ustvari prazen prostor med gradnikoma, ki ga obdajata. Pri posameznem gradniku so na voljo še razne možnosti kot je na primer možnost odmika, ki okoli gradnika naredi nekaj praznega prostora - tej možnosti lahko podamo tudi številko in s tem povečamo ali zmanjšamo prazen prostor. Ena izmed možnosti je tudi za spremembo pisave. Takšnih možnosti je veliko. Na primeru (slika 6.4) vidimo kodo, ki prikaže predogled dejanskega vmesnika (viden na sliki 6.5).. 6.3. Modularnost. Pri razvoju mobilne aplikacije ločimo funkcionalnosti po zaslonih, na primer zaslon za registracijo, prijavo, aktivno beleženje in dodajanje naprave. Vsak modul ima običajno dve datoteki, ena vsebuje SwiftUI [11] kodo za prikaz vmesnika, druga pa vsebuje poslovno logiko. Z modularnostjo dosežemo enostavnejšo menjavo ali odstranjevanje posameznih modulov..

(40) 28. Žan Malenšek. Slika 6.4: Primer SwiftUI kode. Vir [28]. 6.4. Komunikacija s strežnikom. Za komunikacijo s strežnikom pripravimo namensko datoteko, ki vsebuje potrebne metode za pošiljanje in prejemanje podatkov s strežnika. S to datoteko poenostavimo poslovno logiko modulov in zmanjšamo količino kode, ki je potrebna v posameznih modulih.. 6.5. Zaznavanje bližine naprav in dodajanje nove naprave. Z namenom večje preglednosti kode in izogibanjem datotekam s preveč vrsticami kode pripravimo tudi ločeno datoteko za zaznavanje bližine naprav..

(41) Diplomska naloga. 29. Slika 6.5: Izgled uporabniškega vmesnika, ki je rezultat kode iz slike 6.4. Vir: [28] Ta datoteka vsebuje kodo za potrditev uporabe lokacije s strani uporabnika, kodo za zagon iskanja naprav znotraj dosega in kodo za pregled zaznanih naprav - v tem delu preverjamo moč signala naprave in na podlagi tega sklepamo ali je naprava dovolj blizu ali ne. Postopek dodajanja nove naprave je za uporabnika zelo preprost, saj mora iz prikazanega seznama le izbrati ustrezno napravo. Ne prikažejo se vse BLE naprave v bližini, temveč se prikažejo samo tiste, ki podpirajo protokol iBeacon [5] in oddajajo ustrezen identifikator, ki je določen za vsako napravo posebej. Po izbiri naprave na seznamu shranimo njen identifikator in tako lahko pri zaznavanju naprav v bližini preverimo, če je med njimi tudi naprava s tem identifikatorjem.. 6.6. Beleženje poti - zagon, postopek in ustavitev. Aplikacija zaznava bližnje naprave tudi med delovanjem v ozadju. V primeru zaznane naprave, katere identifikator je shranjen v aplikaciji, le-ta nekaj sekund počaka in preveri, če je naprava še v bližini. Če je, potem požene shranjevanje zaporednih lokacij in uporabniku pokaže obvestilo, da je obveščen o.

(42) 30. Žan Malenšek. začetku beleženja. Ko uporabnik odpre aplikacijo, lahko vidi zaslon z aktivnim beleženjem, na katerem je prikazano trenutno stanje beleženja - osnovni podatki kot sta trajanje in povprečna hitrost. Če naprava ni več zaznana v bližini, se prav tako kot pred začetkom počaka nekaj sekund in nato ponovno preverimo, če naprava še vedno ni v bližini - v tem primeru zaustavimo beleženje in shranimo podatke o poti na strežnik..

(43) Poglavje 7 Postavitev strežnika za zaledni sistem in spletno aplikacijo Ko sta zaledni sistem in spletna aplikacija pripravljena, ju lahko naložimo na strežnik. Pogosto so uporabljeni strežniki z operacijskimi sistemi kot so Ubuntu [29], Debian [15], CentOS [14], itd. Za ta projekt smo izbrali operacijski sistem Ubuntu. Strežnik lahko postavimo sami ali pa ga najamemo pri izbranemu ponudniku.. 7.1 7.1.1. Varnost Vpis v sistem. Zaradi zagotavljanja višje stopnje varnosti strežnika ustvarimo novega uporabnika in prilagodimo nastavitve strežniškega programa za dostop do CLI vmesnika tako, da se lahko v sistem vpiše samo ustvarjeni uporabnik (pri temu je najbolj pomembno to, da se korenski uporabnik (ang. root) ne bo mogel več vpisati neposredno). Nastavimo tudi, da se ustvarjeni uporabnik ne more vpisati z geslom temveč samo s SSH ključem. To naredimo tako, da na računalniku uporabnika generiramo SSH ključ, če ga še nima. Pri generiranju novega ključa se ustvarita dve datoteki - ena vsebuje zasebni ključ, ena pa javnega. Na 31.

(44) 32. Žan Malenšek. strežnik naložimo javni ključ. Ko se uporabnik vpisuje v strežnik, bo računalnik zahtevo podpisal z zasebnim ključem, strežnik pa bo z uporabo javnega ključa, ki smo ga prej naložili preveril, če je zahteva podpisana s pripadajočim zasebnim ključem. Če je, dovoli vpis uporabniku, sicer ga zavrne.. 7.1.2. Požarni zid. Na strežnik namestimo tudi požarni zid. Privzeto deluje tako, da preprečuje komunikacijo na vseh prehodih (ang. port). Pred aktivacijo požarnega zida moramo torej najprej nastaviti prehode, preko katerih bo komunikacija dovoljena. Najbolj pomembno je, da dodamo prehod 22, ki ga uporabljamo za vpis v strežnik preko protokola SSH, saj se sicer ne bi mogli vpisat po aktivaciji požarnega zida. Dober varnostni ukrep je tudi sprememba prehoda, ki ga SSH strežniški program uporablja (da ni 22, ki je privzet), tako da morebitni napadalci ne poznajo prehoda. Poleg prehoda za SSH povezavo moramo omogočiti tudi komunikacijo preko prehoda 443, ki je privzeti prehod za spletni strežnik ob uporabi protokola TLS. Preko tega prehoda bosta mobilna aplikacija in spletni brskalnik uporabnika komunicirala z našim zalednim sistemom.. 7.2. Namestitev programov. Poleg požarnega zidu in SSH strežnika, ki je že privzeto nameščen moramo namestiti še nekatere druge strežniške programe za potrebe delovanja zalednega sistema in spletne aplikacije.. 7.2.1. Spletni strežnik. Potrebujemo program, ki bo na prehodu 443 poslušal za nove zahteve in poskrbel za njihovo obdelavo. Za ta namen smo izbrali program Nginx [24]..

(45) Diplomska naloga. 7.2.2. 33. Sistem za upravljanje s podatkovnimi bazami. Naš zaledni sistem potrebuje podatkovno bazo. Povezati ga moramo s programom za upravljanje s podatkovnimi bazami, da bo lahko bral in zapisoval podatke. Izbrali smo MariaDB [22] podatkovno bazo, saj jo uporabljeno ogrodje Laravel dobro podpira.. 7.3. Postavitev projekta Laravel na strežniku. V konfiguraciji programa Nginx dodamo nov vnos, ki mora vsebovati tudi domeno in direktorij, kjer se nahaja koda. Ustvarimo še podatkovno bazo. Za ta korak uporabimo povezavo s programom za upravljanje s podatkovnimi bazami. Kodo naložimo na strežnik v direktorij, ki smo ga nastavili v Nginx konfiguraciji. Ustvariti moramo še okoljsko datoteko (imenovano ”.env”), ki bo vsebovala konfiguracijo za sam zaledni sistem in spletno aplikacijo. Med najpomembnejše parametre sodijo na primer podatki za dostop do podatkovne baze in ključ za šifriranje (uporablja se na primer pri šifriranju piškotkov). Sledi ustvarjanje tabel v podatkovni bazi. To storimo tako, da poženemo primeren ukaz za poganjanje migracij (datotek s strukturo posamezne tabele), ki smo jih na začetku razvoja ustvarili..


(47) Poglavje 8 Objava mobilne aplikacije Postopek objave mobilne aplikacije se začne s pripravo razvijalskega profila na trgovini z aplikacijami. V primeru platformo Apple iOS [10] je to App Store [12], za platformo Android [1] pa je to običajno trgovina Google Play [19]; na voljo so tudi druge trgovine. Razvijalski profil ustvarimo na spletnem portalu (v nadaljevanju portal), ki ga izbrana trgovina ponuja. V primeru Apple AppStore članstvo v trgovini ni brezplačno. Na portalu ustvarimo novo aplikacijo, nastavimo ime ter opis in vnesemo vse potrebno, kar od nas zahteva sistem. Običajno so zahtevane tudi povezave do politike zasebnosti aplikacije, izpolniti pa je potrebno nekaj vprašalnikov glede vsebine aplikacije. Naložimo tudi različne posnetke zaslona aplikacije, da se bodo prikazovali uporabnikom na predstavitveni strani aplikacije v trgovini. Ko je Android aplikacija pripravljena za objavo, v okolju Android Studio pripravimo in digitalno podpišemo paket (ang. app bundle), ki ga nato naložimo na portal. Ta korak je pri iOS aplikacijah malo drugačen, in sicer se v okolju Xcode vpišemo v razvijalski profil, poženemo izgradnjo aplikacije in preko okolja Xcode naložimo paket na portal. Po nalaganju aktiviramo postopek objave. Google oziroma Apple pregleda aplikacijo in jo potrdi ali pa jo zavrne iz različnih razlogov kot je na primer kršenje njihovega pravilnika.. 35.


(49) Poglavje 9 Zaključek 9.1. Testiranje. Na koncu smo izvedli še preizkus delovanja vseh funkcionalnosti sistema. Začnemo z ustvarjanjem uporabniškega računa in prijavi v mobilno aplikacijo. Registracijo poskusimo izvesti z že zasedenim email naslovom, prijavo pa z neobstoječim in nato še z napačnim in manjkajočim geslom. V naslednjem koraku preizkusimo postopek prvega povezovanja naprave napravo vključimo, odpremo zaslon za povezovanje v aplikaciji in iz seznama izberemo želeno napravo. Sledi odobritev dovoljenja za uporabo lokacije, saj aplikacija potrebuje to dovoljenje, da lahko pridobi dostop do lokacijskih podatkov. Ko smo povezali napravo in odobrili potrebna dovoljenja, lahko pričnemo s preizkušanjem samodejnega zagona aktivnosti. Ko se s telefonom približamo napravi, se v nekaj sekundah zažene beleženje aktivnosti. Če imamo aplikacijo odprto v ozadju, se prikaže obvestilo o začetku beleženja, sicer pa lahko v aplikaciji vidimo zaslon z aktivnim beleženjem. Skupaj s telefonom in napravo se premikamo in spremljamo, če se aktivnost slučajno prekine. Ko želimo prekiniti aktivnost, se pomaknemo stran od naprave. Preizkus izvedemo večkrat in preverimo rezultate. Ugotovili smo, da se zaznavanje včasih prekine, ko je naprava še vedno v določenem dosegu. To se zgodi zato, ker 37.

(50) 38. Žan Malenšek. nimamo podatka o dejanski razdalji med telefonom in napravo, temveč le podatek o moči signala - ta pa lahko izgublja moč ne le na podlagi razdalje, ampak tudi na podlagi drugih dejavnikov, kot je na primer prisotnost ovir med napravo in telefonom. Prezgodnje prekinitve aktivnosti se zgodijo v primeru večje razdalje med napravo in telefonom, na primer ko je naprava nameščena na del kolesa, ki je bolj oddaljen od mesta, kjer uporabnik pritrdi ali nosi telefon. Drugi vzrok prezgodnjih prekinitev pa so ovire, na primer žep ali torba za telefon. Če vzroka združimo, tako da sta naprava in telefon na večji razdalji tik pod mejo in je telefon v torbi, je verjetnost prezgodnje prekinitve večja. Po zaključku aktivnosti preverimo, da se je le-ta pravilno naložila na strežnik tako, da se vpišemo v vmesnik spletne aplikacije. Preizkusimo delovanje registracije in prijave, vendar se moramo potem vpisati tudi v tisti uporabniški račun, ki smo ga uporabili v mobilni aplikaciji za zajem aktivnosti. Po vpisu odpremo seznam zabeleženih poti in nato izberemo eno izmed poti na seznamu in preverimo, če so prikazani podatki ustrezni in da je pot na zemljevidu pravilno izrisana. Na koncu preverimo še prikaz statistike in pravilnost prikazanih podatkov. S tem je testiranje zaključeno, saj smo pokrili vse funkcionalnosti celotnega sistema.. 9.2. Diskusija. S športom se ukvarja mnogo ljudi. Pri aktivnostih uporabljajo različne naprave kot so merilniki ter pametne ure in zapestnice s povezanim telefonom, ki poganja aplikacije. Obstaja veliko aplikacij za različne namenov. Glede na popularnost aplikacij, ki nam predstavljajo dodano vrednost pri športnih aktivnostih smo zlahka našli nekaj sorodnih aplikacij. Vendar te ne omogočajo samodejnega zagona aktivnosti ali pa je zaznavanje manj zanesljivo in je aktivnost zagnana prepogosto. Zato smo se tega lotili na drugačen način in dosegli zadovoljive rezultate. Se je pa prav tako pojavilo nekaj težav s prezgodnjo prekinitvijo aktivnosti. Nadaljnjega reševanja te težave bi se lahko.

(51) Diplomska naloga. 39. lotili na način, da bi uporabniku omogočili kalibracijo - da ustvari enake razmere, kakršne bodo prisotne pri nadaljnjih aktivnostih. Uporabnik bi torej postavil telefon in napravo za zaznavanje na mesto, kjer bosta pri aktivnostih nameščena. Na primer telefon v torbo, napravo pa pod sedež. Aplikacija bi zajela trenutno moč signala, ki bi jo uporabila pri nadaljnjih zaznavanjih. Še ena možnost bi bila uporaba podatkov preteklih beleženj pri napovedovanju trajanja prihodnjih beleženj. S tem bi lahko še dodatno zmanjšali prezgodnje prekinitve. Pri aplikacijah vedno obstaja prostor za spremembe in izboljšave, zato je možnosti veliko..


(53) Literatura [1] Android. Dosegljivo: https://www.android.com, 2021. [Dostopano: 21. 12. 2021]. [2] Android studio.. Dosegljivo:. https://developer.android.com/. studio, 2021. [Dostopano: 22. 12. 2021]. [3] Apple inc. Dosegljivo: https://www.apple.com, 2021. [Dostopano: 21. 12. 2021]. [4] Bluetooth. Dosegljivo: https://www.bluetooth.com, 2021. [Dostopano: 20. 12. 2021]. [5] Ibeacon. Dosegljivo: https://developer.apple.com/ibeacon, 2021. [Dostopano: 21. 12. 2021]. [6] Xcode. Dosegljivo: https://developer.apple.com/xcode, 2021. [Dostopano: 22. 12. 2021]. [7] Adobe illustrator. Dosegljivo: https://www.adobe.com/si/products/ illustrator.html, 2022. [Dostopano: 27. 1. 2022]. [8] Adobe xd.. Dosegljivo: https://www.adobe.com/si/products/xd.. html, 2022. [Dostopano: 27. 1. 2022]. [9] Apple design resources. Dosegljivo: https://developer.apple.com/ design/resources, 2022. [Dostopano: 27. 1. 2022]. 41.

(54) 42. Žan Malenšek. [10] Apple ios. Dosegljivo: https://www.apple.com/ios, 2022. [Dostopano: 27. 1. 2022]. [11] Apple ios.. Dosegljivo:. https://developer.apple.com/xcode/. swiftui, 2022. [Dostopano: 27. 1. 2022]. [12] Appstore. Dosegljivo: https://www.apple.com/app-store, 2022. [Dostopano: 27. 1. 2022]. [13] Bootstrap. Dosegljivo: https://getbootstrap.com, 2022. [Dostopano: 18. 1. 2022]. [14] Centos. Dosegljivo: https://www.centos.org, 2022. [Dostopano: 27. 1. 2022]. [15] Debian. Dosegljivo: https://www.debian.org, 2022. [Dostopano: 27. 1. 2022]. [16] Figma. Dosegljivo: https://www.figma.com, 2022. [Dostopano: 27. 1. 2022]. [17] Fitbit. Dosegljivo: https://www.fitbit.com, 2022. [Dostopano: 30. 1. 2022]. [18] Google maps.. Dosegljivo: https://developers.google.com/maps/. documentation/javascript/overview, 2022. [Dostopano: 27. 1. 2022]. [19] Google play. Dosegljivo: https://play.google.com, 2022. [Dostopano: 27. 1. 2022]. [20] Jetpack compose.. Dosegljivo:. https://developer.android.com/. jetpack/compose, 2022. [Dostopano: 27. 1. 2022]. [21] Laravel. Dosegljivo: https://laravel.com, 2022. [Dostopano: 18. 1. 2022]. [22] Mariadb. Dosegljivo: https://mariadb.org, 2022. [Dostopano: 27. 1. 2022]..

(55) 43. Diplomska naloga. [23] Material design. Dosegljivo: https://material.io, 2022. [Dostopano: 27. 1. 2022]. [24] Nginx. Dosegljivo: https://nginx.org, 2022. [Dostopano: 27. 1. 2022]. [25] Php. Dosegljivo: https://www.php.net, 2022. [Dostopano: 18. 1. 2022]. [26] Sketch. Dosegljivo: https://www.sketch.com, 2022. [Dostopano: 27. 1. 2022]. [27] Strava. Dosegljivo: https://www.strava.com, 2022. [Dostopano: 30. 1. 2022]. [28] Swiftui example.. Dosegljivo:. https://developer.apple.com/. tutorials/swiftui/creating-and-combining-views, 2022. [Dostopano: 21. 1. 2022]. [29] Ubuntu. Dosegljivo: https://ubuntu.com, 2022. [Dostopano: 27. 1. 2022]..

(56)