[Sistemska Administracija] SP1

Namen: Vzpostavitev aplikacije na Herku s pomočjo Dockerja.

Vzpostavitev Dockerja

Namen: Zgraditi docker sliko naše aplikacije in jo zagnati lokalno.
Način implementacije: Najprej smo morali instalirati docker. Nato smo napisali Dockerfile, ki je vseboval ukaze za zgradbo docker slike. Nato smo morali zgraditi sliko z ukazom docker build. Po katerim smo zagnali z ukazom docker run.
Način uporabe: Uporabno je pozneje pri objavi na Heroku. In rešuje problem prenosljivosti in ponavljivosti okolja zaganjanja.

Vzpostavitev Herokuta

Namen: Objave aplikacije na storitvi Heroku.
Način implementacije: Prijavili smo se na storitev heroku. Kreirali projekt. Dodali člane. In nato s pomočjo Heroku CLI objaviji Docker sliko na Heroku registry. Po katerem je je bilo mogoče dostopati aplikacijo na domeni z .herokuapp.com končnico.
Način uporabe: Omogoča javni dostopo preko https://mb-hub.herokuapp.com

[Sistemska Administracija] SP1

Namen: Spoznavanje Heroki CLI.
Način implementacije: Teoretična analiza ukazov Heroku CLI s pomočjo Herokutovih navodil.
Način uporabe: Ni uporabe razen razširanje znaja razvijalcev. Izdelek je dokumentacija ugotovitev.

[Spletno_programiranje] Spletna storitev

Namen: Vzpostavitev zalednega dela naše aplikacije ki bo deloval kot posrednik med bazo in vmesnikom, scraperjem ter namizne aplikacije.

Vpostavitev osnovnega Express projekta

Namen: Začetna točka razvoja express aplikacije.
Način implementacije: S pomočjo express generatorja smo generirali začetni express projekt. Nato smo initializirali git v njemu. Nato smo kreirali potrebne github workflow datoteke za sprootni razvoj. Nato smo kreirali git veje v stilu github workflow. In na ta zadnje objaviji novo kreiran Github repozitorij.
Način uporabe: Repozitorij je objavljen na GitHub, ter za GitHubWorkflow je potrebno nastaviti skrivnosti na repozitoriju. Ob vsakem commitu v veji dev se zaženejo testi, ter ob vstakem commitu na veji main se zgradi in pošlje aplikacija na Heroku.

Konfiguracija in povezava MongoDB

Namen: Omogočanje dostop do baze.
Način implementacije: Dodajanje knjižnice mongoose. Ter dodajanje potrebnih linij kode za povezovanje do baze kjer se url za povezovanje pridobi preko sistemskih spremenljivk.
Način uporabe: Razvijalec ima aktivno povezavo. Potrebno je le nastaviti sistemsko premenljivko.

CRUD za Events

Namen: Omogočanje clientov storitve moznost ogleda, dodanjanje, spreminjanje, ter brisanje dogodkov.
Način implementacije: S pomočjo mogoose generatorja smo generirali datoteke, kjer smo morali definirati model. Katerega smo nato nadgradili.
Način uporabe: S pomočjo REST klicev na pot /event.

CRUD za Attendance

Namen: Omogočanje clientov storitve moznost ogleda, dodanjanje ter brisanje prisotnosti.
Način implementacije: S pomočjo mogoose generatorja smo generirali datoteke, kjer smo morali definirati model. Katerega smo nato nadgradili. Nato smo dodali kodo da se attribut attendance_count na dogodki primerno večja ali manša pri dodanajnju ali brisanju prisotnisti.
Način uporabe: S pomočjo REST klicev na pot /event ali /event/:event_id/attendance ali /attendance.

CRUD za config

Namen: Omogočanje clientov storitve moznost ogleda, dodanjanje, spreminjanje, ter brisanje konfikuracije zascrajper.
Način implementacije: S pomočjo mogoose generatorja smo generirali datoteke, kjer smo morali definirati model. Katerega smo nato nadgradili. Način uporabe: S pomočjo REST klicev na pot /config.

CRUD za clients

