Diplomsko delo visokošolskega strokovnega študija Informatika v organizaciji in managementu SPLETNA REŠITEV ZA ISKANJE TERMINOV IN LOKACIJ PREDAVANJ M

Transkripcija

1 Informatika v organizaciji in managementu SPLETNA REŠITEV ZA ISKANJE TERMINOV IN LOKACIJ PREDAVANJ Mentor: doc. dr. Borut Werber Kandidat: Boštjan Koželj Somentor: viš. pred. dr. Gregor Lenart Kranj, September 2016

2 ZAHVALA Zahvaljujem se somentorju dr. Gregorju Lenartu za pomoč, navodila in potrpežljivost pri pisanju diplomske naloge. Zahvaljujem se mentorju doc.dr. Borutu Werberju za pomoč, navodila in potrpežljivost pri pisanju diplomske naloge. Zahvaljujem se mojim domačim za spodbudo in razumevanje.

3 POVZETEK V diplomi smo opisali uporabo MVC modela za razvoj spletne rešitve. Kratica MVC se nanaša na pojme podatkovni model, pogled in krmilnik, ki skupaj tvorijo strukturo spletne rešitve. Preučevali smo uporabo angularnega ogrodja, JavaScript skriptnega jezika, visoko tekstovnega označevalnega jezika in kaskadnih stilskih datotek. MVC model smo preizkusili na prototipni rešitvi urnika predavanj namenjene študentom in predavateljem. S spletno rešitvijo imajo študenti možnost iskanja lokacije predavanj znotraj izbranih časovnih intervalov. Za izbrani časovni interval lahko iščejo tudi naslove predavanj. Rešitev bo namenjena tudi predavateljem, ki s spletno rešitvijo lahko urejajo podatke o lastnih predavanjih. Predavatelji lahko tudi dodajajo morebitna obvestila povezana z njihovimi predavanji. KLJUČNE BESEDE: - spletna rešitev - angular - mvc model - urnik - lokacija

4 ABSTRACT This diploma thesis describes use of MVC model for development of web solution. MVC refers to Model, View and Controller, which form an architectural approach for development of web application. We have studied usage of angular framework, JavaScript scripting language, hypertext markup language and cascading style sheets. We used MVC model for development of schedule prototype application for students and lecturers. The developed web application enables students to locate classroom of lecture or finding lecture titles within selected time interval. On the other hand it enables lecturers to add notices and edit information about their own lectures. KEYWORDS - web solutions - angular - mvc model - schedule - location

5 KAZALO 1. UVOD PREDSTAVITEV PROBLEMA NAMEN IN CILJI DIPLOMSKEGA DELA METODE DELA OMEJITVE DIPLOMSKEGA DELA RAZVOJ SPLETNIH PROGRAMSKIH REŠITEV DEFINICIJA MVC MODELA ANGULAR MVC SKRIPTNI JEZIK JAVASCRIPT STILSKI JEZIK CSS DEKLERATIVNI JEZIK HTML PODATKOVNA BAZA MONGODB AKRONIMI JSON CRUD DOM NODE TAG LIFT RAZVIJALSKA ORODJA CHROME RAZHROŠČEVALNIK VISUAL STUDIO CODE STRUKTURA REŠITVE REŠITEV PROJEKT IZVEDBA PROGRAMSKE REŠITVE UPORABNIŠKI VMESNIK KOMUNIKACIJA UPORABNIKA Z POGOVORNIMI OKNI REGISTRACIJSKO OKNO in OKNO ZA PONASTAVLJANJE GESLA OGRODJE PROGRAMSKE REŠITVE IZBOR PREDAVATELJA IZBOR LOKACIJE DATUMSKI IZBOR IZBOR PREDAVANJA... 22

6 UREJANJE PODATKOV O PREDAVANJU STILIZIRANJE PROGRAMSKE REŠITVE PODATKOVNI MODEL ZBIRKA PREDAVATELJ ZBIRKA PREDAVANJE ZBIRKA SLUŠATELJ TESTIRANJE PROGRAMSKE REŠITVE ENO ENOTNI TEST POTEK TESTIRANJA ENO ENOTNIH TESTOV REZULTATI TESTIRANJA ENO ENOTNIH TESTOV E2E TEST POTEK TESTIRANJA E2E TESTOV REZULTATI TESTIRANJA E2E TESTOV SWOT ANALIZA SLABOSTI SPLETNE REŠITVE PREDNOSTI SPLETNE REŠITVE PRILOŽNOSTI GROŽNJE ZAKLJUČKI OCENA UČINKOV POGOJI ZA UVEDBO MOŽNOSTI NADALJNEGA RAZVOJA LITERATURA IN VIRI KAZALO SLIK KAZALO TABEL... 39

7 1. UVOD Obstaja veliko različnih spletnih tehnologij in tehnik za izdelavo spletnih rešitev in zato se je včasih težko odločiti za najboljši pristop k razvoju. V diplomski nalogi bomo raziskovali razvoj spletne rešitve, ki bo temeljil na priljubljenem razvijalskem vzorcu s kratico imenovanem MVC podatkovni model, pogled, kontroler (ang. Model-View-Controller). To je vzorec, ki uspešno in učinkovito poveže uporabniški vmesnik s podatkovnim modelom PREDSTAVITEV PROBLEMA V današnjem hitrem tempu življenja je za ljudi pomemben hiter dostop do informacij. Študenti večkrat iščemo informacije povezane s predavanji. Na primer v kateri predavalnici je naslednje predavanje ali katerega predavatelja ima študent naslednjo uro. Za študenta je pomembna tudi krajša ali daljša predstavitev vsebine izbranega predavanja. Tu so poleg študentov tudi predavatelji, ki prav tako iščejo informacije, kot je na primer številka predavalnice v kateri imajo naslednje predavanje. Pogledali si bomo spletno rešitev, ki študentom in predavateljem daje informacije, ki so za njih pomembne. Delovanje bomo raziskali na prototipni rešitvi namenjeni študentom FOV, s katero bodo študenti poiskali lokacije predavanj, vsebine predavanja za izbrani datum. Lahko bodo dodajali nove predavatelje ali predavanja med priljubljene vsebine, dodajali in spreminjali bodo opomnike. Program bo deloval na napravah, kot so namizni računalniki, ipodi, tablični računalniki in pametni telefoni. Ker je za študente in predavatelje čas dragocen, je zelo pomembno: - da se bo spletna rešitev hitro naložila iz strežnika na uporabniško napravo, - da bo spletna rešitev hitro filtrirala podatke, - da bo spletna rešitev omogočila hitro navigacijo, - da bo spletna rešitev omogočila hiter vnos podatkov. Program Spletna rešitev za iskanje terminov in lokacij predavanj omogoča takšno pretočno uporabniško izkušnjo. Razvita spletna rešitev bo odzivna. Njeno delovanje bo spominjalo na namizne programe, čeprav bo v celoti razvita s spletnimi tehnologijami. S SWOT analizo bomo ocenili ustreznost dobljene rešitve NAMEN IN CILJI DIPLOMSKEGA DELA Osnovni namen je raziskava učinkovitosti razvoja spletne rešitve z MVC modelom. Proučili bomo celoten paket spletnih tehnologij potrebnih za izdelavo MVC spletne rešitve. Cilj je postavitev prototipne rešitve napisane s takšnim paketom spletnih tehnologij. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 1

