SPLETNA REŠITEV ZA ISKANJE TERMINOV IN LOKACIJ … · boljša za izražanje poslovne logike. Deklerativna koda pomeni, da bomo dali Deklerativna koda pomeni, da bomo dali programu

Diplomsko delo visokošolskega strokovnega študija

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

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.

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

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

KAZALO

1. UVOD ........................................................................................... 1

1.1. PREDSTAVITEV PROBLEMA ............................................................. 1

1.2. NAMEN IN CILJI DIPLOMSKEGA DELA ................................................. 1

1.3. METODE DELA............................................................................ 2

1.4. OMEJITVE DIPLOMSKEGA DELA ........................................................ 2

2. RAZVOJ SPLETNIH PROGRAMSKIH REŠITEV ............................................... 3

2.1. DEFINICIJA MVC MODELA............................................................... 3

2.1.1. ANGULAR MVC ...................................................................... 3

2.2. SKRIPTNI JEZIK JAVASCRIPT.......................................................... 4

2.3. STILSKI JEZIK CSS ...................................................................... 6

2.4. DEKLERATIVNI JEZIK HTML ............................................................ 6

2.5. PODATKOVNA BAZA MONGODB ....................................................... 7

2.6. AKRONIMI................................................................................. 8

2.6.1. JSON ................................................................................. 8

2.6.2. CRUD................................................................................. 8

2.6.3. DOM.................................................................................. 8

2.6.4. NODE................................................................................. 8

2.6.5. TAG .................................................................................. 8

2.6.6. LIFT.................................................................................. 9

2.7. RAZVIJALSKA ORODJA ................................................................. 9

2.7.1. CHROME RAZHROŠČEVALNIK..................................................... 9

2.7.2. VISUAL STUDIO CODE ............................................................ 10

3. STRUKTURA REŠITVE ....................................................................... 12

3.1. REŠITEV................................................................................. 12

3.2. PROJEKT................................................................................ 13

4. IZVEDBA PROGRAMSKE REŠITVE .......................................................... 15

4.1. UPORABNIŠKI VMESNIK ................................................................ 15

4.1.1. KOMUNIKACIJA UPORABNIKA Z POGOVORNIMI OKNI........................ 15

4.1.2 REGISTRACIJSKO OKNO in OKNO ZA PONASTAVLJANJE GESLA ............. 17

4.2. OGRODJE PROGRAMSKE REŠITVE.................................................... 18

4.2.1. IZBOR PREDAVATELJA ........................................................... 20

4.2.2. IZBOR LOKACIJE.................................................................. 20

4.2.3. DATUMSKI IZBOR .................................................................. 21

4.2.4. IZBOR PREDAVANJA .............................................................. 22

4.2.5. UREJANJE PODATKOV O PREDAVANJU ........................................ 23

4.3. STILIZIRANJE PROGRAMSKE REŠITVE ............................................. 25

4.4. PODATKOVNI MODEL .................................................................. 25

4.4.1. ZBIRKA PREDAVATELJ ........................................................... 25

4.4.1. ZBIRKA PREDAVANJE ............................................................. 26

4.4.2. ZBIRKA SLUŠATELJ ............................................................... 27

5. TESTIRANJE PROGRAMSKE REŠITVE...................................................... 29

5.1. ENO ENOTNI TEST ..................................................................... 29

5.1.1. POTEK TESTIRANJA ENO ENOTNIH TESTOV .................................. 29

5.1.2. REZULTATI TESTIRANJA ENO ENOTNIH TESTOV ............................. 29

5.2. E2E TEST ............................................................................... 30

5.2.1. POTEK TESTIRANJA E2E TESTOV ............................................... 30

5.2.2. REZULTATI TESTIRANJA E2E TESTOV .......................................... 31

6. SWOT ANALIZA.............................................................................. 33

6.1. SLABOSTI SPLETNE REŠITVE ......................................................... 33

6.2. PREDNOSTI SPLETNE REŠITVE ....................................................... 34

6.3. PRILOŽNOSTI ........................................................................... 34

6.4. GROŽNJE ............................................................................... 34

7. ZAKLJUČKI ................................................................................... 35

7.1. OCENA UČINKOV ....................................................................... 35

7.2. POGOJI ZA UVEDBO ................................................................... 35

7.3. MOŽNOSTI NADALJNEGA RAZVOJA ................................................. 35

LITERATURA IN VIRI ........................................................................ 36

KAZALO SLIK................................................................................. 38

KAZALO TABEL ............................................................................ 39

Univerza v Mariboru - Fakulteta za organizacijske vede Diplomsko delo visokošolskega strokovnega študija

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

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.

1.1. 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.

