Kristjan Bleiweis
Spletna aplikacija za razporejanje varnostnikov
DIPLOMSKO DELO
VISOKOˇSOLSKI STROKOVNI ˇSTUDIJSKI PROGRAM PRVE STOPNJE RA ˇCUNALNIˇSTVO IN INFORMATIKA
Mentor : doc. dr. Andrej Brodnik
Ljubljana, 2021
tatov diplomske naloge je potrebno pisno privoljenje avtorja, fakultete ter mentorja.
Besedilo je oblikovano z urejevalnikom besedil LATEX.
Vrsta naloge: Diplomska naloga na univerzitetnem programu prve stopnje Raˇcunalniˇstvo in informatika
Mentor: doc. dr. Andrej Brodnik Opis:
Eden veˇcjih problemov v podjetjih je, ko se toliko poveˇcajo, da jim preprosta orodja ne nudijo veˇc zadovoljive IKT podpore.
V diplomski nalogi analizirajte spremembe, ki so se zgodile v podjetju, ki se ukvarja z varovanjem objektov. Za njihove potrebe pripravite funkcionalne specifikacije za IKT podporo pri delu s ˇcloveˇskimi viri, to je varnostniki. Na podlagi specifikacij zasnujte in implementirajte spletno aplikacijo, ki jo na koncu ˇse ovrednotite.
Title: Web application for security guards scheduling Description:
One more problem in companies that has increased so much that simple tools no longer offer them satisfactory ICT support.
Diplomatic assignments analyze the changes that have taken place in a company engaged in the protection of facilities. Functional specifications for ICT prepared for their needs support working with human resources to be security guards. Based on the specifications, design and implement a web application, which you will eventually evaluate.
veliko nauˇcil. Prav tako sta me ves ˇcas razvijanja aplikacije spodbujala in mi pomagala z nasveti, kako ˇcim bolje reˇsiti problem. Rad bi se zahvalil druˇzini, ki mi je vedno stala ob strani in me podpirala. Posebna zahvala gre tudi mentorju Andreju Brodniku, saj mi brez njega ne bi uspelo priti do konca ˇstudija.
Povzetek Abstract
1 Uvod 1
1.1 Opis problema . . . 1
1.2 Funkcionalna specifikacija . . . 1
1.3 Pregled podroˇcja . . . 6
1.4 Cilj naloge . . . 7
1.5 Struktura naloge . . . 8
2 Uporabljene tehnologije in programska oprema 9 2.1 Podatkovna baza . . . 9
2.2 Programsko okolje . . . 14
2.3 Podporna programska oprema . . . 15
3 Aplikacija 19 3.1 Prijava . . . 20
3.2 Registracija . . . 20
3.3 Navigacijski stranski predel . . . 23
3.4 Dodajanje, spreminjanje in brisanje varnostnikov in objektov . 25 3.5 Zgornji navigacijski predel . . . 35
3.6 Gumbi za bolniˇske odsotnosti in dopuste . . . 41
3.7 Vpisovanje urnika . . . 44
4 Zakljuˇcek 55 4.1 Nadaljni razvoj . . . 55
Literatura 57
2.1 Konfiguracija za vsebnik docker za podatkovno bazo . . . 10
2.2 Entitetno relacijski prikaz podatkovne baze . . . 13
3.1 Konˇcni izgled aplikacije . . . 20
3.2 Prijava v aplikacijo . . . 21
3.3 Modalno okno za registracijo novega varnostnika . . . 22
3.4 Navigacijski stranski predel . . . 23
3.5 Seznam vseh ustanov . . . 24
3.6 Seznam vseh ustanov, ko je izbrana ˇzelena ustanova . . . 24
3.7 Gumbi za dodajanje, posodabljanje in brisanje varnostnikov in objektov . . . 25
3.8 Obrazec za dodajanje varnostnika . . . 26
3.9 Obrazec za dodajanje varnostnika izpolnjena . . . 27
3.10 Sporoˇcilo, da je bil varnostnik uspeˇsno dodan v sistem. . . 27
3.11 Obrazec za posodabljanje varnostnika - zaˇcetno stanje . . . 28
3.12 Obrazec za posodabljanje varnostnika - popravljeno stanje . . 29
3.13 Varnostnik uspeˇsno posodobljen . . . 29
3.14 Obrazec za posodabljanje varnostnika - zaˇcetno stanje . . . 30
3.15 Varnostnik uspeˇsno odstranjen . . . 30
3.16 Obrazec za dodajanje objekta . . . 31
3.17 Izpolnjen obrazec za dodajanje objekta . . . 32
3.18 Sporoˇcilo za uspeˇsno dodajanje objekta v sistem . . . 32
3.19 Obrazec za posodabljanje objekta . . . 33
3.20 Obrazec za posodabljanje objekta - popravljeno stanje . . . . 34
3.23 Objekt uspeˇsno odstranjen . . . 35
3.24 Zgornji navigacijski predel . . . 36
3.25 Dodajanje varnostnika na objekt - zaˇcetno stanje . . . 36
3.26 Dodajanje varnostnika na objekt - konˇcno stanje . . . 37
3.27 Filtriranje varnostnikov . . . 38
3.28 Modalno okno za izbrianje terminov . . . 39
3.29 Modalno okno za izbrianje terminov, ko sta izbrana 2 termina 40 3.30 Dodajanje novega termina . . . 40
3.31 Prikaz termina, ki je bil na novo dodan . . . 41
3.32 Gumbi za bolniˇske odsotnosti in dopuste . . . 41
3.33 Dodajanje bolniˇske odsotnosti . . . 42
3.34 Dodajanje poloviˇcne bolniˇske odsotnosti . . . 42
3.35 Dodajanje dopusta . . . 43
3.36 Dodajanje poloviˇcnega dopusta . . . 43
3.37 Gumb za dodajanje izjem . . . 43
3.38 Aplikacija pred zaˇcetkom uporabe z ˇze izbranim objektom . . 44
3.39 Modalno okno z izbranima varnosntikoma . . . 45
3.40 Aplikacija z izbranimi varnostniki . . . 46
3.41 Modalno okno z izbranima terminoma varovanja . . . 46
3.42 Aplikacija z izbranimi termini . . . 47
3.43 Aplikacija z vpisanim urnikom za polovico meseca . . . 48
3.44 Aplikacija z vpisanimi bolniˇskami in dopusti . . . 48
3.45 Datum razporeda . . . 49
3.46 Kontrolna vrstica . . . 50
3.47 Fond ur uspeˇsno spremenjen . . . 51
3.48 Viˇsanje verzije . . . 52
3.49 Gumb za preklop v zgodovino . . . 52
3.50 Testiranje kontrolne vrstice v programu Postman . . . 53
kratica angleˇsko slovensko
SQL Structured Query Language Strukturirani poizvedovalni jezik
DB Database Podatkovna baza
HTML HyperText Markup Language Jezik za oznaˇcevanje nadbesedila CSS Cascade Style Sheet Kaskadne stilske podloge
REST Representational state transfer Representational state transfer JDBC Java Database Connectivity Java Database Povezovalnik
JS JavaScript JavaScript
API Application Programming Interface Vmesnik za namensko programiranje JSON JavaScript Object Notation JavaScript objektna notacija
IP Internet Protocol Internetni protokol
Naslov: Spletna aplikacija za razporejanje varnostnikov Avtor: Kristjan Bleiweis
V diplomski nalogi bomo predstavili praktiˇcno reˇsitev zastavljenega pro- blema. Za podjetje, ki se ukvarja predvsem z varovanjem objektov, smo razvili spletno aplikacijo, ki bo olajˇsala in s tem optimizirala razporejanje zaposlenih. V aplikacijo se vstopi prek upravljalnika prijav, in sicer z vpisom uporabniˇskega imena in gesla v prijavno okno. Aplikacija sledi, kdo dostopa do doloˇcenih podatkov v sistemu. V tej diplomski nalogi smo zajeli podroˇcje za osebje, ki razporeja zaposlene po objektih. Z aplikacijo se predvsem razpo- rejajo zaposleni, tako da smo vkljuˇcil vse zahtevane funkcionalnosti. Sistem omogoˇca dodajanje novih varovanih objektov in novih varnostnikov v sistem.
Ko je objekt v sistemu, se mu lahko dodeli termin varovanja in na ta termin se dodeli varnostnik, ki bo v opredeljenem ˇcasu fiziˇcno prisoten. Razporejevalec lahko dodaja tudi podatke o odsotnosti z dela zaradi bolezni in o dopustih.
Razporedi se lahko sˇcasoma tudi spreminjajo, zato je podjetje ˇzelelo, da se jih razdeli na mesece in nato ˇse na verzije, torej je lahko v enem mesecu tudi veˇc verzij. Najviˇsja verzija pomeni aˇzurno stanje.
Kljuˇcne besede: spletna aplikacija, razpored, varovanje.
Title: Web application for scheduling security guards Author: Kristjan Bleiweis
The thesis aims to present my practical solution to a problem. The company whose core business is the provision of security of facilities invited me to develop a web application that will facilitate and thus optimise the overall deployment of employees. A user can access the application via the login manager. The username and password are to be entered in the login window so that the application gets the information on who is accessing certain data in the system. This assignment covers the area managed by staff members who deploy employees across various facilities. The app is primarily intended for employee schedulers. The system supports the addition of new facilities and new security guards to the system. Once the facility has been entered into the system, a security provision schedule can be assigned, specifying the name of the individual security guard who will be physically present during a specific period of time. The scheduler can also add sick leave and annual leave. Schedules frequently change over time, and the company therefore wanted to split them into months and further into versions, so there can be multiple versions in one month. The highest version means the updated status.
Keywords: web aplication, schedule, security.
Uvod
1.1 Opis problema
Za podjetje, katerega osnovna dejavnost je varovanje objektov smo optimizi- rali proces razporejanja varnostnikov. Sedaj to poˇcnejo s programskim orod- jem Microsoft Excel, ki pa ni primeren za to storitev. Teˇzave z obstojeˇcim sistemom so povezane s tem, da naˇcin ni skalabilen. Slednje pomeni, da ni bilo teˇzav s prekrivanjem, dokler so imeli 40 zaposlenih, saj je razporejevalec imel informacije o vseh zaposlenih v glavi. Sedaj pa zaposlujejo veˇc kot 200 ljudi, na ta naˇcin ni veˇc mogoˇce dodeljevati. Teˇzave so se pojavljale, ker pro- gram Excel ni primeren, tako je lahko razporejevalec dodelil dva varnostnika za isti termin ali pa istega varnostnika priredil dvema razliˇcnima objektoma v istem terminu, saj ga program na to ni opozoril. Prav tako je bilo konec meseca izredno zahtevno pridobiti podatke o ˇstevilu opravljenih ur dela po- sameznega varnostnika, ˇce je ta svoje obveznosti opravljal na treh razliˇcnih lokacijah.
1.2 Funkcionalna specifikacija
Podjetje je specializirano za varovanje objektov. Storitve varovanja zagota- vljajo zdravstvenim domovom, muzejem, knjiˇznicam in galerijam (v nada-
1
ljevanju: objekti) z zaposlenimi, ki so strokovno usposobljeni za varovanje objektov (v nadaljevanju: varnostniki).
V diplomski nalogi se reˇsuje problem razporejanja varnostnikov po objektih, s ˇcimer se zagotavlja njihovo varovanje. Poleg tega reˇsitev omogoˇca pregled zadolˇzitev varnostnikov po ˇcasovnih obdobjih, ki so ˇze bile izvedene (prete- klost) ali pa ˇse bodo (naˇcrtovane). Z drugimi besedami, upravljalec sistema mora imeti moˇznost:
• dodajati, popravljati ali brisati objekt varovanja;
• dodajati, popravljati ali brisati varnostnike;
• pri posameznem objektu opredeliti ure varovanja posameznega objekta in ˇstevilo varnostnikov, ki jih je treba dodeliti. Obdobja so lahko en- kratna ali periodiˇcna (na primer delovnik, konci tedna, vsak ponedeljek in podobno);
• pri posameznemu varnostniku mora imeti moˇznost doloˇciti ˇcas njego- vega dopusta oziroma bolniˇske odsotnosti;
• dodeliti varnostnika za varovanje objekta v doloˇcenem ˇcasovnem obdo- bju;
• pregledovati razpored varnostnikov po objektih oziroma varnostnikih in posameznih ˇcasovnih obdobjih.
Cilj aplikacije je, da lahko razporejevalec naredi urnik varovanja objekta.
Urnik varovanja sestavljajo trije elementi:
• objekt: objekt je prostor oz. stavba, ki potrebuje varovanje v doloˇcenem ˇcasovnem obdobju;
• varnostniki: varnostnik je oseba, ki je zaposlena v podjetju in je uspo- sobljena za varovanje objektov;
• termini varovanja: termin varovanja je ˇcasovni okvir, ki doloˇca pri- hod doloˇcenega varnostnika na objekt in odhod z objekta. Posamezen objekt ima lahko veˇc terminov varovanja, vendar se ti ne smejo pre- krivati med seboj. Termini morajo zadovoljevati potrebe varovanja doloˇcenega objekta.
Primer varovanja objekta:
• objekt: Muzej v Polhovem Gradcu
• pokritost: 06.00 →22.00 (06.00 → 14.00→ 22.00) (vsak dan)
Glede na te potrebe mora biti na objektu Muzej v Polhovem Gradcu vsak dan prisoten varnostnik, ki bo muzej varoval v dopoldanski izmeni (06.00
→14.00), in varnostnik, ki bo muzej varoval v popoldanski izmeni (14.00
→ 22.00). Razpored pomeni dodelitev varnostnikov na doloˇcen objekt za doloˇcen ˇcas. Razpored za doloˇcen mesec je konˇcan, ˇce se upoˇstevajo vsa pravila in se zadostijo vse potrebe po varovanju.
Za vsak razpored je pomembno, da je pokrit, kar pomeni, da je zadovoljena potreba varovanja objekta.
Varovanje je lahko neprestano, torej 24 ur na dan, kar pomeni, da mora biti varnostnik iz podjetja tam prisoten 24 ur na dan. Drug primer varovanja je od 22.00 do 06.00, saj za preostanek varovanja poskrbi ustanova sama.
Aplikacija bo upoˇstevala tudi vse zakonske omejitve razporejanja zaposlenih po varovanih objektih. Zakon pravi, da delovni dan posameznega varnostnika ne sme trajati veˇc kot 13 ur na dan. Prav tako je zakonsko doloˇceno, da mora biti med posameznima izmenama vsaj 11 ur. ˇCe varnostnik dela v noˇcni izmeni iz torka na sredo, pomeni, da po zakljuˇcku izmene (na primer ob 06.00 svojega naslednjega termina ne sme nastopiti pred 17.00. Objekt opredeljuje: naziv, naslov, potreba varovanja.
Varnostnika opredeljuje: ime in priimek, uporabniˇsko ime, geslo. Reˇsitev
hrani naslednje podatke: urnike varovanja – za vsakega varnostnika posebej hranimo tudi podatek o opravljenih urah dela v doloˇcenem mesecu. Aplika- cija omogoˇca, da s klikom na ˇzeljen termin doloˇcimo, da se bo objekt varoval v danem ˇcasovnem obdobju. Termini so vnaprej doloˇceni, ˇce pa pride do kakˇsne izredne spremembe, lahko termine tudi poljubno nastavimo. Na vsa- kem objektu je lahko eden ali veˇc varnostnikov, a ne hkrati. Onemogoˇceno je, da bi se dva termina prekrivala in bi bila na objektu prisotna dva varno- stnika hkrati, kar ni dovoljeno.
Aplikacija doloˇca fond ur, ki razporejevalcu pomaga pri tem, da ne prekoraˇci ˇstevila ur, ki jih lahko posamezen varnostnik opravi v tistem mesecu. Ob vpisu termina se takoj vpiˇse tudi ˇstevilo ur, ki jih bo varnostnik opravil v tisti izmeni. Ure se delijo na veˇc kategorij:
• redne ure so vse ure, opravljene od vkljuˇcno ponedeljka do vkljuˇcno sobote med 06.00 in 22.00;
• noˇcne ure so vse ure, opravljene od vkljuˇcno ponedeljka do vkljuˇcno sobote med 22.00 in 06.00;
• nedeljske in prazniˇcne ure so ure, opravljene ob nedeljah in praznikih med 06.00 in 22.00;
• nedeljske in prazniˇcne noˇcne ure so vse ure, opravljene ob nedeljah in praznikih med 22.00 in 06.00;
• dopust so ure, ki jih koristijo, ko so na letnem dopustu. Vsak dan dopusta je ekvivalent osmim (8) uram. ˇCe je varnostnik zaposlen za poloviˇcen delovni ˇcas, lahko koristi tudi poloviˇcni dopust, kar so samo ˇstiri (4) ure;
• bolniˇska odsotnost so ure, ko so na bolniˇskem dopustu. Vsak dan od- sotnosti zaradi bolezni je ekvivalent osmim (8) uram. ˇCe je varnostnik zaposlen za poloviˇcni delovni ˇcas, lahko koristi tudi poloviˇcne bolniˇske ure, kar so samo ˇstiri (4) ure.
Tak naˇcin beleˇzenja ur na koncu meseca omogoˇci izraˇcun plaˇce varnostnika, saj se urne postavke razlikujejo glede na kategorije ure. Aplikacija poleg vseh ur beleˇzi tudi ˇstevilo prihodov na delo, kar olajˇsa izraˇcun potnih stroˇskov in malic. Da je preverjanje pokritosti objekta laˇzje, je na vrhnjem delu aplikacije postavljena kontrolna vrstica, kjer bo razporejevalec za vsak dan dobil podatek o ˇstevilu ur varovanja objekta. Glede na odstotno pokritost objekta v posameznem dnevu se obarva ozadje celic. Pomen barve ozadja celic:
• zelena oznaˇcuje, da je objekt pokrit 100 % in da je doseˇzena doloˇcena kvota ur;
• rumena oznaˇcuje, da je objekt pokrit okoli 50 % kvote;
• rdeˇca oznaˇcuje, da v tistem terminu ˇse ni vpisana nobena ura, vendar bi morala biti;
• rdeˇca + veˇcje ˇstevilke pomeni(-jo), da smo na objekt vpisali preveˇc varnostnikov, torej bo objekt varovan dlje, kot smo predvideli.
Razporedi se nenehno spreminjajo, zato si je podjetje zaˇzelelo tudi funk- cionalnost verzioniziranja. Verzioniziranje pomeni, da je varnostnik sredi meseca potreboval zamenjavo oz. je priˇslo do spremembe urnika. Na samem objektu je razpored varovanja, ki pove, kateri varnostnik mora biti na loka- ciji. ˇCe se ta razpored spremeni, je podjetje dolˇzno spremeniti tudi razpored varovanja na sami lokaciji.
Verzije razporeda se zaˇcnejo ˇsteti z ena (1) in se na zaˇcetku meseca pona- stavijo na ena. Ko se razporejevalec odloˇci, da bo naredil novo razliˇcico razporeda, se ˇstevilka razliˇcice poveˇca za 1. Hkrati se naredi kopija ˇze ob- stojeˇcega razporeda, prejˇsnja pa se zabeleˇzi v arhivu. Prejˇsnje razliˇcice si je mogoˇce ogledati in natisniti, saj na varovanem objektu ˇzelijo imeti razpored v fiziˇcni obliki. Prejˇsnjih razliˇcic ni moˇzno spreminjati.
1.3 Pregled podroˇ cja
Preden smo se lotil programiranja, smo temeljito pregledal vse moˇznosti za razvoj aplikacije. Naˇcinov za izvedbo je namreˇc veˇc, kot so na primer: spletna aplikacija, namizna aplikacija, mobilna aplikacija. Moˇznost mobilne aplika- cije smo takoj izvzel, saj smo se zavedali, da bo konˇcni uporabnik to aplikacijo veˇcinoma uporabljal na stacionarnem raˇcunalniku.
1.3.1 Namizna aplikacija proti spletni aplikaciji
Imeli smo moˇznost, da razvijemo namizno aplikacijo ali pa spletno aplikacijo.
Po raziskavi in primerjavi med njima, smo se odloˇcili, da bomo razvili spletno aplikacijo. Spletna aplikacija ima to kljuˇcno prednost, da je dostopna v spletnem brskalniku, ki ga ima vsak raˇcunalnik neglede na to kater operacijski sistem uporabnik uporablja. [5]
1.3.2 Shranjevanje podatkov
Poznamo veˇc naˇcinov shranjevanja podatkov, ki se med seboj zelo razliku- jejo, zato smo morali raziskati, katera izmed moˇznosti je najbolj primerna za razvoj take spletne aplikacije. Odloˇcili smo se za entitetno relacijsko podat- kovno bazo, saj je tak naˇcin shranjevanja podatkov najbolj primeren za tako vrsto aplikacije. Ker pa tudi med njimi obstaja nekaj razliˇcnih variacij, smo jih moral primerjati med seboj. Prebrali smo ˇclanke, na podlagi katerih smo ugotovili temeljne razlike med tema implementacijama podatkovne hrambe.
Ugotovili smo, da so razlike minimalne tako v sintaksi kot tudi glede zmoglji- vosti, zato smo se odloˇcili, da bomo za razvoj uporabili tehnologijo Postgres.
[14] [12] [9]
1.3.3 Zaledne tehnologije
Tehnologij za izvajanje zalednih operacij je mnogo, zato smo morali razi- skati, katera bi bila najprimernejˇsa. Glede na to, da smo med opravljanjem
poˇcitniˇskega dela uporabljali tehnologijo NodeJS, ki za svoje delovanje upo- rablja programski jezik JavaScript, je bila to naˇsa prva izbira. Na obvezni delovni praksi pa smo se nauˇcil uporabljati zaledno tehnologijo WildFly, ki za svoje delovanje uporablja programski jezik Java. Po raziskavi smo ugotovili, da imata obe tehnologiji zelo podobne zmogljivosti. Obe namreˇc omogoˇcata zelo dobro povezovanje s podatkovno bazo Postgres. Obe lahko procesirata okoli 2000 transakcij na sekundo. Odloˇcili smo se za tehnologijo NodeJS v kombinaciji z ExpressJS, ker nam je sintaksa bolj berljiva. [13]
1.3.4 Docker
Docker je tehnologija, ki omogoˇca upravljanje z vsebniki. Vsebniki so zmoˇzni poganjati storitve znotraj ˇze obstojeˇcega operacijskega sistema, kar omogoˇca, da se hkrati poganja veˇc procesov. Ta tehnologija je bolj optimizirana od na- vadnih virtualnih sistemov, saj vsi vsebniki uporabljajo en operacijski sistem in ne vsak svojega. [6]
1.3.5 Streˇ znik
Kot ˇze omenjeno, bo aplikacija za svoje delovanje potrebovala podatkovno bazo, ki mora biti za aplikacijo dostopna prek omreˇzja. Odloˇcili smo se, da bomo za to zakupili streˇznik, kjer bomo imeli razliˇcne vsebnike Docker. Prvi od vsebnikov bo namenjen podatkovni bazi, drugi zalednemu delu aplikacije in tretji ˇcelnemu delu. Prav tako smo se odloˇcil, da bo imel streˇznik odprto- kodni operacijski sistem Linux Ubuntu 18.01. Na streˇznik se lahko poveˇzem prek povezave SSH, kar mi zagotavlja popoln nadzor nad raˇcunalnikom prek ukazne vrstice.
1.4 Cilj naloge
Narediti uporabniˇski vmesnik, ki bo omogoˇcal vpisovanje razporedov za po- samezen objekt. Omogoˇcati mora tudi vpisovanje dopustov in bolniˇskih od-
sotnosti.
1.5 Struktura naloge
V prvem delu je opisan naˇcin pregledovanja podroˇcja tehnologij, ki bi jih lahko uporabil. V drugem delu sledi opis, kako smo te tehnologije povezal med seboj. Priloˇzeni so konfiguracijski posnetki zaslona. Tretji del vse- buje podroben opis naˇcina delovanja aplikacije in njenih funkcionalnosti. V ˇcetrtem delu je predstavitev testiranja aplikacije in s tem preverjanja pravil- nosti njenega delovanja. V petem delu pa bomo predstavil moˇznosti nadalj- nje nadgradnje in potencialne prilagoditve aplikacije, da bi ta ob minimalnih popravkih delovala tudi v kakˇsni drugi dejavnosti.
Uporabljene tehnologije in programska oprema
2.1 Podatkovna baza
2.1.1 Docker vsebnik za podatkovno bazo
Prvi vsebnik docker, ki smo ga postavili, je bil namenjen podatkovni bazi.
Kot lahko vidimo na sliki 2.1, gre za podatkovno bazo, ki za svoje delova- nje uporablja Postgres. V tej konfiguraciji nastavimo tudi uporabniˇsko ime in geslo za povezovanje na podatkovno bazo prek konektorja prek vmesnika uporabniˇskega programa JDBC oz. prek orodja DBeaver. Prav tako lahko vidimo, da slikamo lokalna vrata (5432), torej tista, ki so vidna zgolj znotraj vsebnika, v tista, ki so vidna javnosti (54320). Na tak naˇcin omogoˇcam do- stop do te podatkovne baze tudi izven samega vsebnika. Podatkovna baza pa potrebuje tudi prostor na samem operacijskem sistemu in tudi to mu tu doloˇcimo. Vsi podatki, ki jih podatkovna baza shranjuje, se shranijo na /var/lib/postgres/data. Glede na to, da bomo imeli na istem streˇzniku tudi zaledni del programa, ki mora imeti dostop do podatkovne baze, jo registri- ramo v omreˇzje≫database≪in s tem omogoˇcimo preprosto povezovanje med vsebniki.
9
Slika 2.1: Konfiguracija za vsebnik docker za podatkovno bazo
2.1.2 Opis tabel
Podatkovna baza za svoje delovanje uporablja vsebnik, ki je za to namenjen.
Baza, ki je potrebna za delovanje te aplikacije, je sorazmerno preprosta, saj vsebuje zgolj 12 tabel. Shemo baze lahko vidimo na sliki 2.2. Pri vsakem var- nostniku se poleg imena in priimka hranita elektronski naslov in telefonska ˇstevilka. Ker pa ima lahko vsak varnostnik tudi svojo interno identifikacijsko ˇstevilko, hranimo tudi te vrednosti, saj jih potrebujemo za pripravo obraˇcuna ur na koncu meseca. Hrani se tudi uporabniˇsko ime in geslo vsakega varnost- nika. Vsi zgoraj omenjeni podatki, razen gesla, se hranijo v berljivi obliki.
Geslo je zgoˇsˇceno prek funkcije sha512. O vsakem varnostniku se hrani tudi podatek o tem, ali je varnostnik ˇse vedno aktiven in ali je bil varnostnik v preteklosti.
Za vsak objekt, za katerega podjetje izvaja storitev varovanja, se hrani nje- gov ID, na podlagi katerega je mogoˇce objekt preprosto enoliˇcno opredeliti,.
Ker ima podjetje tudi svoje identifikacijske ˇstevilke za objekte podobno kot pri varnostnikih, se hranijo tudi te. Zabeleˇzijo se tudi ime oz. naziv ter naslov tega objekta, da lahko v ˇcloveku prijazni obliki prikaˇzem, za kateri objekt gre in kje se ta nahaja.
Ob vnaˇsanju novega objekta uporabnika prosimo, da vnese ˇstevilo ur potreb- nega varovanja na dan, saj se to lahko razlikuje tudi po posameznih dneh.
Te podatke namreˇc potrebujemo za preverjanje pokritosti objekta.
To je bil opis 2 najpomembnejˇsih tabel, ki ju je treba ˇse povezati, in sicer tako, da nam to najbolj koristi. To se izvede s skupno tabelo, ki se imenuje protecting. Tu se hranijo podatki o tem, kateri varnostnik varuje posamezen objekt, prav tako ˇcas prihoda ter ˇcas odhoda. Ker pri razporedih prihaja do velikih sprememb, hranimo tudi razliˇcico razporeda za doloˇcen mesec. Da je na koncu meseca laˇzje zagotoviti obraˇcun ur, se to shranjuje v loˇceno tabelo pri varnostniku, in sicer se za vsakega varnostnika za vsak mesec posebej hranijo podatki o opravljenih urah in o urah po posameznih kategorijah.
Kategorije so naslednje: dan med tednom, dan med tednom noˇcna, sobota, sobotna noˇcna, nedeljska, nedeljska noˇcna, prazniˇcna, prazniˇcna noˇcna. Da
pa si vse ˇse malce bolj olajˇsam, v isti tabeli hranimo tudi ˇstevilo prihodov in ˇstevilo ur bolniˇske odsotnosti ter ˇstevilo ur dopusta. Podatki o odsotnosti z dela hranimo tudi v posebni tabeli, da je laˇzje ugotoviti, kdaj je doloˇcen varnostnik na dopustu oz. je odsoten zaradi bolezni.
Cez mesec prihaja do sprememb urnika, zato ga je treba ponovno natisni-ˇ ti oz. sporoˇciti stranki, kateri varnostnik bo varoval njihov objekt. Ker pa je bila zahteva naroˇcnika, da se hranijo pretekle razliˇcice razporeda, smo to zagotovili s pomoˇcjo dodatne tabele, in sicer protectingbackup, v kateri hranim vse stare razporede. V tabeli odsotnosti backup pa hranimo tudi vse pretekle izostanke od dela. Za tako metodo smo se odloˇcili, ker je najlaˇzje narediti kopijo obstojeˇcega razporeda in jo hraniti v podatkovni bazi. Tabela versionControlje namenjena temu, da vemo, katera je najnovejˇsa razliˇcica za tekoˇc mesec in posamezen objekt.
Slika 2.2: Entitetno relacijski prikaz podatkovne baze
2.2 Programsko okolje
2.2.1 Visual Studio Code
Microsoftov program Visual Studio Code je namenjen predvsem urejanju programske kode. Program je brezplaˇcen in je dostopen prek njihove uradne spletne strani od leta 2015 dalje. V programu je mogoˇce dodati vtiˇcnike, ki omogoˇcajo dodatne funkcionalnosti. Uorabljamo Bracket Pair Colorizer 2, da nam obarva oklepaje, s ˇcimer se bistveno poveˇca preglednost kode, saj je mogoˇce preprosto ugotoviti, kje se kateri oklepaj zaˇcne in kje konˇca. Naslednji vtiˇcnik je Tabnine Autocomplete AI, ki omogoˇca smiselno predlaganje kode.
Vtiˇcnik Git Blame uporabljam zaradi veˇcje preglednosti nad razliˇcicami is- tega dokumenta oz. datoteke. S tem vtiˇcnikom zlahka ugotovimo, v kateri git potrditvi smo spreminjali specifiˇcen del kode. Visual Studio Code ima vgrajen tudi terminal, tako da smo lahko prek tega uporabljali vse ukaze git v samem razvojnem okolju. [8]
2.2.2 DBeaver
DBeaver je programska oprema za administracijo podatkovnih baz. V diplom- ski nalogi smo uporabili relacijsko podatkovno bazo PostgreSQL. PostgreSQL oz. skrajˇsano Postgres je brezplaˇcen in odprtokoden sistem za upravljanje z relacijskimi podatkovnimi bazami. V programu DBeaver smo pregledovali podatke, ki so shranjeni v podatkovni bazi. V tem orodju pa je omogoˇceno tudi pisanje in izvajanje poizvedb SQL. [4]
2.2.3 Postman
Programska oprema Postman je namenjena preprostemu poˇsiljanju GET, POST, PUT in ostalih zahtevkov proti zaledju aplikacije oz. API-ju. Postman omogoˇca tudi dodajanje telesa v obliki JSON v zahtevek POST. Omogoˇca tudi to, da napiˇsemo, kakˇsen odgovor priˇcakujemo iz zalednega dela aplikaci- je. Tako smo ˇse hitreje ugotovili, ali nam zaledje deluje po vseh priˇcakovanjih.
[7]
2.2.4 Git in GitHub
Git je protokol, ki omogoˇca verzioniziranje datotek. Obstaja veˇc implemen- tacij git-a. Najbolj znane so: BitBucket, GitLab, GitHub. Odloˇcili smo se za GitHub, saj smo ga spoznali med ˇstudijem. Git omogoˇca veliko moˇznosti za sistematiˇcno verzioniziranje datotek, ˇse posebej, ˇce jih uporablja veˇc ljudi hkrati. Najosnovnejˇsa funkcionalnost, ki jo ima git, je, da lahko opravljeno delo dodajamo v skupen repozitorij. Vsak dodatek h kodi mora imeti tu- di opis, kar bistveno olajˇsa iskanje in sinhronizacijo z drugimi ˇclani ekipe.
Omogoˇca tudi vejitve, kar je izredno koristno v primeru, da delamo na veˇc dodatkih oz. popravkih hkrati.
2.2.5 Javascript
JavaScript je visokonivojski programski jezik, ki se je prviˇc pojavil leta 1995. Bil je med prvimi jeziki, ki se uporabljajo v spletnem programiranju.
Spletnim stranem je prinesel dinamiko, ki je ni mogoˇce doseˇci samo s HTML- jem in CSS-om. [11]
2.3 Podporna programska oprema
2.3.1 NodeJS
NodeJS je odprtokodno, na veˇc platformah podprto, zaledno okolje Java- script, ki izvaja kodo JavaScript zunaj brskalnika. NodeJS omogoˇca pisanje zalednega dela aplikacije, in sicer s pomoˇcjo knjiˇznic, ki so jih napisali drugi avtorji. Nekatere bomo opisali v nadaljevanju. NodeJS ima vgrajen vtiˇcnik, ki omogoˇca preprosto dodajanje knjiˇznic iz interneta, in sicer z ukazom≫npm install [ime knjiznice]≪. S tem ukazom lahko v projekt vkljuˇcimo vse funkcio- nalnosti, ki jih ta knjiˇznica ima in jo lahko zaˇcnemo uporabljati. [16]
2.3.2 ExpressJS
ExpressJS je knjiˇznica, ki se poganja prek programa NodeJS. ExpressJS je namenjen prejemanju zahtevkov GET in POST, obravnavanju teh zahtev- kov in poˇsiljanju odgovorov nazaj poˇsiljatelju. ˇCe ˇcelni del aplikacije potre- buje podatke o vseh zaposlenih, poˇslje zahtevek zaledju. Zaledje ta zahtevek sprejme in na podlagi zahtevanega zahtevka izvede doloˇceno kodo. V veˇcini primerov se zgodi tudi poizvedovanje v podatkovni bazi, saj tam hranimo podatke. [?]
2.3.3 SQL
Structured Query Language ali okrajˇsano SQL je jezik, s katerim uporabljaˇs podatkovno bazo. V diplomski nalogi uporabljam Postgres razliˇcico SQL- a. V tem jeziku smo napisali strukturo podatkovne baze in vnesli podatke.
Prek tega jezika se pogovarjamo iz zalednega dela aplikacije, da lahko iz podatkovne baze pridobim podatke, ki jih potrebujem. Jezik omogoˇca tudi vstavljanje in spreminjanje podatkov v podatkovni bazi. [3]
2.3.4 ReactJS
ReactJS je ogrodje, namenjeno ustvarjanju ˇcelnega dela aplikacije. Za Rea- ctJS smo se odloˇcili, ker poleg obiˇcajnega HTML-ja in CSS-a omogoˇca tudi kodo JavaScript neposredno v datoteki. S tem je bistveno preprosteje progra- mirati spletne aplikacije, saj lahko kodo vejiˇs na podlagi doloˇcenih parame- trov. Omogoˇca tudi pisanje lastnih komponent in s tem boljˇso strukturiranost in manj podvojene kode. [2]
2.3.5 HTML
HyperText Markup Language oz. skrajˇsano HTML je oznaˇcevalni jezik, ki za svoje delovanje uporablja znaˇcke ( < in > ). S HTML-jem ustvarjamo strukturo spletne strani, ki jo brskalniki potem prikaˇzejo. Vsak element HT-
ML je sestavljen iz zaˇcetne in konˇcne znaˇcke (lahko se zgodi, da se ti dve znaˇcki zdruˇzita v eno). Elemente se lahko gnezdi, da se doseˇze oblika, ki smo si jo zamislili. [15]
2.3.6 CSS
Cascading Style Sheets ali okrajˇsano CSS je jezik, namenjen oblikovanju spletnih strani. HTML poskrbi za obliko, CSS pa elemente HTML olepˇsa. V CSSu lahko doloˇcimo barvo ozadja, barvo ˇcrk, razliˇcne tipe pisav, pozicije elementov, obrobe in ˇse veliko veˇc. [10]
2.3.7 JSON
JavaScript Object Notation ali okrajˇsano JSON je odprta standardna oblika datoteke. Uporablja se ga tudi za poˇsiljanje podatkov iz zaledja aplikacije na ˇcelni del aplikacije in obratno. Njegova sintaksa je zelo preprosta. Vse- bina je objeta v in . V sami strukturi je lahko poljubno mnogo elementov.
Elementi so sestavljeni iz dveh delov, iz imena spremenljivke in vrednosti spremenljivke. [1]
2.3.8 Docker
Docker je alternativa virtualnim operacijskim sistemom. Najveˇcja prednost, ki jo ima pred virtualnimi operacijskimi sistemi, je v tem, da si vsi vsebniki docker delijo en operacijski sistem, zato lahko deluje bolj uˇcinkovito, saj porabi manj virov. V diplomski nalogi smo uporabil 3 vsebnike docker. Prvi vsebnik vsebuje podatkovno bazo, drugi zaledje aplikacije in tretji ˇcelni del aplikacije. [6]
Aplikacija
Na sliki 3.1 lahko vidimo, da je aplikacija razdeljena na tri dele in sicer:
• Navigacijski stranski predel (oznaˇceno z vijoliˇcnim pravokotnikom).
Tu se nahaja seznam vseh varovanih ustanov in gumbi za dodajanje, spreminjanje in brisanje varnostnikov in objektov iz sistema.
• Navigacijski zgornji predel (oznaˇceno z temno zelenim pravokotnikom) Tu lahko vidimo gumbe za upravljanje z osrednjim delom aplikacije.
• Osrednji del aplikacije (oznaˇceno s ˇcrnim pravokotnikom)
Tu se prikazujejo urniki, modalna okna in informacijska sporoˇcila.
19
Slika 3.2: Prijava v aplikacijo
obstaja ena povezava med identifikacijskimi ˇstevilkami, ki jih ˇze imajo, in temi, ki jih bom uporabljal v aplikaciji. S to preslikavo namreˇc omogoˇcimo, da lahko enoliˇcno poveˇzem varnostnike med sistemoma.
Obrazec, ki ga vidimo na sliki 3.3, za registracijo uporabnika obsega njegovo ime, priimek, uporabniˇsko ime, dve polji za vnos gesla in gumb za registra- cijo. Ko uporabnik izpolni vse potrebne podatke, pritisne na gumb ≫Dodaj varnostnika v sistem≪, ki sproˇzi akcijo za registracijo uporabnika. ˇCelna stran aplikacije najprej preveri, ali so vpisana vsa obvezna polja forme in ali sta obe vpisani gesli enaki. ˇCe sta pogoja izpolnjena, se zahtevek POST poˇslje v zaledni del aplikacije.
Zaledje preveri, ali ˇze obstaja uporabnik s tem uporabniˇskim imenom in ˇce obstaja, vrne napako, ki jo prikaˇze ˇcelni del. ˇCe takega uporabnika ˇse ni- mamo v podatkovni bazi, se lahko zaˇcne z vpisovanjem prejetih podatkov o varnostniku iz zahtevka v podatkovno bazo. Vsi podatki so v podatkovni bazi shranjeni kot golo besedilo, razen gesla, ki je zgoˇsˇcen prek zgoˇsˇcevalne funkcije sha512.
Aplikacija uporablja osebne podatke, zato je potrebno zagotoviti ˇse dodatno varnost pred vdori. Na ˇcelnem delu aplikacije se prebere geslo, ki se takoj zgosti in v zgoˇsˇceni obliki poˇslje zaledju, kjer se geslo ˇse posoli in nato shrani v podatkovni bazi. Soljenje gesla pomeni, da ˇze zgoˇsˇcenemu geslu dodamo ˇse neko nakljuˇcno generirano ˇstevilko, med 1 in 1000, in nato geslo ˇse en-
krat zgostimo. Ob prijavi bo uporabnik vnesel svoje geslo, ˇcelni del bo geslo zgostil in poslal na zaledje. Zaledje bo to geslo prebralo in nato preko metode
≫bruteforce≪ugotovilo, katero ˇstevilko je program dodal ob registraciji. Torej zgoˇsˇcenemu geslu zaporedno dodajamo ˇstevilke od 1 do 1000, da ugotovimo katero nakljuˇcno ˇstevilko je uporabnik dobil ob registraciji. To naredimo zato, da zagotovimo varnost aplikacije, kajti ˇce bi ˇzelel nekdo udreti v aplikacijo, bi to trajalo bistveno dlje, saj za vsak poizkus porabi 1000-krat veˇc ˇcasa. V podatkovni bazi hranimo zgoˇsˇceno vrednost zgoˇsˇcenega gesla v kombinaciji z nakljuˇcnim ˇstevilom.
Gumb ≫Zapri≪ pobriˇse vse izpolnjene podatke v formi in zapre modalno okno.
Slika 3.3: Modalno okno za registracijo novega varnostnika
3.3 Navigacijski stranski predel
Na sliki 3.4 lahko vidimo, da je navigacijski stranski preden sestavljen iz dveh delov. Prvi del je seznam vseh objektov, ki so v sistemu, drugi del pa ima gumbe s katerimi lahko dodajamo, spreminjamo ali briˇsemo varnostnike oz.
objekte iz sistema.
Slika 3.4: Navigacijski stranski predel
3.3.1 Seznam ustanov
Na sliki 3.5 vidimo prvi element stranskega predela, ki je seznam vseh usta- nov, ki jih podjetje varuje. Podatke o vseh objektih pridobimo takoj ob prijavi v aplikacijo, in sicer prek API klica na zaledje, ki preveri aktualne podatke v podatkovni bazi. ˇCe bi bilo ustanov veˇc, kot je prostora v samem oknu, se samodejno doda drsnik na desni strani, da seznam postane drsen. Imena ustanov so lahko tudi daljˇsa od ˇsirine okenca, ki ga vidimo na sliki 3.5, zato
prikaˇzemo zgolj 11 prvih ˇcrk naziva ustanove.
Slika 3.5: Seznam vseh ustanov
Ko se uporabnik odloˇci, da bo izbral doloˇcen objekt, na katerem bo ustvaril razpored za ta mesec, se mu ta objekt obarva oranˇzno. Uˇcinek lahko vidimo na sliki 3.6. Ob pritisku na ta gumb se zgodi tudi klic v zaledje, da se v glavnem delu aplikacije lahko prikaˇzejo razporedi za tekoˇci mesec za izbran objekt.
Slika 3.6: Seznam vseh ustanov, ko je izbrana ˇzelena ustanova
3.3.2 Gumbi za dodajanje, posodabljanje in brisanje varnostnikov iz sistema
Na spodnjem robu so gumbi za dodajanje, spreminjanje in brisanje varnost- nikov in objektov v sistem oz. iz njega. Vse gumbe lahko vidimo na sliki 3.7.
V nadaljevanju smo opisali tud vsak gumb posebaj.
Slika 3.7: Gumbi za dodajanje, posodabljanje in brisanje varnostnikov in objektov
3.4 Dodajanje, spreminjanje in brisanje var- nostnikov in objektov
3.4.1 Dodajanje varnostnikov v sistem
Ce ˇzelimo dodati novega varnostnika, moramo ˇze biti vpisani v aplikacijo. Vˇ levem spodnjem kotu pritisnemo na gumb≫Dodaj varnostnika v sistem≪ in nato se nam odpre modalno okno za dodajanje novega varnostnika v sistem.
Obrazec, ki ga lahko vidimo na sliki 3.8, od uporabnika zahteva vnosna polja in sicer: identifikacijsko ˇstevilko, ki jo podjetje ˇze uporablja, ime in priimek varnostnika, uporabniˇsko ime, geslo in ponovno geslo.
Slika 3.8: Obrazec za dodajanje varnostnika
Uporabniki se delijo na dve podskupini, in sicer tiste, ki se lahko prijavijo v sistem, in tiste, ki se ne morejo. ˇCe ˇzelimo dodati varnostnika za vnos, potrebujemo samo interno identifikacijsko ˇstevilko, ime in priimek. ˇCe pa ˇzelimo, da bo lahko ta oseba tudi pregledovala razporede v aplikaciji, je treba vpisati uporabniˇsko ime in geslo. Geslo je v obrazec potrebno vpisati dvakrat, saj na tak naˇcin preverimo skladnost gesla. Primer izpolnjenega obrazca lahko vidimo na sliki 3.9.
Slika 3.9: Obrazec za dodajanje varnostnika izpolnjena
Ob pritisku na gumb ≫Dodaj varnostnika v sistem≪ˇse zgodi klic API proti zaledju, da ta doda varnostnika v sistem. Uporabnik aplikacije dobi povratno informacijo v obliki sporoˇcila, ki ga vidimo na sliki 3.10. Ko je varnostnik dodan v sistem, ga lahko razporedimo na objekt. Ob kreiranju se mu v po- datkovni bazi ustvarijo tudi polja za beleˇzenje ur, ki jih je ta varnostnik opravil.
Slika 3.10: Sporoˇcilo, da je bil varnostnik uspeˇsno dodan v sistem.
3.4.2 Posodabljanje varnostnikov v sistemu
Ce ˇzelimo posodobiti podatke o doloˇcenem varnostniku, ga najdemo v spust-ˇ nem meniju, pri ˇcemer se nam samodejno izpolnijo vsa polja, vnesena za varnostnika. Primer lahko vidimo na sliki 3.11.
Slika 3.11: Obrazec za posodabljanje varnostnika - zaˇcetno stanje
Popravimo oz. vpiˇsemo tiste podatke, ki jih ˇzelimo spremeniti v sistemu, in nato pritisnemo na gumb ≫Spremeni podatke o varnostniku≪. Primer pop- ravka vidimo na sliki 3.12.
Slika 3.12: Obrazec za posodabljanje varnostnika - popravljeno stanje
Ko pritisnemo na gumb, se pokaˇze sporoˇcilo, da je varnostnik uspeˇsno poso- dobljen. Primer takega sporoˇcila vidimo na sliki 3.13.
Slika 3.13: Varnostnik uspeˇsno posodobljen
3.4.3 Brisanje varnostnikov iz sistema
Ce ˇzelimo odstraniti doloˇcenega varnostnika, ga najdemo v spustnem meniju,ˇ pri ˇcemer se samodejno izpolnijo vsa polja, vnesena za varnostnika. Primer takega obrazca vidimo na sliki 3.14.
Slika 3.14: Obrazec za posodabljanje varnostnika - zaˇcetno stanje
Ce smo popolnoma prepriˇcani, da ˇzelimo odstraniti varnostnika pritisnemoˇ na gumb ≫Izbriˇsi varnostnika iz sistema≪. Ko smo pritisnili na ta gumb, se nam pokaˇze sporoˇcilo, da je varnostnik uspeˇsno odstranjen, ki ga vidimo na sliki 3.15.
Slika 3.15: Varnostnik uspeˇsno odstranjen
3.4.4 Dodajanje objektov v sistem
Ko ˇzelimo dodati nov objekt v sistem, pritisnemo na gumb≫Dodaj objekt v sistem≪ in odpre se okno, ki ga vidimo na sliki 3.16.
Slika 3.16: Obrazec za dodajanje objekta
V modalnem oknu na levi strani forme vpiˇsemo interno identifikacijsko ˇstevilko objekta, naziv objekta in njegov naslov. Na desni strani forme pa vpiˇsemo zahtevano ˇstevilo ur varovanja objekta. Te ure se potem shranijo v podatko- vno bazo in jih pozneje uporabimo pri preverjanju pokritosti objekta. Primer izpolnjenega obrazca vidimo na sliki 3.17.
Slika 3.17: Izpolnjen obrazec za dodajanje objekta
Ob pritisku na gumb ≫Dodaj objekt v sistem≪ se nam pokaˇze sporoˇcilo, da je bil objekt uspeˇsno dodan v sistem, ki ga vidimo na sliki 3.18.
Slika 3.18: Sporoˇcilo za uspeˇsno dodajanje objekta v sistem
3.4.5 Posodabljanje objekta v sistemu
Ce ˇzelimo posodobiti podatke o doloˇcenem objektu, ga najdemo v spustnemˇ meniju. Primer uporabe vidimo na sliki 3.19. Pri tem se nam samodejno izpolnijo vsa polja, vnesena za ta objekt.
Slika 3.19: Obrazec za posodabljanje objekta
Popravimo oz. vpiˇsemo tiste podatke, ki jih ˇzelimo spremeniti v sistemu.
Primer popravkov vidimo na sliki 3.20. Ko smo popravili vse ˇzeljeno pritis- nemo na gumb≫Posodobi objekt≪.
Slika 3.20: Obrazec za posodabljanje objekta - popravljeno stanje
Po pritisku na gumb≫Spremeni podatke o objektu≪, se pokaˇze sporoˇcilo, da je bil objekt uspeˇsno posodobljen. Primer tega sporoˇcila vidimo na sliki 3.21.
Slika 3.21: Sporoˇcilo, da je bil objekt uspeˇsno posodobljen
3.4.6 Brisanje objekta iz sistema
Ce ˇzelimo odstraniti objekt, ga najdemo v spustnem meniju, prikazanem naˇ sliki 3.22, pri ˇcemer se nam samodejno izpolnijo vsa polja, vnesena za ta objekt.
Slika 3.22: Obrazec za brisanje objekta
Ce smo povsem prepriˇcani, da ˇzelimo ta objekt odstraniti, pritisnemo naˇ gumb≫Izbriˇsi objekt iz sistema≪. Po pritisku na ta gumb, se pokaˇze sporoˇcilo, da je objekt uspeˇsno odstranjen. Primer sporoˇcila vidimo na sliki 3.23.
Slika 3.23: Objekt uspeˇsno odstranjen
3.5 Zgornji navigacijski predel
V zgornjem navigacijskem predelu so gumbi, ki se uporabljajo pri ustvarjanju urnikov. Ta predel lahko vidimo na sliki 3.24. Na skrajni levi strani je logotip podjetja, sledita gumba za dodajanje varnostnikov in terminov na objekt.
Takoj za tem lahko vidimo naziv objekta, za katerega bomo pripravili razpo- red, ter mesec razporeda. Sledijo konfiguracijski gumbi, in sicer za bolniˇsko
ta objekt. Varnostnika za ta objekt doloˇcimo s pritiskom na gumb z imenom in priimkom ustreznega varnostnika. ˇCe na gumb z imenom doloˇcenega var- nostnika pritisnemo pomotoma, ga lahko odstranimo s ponovnim klikom na isti gumb. Modalno okno, ki ima izbrana dva varnostnika, lahko vidimo na sliki 3.26.
Slika 3.26: Dodajanje varnostnika na objekt - konˇcno stanje
Trenutno je v podatkovni bazi pribliˇzno 200 varnostnikov, zato je bilo treba omogoˇciti tudi iskanje po imenu oz. priimku ali po identifikacijski ˇstevilki.
To smo izvedeli s preprostim vhodnim podatkom v modalnem oknu, ki nato preveri, ali varnostnik ustreza filtru. ˇCe je filter prazen, se nam v modalnem oknu prikaˇzejo vsi varnostniki. V nasprotnem primeru pa prikaˇze le varnost- nike, ki ustrezajo danemu filtru. Primer filtriranja z identifikacijsko ˇstevilko lahko vidimo na sliki 3.27.
Slika 3.27: Filtriranje varnostnikov
Ko z dodajanjem zakljuˇcimo, pritisnemo tipko≫Ok≪, s ˇcimer se zapre modal- no okno. ˇCe modalno okno odpremo pomotoma, lahko pritisnemo na tipko
≫Zapri≪, s ˇcimer se ponastavi vse, kar smo do tedaj naredili.
3.5.2 Gumb za dodajanje termina na objekt
Gumb za dodajanje termina na objekt odpre modalno okno, kjer s klikanjem izberemo termine, ki si jih ˇzelimo imeti na tem objektu. Primer takega modal- nega okna lahko vidimo na sliki 3.28. ˇCe pripravljamo popolnoma nov ra- zpored za objekt, ki ˇse ni bil varovan, je seznam terminov prazen, saj v podatkovni bazi ni zgodovine terminov.
Slika 3.28: Modalno okno za izbrianje terminov
Na sliki 3.28 lahko vidimo 5 terminov, ki so ˇze vnaprej predlagani za vse objekte. Termin za varovanje dodamo z enkratnim pritiskom na gumb, na katerem je zapisan ustrezen termin varovanja. ˇCe na termin pritisnemo po- motoma, ga lahko zlahka odstranimo s ponovnim klikom na isti gumb. Na sliki 3.29 lahko vidimo primer, ko sta za doloˇcen objekt izbrana dva termina.
Slika 3.29: Modalno okno za izbrianje terminov, ko sta izbrana 2 termina
Ce ˇzelimo opredeliti nov termin, je tudi to omogoˇceno, in sicer je treba vpisatiˇ od kdaj do kdaj je ta objekt varovan. Primer dodajanja novega termina lahko vidimo na sliki 3.30. Nato pritisnemo na gumb≫Dodaj termin≪. Ob pritisku na gumb aplikacija preveri ali ta termin ˇze obstaja v seznamu terminov. ˇCe ga ˇse ni, ga aplikacija doda med termine. To lahko vidimo na sliki 3.31.
Slika 3.30: Dodajanje novega termina
Ko termin dodamo, ga lahko izberemo in dodamo v seznam izbranih termi- nov.
Slika 3.31: Prikaz termina, ki je bil na novo dodan
Ce je bil objekt ˇze varovan, se seznam zapolni z vrednostmi iz prejˇsnjegaˇ meseca. ˇCe ˇzelimo v tem mesecu spremeniti termine, nam je to omogoˇceno tako, da s kliki oznaˇcimo tiste termine, ki se nam zdijo odveˇc.
3.6 Gumbi za bolniˇ ske odsotnosti in dopuste
V tem predelu so opisani 4 gumbi, ki oznaˇcujejo odsotnost varnosnika. Primer vseh gumbov je na sliki 3.32.
Slika 3.32: Gumbi za bolniˇske odsotnosti in dopuste
3.6.1 Gumb za dodajanje bolniˇ ske odsotnosti
Na zgornjem delu aplikacije je gumb za dodajanje bolniˇske odsotnosti. ˇCe ˇzelimo dodati bolniˇsko odsotnost doloˇcenega varnostnika, to storimo s pri-
tiskom na tipko Bolniˇska. Ob pritisku lahko opazimo, da se gumb obarva oranˇzno, kar pomeni, da je funkcija za dodajanje bolniˇske odsotnosti aktiv- na. Primer aktivnega gumba Bolniˇske je na sliki 3.33. Ko aktiviramo gumb za dodajanje bolniˇske odsotnosti, lahko s pritiskom izberete dan, ko je bolniˇska odsotnost upraviˇcena in mu pripada. Ob pritisku na napaˇcen dan, lahko dan zlahka odstranimo s ponovnim klikom na isto celico v razporedu.
Slika 3.33: Dodajanje bolniˇske odsotnosti
3.6.2 Gumb za dodajanje bolniˇ ske (4h)
Poleg gumba za dodajanje bolniˇske odsotnosti je tudi gumb za dodajanje poloviˇcne bolniˇske odsotnosti. ˇCe ima varnostnik poloviˇcni delovni ˇcas, pri- tisnemo na ta gumb za aktiviranje poloviˇcne bolniˇske odsotnosti. Vse ostale funkcionalnosti so enake. Primer aktivne poloviˇcne bolniˇske odsotnosti naj- demo na je na sliki 3.34.
Slika 3.34: Dodajanje poloviˇcne bolniˇske odsotnosti
3.6.3 Gumb za dodajanje dopusta
V zgornjem delu aplikacije je prav tako gumb, ki nam omogoˇca vpisovanja dopusta za doloˇcenega varnostnika. To izvedemo s pritiskom na ta gumb, ki se obarva oranˇzno. Primer aktivnega dopusta je na sliki 3.35. Tako aktiviramo funkcionalnost za dodajanje dopustov. Po vklopu te funkcije zgolj pritisnemo na dan, na katerega ta varnostnik koristi dopust.
Slika 3.35: Dodajanje dopusta
3.6.4 Gumb za dodajanje dopusta (4h)
Poleg gumba za dodajanje dopusta se nahaja tudi gumb za dodajanje po- loviˇcnih ur dopusta. V primeru, da ima varnostnik poloviˇcni delovni ˇcas, pritisnemo na ta gumb Dopust (4h), da se aktivira poloviˇcni dopust. Vse ostale funkcionalnosti so enake koti pri gumbu Dopust. Primer aktivnega dopusta je na sliki 3.36.
Slika 3.36: Dodajanje poloviˇcnega dopusta
3.6.5 Gumb za dodajanje izjem
Podjetje ˇzeli, da bi aplikacija omogoˇcala dodajanje varnostnikov na termin, kljub temu, da ne izpolnjujejo vseh pogojev, torej se preskoˇci preverjanje.
Ce je vklopljena funkcionalnost, ki omogoˇca vpisovanje izjem, je ta gumbˇ obarvan temno oranˇzno in razporejevalec lahko v sistem vpiˇse katere koli ure za katerega koli varnostnika. Gumb lahko vidimo na sliki 3.37.
Slika 3.37: Gumb za dodajanje izjem
3.7 Vpisovanje urnika
Ko ˇzelimo pripraviti nov urnik za doloˇcen objekt, moramo objekt najprej izbrati na levi strani aplikacije. Primer ˇze izbrane lokacije lahko vidimo na sliki 3.38.
Slika 3.38: Aplikacija pred zaˇcetkom uporabe z ˇze izbranim objektom
Po tem se nam na vrhu na sredini izpiˇse ime objekta, hkrati pa se nam bo ime na levi strani aplikacije odebelilo, spremenilo pa se bo tudi ozadje, in sicer iz rumene v oranˇzno. Ko to izvedemo, pritisnemo na tipko, da ˇzelimo dodati varnostnike≫Dodaj varnostnika na ta objekt≪. V odprtem modalnem oknu doloˇcimo varnostnike, ki jih ˇzelimo, na tem objektu in jih oznaˇcimo s klikom. Primer izbire lahko vidimo na sliki 3.39.
Slika 3.39: Modalno okno z izbranima varnosntikoma
Ko s tem konˇcamo, pritisnemo na tipko≫Ok≪. Sedaj imamo izbrane varnost- nike na tem objektu, treba je le ˇse izbrati ˇzelene termine varovanja. Skozi celoten postopek nas vodijo tudi navodila v sami aplikaciji, kar se vidi na sliki 3.40.
Slika 3.40: Aplikacija z izbranimi varnostniki
To storimo s pritiskom na tipko ≫Dodaj termin na ta objekt≪. Spet se nam bo odprlo modalno okno, kjer bomo s klikom izbrali termine, ki ustrezajo za varovanje tega objekta. Primer tega modalnega okna lahko vidimo na sliki 3.41. Ko bomo zakljuˇcili z izbiranjem, kliknemo na tipko ≫Ok≪, da se nam modalno okno zapre.
Slika 3.41: Modalno okno z izbranima terminoma varovanja
Ce smo slepo sledili tem korakom, bi morali pred sabo videti n praznih ra-ˇ zporedov (pri ˇcemer je n ˇstevilo varnostnikov, izbranih s klikom). Vsak izmed njih ima toliko terminov, kot jih je bilo izbranih v modalnem oknu. To vidimo na sliki 3.42.
Slika 3.42: Aplikacija z izbranimi termini
Ce ˇzelimo varnostnika vpisati v doloˇcen termin, moramo zgolj pritisniti naˇ ˇzeljen termin. Pokazalo se nam je ˇstevilo ur varovanja, ki jih bo tisti dan oz.
v tistem terminu opravil. ˇCe varnostnik dela od 06.00 do 14.00, se bo izpisalo 8. Na sliki 3.43 vidimo primer, kjer so trije varnostniki razporejeni v razliˇcne termine.
Slika 3.43: Aplikacija z vpisanim urnikom za polovico meseca
Razporejevalec lahko tudi oznaˇci, da doloˇcen varnostnik koristi dopust oz. je odsoten zaradi bolezni. To naredi tako, da v zgornjem navigacijskem predelu oznaˇci ˇzeleno moˇznost vpisovanja ur in nato pritisne na doloˇcen datum v me- secu. Princip je enak za bolniˇske odsotnosti in dopuste. Na sliki 3.44 se vidijo vnosi dopustov, poloviˇcnih dopustov, bolniˇskih odsotnosti in tudi poloviˇcnih bolniˇskih odsotnosti.
Slika 3.44: Aplikacija z vpisanimi bolniˇskami in dopusti
3.7.1 Vpisovanje za vnaprej
Aplikacija omogoˇca tudi vpisovanje urnikov za prihodnje mesece. Ko se pri- javimo v aplikacijo, nam ta mesec nastavi mesec na trenutnega, ki ga lahko potem po potrebi spremenimo. Na levi strani je gumb, s katerim se pre- stavimo na prejˇsnji mesec. Na desni strani pa lahko datum spremenimo na naslednji mesec. ˇCe se vrnemo v prejˇsnji mesec, kjer je bil razpored napisan in je bilo veˇc verzij, se pokaˇze najnovejˇsa. Na sliki 3.45 se vidita tako oba gumba za spreminjanje mesecev, kot tudi mesec za katerega trenutno delamo razpored.
Slika 3.45: Datum razporeda
3.7.2 Preverjanje omejitev
Aplikacija pred vsakim vstavljanjem izmene na objekt izvede veˇc preverjanj.
Najprej preveri, ali bo minilo 11 ur od prejˇsnje opravljene izmene. Takoj za tem preveri tudi to, ali je vsaj 11 ur do naslednje izmene. Preveri tudi to, da izmena ni daljˇsa do 13 ur. Aplikacija preverja tudi izmene posameznega varnostnika po vseh objektih. ˇCe so izpolnjeni vsi prej omenjeni pogoji, se zaˇcne preverjati tudi to, kdaj se objekt dejansko varuje. S tem se izognemo podvajanju izmen v istem dnevu in istem terminu.
3.7.3 Kontrolna vrstica
Na vrhu sredinskega dela aplikacije smo postavil kontrolno vrstico, ki nam olajˇsa preverjanja ˇstevila ur varovanja posameznega objekta. Primer kon- trolne vrstice lahko vidimo na sliki 3.46. Vrstica dobi podatke o pokritosti objekta iz zaledja in na podlagi tega obarva celice. Celice imajo veˇc slogov, med katerimi je prvi ta, da je pokrit 0 ur, kar je oznaˇceno z 0, ozadje celice pa je rdeˇce barve. ˇCe je pokrit veˇc kot 20 % in manj kot 51 %, se celica obarva
rumeno. ˇCe je pokrit 100 %, jo oznaˇcim z zeleno. ˇCe razporejevalec naredi napako in na objekt vpiˇse preveˇc ur za posamezen dan, se celica poveˇca, besedilo oz. ˇstevilo ur varovanja se odebeli in poveˇca, ozadje pa se obarva rdeˇce.
Slika 3.46: Kontrolna vrstica
3.7.4 Vpisovanje ur v podatkovno bazo
Ob vsakem vpisovanju urnika se takoj zabeleˇzi, katere ure bo opravil doloˇcen varnostnik, kar ob koncu meseca omogoˇca pravilno obraˇcunavanje opravljenih ur. Podatkovna baza beleˇzi ure, opravljene med tednom med 06.00 in 22.00;
ure, opravljene med tednom v noˇcni izmeni, torej med 22.00 in 06.00; ure, opravljene ob sobotah ˇcez dan, torej med 06.00 in 22.00 in ure sobotne noˇcne izmene, kar pomeni od sobote od polnoˇci do ˇsestih zjutraj, ter ˇse dve uri po 22.00. Enako velja za sobote in praznike. Prav tako se z vsakim vpisom za eno poveˇca ˇstevilo prihodov v sluˇzbo, saj je to podlaga za obraˇcun ˇstevila malic, kilometrin ipd. Vse te ure so zabeleˇzene nad posameznim varnostnikom za vsak mesec posebej. Tudi ˇce vpisujemo varnostnika na nek drug objekt, se bodo ti podatki ˇse vedno prikazali tam (neposredno nad razporedom). Ob vsakem dodajanju bolniˇske odsotnosti se v obraˇcun ur zapiˇse koliˇcina ur, ko je varnostnik odsoten zaradi bolezni. Enako velja za dopust.
3.7.5 Fond ur
Podjetje je med svojimi zahtevami navedlo tudi moˇznost spreminjanja fonda ur vsakega varnostnika posebej. To smo zagotovili prek vnosnega polja na grafiˇcnem vmesniku, ki omogoˇca prejem vnosa od uporabnika. Ko uporabnik pritisne izven okvirja, se na zaledje samodejno poˇslje zahtevek, da naj se posodobijo ure za tega varnostnika za doloˇcen mesec. ˇCe je bilo to uspeˇsno izvedeno, se pokaˇze obvestilo, ki ga kaˇze slika 3.47.
Slika 3.47: Fond ur uspeˇsno spremenjen
3.8 Verzioniziranje razporedov
Med mesecema pride do ˇstevilnih sprememb pri posameznem razporedu, za- to sam razpored potrebuje zaporedno ˇstevilko v posameznem mesecu. Na zaˇcetku meseca podjetje poˇslje fiziˇcen razpored na varovan objekt, ampak ker je priˇslo in ˇce pozneje pride do sprememb, je treba temu primerno spre- meniti tudi razpored na objektu. To so do sedaj reˇsevali tako, da so v desnem zgornjem kotu videli ˇstevilko verzije razporeda.
Vsak razpored ima zaˇcetno ˇstevilko 1 in ˇce se razpored med mesecem ne spre- meni, se ta ˇstevilka ohrani. ˇCe pa se spremeni, se ˇstevilka poveˇca za ena. Z vsakim novim mesecem se verzijo razporeda ponastavi na 1. Enako funkcio- nalnost moram zagotoviti tudi v aplikaciji.
Ko razporejevalec ugotovi, da je priˇslo do spremembe varovanja na izbranem objektu, pritisne na tipko ≫Verzija≪ in ob pritisku na ta gumb se v zaledju izvede nabor ukazov za izdelavo nove verzije. Najprej se naredi kopija raz- poreda in se zapiˇse v podatkovno zbirko. Izvede se kopija vseh izmen vseh varnostnikov na tistem objektu. Prav tako se kopira vse bolniˇske odsotnosti in dopuste, ki so bili v tem razporedu razpisani.
Stanje prejˇsnjih razporedov potrebujemo v primeru, da si razporejevalec ˇzeli ogledati, kakˇsno je bilo stanje v prejˇsnji verziji razporeda. Za vsako novo verzijo v podatkovni bazi hranimo vse potrebne podatke za rekonstrukcijo razporeda in tudi kdaj je bila zahteva po novi verziji pritisnjena. Ko se vse skupaj zakljuˇci, se spremeni tudi verzija na ˇcelnem delu aplikacije, ter pokaˇze se pojavno okno, da vidimo, da se je le to zares zgodilo.
3.8.1 Gumb za spreminjanje verzij
Na sliki 3.48 vidimo gumb za ustavarjanje nove verzije razporeda.
Slika 3.48: Viˇsanje verzije
3.8.2 Gumb za preklop v zgodovino
Z gumbom prikazanim na sliki 3.49, lahko spremenimo naˇcin delovanja apli- kacije, in sicer na naˇcin, da aplikacija gleda v zgodovino razporedov. Uporab- niku oz. razporejevalcu je omogoˇceno, da gleda starejˇse verzije razporeda. Ko je ta gumb ponovno pritisnjen, se naˇcin spet spremeni v aktualno verzijo.
Slika 3.49: Gumb za preklop v zgodovino
3.9 Testiranje
Aplikacijo smo najprej testirali s testnimi podatki, da smo preverili osnovne funkcionalnosti. Vsak klic API smo testirali s pomoˇcjo programa Postman, ki omogoˇca simuliranje zahtevkov POST. Primer testiranja lahko vidimo na sliki 3.50. Vidimo, da gre za zahtevek POST. Razvidno je tudi na kater naslov ˇzelimo poslati ta zahtevek in sicer nahttp://localhost:3005/protecting- /get/checksum. Na tej sliki lahko vidimo dva vhodna parametra in sicer year month, ki predstavlja za katero leto in kater mesec ˇzelimo dobiti podat- ke, ki se bodo kasneje napolnili v kontrolno vrstico. Drugi vhodni parameter je pa id place, ki pa pove za kater objekt gre. Na spodnji strani slike lahko vidimo odgovor v obliki JSON, ki nam ga zaledni del vrne.
Slika 3.50: Testiranje kontrolne vrstice v programu Postman
Ko smo se prepriˇcali, da vse deluje, smo aplikacijo predstavili razporejevalcu.
Razporejevalcu je bil grafiˇcni uporabniˇski vmesnik intuitiven in mu je olajˇsal trenutno delo, kar pomeni, da je izdelana aplikacija primerna za uporabo.
Zakljuˇ cek
V diplomskem delu smo najprej raziskali tehnologije, ki smo jih kasneje upo- rabili v sami aplikaciji. Najprej smo si pripravili podatkovni model za re- lacijsko podatkovno bazo. Podatkovno bazo smo namestili na streˇznik. Po testiranju podatkovne baze in pisanja poizvedovalih stavkov, smo te funkcio- nalnosti povezali ˇse s tehnologijo ExpressJS. S tem smo ustvarili zaledni del aplikacije, ki sprejema klice, jih primerno obdela in vrne ˇzeljen rezultat. Ko smo ustvarili delujoˇc zaledni del, smo se lotili ˇse ˇcelnega dela. Pri ustvarjanju ˇcelnega dela aplikacije smo stremeli k temu, da bi bila uporaba te aplikacije ˇcimbolj enostavna za uporabnika in hkrati ˇcimbolj podobna ˇze obstojeˇcemu sistemu.
4.1 Nadaljni razvoj
Glede na to, da se to podjetje ukvarja tudi z upravljanjem in ˇciˇsˇcenjem objek- tov, vidimo priloˇznost, da se ta sistem nadgradi ˇse za to panogo. Aplikacija bi lahko podpirala tudi podaljˇsanje doloˇcene izmene v primeru izrednih razmer, ko mora posamezen varnostnik podaljˇsati izmeno iz nepredvidenih razlogov.
Ce bi se podjetje odloˇcilo za to, bi lahko aplikacijo nadgradili tako, da biˇ lahko vsak zaposleni prek te spletne aplikacije preveril svoj urnik. Ena iz- med funkcionalnosti bi lahko bila tudi ta, da bi se zaposlene prek elektronske
55
poˇste in besedilnega sporoˇcila obveˇsˇcalo ob vsaki spremembi urnika. Omenili so tudi, da bi bilo koristno na enem mestu imeti podatke o tem, koliko ur posamezen varnostnik opravil na razliˇcnih objektih, da bi imel razporejevalec boljˇsi pregled nad razporeditvijo ur za posameznega varnostnika.
[1] Introducing JSON. URL: https://www.json.org/json-en.html, 2021. [Dostopano: 8. 8. 2021].
[2] ReactJS. URL: https://reactjs.org/, 2021. [Dostopano: 6. 8. 2021].
[3] Structured query language. URL: https://en.wikibooks.org/wiki/
Structured_Query_Language, 2021. [Dostopano: 13. 8. 2021].
[4] Dbeaver. URL: https://dbeaver.io/about, 2021. [Dostopano: 7. 8.
2021].
[5] 15 Desktop vs Web Application Pros and Cons. URL:
https://brandongaille.com/15-desktop-vs-web-application- pros-and-cons/, 2021. [Dostopano: 14. 8. 2021].
[6] Docker. URL: https://www.docker.com/why-docker, 2021. [Dosto- pano: 6. 8. 2021].
[7] Postman. URL: https://www.postman.com, 2021. [Dostopano: 8. 8.
2021].
[8] Visual studio code. URL: https://code.visualstudio.com/, 2021.
[Dostopano: 12. 8. 2021].
[9] DB-ENGINES. System Properties Comparison MongoDB vs.
MySQL vs. PostgreSQL. URL:https://db-engines.com/en/system/
MongoDB%3BMySQL%3BPostgreSQL, 2021. [Dostopano: 3. 9. 2021].
57
[10] MDN Web Docs. What is CSS? URL: https://developer.mozilla.
org/en-US/docs/Learn/CSS/First_steps/What_is_CSS, 2021. [Do- stopano: 9. 8. 2021].
[11] MDN Web Docs. JavaScript. URL:https://developer.mozilla.org/
en-US/docs/Web/JavaScript, 2021. [Dostopano: 19. 8. 2021].
[12] Krasimir Hristozov. MySQL vs PostgreSQL – Choose the Right Da- tabase for Your Project. URL: https://developer.okta.com/blog/
2019/07/19/mysql-vs-postgres, 2019. [Dostopano: 2. 8. 2021].
[13] Niko Kobler. High-Performance Microservices - Node.js vs.
Wildfly. URL: https://www.n-k.de/2015/01/high-performance- microservices-nodejs.html, 2015. [Dostopano: 15. 8. 2021].
[14] Maciej Majerczyk. Database Comparison - SQL vs. NoSQL (MySQL vs PostgreSQL vs Redis vs MongoDB). URL: https://profil- software.com/blog/development/database-comparison-sql- vs-nosql-mysql-vs-postgresql-vs-redis-vs-mongodb/, 2019.
[Dostopano: 11. 8. 2021].
[15] Frank Moraes. HTML For Beginners The Easy Way: Start Learning HTML CSS Today. URL:https://html.com, 2020. [Dostopano: 4. 8.
2021].
[16] Lauren Orsini. What You Need To Know About Node.js. URL:
https://readwrite.com/2013/11/07/what-you-need-to-know- about-nodejs/, 2013. [Dostopano: 12. 8. 2021].
