Univerza v Ljubljani
Fakulteta za raˇ cunalniˇ stvo in informatiko
David Trafela
Aplikacija za iOS za Slovensko turnokolesarsko pot
DIPLOMSKO DELO
UNIVERZITETNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE
RA ˇCUNALNIˇSTVO IN INFORMATIKA
Mentor : prof. dr. Janez Demˇsar
Ljubljana, 2021
Copyright. Rezultati diplomske naloge so intelektualna lastnina avtorja in matiˇcne fakultete Univerze v Ljubljani. Za objavo in koriˇsˇcenje rezultatov diplomske naloge je potrebno pisno privoljenje avtorja, fakultete in mentorja.
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Kandidat: David Trafela
Naslov: Aplikacija za iOS za Slovensko turnokolesarko pot
Vrsta naloge: Diplomska naloga na univerzitetnem programu prve stopnje Raˇcunalniˇstvo in informatika
Mentor: prof. dr. Janez Demˇsar
Opis:
Slovenska turnokolesarska pot je 1800 km dolga pot po Sloveniji, ki teˇce (kjer je le moˇzno) prek hribov, tako da skupno nabere 50.000 viˇsinskih metrov.
Opisi in zemljevidi etap, viˇsinski profili, seznami kontrolnih toˇck in vsi ostali podatki so na spletni strani, ki pa ni najbolj praktiˇcna za uporabo na tele- fonih, ko smo preˇsvicani izgubljeni sredi klanca, po moˇznosti brez signala.
Veliko lepˇse bi bilo imeti priroˇcno aplikacijo, ki bi si podatke s streˇznika osveˇzila, ko bi bil za to primeren ˇcas, poleg tega pa bi bila organizirana bolj praktiˇcno kot spletna stran.
Title: iOS application for Slovenian Mountain Bike Route Description:
Slovenian Mountain Bike Route is an 1800 km long route across Slovenia, which goes (where possible) over hills, so it has altogether 50.000m of ele- vation gain. Descriptions and maps of each stage, elevation gains, a list of control points, and all other data are available on the website of STKP. The website is not made for use on mobile phones, especially when we are all sweaty and lost in the middle of the hill, perchance without a mobile signal.
It would be much nicer to have a mobile application, which would get all of the latest data from a backend server. The application would be much easier to use as opposed to a website, as the application is made for use on mobile phones.
Najprej bi se zahvalil mentorju prof. dr. Janezu Demˇsarju za vse predloge in hitre odzive, s katerimi me je usmerjal pri pisanju diplomskega dela. Za vso podporo in pomoˇc bi se zahvalil mami Tanji, oˇcetu Bojanu ter sestri Kaji. Zahvala gre tudi oˇzji druˇzini, ki mi je omogoˇcila ˇstudij, in odliˇcnim prijateljem, ki so v veliki meri prispevali k prijetni ˇstudijski izkuˇsnji.
Kazalo
Povzetek Abstract
1 Uvod 1
2 Zaledni sistem 3
2.1 Orodja in tehnologije . . . 4 2.2 Zgradba zalednega sistema . . . 7
3 Mobilna aplikacija za iOS 15
3.1 Orodja in tehnologije . . . 16 3.2 Arhitektura mobilne aplikacije . . . 18
4 Zakljuˇcek 33
Literatura 35
Seznam uporabljenih kratic
kratica angleˇsko slovensko
GPS Global Positioning System globalni sistem pozicioniranja STKP Slovenian Mountain Bike Ro-
ute
Slovenska turnokolesarska pot JSON JavaScript Object Notation notacija za oznaˇcevanja Java-
Script objektov API Application Programming In-
terface
aplikacijski programski vme- snik
HTML Hyper Text Markup Language oznaˇcevalni jezik za oblikova- nje veˇcpredstavnostnih doku- mentov
GPX GPS Exchange Format predpis zgradb datotek za iz- menjavo podatkov GPS
HTTP HyperText Transfer Protocol protokol za izmenjavo hiperte- ksta
XML Extensible Markup Language razˇsirljivi oznaˇcevalni jezik MVVM Model-View-ViewModel Model-Pogled-Model Pogleda MEAN MongoDB, Express.js, Angu-
lar and Node.js
MongoDB, Express.js, Angu- lar in Node.js
Povzetek
Naslov: Aplikacija za iOS za Slovensko turnokolesarsko pot Avtor: David Trafela
Mnogi, ki se podajo na Slovensko turnokolesarsko pot, se znajdejo v situaciji, ko ni na voljo mobilnega omreˇzja in moˇznosti, da bi lahko obiskali spletno stran STKP ter si ogledali podrobnosti posamezne etape oziroma kontrolne toˇcke. Boljˇsa reˇsitev bi bila mobilna aplikacija, ki bi vse podatke hranila in jih periodiˇcno posodobila za ogled v naˇcinu brez povezave. Mobilna aplikacija za svoje delovanje potrebuje tudi zaledni sistem, saj spletna stran STKP ne omogoˇca strojnega branja podatkov. Zaledni sistem bo prebral HTML kodo spletne strani in izluˇsˇcil potrebne podatke ter omogoˇcil aplikaciji dostop do izbranih podatkov. Tako bosta rezultat te diplomske naloge zaledni sistem in mobilna aplikacija.
Kljuˇcne besede: iOS, Swift, Node.js.
Abstract
Title: iOS application for Slovenian Mountain Bike Route Author: David Trafela
A lot of people who have decided to tackle the Slovenian Mountain Bike Route find themselves in a situation where there is no mobile signal to visit the website of STKP and get details about a specific stage or control point.
Much better solution is native mobile application that would download all of the required data for offline use and periodically check whether new data is available. Mobile application also needs a backend server as the website of STKP does not offer publicly available API. Backend server would read the website’s HTML source code and get the data for the application to work.
The results of this thesis are a backend server and a mobile application.
Keywords: iOS, Swift, Node.js.
Poglavje 1 Uvod
Tistim, ki se ukvarjajo s ˇsportom, predstavlja mobilni telefon dodaten pri- pomoˇcek pri njihovi aktivnosti, saj ponuja meritve telesnih parametrov ali pa sledenje lokaciji s pomoˇcjo GPS-a. S porastom kolesarjenja [1] se veliko re- kreativcev odpravi tudi na zahtevnejˇse poti, kjer pa ni vedno na voljo dostopa do interneta, da bi lahko pridobili podatke o etapah ali kontrolnih toˇckah.
V Sloveniji je pod okriljem PZS (Planinska zveza Slovenije) kolesarjem na voljo kolesarska pot, ki obvozi celotno Slovenijo. Pot je dolga pribliˇzno 1800 kilometrov in vsebuje veˇc kot 50.000 metrov viˇsinskih razlik v vzponu.
Trenutno lahko kolesarji, ki kolesarijo po STKP, pridobijo informacije o etapah ali kontrolnih toˇckah na spletni strani STKP [2]. Spletna stran je slabo prilagojena mobilnim napravam, zato so nekatere funkcionalnosti okrnjene, prav tako pa je za dostop do spletne strani potrebna internetna povezava. Ker vodijo ˇstevilne etape skozi obmoˇcja s slabo pokritostjo mobil- nega omreˇzja, bi bila za kolesarje boljˇsa izbira mobilna aplikacija, ki deluje tudi v naˇcinu brez povezave in je prilagojena mobilnim napravam.
Tako smo se odloˇcili za izdelavo aplikacije za iOS, ki bo omogoˇcala po- dobne funkcionalnosti kot spletna stran STKP, hkrati pa bo delovala v naˇcinu brez povezave. Ker se ˇzelimo nauˇciti uporabe novih tehnologij, bomo pri iz- delavi aplikacije uporabili ogrodje SwiftUI [3]. Veˇc o mobilni aplikaciji bomo napisali v poglavju 3.
1
2 David Trafela Mobilna aplikacija potrebuje za svoje delovanje zaledni sistem, ki ji po- sreduje najnovejˇse podatke o etapah in kontrolnih toˇckah. Zaledni sistem komunicira z mobilno aplikacijo s pomoˇcjo aplikacijskega programskega vme- snika (API). Ker spletna stran STKP ne ponuja API-ja, s katerim bi lahko pridobili podatke, je naloga zalednega sistema branje izvorne kode (HTML) spletne strani in ustrezno pridobivanje podatkov etap in kontrolnih toˇck. Za ogrodje zalednega sistema smo izbrali Node.js [4], saj ima veliko dodatnih knjiˇznic, ki omogoˇcajo enostavno obdelovanje izvorne kode HTML. Ustvarili bomo tudi vsebnik Docker [5] za zaledni sistem, s ˇcimer bomo omogoˇcili laˇzjo skalabilnost in postavitev pri ponudnikih oblaˇcnih storitev. Zaledni sistem bomo podrobneje opisali v poglavju 2.
Mobilna aplikacija in zaledni sistem bosta komunicirala v formatu JSON, prek katerega bo zaledni sistem mobilni aplikaciji sporoˇcil, kdaj so bili po- datki etap in kontrolnih toˇck nazadnje spremenjeni. Po potrebi bo mobilna aplikacija na napravo prenesla datoteke tipa GPX in JSON. Te datoteke bodo mobilni aplikaciji omogoˇcale prikazovanje etap in kontrolnih toˇck tudi v naˇcinu brez povezave.
Poglavje 2
Zaledni sistem
Mobilna aplikacija za svoje delovanje uporablja zaledni sistem, ki skrbi, da ima aplikacija najnovejˇse podatke o etapah in kontrolnih toˇckah. Zaledni sis- tem bi lahko zgradili na razliˇcne naˇcine. Mobilna aplikacija bi lahko delovala tudi brez njega, vendar pa bi morali poslediˇcno za vsako spremembo pri bra- nju izvorne kode spletne strani STKP posodobiti tudi aplikacijo. V naˇsem primeru se posodobi samo zaledni sistem, brez posodabljanja aplikacije.
Za ustvarjanje zalednega sistema smo se odloˇcili uporabiti Node.js, saj imamo s tem ogrodjem predhodne izkuˇsnje. Zaledni sistem bo tako zgrajen hitreje in uˇcinkoviteje. Naˇs sistem bo enkrat tedensko prebral izvorno kodo spletne strani STKP in po potrebi posodobil podatke.
Zaledni sistem omogoˇca API (spletna stran STKP ga ne ponuja), prek katerega mobilna aplikacija komunicira z zalednim sistemom. Aplikacijski programski vmesnik ali API je mnoˇzica rutin, protokolov in orodij za izgra- dnjo programske opreme in aplikacij. API doloˇca programsko komponento v smislu njenih operacij, izhodnih in vhodnih podatkov in z njimi povezanih tipov podatkov. Na ta naˇcin se definira funkcionalnost programskih kom- ponent na naˇcin, ki je neodvisen od dejanske implementacije. To omogoˇca razliˇcne implementacije komponente, ne da bi bil pri tem ogroˇzen predpisan vmesnik za uporabo komponente. API poenostavi razvoj programov s tem, da definira sestavne bloke, ki jih programer uporabi pri izdelavi aplikacij [6].
3
4 David Trafela Slika 2.1 prikazuje API kot vmesnik med zunanjimi in notranjimi (zalednimi) sistemi.
2.1 Orodja in tehnologije
2.1.1 Orodja
WebStorm [8] je plaˇcljivo integrirano razvojno okolje za razvoj JavaScript aplikacij. Za ˇstudente in profesorje je brezplaˇcen, saj JetBrains ponuja izobraˇzevalne licence. Na voljo je za operacijske sisteme Windows, ma- cOS in Linux. Poleg razvoja JavaScript aplikacij omogoˇca tudi razvija- nje spletnih aplikacij in aplikacij s pomoˇcjo TypeScript. Za to ogrodje smo se odloˇcili zaradi predhodnega poznavanja ostalih JetBrainsovih produktov, ki imajo med seboj podoben izgled in funkcionalnosti.
Postman [9] je zastonjsko orodje, ki med drugim pomaga pri razvoju API- jev, saj poenostavi vse korake njihove gradnje in testiranja. Na voljo je za operacijske sisteme Windows, macOS in Linux. Uporabili smo ga, ker pri testiranju klicev laˇzje dodajamo razliˇcne zahtevke in laˇzje preverjamo odgovor, kot ˇce bi uporabljali brskalnik. Vse podrobnejˇse podatke lahko namreˇc konfiguriramo in vidimo prikazane v aplikaciji.
2.1.2 Tehnologije
Node.js [4] je brezplaˇcno ogrodje za poganjanje JavaScript spletnih aplika- cij. Osnovano je na Googlovem ogrodju V8 [10], napisanem v jeziku C++. Node.js se najveˇckrat uporablja pri spletnem razvoju v kombi- naciji s skladom MEAN (MongoDB, Express.js, Angular in Node.js).
JavaScript [11] je visoko-nivojski objektni programski jezik pod blagovno znamko podjetja Oracle [12]. Leta 1995 je Netscape razvil nov pro- gramski jezik in ga tudi vkljuˇcil v svoj novi brskalnik. Kmalu zatem je JavaScript v svoj brskalnik vkljuˇcil tudi Microsoft, kar je pripeljalo do
Diplomska naloga 5 porasta priljubljenosti jezika. Sedaj je eden izmed osnovnih gradnikov svetovnega spleta, saj ga uporablja veˇc kot 97% spletnih strani [13].
Vsebniki so standarizirane, lahke in samostojne enote namenjene razvoju, poˇsiljanju in postavitvi programske opreme. Vsebujejo vse, kar je po- trebno za njihov zagon, neodvisno od tega, na katerem sistemu jih zaˇzenemo. Primerni so za oblaˇcne storitve, saj veˇcina ponudnikov pod- pira enak standard vmesnikov, in za razvojne ekipe, saj bo vsebnik vedno deloval tudi na drugaˇcnem raˇcunalniku. Vsebniki so podobni virtualnim strojem, le da so virtualizirani na nivoju operacijskega sis- tema, kot to prikazuje slika 2.2.
6 David Trafela
Slika 2.1: Aplikacijski programski vmesnik [7]
Slika 2.2: Virtualizacija vsebnikov [5]
Diplomska naloga 7
2.2 Zgradba zalednega sistema
Zgradba zalednega sistema je preprostejˇsa kot zgradba mobilne aplikacije, saj pri zalednem sistemu ne potrebujemo pogledov. Dovolj je zgolj logika za branje izvorne kode spletne strani.
Pri delovanju zalednega sistema lahko pride do teˇzav, ˇce se spremeni zgradba spletne strani STKP. Trenutno namreˇc podatke s spletne strani pri- dobivamo glede na toˇcno doloˇcene gradnike HTML, ki smo jih doloˇcili po roˇcni analizi izvorne kode. Med pisanjem diplomskega dela smo naleteli na teˇzavo, saj se je spletna stran STKP posodobila, zaradi ˇcesar smo morali ponovno prilagoditi pridobivanje podatkov.
2.2.1 Obdelovanje zahtev
V zalednem sistemu smo razvili spletni streˇznik s pomoˇcjo ogrodja Express [14], saj ta v primerjavi s funkcionalnostmi, ki so vgrajene v Node.js, omogoˇca laˇzje obdelovanje dinamiˇcnih zahtev in vraˇcanje odgovorov.
Preprost primer zalednega sistema s pomoˇcjo ogrodja Express prikazuje izsek kode 2.1. Na zaˇcetku izseka kode smo doloˇcili, da bomo uporabili ogrodje Express, in inicializirali novo instanco ogrodja, za delovanje streˇznika pa moramo doloˇciti tudi vrata, na katerih bo streˇznik sprejemal zahteve.
Streˇznik poˇzenemo s funkcijo app.listen(), ki pove aplikaciji, naj zaˇcne po- sluˇsati na prej doloˇcenih vratih. V naˇsem primeru smo dodali ˇse funkcijo, ki obdeluje vse zahteve tipa GET na spletnem naslovu http://localhost:
5000/. ˇCe bi na lokalnem raˇcunalniku obiskali ta spletni naslov v brskalniku, bi kot odgovor dobili
”Hello world!“.
Za potrebe aplikacije moramo v streˇzniku definirati funkcijo, ki vraˇca najnovejˇse GPX in JSON datoteke (zaledni sistem jih je pridobil s spletne strani), in funkcijo, ki vraˇca datum, kdaj so bile datoteke nazadnje posodo- bljene. Doloˇcili smo, da se datoteke prenesejo, ko se obiˇsˇce spletni naslov s konˇcnico /download, izsek kode 2.2; najnovejˇsi datum pa se vrne ob obisku spletnega naslova s konˇcnico/get-latest-date.
8 David Trafela
Izsek kode 2.1: Preprost streˇznik c o n s t e x p r e s s = r e q u i r e ( ’ e x p r e s s ’ )
c o n s t app = e x p r e s s ( ) ; c o n s t p o r t = ’ 5 0 0 0 ’ ;
app . g e t ( ’ / ’ , ( req , r e s ) => { r e s . end ( ” H e l l o w o r l d ! ” ) ; }) ;
app . l i s t e n ( p o r t , ( ) => {
c o n s o l e . l o g ( ” S t r e ˇz n i k p r i p r a v l j e n . ” ) ; }) ;
V obeh izsekih kode uporabljamo objektscraper, ki vsebuje metode iz da- toteke, kjer imamo logiko za branje in obdelovanje izvorne kode spletne strani STKP. Najprej se v obeh izsekih kode s pomoˇcjo metodegetFullFilenamepri- dobi ime kompresirane datoteke, ki vsebuje vse GPX in JSON datoteke, ˇce ta obstaja. ˇCe ta ne obstaja, se v primeru vraˇcanja datoteke namesto nje vrne sporoˇcilo, v primeru vraˇcanja datuma pa se vrne datum kot vrednost null.
Diplomska naloga 9
Izsek kode 2.2: Vraˇcanje datotek app . g e t ( ’ / download ’ , ( req , r e s ) => {
l e t f i l e n a m e = s c r a p e r . g e t F u l l F i l e n a m e ( ” ZIP ” ) ; c o n s t f i l e P a t h = path . j o i n ( d i r n a m e ,
s c r a p e r . d l l o c a t i o n + f i l e n a m e ) ; i f ( f s . e x i s t s S y n c ( f i l e P a t h ) ) {
r e s . w r i t e H e a d ( 2 0 0 , {
” Content−Type ” : ” a p p l i c a t i o n / z i p ” ,
” Content−D i s p o s i t i o n ” :
‘ a t t a c h m e n t ; f i l e n a m e=${f i l e n a m e}‘ }) ;
f s . c r e a t e R e a d S t r e a m ( f i l e P a t h ) . p i p e ( r e s ) ; } e l s e {
r e s . s t a t u s ( 4 0 4 ) . end ( ” Datoteka ne o b s t a j a ” ) ; }
}) ;
10 David Trafela
2.2.2 Branje in obdelovanje izvorne kode spletne strani STKP
Izvorno kodo spletne strani STKP smo pridobili s knjiˇznicama Axios [15] in cheerio [16]. S pomoˇcjo knjiˇznice Axios poˇcakamo, da se celotna stran STKP naloˇzi, da lahko pridobimo izvorno kodo, ki jo kasneje obdelamo s pomoˇcjo knjiˇznice cheerio.
Cheerio je knjiˇznica, ki temelji na jQuery in je zasnovana specifiˇcno za streˇznike; cheerio obdela izvorno kodo HTML in ponudi API za laˇzji dostop in manipulacijo elementov. Cheerio ne interpretira izvorne kode kot brskalnik, saj ne naloˇzi pogledov in zunanjih knjiˇznic, ter ne poganja JavaScript kode, kar naredi cherrio hitrejˇse od ostalih reˇsitev [16].
V naslednjem koraku pridobimo podrobnosti etap iz tabele na spletni strani STKP. Za vsako etapo preberemo naslov etape, spletni naslov etape, opis in kategorijo etape. Te podatke shranimo v vrsto, kot to prikazuje izsek kode 2.3. Element, ki vsebuje tabelo, pridobimo tako, kot prikazuje druga vrstica. S tem smo pridobili vse elementetr, ki predstavljajo vrstice v tabeli, katerih starˇs je element tbody. Ta predstavlja vsebino tabele. Zatem ˇse doloˇcimo, da nas zanima samo vsebina tabele, katere starˇs je element z id=”posts-table-1”. Primer izvorne kode HTML, kjer bi lahko pridobili vrstice tabele na tak naˇcin, prikazuje izsek kode 2.4.
V sedmi vrstici, izsek kode 2.3, se sprehodimo skozi vse elementetr. Vsak element predstavlja eno vrstico v tabeli in ta vrstica vsebuje podatke o posa- mezni etapi. V deveti vrstici iz vsake posamezne vrstice v tabeli pridobimo polja td, ki predstavljajo stolpec tabele. V vrsticah od 11 do 14 pridobimo ˇzelene podatke iz stolpcov in jih v vrsticah od 17 do 22 dodamo v vrsto vseh etap.
Zaledni sistem za shranjevanje datotek uporablja le datoteˇcni sistem, saj vse podatke hranimo v datotekah. V naˇsem sistemu smo za mapo, v katero se shranijo datoteke, doloˇcili imedownloads. V to mapo se ob posodobitvi shra- nijo datoteke GPX, ki vsebujejo koordinate toˇck na poti etap, poimenovane
Diplomska naloga 11 Etapa X.gpx, kjer X predstavlja zaporedno ˇstevilko etape. Shrani se tudi KT.gpx, ki vsebuje koordinate kontrolnih toˇck. Za dodatne podrobnosti o etapah in kontrolnih toˇckah se uporabljata datotekiKT.json inEtape.json, ki se napolnita s podatki pridobljenimi iz izvorne kode spletne strani STKP.
Vse te datoteke se arhivirajo v datoteko ZIP poimenovano ZIP DD-MM- YYYY.zip, kjer DD-MM-YYYY predstavlja datum posodobljenih datotek s spletne strani.
Za odloˇcitev, ali moramo posodobiti datoteke na streˇzniku, moramo s spletne strani pridobiti datum njihovih zadnjih sprememb in ga primerjati z datumom datotek na naˇsem streˇzniku. Kasneje ˇse pridobimo datum, ki je zapisan v imenu datoteke ZIP. Primer tega zapisa je ZIP 01-04-2020.zip.
Iz imena pridobimo datum, ki ga primerjamo z datumom, pridobljenim s spletne strani STKP. V primeru, da je datum na spletni strani STKP no- vejˇsi od datuma na streˇzniku, se datoteke na streˇzniku ponovno prenesejo in posodobijo. V kolikor uporabnik obiˇsˇce spletni naslov streˇznika s konˇcnico /download, bodo na voljo za prenos enake oziroma najnovejˇse datoteke.
12 David Trafela
2.2.3 Vsebnik
Za ustvarjanje vsebnika smo uporabili Docker, saj imamo z njim ˇze predhodne izkuˇsnje. Tako smo ustvarili Dockerfile, ki vsebuje vse potrebno, da lahko iz naˇsega zalednega sistema zgradimo vsebnik, ki se lahko objavi na skoraj vsakem operacijskem sistemu in ponudniku oblaˇcnih storitev. S tem smo dosegli, da je zaledni sistem skalabilen in zelo prenosljiv. Dockerfile prikazuje izsek kode 2.5. Vsak ukaz v datoteki Dockerfile ustvari nov sloj slike vsebnika.
V prvi vrstici smo doloˇcili osnovno sliko vsebnika. Uporabili smo Node.js verzije 14 in sicer razliˇcico alpine, saj ta predstavlja minimalno delujoˇco razliˇcico brez odveˇcnih knjiˇznic. V tretji in ˇcetrti vrstici smo doloˇcili naˇso spremenljivko, s katero lahko v Node.js aplikaciji razlikujemo med razliˇcnimi izvajalnimi okolji, kot je na primer produkcijsko in testno. V osmi vrstici smo doloˇcili delovni direktorij, v katerem se bodo izvajali vsi ukazi, ki sledijo tej vrstici. Ker naˇs zaledni sistem shranjuje preneˇsene datoteke v direktorij downloads, smo morali tudi v 11. vrstici ustvariti ta direktorij, saj se ta ne ustvari samodejno. V 18. vrstici smo prekopirali datoteko, ki vsebuje po- datke o potrebnih knjiˇznicah za ustrezno delovanje, da jih lahko z ukazom v 19. vrstici tudi namestimo. V 22. vrstici smo prekopirali izvorno kodo aplikacije iz naˇsega sistema v vsebnik. V 25. vrstici smo doloˇcili, na katerih vratih bo naˇs vsebnik dosegljiv, v vrstici 28 pa smo doloˇcili, kateri ukaz se izvede ob vsakem zagonu vsebnika.
Izsek kode 2.4: Primer kode HTML
<t a b l e i d =”p o s t s−t a b l e−1”>
<tbody>
<t r>V r s t i c a t a b e l e 1</ t r>
<t r>V r s t i c a t a b e l e 2</ t r>
</tbody>
</ t a b l e>
Diplomska naloga 13
Izsek kode 2.3: Branje podrobnosti o etapah 1 f u n c t i o n p r i d o b i E t a p e ($) {
2 l e t e t a p e T a b e l a = $( ’# p o s t s−t a b l e−1 > tbody > t r ’ ) ; 3
4 c o n s t e t a p e = [ ] ; 5
6 // s p r e h o d i s e ˇc e z v s e e l e m e n t e t a b e l e 7 e t a p e T a b e l a . e a c h ( ( i x , i t e m ) => {
8 // p r i d o b i p o l j a posamezne v r s t i c e v t a b e l i 9 c o n s t f i e l d s = $( i t e m ) . f i n d ( ’ td ’ ) ;
10
11 c o n s t n a s l o v = $( f i e l d s [ 0 ] ) . f i n d ( ’ a ’ ) . t e x t ( ) ; 12 l e t u r l = $( f i e l d s [ 0 ] ) . f i n d ( ’ a ’ ) . a t t r ( ’ h r e f ’ ) ; 13 c o n s t v s e b i n a = $( f i e l d s [ 1 ] ) . t e x t ( ) ;
14 c o n s t k a t e g o r i j a = $( f i e l d s [ 2 ] ) . t e x t ( ) ; 15
16 // d o d a j e t a p o v v r s t o 17 e t a p e . push (
18 {name : n a s l o v ,
19 h r e f : u r l ,
20 d e s c : v s e b i n a ,
21 c a t e g o r y : k a t e g o r i j a}
22 ) ;
23 }) ;
24
25 r e t u r n e t a p e ; 26 }
14 David Trafela
Izsek kode 2.5: Dockerfile 1 FROM node :14−a l p i n e
2
3 ARG NODE ENV=d o c k e r
4 ENV NODE ENV=${NODE ENV}
5
6 # P r i v z e t a mapa z a p l i k a c i j o za v s e ukaze 7 # v n a d a l j e v a n j u (COPY, RUN, CMD i t d . ) 8 WORKDIR / u s r / s r c / app
9
10 # U s t v a r i d i r e k t o r i j downloads 11 RUN mkdir downloads
12
13 # K o p i r a j p a c k a g e . j s o n i n package−l o c k . j s o n 14 # t e r p o s k r b i za n a m e s t i t e v k n j i ˇz n i c
15 # Docker bo p o s k r b e l za medpomnjenje n o d e m o d u l e s map , 16 # k i s e ne bo s p r e m e n i l a ,
17 # ˇc e n i p r i ˇs l o do spremembe v p a c k a g e . j s o n 18 COPY p a c k a g e∗. j s o n . /
19 RUN npm i n s t a l l 20
21 # K o p i r a j i z v o r n o kodo a p l i k a c i j e 22 COPY . .
23
24 # Dolo ˇc i v r a t a 25 EXPOSE 5000 26
27 # I z v e d i ukaz , k i za ˇz ene na ˇs z a l e d n i s i s t e m 28 CMD [ ” node ” , ” i n d e x . j s ” ]
Poglavje 3
Mobilna aplikacija za iOS
Ker razvijamo aplikacijo za iOS, nimamo na voljo velike izbire razvojnih oko- lij in orodij. Potrebujemo raˇcunalnik z nameˇsˇcenim operacijskim sistemom macOS, v naˇsem primeru macOS Big Sur [17], in razvojno orodje xCode [18].
Mobilna aplikacija deluje na napravah, ki imajo nameˇsˇcen mobilni operacij- ski sistem iOS razliˇcice vsaj 14.0 [19]; v ˇcasu pisanja je delovala na razliˇcici iOS 14.4. V orodju xCode bomo razvijali s programskim jezikom Swift [20] z uporabo SwiftUI, ki omogoˇca laˇzje grajenje uporabniˇskega vmesnika z manj kode v primerjavi s klasiˇcnimi pristopi jezika Swift.
Mobilna aplikacija uporabnikom omogoˇca ogled zemljevida z vsemi eta- pami in kontrolnimi toˇckami. Prav tako si lahko uporabniki ogledajo seznam kontrolnih toˇck in etap v tabeli. Pri ogledu seznama etap lahko uporabniki izberejo ˇzeleno etapo in si ogledajo njene podrobnosti. Vidijo lahko katego- rijo, kratek opis, ime in traso etape na zemljevidu, lahko pa tudi obiˇsˇcejo spletno stran etape z vsemi podrobnostmi. V ogledu podrobnosti etape je moˇznost, da uporabniki delijo datoteko GPX v zato namenjeno aplikacijo ali pa delijo datoteko z ostalimi uporabniki.
15
16 David Trafela
3.1 Orodja in tehnologije
3.1.1 Orodja
xCode je zastonjsko Applovo integrirano razvojno okolje, ki se uporablja pri razvoju programske opreme za macOS, iOS, ipadOS [21], watchOS [22] in tvOS [23]. Prva razliˇcica je bila izdana 18. 3. 2003, takrat ˇse pod imenom xCode Tools 1.0 [24]. Omogoˇca podporo razliˇcnim pro- gramskim jezikom, najpogosteje pa se za razvijanje programske opreme uporabljata jezika Swift in Objective-C [25].
Slika 3.1: Simulator naprave iPhone 12 Pro
Diplomska naloga 17 Simulator [26] je orodje vgrajeno v xCode, ki omogoˇca testiranje in po- ganjanje aplikacij. Simulator prikazuje uporabniˇski vmesnik naprav iPhone, iPad in Apple Watch znotraj okna na raˇcunalniku Mac. S si- mulatorjem komuniciramo prek tipkovnice ali prek miˇske, ki simulira dotike, spremembe zasuka zaslona in ostale uporabniˇske interakcije. Za testiranje naˇse aplikacije bomo uporabljali simulator naprave iPhone 12 Pro [27] z nameˇsˇceno razliˇcico iOS 14.4, viden na sliki 3.1.
3.1.2 Tehnologije
Swift je Applov odprtokodni programski jezik, ki je bil javnosti predstavljen leta 2014. Swift je objektno orientiran in imperativen jezik z elementi funkcijskega programiranja. Zasnovan je z namenom, da razvijalcem omogoˇca laˇzje pisanje in vzdrˇzevanjepravilnih programov. Da bi lahko to dosegel, mora veljati naslednje:
• varno: nepredvidljivo obnaˇsanje in napake razvijalcev morajo biti odpravljene preden se program objavi v produkcijski razliˇcici,
• hitro: ker je namen programskega jezika Swift, da nadomesti programske jezike osnovane na Cju, mora biti primerljivo hiter v veˇcini primerov. Hitrost mora biti predvidljiva in konstanta.
Leta 2017 je bil Swift deseti na lestvici programskih jezikov bralcev revije Spectrum [28].
SwiftUI so predstavili leta 2019 na Applovi konferenci WWDC z namenom, da poenostavi razvoj uporabniˇskega vmesnika. Zato se uporablja pri deklarativnem razvoju uporabniˇskega vmesnika, v nasprotju s tradi- cionalnim razvojem, kjer je potrebno najprej definirati element upo- rabniˇskega vmesnika; nastaviti njegovo okno; doloˇciti barve, ozadje in ospredje, ter ostale atribute; na koncu pa tudi umestiti v hierarhijo po- gleda. Pri deklarativnem razvoju uporabniˇskega vmesnika lahko enako stvar doseˇzemo tako, da doloˇcimo ˇzelene elemente vmesnika in jih ka-
18 David Trafela sneje spreminjamo z doloˇcili [29]. Tako razvijamo programsko opremo z manj kode, kar omogoˇca laˇzje vzdrˇzevanje, preglednejˇso in laˇzje berljivo kodo, ter boljˇso podporo veˇc raˇcunalniˇskim okoljem.
3.2 Arhitektura mobilne aplikacije
Pri razvoju aplikacije smo sledili vzorcu MVVM (Model-View-ViewModel) [30], kar nam omogoˇca laˇzje testiranje aplikacije, saj imamo vso logiko v datotekah, ki imajo vlogo ViewModel. Naˇse datoteke, ki vsebujejo poglede, na ta naˇcin ostajajo pregledne, saj ne vsebujejo logike pogleda.
Aplikacija za iOS je prilagojena tako za naprave iPhone kot za naprave iPad, ˇceprav se bo zaradi laˇzje prenosljivosti in namena verjetno uporabljala preteˇzno na napravah iPhone. Aplikacija sestoji iz treh osnovnih in dveh podrobnejˇsih pogledov.
Prvi pogled, kot je vidno na sliki 3.2a prikazuje zemljevid s celotno traso STKP in pozameznimi kontrolnimi toˇckami. Drugi pogled, viden na sliki 3.2b, prikazuje seznam vseh etap skupaj s polnim imenom in katego- rijo etape. Tretji pogled, slika 3.2c, prikazuje seznam vseh kontrolnih toˇck z njihovim imenom in lokacijo ˇziga.
Uporabniki lahko v drugem pogledu kliknejo na posamezno etapo, kar odpre podrobnejˇsi pogled izbrane etape, viden na sliki 3.3a, ki vsebuje tudi opis in moˇznost ogleda etape na spletni strani STKP, kot jo razvidno na sliki 3.3b.
V nadaljevanju bomo podrobneje opisali zgolj prvi pogled, saj je njegova zgradba nekoliko drugaˇcna. Zgradb preostalih pogledov se bomo samo beˇzno dotaknili, saj so narejene po enakem vzorcu.
Diplomska naloga 19
(a) Prvi pogled (b) Drugi pogled (c) Tretji pogled
Slika 3.2: Osnovni pogledi
3.2.1 Pridobivanje in obdelava podatkov
Za komunikacijo z zalednim sistemom in prenos datotek bomo uporabiljali knjiˇznico Alamofire [31], saj ta omogoˇca elegantno delo s protokolom HTTP.
Alamofire je knjiˇznica, ki olajˇsa komunikacijo s streˇznikom. Omogoˇca laˇzji prenos in nalaganje datotek, laˇzjo pretvorbo odgovorov v objekte in veriˇzenje zahtevkov. Uporabna je tudi zato, ker je za enako stvar potrebno manj kode kot z vgrajenimi fukncijami v programskem jeziku Swift in ker je z njo laˇzje obdelovati napake pri zahtevkih HTTP. To je bil tudi eden izmed razlogov, da smo izbrali Alamofire. V aplikaciji iz zalednega sistema namreˇc prenaˇsamo datoteke, kar bi bilo brez omenjene knjiˇznice zamudno.
Aplikacija ob vsakem zagonu od zalednega sistema, opisanega v poglavju 2, zahteva datum, kdaj so bile datoteke na spletni strani STKP nazadnje spre- menjene.
20 David Trafela
(a) Podrobnosti etape (b) Spletna stran etape Slika 3.3: Podrobnejˇsi pogledi
Ce ob prvem zagonu ni na voljo spletne povezave, sta moˇˇ zna dva scenarija.
Ce je uporabnik ˇˇ ze kdaj odprl aplikacijo s spletno povezavo, aplikacija deluje normalno, saj ˇze ima prenesene vse potrebne datoteke. ˇCe ni uporabnik ˇse nikoli odprl aplikacije s spletno povezavo, se izpiˇse sporoˇcilo, naj uporabnik odpre aplikacijo s spletno povezavo, saj aplikacija nima datotek, iz katerih bi lahko pridobila podatke o etapah in kontrolnih toˇckah.
Ob preverjanju datuma bo takrat, ko bo datum, pridobljen iz zalednega sistema, novejˇsi od trenutno shranjenega v aplikaciji, ta od zalednega sistema zahtevala datoteko tipa ZIP. Enako bo zahtevala v primeru, ko ˇse ne bo imela preneˇsenih datotek. Po prenosu datoteke tipa ZIP se ta ekstrahira. Tako dobimo datoteke tipa GPX in JSON posameznih etap in kontrolnih toˇck.
Diplomska naloga 21
Izsek kode 3.1: Poizvedba datuma
l e t r e q u e s t U r l = ” h t t p : / / l o c a l h o s t : 3 0 0 0 / g e t−l a t e s t−d a t e ” AF . r e q u e s t ( r e q u e s t U r l , method : . g e t )
. r e s p o n s e D e c o d a b l e ( o f : L a t e s t D a t e . s e l f ) { r e s p o n s e i n . . .
l e t d a t e = r e s p o n s e . v a l u e
l e t s t r i n g D a t e = d a t e . s t r i n g D a t e ( ) . . .
s e l f . d o w n l o a d F i l e ( s t r i n g D a t e : s t r i n g D a t e ) . . .
u s e r D e f a u l t s . s e t ( date , f o r K e y : ” l a t e s t D a t e ” ) ; . . .
}
Prenos in ekstrahiranje datotek
Ob zagonu aplikacije naredimo poizvedbo na zaledni sistem, kot prikazuje izsek kode 3.1.
Pri poizvedbi nam delo zelo olajˇsa funkcija iz knjiˇznice Alamofire.respon- seDecodable, saj lahko kot argument podamo objekt poljubne vrste in s tem zahtevamo, da bo response.valuetoˇcno tega tipa. Ob tem mora biti odgovor zalednega sistema ustrezne oblike. To nam olajˇsa delo, saj ne rabimo pre- tvarjati iz formata JSON v naˇs izbrani objekt. Kot lahko vidimo iz izseka kode 3.1, ob ustreznem datumu zaˇcnemo prenos datotek in shranimo datum, ki ga je vrnil zaledni sistem.
Pri ekstrahiranju datotek bomo uporabljali knjiˇznico ZIPFoundation [32], ki deluje kot dodatna funkcija ˇze vgrajenega datoteˇcnega sistema. V izseku kode 3.2 lahko vidimo, kako smo prenesli datoteko in kasneje s pomoˇcjo ZIPFoundation funkcije.unzipItemekstrahirali vse datoteke, ki so bile znotraj preneˇsene datoteke tipa ZIP.
22 David Trafela
Izsek kode 3.2: Prenos in ekstrahiranje datotek . . .
l e t downloadUrl = ” h t t p : / / l o c a l h o s t : 5 0 0 0 / download ” AF . download ( downloadUrl , t o : d e s t i n a t i o n )
. r e s p o n s e { r e s p o n s e i n . . .
t r y f i l e M a n a g e r . u n z i p I t e m ( a t : sourceURL ,
t o : d e s t i n a t i o n U R L ) . . .
}
Obdelava preneˇsenih podatkov
Ko smo ekstrahirali datoteke, imamo na voljo datoteke tipa GPX in JSON posameznih etap in kontrolnih toˇck. Datoteke tipa GPX so v formatu XML, za kar v jeziku Swift ne potrebujemo dodatne knjiˇznice, saj jih lahko beremo s pomoˇcjo pomoˇznega razreda XMLParser. Vsako toˇcko preslikamo v naˇs objekt Point (zgradba vidna v izseku kode 3.3) in jo dodamo v seznam.
Kasneje ta seznam toˇck v prvem pogledu, slika 3.2a, prikaˇzemo na zemljevidu.
Datoteke tipa JSON lahko prebiramo z vgrajenim ukazom v jeziku Swift JSONDecoder().decode(naˇs objekt, vhodniPodatki), kjer izberemo, v kakˇsen objekt se bodo vhodni podatki preslikali. Za datoteko tipa JSON, ki vsebuje podatke o kontrolnih toˇckah, smo ustvarili objekt Tocka, za datoteko, ki vsebuje podatke o etapah, pa objekt Etapa. Branje podatkov o etapah iz datoteke etape.json in o kontrolnih toˇckah iz datoteke kt.json je prikazano v izseku kode 3.4.
Diplomska naloga 23
Izsek kode 3.3: Objekt Point s t r u c t P o i n t : I d e n t i f i a b l e {
l e t i d = UUID ( ) l e t name : S t r i n g l e t l a t i t u d e : Double l e t l o n g i t u d e : Double
v a r c o o r d i n a t e : CLLocationCoordinate2D {
CLLocationCoordinate2D ( l a t i t u d e : l a t i t u d e , l o n g i t u d e : l o n g i t u d e ) }
}
Izsek kode 3.4: Branje podatkov etap in kontrolnih toˇck l e t e t J s o n F i l e = documents
. appendingPathComponent ( ” e t a p e . j s o n ” ) l e t e t J s o n D a t a = t r y Data . i n i t ( c o n t e n t s O f : e t J s o n F i l e ) l e t e t a p e : [ Etapa ] = t r y ! JSONDecoder ( )
. d e c o d e ( [ Etapa ] . s e l f , from : e t J s o n D a t a ) . . .
l e t k t J s o n F i l e = documents
. appendingPathComponent ( ” k t . j s o n ” ) l e t ktJsonData = t r y Data . i n i t ( c o n t e n t s O f : k t J s o n F i l e ) l e t k o n t r o l n e T o c k e : [ Tocka ] = t r y ! JSONDecoder ( )
. d e c o d e ( [ Tocka ] . s e l f , from : ktJsonData )
24 David Trafela
3.2.2 Deklarativna gradnja pogledov
Pri izdelavi aplikacij s pomoˇcjo SwiftUI gradimo poglede deklarativno. De- klarativno programiranje je stil programiranja, kjer podamo samo logiko pro- grama brez poteka dogodkov. Pri gradnji pogledov na deklarativen naˇcin po- vemo, kako mora izgledati aplikacija v razliˇcnih stanjih in kaj mora narediti, celotno logiko pa prevzame aplikacija. Komponent uporabniˇskega vmesnika na primer ne skrivamo in prikazujemo, temveˇc doloˇcimo pravila, kdaj morajo biti prikazane.
V izseku kode 3.5 lahko vidimo, da smo ustvarili TabView, kar na dnu aplikacije izoblikuje orodno vrstico. Znotraj TabView smo ustvarili vsak za- vihek (zaslon) posebej in mu nastavili ustrezne parametre. Kot vidimo sta drugi in tretji pogled zelo podobna. Zanju ne potrebujemo dodatne dato- teke, saj smo z deklariranjem elementa List ˇze dodali celotno tabelo, ki bo prikazovala vse kontrolne toˇcke in etape. Pri NavigationView smo s pomoˇcjo NavigationLink doloˇcili, kaj se zgodi ob kliku na posamezno etapo. V naˇsem primeru se odpre pogled o podrobnosti etape, kot prikazuje slika 3.3a.
Posebnost je razred MapView, ki ni tipa View, ampak tipa UIViewRepre- sentable, kar sluˇzi kot ovojnica za pogled, ki ga ˇzelimo ustvariti. Razlog je v tem, da je za potrebe dodajanja toˇck in ˇcrt na zemljevid potrebno implemen- tirati delegirane metode. V SwiftUI se delegirane metode implementirajo z razredi, ki sluˇzijo kot koordinatorji. Primer, kako smo ustvarili koordinator in kasneje doloˇcili ta koordinator za delegirane metode zemljevida, prikazuje izsek kode 3.6.
Koordinator doloˇca, kako se bo spreminjal pogled glede na pridobljene podatke in kaj se zgodi ob doloˇcenih interakcijah s tem pogledom. Lahko si ga predstavljamo kot
”lepilo“ med razliˇcnimi pogledi, saj je njihova naloga, da doloˇcajo, kakˇsen bo tok podatkov, kakˇsne spremembe se bodo zgodile glede na doloˇcen dogodek ter po potrebi ustvarjajo nove poglede. Primer, kako koordinatorje dodamo v vzorec MVVM, prikazuje slika 3.4.
Diplomska naloga 25
Izsek kode 3.5: Zgradba glavnega pogleda TabView{
MapView ( l o c a t i o n V i e w M o d e l ) . i g n o r e s S a f e A r e a ( )
. t a b I t e m {
L a b e l ( ” Z e m l j e v i d ” , systemImage : ”map” ) }
N a v i g a t i o n V i e w {
L i s t ( l o c a t i o n V i e w M o d e l . e t a p e ) { e t a p a i n N a v i g a t i o n L i n k ( d e s t i n a t i o n :
EtapaView ( e t a p a : e t a p a ) ) { VStack ( a l i g n m e n t : . l e a d i n g ) {
Text ( e t a p a . name ) . f o n t ( . h e a d l i n e ) Text ( e t a p a . c a t e g o r y )
. f o n t ( . s u b h e a d l i n e ) }
}
}. n a v i g a t i o n T i t l e ( ” Etape ” ) }. t a b I t e m {
L a b e l ( ” Etape ” , systemImage : ” l i s t . b u l l e t ” ) }
N a v i g a t i o n V i e w {
L i s t ( l o c a t i o n V i e w M o d e l . t o c k e ) { t o c k a i n VStack ( a l i g n m e n t : . l e a d i n g ) {
Text ( t o c k a . n a z i v ) . f o n t ( . h e a d l i n e ) Text ( t o c k a . z i g ) . f o n t ( . s u b h e a d l i n e ) }
}. n a v i g a t i o n T i t l e ( ” K o n t r o l n e t o ˇc ke ” ) }. t a b I t e m {
L a b e l ( ” K o n t r o l n e t o ˇc ke ” ,
systemImage : ” l i s t . b u l l e t ” ) }
}
26 David Trafela
Slika 3.4: Koordinator in vzorec MVVM [33]
Izsek kode 3.6: Ustvarjanje zemljevida in doloˇcanje koordinatorja f u n c makeCoordinator ( ) −> MapViewCoordinator {
MapViewCoordinator ( s e l f ) }
f u n c makeUIView ( c o n t e x t : Context ) −> MKMapView { l e t mapView = MKMapView ( )
mapView . s h o w s U s e r L o c a t i o n = t r u e
mapView . d e l e g a t e = c o n t e x t . c o o r d i n a t o r r e t u r n mapView
}
Diplomska naloga 27
3.2.3 Imperativna gradnja pogledov
V tem poglavju ˇzelimo deklaratven naˇcin gradnje dodatno raloˇziti tako, da predstavimo, kako smo enak pogled zgradili imperativno. V nasprotju z deklarativnim programiranjem pri imperativnem programiranju sami spre- minjamo stanje s stavki. Pri imperativnem programiranju se osredotoˇcamo na to, kako program deluje.
V tem delu bomo opisali samo pogled, ki prikazuje seznam kontrolnih toˇck, saj bo ˇze ta pokazal, koliko kode je potrebno, da ga ustvarimo. Pri tem naˇcinu gradnje pogledov moramo tudi skrbeti za pravilno ustvarjanje komponent, saj je potrebno implementirati metode ˇzivljenjskega cikla po- gleda. Osnova za pogled je razred tipaUIViewController, ki vsebuje reference grafiˇcnih elementov in celotno logiko pogledov.
Pri imperativni gradnji pogledov lahko element v pogled dodamo na dva naˇcina. Prvi naˇcin je grafiˇcno dodajanje elementov prek datotek imenovanih Storyboard. V teh datotekah vidimo, kako so vsi pogledi med seboj povezani in njihovo celotno hierarhijo. Nov grafiˇcni element dodamo tako, da izberemo element iz seznama in ga povleˇcemo na zaslon; tako tudi sproti vidimo, kako bo naˇs pogled videti na konˇcni napravi. Slika 3.5 prikazuje hierarhijo pogleda, kjer smo grafiˇcno dodali tri elemente: sliko, gumb in napis.
Drugi naˇcin pa je dodajanje elementov programsko, vendar tukaj ne vi- dimo konˇcne postavitve elementov, dokler aplikacije ne poˇzenemo na napravi.
Primeri, kako smo dodali programske elemente, bodo prikazovali tudi, kako smo zgradili pogled seznama kontrolnih toˇck.
Dodajanje tabele
Izsek kode 3.7 prikazuje, kako smo ustvarili elementUITableView, ki predsta- vlja tabelo. Temu smo doloˇcili tudi tip posamezne vrstice v tabeli, vrstica 12.
Tukaj smo se odloˇcili za generiˇcen tip UITableViewCell. Lahko bi se odloˇcili tudi za popolnoma svoj tip razreda, ki mora ustrezati doloˇcenim pravilom pogleda. Ker se pri programski gradnji pogleda elementi v pogled ne dodajo sami, smo morali v hierarhijo pogleda dodati tudi tabelo.
28 David Trafela
Slika 3.5: Storyboard
Diplomska naloga 29 Vrstice v tabeli in doloˇcanje izvora podatkov
Za doloˇcanje vsebine vrstic, izgleda vrstic ter podatkov za tabelo mora naˇs UIViewController vsebovati doloˇcene metode. Spremembe prikazuje izsek kode 3.8. Tako moramo implementirati izbrane metode iz protokolov UI- TableViewDelegate in UITableViewDataSource. S pomoˇcjo metode iz prvega protokola lahko doloˇcamo izgled naˇse vrstice, in sicer v metodi v 20. vr- stici. S pomoˇcjo metode iz drugega protokola pa doloˇcimo ˇstevilo vrstic, ki jih mora tabela vsebovati. To ˇstevilo je enako dolˇzini vrste s kontrolnimi toˇckami, kar prikazujejo vrstice 15–18.
Izgled vsake vrstice smo doloˇcili v izseku kode 3.9. V tem izseku smo pridobili kontrolno toˇcko iz vrste, ki se mora prikazati v vrstici z doloˇcenim indeksom. Kasneje smo ustvarili dva grafiˇcna elementa Label. Potrebujemo ju, da lahko v vrstici prikaˇzemo naziv kontrolne toˇcke in lokacijo ˇziga. Kot vidimo v vrsticah 14–16 in 22–24, smo morali za vsak element doloˇciti pozicijo v vrstici tabele ter viˇsino in ˇsirino elementa. Ker pa se elementi ne dodajo samodejno v pogled, smo morali tudi ta dva elementa v vrsticah 18 in 26 dodati v pogled vrstice.
Primerjava dolˇzine kode med deklarativno in imperativno gradnjo pogledov
Kot smo lahko videli v tem poglavju, je dolˇzina kode pri imperativnem naˇcinu, ki je potrebna za zgolj en preprost pogled, podobna kot dolˇzina kode, ki je potrebna za tri celotne osnovne poglede pri deklarativnem naˇcinu gradnje pogledov. Celotna skripta pri imperativnem naˇcinu, ki vsebuje po- gled seznama kontrolnih toˇck, je dolga 72 vrstic; pri deklarativnem naˇcinu pa je skripta, ki vsebuje vse tri osnovne poglede (zemljevid, seznam etap in seznam kontrolnih toˇck) dolga le 74 vrstic. S pomoˇcjo deklarativnega naˇcina smo tako aplikacijo zgradili hitreje, laˇzje in uˇcinkoviteje. Ker pa je ˇstevilo vrstic manjˇse, je tudi nadaljnje vzdrˇzevanje aplikacije laˇzje, saj vzdrˇzevalcu ni potrebno pregledovati tolikˇsnega ˇstevila vrstic.
30 David Trafela
Izsek kode 3.7: Ustvarjanje tabele 1 c l a s s V i e w C o n t r o l l e r : U I V i e w C o n t r o l l e r { 2
3 l e t t a b l e V i e w : UITableView = { 4 l e t t a b l e V i e w = UITableView ( )
5 t a b l e V i e w . b a c k g r o u n d C o l o r = UIColor . w h i t e 6 r e t u r n t a b l e V i e w
7 }( )
8
9 o v e r r i d e f u n c viewDidLoad ( ) { 10 s u p e r . viewDidLoad ( )
11
12 s e t u p T a b l e V i e w ( )
13 }
14
15 f u n c s e t u p T a b l e V i e w ( ) {
16 t a b l e V i e w . r e g i s t e r ( U I T a b l e V i e w C e l l . s e l f ,
17 f o r C e l l R e u s e I d e n t i f i e r : ” c e l l K t ” ) 18
19 s e l f . view . addSubview ( t a b l e V i e w )
20 }
21 }
Diplomska naloga 31
Izsek kode 3.8: Metode protokolov 1 c l a s s V i e w C o n t r o l l e r : U I V i e w C o n t r o l l e r ,
2 UITableViewDelegate ,
3 UITableViewDataSource {
4
5 l e t k o n t r o l n e T o c k e = [ Tocka ] ( )
6 . . .
7
8 f u n c s e t u p T a b l e V i e w ( ) {
9 t a b l e V i e w . d e l e g a t e = s e l f 10 t a b l e V i e w . d a t a S o u r c e = s e l f
11 . . .
12 }
13
14 f u n c t a b l e V i e w ( t a b l e V i e w : UITableView ,
15 numberOfRowsInSection s e c t i o n : I n t ) −> I n t { 16 r e t u r n k o n t r o l n e T o c k e . c o u n t
17 }
18
19 f u n c t a b l e V i e w ( t a b l e V i e w : UITableView , 20 cellForRowAt i n d e x P a t h : IndexPath ) 21 −> U I T a b l e V i e w C e l l {
22 l e t c e l l = t a b l e V i e w
23 . d e q u e u e R e u s a b l e C e l l ( w i t h I d e n t i f i e r : 24 ” c e l l K t ” , f o r : i n d e x P a t h )
25
26 . . .
27
28 r e t u r n c e l l
29 }
30 31 }
32 David Trafela
Izsek kode 3.9: Izgled vrstice 1 f u n c t a b l e V i e w ( t a b l e V i e w : UITableView , 2 cellForRowAt i n d e x P a t h : IndexPath ) 3 −> U I T a b l e V i e w C e l l {
4 l e t c e l l = t a b l e V i e w
5 . d e q u e u e R e u s a b l e C e l l ( w i t h I d e n t i f i e r : 6 ” c e l l K t ” , f o r : i n d e x P a t h )
7
8 c e l l . b a c k g r o u n d C o l o r = UIColor . w h i t e 9
10 l e t t o c k a = k o n t r o l n e T o c k e [ i n d e x P a t h . row ] 11
12 l e t n a z i v L a b e l = UILabel ( ) 13 n a z i v L a b e l . t e x t = t o c k a . n a z i v
14 n a z i v L a b e l . frame = CGRect ( x : 1 0 , y : 0 ,
15 width : c e l l . c o n t e n t V i e w . frame . width − 1 0 ,
16 h e i g h t : 3 0 )
17
18 c e l l . c o n t e n t V i e w . addSubview ( n a z i v L a b e l ) 19
20 l e t z i g L a b e l = UILabel ( ) 21 z i g L a b e l . t e x t = t o c k a . z i g
22 z i g L a b e l . frame = CGRect ( x : 1 0 , y : 3 0 ,
23 width : c e l l . c o n t e n t V i e w . frame . width − 1 0 ,
24 h e i g h t : 3 0 )
25
26 c e l l . c o n t e n t V i e w . addSubview ( z i g L a b e l ) 27
28 r e t u r n c e l l
29 }
Poglavje 4 Zakljuˇ cek
Cilj tega diplomskega dela je bil ustvariti mobilno aplikacijo, ki bo v primer- javi s spletno stranjo STKP prijaznejˇsa uporabnikom mobilnih naprav in bo omogoˇcala prikazovanje osnovnih informacij o etapah in kontrolnih toˇckah tudi v naˇcinu brez mobilne povezave. Za delovanje aplikacije smo morali razviti tudi zaledni sistem, saj je tak naˇcin enostavnejˇsi, kot ˇce bi aplikacija sama obdelovala izvorno kodo spletne strani STKP.
Rezultat tega diplomskega dela sta torej zaledni sistem (izvorna koda dostopna na https://github.com/divjad---/stkp-backend) in mobilna aplikacija (izvorna koda dostopna nahttps://github.com/divjad---/stkp- ios-app). Tako lahko vsak pregleda izvorno kodo, jo prenese ter poˇzene oba projekta in ju preizkusi na svoji napravi.
V izhodiˇsˇcu smo morali pregledati spletno stran STKP, da smo dobili obˇcutek, kaj mora aplikacija omogoˇcati, in doloˇcili njen izgled. Po pregledu smo ugotovili, da ne ponuja moˇznosti strojnega branja podatkov, zato smo morali ustvariti lastno reˇsitev. Odloˇcili smo se, da bomo ustvarili svoj zaledni sistem, ki bo enkrat tedensko prebral izvorno kodo spletne strani in s tem pridobil najnovejˇse podatke. Po potrebi bo tudi prenesel datoteke, ˇce so te na spletni strani novejˇse kot na naˇsem streˇzniku. Takˇsna reˇsitev ima pomanj- kljivost, saj je odvisna od razvijalcev spletne strani STKP. V primeru, da se ti odloˇcijo spletno stran spremeniti, se lahko zgodi, da zaledni sistem ne bo
33
34 David Trafela pravilno pridobival podatkov in datotek, kar bi vodilo v njihovo zastarelost.
Dolgoroˇcnejˇsa reˇsitev bi bilo sodelovanje z razvijalci spletne strani STKP, saj bi tako lahko omogoˇcili strojno branje podatkov.
Po zalednem sistemu smo se lotili mobilne aplikacije. Pri njeni izde- lavi smo se odloˇcili za programski jezik Swift skupaj s SwiftUI, kar nam je omogoˇcilo preprosto gradnjo uporabniˇskega vmesnika. Za Swift smo se odloˇcili, ker ga dobro poznamo in ker se programski jezik Objective-C opuˇsˇca.
S pomoˇcjo SwiftUI smo hitreje in z manj kode zgradili uporabniˇski vmesnik, kar nam je omogoˇcilo hitrejˇsi razvoj celotne aplikacije, kot ˇce bi uporabljali klasiˇcen pristop z razredi UIViewController.
Aplikacija ob vsakem zagonu pri zalednem sistemu preveri, ali so na voljo novejˇsi podatki in datoteke. ˇCe ti obstajajo, jih prenese na uporabnikovo napravo ter posodobi celoten zemljevid in tabele. Razlog za vsakodnevno preverjanje, ali so na voljo novejˇsi podatki, je v tem, da se na tak naˇcin zmanjˇsa moˇznost, da bi imel uporabnik v naˇcinu brez povezave zastarele podatke. Kasneje se vsi ti podatki prikazujejo v treh razliˇcnih pogledih: ze- mljevid, seznam etap in seznam kontrolnih toˇck. Uporabniki lahko v seznamu izberejo etapo in si tako ogledajo podrobnejˇse informacije o njej, lahko pa tudi obiˇsˇcejo spletno stran etape.
Literatura
[1] Brian Caulfield. “Re-cycling a city – Examining the growth of cycling in Dublin”. V: Transportation Research Part A: Policy and Practice 61 (2014), str. 216–226. issn: 0965-8564. doi: https://doi.org/10.
1016/j.tra.2014.02.010. url: https://www.sciencedirect.com/
science/article/pii/S0965856414000408.
[2] Spletna stran STKP. url: https : / / stkp . pzs . si/ (pridobljeno 19. 3. 2021).
[3] SwiftUI. url: https : / / developer . apple . com / xcode / swiftui/
(pridobljeno 20. 3. 2021).
[4] Node.js.url: https://nodejs.org/en/ (pridobljeno 20. 3. 2021).
[5] Spletna stran Docker. url: https://www.docker.com/resources/
what-container(pridobljeno 17. 5. 2021).
[6] Aplikacijski programski vmesnik. url: https://sl.wikipedia.org/
wiki/Vmesnik_za_namensko_programiranje(pridobljeno 13. 6. 2021).
[7] API. url: https://www.redhat.com/cms/managed-files/styles/
wysiwyg_full_width/s3/API- page- graphic.png?itok=5zMemph9 (pridobljeno 13. 6. 2021).
[8] WebStorm. url: https : / / www . jetbrains . com / webstorm/ (prido- bljeno 8. 4. 2021).
[9] Postman.url: https://www.postman.com/ (pridobljeno 15. 5. 2021).
[10] V8.url: https://v8.dev/ (pridobljeno 20. 3. 2021).
35
36 David Trafela [11] JavaScript. url: https : / / en . wikipedia . org / wiki / JavaScript
(pridobljeno 20. 3. 2021).
[12] Dokument blagovne znamke JavaScript. url: https://tsdr.uspto.
gov / #caseNumber = 75026640 & caseType = SERIAL _ NO & searchType = statusSearch(pridobljeno 20. 3. 2021).
[13] Uporaba jezika JavaScript.url:https://w3techs.com/technologies/
details/cp-javascript/(pridobljeno 20. 3. 2021).
[14] Express.url: https://expressjs.com/ (pridobljeno 24. 5. 2021).
[15] Axios. url: https://axios-http.com/ (pridobljeno 26. 5. 2021).
[16] cheerio. url: https : / / cheerio . js . org / index . html (pridobljeno 26. 5. 2021).
[17] macOS Big Sur. url: https : / / www . apple . com / macos / big - sur/
(pridobljeno 20. 3. 2021).
[18] xCode. url: https : / / developer . apple . com / xcode/ (pridobljeno 20. 3. 2021).
[19] iOS 14. url: https : / / www . apple . com / ios / ios - 14/ (pridobljeno 20. 3. 2021).
[20] Swift. url:https://swift.org/ (pridobljeno 21. 3. 2021).
[21] ipadOS. url: https://www.apple.com/ipados/ipados-14/ (prido- bljeno 21. 3. 2021).
[22] watchOS. url: https://www.apple.com/watchos/watchos-7/ (pri- dobljeno 21. 3. 2021).
[23] tvOS. url: https : / / developer . apple . com / tvos/ (pridobljeno 21. 3. 2021).
[24] xCode Tools.url:https://xcodereleases.com/(pridobljeno 21. 3. 2021).
[25] Objective-C.url:https://developer.apple.com/library/archive/
documentation / Cocoa / Conceptual / ProgrammingWithObjectiveC / Introduction/Introduction.html(pridobljeno 21. 3. 2021).
Diplomska naloga 37 [26] Simulator.url:https://help.apple.com/simulator/mac/current/
#/deve44b57b2a (pridobljeno 21. 3. 2021).
[27] iPhone 12 Pro. url: https : / / www . apple . com / iphone - 12 - pro/
(pridobljeno 21. 3. 2021).
[28] Stephen Cass. “The 2017 top programming languages”. V:IEEE Spec- trum 31 (2018).
[29] Jayant Varma. “What Is SwiftUI”. V:SwiftUI for Absolute Beginners:
Program Controls and Views for iPhone, iPad, and Mac Apps. Ber- keley, CA: Apress, 2019, str. 1–8. isbn: 978-1-4842-5516-2. doi: 10 . 1007/978-1-4842-5516-2_1. url:https://doi.org/10.1007/978- 1-4842-5516-2_1.
[30] Joshua Greene in Jay Strawn. Design Patterns by Tutorials: Learning Design Patterns in Swift. Third. Razeware, 2019.
[31] Alamofire. url: https://github.com/Alamofire/Alamofire (prido- bljeno 22. 3. 2021).
[32] ZIPFoundation.url:https://github.com/weichsel/ZIPFoundation (pridobljeno 22. 3. 2021).
[33] Koordinator in vzorec MVVM. url: https : / / quickbirdstudios . com/blog/coordinator-pattern-in-swiftui/(pridobljeno 7. 4. 2021).