Namen: Omogočili registracijo clientov ter uporabno pri authentikaciji z JWT.
Način implementacije: S pomočjo mogoose generatorja smo generirali datoteke, kjer smo morali definirati model. Katerega smo nato nadgradili. In izbrisali endpointe za kreiranje. Ter skrili attrubut za geslo (zaradi varnosti). Ter sifrirali geslo z pomočjo knjižnice bycrypt. Način uporabe: S pomočjo REST klicev na pot /client.

Json Web Token authentization

Namen: Omogoči prijavo ter omejili dostop do enpointov.
Način implementacije: S pomocjo knjižnic passport in jwt. Smo implementirali potrebne mehanizme za avtentikacijo. Ter dodali endpoint clientov za prijavo ter za pridobitev podatkov o seji s pomočjo žetona JWT. Ter kreirali middleware, ki omejuje za omejevanje dostopa: prijavljenim in administratorjem. Da lahko ogledaš podatke ne rabiš biti prijavljen, da dodajaš moreš biti prijavljen, za urejanje ter brisanje pa moreš biti administrator. Edina izjema je konfiguracija za scrajper, kjer tudi za branje in dodajanje moreš biti administrator.
Način uporabe: S pomočjo REST klicev na pot /client/login pridobimo JET žeton, katerega nato vstavimo v Header kot Bearer. Ter /client/profile za pridobitev podatkov o seji.

GEO-spatial queries

Namen: Omogočanje filtriranje podatkov glede na geografsko lokacijo in radius v metrih.
Način implementacije: To smo naredili tako da smo attribut za lokacijo modelirali, da se je ujemala z GeoJSON standardom za opis geometrije. Ter smo dodali index v mongodb tipa sphere2d attributu za lokacijo. Ter endpoint prilagodili za glede na prisotno nekaterih query parametrov naj uporabi geopozicijske querije.
Način uporabe: S pomočjo REST klicev na pot /event, kjer moremo specificirati potrebne query parametre.

[Spletno_programiranje] Spletni vmesnik

Namen: Vzpostavitev spletnega vmesnika v React, ki nam omogoca prikaz podatkov: direktno, na zemljevidu, v obliki grafa. Ter administratorski vmesnik za spreminja nastavitev.

Vpostavitev osnovnega projekta

Namen: Začetna točka razvoja react aplikacije.
Način implementacije: S pomočjo react generatorja smo generirali začetni express projekt. Nato smo initializirali git v njemu. Nato smo kreirali potrebne github workflow datoteke za sprootni razvoj. Nato smo kreirali git veje v stilu github workflow. Nato konfigurirali sprotni razvoj s pomočjo netlify. In na ta zadnje objaviji novo kreiran Github repozitorij.
Način uporabe: Repozitorij je objavljen na GitHub. Ob vsakem commitu v veji dev se zgradi oplikacija, testi se zaženejo, in nam vrne povezavo na netlify ter ob vstakem commitu na veji main se zgradi in posodobi aplikacija na Netlify.

Stili in navigacija

Namen: Uporabniko omogočamo menjavo med svetlim in temnim stilom strani.
Način implementacije: S pomočjo knjiznice @mui/material smo implementirali 2 temi, kateri smo potem skozi aplikacjo uporabilo preko react hook useTheme(), temo pa smo spreminjali s pomočjo react hooka setTheme(). Dodali smo tudi navigacijo vrstico z par gumbov, ki nas preusmerijo na prazne strani.
Način uporabe: V spodjem desnem kotu je oklogli gumb za menjavo med stilom.

Login

Namen: Omejevanje dostopa do administratorkega vmesnika.
Način implementacije: S pomočjo knjiznice axios smo kreirali konteks z dvema axios objekta (eni z avtentikacijo in enden brez). V konteksu pri avtentikaciji shranimo zeton v localStorage, in v objektu za pošiljanje authenticiranih klicev smo dodali interceptor, ki definira header z JWT žetonom. Kreirali smo tudi strani in komponente za prijavo ter gumb za odjavo.
Način uporabe: Če uporabnik ni prijavljen ima v navigacijki vrstici gumb z ikonico za prijavo, ta nas vrže na stran za prijavo, ker se prijavi z imenom clienta ter geslom, ki ob vnosu pravilnih podatkov nas prijavi. Ob primeru da smo prijavljenih imamo dostop do gumba z ikonico za odjavo.