8 1.3. METODE DELA Izbrali smo način klasičnega modeliranja izdelave prototipne rešitve. Koraki modeliranja so : - izbor programskega jezika - izbor ogrodja - izbor programskega okolja - izbor razhroščevalnika - izdelava prototipne rešitve - izdelava eno enotnih testov - izdelava E2E testov Izbrani programski jezik bo JavaScript. Pri izboru ogrodja bomo izbrali knjižnico angular. Programsko okolje v katerem bomo spletno rešitev napisali bo Visual Studio Code. Za razhroščevanje aplikacije bomo uporabili Chrome razhroščevalnik. Eno enotne in E2E teste bom napisali z JavaScript programskim jezikom OMEJITVE DIPLOMSKEGA DELA V diplomi nismo delali poglobljene analize obstoječega stanja. Razvili smo novo spletno rešitev, ki prikazuje podatke direktno iz podatkovne baze. Pri tem se nismo omejevali z obstoječim spletnim urnikom. Predlagana rešitev je omejena na preizkus MVC metode za razvoj spletne rešitve in ima omejeno funkcionalnost. V predlagani rešitvi ni vmesnika za urejanje vnosov v urnik. Vnose je mogoče spreminjati zgolj s posegom v podatkovno bazo. Predlagana rešitev ima omejitve tudi pri sinhronizaciji s koledarji na pametnih telefonih in spletnih koledarjih. Predlagana spletna rešitev je omejena tudi na napravah, ki ne podpirajo izvajanja JavaScript kode. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 2

9 2. RAZVOJ SPLETNIH PROGRAMSKIH REŠITEV V nadaljevanju predstavljamo teoretične osnove. Poznavanje predstavljenih teoretičnih osnov je ključnega pomena za razvoj, testiranje in implementacijo odzivne spletne rešitve, ki bo dala študentom in predavateljem bogato uporabniško izkušnjo. Med te štejemo predstavitev MVC modela, angular modela, skriptnega jezika JavaScript, stilskega jezika CSS in deklerativnega jezika HTML. CSS kratica pomeni kaskadne stilske datoteke. V svetu informacijske tehnologije in podrobneje v svetu programiranja spletnih rešitev je pogosta uporaba številnih akronimov. Z njihovo uporabo je komunikacija med ljudmi znotraj informacijskega procesa hitrejša in enostavnejša. Hitreje in razumljiveje je na primer uporabiti akronim HTML, kot pa povedati celotno strukturo akronima, ki se v svetu informacijske tehnologije nanaša na HyperText Markup Language. V tem poglavju bomo v ločenem podpoglavju predstavili akronime, ki so pomembni za razumevanje vsebine diplomske naloge. Za razvoj spletne rešitve so na voljo številna orodja. Pri razvoju spletne rešitve za iskanje lokacij in terminov predavanj smo uporabili razvojno okolje Visual Studio Code in Chrome brskalnik. Našteti programi so opisani znotraj tega poglavja DEFINICIJA MVC MODELA MVC je programski model, ki definira spletno rešitev s tremi logičnimi nivoji. Kratica izhaja iz angleškega jezika in se nanaša na Model View Controller. Črka M se nanaša na vsebino podatkovnega modela. Za večino programov je to tabela v podatkovni bazi ali json objekt znotraj dokumenta. Json je angleška kratica za javascript object notation in definira strukturo objektnega modela. Črka V znotraj MVC se nanaša na pogled in predstavlja pogled podatkovnega modela na odjemalskem vmesniku. Odjemalski vmesnik je spletna stran, na kateri se nahaja uporabnik. Črka C se nanaša na kontroler in skrbi za vnose, ki jih uporabnik vnaša na odjemalski vmesnik. Kontroler je torej člen, ki povezuje podatkovni model s pogledom. V tipični spletni rešitvi kontroler bere podatke iz pogleda. Kontroler tudi preverja pravilnost vnosov uporabnika in pošilja podatke v podatkovni model. MVC strukturiranje programa je primerno za kompleksne rešitve, saj se razvijalec lahko osredotoči na vsak nivo razvoja posebej. Skriptni jezik JavaScript pozna kar nekaj takšnih MVC programskih modelov, med katerimi so v času pisanja diplomskega dela popularnejši predvsem Backbone, Angular, Ember in Knockout. Pri razvoju spletne rešitve za iskanje lokacij in terminov predavanj smo za razvoj uporabili Angular programski model (MVC pattern, 2016) ANGULAR MVC Angular je MVC programski model namenjen razvoju dinamičnih spletnih rešitev. Z uporabo HTML predložnega jezika dovoljuje razširitev sintakse z namenom jasnega Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 3

10 in učinkovitega poimenovanja atributov. HTML kratica pomeni hyper text markup language. Gre za kratico, ki določa označevalni jezik spletne rešitve. Ogrodje je razvito okrog prepričanja, da je deklerativna koda boljša, ko pišemo kodo za uporabniški vmesnik. Ogrodje je razvito okrog prepričanja, da je imperativna koda boljša za izražanje poslovne logike. Deklerativna koda pomeni, da bomo dali programu opcije, ki se lahko zgodijo, program pa se bo odločil, katero opcijo bo vzel za izvedbo končnega rezultata. Imperativna koda pomeni, da bomo dali programu ukaz, kako naj kodo izvede in kaj naj se zgodi kot rezultat izvajanja te kode. Angular model zagovarja ločevanje DOM elementov od logike spletne rešitve. DOM je kratica, ki jo iz angleškega jezika prevedemo kot dokumentni objektni model. Ločevanje DOM elementov od logike spletne rešitve izboljša testiranje kode. Za takšen način razvoja je testiranje programske rešitve popolnoma enakovredno razvoju programske rešitve. Lahkotnost testiranja je odvisna od pravilnosti zgradbe napisane kode. Takšna pravilnost se kaže v angularnem načinu razvoja, ki zagovarja fizično ločitev datotek na dva dela. Prvi del se nanaša na kodo za odjemalske tehnologije, drugi del pa na kodo za strežniške tehnologije. Takšna fizična ločitev olajša vzporedni razvoj na obeh straneh razvoja rešitve (Git Angular, 2016). Konceptualni model je v angular ogrodju sestavljen iz : - pogleda, ki je to kar vidi uporabnik; - direktiv oziroma navodil, ki so podaljšek pogleda in razširjajo njegovo funkcionalnost; - modela, ki so podatki, ki so prikazani uporabniku v pogledu in s katerimi uporabnik izvaja akcije v programski rešitvi; - konteksta, do katerega dostopajo kontrolerji, navodila in funkcije; - izrazov, ki so inicializacije spremenljivk in klici funkcij v kontekst; - filtrov, ki filtrirajo vrednosti za prikaz uporabniku; - kontrolerjev, ki so poslovna logika zadaj za pogledom. Če ima spletna rešitev večje število kontrolerjev, so le-ti fizično ločeni med seboj; - vstavljanje odvisnosti poveže program z zunanjimi knjižnicami; - modul je območje, znotraj katerega je zapisana celotna logika. Je povezava med HTML kodo in JavaScript kodo SKRIPTNI JEZIK JAVASCRIPT JavaScript je najpopularnejši skriptni jezik na svetu. Skoraj vsak osebni računalnik na svetu ima na svojem sistemu različico vsaj enega JavaScript prevajalnika in ga tudi aktivno uporablja. JavaScript koda je napisana znotraj HTML strani. Ko uporabnik naloži HTML stran skupaj z JavaScript kodo, je ta koda poslana v brskalnik, ki izvaja JavaScript kodo. Dejstvo, da je koda shranjena znotraj HTML strani, omogoča vsakemu uporabniku te strani, da vidi celotno kodo programa. Implementacija JavaScript programa je torej zelo preprosta. JavaScript deluje na računalniku, tudi če je ta izključen iz svetovnega omrežja. JavaScript omogoča kreiranje izredno odzivnih uporabniških vmesnikov, ki izboljšujejo uporabniško izkušnjo in omogočajo dinamično funkcionalnost brez nepotrebnega čakanja odziva iz strežniške strani. JavaScript lahko naloži vsebino v HTML dokument na Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 4

