Univerza v Ljubljani
Fakulteta za raˇ cunalniˇ stvo in informatiko
Jan Zidar
Razvoj aplikacije za podporo pri izbiri prostoˇ casne dejavnosti
DIPLOMSKO DELO
VISOKOˇSOLSKI STROKOVNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE
RA ˇCUNALNIˇSTVO IN INFORMATIKA
Mentor : doc. dr. Aleˇs Smrdel
Ljubljana, 2021
Copyright. Rezultati diplomske naloge so intelektualna lastnina avtorja in Fakultete za raˇcunalniˇstvo in informatiko Univerze v Ljubljani. Za objavo in koriˇsˇcenje rezultatov diplomske naloge je potrebno pisno privoljenje avtorja, Fakultete za raˇcunalniˇstvo in informatiko ter mentorja.
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Kandidat: Jan Zidar
Naslov: Razvoj aplikacije za podporo pri izbiri prostoˇcasne dejavnosti Vrsta naloge: Diplomska naloga na visokoˇsolskem strokovnem programu prve stopnje Raˇcunalniˇstvo in informatika
Mentor: doc. dr. Aleˇs Smrdel
Opis:
Pogosto se zgodi, da ljudje ne vemo, kaj bi v nekem trenutku na neki lokaciji poˇceli. Iskanje idej po svetovnem spletu zna biti zamudno in neuˇcinkovito.
Vaˇsa naloga je, da razvijete aplikacijo, ki bo znala uporabniku predlagati neko prostoˇcasno dejavnost na lokaciji, kjer je trenutno. Pri tem naj ima uporabnik moˇznost izbire kategorije prostoˇcasne dejavnosti, aplikacija pa naj v primeru dejavnosti, ki se izvajajo zunaj, tako dejavnost uporabniku ponudi samo v primeru primernega vremena. Pri izdelavi aplikacije izberite primerne tehnologije na streˇzniku in odjemalcu. Preuˇcite tudi obstojeˇce API-je in jih v ˇcim veˇcji meri uporabite pri razvoju aplikacije. Pri razvoju aplikacije tudi poskrbite, da se bo primerno prikazovala na razliˇcnih napravah.
Title: Development of an application to support the selection of leisure activity
Description:
It often happens that people don’t know what to do at some point at a certain location. Finding ideas on the World Wide Web can be time consuming and inefficient. It is your task to develop an application that will be able to offer users suggestions for leisure activities at their location. Allow users the option of choosing categories of leisure activities, and the application should in case of outdoor activities offer such activity only in case of suitable weather. When developing the application use appropriate technologies on the server and on the client side. In addition review existing APIs and utilize
them as much as possible when developing the application. Also make sure, that the application displays correctly on different devices.
Zahvaljujem se mentorju doc. dr. Aleˇsu Smrdelu za odliˇcno odzivnost in vso pomoˇc pri izdelavi diplomske naloge. Zahvaljujem se tudi starˇsema, ki sta mi omogoˇcila brezskrben ˇstudij, in celotni druˇzini, ki me je pri tem podpirala.
Kazalo
Povzetek Abstract
1 Uvod 1
1.1 Motivacija . . . 1
1.2 Cilj . . . 1
1.3 Pregled podobnih aplikacij . . . 2
1.4 Struktura diplome . . . 5
2 Naˇcrtovanje spletne aplikacije 7 2.1 Pregled tehnologij . . . 7
2.1.1 HTML . . . 7
2.1.2 CSS . . . 8
2.1.3 Javascript . . . 8
2.1.4 PHP . . . 9
2.1.5 Laravel . . . 9
2.1.6 REST . . . 9
2.1.7 JSON . . . 10
2.1.8 MySQL . . . 10
2.1.9 Git . . . 11
2.1.10 VS Code . . . 11
2.1.11 Postman . . . 12
2.1.12 phpMyAdmin . . . 13
2.2 Pregled ogrodij . . . 13
2.2.1 VueJS . . . 13
2.2.2 Bootstrap . . . 14
2.2.3 SASS . . . 14
2.2.4 Axios . . . 15
2.3 Uporabniˇski vmesnik . . . 15
2.4 Postopek razvoja . . . 16
2.4.1 Razvoj zaledja . . . 16
2.4.2 Razvoj nadzorne ploˇsˇce . . . 17
2.4.3 Razvoj obliˇcja . . . 17
2.4.4 Objava v produkcijsko okolje . . . 18
3 Delovanje spletne aplikacije 19 3.1 Predstavitev uporabe . . . 19
3.2 Filtri . . . 21
3.3 Sistem predlaganja dejavnosti . . . 22
3.4 Beleˇzenje priljubljenosti predlogov . . . 27
3.5 Povezava z zunanjimi API-ji . . . 27
3.6 Nadzorna ploˇsˇca . . . 29
4 Zakljuˇcek 33 4.1 Evalvacija . . . 33
4.2 Sklep . . . 35
4.3 Ideje za nadaljni razvoj . . . 35
Literatura 37
Seznam uporabljenih kratic
kratica angleˇsko slovensko API Application Programming In-
terface
aplikacijski programski vme- snik
CRUD Create Read Update Delete ustvari beri posodobi odstrani
CTA Call To Action poziv k dejanju
CLI Command-Line Interface vmesnik z ukazno vrstico CSS Cascading Style Sheets kaskadna stilska predloga FTP File Transfer Protocol protokol za prenos datotek HTML Hypertext Markup Language jezik za oznaˇcevanje nadbese-
dila
HTTP Hypertext Transfer Protocol protokol za prenos nadbese- dila
HTTPS Hypertext Transfer Protocol Secure
protokol za varen prenos nad- besedila
JSON Javascript Object Notation Javascript objektna notacija MVC Model-View-Controller Model-Pogled-Krmilnik PHP PHP: Hypertext Preprocessor PHP: nadbesedilni predproce-
sor REST Representational State Trans-
fer
arhitektura za izmenjavo po- datkov med spletnimi stori- tvam
SASS Syntactically Awesome Style Sheets
sintaktiˇcno ˇcudovite stilske predloge
SQL Structured Query Language strukturiran povpraˇsevalni je- zik
URL Uniform Resource Locator enoliˇcni krajevnik vira XML Extensible Markup Language razˇsirljiv oznaˇcevalni jezik
Povzetek
Naslov: Razvoj aplikacije za podporo pri izbiri prostoˇcasne dejavnosti Avtor: Jan Zidar
Diplomska naloga se ukvarja z aplikacijo za izbiro prostoˇcasne dejavnosti.
Glavni namen aplikacije je uporabnikom ponuditi preprost in uˇcinkovit naˇcin za pridobitev predloga prostoˇcasne dejavnosti. Spletna aplikacija uporabniku prek razliˇcnih filtrov omogoˇca vnos svojih preferenc, ki jih nato upoˇsteva pri doloˇcitvi predloga. Upoˇstevane so tudi vremenske razmere na uporabnikovi lokaciji, ˇce je to smiselno. Aplikacija je povezana z zunanjim API-jem za pri- dobitev dodatnih dejavnosti. Uporabnik lahko prejeti predlog vˇseˇcka ali pa zavrne in ob tem s pomoˇcjo vnosnega obrazca pusti povratno informacijo. Na spletni strani je uporabnikom omogoˇceno tudi vnaˇsanje lastnih idej za moˇzne dejavnosti. Aplikacija zajema tudi nadzorno ploˇsˇco namenjeno administra- torjem. Tam lahko prejete predloge za dejavnosti administratorji potrdijo ali pa odstranijo. Dostop do nadzorne ploˇsˇce je zaˇsˇciten s sistemom prijave prek e-poˇstnega naslova in gesla. Na nadzorni ploˇsˇci je urejen tudi osnovni pregled priljubljenosti posameznih dejavnosti in vmesnik za upravljanje s podatki v aplikaciji.
Kljuˇcne besede: Spletna aplikacija, prostoˇcasna dejavnost, Laravel.
Abstract
Title: Development of an application to support selection of leisure activity Author: Jan Zidar
The diploma thesis deals with the application for the selection of leisure ac- tivity. The main purpose of the application is to offer users a simple and effective way to obtain a leisure activity suggestion. The web application al- lows the user to enter their preferences through various filters, which are then taken into account when determining the suggestion. The weather conditions at the user’s location are also taken into account, if aplicable. The applica- tion is linked to an external API to retrieve additional activities. The user can like the suggest activity or reject it, leaving feedback via the input form.
The website also allows users to enter their own ideas for possible activities.
The application also includes a control panel for administrators. There, they can confirm or remove the received activity suggestions. Access to the control panel is protected by a login system via email and password. The control panel also provides a basic overview of the popularity of individual activities and an interface for managing data in the application.
Keywords: Web application, leisure activity, Laravel.
Poglavje 1 Uvod
1.1 Motivacija
Nemalokrat se zgodi, da se znajdemo v situaciji, ko imamo na razpolago nekaj prostega ˇcasa, nismo pa prepriˇcani ˇcesa bi se takrat lotili. Moˇznih dejavnosti je veliko in izbira najbolj ustrezne vˇcasih predstavlja pravo teˇzavo. Lahko pa preprosto nimamo dovolj motivacije, da bi se lotili neˇcesa kar vemo, da bi mo- rali. Za primer lahko vzamemo ˇsportno rekreacijo, izobraˇzevanje na nekem podroˇcju ipd. Za reˇsitev tega problema nastopi aplikacija, ki smo jo razvili v tej diplomski nalogi. Uporabnikom je s preprostim in uˇcinkovitim upo- rabniˇskim vmesnikom omogoˇceno, da prejmejo nakljuˇcen predlog dejavnosti.
Aplikacija pri izbiri predloga upoˇsteva ˇstevilne pogoje, kot so vremenske raz- mere na uporabnikovi lokaciji in filtri, ki jih uporabnik lahko sam nastavi.
Moˇzne dejavnosti se ˇcrpajo iz podatkovne baze, v primeru izbire kategorije turizem, pa je aplikacija povezana z zunanjim API-jem za pridobitev zname- nitosti v okolici uporabnika.
1.2 Cilj
Glavni cilj diplomske naloge je razvoj spletne aplikacije namenjene pomoˇci uporabnikom pri izbiri prostoˇcasne dejavnosti. Spletna aplikacija zajema
1
2 Jan Zidar tudi nadzorno ploˇsˇco, ki vkljuˇcuje sistem za sledenje priljubljenosti posame- zne dejavnosti. Ta omogoˇca administratorjem urejanje vsake izmed njih. Na ta naˇcin se lahko dejavnosti ˇse bolj pribliˇza uporabnikom. S preprostim upo- rabniˇskim vmesnikom je uporabnikom omogoˇceno tudi poˇsiljanje svojih idej v sistem, administratorji jih nato v nadzorni ploˇsˇci pregledajo in odobrijo.
Veˇc uporabnikov, kot jih ima aplikacija, veˇc moˇznih predlogov za prostoˇcasne dejavnosti prejme in se na ta naˇcin izboljˇsuje. Iz tehniˇcnega vidika je cilj di- plomske naloge uporabnikom omogoˇciti preprosto uporabo spletne aplikacije na vseh modernejˇsih brskalnikih ter na vseh velikostih zaslonov.
1.3 Pregled podobnih aplikacij
Naˇsi aplikaciji so konkurenˇcne tiste, ki na nek naˇcin uporabnikom predlagajo dejavnosti, ki so primerne ob prostem ˇcasu.
Ena od takih aplikacij je mobilna aplikacija Randonautica [25], ki uporab- nikom prikaˇze nakljuˇcno lokacijo na zemljevidu. Uporabniki pa naj bi to lokacijo nato obiskali. Primer predlagane lokacije prikazuje slika 1.1. Apli- kacija Randonautica je bila objavljena februarja 2020 in od takrat beleˇzi veˇc kot deset milijonov uporabnikov [26]. Kljuˇcni razliki med naˇso aplikacijo in aplikacijo Randonautica so:
• naˇsa aplikacija omogoˇca predlaganje veˇc razliˇcnih kategorij dejavnosti, namesto samo potovanja na doloˇceno lokacijo;
• aplikacija Randonautica je namenjena mobilnim napravam, naˇsa apli- kacija pa je namenjena uporabi v spletnih brskalnikih na kateri koli napravi, ki ima spletni brskalnik.
Diplomska naloga 3
Slika 1.1: Predlagana lokacija v aplikaciji Randonautica.
Se ena od sorodnih aplikacij je mobilna aplikacija Shuffle My Life [29].ˇ Uporabnikom na podlagi izbrane kategorije nakljuˇcno dodeljuje zaposlitve.
To so lahko dejavnosti na prostem, branje nakljuˇcne strani na Wikipediji [35]
ipd. Uporabniki z zakljuˇcevanjem prejetih zaposlitev zbirajo toˇcke. Aplika- cija na spletiˇsˇcu Google Play [10] beleˇzi veˇc kot 100 tisoˇc prenosov. Glavne razlike med naˇso aplikacijo in aplikacijo Shuffle My Life so:
• naˇsa aplikacija ne deluje na naˇcin opravljanja zaposlitev in zbiranja
4 Jan Zidar toˇck;
• aplikacija Shuffle My Life je namenjena samo mobilnim napravam z operacijskim sistemom Android, saj je objavljena samo na spletiˇsˇcu Google Play.
Primer predlagane dejavnosti v aplikaciji Shuffle My Life prikazuje slika 1.2.
Slika 1.2: Primer predlagane dejavnosti v aplikaciji Shuffle My Life [29].
Diplomska naloga 5
1.4 Struktura diplome
Uvodno poglavje predstavi motivacijo za izbiro tematike, opiˇse cilje diplom- ske naloge in predstavi nekaj sorodnih aplikacij. Nadaljujemo s poglavjem o naˇcrtovanju spletne aplikacije. Tam pregledamo uporabljene tehnologije, ogrodja in orodja, ki so izboljˇsala in poenostavila postopek razvoja aplikacije.
Opiˇsemo tudi uporabniˇski vmesnik in dobre prakse na podroˇcju naˇcrtovanja vmesnikov ter pregledamo kljuˇcne korake razvoja in postopek objave v pro- dukcijsko okolje. Naslednje poglavje, Delovanje spletne aplikacije, predstavi konˇcni izdelek in njegovo uporabo. V tem poglavju razloˇzimo tudi delovanje aplikacije v zaledju, opiˇsemo naˇcin izbire dejavnosti in vpliv filtrov na izbiro.
Predstavimo povezave z zunanjimi API-ji in predstavimo sistem beleˇzenja priljubljenosti dejavnosti. Nazadnje pregledamo ˇse nadzorno ploˇsˇco name- njeno administratorjem. V zadnjem poglavju, Zakljuˇcek, predstavimo ideje za nadaljni razvoj in sklepne ugotovitve.
6 Jan Zidar
Poglavje 2
Naˇ crtovanje spletne aplikacije
2.1 Pregled tehnologij
V tem podpoglavju si pogledamo tehnologije in orodja, ki smo jih uporabili pri razvoju aplikacije, uporabniˇski vmesnik ter sam naˇcin razvoja.
2.1.1 HTML
HTML [12] je najbolj razˇsirjen jezik v spletu, ki se uporablja za razvoj sple- tnih strani. Ustvaril ga je Berners-Lee, konec leta 1991, vendar je bila ˇsele druga razliˇcica standardizirana kot prva standardna specifikacija HTML. Ob- javljena je bila leta 1995. HTML 4.01 je bila dolgo glavna razliˇcica HTML-ja in je bila objavljena konec leta 1999. Razliˇcica HTML 4.01 se ˇse vedno po- gosto uporablja, ˇceprav je ˇze izdana razliˇcica HTML 5. Objavljena je bila leta 2014 in ponuja nove API-je, elemente, atribute in izboljˇsuje delovanje multimedije. Bila je tudi priporoˇcena oziroma standardizirana s strani W3C (World Wide Web Consortium). HTML ne omogoˇca izdelave dinamiˇcnih spletnih strani, sluˇzi pa kot temelj za ostale tehnologije in ogrodja.
7
8 Jan Zidar
2.1.2 CSS
CSS [6] je slogovni jezik za urejanje izgleda spletnih strani. Poleg HTML- ja in Javascripta je CSS temeljna tehnologija svetovnega spleta. CSS doloˇca elementom spletne strani lastnosti kot so barva, velikost, poloˇzaj, poravnava, sence, obroba, odmiki in ˇse veliko drugih. Od HTML-ja je neodvisen in se lahko uporablja s katerim koli oznaˇcevalnim jezikom, ki temelji na XML.
Prva razliˇcica je izˇsla leta 1996, trenutno najnovejˇsa razliˇcica CSS3 pa leta 1999.
2.1.3 Javascript
Javascript, znan tudi pod kratico JS, je odprtokodni programski jezik, ki se uporablja na strani odjemalca za razˇsirjanje funkcionalnosti spletnih strani.
Razvilo ga je podjetje Netscape leta 1995. V svetovnem spletu predsta- vlja temeljni del spletnih strani. Vgradi se v HTML dokument in omogoˇca dinamiˇcnost in interaktivnost sicer statiˇcnim stranem, ki so postavljene z uporabo jezikov HTML in CSS. Javascript vsebuje aplikacijske programske vmesnike za upravljanje s podatkovnimi strukturami, objekti, besedilom, da- tumi, vnosnimi polji itn. Ne vkljuˇcuje pa vhoda/izhoda (I/O) za priklop naprav.
Javascript je v bistvu implementacija standarda ECMAScript, vendar ga nadgrajuje in vanj vstavlja dodatne funkcionalnosti. Pomembne nadgradnje jezika so bile opredeljene v razliˇcici ECMAScript 6, ki je izˇsla leta 2015.
Ampak se veˇcinoma ˇse vedno uporablja prejˇsnja razliˇcica ECMAScript 5 iz leta 2009, ker nekateri brskalniki ˇse ne podpirajo funkcionalnosti novejˇsih razliˇcic. Za reˇsitev te teˇzave lahko uporabimo orodje Babel.js, ki kodo, na- pisano v ECMAScript 6 ali novejˇsem standardu, pretvori v prejˇsnjo razliˇcico in tako omogoˇci podporo v veˇcini brskalnikov.
Diplomska naloga 9
2.1.4 PHP
PHP [23] je odprtokodni streˇzniˇski skriptni jezik, ki ga je razvil Rasmus Lerdorf leta 1994. Glavni namen jezika PHP je razvoj dinamiˇcno generira- nih spletnih strani na strani odjemalca. Je interpreterski programski jezik.
To pomeni, da se izvorna koda sproti interpretira, namesto, da se v celoti prevede pred izvajanjem. Spletni streˇznik interpretira izvorno kodo in kot rezultat odjemalcu vrne HTML vsebino spletiˇsˇca. Najpogosteje se uporablja za pridobitev podatkov iz baze in prikaz teh v HTML obliki.
2.1.5 Laravel
Laravel je brezplaˇcen in odprtokodni okvir, ki razˇsirja uporabo program- skega jezika PHP. Razvit je nad ogrodjem Symphony. Ponuja nabor orodij za izdelavo sodobnih aplikacij in deluje na arhitekturi MVC (angl. Model- View-Controller ). Izdal ga je Taylor Otwell leta 2011. Od takrat se redno izboljˇsuje in prejema posodobitve, zadnja verzija je Laravel 8, ki je izˇsla sep- tembra 2020.
Laravel ponuja zmogljiva orodja za delo s podatkovnimi bazami, vkljuˇcno z ORM (angl. Object Relational Mapper), imenovano Eloquent, in meha- nizmom za ustvarjanje migracij zbirk podatkov in sejalcev. Z orodjem uka- zne vrstice (CLI) Artisan lahko razvijalci preprosto ustvarjajo nove modele, krmilnike in druge komponente aplikacij. Ponuja tudi velik nabor funcional- nosti, ki pospeˇsijo in olajˇsajo razvoj aplikacij. Primer teh funkcionalnosti so avtentikacija in avtorizacija, lokalizacija, predpomnjenje, shranjevanje v pomnilnik, delo s sejami, predloge za ustvarjanje pogledov in ˇse veˇc.
2.1.6 REST
REST [27] je zbirka arhitekturnih stilov. Ni protokol ali standard. V letu 2000 ga je predstavil Roy Fielding. REST API (ali RESTful API) je tisti API, ki ustreza naslednjim REST omejitvam [37]:
10 Jan Zidar
• Odjemalec in streˇznik sta loˇcena.
• Zahtevki in odgovori morajo vsebovati vse podatke potrebne za razu- mevanje interakcije. Za to ne smejo hraniti stanja, tj. podatkov o predhodnih zahtevkih.
• Odgovori na zahtevke vsebujejo informacijo o tem, ali so podatki v njem dovoljeni za shranjevanje v predpomnilnik.
• Vmesnik je enoten in povezan z viri, identifikatorji in predstavitvami.
• Veˇcplastni sistem omogoˇca arhitekturi, da je sestavljena iz veˇc plasti in posamezna izmed njih ne ”vidi” preostalih.
• Opcijsko lahko odgovori na zahtevke vsebujejo kodo, ki razˇsirja funk- cionalnosti na strani odjemalca.
HTTP zahtevki poslani prek REST API prepoˇsljejo podatke v enem od veˇc moˇznih formatov: JSON, HTML, Python, PHP ali navadno besedilo.
Najbolj razˇsirjen je format JSON, ker je berljiv tako ljudem kot tudi na- pravam. V primeru naˇse spletne aplikacije se podatki med odjemalcem in zaledjem prek REST API poˇsiljajo v obliki JSON.
2.1.7 JSON
JSON [5] je tekstovno zasnovana predstavitev strukturiranih podatkov, ki temelji na zbirki parov kljuˇc-vrednost in urejenih seznamih. ˇCeprav JSON izhaja iz Javascripta, je brez potrebe po uporabi knjiˇznic podprt v veˇcini veˇcjih programskih jezikov. Obiˇcajno se uporablja za izmenjavo informacij med spletnimi odjemalci in spletnimi streˇzniki [34]. Struktura JSON zapisa je preprosto berljiva ljudem in tudi napravam.
2.1.8 MySQL
MySQL [17] je odprtokodni sistem za upravljanje relacijskih baz podatkov, ki ga trenutno razvija Oracle in temelji na strukturiranem jeziku poizvedb
Diplomska naloga 11 (SQL). SQL [30] se uporablja za komunikacijo z bazo podatkov. Ukazi SQL se uporabljajo za izvajanje nalog, kot so posodabljanje podatkov v bazi, prido- bivanje podatkov iz baze, ustvarjanje in brisanje podatkov in veˇc. Naˇsa sple- tna aplikacija uporablja MySQL podatkovno bazo, ki je povezana z ogrodjem Laravel.
2.1.9 Git
Git [8] je najbolj razˇsirjen sistem za nadzor razliˇcic (angl. Version Control System), uporablja se z namenom sledenja spremembam v datotekah projek- tov. Na ta naˇcin imajo razvijalci urejen pregled nad storjenimi spremembami in lahko po potrebi obnovijo prejˇsnje razliˇcice. Git olajˇsa tudi sodelovanje veˇc ljudem na enem projektu in omogoˇca, da se spremembe, ki jih naredi veˇc ljudi, zdruˇzijo v en osrednji vir. Projekti so v primeru uporabe Git poime- novani repozitoriji. Pri naˇsi spetni aplikaciji smo Git uporabili z namenom sledenja spremembam ter za integracijo Git-ftp tehnologije, ki omogoˇca, da datoteke projekta nalagamo na streˇznik sinhronizirano z najnovejˇso razliˇcico repozitorija. Repozitorij je objavljen na brezplaˇcnem oblaku za gostovanje Git repozitorijev, Bitbucketu.
2.1.10 VS Code
Visual Studio Code [31], prikazan na sliki 2.1, je urejevalnik kode, ki je upo- rabnikom na voljo brezplaˇcno. Razvil ga je Microsoft za operacijske sisteme macOS, Windows in Linux. Zdruˇzuje preprostost urejevalnika programske kode z zmogljivimi orodji za pomoˇc razvijalcem. Nekatera od orodij so samo- dejno dokonˇcanje kode, moˇznost odpravljanja napak, integracija Git sistema, samodejno zapiranje oklepajev in ˇstevilne bliˇznjice s pritiskom kombinacij tipk.
Visual Studio Code podpira ˇsirok nabor programskih jezikov, npr. Java, C++, Python, CSS, Javascript itn. Poleg tega omogoˇca dodajanje in celo ustvarjanje novih razˇsiritev. Nekatere moˇzne razˇsiritve ponujajo napredno
12 Jan Zidar iskanje napak, spremembo teme urejevalnika, podporo za razvoj v oblaku, predogled aplikacije v realnem ˇcasu, preoblikovanje z namenom izboljˇsanja preglednosti kode in ˇse veliko drugih.
Uporabniˇski vmesnik Visual Studio Code uporabniku omogoˇca veliko in- terakcije v primerjavi z drugimi urejevalniki kode. Za poenostavitev upo- rabniˇske izkuˇsnje je urejevalnik razdeljen na pet glavnih delov: vrstica de- javnosti, stranska vrstica, urejevalne skupine, ploˇsˇca in vrstica stanja.
Slika 2.1: Visual Studio Code.
2.1.11 Postman
Postman je raˇcunalniˇska aplikacija, ki se uporablja za testiranje API-jev.
Postman poˇslje API zahtevo na spletni streˇznik in prejme odgovor, ne glede na to kakˇsen ta je. Za poˇsiljanje in prejemanje zahtev Postman od uporabnika ne zahteva dodatnega dela ali urejanja nastavitev. Uporabniku s preprostim
Diplomska naloga 13 vmesnikom omogoˇca preprosto poˇsiljanje zahtev, doloˇcanje tipa teh in na- stavljanje parametrov ter podatkov, ki se poˇsljejo z zahtevkom. Po prejemu odgovora pa na razliˇcne naˇcine omogoˇca pregled nad prejetimi podatki.
2.1.12 phpMyAdmin
phpMyAdmin [24] je brezplaˇcno programsko orodje, ki je napisano v pro- gramskem jeziku PHP. Namenjeno je upravljanju streˇznika podatkovnih baz tipov MySQL ali MariaDB. Glavni primeri uporabe so izvajanje skrbniˇskih nalog, ustvarjanje baz podatkov, izvajanje poizvedb in dodajanje uporabniˇskih raˇcunov.
Mi smo orodje uporabljali z namenom sprotnega pregledovanja podatkov.
Ob objavi aplikacije v produkcijsko okolje smo s tem orodjem izvozili bazo iz lokalnega okolja in jo uvozili na produkcijski streˇznik.
2.2 Pregled ogrodij
To podpoglavje opisuje pomembna ogrodja, ki so bila uporabljena pri razvoju spletne aplikacije.
2.2.1 VueJS
VueJS [32] ali preprosto Vue, je odprtokodno progresivno ogrodje za program- ski jezik Javascript. Leta 2014 ga je izdelal razvijalec programske opreme Evan You, ker je opazil potrebo po preprostejˇsem Javascript ogrodju, kot je bil takrat popularni Angular. Evan You in preostala ekipa razvijalcev redno posodabljajo in nadgrajujejo VueJS. Druga verzija ogrodja je izˇsla leta 2016.
Tretja verzija, ki je trenutno najnovejˇsa, pa je izˇsla septembra 2020.
Vue razˇsirja osnovne elemente HTML in jim dodaja funkcionalnosti. Ponuja ˇze veliko lastnih komponent, moˇzno ga je pa ˇse dodatno razˇsiriti s ˇstevilnimi knjiˇznicami oz. ogrodji, na primer v naˇsem primeru BootstrapVue [4]. Ar- hitektura Vue temelji na komponentah, ki se lahko v posameznem projektu
14 Jan Zidar uporabijo veˇckrat. Znotraj komponent je mogoˇce loˇceno pisati programsko kodo za HTML, Javascript in CSS. Omogoˇca tudi samodejno ponovno na- laganje projekta, ko naredimo spremembo v kodi. S tem lahko spremembe vidimo nemudoma, brez potrebe po roˇcnem ponovnem nalaganju kode.
Pri razvoju naˇse spletne aplikacije smo ogrodje Vue uporabili za postavi- tev nadzorne ploˇsˇce in za postavitev uporabniˇskega vmesnika na odjemalˇcevi strani.
2.2.2 Bootstrap
Bootstrap [3] je ogrodje, ki vsebuje zbirko HTML, CSS in Javascript orodij za ustvarjanje in izdelavo spletnih strani in spletnih aplikacij. Je brezplaˇcen in odprtokodni projekt, ki gostuje na GitHubu. Njegove glavne prednosti so, da omogoˇca oblikovno odziven dizajn strani, ki se prilagaja zaslonu naprave, ponuja mreˇzni sistem za postavitev elementov, ima ˇsiroko zdruˇzljivost z br- skalniki, ponuja komponente za veˇckratno uporabo in je preprost za uporabo ter hiter za uˇcenje. Prihaja tudi z vgrajeno podporo za vtiˇcnike jQuery [13]
in programskim API-jem Javascript. Uporablja se lahko s katerim koli ure- jevalnikom kode. [33]
Pri razvoju naˇse aplikacije smo uporabili razliˇcico BootstrapVue, ki je prila- gojena uporabi v Javascript ogrodju VueJS.
2.2.3 SASS
SASS [28] je predprocesor, ki razˇsirja CSS. Omogoˇca uporabo funkcional- nosti, kot so spremenljivke, zanke, gnezdenje stilskih zapisov, vdelan uvoz, dedovanje stilov in ˇse veˇc. Predstavil ga je Hampton Catlin leta 2006. Ker je SASS predprocesor pomeni, da se koda prevede v standarden CSS. Z nje- govo uporabo je pisanje stilske kode preprostejˇse in bolj pregledno, koda pa je boljˇse organizirana in laˇzja za vzdrˇzevanje.
Diplomska naloga 15
2.2.4 Axios
Axios [1] je knjiˇznica za programski jezik Javascript, ki se uporablja za poˇsiljanje zahtev HTTP iz Node.js [18] ali XMLHttp zahtevkov [36] iz brskal- nika. Pri razvoju spletne aplikacije smo knjiˇznico uporabili zato, ker ponuja vmesnik za poenostavitev poˇsiljanja asinhronih zahtevkov in s tem omogoˇci preprost naˇcin za poˇsiljanje podatkov na zaledje sistema in prejemanje po- datkov iz odgovora na zahtevke.
2.3 Uporabniˇ ski vmesnik
Na strani odjemalca je uporabniˇski vmesnik glavni naˇcin za interakcijo z zalednim sistemom in za poˇsiljanje ukazov ter zahtevkov. Predstavljamo si ga lahko kot posrednika med uporabnikom in sistemom. Njegov namen je uporabnikom omogoˇciti preprost in intuitiven naˇcin za izvajanje operacij na sistemu. Dober uporabniˇski vmesnik je uporabnikom jasen za uporabo in ne zahteva, da ima uporabnik predhodno znanje za uporabo tega. Nekatere od dobrih praks na podroˇcju priprave uporabniˇskih vmesnikov so:
• Besedila naj bodo kratka in jedrnata, uporabljena naj bo ˇcitljiva pisava.
• Gumbi in ostali elementi naj se vedejo predvidljivo.
• Elementi naj bodo dobro vidni in smiselno poravnani.
• Vmesnik naj bo preprost, izogibajmo se uporabi nepotrebnih elemen- tov.
• Uporabimo barve, ki pripomorejo k intuitivnosti vmesnika.
Za postavitev uporabniˇskega vmesnika smo uporabili odprtokodno ogrodje Bootstrap, ki ponuja ˇstevilne sestavne komponente z ˇze preddefiniranimi stili.
Elementi Bootstrapa se samodejno prilagajajo velikosti zaslona.
16 Jan Zidar
2.4 Postopek razvoja
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 povezavo 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.
3.2 Filtri
Eden od pomembnejˇsih sestavnih delov uporabniˇskega vmesnika za pridobi- tev dejavnosti je moˇznost nastavljanja filtrov. Ob kliku na gumb ”Prikaˇzi filtre” v zgornjem levem kotu okvirja, se z animacijo pojavi okno za izbiro filtrov, ki je prikazano na sliki 3.4. Uporabnik lahko iz seznama izbere kate- gorijo dejavnosti, ki jo ˇzeli prejeti. S prvim od dveh gumbov za izkljuˇcujoˇco izbiro lahko doloˇci, ˇce ˇzeli prejeti samo dejavnosti, ki se izvajajo podnevi.
Z drugim gumbom za izkljuˇcujoˇco izbiro pa lahko doloˇci, ˇce ga zanimajo samo dejavnosti na prostem. Nazadnje je med filtri z drsnikom za parametre mogoˇce izbrati koliko ur vnaprej si uporabnik ˇzeli dejavnost izvajati. Drsnik za parametre omogoˇca nastavitev do 48 ur v prihodnost.
22 Jan Zidar
Slika 3.4: Vmesnik za vnos filtrov.
3.3 Sistem predlaganja dejavnosti
Koda za sistem predlaganja dejavnosti je napisana v krmilniku aktivnosti.
Osrednja funkcija prejme HTTP zahtevek za prejem dejavnosti, iz zahtevka pa pridobi podatke o opcijsko nastavljenih filtrih. Funkcija najprej preveri pravilnost podatkov prejetih iz HTTP zahtevka, prikazanega na sliki 3.5.
Prvi podatek je unikatna identifikacijska ˇstevilka prejˇsnje generirane dejav- nosti. Ta podatek funkcija s strani odjemalca prejme samo kadar je ta pred- hodno ˇze prejel neko dejavnost. Funkcija zahteva, da je podatek celo ˇstevilo in da v podatkovni bazi obstaja dejavnost s prejeto identifikacijsko ˇstevilko.
Funkcija dovoljuje tudi, da ta podatek ni nastavljen. Podatek o identifikacij- ski ˇstevilki dejavnosti se uporablja z namenom, da funkcija ne predlaga iste dejavnosti dvakrat zapored. Naslednja dva podatka, ”daytime” in ”outdoor”
doloˇcata ali je uporabnik nastavil filtra za prejem samo dnevnih dejavnosti in prejem samo dejavnosti, ki se izvajajo na prostem. Funkcija od teh podatkov zahteva, da sta Booleovega tipa [2] ali pa, da nista nastavljena. Nazadnje funkcija preveri prisotnost in vrsto podatka ”time”, ki doloˇca filter nastavi- tve ˇcasa, kdaj v prihodnoti uporabnik ˇzeli opravljati aktivnost. Funkcija od tega podatka zahteva, da je celo ˇstevilo ali pa, da ni nastavljen.
Diplomska naloga 23
Slika 3.5: Koda za validacijo podatkov iz HTTP zahtevka.
Koda se nadaljuje z ustvaritvijo spremenljivke praznega seznama. Ta bo hranil vse morebitne pogoje, ki se bodo upoˇstevali pri pridobitvi dejavnosti.
Doloˇcanje pogojev je odvisno od prisotnosti podatkov o nastavljenih filtrih v HTTP zahtevku. Koda za vsak filter posebaj preveri njegovo prisotnost in v primeru, da je nastavljen, v spremenljivko ”conditions” ustrezno doda pogoj, ki bo pri izbiri dejavnosti upoˇsteval vrednost polja, ki ga filter zahteva.
Primer nastavitve pogoja je prikazan na sliki 3.6.
Slika 3.6: Primer nastavitve pogoja v odvisnosti od prisotnosti nastavljenega filtra.
Uporabnikovi filtri imajo prednost pred samodejnim pregledom vremena na uporabnikovi lokaciji. Zato v primeru prisotnosti filtra za prejem dejav- nosti na prostem, koda izvzame preverjanje vremena. ˇCe pa filter za prejem dejavnosti samo na prostem ni prisoten, osrednja funkcija kliˇce pomoˇzno pri- vatno funkcijo, ki preveri vreme na uporabnikovi lokaciji in vrne Boolovo vrednost ”true” v primeru deˇzja ter ”false” v nasprotnem primeru. Pomoˇzna funkcija za pridobitev podatkov o vremenu je prikazana na sliki 3.7. Osrednja funkcija mora upoˇstevati tudi morebitni filter o nastavitvi ˇcasa za izvajanje dejavnosti v prihodnosti. Pomoˇzna funkcija za preverbo vremena na loka- ciji poleg ip naslova uporabnika zahteva tudi argument, ki doloˇca za koliko
24 Jan Zidar ur vnaprej naj vrne podatek o vremenu. ˇCe je uporabnik nastavil, da ˇzeli dejavnost izvajati v prihodnosti, osrednja funkcija izbrano ˇstevilo ur poˇslje pomoˇzni funkciji. V nasprotnem primeru, ko filter za izvajanje dejavnosti v prihodnosti ni nastavljen, osrednja funkcija pomoˇzni poˇslje podatek o ˇcasu z vrednostjo 0. V tem primeru pomoˇzna funkcija vrne informacije o deˇzju za trenutni ˇcas. Osrednja funkcija nato na podlagi informacije o deˇzju ustrezno nastavi ”outdoor” filter.
Slika 3.7: Funkcija za pridobitev podatkov o vremenu.
Zadnje na vrsti preverjanja nastavljenih filtrov je preverba filtra za izbiro kategorije. Osrednja funkcija v primeru nastavitve kategorije ”Turizem”, kliˇce zunanji API ponudnika OpenTripMap za pridobitev dodatnih moˇznih dejavnosti na uporabnikovi lokaciji in je prikazana na sliki 3.8. Nato pre- jete podatke zdruˇzi s tistimi iz podatkovne baze, in z upoˇstevanjem vseh predhodno nastavljenih pogojev nakljuˇcno izbere eno od moˇznih dejavnosti.
Diplomska naloga 25
Slika 3.8: Funkcija za pridobitev atrakcij v bliˇzini uporabnika.
Ce je izbrana katera druga kategorija, funkcija, prikazana na sliki 3.9,ˇ pridobi samo tiste dejavnosti, ki pripadajo izbrani kategoriji. Na njih pa prav tako aplicira doloˇcene pogoje in izmed ustreznih nakljuˇcno izbere eno dejavnost. ˇCe filter za kategorijo ni nastavljen, funkcija izmed vseh moˇznih dejavnosti iz podatkovne baze nakljuˇcno pridobi eno dejavnost, in pri tem ravno tako upoˇsteva vse predhodno nastavljene pogoje na podlagi uporabni- kovih filtrov.
26 Jan Zidar
Slika 3.9: Pridobitev dejavnosti v odvisnosti od nastavitve filtra kategorije.
Nazadnje osrednja funkcija v podatkovno bazo zabeleˇzi, da je prejela zahtevek za pridobitev dejavnosti. Funkcija kot odgovor na HTTP zahtevek poˇslje odziv v JSON [14] obliki. Pred poˇsiljanjem podatkov o izbrani dejav- nosti funkcija ˇse preveri, ˇce je dejavnost bila uspeˇsno izbrana. ˇCe dejavnost ni bila izbrana, uporabnika o tem ustrezno obvesti, sicer pa poˇslje podatke o dejavnosti, kar je prikazano na sliki 3.10.
Diplomska naloga 27
Slika 3.10: Zakljuˇcni del funkcije za izbiro dejavnosti.
3.4 Beleˇ zenje priljubljenosti predlogov
Z namenom izboljˇsanja posameznih dejavnosti in aplikacije nasploh, smo im- plementirali sistem, ki omogoˇca beleˇzenje priljubljenosti za vsako dejavnost.
V podatkovni bazi vsaka dejavnost vkljuˇcuje podatka o tem, koliko vˇseˇckov je prejela in kolikokrat so jo uporabniki preskoˇcili. Poleg tega aplikacija ponuja moˇznost, da uporabniki poˇsljejo svoje mnenje na vsako od prejetih dejav- nosti. Na nadzorni ploˇsˇci je za administratorje urejen pregled nad najbolj vˇseˇckanimi dejavnostmi ter dejavnostmi, ki so bile najveˇckrat preskoˇcene.
Urejen je tudi pregled nad vsemi oddanimi mnenji ter pripadajoˇcimi dejav- nostmi.
3.5 Povezava z zunanjimi API-ji
Za komunikacijo z zunanjimi API-ji je uporabljen PHP paket Guzzle [11].
Ta ponuja preprost vmesnik za poˇsiljanje razliˇcnih vrst HTTP zahtevkov na doloˇcene API-je in prejemanje odgovorov nanje. V krmilniku aktivnosti, kjer izbiramo nakljuˇcno dejavnost, smo z namenom boljˇse organizacije in
28 Jan Zidar preglednosti kode ustvarili pomoˇzno funkcijo za poˇsiljanje HTTP zahtevkov na zunanje API-je, ki je prikazana na sliki 3.11. Funkcija kot argument prejme URL na katerega poˇsiljamo HTTP zahtevek. Vrne pa vrednost telesa prejetega odgovora oziroma niˇcelno vrednost, kadar pri poˇsiljanju HTTP zahtevka pride do napake.
Slika 3.11: Pomoˇzna funkcija za poˇsiljanje HTTP zahtevkov na zunanje API- je.
Primer klica te pomoˇzne funkcije za poˇsiljanje HTTP zahtevkov je viden na slikah 3.7 in 3.8.
Pri poˇsiljanju HTTP zahtevkov na zunanje API-je nastavljamo razliˇcne parametre v sam URL naslov. Na ta naˇcin specificiramo obliko in vsebino od- govora, ki ga ˇzelimo prejeti na zahtevek. Klicanje HTTP zahtevka za prido- bitev podatkov o vremenu na doloˇceni lokaciji zahteva, da v URL nastavimo parametre ”lat”, ”lon” in ”appid”. Slednji doloˇcajo geografsko lokacijo (ˇsirino in dolˇzino) za katero ˇzelimo prejeti podatke o vremenu ter avtenticirajo poˇsiljatelja HTTP zahtevka. Opcijsko lahko nastavimo ˇse ˇstevilne druge. Mi izmed teh nastavimo parameter ”exclude” in mu doloˇcimo vrednost ”minu- tely,current,daily,alerts”, s ˇcimer sporoˇcimo katere podatke ˇzelimo izkljuˇciti iz odgovora. S tem pohitrimo ˇcas, ki je potreben, da prejmemo odgovor in odvzamemo podatke, ki nam ne koristijo pri ugotavljanju stanja vremena
Diplomska naloga 29 glede na uro. Iz odgovora poslediˇcno prejememo seznam, ki nosi podatke o vremenu po urah, do 48 ur v prihodnost.
Pri poˇsiljanju HTTP zahtevka za pridobitev atrakcij v okolici uporabnika, v URL nastavimo obvezne parametre ”lang”, ”lat”, ”lon” in ”radius”. S slednjimi doloˇcamo jezik v katerem ˇzelimo prejeti odgovor, geografsko lokacijo in radij znotraj katerega ˇzelimo prejeti atrakcije. Odgovor prejmemo v obliki seznama s podatki o atrakcijah.
3.6 Nadzorna ploˇ sˇ ca
Nadzorna ploˇsˇca spletne aplikacije je namenjena administratorjem za upra- vljanje in pregled nad podatki celotne aplikacije. Zaˇsˇcitena je s sistemom prijave po e-poˇstnem naslovu in geslu, kar prikazuje slika 3.12.
Slika 3.12: Prijava v nadzorno ploˇsˇco.
Prva stran nadzorne ploˇsˇce, vidna na sliki 3.13, prikazuje osnovne ana- litiˇcne podatke:
• ˇStevilo generiranih dejavnosti v zadnjem dnevu.
• ˇStevilo generiranih dejavnosti v zadnjem tednu.
• Skupno ˇstevilo generiranih dejavnosti.
30 Jan Zidar
• Pet najbolj vˇseˇckanih dejavnosti.
• Pet najveˇckrat preskoˇcenih dejavnosti.
Na levem robu strani vidimo navigacijski stolpec, ki vsebuje povezave do vseh podstrani nadzorne ploˇsˇce. Struktura teh je naslednja:
• Nadzorna ploˇsˇca (uvodna stran)
• Dejavnosti – Pregled – Dodaj novo
– Predlagane dejavnosti
• Kategorije – Pregled – Dodaj novo
• Mnenja
Slika 3.13: Zaˇcetna stran nadzorne ploˇsˇce.
Diplomska naloga 31 Na podstrani za pregled dejavnosti je v tabeli prikazan seznam vseh de- javnosti iz podatkovne baze. Primer prikaza dejavnosti je viden na sliki 3.14.
Omogoˇceno je tudi razvrˇsˇcanje po stolpcih.
Slika 3.14: Seznam dejavnosti.
Vsako od dejavnosti je moˇzno urejati ali odstraniti. V primeru ureja- nja doloˇcene dejavnosti, prikazano na sliki 3.15, se pod njo razˇsiri polje, ki prikazuje vse podatke tiste dejavnosti, in omogoˇca urejanje vsakega od njih.
Slika 3.15: Primer urejanja dejavnosti.
Po zakljuˇcku urejanja se lahko spremembe shrani, ali pa dejavnost od- strani. Na enak naˇcin je urejen pregled predlaganih dejavnosti, ki so jih uporabniki poslali v sistem. Ob potrditvi predlagane dejavnosti se ta pre- makne iz seznama predlaganih dejavnosti v seznam dejavnosti, ki jih sistem
32 Jan Zidar lahko izbere pri predlaganju.
Na podstrani ”Dodaj novo dejavnost” se prikaˇze vnosni obrazec s pomoˇcjo katerega lahko administratorji v sistemu ustvarjajo nove dejavnosti. Prikazan je na sliki 3.16.
Slika 3.16: Primer dodajanja dejavnosti.
Urejen je tudi pregled in moˇznost urejanja za posamezne kategorije v sis- temu. S preprostim vnosnim obrazcem se lahko ustvarja nove kategorije. Ta vnosni obrazec vsebuje samo vnosno polje za poimenovanje nove kategorije.
Nazadnje je na nadzorni ploˇsˇci urejen ˇse pregled nad prejetimi mnenji, ki so jih v sistem poslali uporabniki. Urejanje mnenj ni mogoˇce, saj ˇzelimo te ohraniti v svoji originalni obliki.
Poglavje 4 Zakljuˇ cek
V okviru zakljuˇcka so predstavljeni rezultati evalvacije razvite aplikacije, sklep ter moˇzno nadaljnje delo.
4.1 Evalvacija
Spletno aplikacijo in njeno delovanje smo sproti testirali ˇze med razvojem.
Glavni namen tega je bil, da zagotovimo pravilno delovanje, ˇse preden je bila aplikacija pripravljena na objavo v produkcijsko okolje. Nekatere ugo- tovitve in izboljˇsave smo odkrili ter implementirali ˇze takrat. Primeri teh so predvsem intuitivnost uporabniˇskega vmesnika, njegov izgled, postavitev elementov, organizacija kljuˇcnih delov nadzorne ploˇsˇce in podobno.
V konˇcni fazi razvoja aplikacije, ko je bila objavljena v produkcijsko oko- lje in so bili v podatkovni bazi resniˇcni podatki o dejavnostih, smo jo v test poslali nekaj (6) potencialnim uporabnikom. Uporabniki so prihajali iz razliˇcnih podroˇcij in krajev. Testiranje so opravljali v vlogi uporabnikov aplikacije, ne kot administratorji. Po konˇcanem testiranju smo uporabnikom zastavili nekaj vpraˇsanj in na podlagi odgovorov ter na podlagi njihovih la- stnih povratnih informacij ter mnenj pridobili naslednje ugotovitve.
33
34 Jan Zidar Bili so mnenja, da je uporabniˇski vmesnik dovolj preprost in intuitiven za uporabo. Deloval je smiselno v smeri doseganja glavnega cilja aplikacije - pridobitve predloga prostoˇcasne dejavnosti. Tudi vmensik za doloˇcitev filtrov je bil uporabnikom takoj razumljiv. Prikaz prejete dejavnosti se je uporabni- kom zdel preprost, vˇseˇc jim je bila moˇznost oddaje vˇseˇcka s klikom na ikono v obliki srca. Pohvalili so prikaz vmesnika tudi na mobilnih napravah. Ne- katerim uporabnikom sprva ni bil jasen pomen ikone ˇzarnice na desni strani, pri vrhu spletne strani, vendar so ob kliku nanjo takoj spoznali pomen, saj se je prikazal napis, ki poziva k oddaji lastnih idej. Uporabniki so menili, da je poziv k oddaji lastnih idej na spletni strani dovolj viden. Obrazec za vnos idej se je uporabnikom zdel jasen in preprost za uporabo.
Drugi namen testiranja je bila evalvacija koristnosti aplikacije in ugoto- vitev uˇcinkovitosti njene glavne funkcionalnosti. Od uporabnikov smo ˇzeleli izvedeti, kako zadovoljni so bili s prejetimi predlogi, koliko generiranj je bilo potrebnih, da so prejeli dejavnost, ki jim je bila vˇseˇc, ter zanimala nas je tudi uˇcinkovitost nastavljanja filtrov. V sploˇsnem so se prejeti predlogi dejavnosti uporabnikom zdeli zanimivi. Brez nastavljanja filtrov pa se je uporabnikom vˇcasih zgodilo, da dejavnost v takratnem ˇcasu ni bila dovolj preprosto izve- dljiva. Za primer lahko izberemo prejetje predloga ”Obiˇsˇci najbliˇzji adrena- linski park.” v ˇcasu, ko je ta zaprt. Kadar uporabniki niso nastavili filtrov, sta bili v povpreˇcju potrebni dve pridobitvi predloga dejavnosti, preden je bil prejet izvedljiv predlog. ˇSe dlje pa je trajalo, da je bil prejet predlog, ki je bil uporabnikom dovolj zanimiv. Za to je bilo v povpreˇcju potrebno prejeti tri do ˇstiri predloge. Uporabnikom so se prejete dejavnosti zdele bolj primerne, ko so nastavili filter kategorije. Obiˇcajno se jim je v tem primeru ˇze prvi prejeti predlog zdel izvedljiv. So pa veˇcinoma vseeno generirali ˇse nekaj predlogov in izmed veˇc prejetih izbrali tistega, ki jim je bil najljubˇsi.
Filtra za izbiro dejavnosti na prostem ter izbiro dnevne dejavnosti sta se uporabnikom zdela uˇcinkovita. V nekaj skrajnih primerih se je zgodilo, da aplikacija v primeru nastavljenih vseh filtrov, ni naˇsla primerne dejavnosti.
Diplomska naloga 35 Razlog za to je pomanjkanje veˇcjega ˇstevila moˇznih dejavnosti, saj aplika- cija v tej fazi ˇse ni prejela dovolj potencialnih predlogov s strani uporabnikov.
Uporabniki so bili z aplikacijo zadovoljni, zdela se jim je zanimiva in preprosta za uporabo. Povedali so, da bi aplikacijo predlagali prijateljem.
Skoraj vsi uporabniki so menili, da bo aplikacija ˇse bolj uˇcinkovita, ko se baza potencialnih dejavnosti ˇse bolj poveˇca. Nekateri uporabniki so omenili ˇzeljo po nastavitvi okvirnega ˇcasa trajanja dejavnosti. ˇZeljo smo upoˇstevali in jo vkljuˇcili v poglavje 4.3.
4.2 Sklep
V tem diplomskem delu smo prikazali postopek razvoja spletne aplikacije, ki uporabnikom ponuja pomoˇc pri izbiri prostoˇcasne dejavnosti. Razvoj spletne aplikacije smo pripeljali do konca, tako da je aplikacija pripravljena za upo- rabo in uporabnikom ponuja vse svoje glavne funkcionalnosti. Opisali smo problematiko pri izbiri prostoˇcasne dejavnosti, ki ga spletna aplikacija reˇsuje.
Povzeli smo tehnologije, ogrodja in orodja uporabljena pri razvoju. Popeljali smo se skozi postopek samega razvoja aplikacije, nato pa si ogledali posa- mezne od njenih funkcionalnosti. Razloˇzli smo delovanje sistema v zaledju in predstavili povezavo z zunanjimi API-ji. Nazadnje smo si na primerih pogledali ˇse funkcionalnosti in uporabo nadzorne ploˇsˇce za administratorje.
4.3 Ideje za nadaljni razvoj
Spletna aplikacija je razdeljena na zaledni in obliˇcni sistem, ki komunicirata prek REST API. To pomeni, da je zaledje aplikacije v prihodnosti mogoˇce po- vezati z drugimi odjemalci. Zaradi tega je aplikacija naklonjena razˇsiritvam.
Po testiranju aplikacije smo ugotovili, da je dovolj dovrˇsena za nemoteno uporabo vseh funkcionalnosti. To pa ne pomeni, da nadaljne razˇsiritve niso mogoˇce. Z vidika izboljˇsanja uporabniˇske izkuˇsnje in funkcionalnosti, bi bilo
36 Jan Zidar smisleno implementirati naˇcin, da lahko uporabnik izbere drugo lokacijo na kateri bi ˇzelel dejavnost izvajati. Ta razˇsiritev bi zahtevala nadgradnjo zale- dnega sistema, da bi znal zunanjim API-jem poslati lokacijo, ki si jo uporab- nik izbere sam. Na strani odjemalca bi bilo k filtrom treba dodati moˇznost roˇcne izbire lokacije. Za to imamo dva smiselna naˇcina. Prvi je implemen- tacija seznama, ki vsebuje imena veˇcjih okoliˇskih mest v bliˇzini uporabnika.
Poleg preproste izbire mesta s seznama bi bilo za izboljˇsanje uporabniˇske izkuˇsnje treba ˇse dodati moˇznost roˇcnega vnosa imena mesta, pri tem bi se pa seznam moral samodejno filtrirati in prikazati samo ˇse mesta podobna vnosu uporabnika. Drugi moˇzen naˇcin pa je implementacija zemljevida, na katerem bi uporabnik s klikom lahko izbral ˇzeljeno lokacijo. Na podlagi te- stiranja aplikacije s pomoˇcjo uporabnikov smo ugotovili, da bi bilo smiselno k filtrom dodati tudi moˇznost izbire okvirnega ˇcasa trajanja dejavnosti. Ta nadgradnja bi zahtevala posodobitev podatkovne baze, modela aktivnosti, krmilnika za upravljanje z dejavnostmi in vseh prikaznih tabel ter obrazcev za vnos novih dejavnosti. Nato bi bilo treba posodobiti obstojeˇce podatke o vseh aktivnostih. Smiselna nadgraditev aplikacije bi bila tudi implementacija lokalizacije, saj aplikacija deluje na kateri koli lokaciji in ne samo v Sloveniji.
Razˇsiritev aplikacije pa je na nek naˇcin tudi odvisna od njenih uporabni- kov, saj se baza moˇznih dejavnosti ˇsiri s tem, ko uporabniki oddajajo lastne predloge za dejavnosti.
Literatura
[1] Axios.url: https://www.axios.com (pridobljeno 21. 8. 2021).
[2] Rebus community. Boolean data type. url: https://press.rebus.
community / programmingfundamentals / chapter / boolean - data - type(pridobljeno 21. 8. 2021).
[3] Bootstrap.url:https://getbootstrap.com(pridobljeno 22. 8. 2021).
[4] BootstrapVue.url:https://bootstrap-vue.org(pridobljeno 22. 8. 2021).
[5] Pierre Bourhis in sod. “JSON: Data Model, Query Languages and Schema Specification”. V: Proceedings of the 36th ACM SIGMOD- SIGACT-SIGAI Symposium on Principles of Database Systems. PODS
’17. Chicago, Illinois, USA: Association for Computing Machinery, 2017, str. 123–135. isbn: 9781450341981. doi: 10.1145/3034786.3056120.
url:https://doi.org/10.1145/3034786.3056120.
[6] CSS. url: https://developer.mozilla.org/en-US/docs/Web/CSS (pridobljeno 22. 8. 2021).
[7] FileZilla.url:https://filezilla-project.org(pridobljeno 21. 8. 2021).
[8] Git. url:https://git-scm.com (pridobljeno 21. 8. 2021).
[9] Github. Git FTP. url: https : / / github . com / git - ftp / git - ftp (pridobljeno 21. 8. 2021).
[10] Google Play.url:https://play.google.com(pridobljeno 20. 8. 2021).
[11] Guzzle Documentation. url: https://docs.guzzlephp.org (prido- bljeno 21. 8. 2021).
37
38 Jan Zidar [12] HTML. url: https://developer.mozilla.org/en- US/docs/Web/
HTML (pridobljeno 22. 8. 2021).
[13] Jquery. url:https://jquery.com (pridobljeno 22. 8. 2021).
[14] JSON. url:https://www.json.org (pridobljeno 21. 8. 2021).
[15] Laravel.url: https://laravel.com (pridobljeno 21. 8. 2021).
[16] Let’s Encrypt.url:https://letsencrypt.org(pridobljeno 21. 8. 2021).
[17] Oracle. MySQL. url: https://www.oracle.com/mysql (pridobljeno 23. 8. 2021).
[18] Node.js. url: https://nodejs.org (pridobljeno 22. 8. 2021).
[19] OpenWeatherMap. One Call API. url: https : / / openweathermap . org/api/one-call-api (pridobljeno 20. 8. 2021).
[20] OpenTripMap. url: https://opentripmap.io/product (pridobljeno 20. 8. 2021).
[21] OpenTripMap. API. url: https : / / opentripmap . io / docs (prido- bljeno 20. 8. 2021).
[22] OpenWeatherMap. API. url: https : / / openweathermap . org / api (pridobljeno 20. 8. 2021).
[23] PHP. url: https://www.php.net (pridobljeno 22. 8. 2021).
[24] phpMyAdmin.url:https://www.phpmyadmin.net(pridobljeno 22. 8. 2021).
[25] Randonautica. url: https : / / www . randonautica . com (pridobljeno 20. 8. 2021).
[26] Wikipedia. Randonautica.url:https://www.randonautica.com (pri- dobljeno 20. 8. 2021).
[27] Red Hat. What is a REST API? url: https://www.redhat.com/en/
topics/api/what-is-a-rest-api(pridobljeno 22. 8. 2021).
[28] SASS. url:https://sass-lang.com (pridobljeno 21. 8. 2021).
Diplomska naloga 39 [29] Google Play. Shuffle My Life - Things To Do. url: https://play.
google.com/store/apps/details?id=com.gadsby.shufflemylife (pridobljeno 20. 8. 2021).
[30] W3Schools. SQL. url: https : / / www . w3schools . com / sql / sql _ intro.asp(pridobljeno 23. 8. 2021).
[31] Visual Studio Code. url: https://code.visualstudio.com (prido- bljeno 22. 8. 2021).
[32] VueJS.url: https://vuejs.org (pridobljeno 21. 8. 2021).
[33] What is Bootstrap? url: https : / / www . toptal . com / front - end / what- is- bootstrap- a- short- tutorial- on- the- what- why- and- how(pridobljeno 22. 8. 2021).
[34] What is JSON? A better format for data exchange. url: https : / / www.infoworld.com/article/3222851/what- is- json- a- better- format-for-data-exchange.html(pridobljeno 21. 8. 2021).
[35] Wikipedia.url:https://www.wikipedia.org(pridobljeno 20. 8. 2021).
[36] XMLHttpRequest. url: https://developer.mozilla.org/en- US/
docs/Web/API/XMLHttpRequest (pridobljeno 22. 8. 2021).
[37] Wei Zhou in sod. “REST API Design Patterns for SDN Northbound API”. V:2014 28th International Conference on Advanced Information Networking and Applications Workshops. 2014, str. 358–365. doi: 10.
1109/WAINA.2014.153.