Prikaz vseh dogodkov

Namen: Predlen nad vseh dogodkov.
Način implementacije: Implementirali smo stran in komponente za prikaz vseh dogodkov. Podatke pa smo pridobili preko axios. Pri komponentah smo uporabili knjiznico @mui/system.
Način uporabe: Na začetni strani ki jo lahko dostopamo preko navigacijske vrstice pod gumbom Home. Imamo pregled nad vseh dogokov shranjenih z sliko, naslovom ter opisom.

Prikaz posameznega dogodkov

Namen: Podrobnejši predled posameznih podatko dogodka.
Način implementacije: Implemtirali smo stran in komponente za prikaz dogodkov. Kjer je bla posebno, da smo id dogodka shranjevali/docstopali preko url parametrov. Da smo dostopali ta id url parameter smo uporabili react hook useParams(). Podatke pa smo pridobili s pomočjo axios knjižnice.
Način uporabe: Ob kliku na stolpcu grafa, kliku na ickonico na zemljevidu, ter gumb "Learn more" na Home; se odpere stran z prikazom posameznega dogodka kjer se vidijo vsi podatki o dogodku.

Filtriranje dogodkov

Namen: Spreminjanje/manjšanje nabora dogodkov ki so vidne na celotni strani.
Način implementacije: Kreirali smo servis ki vsebuje vse dogodke in filtriranje dogodke vse strani/komponente, ki prizazujejo evente bodo zdaj uporabili seznam filtriranih dogodkov. Kreirali smo tudi komponente kjer lahko spreminjamo filtre ter jih onemogočimo.
Način uporabe: Na strani z zemplevidu ter strani z grafom je na levi strani seznam filtrov, katere lahko spreminjamo.

Prikaz dogodkov na zempljevidu

Namen: Prikaz dogodkov na zempljevidu.
Način implementacije: Kreirali smo stran/komponente. Nato s pomočjo knjižnice leaflet smo dodali zempljevid z markerji in popup, ki se prikaze ob kliku. Pri tem smo uporabili konteks z filtriranimi dogodki.
Način uporabe: Ob navigacijo na Map stran imamo na levi strani filtre in na desni zemplevid z markerjimi, ki predstavljajo dogodke, ob kliku na njih se odpre popup z kratkim prikazom dogodka.

Zemljevid skozi čas

Namen: Animiran timeline, kjer lahko pregledamo dogodke glede na dan.
Način implementacije: Dodali smo pod oddelek z filtri checkbox za prikaz timelina. Ob pridobivanju dogodkov jih grupira po dnevi. Timeline je zgrajen iz stepper element iz knjižnice @mui/system. Dodali smo tudi checkbox za deaktiviranje animacije. Animaciaj pa je avtomatcko menjavanje do naslednjega koraka v steperju in ko doseze konec se resetira na zažetek in nadaljuje. Ta timeline samo filtrira podatke na zemljeviju in ne globalno tak kot ostali filtri.
Način uporabe: Ob odprju strani z zemljevidu ali ob aktiviranju timelina pod filtrov se na dnu zemplevida vidijo dnevi, ki delujejo kot filtri. Mozno je aktiviranje animacije, ki avtomatsko menjava med dvevi. Ob kliku na zemplevid se animacija avtomatskoo deaktivira.

Grafi za prisotnost

Namen: Prisotno zelimo sortirali ter vizualizirati na grafu.
Način implementacije: S omočjo knjižnice D3.js smo kreirali graf prisotnosti. Dodali smo tudi filtre ter element za sortiranje.
Način uporabe: Navigiramo se lahko na stran z grafom. Kjer imamo na levi strani filtre, na desno pa graf z drop downu kjer lahko menjavamo med padajoče in naraščajoče.

Administratorski vmesnik