11 uporabnikovo zahtevo. To lahko stori tako, da naloži celotni HTML dokument naenkrat ali zgolj del HTML dokumenta. JavaScript je najboljši skriptni jezik za implementacijo spletnih standardov, ki so uveljavljeni znotraj brskalnikov (Crockford, 2001). Skozi leta se je uporaba JavaScripta zelo spremenila. Najprej je bila interakcija JavaScripta omejena zgolj na dodajanje povratne informacije uporabniku ali na lovljenje dogodkov, ki jih je sprožil uporabnik. Takšen dogodek je na primer pritisk na gumb za brisanje vsebine. Z JavaScriptom ulovimo ta dogodek in preden se vsebina izbriše, prikažemo uporabniku JavaScript pogovorno okno, v katerem ga lahko na primer vprašamo, če je prepričan, da želi to vsebino izbrisati. S takšnim preverjanjem se lahko prepreči pošiljanje podatkov na strežniško stran v primeru, da si uporabnik premisli glede brisanja. Z JavaScript kodo lahko tudi preverjamo pravilnost ali nepravilnost vnosov. Na primer preverjamo, da je v vnosno polje vnešen podatek v pravilnem formatu. Takšno preverjanje se lahko nanaša na pravilnost vnosa datuma, številke, gesla in še številne druge formate. Veliko se je v preteklosti uporabljala tudi JavaScript metoda document.write(), s katero se je dinamično dodajala vsebina na HTML stran (The Definitive Guide, 2011). Ko so brskalniki začeli podpirati implementacijo DOM-a in z njo tudi bogatejšo interakcijo med uporabnikom in spletno rešitvijo, je JavaScript začel postajati zanimivejši. DOM je kratica, ki se nanaša na dokumentni objektni model. JavaScript lahko v DOM strukturo dinamično vrine vsak node in vsako nodovo lastnost, ki se jo statično lahko doda tudi v HTML. Node je vizualni vmesnik znotraj HTML kode. Lastnost noda je opis nodovega obnašanja. Preko DOM-a JavaScript lahko dostopa do elementov dokumenta in vpliva na njihov izgled, vsebino in lastnosti. Preko DOM-a JavaScript prav tako lahko kreira nove dokumente, ko in če so na dokumentu potrebni. Z JavaScriptom lahko tudi prilagodimo velikosti elementov, kar je še posebno pomembno ob pregledovanju vsebin na številnih različnih napravah. Z JavaScriptom preverimo velikost okna, v katerem se spletna rešitev pregleduje. Glede na to velikost priredimo izgled vsebine v HTML dokumentu. Poleg prej omenjenega preverjanja pravilnosti vnešenih formatov z JavaScriptom izvajamo še številne druge funkcionalnosti. Iskalni obrazec lahko predlaga rezultat medtem, ko vnašamo iskalni niz. Takšnemu načinu iskanja rečemo avtomatsko dokončevanje iskanega niza oziroma autocomplete. Vsebina, ki se pogosto spreminja, se lahko po vnaprej določenem časovnem intervalu osvežuje v brskalniku brez, da bi se ob tem morala osvežiti celotna stran. JavaScript lahko popravlja napake pri formiranju HTML dokumenta. Z JavaScript kodo lahko animiramo elemente na spletni rešitvi. Takšna animacija se lahko uporablja ob prikazovanju ali skrivanju informacij ter z označevanjem pomembnejšega dela besedila. JavaScript ni omejena na posamezno vrsto brskalnika. JavaScript kodo podpirajo vsi pomembnejši spletni brskalniki. Lahko se zgodi, da v brskalniku izvajanje JavaScript kode ni dovoljeno. Za takšne primere je še posebno pomembno, da se ob razvoju spletne rešitve predvidi tudi takšen scenarij. Ob tem scenariju se lahko uporabniku prikaže čisto drug HTML dokument skupaj z obvestilom, da je za Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 5

12 bogatejšo uporabniško izkušnjo predlagano, da se omogoči izvajanje JavaScript kode (Caniuse, 2016). JavaScript je jezik spletnih rešitev. Sintaktično ni zahteven, toda njegova uporaba je lahko zelo raznolika. Uporaba JavaScript kode gre z roko v roki z ostalimi spletnimi tehnologijami, kot sta na primer HTML in CSS. JavaScript koda lahko deluje tudi v povezavi z Flash tehnologijo. Flash tehnologija se uporablja v spletu večinoma za prikazovanje animacij. Ker brskalniki potrebujejo za uporabo Flash tehnologije namestitev vtičnika, se programerji rajši odločajo za sestavo animacij s pomočjo JavaScripta in kaskadnih stilskih datotek (Flash definicija, 2016) STILSKI JEZIK CSS Kratico CSS lahko v slovenski jezik prevedemo kot kaskadne stilske datoteke, v katere s stilskim jezikom zapisujemo lastnosti posameznih HTML gradnikov. Glavni namen kaskadnih stilskih datotek je ločevanje HTML strukture spletne rešitve in njene predstavnosti. Ločevanje HTML strukture in njene predstavnosti s kaskadnimi stilskimi datotekami prinaša mnoge prednosti. Ista kaskadna stilska datoteka se lahko uporabi v več kot eni spletni rešitvi. Spletno rešitev z dodano kaskadno stilsko datoteko je lažje vzdrževati in spreminjati. S pomočjo kaskadnih stilskih datotek spletno rešitev lažje prilagodimo različnim brskalnikom in različnim napravam. Kaskadna stilska datoteka HTML gradnikom določi lastnosti z uporabo razredov. S pomočjo razreda se iz kaskadne stilske datoteke referencira lastnost elementa v spletni rešitvi. Na sliki 1 lahko vidimo primer uporabe razreda znotraj kaskadne stilske datoteke. Pika pred nazivom določa razred, naziv določa selektor preko katerega bomo v HTML datoteki dostopali do lastnosti. Lastnost je v tem primeru barva ozadja. Vsaka lastnosti ima tudi vrednost. Vrednost barve ozadja je v tem primeru rumena. Slika 1: Primer uporabe razreda znotraj stilske datoteke (Lastni vir, 2016) 2.4. DEKLERATIVNI JEZIK HTML Kratica HTML se nanaša na Hyper Text Markup Language in bi jo lahko poslovenili visoko označevalni tekstovni jezik. Gre za nabor simbolov, ki jih vstavimo v tekstovno datoteko, zato da v spletnem brskalniku prikažemo vsebino dokumenta. S strukturo tega dokumenta dajemo brskalniku navodila, kako naj prikaže vsebino Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 6