1.2. 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.



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.

1.4. 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.



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.

2.1. 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).

2.1.1. 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



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.

2.2. 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



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



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).

2.3. 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



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.



2.6. AKRONIMI

2.6.1. 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)

2.6.2. 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).

2.6.3. 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).

2.6.4. NODE

Je vizualni vmesnik, iz katerega dedujejo številni DOM objekti (Node, 2016).

2.6.5. TAG

Je tip DOM NODE-a. Nekateri uporabnejši tagi so div, span, p, html, title, script, link (Tag, 2016).



2.6.6. 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).

2.7. 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.

2.7.1. 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)



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.



Slika 5: Razvojno okolje visula studio code (Lastni vir, 2016)



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.

3.1. 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.



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.



Slika 7: Zasnova projekta (Lastni vir, 2016)



4. IZVEDBA PROGRAMSKE REŠITVE

4.1. UPORABNIŠKI VMESNIK

4.1.1. 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



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)

4.1.2. 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.



Slika 12: Okno za prijavo in okno za registracijo (Lastni vir, 2016)

4.1.2 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 email 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 email 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 email 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.



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.



Slika 14: Shema ogrodja spletne rešitve (Lastni vir, 2016)



4.2.1. 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)

4.2.2. IZBOR LOKACIJE

Slušatelj izbere lokacijo iz izbornika prostih lokacij. Na sliki 16 bomo videli prikaz filtrirnega polja za izbor lokacije.



Slika 16: Filtrirno polje izbor lokacije (Lastni vir, 2016)

4.2.3. 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.



Slika 17: Filtrirni polji za datumski izbor (Lastni vir, 2016)

4.2.4. 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)



Slika 19: Filter za izbor predavanja (Lastni vir, 2016)

4.2.5. 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.



Slika 20: Primer okna za dodajanje obvestila (Lastni vir, 2016)

4.2.6. 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 14.06.2016 in 16.04.2016. Po pritisku na gumb

potrdi se mu prikaže izpis rezultatov. Pri predavanju Računalništvo in informatika

je dodano tudi obvestilo.



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.

4.4. PODATKOVNI MODEL

Podatkovni model vsebuje 3 sheme oziroma zbirke: zbirko predavatelja, zbirko predavanja, zbirko slušatelja.

4.4.1. 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, e-mail. 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.



Slika 22: Primer uporabe zbirke predavatelja (Lastni vir, 2016)

4.4.1. 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.



Slika 23: Primer uporate zbirke predavanja (Lastni vir, 2016)

4.4.2. 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



Slika 24: Primer uporabe zbirke slušatelj (Lastni vir, 2016)



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).

5.1. 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).

5.1.1. 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.

5.1.2. REZULTATI TESTIRANJA ENO ENOTNIH TESTOV

Kot bomo videli na sliki 25, smo rezultate eno enotnih testov zapisali v

terminalsko okno.



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).

5.2.1. 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 http://localhost, 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;

http://localhost/



- 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 01.01.2014; - Datumski izbor za vrednost do 31.12.2016; - 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;

5.2.2. 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.





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).



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).

6.3. 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).

6.4. 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).



7. ZAKLJUČKI

V nadaljnjih podpoglavjih si bomo ogledali oceno učinka pristopa k MVC razvoju in pristop vzdrževanja MVC spletne rešitve.

7.1. 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.

7.2. 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.

7.3. 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.



LITERATURA IN VIRI

Caniuse. (2016). Pridobljeno 6.1. 2016,

http://caniuse.com/#search=javascript

Crockford. (2001). Pridobljeno 2.1. 2016,

http://www.crockford.com/javascript/javascript.html

Crud. (2016). Pridobljeno 21.5.2016,

https://wiki.apidesign.org/wiki/CRUD

Dom. (2000). Pridobljeno 16.2. 2016,

https://www.w3.org/TR/DOM-Level-2-Core/introduction.html

Enotni testi. (2012). Pridobljeno 16.5. 2016,

https://www.smashingmagazine.com/2012/06/introduction-to-javascript-

unit-testing/

Flanagan, D. (2011). JavaScript. Sebastopol: O'Reilly Media, Inc.

Flash definicija. (2005). Pridobljeno 16.2. 2016,

http://whatis.techtarget.com/definition/Flash

Git angular. (2016). Pridobljeno 23.3.2016,

https://angular-ui.github.io

Html elementi. (1999). Pridobljeno 15.2. 2016,

http://www.w3schools.com/html/html_elements.asp

Koncepti poslovanja. (2016). Pridobljeno 16.5. 2016,

http://www.koncept-poslovanje.si/?page_id=1187

Mongo. (2016). Pridobljeno 14.3. 2016,

