Univerza v Ljubljani
Fakulteta za raˇ cunalniˇ stvo in informatiko
Jan Krivec
Aplikacija za Android za Slovensko turno kolesarsko pot
DIPLOMSKO DELO
UNIVERZITETNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE
RA ˇCUNALNIˇSTVO IN INFORMATIKA
Mentor :prof. dr. Janez Demˇsar
Ljubljana, 2021
To delo je ponujeno pod licenco Creative Commons Priznanje avtorstva-Deljenje pod enakimi pogoji 2.5 Slovenija (ali novejˇso razliˇcico). To pomeni, da se tako besedilo, slike, grafi in druge sestavine dela kot tudi rezultati diplomskega dela lahko prosto distribuirajo, reproducirajo, uporabljajo, priobˇcujejo javnosti in pre- delujejo, pod pogojem, da se jasno in vidno navede avtorja in naslov tega dela in da se v primeru spremembe, preoblikovanja ali uporabe tega dela v svojem delu, lahko distribuira predelava le pod licenco, ki je enaka tej. Podrobnosti licence so dostopne na spletni strani creativecommons.si ali na Inˇstitutu za intelektualno lastnino, Streliˇska 1, 1000 Ljubljana.
Izvorna koda diplomskega dela, njeni rezultati in v ta namen razvita program- ska oprema je ponujena pod licenco GNU General Public License, razliˇcica 3 (ali novejˇsa). To pomeni, da se lahko prosto distribuira in/ali predeluje pod njenimi pogoji. Podrobnosti licence so dostopne na spletni strani http://www.gnu.org/
licenses/.
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Kandidat: Jan Krivec
Naslov: Aplikacija za Android za Slovensko turno kolesarsko pot
Vrsta naloge: Diplomska naloga na univerzitetnem programu prve stopnje Raˇcunalniˇstvo in informatika
Mentor: prof. dr. Janez Demˇsar
Opis:
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.
Title: Android application for the Slovenian bike touring route Description:
Many who embark on the Slovenian bike touring route find themselves in a situation where there are no mobile networks and no ability to visit the Slovenian bike touring route website and see the details of each route and its checkpoints. A better solution would be a mobile application that would store all the data and periodically update it for viewing in offline mode. The mobile application also needs a back-end system for its operation, because the Slovenian bike touring route website does not provide machine-readable data. The back-end system will read the HTML code of the website, extract the necessary data and provide the mobile application with access to this
data. Thus, the result of this diploma thesis will be a back-end system and a mobile application.
Zahvalil bi se predvsem svoji babici Joˇzi in starˇsem, ker so me v ˇcasu ˇstudija finanˇcno podpirali in mi vedno stali ob strani.
Kazalo
Povzetek Abstract
1 Uvod 1
2 Spletni streˇznik za aplikacijo STKP 3
2.1 Uporabljene tehnologije . . . 4
2.1.1 Node.js . . . 4
2.1.2 Express . . . 4
2.1.3 Docker . . . 5
2.1.4 Cheerio . . . 5
2.2 Spletni streˇznik . . . 6
2.2.1 index.js . . . 7
2.3 Spletni pajek . . . 10
2.3.1 Primerjava razliˇcnih vrst spletnih pajkov . . . 10
2.3.2 scrape.js . . . 13
3 Android aplikacija STKP 17 3.1 Uporabljene tehnologije . . . 18
3.1.1 Android . . . 18
3.1.2 Java . . . 19
3.1.3 XML . . . 19
3.1.4 Android Studio . . . 20
3.2 Uporabniˇski vmesnik . . . 20
3.3 Zaˇcetni zaslon . . . 21
3.4 Seznam etap . . . 23
3.4.1 Prikazovanje seznama . . . 24
3.4.2 Zemljevid za izbrano etapo . . . 27
3.4.3 Komponenta WebView . . . 27
3.5 Zemljevid . . . 30
3.5.1 Google Maps SDK . . . 30
3.5.2 komponenta MapView . . . 30
3.5.3 Razred za risanje GPX datotek . . . 33
3.5.4 Perspektivni pogled . . . 35
3.6 Nastavitve . . . 37
3.6.1 Izbris shranjenih strani . . . 37
3.6.2 Posodabljanje datotek . . . 38
4 Zakljuˇcek 41
Literatura 43
Seznam uporabljenih kratic
kratica angleˇsko slovensko REST Representational state trans-
fer
/ API Application programming in-
terface
Aplikacijski programski vme- snik
STKP Slovenian bike touring route Slovenska turnokolesarska pot CSS Cascading Style Sheets Prekrivni slogi
JVM Java Virtual Machine navidezni stroj Java
SDK Software development kit Komplet za razvoj program- ske opreme
Povzetek
Naslov: Aplikacija za Android za Slovensko turno kolesarsko pot Avtor: Jan Krivec
Namen diplomskega dela je razviti Android mobilno aplikacijo za Slo- vensko turnokolesarko pot, ki bo uporabnikom z Android mobilno napravo sluˇzila kot preprost vodiˇc po kolesarskih poteh in na enem mestu zdruˇzila vse potrebne informacije, ki bi jih kolesar morda potreboval na poti. Uporabnik bo lahko v aplikaciji dostopal do opisov poti z uradne spletne strani in si na interaktivnem zemljevidu ogledoval zaˇcrtane kolesarske etape, ki so na voljo za prenos v gpx obliki na uradni spletni strani Slovenske turnokolesarske poti.
Diplomsko delo predstavi uporabljene tehnologije in arhitekturo programske opreme ter povzame delovanje bistvenih komponent sistema.
Kljuˇcne besede: Android, mobilna aplikacija, Slovenska turnokolesarska pot, spletni pajek, REST, Node.js, Java, XML.
Abstract
Title: Android application for Slovenian bike touring route Author: Jan Krivec
The purpose of the thesis is to develop an Android mobile application for the Slovenian bike touring route, which will serve Android mobile users as a simple guide on the routes and gather in one place all the necessary information a cyclist might need on the go. In the application, the user will be able to access route descriptions from the official website and view the tours in an interactive map, which are available for download in gpx format on the official website of the Slovenian Touring Cycling Route. The diploma thesis presents the used technologies, software architecture and summarizes the operation of essential components of the system.
Keywords: Android, mobile application, Slovenian bike touring route, web- scaper, REST, Node.js, Java, XML.
Poglavje 1 Uvod
Slovenska turnokolesarska pot je okoli 1800 kilometrov dolga kolesarska pot v Sloveniji, ki premaga 50.000 metrov viˇsinske razlike v vzponu in obide vse pomembnejˇse slovenske gorske skupine. Informacije o Slovenski turnokolesar- ski poti je bilo vˇcasih moˇzno najti na uradni spletni strani Planinske zveze slovenije, pred kratkim pa je stran dobila novo podobo in bila preseljena na novo poddomeno [7]. Kljub temu pa s preobrazbo spletne strani ostaja problem razprˇsenosti informacij po spletni strani in uvaˇzanje GPS sledi posa- meznih etap v aplikacije na telefonu, ki tako funkcionalnost podpirajo. Ker namenske aplikacije za STKP ˇse ni, je cilj te diplomske naloge razviti An- droid mobilno aplikacijo, ki na enem mestu ponuja interaktivni zemljevid z vsemi kolesarskimi etapami in kontrolnimi toˇckami, omogoˇca sledenje loka- ciji, pomaga pri orientaciji na zemljevidu ter omogoˇca ogled posameznih etap v priroˇcnem seznamu. Ker je veliko informacij ˇse vedno dostopnih zgolj na uradni spletni strani, si uporabnik lahko dodatne informacije o posamezni etapi ogleda znotraj aplikacije v WebView komponenti, kjer pa je dodana ˇse dodatna funkcionalnost za shranjevanje posameznih spletnih strani v pri- meru, da nekje na poti ni podatkovne povezave. Za povezavo aplikacije s podatki na spletni strani STKP je bil razvit streˇznik, ki preko REST aplika- cijskega programskega vmesnika komunicira z mobilno aplikacijo. Streˇznik tedensko poˇzene spletnega pajka, ki preveri za moˇzne posodobitve datotek
1
2 Jan Krivec na uradni spletni strani STKP in pripravi ZIP direktorij z vsemi datotekami, ki jih aplikacija potrebuje za delovanje. V poglavju 2 je predstavljen sple- tni streˇznik, uporabljene tehnologije, delovanje posameznih delov sistema in primerjava razliˇcnih tipov spletnih pajkov, ki bi lahko bili uporabljeni za pri- dobivanje informacij s spletne strani STKP. V poglavju 3 je predstavljena Android mobilna aplikacija, opisane so uporabljene tehnologije in delovanje posameznih komponent aplikacije. Sledi ˇse poglavje 4, kjer so predstavljene kljuˇcne ugotovitve in rezultati
Poglavje 2
Spletni streˇ znik za aplikacijo STKP
Podatki na uradni spletni strani STKP so stvar nenehnih sprememb, zato aplikacija za ˇzeleno delovanje potrebuje definiran vmesnik med spletno stra- njo, ki bo dostopen vsem uporabnikom aplikacije (t. i. odjemalcem) in bo omogoˇcal prenos najnovejˇsih podatkov, ki jih ponuja uradna spletna stran.
Omenjeni vmesnik je spletni streˇznik, ki spremlja podatke na uradni strani STKP, jih prenese in agregira v datoteke ustreznega formata. Spletni streˇznik je raˇcunalniˇski sistem, ki obdeluje zahteve preko omreˇznega protokola HTTP in predstavlja “srce” svetovnega spleta. V grobem ga lahko razdelimo na dva sestavna dela: strojno opremo in programsko opremo. Strojna oprema je dejanski fiziˇcni raˇcunalniˇski sistem sestavljen iz ˇstevilnih kompleksnih kom- ponent, ki skupaj izvrˇsujejo ukaze, ki jih narekuje programska oprema. Med razvojem sodobne programske opreme za spletni streˇznik se programer ne ukvarja z arhitekturo strojne opreme, vendar naˇcrtuje zgolj arhitekturo pro- gramske opreme in se odloˇca med razliˇcnimi programskimi jeziki ter razvoj- nimi procesi. V tem poglavju je predstavljen spletni streˇznik za aplikacijo STKP z vidika razvoja programske opreme.
3
4 Jan Krivec
2.1 Uporabljene tehnologije
Pri razvoju spletnega streˇznika se programer sreˇca s ˇstevilnimi moˇznimi teh- nologijami in programskimi jeziki, izbira pa je odvisna od velikosti in kom- pleksnosti projekta. Pri odloˇcitvi sta glavno vlogo igrala hiter razvoj in zdruˇzljivost s knjiˇznicami za razvoj spletnih pajkov.
2.1.1 Node.js
Node.js je okolje, ki omogoˇca uporabo programskega jezika JavaScript izven konteksta brskalnika in se od ostalih programskih jezikov (Python, PHP, Java, etc.), ki so pogosto uporabljeni za razvoj spletnih streˇznikov, bistveno razlikuje v tem, da deluje asinhrono in na eni niti. Standardni sinhroni naˇcin delovanja z nitmi izvrˇsuje klice funkcij zaporedno, naslednji klic pa se lahko izvede ˇsele, se ko prejˇsnji konˇca, kar je problematiˇcno predvsem ob klicih, ki zahtevajo ˇcakanje, kot so klici na bazo ali druge streˇznike. Tako delovanje prinese veliko dela s preklapljanjem in upravljanjem procesov oz.
niti za vsako zahtevo. Asinhron naˇcin delovanja se razlikuje v tem, da se vse funkcije, ki zahtevajo ˇcakanje na podatke, izvrˇsijo v ozadju, ko pa je na voljo rezultat se izvede t. i. “callback” funkcija, ki je bila kot parameter podana v funkcijskem klicu, da obdela prispele podatke. Velika prednost Node.js je tudi npm (Node Package Manager), ki poenostavi proces vkljuˇcevanja knjiˇznic in omogoˇca izbiro med ogromnim ˇstevilom knjiˇznic v registru, kar ˇse pohitri in poenostavi razvojni proces.
2.1.2 Express
Express je minimalistiˇcno ogrodje za Node.js, ki zelo poenostavi postavitev spletnega streˇznika. Ponuja vse osnovne funkcionalnosti, ki jih potrebuje spletni streˇznik in s tem omogoˇci hiter razvojni proces varne in kompaktne programske opreme.
Diplomska naloga 5
2.1.3 Docker
Docker je sistem, ki loˇci aplikacijo od aplikacijskega okolja z uporabo vseb- nikov Docker. Vsebnik vsebuje aplikacijo z vsemi potrebnimi odvisnostmi, ki teˇce v izoliranem procesu znotraj gostiteljskega operacijskega sistema in tako omogoˇci stabilnost ter ponovljivost na razliˇcnih gostiteljskih sistemih.
Docker odpravlja teˇzave z odvisnostmi, poenostavi skaliranje aplikacije in pohitri namestitev aplikacije na gostiteljski sistem.
2.1.4 Cheerio
Cheerio je Node.js knjiˇznica za razvoj spletnih pajkov, ki je razvita na osnovi knjiˇznice JQuery in tako ponuja sintakso znano ˇstevilnim spletnim razvijal- cem. Cheerio ne izvaja spletnih strani, kot jih izvaja brskalnik, ne izvaja JavaScripta, ne dodaja CSS stilov in ne nalaga zunanjih datotek. Zaradi tega je v primerjavi z ostalimi reˇsitvami neprimerljivo hitrejˇsi, vendar pa zato ni primeren v primeru popolnoma dinamiˇcnih spletnih strani, kjer je za pridobitev potrebnih podatkov potrebno izvajati JavaScript. Cheerio je prava izbira, ker spletna stran STKP ni pretirano dinamiˇcna in je zato veˇcino podatkov moˇzno prebrati iz osnovnega HTML dokumenta.
6 Jan Krivec
2.2 Spletni streˇ znik
Spletni streˇznik za aplikacijo STKP omogoˇca povezavo med podatki na ura- dni strani STKP s podatki, ki jih ima posamezna odjemalska aplikacija.
Streˇznik podatke izpostavi preko aplikacijskega vmesnika REST, tako da je preko protokola HTTP dostopen odjemalskim aplikacijam, da ga uporabljajo za pridobivanje podatkov. Streˇznik je razvit z uporabo Node.js in je sesta- vljen iz dveh glavnih komponent, ki bodo obravnavane podrobneje:
• Node.js spletni streˇznik, ki se nahaja v datoteki index.js in skrbi za obdelovanje API klicev ter tedensko poganja spletnega pajka.
• Cheerio spletni pajek, ki se nahaja v datoteki scrape.js in obiˇsˇce uradno spletno stran STKP ter po potrebi posodobi podatke, ki so na voljo za prenos v direktorijudownloads.
Poleg naˇstetih komponent so del serverja tudi sledeˇce datoteke:
• package.json, kjer se nahajajo metapodatki aplikacije in uporabljene odvisnosti.
• package-lock.json, kjer se nahajajo vse podrobnosti o odvisnostih v projektu.
• Procfile, kjer se nahajajo ukazi, ki jih bo aplikacija izvedla ob zagonu.
Ta datoteka je ustvarjena za potrebe gostovanja na spletni platformi Heroku.
• Dockerfile, kjer se nahajajo vsi ukazi, ki so potrebni za ustvarja- nje slike vsebnika Docker. Tako se izognemo tipkanju ukazov v Docker ukazno vrstico in avtomatiziramo proces izgradnje ter poganjanja vseb- nikov.
• .dockerignore, kjer se nahajajo datoteke in direktoriji, ki jih ˇzelimo izkljuˇciti iz vsebnika Docker.
Diplomska naloga 7
• .gitignore, kjer se nahajajo datoteke in direktoriji, ki jih ˇzelimo iz- kljuˇciti iz sistemaGit za nadzor nad verzijami.
2.2.1 index.js
Datoteka index.jsvsebuje programsko logiko, ki je srce spletnega streˇznika za aplikacijo STKP. Uporaba ogrodja Express nam v le nekaj vrsticah kode (Slika 2.1) omogoˇca zagon streˇznika, ki posluˇsa na vratih 5000.
1 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 ’) ; 2 c o n s t app = e x p r e s s () ;
3 let p o r t = 5 0 0 0 ; 4
5 app . l i s t e n ( port , () = > {
6 c o n s o l e . log ( ‘ S T K P b a c k e n d l i s t e n i n g on p o r t ${ p o r t }! ‘) ; 7 }) ;
Slika 2.1: Zagon spletnega streˇznika z uporabo ogrodja Express
V tej datoteki so definirane tudi dostopne toˇcke REST aplikacijskega vme- snika, ki uporabnikom omogoˇca dostop do podatkov preko protokola HTTP.
Primer obravnave GET zahtevka na streˇznik je predstavljen na sliki 2.2, ki prikazuje kako streˇznik obdela zahtevo po prenosu datotek, ki jih je generiral spletni pajek. Server na GET HTTP zahteve odgovarja v formatu json, v primeru prenosa datotek pa je ta format application/zip. Moˇzne GET zahteve in odgovori streˇznika so sledeˇci:
• /download, prenos ZIP direktorija z datotekami, ki jih je generiral spletni pajek.
• /get-latest-date, odgovor je niz, ki predstavlja datum najnovejˇsih datotek na streˇzniku v formatu DD-MM-YYYY.
8 Jan Krivec
• /get-latest-date-number, odgovor je ˇstevilka, ki predstavlja datum najnovejˇsih datotek na streˇzniku v formatu YYYYMMDD in omogoˇca laˇzjo primerjavo datumov.
• /update, roˇcni zagon spletnega pajka.
1 c o n s t p a t h = r e q u i r e (’ p a t h ’) ;
2 c o n s t s c r a p e r = r e q u i r e (" ./ s c r a p e ") ; 3
4 app . get (’ / d o w n l o a d ’, ( req , res ) = > { 5 // C r e a t e a b s o l u t e f i l e p a t h
6 let 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 ") ;
7 c o n s t f i l e P a t h = p a t h . 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 ) ;
8 // C h e c k if f i l e e x i s t s
9 if ( fs . e x i s t s S y n c ( f i l e P a t h ) ) {
10 res . w r i t e H e a d (200 , {
11 " Content - T y p e ": " a p p l i c a t i o n / zip ",
12 " 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 } ‘
13 }) ;
14 // S e n d f i l e as r e s p o n s e
15 fs . 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 ( res ) ;
16 } e l s e {
17 // S e n d 404 if the f i l e d o e s n ’ t e x i s t
18 res . s t a t u s ( 4 0 4 ) . end (" D a t o t e k a ne o b s t a j a ") ;
19 }
20 }) ;
Slika 2.2: Obravnava GET HTTP zahteve za prenos ZIP direktorija z dato- tekami
Diplomska naloga 9 Potrebno je predstaviti le ˇse izsek kode, ki tedensko zaganja spletnega pajka. Streˇznik uporablja sistemCRON, ki omogoˇca avtomatizacijo zaganjanja skript, ˇcas zagona pa doloˇcimo s pet mestnim zaporedjem znakov, npr. * *
* * *. Znaki po vrsti od leve proti desni predstavljajo minuto, uro, dan v mesecu, mesec in dan v tednu. Znak*pomeni “vsak”, torej znak*na prvem mestu pomeni zagon skripte vsako minuto, medtem ko ˇstevilke v zaporedju predstavljajo specifiˇcno vrednost, npr. 11 na drugem mestu pomeni zagon ob 11 uri.
1 c o n s t c r o n = r e q u i r e (’ node - c r o n ’) ; 2 c o n s t s c r a p e r = r e q u i r e (" ./ s c r a p e ") ; 3
4 c r o n . s c h e d u l e (’ 0 0 * * 0 ’, f u n c t i o n () {
5 s c r a p e r . c h e c k F o r D a t e (f u n c t i o n ( success , e r r o r ) {
6 if ( s u c c e s s ) {
7 c o n s o l e . log (" S u c c e s s ") ;
8 } e l s e {
9 c o n s o l e . log ( e r r o r ) ;
10 }
11 }) ;
12 }) ;
Slika 2.3: Doloˇcitev intervala avtomatskega zagona spletnega pajka s CRON Slika 2.3 prikazuje uporabo CRON-a za periodiˇcni zagon spletnega pajka.
V tem primeru se bo vsako nedeljo ob polnoˇci zagnala funkcija checkForDatespletnega pajka, ki se nahaja v datoteki scrape.js
10 Jan Krivec
2.3 Spletni pajek
Spletni pajek je program, ki obiˇsˇce spletne strani z namenom ekstrakcije ˇzeljenih podatkov. Gre za avtomatiziran naˇcin pridobivanja podatkov, ki podatke bere iz HTML dokumenta ˇzeljenih spletnih strani in jih nato obdela ali pa shrani v obliki primerni za kasnejˇso obdelavo. Spletni pajki se upora- bljajo za ˇstevilne namene, od indeksiranja spletnih strani za spletne iskalnike (npr. Google), do avtomatskih funkcionalnih testov spletnih strani za po- trebe razvijalcev ter konec koncev tudi do pridobivanja telefonskih ˇstevilk in e-poˇstnih naslovov v zlonamerne namene.
2.3.1 Primerjava razliˇ cnih vrst spletnih pajkov
Poznamo veˇc vrst spletnih pajkov, loˇcimo pa jih glede na naˇcin, ki je upo- rabljen za ekstrakcijo podatkov. Nekateri berejo zgolj osnovni HTML do- kument, drugi omogoˇcajo nadzor nad spletnim brskalnikom in tako dostop do dinamiˇcno generirane vsebine z izvajanjem JavaScripta na strani odje- malca. Izbira je odvisna od funkcije programske opreme, ki implementira pajka, ker za pridobivanje podatkov velikokrat ne potrebujemo celostnega spletnega brskalnika, oziroma ga zaradi sistemskih omejitev ne moremo upo- rabiti. Hkrati imajo razliˇcne vrste spletnih pajkov tudi razliˇcne hitrosti:
Pridobivanje HTML dokumenta preko HTTP zahtevka in ekstrakcija podat- kov z regularnim izrazom je veliko hitrejˇsa, kot na primer zagon spletega brskalnika in izvajanje celotne spletne strani z vsemi dodatnimi funkcional- nosti.
Iskanje vzorcev v besedilu
Iskanje vzorcev v besedilu je ena izmed najpreprostejˇsih oblik ekstrakcije po- datkov s spleta. S HTTP zahtevkom pridobimo osnovni HTML dokument in ga shranimo kot niz, nato pa podatke pridobimo s pomoˇcjo funkcij za obdelavo nizov. Kljub temu, da gre za najhitrejˇso obliko pridobivanja po-
Diplomska naloga 11 datkov s spleta, je glavna prednost takˇsnega naˇcina moˇznost uporabe poljub- nega programskega jezika ali celo osnovnih funkcij ukazne lupine (npr. ukaza grepv sistemih Linux in njegov ekvivalent findstrv sistemih Windows, ki omogoˇcata iskanje teksta z regularnimi izrazi), kar omogoˇca preprosto inte- gracijo v ˇze obstojeˇco kodo, ker ne potrebujemo dodatnih knjiˇznic. Tak naˇcin iskanja podatkov pa ima seveda tudi svoje omejitve, ker pisanje regularnih iz- razov za pridobivanje veˇcjega ˇstevila podatkov po razliˇcnih hierarhijah hitro postane zelo zapleteno.
Razˇclenjevanje dokumenta HTML
Razˇclenjevanje (Angl. parsing) dokumenta HTML reˇsuje problem iskanja veˇcjega ˇstevila podatkov po razliˇcnih hierarhijah, tako da dokument HTML razˇclenimo in zgradimo objektni model dokumenta (Angl. Document Object Model) in nato na razliˇcne naˇcine pridobivamo podatke iz zgrajenega podat- kovnega drevesa. Obstaja veliko razliˇcnih knjiˇznic za veliko ˇstevilo razliˇcnih programskih jezikov, ki omogoˇcajo tak naˇcin pridobivanja podatkov s spleta:
Jsoup za Javo, Beautiful Soup za Python, AngleSharp za C# itd. Java- Script omogoˇca izgradnjo objektnega modela dokumenta brez knjiˇznic, ven- dar nam knjiˇznice kot so jQuery in Cheerio omogoˇcajo laˇzje iskanje. Vse naˇstete knjiˇznice delujejo na podoben naˇcin: S HTTP zahtevkom pridobimo dokument HTML in ga knjiˇznici podamo kot vhodni parameter. Zgradi se objekt, ki nam preko ˇstevilnih metod omogoˇca dostop do podatkov. Veˇcina knjiˇznic omogoˇca iskanje glede na ID elementa, HTML znaˇck, CSS selektorjev itd., ter v primeru veˇcih najdenih elementov z isto lastnostjo tudi izgradnjo tabele, ki jo lahko nato v zanki obdelamo in pridobimo vse podatke.
Avtomatizacija brskalnikov
Nekatere strani za prikazovanje podatkov in dostop do le-teh potrebujejo iz- vajanje JavaScripta na strani odjemalca, ˇcesar pa ne moremo doseˇci zgolj z nalaganjem osnovnega dokumenta HTML. WebDriver je ogrodje, ki upravlja pravi spletni brskalnik, tako kot bi ga uporabljal ˇclovek in hkrati omogoˇca
12 Jan Krivec dostop do podatkov na spletni strani, ker pa se za navigacijo po spletu upo- rablja brskalnik, je tak naˇcin pridobivanja podatkov najbolj poˇcasen in se ga zato izogibamo, ˇce ni zares potreben. Obstajajo implementacije za razliˇcne brskalnike in programske jezike, ki doloˇcajo programski vmesnik za upra- vljanje brskalnika in pridobivanje podatkov, med katerimi sta najbolj znana odprtokodna projekta Selenium[8] in Pupeteer[5]. Selenium ponuja WebDri- ver, ki komunicira z brskalnikom preko W3C WebDriver protokola[11] in nudi podporo za veˇcje ˇstevilo brskalnikov (ChromeDriver za Chromium brskalnike, GeckoDriver za FireFox brskalnike, SafariDriver za Safari brskalnike itd.) in tudi za ˇstevilne programske jezike (Java, Python, C#, Ruby, JavaScript, Kotlin), medtem ko je Pupeteer knjiˇznica za jezik Node.js in upravlja zgolj brskalnik Chrome oz. Chromium preko DevTools protokola brskalnika. Ker nekateri sistemi nimajo grafiˇcnega uporabniˇskega vmesnika, nam WebDri- ver omogoˇca, da brskalnike poganjamo v “headless” naˇcinu, kar pomeni, da se spletni brskalnik izvaja v ozadju in brez uporabniˇskega vmesnika. Kljub mnoˇziˇcni uporabi za pridobivanje podatkov s spleta, pa je glavni namen teh projektov avtomatizacija testiranja spletnih strani, kar razvijalcem omogoˇca hiter in varen razvoj spletnih aplikacij, tako da omogoˇcajo hiter pregled nad pravilnim delovanjem komponent sistema.
Izbira naˇcina pridobivanja podatkov za aplikacijo STKP
Namen spletnega pajka za aplikacijo STKP je pridobivanje podatkov iz ura- dne spletne strani STKP in generiranje datotek, ki jih bo aplikacija lahko uporabila. Spletni pajek bo preveril, ˇce je priˇslo do posodobitve podatkov na spletni strani in nato pridobil podatke iz seznama etap, obiskal posamezno etapo in prenesel najnovejˇse GPX datoteke, ˇce so le te na voljo. Pridobljene podatke bo nato zapisal v json datoteko, ki hrani podatke o etapah in po- samezno etapo povezuje z njeno GPX datoteko. Enako bo storil tudi za kontrolne toˇcke, ki obstajajo na poti. Vse skupaj bo zdruˇzil v direktorij tipa ZIP, ki bo na spletnem streˇzniku na voljo za prenos.
Ker lahko vse podatke spletne strani STKP najdemo ˇze v osnovnem HTML
Diplomska naloga 13 dokumentu, je pajek implementiran z ogrodjem Cheerio, ki omogoˇca ekstrak- cijo podatkov brez uporabe spletnega brskalnika in potrebnih gonilnikov.
Tako je spletni pajek del streˇznika in je v celoti implementiran v datoteki scrape.js.
2.3.2 scrape.js
Datoteka vsebuje spletnega pajka, ki tedensko obiskuje spletno stran STKP.
Za delovanje uporablja knjiˇznico Axios, ki poenostavi kodo za izvajanje HTTP klicev in razˇsirjuje domorodni Node.js http modul. Poleg Axios je uporabljena ˇse knjiˇznica adm-zip, ki implementira ZIP kompresijo v jeziku JavaScript in tako znatno olajˇsa delo z direktoriji tipa ZIP.
Spletni pajek je razdeljen v sledeˇce metode:
• checkForDate je metoda, ki se pokliˇce ob zagonu pajka. S knjiˇznico Axios se izvede klic na spletno stran STKP, ki vsebuje podatke o etapah. Ko prispe odgovor, uporabimo Cheerio in v spremenljivko naloˇzimo HTML dokument. Nato pokliˇcemo funkcijogetWebsiteDate in se na podlagi vrnjenega datuma odloˇcimo, ˇce bomo zbiranje podat- kov nadaljevali in posodabljali podatke na streˇzniku.
• updateFilesje metoda, ki se pokliˇce, ko je treba posodobiti podatke na streˇzniku. Sprehodimo se ˇcez seznam etap in obiˇsˇcemo vsako etapo po- sebej, kjer ekstrahiramo povezavo do GPX datoteke s funkcijo visitEtapaAndGetLinkin jih prenesemo s funkcijodownloadFile. Ko imamo vse datoteke s funckcijodownloadZipustvarimo ZIP direktorij za prenos.
• getWebsiteDate je metoda, ki preveri datum zadnje posodobitve da- totek na streˇzniku. Uporabi se knjiˇznica Cheerio, ki omogoˇca, da poiˇsˇcemo tekst z datumom, nato pa z regularnim izrazom izluˇsˇcimo zgolj datum kot prikazuje slika 2.4. Znak$, ki se pojavi v tem odseku kode, je objektni model HTML dokumenta spletne strani, ki je kot parmeter podan v funkcijo.
14 Jan Krivec
1 c o n s t a l l P = $(’ h3 ~ p ’) ;
2 c o n s t f i r s t P = a l l P [ 0 ] . c h i l d r e n [ 0 ] . d a t a ;
3 let s t k p D a t e = f i r s t P . r e p l a c e ( / \ ( n o v a v e r z i j a GPX d a t o t e k |\) / gi , " ") ;
Slika 2.4: Pridobivanje datuma s Cheerio
• getEtapemetoda se sprehodi ˇcez tabelo s podatki o etapah na spletni strani STKP in kot rezultat vrne tabelo s potrebnimi polji. Slika 2.5 prikazuje pridobivanje tabele elementov s pomoˇcjo CSS izbirnika in nato pregledovanje table, ekstrahiranje podatkov iz vrstic in gradnjo tabele “etape”, ki vsebuje podatke, ki jih ˇzelimo shraniti.
1 c o n s t e t a p e = [];
2 c o n s t e t a p e T a b l e = $(’ # posts - table -1 > t b o d y > tr ’) ; 3 // l o o p o v e r e a c h t a b l e row
4 e t a p e T a b l e . e a c h (( ix , i t e m ) = > { 5 // get all td f i e l d s
6 c o n s t f i e l d s = $( i t e m ) . f i n d (’ td ’) ; 7
8 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 () ; 9 c o n s t h r e f = $( f i e l d s [ 0 ] ) . f i n d (’ a ’) . a t t r (’ h r e f ’) ; 10 c o n s t c o n t e n t = $( f i e l d s [ 1 ] ) . t e x t () ;
11 c o n s t c a t e g o r y = $( f i e l d s [ 2 ] ) . t e x t () ; 12 c o n s t f i l e n a m e = ‘ E t a p a _${ ix + 1}. gpx ‘ 13
14 // p u s h o b j e c t i n t o e t a p e a r r a y
15 e t a p e . p u s h ({ n a m e : naslov , h r e f : href , d e s c : content , c a t e g o r y : c a t e g o r y , f i l e : f i l e n a m e }) ;
16 }) ;
Slika 2.5: Kreiranje tabele podatkov o etapah iz tabele na spletni strani STKP
Diplomska naloga 15
• getKontrolneTockeJson deluje zelo podobno kot metoda getEtape, vendar prebere podatke o kontrolnih toˇckah in kot rezultat ˇze zapiˇse samostojno json datoteko.
• downloadZip metoda vse datoteke v direktoriju downloads zapakira v ZIP direktorij s pomoˇcjo knjiˇznice adm-zip kot je prikazano na sliki 2.6.
1 let zip = new a d m Z i p () ; 2
3 c o n s t d o w n l o a d s = fs . r e a d d i r S y n c ( d l _ l o c a t i o n ) ; 4 for (let i = 0; i < d o w n l o a d s . l e n g t h ; i ++) { 5 zip . a d d L o c a l F i l e ( d l _ l o c a t i o n + d o w n l o a d s [ i ]) ; 6 }
7
8 zip . w r i t e Z i p ( d l _ l o c a t i o n + " Z I P _ " + d a t e + " . zip ") ;
Slika 2.6: Kreiranje ZIP direktorija s pomoˇcjo knjiˇznice adm-zip
• emptyDownloadsizbriˇse vsebino direktorija/downloads, vendar izpusti GPX datoteko, ki vsebuje lokacijske podatke o kontrolnih toˇckah, ker ta datoteka ni veˇc dostopna na spletni strani.
• zipExists preveri, ˇce ˇze obstaja ZIP direktorij z vsemi datotekami.
• getZipDate vrne datum ZIP direktorija v formatu YYYYMMDD kot ˇstevilko, ˇce direktorij obstaja.
• visitEtapaAndGetLinkz Axios izvede GET HTTP zahteva na spletno stran posamezne etape, in nato s Cheerio pridobi link do prenosa GPX datoteke za etapo.
• downloadFileprenese GPX datoteko etape preko linka podanega kot vhodni parameter in jo shrani v direktorijdownloads.
16 Jan Krivec
• getFullFilename vrne ime celotne datoteke v direktoriju downloads, ki se zaˇcne z nizom, ki je podan kot parameter. Funkcija se uporablja za doloˇcanje tipa datoteke, ko imamo na voljo zgolj ime.
Poglavje 3
Android aplikacija STKP
Mobilne naprave so nedvoumno postale del ˇcloveˇskega vsakdana, upora- bljamo jih za komunikacijo, navigacijo, iskanje informacij po spletu, za delo in preganjanje dolgˇcasa. Prednost mobilnih naprav pred ostalimi osebnimi elektronskimi napravami je njihova prenosljivost in zmoˇznost zaznavanja upo- rabnikovega okolja, kar moˇcno poveˇca spekter moˇzne uporabe. Obstaja veˇc tipov mobilnih aplikacij, do nekaterih dostopamo preko spletnega brskalnika in so prilagojene veˇcjemu ˇstevilu mobilnih naprav ter mobilnih operacijskih sistemov, druge pa so “domorodne” mobilni platformi (iOS, Android, Win- dows phone, etc.) in prinaˇsajo veˇcjo zmogljivost in boljˇso odzivnost upo- rabniˇskega vmesnika, hkrati pa omogoˇcajo tudi dostop do domorodnih funk- cij mobilnega sistema in uporabe razliˇcnih senzorjev. Obstajajo tudi hibridne mobilne aplikacije, ki jih lahko namestimo, vendar pa se kljub temu izvajajo preko spletnega brskalnika. V tem poglavju bo obravnavan razvoj domoro- dne Android mobilne aplikacije STKP za mobilni operacijski sistem Android v programskem jeziku Java in povzet namen ter delo razliˇcnih komponent aplikacije.
17
18 Jan Krivec
3.1 Uporabljene tehnologije
3.1.1 Android
Android je odprtokodni mobilni operacijski sistem, ki temelji na spremenje- nem Linux jedru in je primarno namenjen prenosljivim elektronskim napra- vam z zaslonom na dotik. Android, predstavljen leta 2007 in dostopen za komercialno uporabo leta 2008, je trenutno najbolj uporabljen mobilni ope- racijski sistem, ki ga meseˇcno uporablja veˇc kot 3 miljarde ljudi po celem svetu. Velika skupnost uporabnikov in razliˇcnih naprav pa pomeni tudi ve- liko izjem in potrebo po razvoju kompatibilne programske opreme, ˇce ˇzelimo doseˇci ˇcim veˇcjo ciljno publiko. Ker se Android nenehno razvija, je potrebno pozornost nameniti tudi spremembam med verzijami in zopet podpirati kar ˇcimveˇcje ˇstevilo naprav. Android je znan pod imenom AOSP (Android Open Source Project), odprtokodnim projektom, ki se distribuira pod Apache li- cenco. Seveda pa Android danes ne bi bil to, kar je, ˇce ga ne bi podpiralo podjetje Google, ki je eno izmed glavnih gonil projekta. Google sistemu An- droid dodaja tudi svoj ekosistem, ki ponuja dodatne osnovne aplikacije in storitve, kot so spletni brskalnik Google Chrome, navigacijo Google Maps, Gmail, Google Play in Google Play Store, ki distribuira skoraj 3 milijone aplikacij [3]. Prav tako veˇcino proizvajalcev mobilnih telefonov v sistem An- droid doda ˇse svojo programsko opremo, ki omogoˇca dodatne funkcionalnosti in prilagaja sistem posamezni napravi. Android razviljalcem ponuja bogat programski aplikacijski vmesnik, ki omogoˇca dostop do strojne opreme mo- bilne naprave in s tem omogoˇca razvoj mobilnih aplikacij, ki izkoriˇsˇcajo vse posebnosti mobilne naprave.
Diplomska naloga 19
3.1.2 Java
Java je objektno usmerjen programski jezik namenjen za sploˇsno uporabo in je ˇze dolga leta izbira ˇstevilnih velikih projektov. Velika prednost Jave je neodvisnost od platforme, kar pomeni, da se lahko prevedena Java koda izvaja na katerikoli napravi, ki ima Java navidezni stroj (JVM). To omogoˇca Javanski prevajalnik, ki namesto da izvorno kodo prevede v nabor ukazov za trenutno arhitekturo sistema, izvorno kodo prevede v Java “bytecode”, ki predstavlja nabor ukazov za JVM. Java temelji na sistemu razredov, kjer vsak razred predstavlja predlogo za objekt, oz. z drugimi besedami, vsak objekt je instanca nekega razreda. Vsak razred ima lahko svoje atribute, metode in nadrejene razrede. Vedno bolj popularen za razvoj Android aplikacij po- staja jezik Kotlin, ki ima kompaktnejˇso sintakso in reˇsuje nekaj zloglasnih Javanskih napak kot je na primer Null pointer exception. Kljub temu, da Kotlin omogoˇca kompaktnejˇso in morda bolj robustno kodo, pa je projekt ostal v Javi zaradi ˇsirˇsega poznavnja Jave, v primeru kasnejˇsega vzdrˇzevanja projekta.
3.1.3 XML
XML (Extensible Markup Language) je oznaˇcevalni jezik, ki nima preddefini- ranih znaˇck, kot jih ima na primer oznaˇcevalni jezik HTML. To omogoˇca, da programer doloˇca znaˇcke po potrebi in jim pripiˇse svoj pomen, kar omogoˇca shranjevanje podatkov v formatu, ki omogoˇca preprosto iskanje in zaradi standardzidacije omogoˇca deljenje podatkov preko razliˇcnih platform. An- droid uporablja XML za preprosto naˇcrtovanje vizualnih elementov aktivno- sti in fragmentov ter v datotekiAndroidManifest.xml za deklaracijo aktiv- nosti, specifiˇcnih lastnosti aplikacije in potrebnih dovoljenj. Aplikacija STKP uporablja format XML tudi za prikazovanje zaˇcrtanih kolesarskih etap, saj so GPX datoteke zgolj razˇsiritev omenjenega formata.
20 Jan Krivec
3.1.4 Android Studio
Android studio (prikazan na sliki 3.1) je uradno razvojno okolje za operacij- ski sistem Android in je zgrajeno na osnovi IntelliJ IDEA razvojnega okolja za jezik Java. Omogoˇca avtomatsko gradnjo aplikacij z Gradle, samodejno zaznavanje napak in predloge popravkov, dopolnjevanje kode, dokumentacijo Android API-ja, nadzor nad odvisnostmi in njihovimi verzijami, vizualni ure- jevalnik uporabniˇskega vmesnika, virtualno mobilno napravo za poganjanje aplikacije med razvojem in ˇse bi lahko naˇstevali.
Slika 3.1: Osnovni pogled razvojnega okolja Android studio
3.2 Uporabniˇ ski vmesnik
Ker je cilj aplikacije STKP preprostost uporabe in tudi prijeten uporabniˇski vmesnik, je bila pri razvoju namenjena pozornost izbiri slik in ikon. Vse slike so preneˇsene s spletne strani Unsplash [9], ki omogoˇca prosto uporabo vseh preneˇsenih slik [10]. V aplikaciji so uporabljene tudi ikone s spletnega mesta Font Awesome [1], ki prav tako omogoˇca prosto uporabo vseh ikon [2].
Slike in ikone so uporabljene loˇceno, ali pa so za ˇzeljeni izgled zdruˇzene in
Diplomska naloga 21 preurejene s programom Photoshop. Uporabniˇski vmesnik je minimalistiˇcen z velikimi ikonami in gumbi, da je uporaba na kolesu ali s kolesarskimi ro- kavicami ˇcim laˇzja, zaradi manjˇse porabe energije pa je bila izbrana temna tematika za celotno aplikacijo. Vsa uporabljena besedila v aplikaciji se na- hajajo v datoteki strings.xml, kar omogoˇca nadzor nad vsemi besedili na enem mestu, sam uporabniˇski vmesnik pa je implementiran v XML datotekah znotraj direktorija /res/layout. Vsaka datoteka je povezana z enim Java razredom, ki se imenuje Aktivnost. Aktivnost doloˇca programsko logiko, ki se izvaja za posamezno komponento uporabniˇskega vmesnika.
3.3 Zaˇ cetni zaslon
Zaˇcetni zaslon (prikazan na sliki 3.3) je vstopna toˇcka aplikacije in ima zgolj eno funkcionalnost - pregled ostalih funkcionalnosti in navigacija po le-teh.
Zaˇcetni zaslon omogoˇca navigacijo na naslednje funkcionalnosti:
• Seznam etap, ki omogoˇca pregled vseh etap Slovenske Turnokolesarske poti.
• Zemljevid, kjer so prikazane vse etape in kontrolne toˇcke.
• Nastavitve za nadzor nad shranjenimi stranmi in posodobitvami po- datkov.
• Spletna stran, ki odpre uradno spletno stran STKP v WebView kom- ponenti.
Uporabniˇski vmesnik zaˇcetnega zaslona je definiran v datoteki activity main.xml in uporablja pogled ScrollView, ki omogoˇca drsenje po vseh elementih, ˇce so le ti preveliki za uporabnikov zaslon. Postavi- tev je doseˇzena z LinearLayout, sami elementi pa so organizirani znotraj RelativeLayout, ki vsebuje grafiko z uporabo ImageView in TextView, ki vsebuje ime funkcionalnosti, ki se odpre ob kliku na dani element.
22 Jan Krivec Logika zaˇcetnega zaslona se nahaja v datoteki MainActivity.java. Ak- tivnost implementira Android metodoonCreate, ki se poˇzene ob zagonu ak- tivnosti. V tej metodi se definira dogodke, ki se zgodijo ob klikih na gumbe na uporabniˇskem vmesniku.
1 // F i n d an I m a g e V i e w and a t t a c h an O n C l i c k L i s t e n e r
2 I m a g e V i e w s e z n a m E t a p = f i n d V i e w B y I d ( R . id . e t a p e I m a g e V i e w ) ; 3 s e z n a m E t a p . s e t O n C l i c k L i s t e n e r (new V i e w . O n C l i c k L i s t e n e r () { 4 @ O v e r r i d e
5 p u b l i c v o i d o n C l i c k ( V i e w v i e w ) {
6 // S i m u l a t e b u t t o n c l i c k w i t h A l p h a A n i m a t i o n 7 s i m u l a t e B u t t o n C l i c k ( v i e w ) ;
8 // C r e a t e an i n t e n t
9 I n t e n t i n t e n t = new I n t e n t ( v i e w . g e t C o n t e x t () , S c r o l l i n g A c t i v i t y .c l a s s) ;
10 d r a w I n t e r n a l = c h e c k I f F i l e s P r e s e n t I n t e r n a l () ; 11 // A t t a c h e x t r a d a t a for the new a c t i v i t y 12 i n t e n t . p u t E x t r a (" d r a w I n t e r n a l ", d r a w I n t e r n a l ) ; 13 v i e w . g e t C o n t e x t () . s t a r t A c t i v i t y ( i n t e n t ) ;
14 }
15 }) ;
Slika 3.2: Doloˇcanje dogodkov ob kliku na element Seznam etap
Predstavljen odsek kode na sliki 3.2 doloˇcionClickListener, ki posluˇsa za klik na elementu z id “etapeImageView”, ki smo ga doloˇcili v datoteki activity main.xml. Ob zaznanem kliku se izvede metodasimulateButtonClick, ki s pomoˇcjo razredaAlphaAnimationanimira gumb in tako uporabniku vrne povratno informacijo, nato pa za premik na funkcionalnost s seznamom etap
uporabi razredIntent. Pred preskokom se z metodocheckIfFilesPresentInternal preveri ˇse, ˇce bomo uporabljali novejˇse datoteke, ki smo jih naknadno prenesli
s spletnega streˇznika ali pa bomo uporabljali datoteke v direktoriju assets, ki so prisotne ob prvotni namestitvi aplikacije.
Dostop do ostalih funkcionalnosti je implementiran na zelo podoben naˇcin,
Diplomska naloga 23 torej z uporabo razreda Intent, kjer podamo ˇzeljeno aktivnost in dodatne podatke z uporabo metode putExtra. Ko ˇzelimo izvesti menjavo aktivnosti, pokliˇcemo metodo startActivity.
Slika 3.3: Zaˇcetni zaslon
3.4 Seznam etap
Seznam etap omogoˇca pregled vseh kolesarskih etap Slovenske Turnokolesar- ske poti v preglednem drsnem seznamu, kjer je vsaka etapa predstavljena z master-detail vzorcem. To pomeni, da so elementi seznama predstavljeni zgolj z imenom etape (master), ob kliku na doloˇceni element pa se odpre bolj podroben pregled etape (detail), ki vsebuje kratek opis poti, ki je enak opisu z uradne spletne strani in dva gumba: Prvi odpre zemljevid in nanj
24 Jan Krivec izriˇse GPX datoteko etape, drugi pa v posebni komponenti WebView odpre povezavo do etape na uradni spletni strani STKP in omogoˇca shranjevanje celotne spletne strani na mobilno napravo za ogled brez povezave. Izgled seznama je prikazan na sliki 3.5.
3.4.1 Prikazovanje seznama
Seznam etap sestavlja pogled definiran v datotekiactivity scrolling.xml, ki zgolj uporabi element RecyclerView, ki mu nato programsko doloˇcimo seznam in ˇzeljeno funkcionalnost v pripadajoˇci aktivnosti, implementirani v datoteki ScrollingActivity.java. Seznam je implementiran z uporabo razredaRecyclerView, katerega prednost je boljˇsa uˇcinkovitost in odzivnost v primerjavi z razredom ListView. Izkoriˇsˇca lastnost dolgih seznamov, kjer veˇcina elementov ni vidna in zato “reciklira” uporabljene elemente in zgolj menja podatke v ˇze obstojeˇcih elementih. Seznam za delovanje potrebuje veˇc komponent:
• Definiran pogled za vsak element v seznamu, ki se nahaja v datoteki etapa.xml.
• Razred Etapa, ki predstavlja podatke za vsak element in definira atri- bute ter metode.
• Adapter implementiran v datoteki EtapaRecyclerViewAdapter, ki poveˇze podatke v aplikaciji z ViewHolder razredom, ki skrbi za prika- zovanje pogledov elementov.
• ViewHolder, ki predstavlja element v seznamu. Vsebuje pogled in doloˇca delovanje in obravnava dogodke povezane s posameznim elemen- tom v seznamu. V aplikaciji je to razredEtapaHolder, ki razˇsirjuje raz- dred ViewHolder in je implementiran v datoteki EtapaRecyclerViewAdapter.
Ko uporabnik navigira na seznam etap, se aktivnost zaˇzene s pomoˇcjo ra- zreda Intent in v aktivnost poˇslje podatek o prisotnosti novejˇsih datotek,
Diplomska naloga 25 da lahko izberemo najnovejˇso json datoteko s podatki o etapah. Kot prika- zuje slika 3.4, v aktivnosti nato odpremo datoteko etape.json, in podatke preko razreda InputStream naloˇzimo v objekt tipa JSONArray, ki omogoˇca preprosto pridobivanje podatkov zapisanih v json formatu. Sprehodimo se ˇcez vse elemente v JSONArrayobjektu in sproti gradimo ArrayList etap, ki vsebuje objekte razredaEtapa.
1 S t r i n g j s o n = n u l l;
2 t h i s. e t a p e L i s t = new A r r a y L i s t < Etapa >() ;
3 // D e c i d e w h i c h f i l e to o p e n in c a s e of n e w e r f i l e s 4 I n p u t S t r e a m i n p u t S t r e a m ;
5 if ( d r a w I n t e r n a l ) {
6 i n p u t S t r e a m = new F i l e I n p u t S t r e a m ( d o w n l o a d s P a t h + F i l e . s e p a r a t o r + " e t a p e . j s o n ") ;
7 } e l s e {
8 i n p u t S t r e a m = g e t A s s e t s () . o p e n (" e t a p e . j s o n ") ; 9 }
10 int s i z e = i n p u t S t r e a m . a v a i l a b l e () ;
11 // C r e a t e a b u f f e r and r e a d the i n p u t S t r e a m i n t o it 12 b y t e [] b u f f e r = new b y t e [ s i z e ];
13 i n p u t S t r e a m . r e a d ( b u f f e r ) ; 14 i n p u t S t r e a m . c l o s e () ;
15 // C r e a t e J S O N A r r a y f r o m b u f f e r 16 j s o n = new S t r i n g ( buffer , " UTF -8 ") ; 17 J S O N A r r a y j s o n A r r = new J S O N A r r a y ( j s o n ) ;
18 // L o o p o v e r j s o n a r r a y and f i l l a r r a y l i s t w i t h d a t a 19 for ( int i = 0; i < j s o n A r r . l e n g t h () ; i ++) {
20 J S O N O b j e c t j s o n E l = j s o n A r r . g e t J S O N O b j e c t ( i ) ;
21 E t a p a e t a p a = new E t a p a ( j s o n E l . g e t S t r i n g (" n a m e ") , j s o n E l . g e t S t r i n g (" d e s c ") , j s o n E l . g e t S t r i n g (" h r e f ") , j s o n E l . g e t S t r i n g (" c a t e g o r y ") , j s o n E l . g e t S t r i n g (" f i l e ") ) ; 22 t h i s. e t a p e L i s t . add ( e t a p a ) ;
23 }
Slika 3.4: Grajenje seznama iz datoteke etape.json
26 Jan Krivec
(a) Osnovni seznam (b) Seznam po kliku na element
Slika 3.5: Master-detail vzorec v seznamu etap
Ko je grajenje arraylista konˇcano, inicializiramo adapter EtapaRecyclerViewAdapter in vanj poˇsljemo omenjeni arraylist. Adapter nato doloˇci objekte razreda ViewHolder kot elemente seznama, ki doloˇcajo delovanje posameznega elementa v komponenti RecyclerView.
Diplomska naloga 27
3.4.2 Zemljevid za izbrano etapo
Ena izmed funkcionalnosti, ki jih omogoˇca seznam, je izris posamezne etape na interaktivnem zemljevidu. Ta funkcionalnost je doseˇzena tako, da se z ra- zredomIntentzaˇzene aktivnost za zemljevid in kot dodatni parameter poda ime etape. Funkcionalnost zemljevida in risanja etap je podrobno predsta- vljena v poglavju 3.4.3
3.4.3 Komponenta WebView
Pomemben del seznama etap je tudi komponenta WebView (prikazana na sliki 3.8), ki lahko prikazuje podatke posamezne etape. Njen namen je pri- kazovanje etape na uradni spletni strani STKP znotraj aplikacije. Tako si uporabnik lahko pogleda podroben opis poti, slike, opozorila in komentarje na spletni strani brez, da bi zapuˇsˇcal aplikacijo. Android nam ponuja opcijo, da spletno stran odpremo v spletnem brskalniku, ki ga uporabnik preferira, vendar nam razredWebView, ki ga uporablja komponenta, omogoˇca preprosto implementacijo (slika 3.6) klienta, ki omogoˇca navigacijo po spletu znotraj aplikacije. Razred omogoˇca dodajanje posebnih funkcionalnosti in nadzor nad uporabniˇskim vmesnikom, kar nam pri razvoju omogoˇca veˇc svobode kot tradicionalni spletni brskalnik. Ker na odroˇcnih delih etap pogosto ni podatkovne povezave, je v aplikacijo dodana moˇznost preprostega shranjeva- nja celotne spletne strani na telefon, kar omogoˇca ogled tudi brez povezave.
Aplikacija sama zazna, ˇce je spletna stran shranjena in jo v primeru obiska tudi samodejo naloˇzi, tako da uporabnik ne brska po preneˇsenih datotekah.
Komponenta WebView je aktivnost implementirana v datoteki WebViewActivity.java in uporablja pogled definiran v datoteki webview.xml. Aktivnosti podamo parameter, ki je URL naslov spletne strani, ki jo ˇzelimo prikazati. URL naslov nato z metodo fileNameFromUrl (slika 3.7) preslikamo v ime datoteke, ki bi obstajala, ˇce bi jo predhodno shra- nili. ˇCe datoteka obstaja, jo naloˇzimo kot MHTML arhiv, ˇce pa te datoteke ni, potem prek podatkovne povezave naloˇzimo spletno stran. Za shranjevanje
28 Jan Krivec v spletni arhiv uporabimo metodosaveWebArchiverazreda WebView, za na- laganje spletnih strani in shranjenih arhivov pa uporabimo metodoloadUrl, kjer kot parameter podamo URL ali pa mesto shranjene datoteke na mobilni napravi. Za shranjevanje potrebujemo le ˇse metodo, ki URL naslov spletne strani pretvori v enoliˇcno ime datoteke brez posebnih znakov, kar doseˇzemo z regularnim izrazom.
1 p r i v a t e W e b V i e w w e b V i e w ; 2 // I n i t w e b c l i e n t
3 t h i s. w e b V i e w = f i n d V i e w B y I d ( R . id . w e b v i e w ) ; 4 w e b V i e w . s e t W e b V i e w C l i e n t (new W e b V i e w C l i e n t () ) ;
Slika 3.6: Inicializacija klienta WebView
1 p r i v a t e S t r i n g f i l e N a m e F r o m U r l ( S t r i n g url ) { 2 // B u i l d d i r e c t o r y n a m e
3 S t r i n g b a s e = g e t F i l e s D i r () . g e t A b s o l u t e P a t h () + F i l e . s e p a r a t o r + g e t R e s o u r c e s () . g e t S t r i n g ( R . s t r i n g . s a v e d _ p a g e _ d i r e c t o r y ) + F i l e . s e p a r a t o r ;
4 // R e p l a c e s p e c i a l c h a r a c t e r s in URL w i t h u n d e r s c o r e and a p p e n d to the d i r e c t o r y
5 r e t u r n b a s e + url . r e p l a c e A l l (" [ . , * & \ \ / : = ? ] ", " _ ") + " . m h t m l ";
6 }
Slika 3.7: Preslikava URL naslova v ime datoteke
Diplomska naloga 29
(a) Neshranjena stran (b) Stran, ki smo jo predhodno shranili
Slika 3.8: Pogled WebView komponente brez podatkovne povezave
30 Jan Krivec
3.5 Zemljevid
Glavni cilj aplikacije STKP je navigacija po etapah Slovenske Turnokolesar- ske poti, ne da bi uporabnik moral skrbeti za roˇcno uvaˇzanje GPX sledi etap s spletne strani. V aplikaciji je zato na voljo komponenta, ki prikazuje zemlje- vid s pomoˇcjo Google Maps SDK za Android in sledi uporabnikovi lokaciji ter izkoristi senzorje mobilne naprave za orientacijo v prostoru. Komponenta na zemljevid izriˇse GPX sledi etap in kontrolne toˇcke, ki so avtomatsko pri- dobljene s spletne strani STKP. Na voljo je tudi naˇcin orientacije, ki spremlja senzorje mobilne naprave in s pomoˇcjo kompleksne fuzije senzorjev uporab- niku pomaga pri natanˇcni orientaciji na poti.
3.5.1 Google Maps SDK
Google omogoˇca Android razvijalcem enostaven razvoj aplikacij, ki za de- lovanje potrebujejo delo z zemljevidom. Google maps SDK omogoˇca upo- rabo enakih podatkov kot jih uporablja Google Maps in omogoˇca podobno uporabniˇsko interakcijo, ki je znana veˇcini uporabnikov Android mobilnih naprav. Z uporabo Google Maps SDK razvijalcu ni treba samostojno imple- mentirati celotnega zemljevida, potrebno je le nadgraditi osnovno funkcional- nost ˇze delujoˇcega zemljevida. Poleg Googla je ˇse nekaj drugih ponudnikov podobnih storitev, vendar je zaradi dobre dokumentacije in poznanosti upo- rabnikom Google Maps SDK odliˇcna izbira za ta projekt.
3.5.2 komponenta MapView
Komponenta MapView (prikazana na sliki 3.12) je aktivnost, ki prikazuje ze- mljevid in implementira Googlov MapView z razredomGoogleMap. Funkcio- nalnost je definirana v datotekiMapsActivity.java, kjer se nahaja program- ska logika, njen pogled pa je definiran v datoteki activity maps.xml. Po- gled vsebuje googlovcom.google.android.gms.maps.SupportMapFragment fragment, dva elementa TextView, ki uporabniku sporoˇcata stanje lokacij- ske storitve in tri elemente ImageButton, ki uporabniku omogoˇcajo dodatne
Diplomska naloga 31 funkcionalnosti sledenja s pomoˇcjo lokacijskih podatkov. Aktivnost na ze- mljevid izriˇse kontrolne toˇcke in sledi etap iz gpx datotek ter upravlja pogled na zemljevid, ki je definiran s kamero. Kamera je razred, ki predstavlja toˇcko nad zemljevidom in tako definira uporabnikov pogled na zemljevid. Razred vsebuje tudi funkcije, ki nam omogoˇcajo programsko spreminjanje pogleda na zemljevid, kar uporabimo za implementacijo dodatnih funkcionalnosti kom- ponente. Ker se komponenta uporablja na veˇc razliˇcnih naˇcinov, je tudi pri- kaz podatkov na zemljevidu razliˇcen. Zato komponenta kot vhodni podatek sprejme tabelo nizov, ki predstavljajo imena GPX datotek, ki jih ˇzelimo iz- risati. Ko aktivnost zaˇzenemo iz seznama etap, na zemljevid nariˇsemo zgolj izbrano etapo, ko pa aktivnost zaˇzenemo z zaˇcetnega zaslona izriˇsemo vse etape in tudi kontrolne toˇcke. Risanje po zemljevidu komponenta preda ra- zreduDrawingGpxPoints, ki je obravnavan v poglavju 3.5.3. Funkcionalnost za ˇzeljeno delovanje potrebuje dovoljenje za dostop do lokacije, zato ob za- gonu aktivnosti preverimo, ˇce ga nam je uporabnik ˇze odobril (slika 3.9). ˇCe dovoljenja nimamo, zanj vpraˇsamo, drugaˇce pa zaˇcnemo s sledenjem lokaciji.
1 // C h e c k if p e r m i s s i o n is g r a n t e d
2 if ( C o n t e x t C o m p a t . c h e c k S e l f P e r m i s s i o n ( g e t A p p l i c a t i o n C o n t e x t () , M a n i f e s t . p e r m i s s i o n . A C C E S S _ F I N E _ L O C A T I O N ) !=
P a c k a g e M a n a g e r . P E R M I S S I O N _ G R A N T E D ) { 3 // If not r e q u e s t it
4 S t r i n g [] r e q u e s t P e r m i s s i o n S t r i n g = new S t r i n g []{ M a n i f e s t . p e r m i s s i o n . A C C E S S _ F I N E _ L O C A T I O N };
5 A c t i v i t y C o m p a t . r e q u e s t P e r m i s s i o n s (this, r e q u e s t P e r m i s s i o n S t r i n g ,
L O C A T I O N _ P E R M I S S I O N _ R E Q U E S T _ N U M ) ; 6 } e l s e {
7 // S t a r t l o c a t i o n t r a c k i n g 8 s t a r t L o c a t i o n T r a c k i n g () ; 9 }
Slika 3.9: Pridobivanje dovoljenja za dostop do lokacije
32 Jan Krivec Ko uporabnik odobri sledenje lokaciji, zaˇcnemo slediti lokaciji z uporabo razreda LocationServices, kjer z getFusedLocationProviderClient() zaˇzenemo storitev, ki kombinira veˇc razliˇcnih vrst signalov (GPS, WiFi, te- lefonski signal) in tako dobimo kar najnatanˇcnejˇse podatke o lokaciji. V to metodo podamo tudi callback funkcijo, ki se bo izvedla ob osveˇzevanju lo- kacijskih podatkov. Ta funkcija prebere lokacijske podatke v spremenljivko currLocationrazredaLatLng, ki jo bomo uporabljali za delo z zemljevidom.
Callback funkcija kliˇce metodo drawMarker(), ki na zemljevid na trenutno lokacijo izriˇse uporabniˇsko ikono kot je prikazano v odseku kode na sliki 3.10.
1 if ( m a r k e r == n u l l) {
2 // add a m a r k e r to the map
3 m a r k e r = map . a d d M a r k e r (new M a r k e r O p t i o n s () 4 . p o s i t i o n ( c u r r L o c a t i o n )
5 . f l a t (t r u e) ) ;
6 // Set c i r c l e for the i c o n at f i r s t 7 s e t M a r k e r I c o n (0) ;
8 }
9 // if a l r e a d y exists , j u s t c h a n g e its p o s i t i o n 10 m a r k e r . s e t P o s i t i o n ( c u r r L o c a t i o n ) ;
Slika 3.10: Dodajanje uporabniˇske ikone na trenutno lokacijo
Metoda setMarkerIcon() omogoˇca izbiro med veˇc razliˇcnimi ikonami, ki se pojavijo na zemljevidu. Vhodni parameter 0 doloˇci navadno ikono, parameter 1 pa doloˇci puˇsˇcico, ˇce je uporabnik izbral perspektivni pogled z orientacijo.
Aktivnost poleg obiˇcajne interakcije z Google Maps zemljevidom omogoˇca ˇse tri funkcionalnosti, kljuˇcne za smiselno navigacijo po etapah. Funkcional- nosti so iz leve proti desni uporabniku dosegljive z gumbi:
1. Omogoˇca, da uporabnik iz katerekoli lokacije na zemljevidu poiˇsˇce svojo trenutno lokacijo, ˇce je le ta znana. Pogled na zemljevid GoogleMap se
Diplomska naloga 33 animira s pomoˇcjo funkcijeanimateCamera(), kamor kot parameter po- damo CameraUpdateFactory.newLatLngZoom(currLocation,18f).
Tako doseˇzemo, da zemljevid pribliˇzamo in centriramo nad uporab- nikovo lokacijo.
2. Omogoˇca, da se kamera zemljevida ob vsaki posodobitvi lokacije ani- mira na novo lokacijo in tako omogoˇca, da je uporabniˇska lokacija vedno na sredini zemljevida. Podobno kot pri prvem gumbu to doseˇzemo z metodo newLatLng(), ki pa za razliko od newLatLngZoom() kamero zgolj premakne, namesto da bi kamero tudi oddaljevali oz. pribliˇzevali.
3. Omogoˇca, da kamera sledi uporabnikovi lokaciji in da se zemljevid obraˇca glede na smer v katero gleda mobilna naprava. Tako je ze- mljevid vedno usmerjen v smer, kamor gleda uporabnik in mu tako omogoˇca dobro orientacijo po prostoru in pravo izbiro poti. Veˇc po- datkov o implementaciji se nahaja v poglavju 3.5.4.
3.5.3 Razred za risanje GPX datotek
Risanje GPX datotek po zemljevidu je precej obseˇzno, zato je zaradi pre- glednosti strukture projekta implementirano v svojem razredu. Konstruktor razredaDrawingGpxPoints sprejme 4 argumente:
• Zemljevid GoogleMap, po katerem bo razred risal.
• String[]seznam datotek, ki jih je potrebno narisati.
• Spremenljivko tipaBoolean, ki doloˇcuje ali riˇsemo datoteke iz direkto- rija Assets ali pa najnovejˇse preneˇsene datoteke iz telefona.
• Aplikacijski kontekstContext , ki ga potrebujemo za odpiranje dato- tek.
Za branje GPX datotek etap in kontrolnih toˇck uporabljamo razred XmlPullParser, ki omogoˇca hitro in preprosto branje ter pridobivanje po- datkov iz dokumentov XML (GPX je posebna vrsta dokumenta XML).
34 Jan Krivec Za branje datotek torej najprej odpremo datoteko s pomoˇcjo razreda InputStreamin nato z razredomXmlPullParserFactorypridobimo instanco razreda XmlPullParser, s katerim bomo dokument v zanki prebrali. Odsek kode na sliki 3.11 prikazuje branje GPX datoteke etape. Z while zanko se sprehodimo ˇcez dokument in ustvarjamo ArrayList koordinat, ki jih bomo nato oblikovali v povezano pot z razredom PolyLineOptions in z metodo addPolyline() vrisali na zemljevid. Risanje kontrolnih toˇck poteka zelo podobno, vendar da namesto PolyLineOptions za oblikovanje uporabljamo razred MarkerOptionsin na zemljevid riˇsemo z metodo addMarker().
1 int e v e n t T y p e = xpp . g e t E v e n t T y p e () ; 2 // L o o p o v e r e n t i r e XML d o c u m e n t
3 w h i l e ( e v e n t T y p e != X m l P u l l P a r s e r . E N D _ D O C U M E N T ) { 4 if( e v e n t T y p e == X m l P u l l P a r s e r . S T A R T _ T A G ) { 5 S t r i n g tag = xpp . g e t N a m e () ;
6 // Get l a t i t u d e and l o n g i t u d e f r o m " t r k p t " t a g s 7 if ( tag . e q u a l s (" t r k p t ") ) {
8 p o i n t s . add (new L a t L n g ( D o u b l e . p a r s e D o u b l e ( xpp . g e t A t t r i b u t e V a l u e (null, " lat ") ) , D o u b l e .
p a r s e D o u b l e ( xpp . g e t A t t r i b u t e V a l u e (null, " lon ") ) ) ) ;
9 }
10 }
11 e v e n t T y p e = xpp . n e x t () ; 12 }
Slika 3.11: Branje GPX koordinat poti z razredom XmlPullParser
Diplomska naloga 35
3.5.4 Perspektivni pogled
Perspektivni pogled je funkcija, ki jo uporabnik lahko vklopi s klikom na najbolj desni gumb v aktivnosti zemljevida. Namen te funkcionalnosti je obraˇcanje zemljevida tako, da vedno gleda v tisto smer, kamor je usmerjen uporabnik in tako kolesarju omogoˇca boljˇso orientacijo po prostoru (Slika 3.12 b). Med razvojem je funkcionalnost povzroˇcala veliko preglavic pre- prosto zato, ker Android nima robustne domorodne implementacije kom- pasa in je zato teˇzko doseˇci stabilnost ter pravilno delovanje v vseh pogo- jih. Preizkuˇsena je bila implementacija kompasa z uporabo senzorja tipa TYPE ROTATION VECTOR in kombinacije tipov TYPE MAGNETIC FIELD ter TYPE ACCELEROMETER kot predlaga Google, vendar rezultati niso bili zado- voljivi. Orientacija implementirana na ta naˇcin je sprva morda delovala pravilno, ob veˇcih obratih pa je bila napaka tako velika, da nas je konˇcni rezultat kveˇcjemu zmedel. Po nekaj dneh iskanja je bila na spletu najdena robustna implementacija fuzije senzorjev [6], ki reˇsuje problem nenatanˇcnosti in “drsenja” (Angl. drift) domorodnih tipov senzorjev v doloˇcenih situacijah.
Namenjena je izboljˇsani izkuˇsnji razˇsirjene resniˇcnosti (Angl. augmented rea- lity) na Android mobilnih napravah in je bila zato uporabljena kot ponudnik orientacije v aplikaciji STKP in se nahaja v paketu orientation. Ker je fuzija senzorjev zelo kompleksen koncept, je veˇc podatkov o dejanski imple- mentaciji na voljo v ˇclanku [4]. Razred, ki predstavlja ponudnika orientacije, uporablja aktivnost z zemljevidom, ki ob osveˇzitvi orientacijskih podatkov animira kamero zemljevida.
36 Jan Krivec
(a) Vse etape in kontrolne toˇcke (b) Perspektivni pogled
Slika 3.12: Komponenta zemljevida
Diplomska naloga 37
3.6 Nastavitve
V aplikaciji STKP je na voljo komponenta nastavitve (Slika 3.14), ki pa ni zares zvesta svojemu imenu. Uporabnik namreˇc nima moˇznosti nastavitve parametrov, ampak v tej komponenti upravlja z datotekami aplikacije. Kom- ponenta omogoˇca enostaven izbris vseh shranjenih spletnih strani in imple- mentira povezavo s spletnim streˇznikom STKP. Uporabnik tako lahko kadar- koli preveri, ˇce streˇznik vsebuje novejˇse datoteke in se nato lahko odloˇci, ˇce jih ˇzeli posodobiti. Ob prenosu aplikacija avtomatsko zazna najnovejˇse datoteke in iz njih ˇcrpa podatke. Ker so v osnovno aplikacijo ˇze vkljuˇcene datoteke, komponenta omogoˇca izbris preneˇsenih datotek v primeru, da kakˇsna dato- teka ne deluje, kot bi morala. Komponenta je aktivnost, implementirana v datoteki SettingsActivity.java, njen pogled pa se nahaja v datoteki activity settings.xml
3.6.1 Izbris shranjenih strani
Uporabnik lahko v komponenti WebView shranjuje poljubne spletne strani, kar velja tudi za strani, ki niso del uradne spletne strani STKP. Hitro se zgodi, da uporabnik za kasnejˇsi vpogled shrani veˇc strani in nato pozabi, na katerih spletnih naslovih se te strani sploh nahajajo in kako je do njih priˇsel. Da bi se izognili nesmiselni porabi prostora za shranjevanje na telefonu, obstaja v nastavitvah gumb, ki izbriˇse vse shranjene spletne strani. Funkcionalnost je preprosta, deluje tako, da se sprehodimo ˇcez direktorij, kjer so shranjeni arhivi spletnih strani in pobriˇsemo vse datoteke. ˇCe shranjenih datotek ni, uporabniku sporoˇcimo, da ni shranil ˇse nobene strani, v ostalih primerih pa sporoˇcimo ˇstevilo izbrisanih datotek.
38 Jan Krivec
3.6.2 Posodabljanje datotek
Ker se datoteke na spletni strani nenehno spreminjajo in smo v ta namen razvili tudi spletni streˇznik in spletnega pajka, je uporabniku omogoˇcen pre- prost dostop do najnovejˇsih datotek. Funkcionalnost deluje tako, da se ob kliku na gumb v ozadju izvede klic na streˇznikov API, kjer pridobimo zadnji datum posodobitve in ga primerjamo z datumom v direktoriju assets, oz.
z datumom v shrambi telefona ˇce je uporabnik nekoˇc ˇze posodobil datoteke.
Ce so na mobilni napravi ˇˇ ze najnovejˇse datoteke, potem uporabniku zgolj sporoˇcimo, da ni novejˇsih datotek, v nasprotnem primeru pa mu prikaˇzemo opcijo za prenos. ˇCe se uporabnik odloˇci za prenos, s streˇznika prenesemo najnovejˇsi ZIP direktorij datotek, ga ekstrahiramo in na telefonu zamenjamo datoteke.
V odseku kode na sliki 3.13 je implementiran HTTP klic na streˇznik s pomoˇcjo razreda OkHttpClient, ki v primeru napake na streˇzniku obvesti uporabnika z razredomToast, drugaˇce pa se sproˇzi metodaonResponse, kjer iz telesa HTTP odgovora streˇznika izluˇsˇcimo ZIP datoteko, ki jo v nadaljeva- nju ekstrahiramo. Sama funkcionalnost je implementirana v velikem ˇstevilu vrstic, ki pa so zaradi kompaktnosti izpuˇsˇcene in nadomeˇsˇcene s komentarji.
Celotna koda je na voljo v GitHub repozitoriju na naslovuhttps://github.
com/JKrivec/Android-aplikacija-za-Slovensko-Turnokolesarsko-pot