13 dokumenta. Vsak tak ukaz imenujemo HTML element ozirom HTML tag. Tag je torej element HTML strani. Na sliki 2 so prikazani nekateri HTML elementi. Vsak od njih daje brskalniku svoj nabor ukazov za prikaz strani. Skupno je razvijalcem v času pisanja diplomskega dela na voljo okrog 120 elementov. Poudariti pa je potrebno, da precej pogosto nastajajo novi elementi (Html elementi, 2016). Poznamo tudi tako imenovane super HTML elemente. To so izvedeni elementi, ki jih zgradimo z uporabo MVC strukture in angular ogrodja. V tem primeru govorimo o angular direktivi, ki je lahko prikazana kot navaden HTML element, HTML lastnost ali HTML komentar. Slika 2: Primer uporabe html sintakse (Lastni vir, 2016) 2.5. PODATKOVNA BAZA MONGODB Podatkovni model smo shranili v dokumentno orientirani podatkovni bazi MongoDb. MongoDb hrani podatke v zbirkah. Zbirka bi v relacijski bazi predstavljala tabelo. Znotraj zbirke so dokumenti, ki bi v relacijski podatkovni bazi predstavljali vrstice v tabeli. Osnovna enota, v kateri se znotraj MongoDb hrani podatek, je dokument, ki ima obliko JSON objekta. JSON bi lahko v slovenski jezik prevedli kot JavaScript objektno poimenovanje. Takšen objekt lahko vsebuje tako primitivne tipe kot nove dokumente (Mongo, 2016). Primitivne tipe predstavljajo števila, logične vrednosti, stringi ( Primitivni tipi, 2016). V praksi to pomeni, da posamezen dokument lahko vsebuje podatke, za katere bi bilo v relacijski podatkovni bazi potrebnih več tabel. Da smo se pri razvoju spletne rešitve namesto za relacijsko bazo odločili za dokumentno bazo, je precej vplivalo dejstvo, da shemo dokumentne baze oblikuje koda. Tak podatkovni model je lažje migrirati, saj se podatki, shranjeni v JSON objektu, precej preprosto spremenijo v drug format, na primer v HTML format. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 7

14 2.6. AKRONIMI JSON JavaScript Object Notation je format, ki se uporablja za izmenjevo podatkov. Gre za objekt, ki je napisan v JavaScript jeziku. Vsak tak objekt je zapisan znotraj zavitih oklepajev. V primeru, da je takšnih objektov več in da ti objekti pripadajo istemu starševskemu objektu, jih med seboj ločimo s končnimi vejicami in vse skupaj zapakiramo v oglate oklepaje. Na sliki 3 lahko vidimo primer uporabe takšnega JSON objekta. Slika 3: Primer uporabe json objekta (Lastni vir, 2016) CRUD Je okrajšava za skupek operacij create, read, update, delete. To so operacije, ki jih program izvede na odjemalski in strežniški strani programa. Na odjemalski strani gre za manipulacijo z DOM elementi, na strežniški strani gre za manipulacijo s podatkovnim modelom (CRUD, 2016) DOM Je akronim za Document Object Model in se nanaša na strukturo HTML dokumenta. V DOM-u je dokument logično in hierarhično strukturiran. DOM razločuje tip, vrednost in hierarhijo celotnega dokumenta. Logično strukturiranje pomeni, da si elementi sledijo po logičnem zaporedju, hierarhično strukturiranje pa pomeni da določen element lahko obstaja zgolj znotraj nekega drugega elementa (DOM, 2016) NODE Je vizualni vmesnik, iz katerega dedujejo številni DOM objekti (Node, 2016) TAG Je tip DOM NODE-a. Nekateri uporabnejši tagi so div, span, p, html, title, script, link (Tag, 2016). Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 8

15 LIFT Akronim se uporablja za strukturiranje projekta. Nanaša se na: - Locate lociranje delov kode je preprosto; - Identify identificiranje kode je hipno; - Flat ploščata struktura projekta; - Try to stay DRY, izogibanje dupliciranju kode (Strukturiranje, 2016) RAZVIJALSKA ORODJA Za razvoj smo uporabili zgolj orodja, ki so na voljo brezplačno. Operacijski sistem, na katerem smo spletno rešitev razvili, je Linux Lubuntu. Za razvojno orodje nam je služil program Visual Studio Code. Za razhroščevanje spletne rešitve smo uporabili Chrome razhroščevalnik. V nadaljevanju bomo predstavili razhroščevalno orodje Chrome razhroščevalnik in razvijalsko orodje Visual Studio Code CHROME RAZHROŠČEVALNIK Chrome razhroščevalnik je na voljo znotraj brskalnika Chrome. Do njega dostopamo z uporabo funkcijske tipke F12. Odpre se nam razvijalska konzola, ki je sestavljena iz več elementov. Za razvoj je pomemben vsak od elementov razvijalske konzole. Pri pisanju kode za spletno rešitev smo največ časa porabili znotraj zavihkov elementi, konzola, omrežje in viri. To orodje je idealno za razhroščevanje spletne rešitve, ki ima večino logike spisane na uporabniški strani in nekoliko manj na serverski strani. Znotraj zavihka elementi pregledujemo in popravljamo HTML kodo in kaskadne stilske datoteke. Znotraj zavihka omrežje pregledujemo, katere knjižnice so naložene znotraj programa. V tem zavihku tudi vidimo, če katera od knjižnic ni prišla do uprabnika. V zavihku viri lahko dostopamo do čisto vsake knjižnice, ki je napisana za naš program. Na tem mestu tudi postavimo točke, kjer želimo da se izvajanje programa zaradi razhroščevanja začasno zaustavi. Takšen razlog bi lahko bil na primer preverjanje vsebine JSON objekta. V zavihku konzola lahko pišemo JavaScript kodo. Ta zavihek nam omogoča pisanje čisto vseh funkcionalnosti, ki nam jih daje jezik JavaScript. Na sliki 4 bomo videli primer chrome razhroščevalnika. Slika 4: Chrome razhroščevalnik (Lastni vir, 2016) Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 9