https://www.mongodb.com

MVC Pattern. (2016). Pridobljeno 4.1. 2016,

http://www.tutorialspoint.com/design_pattern/mvc_pattern.htm

Node. (1999). Pridobljeno 16.2. 2016,

https://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/Node.html

http://caniuse.com/#search

http://caniuse.com/#search



http://www.w3.org/TR/DOM-Level-2-Core/introduction.html



http://whatis.techtarget.com/definition/Flash



http://www.koncept-poslovanje.si/

http://www.koncept-poslovanje.si/

http://www.mongodb.com/



http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/Node.html



Primitivni tipi. (2010). Pridobljeno 14.2. 2016,

https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-

javascript-primitives/

Search io. (2011). Pridobljeno 4.5.2016,

http://searchcio.techtarget.com/definition/Google-The-Company

Search window. (2007). Pridobljeno 4.5. 2016,

http://searchwindowsserver.techtarget.com/definition/Microsoft

Strukturiranje. (2016). Pridobljeno 15.4. 2016,

https://johnpapa.net/angular-app-structuring-guidelines/

SWOT analiza. (2016). Pridobljeno 16.5. 2016,

https://www.mindtools.com/pages/article/newTMC_05.htm

Tag. (1999). Pridobljeno 16.2. 2016,

https://www.w3.org/TR/html-markup/elements.html

Tdd. (2002). Pridobljeno 16.5. 2016,

http://agiledata.org/essays/tdd.html

Visual Studio Code. (2016). Pridobljeno 15.4. 2016,

https://code.visualstudio.com/







http://www.mindtools.com/pages/article/newTMC_05.htm

http://www.w3.org/TR/html-markup/elements.html





KAZALO SLIK

Slika 1: Primer uporabe razreda znotraj stilske datoteke (Lastni vir, 2016) ............. 6

Slika 2: Primer uporabe html sintakse (Lastni vir, 2016) ............................................... 7

Slika 3: Primer uporabe json objekta (Lastni vir, 2016) ................................................ 8

Slika 4: Chrome razhroščevalnik (Lastni vir, 2016) ......................................................... 9

Slika 5: Razvojno okolje visula studio code (Lastni vir, 2016) .................................... 11

Slika 6: Zasnova rešitve (Lastni vir, 2016) ...................................................................... 13

Slika 7: Zasnova projekta (Lastni vir, 2016) ................................................................... 14

Slika 8: Generično pogovorno okno tipa informacija (Lastni vir, 2016) .................... 15

Slika 9: Generično pogovorno potrditveno okno (Lastni vir, 2016) ............................ 16

Slika 10: Generično pogovorno okno tipa opozorilo (Lastni vir, 2016) ...................... 16

Slika 11: Generično pogovorno okno tipa napaka (Lastni vir, 2016) .......................... 16

Slika 12: Okno za prijavo in okno za registracijo (Lastni vir, 2016)........................... 17

Slika 13: Okno za ponastavljanje gesla (Lastni vir, 2016)............................................ 18

Slika 14: Shema ogrodja spletne rešitve (Lastni vir, 2016) ......................................... 19

Slika 15: Filtrirno polje za izbor predavatelja (Lastni vir, 2016) ............................... 20

Slika 16: Filtrirno polje izbor lokacije (Lastni vir, 2016) ............................................. 21

Slika 17: Filtrirni polji za datumski izbor (Lastni vir, 2016) ........................................ 22

Slika 18: Prikaz izbora študijskega programa (Lastni vir, 2016) ................................. 22

Slika 19: Filter za izbor predavanja (Lastni vir, 2016) ................................................. 23

Slika 20: Primer okna za dodajanje obvestila (Lastni vir, 2016) ................................ 24

Slika 21: Primer izpisa urnika (Lastni vir, 2016) ............................................................ 25

Slika 22: Primer uporabe zbirke predavatelja (Lastni vir, 2016) ................................ 26

Slika 23: Primer uporate zbirke predavanja (Lastni vir, 2016) ................................... 27

Slika 24: Primer uporabe zbirke slušatelj (Lastni vir, 2016) ....................................... 28

Slika 25: Rezultati eno enotnih testov (Lastni vir, 2016) ............................................. 30

Slika 26: Primer izpisa rezultatov testa (Lastni vir, 2016)........................................... 32



KAZALO TABEL

Tabela 1: Tabela SWOT Analize ....................................................................................... 33

Documents

SPLETNA REŠITEV ZA ISKANJE TERMINOV IN LOKACIJ … · boljša za izražanje poslovne logike. Deklerativna koda pomeni, da bomo dali Deklerativna koda pomeni, da bomo dali programu