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 tehnologiHTML-ja 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 spletgenerira-nih 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.