16 2.7.2 VISUAL STUDIO CODE Gre za razvojno okolje, razvito pri Microsoftu. Microsoft je v času pisanja diplomske naloge podjetje, ki razvija največ programov (Search window, 2016). Visual Studio Code je namenjen razvoju spletnih rešitev. To razvojno okolje za razvoj angular ogrodja se uporablja tudi pri Google-u. Google je mednarodno podjetje, ki je znano predvsem po svojem Google brskalniku (Search io, 2016). Visual Studio Code okolje je zelo prilagodljivo. To pomeni, da si lahko po svoji želji razvijalec prilagodi izgled celotnega urejevalnika. Navigacija med datotekami znotraj projekta je izredno preprosta, saj z uporabo funkcijskih tipk preprosto navigiramo med datotekami. Podprta je tudi integracija z Git okoljem. Git je okolje, na katerega shranjujemo varnostne kopije napisane kode. Dodana vrednost takšne integracije z Git okoljem pride do izraza pri projektih, na katerih dela naenkrat več razvijalcev, kjer vsi hkrati lahko urejajo iste datoteke, brez da bi pri tem izgubili spremembe ostalih sodelujočih. Visual Studio Code podpira razhroščevanje serverske kode. Razhroščevanje serverske kode je v principu zelo podobno razhroščevanju kode na uporabniški strani (Visual Studio Code, 2016). V primerjavi z nekaterim podobnimi urejevalniki kode (Bracket, Sublime, Atom, Notepad++) nam je Visual Studio Code zaradi svoje preprostosti omogočil najbolj nemoteno delo. Na sliki 5 bomo videli primer uporabe razvojnega okolja Visual Studio Code. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 10

17 Slika 5: Razvojno okolje visula studio code (Lastni vir, 2016) Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 11

18 3. STRUKTURA REŠITVE Smernica pri strukturiranju rešitve je uporaba t.i. LIFT metode, ki upošteva 4 osnovne parametre: - Lociranje datotek s kodo naj bo kar se da preprosto in hitro. Lociranje datotek s kodo s tem principom je intuitivno, preprosto in hitro. Datoteke s podobnimi funkcionalnostmi se nahajajo blizu druga druge. - Drugi parameter zapoveduje, da naj imena datotek in direktorijev samodejno povedo, kakšno vsebino pričakujemo v njih. Iz imena datoteke lahko sklepamo, kakšne rešitve bodo reševali algoritmi znotraj nje. - Iskanje datoteke, ki se nahaja na 7. nivoju, je lahko zelo počasno, zato tretji parameter LIFT metode narekuje razvijalcu, naj bo struktura direktorijev čim bolj ploščata. Razvijalec pri tem parametru upošteva lastni občutek, kako globoko naj gnezdi direktorije. Generalni pravili za ta parameter sta : v enem direktoriju naj bo manj kot 10 datotek in struktura, ki vsebuje več kot 3 nivoje, je zamudna. - Četrti parameter LIFT metode narekuje razvijalcu, naj se mu koda ne podvaja. Ko se zelo podobna funkcionalnost pojavi na dveh mestih, je potrebno tak algoritem razčleniti tako, da je uporaben na obeh mestih, kjer se uporablja REŠITEV Rešitev na prvem nivoju loči dva direktorija : - app mapa vsebuje podmapo, ki se imenuje components, in v kateri se nahajajo komponente, ki se jih lahko uporabi na več mestih v spletni rešitvi. Primer takšne komponente je lahko navigacija spletne rešitve. Druga podmapa je shared, ki vsebuje drugi nivo, na katerem se nahajajo komponente, ki sestavljajo spletno rešitev. Vsaka od teh podmap predstavlja mini angularno spletno rešitev, saj bi načeloma lahko vsaka od teh podmap delovala kot samostojna enota ali modul. Assets mapa vsebuje na prvem podnivoju 4 mape. Img mapa vsebuje slike in ikone spletne rešitve. Css direktorij vsebuje kaskadne stilske datoteke spletne rešitve. JS mapa vsebuje JavaScript datoteke, ki niso spisane za angular ogrodje. Libs datoteka vsebuje zunanje knjižnice, kot so angular.js, angular-router.js ipd. Na sliki 6 bomo videli zasnovo prikaza takšne rešitve. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 12

19 Slika 6: Zasnova rešitve (Lastni vir, 2016) 3.2. PROJEKT Vstopna točka spletne rešitve je datoteka app.module.js, v kateri se nastavijo začetne vrednosti gradnikov, od katerih je odvisno delovanje programa. Vstopni pogled je datoteka index.html, v kateri se naložijo datoteke iz mape assets: kaskadne stilske datoteke, slike, knjižnice in JavaScript datoteke. Knjižnice so JavaScript datoteke, ki so bile napisane v razvijalski skupnosti in so brezplačno dostopne vsakemu razvijalcu. V podmapi app/components so shranjene unikatne komponente, znotraj podmape app/shared pa gradniki, ki jih je mogoče uporabljati na več mestih v spletni rešitvi. MVC model se odraža na podnivoju app/components mape. Za primer znotraj lecturer direktorija predstavlja podatkovni model datoteka lecturerservice.js. Pogled predstavlja datoteka lecturerview.html. Kontroler je predstavljen z datoteko lecturercontroller.js. Znotraj mape test sta e2e-test in unit-test direktorija s pripadajočimi testi. Podobno kot ogrodje spletne rešitve so tudi testi napisani z JavaScript sintakso. Na sliki 7 bomo videli prikaz zasnove strukture našega projekta. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 13

20 Slika 7: Zasnova projekta (Lastni vir, 2016) Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 14

21 4. IZVEDBA PROGRAMSKE REŠITVE 4.1. UPORABNIŠKI VMESNIK KOMUNIKACIJA UPORABNIKA Z POGOVORNIMI OKNI Za pozitivno uporabniško izkušnjo je zaželena komunikacija spletne rešitve z uporabnikom. Uporabnik izvaja CRUD operacije in vsaka povratna informacija, ki jo dobi od spletne rešitve, je za pozitivno uporabniško izkušnjo pomembna. CRUD operacije se izvajajo na odjemalski in na strežniški strani. Na odjemalski strani se CRUD nanaša na : - C: kreiranje DOM elementa in kreiranje DOM drevesne strukture - R: branje vnesene vrednosti v DOM elementu - U: sprememba vnešene vrednosti v DOM elementu in sprememba DOM strukture dokumenta - D: brisanje vnešene vrednosti iz DOM elementa ali izbris celotnega DOM elementa Na strežniški strani se CRUD nanaša na : - C: kreiranje novega zapisa v podatkovnem modelu - R: branje vrednosti iz podatkovnega modela - U: sprememba vrednosti v podatkovnem modelu - D: brisanje zapisa iz podatkovnega modela Program z uporabnikom komunicira s štirimi tipi pogovornih oken. Prikaz tipa okna je odvisen od trenutne operacije, ki jo spletna rešitev izvaja večino na strežniški strani. Glede na uspešnost ali neuspešnost izvedenega koraka uporabnik vidi pogovorno okno s prirejeno vsebino. - Pogovorno okno tipa informacija se uporablja za informiranje uporabnika ob operaciji branje, ko spletna rešitev pravilno prebere vrednosti iz podatkovnega modela in vrednosti prenese na strežniško stran. Na sliki 8 bomo videli primer uporabe generičnega pogovornega okna tipa informacija. Slika 8: Generično pogovorno okno tipa informacija (Lastni vir, 2016) - Pogovorno okno tipa ok se uporablja pri operacijah kreiranje, posodabljanje in brisanje, ko spletna rešitev kreira, spremeni ali izbriše Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 15