Namen: Stran katere ima samo adminstrator dostop.
Način implementacije: Kreirali smo stran/komponente za administratorki vmesnik. Dodali smo tudi varovalo da ga preusmeri na domačo stran če ni administrator. Ter dodali gumb na navigaciji, ki se samo prikaze če je prijavljen administrator.
Način uporabe: Ob privaji če vas JWT zeton označi kot administrator. Se na navigacijsko vrstici pojavi ikonica kjer lahko odperemo administratorki vmesnik.

Brisanje in spreminjanje dogodkov

Namen: Spreminjanje dogodkov za testiranje preko administratorkega vmsnika.
Način implementacije: Na administratorskem vmesniku smo generirali kompomente za interaktivno dodajajo attendance ter brišejo dogodke. Pri tem se pošiljajo klici s pomočjo axios.
Način uporabe: Če si administrator se v administratorkem vmesniku vidi sekcija z dogodki, kjer jih lahko brišemo ali povečamo stevilo attendence.

Spreminjanje nastavitev scrajperja

Namen: Spreminanje konfiguracij scrajperja preko administratorkega vmsnika.
Način implementacije: Na administratorskem vmesniku smo generirali kompomente za interaktivno spreminjanje attributov, dodajanje ter brisanje konfiguracije za scrajper. Pri tem se pošiljajo klici s pomočjo axios.
Način uporabe: Če si administrator se v administratorkem vmesniku vidi sekcija za config kjer lahko spreminjanjaš attribute, dodajaš ter brišes konfiguracije za scrajper. Pri spreminjanju se more klikniti gumb za shranjevanje da se oddajo. Na strani polj se vidi trenitna vbrednost v bazi.

Principi Programskih Jezikov

Namen: Kreiranje scrajperja; in namizne splikacije za dodajnaje ter urejanje dogodkov;

Branje podatkov iz strani

Namen: Pridobivanje surovih podatkoh za za nadaljne procesiranje.
Način implementacije: S pomošjo selenium fizično odpremo strani iz s pomočjo css selektojev pridobimo surove podatke.
Način uporabe: Zazenemo in pridobimo surove podatke.

Pretvorba naslova v lang lat

Namen: Pretvorba naslova (kot niz) v koordinate lat in long.
Način implementacije: S pomocjo REST API na https://geocode.search.hereapi.com/v1/geocode pošljemo naslov in pridobimo geo-koordinate.
Način uporabe: Klic na funkcijo pridobi_lokacijo kjer je prvi in edini argument surova lokacija.

Pretvorba datuma v date_start date_end

Namen: Pretvorba datuma v surovi obliki v date_start ter date_end v ISO formatu.
Način implementacije: S pomkočjo regex in funkcije datetime.datetime.strptime pretvorimo v primerno obliko.
Način uporabe: Klic na funkcijo pridobi_lokacijo kjer je prvi in edini argument surovi datum.

Pošiljanje podatkov na api

Namen: Objava podatkov na zaledni del.
Način implementacije: Najprej se prijavimo da dobimo JWT zeton. Nato s pomočjo klicev na naš REST API(zledni del) pošlemo podatke na endpoint, ki ne dovoli duplikate dogodkov, pri tem pa v header dodamo zeton.
Način uporabe: Ob zagonu programa se bodo v bazo dodali veljavni dogodki.

Branje Config datoteke

Namen: V živo pridobivanje inverval scrajpanja.
Način implementacije: Prijavimo se da dobimo žeton. Nato z žetonom naredimo klic na endpoint za konfiguracijo. Deserializiramo JSON izhod in preberemo attribut za inteval_scrajpanja. Nato spimo za tolko sekund. In ponovimo v nedogled.
Način uporabe: Ob zagonu bo scrajper deloval v nedogled in periodično bral konfuguracijo.

Kotlin compose ustvarjanje osnovne aplikacije

Namen: Začetna točka razvoja compose namizne aplikacije.
Način implementacije: S pomočjo InteliJ smo generirali začetni projekt. Nato smo initializirali git v njemu. Nato smo kreirali git veje v stilu github workflow. In natazadnje objaviji novo kreiran Github repozitorij.
Način uporabe: Repozitorij je objavljen na GitHub.

Dodajanje dogodkov

