Postopek razvoja spletne aplikacije se je zaˇcel s pripravo razvojnega naˇcrta.
Delo smo razdelili na tri glavne dele:
• Razvoj zaledja.
• Razvoj nadzorne ploˇsˇce.
• Razvoj obliˇcja.
Zaledni in obliˇcni sistem sta loˇcena in komunicirata prek REST API.
Na ta naˇcin je naˇs zaledni sistem mogoˇce v prihodnosti povezati z drugimi obliˇcnimi sistemi.
Pred zaˇcetkom razvoja je bilo treba ˇse poiskati in pregledati zunanje API-je s katerimi je aplikacija povezana. Za pridobitev informacij o vremenu na uporabnikovi lokaciji, smo uporabili brezplaˇcen API ponudnika OpenWea-therMap [22]. Uporabili smo API ”One Call” [19]. Ponudnik za uporabo API-jev najprej zahteva registracijo. Ustvarili smo brezplaˇcen raˇcun, pregle-dali dokumentacijo in z uporabo orodja Postman testirali klice na omenjen API. Nato smo preuˇcili strukturo odziva na poslan HTTP zahtevek.
Nadaljevali smo iskanje API-ja za pridobitev dodatnih moˇznih dejavnosti.
Uporabili smo OpenTripMap API [21] ponudnika OpenTripMap [20], ki vrne atrakcije v doloˇcenem radiju na lokaciji uporabnika. Pregledali smo doku-mentacijo, ponovno ustvarili brezplaˇcen uporabniˇski raˇcun na spletni strani ponudnika in nadaljevali s testiranjem klicev na API z uporabo orodja Post-man.
2.4.1 Razvoj zaledja
Razvoj smo zaˇceli z delom na zaledju. Najprej smo s pomoˇcjo programskega okvirja Laravel [15] ustvarili vse potrebne modele za upravljanje s podatki.
To so bili modeli za dejavnosti, predlagane dejavnosti, kategorije, administra-torje, ˇstetje predlogov in model za povratne informacije uporabnikov. Nato
Diplomska naloga 17 smo ustvarili migracije za vsakega od teh modelov ter jim doloˇcili polja v podatkovni bazi ter njihove tipe. Z namenom olajˇsanja razvoja smo upora-bili Laravelov Factory, ki podatkovno bazo napolni s testnimi podatki. S tem omogoˇci testiranje in sprotni pregled aplikacije, saj zaradi ˇze napolnjene baze s podatki vidimo aplikacijo v fazi, kot bi bila ˇze v uporabi. Nadaljevali smo s pripravo krmilnikov za vsakega od modelov. V krmilnike smo implementirali funkcionalnosti za upravljanje s podatki vsakega modela. Nadaljevali smo s pripravo URL-jev vrste GET, POST, PUT in DELETE za vsak model. Z naˇstetimi omogoˇcamo loˇcenim obliˇcnim sistemom komunikacijo z zalednim sistemom in sproˇzenje operacij nad modeli.
2.4.2 Razvoj nadzorne ploˇ sˇ ce
Razvoj spletne aplikacije smo nadaljevali s postavitvijo nadzorne ploˇsˇce na-menjene administratorjem. Uporabili smo ogrodje VueJS, ki nam omogoˇca reaktivno upravljanje podatkov. Zaˇceli smo implementacijo CRUD operacij nad predhodno pripravljenimi modeli. S tehnologijo Axios smo omogoˇcili REST API komunikacijo z zalednim sistemom in ju povezali s predhodno pripravljenimi URL-ji. Po implementaciji funkcionalnosti smo s pomoˇcjo ogrodja SASS postavili ˇse izgled.
2.4.3 Razvoj obliˇ cja
Nazadnje je priˇsel na vrsto ˇse razvoj obliˇcja oziroma vmesnika, ki ga vidijo uporabniki. Ponovno smo uporabili ogrodji VueJS in SASS. S pomoˇcjo teh-nologije Axios smo povezali uporabniˇski vmesnik z zalednim sistemom in omogoˇcili komunikacijo med njima. V ogrodju VueJS smo z namenom boljˇse preglednosti kode nekatere sestavne dele obliˇcja loˇcili z uporabo komponent.
Podobno smo naredili pri uporabi ogrodja SASS, za vsako posamezno kom-ponento smo definirali stile v loˇcenih datotekah. Nato smo postavili elemente spletne strani, kot so naslovna slika, okvir za izbiro dejavnosti, animiran pri-kaz filtrov, pregled prejete dejavnosti, podstran za oddajo lastne dejavnosti
18 Jan Zidar itn. Pri razvoju smo se drˇzali ”mobile-first” razvojnega naˇcela.
2.4.4 Objava v produkcijsko okolje
Objava spetne aplikacije v produkcijsko okolje je nastopila na vrsto, ko je bila spletna aplikacija skoraj v celoti dokonˇcana v lokalnem okolju. Objava na streˇznik je bila izvedena s FTP povezavo. V lokalnem razvojnem okolju smo vzpostavili Git-FTP [9] tehnologijo, ki nam omogoˇca nalaganje datotek na streˇznik sinhronizirano z Git repozitorijem. Vendar sistem Git nekatere datoteke izvzame iz svojega beleˇzenja. Primer takih datotek so:
• Vsebina mape ”node modules”, ki vsebuje potrebne datoteke za delo-vanje Javascript in CSS ogrodij.
• Vsebina mape ”vendor”, ki vsebuje datoteke potrebne za delovanje Laravel ogrodja.
• Datoteka .env, ki vsebuje okoliˇske spremenljivke potrebne za delovanje aplikacije.
Zato je bilo treba slednje datoteke na streˇznik naloˇziti roˇcno. Uporabljen je bil program FileZilla [7], ki omogoˇca FTP povezavo s streˇznikom. Vnesli smo podatke za dostop do streˇznika in ob povezavi se nam je pojavil direktorij spletne strani na streˇzniku. Tja smo roˇcno naloˇzili mapi ”node modules” in
”vendor”. Nato smo prek nadzorne ploˇsˇce ponudnika gostovanja ustvarili podatkovno bazo. Shranili smo si dostopne podatke in jih vnesli v .env datoteko ter jo nato naloˇzili na streˇznik.
Nazadnje smo na nadzorni ploˇsˇci gostovanja omogoˇcili varno HTTPS po-vezavo do spletne strani. Certifikat za HTTPS popo-vezavo smo ustvarili prek brezplaˇcnega ponudnika certifikatov Let’s Encrypt [16].
Poglavje 3
Delovanje spletne aplikacije
3.1 Predstavitev uporabe
Ob obisku spletiˇsˇca uporabnika najprej pozdravi naslovna slika in kratek opis glavne funkcionalnosti aplikacije. Glavni vmesnik za uporabo aplikacije je pod naslovno sliko znotraj svojega okvirja. Prikazan je na sliki 3.1.
Slika 3.1: Glavni vmesnik za pridobitev dejavnosti.
Znotraj tega je najbolj opazen sredinsko poravnan gumb za pridobitev dejavnosti. V zgornjem levem kotu je gumb, ki ob kliku prikaˇze moˇzne filtre. Ob kliku gumba za pridobitev dejavnosti se vsebina okvirja spremeni in prikaˇze se predlagana dejavnost, kot je prikazano na sliki 3.2. Uporabnik
19
20 Jan Zidar ima v tej fazi moˇznost prejeto dejavnost vˇseˇckati s klikom na ikono v obliki srca. V nasprotnem primeru pa lahko s klikom gumba ”Pusti mnenje” odpre vnosni obrazec, kjer vpiˇse razlog, zakaj mu dejavnost ni vˇseˇc. Uporabnik ima v spodnjem desnem robu okvirja vedno na razpolago tudi gumb za ponovno izbiro ideje. Ta gumb ob kliku okvir ponastavi v prvotno fazo, kjer lahko uporabnik ponovno nastavlja filtre in pridobi dejavnost.
Slika 3.2: Prikaz prejete dejavnosti.
Nekoliko niˇzje od okvirja za pridobitev dejavnosti je sekcija spletne strani, ki vsebuje CTA gumb za poziv uporabikov k oddaji lastnih idej. Uporabnike k oddaji lastnih idej poziva tudi lebdeˇca ikona ˇzarnice, postavljena ob desnem robu, na vrhu spletne strani. Ob kliku se animirano z desne strani prikaˇze celotna pasica, ki poleg ikone ˇzarnice vsebuje ˇse CTA napis ”Oddaj svojo idejo!”. S klikom na gumb ”Oddaj idejo” ali pa na napis ”Oddaj svojo idejo!”
je uporabnik preusmerjen na podstran, kjer se prikaˇze preprost obrazec za vnos podatkov o novi dejavnosti. Obrazec je viden na sliki 3.3. Najniˇzje na pristajalni strani pa je opis glavnih funkcionalnosti in sestavnih delov aplikacije.
Diplomska naloga 21
Slika 3.3: Obrazec za vnos nove ideje za dejavnost.