22 vrednost iz podatkovnega modela in DOM strukture dokumenta. Na sliki 9 bomo videli primer uporabe generičnega pogovornega potrditvenega okna. Slika 9: Generično pogovorno potrditveno okno (Lastni vir, 2016) - Pogovorno okno tipa opozorilo se uporablja pred operacijo delete. S pogovornim oknom spletna rešitev obvesti uporabnika,da bo v naslednjem koraku izbrisan zapis iz podatkovnega modela in iz DOM strukture dokumenta. Na sliki 10 bomo videli primer uporabe generičnega pogovornega okna tipa opozorilo. Slika 10: Generično pogovorno okno tipa opozorilo (Lastni vir, 2016) - Pogovorno okno tipa napaka se uporablja, ko spletna rešitev naleti na napako in je nadaljevanje izvajanje programa zaradi nastale napake onemogočeno. Generično besedilo se zamenja s podrobnim opisom napake. Na sliki 11 bomo videli primer uporabe generičnega pogovornega okna tipa napaka. Slika 11: Generično pogovorno okno tipa napaka (Lastni vir, 2016) PRIJAVNO OKNO Ob vstopu v spletno rešitev uporabnika pričaka neizpolnjeno prijavno okno. Uporabnik v tem koraku vnese uporabniško ime in geslo. Nadaljnji vnos prijave ni potreben, če ob prijavi uporabnik izbere možnost ''Zapomni si me''. S klikom na povezavo ''Pozabljeno geslo?'' se uporabnik premakne na okno za ponastavljanje gesla. S klikom na povezavo ''Registracija'' se uporabnik premakne na registracijsko okno. Na sliki 12 bomo videli primer uporabe prijavnega okna in okna za registracijo. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 16

23 Slika 12: Okno za prijavo in okno za registracijo (Lastni vir, 2016) REGISTRACIJSKO OKNO in OKNO ZA PONASTAVLJANJE GESLA Če uporabnik še nima uporabniškega imena in gesla, s klikom na povezavo registracija odpre okno za registracijo. Obvezna vnosna polja na tem oknu so naslov, geslo in ponovi geslo. Po kliku na gumb ''REGISTRACIJA'' se na uporabniški strani izvede preverjanje obeh gesel. Če se gesli ne ujemata, uporabnik vidi pogovorno okno tipa napaka z besedilom ''Gesli se ne ujemata. Prosim spremenite vnos!''. Če se gesli ujemata, se na strežniško stran pošljeta naslov in geslo. Če je uporabnik vnesel uporabniško ime se prenese tudi to. Če pa uporabnik uporabniškega imena ni vnesel, se namesto tega ob naslednji prijavi upošteva naslov kot zamenjava za uporabniško ime. Po odgovoru iz strežniške strani spletne rešitve je uporabnik registriran in lahko začne pregledovati vsebino. Na sliki 13 bomo videli primer okna za ponastavljanje gesla. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 17

24 Slika 13: Okno za ponastavljanje gesla (Lastni vir, 2016) 4.2. OGRODJE PROGRAMSKE REŠITVE Ogrodje spletne rešitve predstavljajo izborniki, preko katerih uporabnik filtrira iskalne rezultate. Izbere predavatelja, lokacijo, smer študija, predavanje ter datumski termin za prikazani nabor. Potrditev izbranih filtrov potrdi s pritiskom na gumb potrdi. Gumb prekliči ponovno inicializira filtrirna polja z začetnimi vrednostmi. Gumb počisti pa počisti vrednosti iz prikaza filtriranih podatkov, s tem da izbrane vrednosti filtrov ostanejo nespremenjene. V spletno rešitev sta vključeni dve osnovni iskanji. Prvo iskanje se nanaša na iskanje predavanja, kjer so obvezni parametri: - datumski izbor, - predavatelj ali smer študija in izbor predavanja. Drugo iskanje se nanaša na iskanje proste predavalnice, kjer je obvezen parameter zgolj datumski izbor. Opcijski parameter je številka predavalnice. Če uporabnik spletne rešitve izpusti katerega od obveznih parametrov, ga spletna rešitev na manjkajoči parameter opozori z opozorilnim oknom. Na sliki 14 bomo videli prikaz sheme ogrodja programske rešitve. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 18

25 Slika 14: Shema ogrodja spletne rešitve (Lastni vir, 2016) Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 19

26 IZBOR PREDAVATELJA Uporabnik spletne rešitve med aktivnimi predavatelji izbere želenega predavatelja. Predavatelja lahko izbere na dva načina: - poišče predavatelja med abecedno urejenimi predavatelji, - vpiše del imena ali priimka predavatelja v vnosno polje označeno z [...]. Na sliki 15 bomo videli prikaz filtrirnega polja za izbor predavatelja. Slika 15: Filtrirno polje za izbor predavatelja (Lastni vir, 2016) IZBOR LOKACIJE Slušatelj izbere lokacijo iz izbornika prostih lokacij. Na sliki 16 bomo videli prikaz filtrirnega polja za izbor lokacije. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 20

27 Slika 16: Filtrirno polje izbor lokacije (Lastni vir, 2016) DATUMSKI IZBOR Uporabnik spletne rešitve s klikom na ikono za začetni in za končni datum izbere želeni termin predavanja ali lokacije. Na sliki 17 bomo videli prikaz filtrirnih polj za datumski izbor. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 21

28 Slika 17: Filtrirni polji za datumski izbor (Lastni vir, 2016) IZBOR PREDAVANJA Uporabnik spletne rešitve s klikom na smer študija izbere študijski program, za katerega išče predavanje. Spletna rešitev nato samodejno naredi filter za izbrano smer študija. S klikom na povezavo za letnik [1 Letnik] menja letnike študija. Na sliki 18 bomo videli prikaz izbora študijskega programa, na sliki 19 pa filtrirno polje za izbor predavanja glede na smer študija. Slika 18: Prikaz izbora študijskega programa (Lastni vir, 2016) Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 22

29 Slika 19: Filter za izbor predavanja (Lastni vir, 2016) UREJANJE PODATKOV O PREDAVANJU Predavatelj lahko slušateljem doda morebitna obvestila s pritiskom na gumb urejanje. Predavatelju se prikaže okno za dodajanje obvestila. Primer takšnega okna bomo videli na sliki 20. V primeru, da je za predavanje dodano obvestilo bo to obvestilo vidno pod iskalnim rezultatom. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 23

30 Slika 20: Primer okna za dodajanje obvestila (Lastni vir, 2016) IZPIS URNIKA Na sliki 21 bomo prikazali rezultat za iskane pogoje. Uporabnik je med izbrane pogoje dodal filtre študijski program z vrednostjo visokošolski strokovni program in datumski izbor z vrednostima in Po pritisku na gumb potrdi se mu prikaže izpis rezultatov. Pri predavanju Računalništvo in informatika je dodano tudi obvestilo. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 24