Namen: Dodajanje dogodkov za administratorje.
Način implementacije: Kireirali smo utilski objekt za pošiljanje REST klicev preko knjižnice feul. Nato pa smo z kreirali form z gumbmi, ki kliče našo pomožno knjižnico.
Način uporabe: Ko odpereš aplikacijo se prikaze form za dodajanje dogodkov.

Urejanje dogodkov

Namen: Urejanje dogodkov za administratorje.
Način implementacije: Dodali smo gumbe za potovanje med dogodki in gumbe za urejanje.
Način uporabe: Na aplikaciji so spodaj zdaj gumbi za premik naprej in nazaj med dogodki. In nad tem so zdaj gumbi za shranjevanje, ter duplikiranje. Če si v načinu za urejenje se na formu prikaže Id dogodka.

Login

Namen: Stran za prijavo, da niso podatki za prijavo v kodi.
Način implementacije: Imeli smo spremenljivko z žetonom, in če ni bila definirana se je prikazala stran za prijavo, drugače pa se je prikazal form.
Način uporabe: Ob zagonu aplikacije se zdaj pojavi stran za privajo, ki ob uspešni prijavi vrže na form.

Prevajanje Programskih Jezikov

Namen: Kreiranje Domensko specifičnega jezika za opis infrastrukture v mestu.

Definicija konstruktov

Namen: Opis funkcionalnostio našega DSL.
Način implementacije: V wordovem dukumentu smo začeli pisati kontrukte, kjer smo se vzgledovali na ze podani primer.
Način uporabe: Dokumentacija za nadaljni razvoj.

Formalna definicija sintakse v EBNF

Namen: Formalna definicija DSL v jeziku EBNF.
Način implementacije: Iz znanja iz predavanj pri Prevajanju Programskih jezikuv smo napisali EBNF.
Način uporabe: Dokumentacija za nadaljni razvoj.

10 testnih primerov

Namen: Za testiranje pravilnega delovanja naše aplikacije.
Način implementacije: S pomočjo definicij konstruktov in EBNF smo napisali primere.
Način uporabe: Dokumentacija za nadaljni razvoj.

Scanner

Namen: Leksikalna analiza vhodnega teksta.
Način implementacije: Implementirali smo ga na principu FSTM. Kjer smo definirali graf z povezavami in končna vožlišča. Definirali smo tudi pomožni enum za tipe lexemov.
Način uporabe: V vhod podamo FileStream in nam vrne lexeme.

Parser

Namen: Sintaktična analiza lexemov.
Način implementacije: Na principu LL(1) navzdol rekurzivnega razpoznavalnika smo napisali metode za sintaktično nalizo.
Način uporabe: Podaš scanner in pri klicu metode parse() dobiš nazaj boolean, če je bilo uspešno analizirano.

Objektni Model

Namen: Definicija za izhodno obliko našega jezika.
Način implementacije: Odlocili smo se, da bomo za lažji razvoj naš objektni model podmnožiča GeoJSON, kjer bo Property imel dva atributa type in name, ki bota predstavljala ime in tip infrastruktire. Problemi so nastali pri dejanski implementaciji semantike, ker smo morali uporabiti naslednje konstrukte: sklad za prenašanje podatkov, način izpisovanje napak na lep način, način onemogočanja semantike, nacin shranjevanje in nastavljanje pozicije v scannerju za spreminjanje kontrolnega toka, implementacija privzetih fukcij (bezier krivulje), principt bloka (ki hirearhično vgnezduje gruge bloke ali vsebije oblike različnih tipov).
Način uporabe: Kot vhod prejme pot do datotekek z DSL in nam vrne GeoJSON.

Implementacija GeoJSON

Namen: Pretvorba našega DSL v GeoJSON.
Način implementacije: Zaradi tega ker smo si pametno izbrali objektni model ni blo većjih težav pri pretvorbi GeoJSON v DSL. Pri vsakem razredu našega objektnega modela smo definirali funkcijo toDLS(), ki vrne niz ki predstavlja naš DLS. To nato rekurzivno kličemo kot izhod dobimo pretvorbo v DSL. V primeru da tip ni definiran se uporabi unknown.
Način uporabe: Kot vhod prejme por do datoteke z GeoJON in nam vrne pretvorbo v DSL.