31 Slika 21: Primer izpisa urnika (Lastni vir, 2016) 4.3. STILIZIRANJE PROGRAMSKE REŠITVE V spletni rešitvi smo uporabili lastne kaskadne stilske datoteke. Uporabljene kaskadne stilske datoteke smo shranili znotraj podmape assets/css. Vsakemu pogledu smo dodali svojo kaskadno stilsko datoteko. Če se nek stil uporabi na več mestih, se doda nova datoteka base.css, do katere dostopajo vsi pogledi znotraj spletne rešitve PODATKOVNI MODEL Podatkovni model vsebuje 3 sheme oziroma zbirke: zbirko predavatelja, zbirko predavanja, zbirko slušatelja ZBIRKA PREDAVATELJ Zbirka predavatelj je nabor dokumentov, v katerih so shranjeni podatki o predavateljih. Predavatelji imajo svojo unikatno identifikacijsko številko. V polju persondata so shranjeni kontaktni podatki, ime, priimek, naziv, telefonska številka, . Predavatelj je lahko aktiven ali neaktiven. V filtrirnem izboru so prikazani zgolj tisti predavatelji, ki imajo začetno vrednost isactive. Shema predavatelj vsebuje vrednost created, ki določi, kdaj je bil predavatelj dodan v sistem. Shema predavatelj vsebuje vrednost updated, ki pove kdaj so bili podatki o predavatelju spremenjeni. Zgodovine sprememb se v obstoječi shemi ne beleži. V shemi predavatelj je referenca na shemo lecture, v kateri so podatki o predmetih, ki jih predavatelj predava. Na sliki 22 bomo videli primer uporabe zbirke predavatelja v naši spletni rešitvi. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 25

32 Slika 22: Primer uporabe zbirke predavatelja (Lastni vir, 2016) ZBIRKA PREDAVANJE Zbirka predavanja je nabor dokumentov, v katerih so shranjeni podatki o predmetih, ki se predavajo. Predavanje ima svojo unikatno številko, preko katere zbirka predavatelja dostopa do podatkov o predavanjih. Vrednost title je naslov predmeta, ki se predava. Vrednost level se nanaša na letnik študija za vsebino predavanja. Vrednost programm določa kateremu programu je namenjeno to predavanje. Aktivnost predavanja je določeno z vrednostjo isactive. Spletna rešitev v primeru zastaranja predavanja izbriše vrednost isactive. Predmet, ki je označen kot neaktiven, ni mogoče ponovno aktivirati. Na sliki 23 bomo videli primer uporabe zbirke predavanja. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 26

33 Slika 23: Primer uporate zbirke predavanja (Lastni vir, 2016) ZBIRKA SLUŠATELJ Zbirka slušatelj je nabor dokumentov, v katerih so shranjeni podatki o slušateljih predavanj. Unikatni identifikator uporabnika se nahaja v vrednosti person. Vrednost persondata vsebuje osebne podatke slušatelja: ime, priimek, naslov, telefonska številka, smer in letnik študija. Aktivnost slušatelja določa vrednost isactive. Ko sistem kreira slušatelja, je osnovna nastavitev isactive nastavljena na neaktivnost, zato je potrebno slušatelja najprej aktivirati. Dodani sta referenčni vrednosti favoritelecture in favoritelecturer, ki določata priljubljeno predavanje in priljubljenega predavatelja za tega slušatelja. En slušatelj ima aktiven zgolj en uporabniški račun. Referenčna vrednost je sklic na dokument v drugi zbirki. Na sliki 24 bomo videli prikaz zbirke slušatelj Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 27

34 Slika 24: Primer uporabe zbirke slušatelj (Lastni vir, 2016) Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 28

35 5. TESTIRANJE PROGRAMSKE REŠITVE Pri razvoju spletne rešitve smo uporabili tako imenovani testno usmerjeni razvoj. Takšen razvoj narekuje, da se vzporedno s kodo piše tudi test za kodo. V praksi to pomeni, da ima vsaka funkcija, ki se v programu pojavi, pripadajoč test. Tak razvoj omogoči, da se nepravilnosti v programu odkrijejo že v fazi razvoja. Hkrati dobro napisani testi služijo tudi kot dokumentacija projekta. V angularno MVC spletno rešitev smo vključili dva tipa testov. Delovanje pogleda smo testirali s pomočjo e2e testa. Delovanje podatkovnega modela in kontrolerja smo testirali z uporabo eno enotnih testov. Za spisane teste smo uporabili skriptni jezik JavaScript (TDD, 2016) ENO ENOTNI TEST Eno enotno testiranje spletne rešitve pomeni testiranje posameznih delov spletne rešitve. Dober eno enotni test je napisan po principu črne skrinjice. Princip črne skrinjice pomeni, da testiranje ene enote ne sme biti odvisno od nobene druge komponente. En test testira točno eno funkcijo. En test vrne točno en tip podatka. Če na primer programska funkcija vrača številčno vrednost mora tudi eno enotni test vračati številčno vrednost (Enotni testi, 2016) POTEK TESTIRANJA ENO ENOTNIH TESTOV Za testiranje eno enotnih testov smo najprej pripravili testno okolje. Pripravili smo si dokument v katerega bomo zapisali vsebino testov. Vsebina testov so JavaScript funkcije. V spletni rešitvi smo za primer delovanja eno enotnih testov s testi pokrili delovanje datumskih filtrov: - Izbor filtrirnega podatka datum od mora biti tipa Date. Če je filtrirni podatek pravilnega tipa vrne true, drugače false. True pomeni da je objekt pravilnega tipa, false pomeni da je objekt napačnega tipa; - Izbor filtritnega podatka datum do mora vrniti JavaScript objekt tipa Date. Veljajo iste zakonitosti kot pri prejšnji alineji; - Vrednost filtra datum od mora biti nižja od vrednosti filtra datum do. Če je trditev pravilna vrne funkcija testa rezultat true, drugače pa false REZULTATI TESTIRANJA ENO ENOTNIH TESTOV Kot bomo videli na sliki 25, smo rezultate eno enotnih testov zapisali v terminalsko okno. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 29

36 Slika 25: Rezultati eno enotnih testov (Lastni vir, 2016) 5.2. E2E TEST E2E testiranje je testiranje spletne rešitve od začetka do konca s pomočjo napisanega programa. Velikokrat zaradi velikosti neke spletne rešitve ni realno pričakovati da se celoten test vmesnika izvede ročno. Zaradi tega se vzporedno z razvojem pogledov piše tudi e2e test, ki avtomatizira testiranje. E2E test pokriva vstop v spletno rešitev, pravilnost vnesenega gesla, preverja vsebino filtrirnih podatkov, delovanje gumbov, naslov v brskalniku (E2E, 2016) POTEK TESTIRANJA E2E TESTOV Za testiranje E2E testov smo najprej pripravili testno okolje. Pripravili smo dva dokumenta. V prvem dokumentu so napisani testi, v drugem dokumentu so napisane nastavitve za teste. V dokumentu z nastavitvami se nahajajo navodila na katerem spletnem naslovu in na katerem portu naj se aplikacija testira. Ker gre za prototipno rešitev je naslov za testiranje kar na naslovu na portu 3000, ki je osnovni port za testiranje E2E testov. V dokumentu z nastavitvami je napisana tudi lokacija na katero naj se zapišejo rezultati E2E testa. V našem primeru smo rezultate testa vpisali v terminalsko okno. V dokumentu z napisani testi smo napisali JavaScript kodo, ki določa katere funkcionalnosti spletne rešitve naj se testirajo. Z E2E smo pokrili sledeča delovanja: - Vstop uporabnika v aplikacijo s pravilno kombinacijo uporabniškega imena in (Janez) gesla (!Kranjski.); - Vstop uporabnika v spletno rešitev z nepravilno kombinacijo uporabniškega imena in gesla; - Prikaz pogovornega okna tipa informacija; - Prikaz pogovornega okna tipa ok; Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 30

37 - Prikaz pogovornega okna tipa opozorilo; - Prikaz pogovornega okna tipa napaka; - Filtrirni izbor smeri visokošolski strokovni; - Filtrirni izbor predavatelja Kern Tomaž; - Filtrirni izobr lokacije 111; - Filtrirni izbor predavanja Matematika; - Datumski izbor za vrednost od ; - Datumski izbor za vrednost do ; - Kombinacijo filtrirnega izbora lokacija, datum od, datum do; - Kombinacijo filtrirnega izbora predavatelj, datum od, datum do; - Ali se tabela napolni z rezultati iskanja; - Delovanje gumba urejanje; - Delovanje gumba počisti; - Delovanje gumba prekliči; - Delovanje gumba potrdi; REZULTATI TESTIRANJA E2E TESTOV Rezultate testa smo zapisali v terminalsko okno. Primer rezultatov E2E testa si bomo ogledali na sliki 26. Kot je razvidno iz končnega poročila znotraj rezultatov so vsi naši testi uspešno izvedeni, noben test ni vrnil napake. Iz rezultata lahko vidimo tudi, da smo vse teste izvedli do konca saj v statusu izvajanje (pending) ni nobenega testa. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 31

38 Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 32

39 6. SWOT ANALIZA S SWOT analizo smo analizirali slabosti, prednosti, priložnosti in grožnje, ki pretijo spletni rešitvi (Koncepti poslovanja, 2016). V tabeli 1 bomo prikazali tabelo SWOT analize za spletno rešitev in jo v prihodnjih podpoglavjih tudi opisali. Tabela1: Tabela SWOT analize 6.1. SLABOSTI SPLETNE REŠITVE Prva slabost spletne rešitve je uporaba zgolj registriranim uporabnikom. Uporabnik brez uporabniškega imena in gesla ne more vstopiti v spletno rešitev. Registracija za uporabo velikokrat odvrne ljudi od uporabe spletne rešitve. Večina podatkov je shranjenih na strani uporabnika rešitve. Ti shranjeni podatki se osvežijo, ko uporabnik pride v brezžično omrežje. Dokler uprabnik ni v omrežju, ne vidi morebitne spremembe lokacije ali termina predavanja. Slabost je lahko tudi nepooblaščen dostop v spletno rešitev, do katerega lahko pride zaradi fizične odtujitve naprave uporabnika (Swot analiza, 2016). Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 33

40 6.2. PREDNOSTI SPLETNE REŠITVE Prednost uporabe spletne rešitve je preprosta navigacija med filtrirnimi podatki. Izbor filtra je mogoč zgolj s klikom na izbrani filter. Spletna rešitev je uporabna na različnih platformah. Uporabna je na osebnih računalnikih, pametnih telefonih, tabličnih računalnikih. Uporabna je tudi v različnih brskalnikih, saj se s kaskadnimi stilskimi datotekami prilagaja vmesnik glede na platformo, na kateri je uporabnik. Ko se uporabnik vpiše v spletno rešitev, niso potrebni dodatni vpisi uporabniškega imena in gesla (Swot analiza, 2016) PRILOŽNOSTI Spletna rešitev ima velik potencial v nadgradnji administrativnega dela. V obstoječo rešitev se podatki o predavateljih in predavanjih vpisujejo direktno v podatkovno bazo. V prihodnjih verzijah programske rešitve bi se lahko izdelal vmesnik, preko katerega bi pooblaščena oseba dodajala podatke. V spletno rešitev bi se lahko vključila dodatna vnosna polja, kjer bi slušatelji ocenjevali kvaliteto predavanja, podajali mnenja in predloge. Spletna rešitev bi lahko uvažala predavatelje in slušatelje iz zunanjih sistemov. V primeru uporabe spletne rešitve preko pametnega telefona bi uporabnik lahko preko sms-a dobil sporočilo o spremembi termina. Uporabnik bi na podoben način lahko prejel tudi alarm o predavanju. Spletna rešitev bi lahko ponudila dodatne vsebinske razširitve, kot so iskanje lokacij in terminov izpitov ter prijavljenih slušateljev na izpit (Swot analiza, 2016) GROŽNJE Grožnjo predstavljajo napisane spletne rešitve, ki ponujajo podobno funkcionalnost. Grožnja so nove spletne rešitve, ki so mogoče še hitrejše, prijetnejše za uporabo, prijetnejše na pogled (Swot analiza, 2016). Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 34

41 7. ZAKLJUČKI V nadaljnjih podpoglavjih si bomo ogledali oceno učinka pristopa k MVC razvoju in pristop vzdrževanja MVC spletne rešitve OCENA UČINKOV MVC način razvoja je učinkovit zaradi ločevanja funkcionalnosti programa na logične vsebine. Za večje programe, kjer na razvoju deluje več programerjev učinkovitost takega razvoja programskih rešitev, pride še posebno do izraza. Programer, ki mu je bližje strukturiranje podatkovnega modela, lahko razvije celoten podatkovni model spletne rešitve. Nekdo drug, ki mu je bližje oblikovanje, se lahko loti razvoja pogledov s pisanjem HTML datotek in kaskadnimi stilskimi datotekami. Nekdo tretji, ki mu je bližje razmišljanje in programiranje logičnih zank, pa piše kontrolerje. Vzporedno s pisanjem kode nastajajo testi, ki odkrivajo napake in pomanjkljivosti v programu. Če se razvojnemu timu pridruži nov razvijalec, zelo hitro pomaga s konkretnim delom, ker je spoznavanje spletne rešitve z MVC strukturo, ki je pokrita tudi s testi, zelo enostavno POGOJI ZA UVEDBO Prototipno rešitev se dokaj enostavno integrira v že obstoječe spletne rešitve, kjer se prikazujejo informacije o predavanjih in lokacijah predavanj. Prototipno rešitev je, kjer je to smiselno, dokaj preprosto vključiti v že obstoječe spletne rešitve. Pred vključitvijo bi bilo potrebno pravilnost izvedbe programske rešitve temeljito stesitrati MOŽNOSTI NADALJNEGA RAZVOJA Vzdrževanje MVC spletne rešitve je dokaj preprosto, ker je struktura posameznih MVC projektov bolj ali manj podobna. V osnovi je struktura razdeljena na podatkovni model, pogled in kontroler. Če je podatkovni model zelo obsežen, se vsebina razdeli po posameznih datotekah. Isto velja tudi za poglede in kontrolerje. Dokaj preproste so dopolnitve programov s takšno strukturo, saj vsak nov modul predstavlja nov vtičnik v MVC spletno rešitev. Ena od možnosti nadgradnje obstoječe spletne rešitve je tudi uvoz podatkov iz zunanjih virov v realnem času. Vsakič, ko bo uporabnik prvič odprl določeno stran spletne rešitve, se bodo podatki osvežili iz zunanjega vira. Boštjan Koželj: Spletna rešitev za iskanje terminov in lokacij predavanj stran 35