1. Prevajanje programskih jezikov

Kreiranje našega Domensko specifičnega jezika za opis infrastruktur v mestu Maribor.

1.1 Definiranje konstruktov

Namenjeno opisu funkcionalnosti našega DSL.

Implementirali smo ga v wordovem dokumentu in konstrukte sproti, med tem ko smo ustvarjali BNF, dodajali in prilagajali našim potrebam. Zgledovali smo se po že podanem primeru pri vajah.

1.2 Formalna definicija sintakse v BNF

Namenjeno formalnemu definiranju našega DSL jezika.

BNF smo implementirali v txt datoteki, s pomočjo znanja in primerov, ki smo jih pridobili pri predmetu Prevajanje Programskih jezikov.

Potrebovali bomo ga nadaljnji razvoj našega jezika.

1.3 10 testnih primerov

Namenjeno testiranju pravilnega delovanja naše aplikacije.

Implementirali smo jih s pomočjo definicij konstruktov in BNF.

city "Maribor" {
    road "Slovenska ulica" {
            let zacetek = (12.3,32.2);
	    let konec = (15.2,37.0);
	    line(zacetek,konec);
	    bend(zacetek,konec,22.0);
    };
}

1.4 Scanner

Namenjen leksikalni analizi vhodnega teksta

Implementirali smo ga tako, da smo definirali graf s povezavami in končnimi vozlišči. Dodali smo tudi pomožni enum za tipe lexemov.

Uporabimo tako, da v vhod podamo FileSteam in nam vrne lexeme oz. tokene.

1.5 Parser

Namenjen sintaktični analizi lexemov

Za implementacijo smo se zgledovali po LL(1) navzdol rekurzivnemu raspoznavalniku in napisali metode za sintaktično analizo.

SPECIFICZAOBJEKTI  ::= river | park | road | oneway SMER 
OBJEKTI ::= SPECIFICZAOBJEKTI IME { UKAZI }; 

Uporabljamo tako, da podamo scanner in pri klicu metode parse() dobimo nazaj boolean, če je bilo uspešno analizirano.

2. Principi programskih jezikov

Pridobivanje in razčlenjevanje podatkov pridobljenih iz spleta. Ustvarjanje lastnega razčlenjevalnika spletne strani in shranjevanje teh v strukturo, katero smo si zamislili.

2.1 Iskanje podatkov

Podatke za naš projekt smo pridobili iz spletne strani Študentska prehrana. Spletna stran vsebuje vse restavracije, ki nudijo študentske menije v Sloveniji, ter meni te restavracije, zato je za naš projekt bila idealna.

2.2 Pisanje programa

Spletna stran ni nudila podatkov v iskani obliki, zato smo se odločili, da bomo napisali svoj program za razčlembo podatkov. Odločili smo se, da bomo napisali razčlenjevalnik v programskem jeziku Python, uporabili pa smo "knjižnico" BeautifulSoup.

Na začetku programa smo uvozili BeautifulSoup (katero smo prej z ukazom naložili) ter requests. Spletno stran smo gledali v njeni surovi HTML obliki in s pomočjo tega iskali pod katerimi elementi ter razredi se željeni podatki nahajajo. Z BeautifulSoup ukazi kot so findAll in find smo dostopali do elementov iz spletne strani. Vse restavracije so v elementu div z razredom restaurant-row, zato smo uporabili ukaz soup.findAll('div', 'restaurant-row'). Med vsemi najdenimi elementi smo želeli samo restavracije iz Maribora, zato smo v zanki for z if stavkom to preverili.

2.3 Pridobljeni podatki

Podatki, ki smo jih pridobili iz te strani so: ime restavracije, lokacija v koordinatah (longitude in latitude), cena menija brez študentskega bona, cena menija z študenskim bonom, delovni čas restavracije, lokacija (ulica in hišna številka), ponudba po vrsti hrane (hitra hrana, solata, juha, piščanec ...) ter meni restavracije.

2.4 Pretvorba v JSON

Ustvarili smo spremenljivko data, ki je tipa Dictionary, ki vsebuje sete vrednosti in ključa. V data spremenljivko vstavimo vse dobljene podatke kot vrednost in jim damo ključ, ki je ime pod katerim se bo vrednost v JSON datoteki shranila. Na koncu še ustvarjeno spremenljivko data dodamo v polje, katerega smo inicializirali na začetku programa. Na koncu ko pa so vsi podatki v polju, še to zapišemo v datoteko JSON, katero potem uvozimo v MongoDB.

3. Sistemska administracija

Vzpostavitev infrastrukture za našo aplikacijo v okolju Docker na storitvi Heroku.
Spoznavanje ukazov za pregled in upravljanje naše aplikacije Heroku s pomočjo ukazne lupine.

3.1 Vzpostavitev Docker-ja

Namen Docker-ja je gradnja slike naše aplikacije, ki omogoča prenosljivost in po uporabo okolja v katerem se aplikacija zaganja.
Implementirali smo ga tako, da smo:

• Namestili Docker
• Ktreirali Dockerfile, ki vsebuje ukaze za izgradnjo slike oz okolja. Sliko smo zgradili z ukazom docker build.
• Na koncu še preverimo delovanje z ukazom docker run

3.2 Vzpostavitev Heroku

Namen Heroku-ja je gostovanje aplikacije, ki omogoča javni dostop.
Gostovanje aplikacije smo implementirali tako, da smo:

• Prijavili se na Heroku, ustvarili projekt ter povabili vse člane ekipe.
• Z Heroku CLI s katerim se vpišemo v svoj profil, ter kreiramo aplikacijo in vanjo vstavimo našo sliko, ki smo jo prej generirali z Docker-jem

3.3 Upravljanje aplikacije s pomočjo ukazne lupine

Namen je spoznati Heroku CLI ukazno lupino, s katero lahko analiziramo statistične podatke o naši aplikaciji in razširiti naše znanje.
Statistične podatke pridobljene s pomočjo ukazov, ki smo jih uporabljali v ukazni lupini, smo samo teoretično analizirali.

4. Spletno programiranje

4.1 Spletna storitev

Ustvarjanje zalednega dela naše spletne strani, ki skrbi za posredovanje podatkov, pridobljenih iz baze, vmesniku.

Ustvarili smo osnoven Express projekt, s pomočjo generatorja npm install express-generator -g. Prej ustrvarjen mongoDb collection smo povezali z našo spletno storitvjo, z uporabo mongoose-a (mongoose-gen)p a smo ustvarili potrebne collectione in s tem še ujemajoče models, routes ter contollers v Expressu. V controllerje smo ustvarili funkcije, katere smo si zamislili, da jih bomo potrebovali za spletno stran. Vedeli smo, da bomo uporabili iskanje restavracij v bližini uporabnika, zato smo uporabili geospatial poizvedbe. Z njimi smo rešili iskanje lkacij restavracij v določenem radiusu od uporabnikove lokacije, za katere smo uporabili ukazove geoWithin in centerSphere. Za ukaz potrebujemo longitudo in latitudo, ki je uporabnikova lokacija, in željen radius, ki je v ameriških miljah.

4.2 Spletni vmesnik

Ustvarjanje čelnega dela naše spletne strani, ki je potreben za vizualizacijo podatkov katere lahko potem uporabniki uporabljajo, gledajo...

Tailwind

Za izgled spletne strani smo uporabili Tailwind, za zahtevnejše zadeve (animacija ikonic, gradiente...) pa samo CSS. V Tailwind smo uvozili svoje izbrane barve in jih poimenovali za lažje uporabljanje skozi projekt.

Register in Login

Na spletni strani lahko uporabniki ocenjujejo restavracije in v prihodnosti z dovolj obiski ene restavracije dobijo popust, zato smo uporabnikom omogočili ustvarjanje računa. Pri registraciji si morajo izvbrati svoje ime, mail in geslo. Ustvarjen je uporabnik, a še ni aktiven, v bazo se shranijo uporabnikovi podatki ter edinstven hash. Uporabnik se lahko prijavi komaj takrat, ko je njegov račun aktiven. Za aktivacijo računa z nodemailer-om nato pošljemo potrditven mail na njihov vnesen mail z linkom v katerem URLju je enak hash. Ob kliku na link se nato na čelnem delu primerja hash iz urlja in hash od uporabnika v bazi, če je enak je uporabnik aktiven in se lahko prijavi.

Administrativni vmesnik

Člani skupine imamo funkcijo admina, da lahko urejamo uporabnike, jih brišemo, importamo JSON datoteko za poosodabljanje restavracij ali pa jih ročno spreminjamo. Do administrativnih funkcij dostopamo tako, da se prijavimo, če ima uporabnik funkcijo administrator se nam prikažejo te dodatne opcije.

Domača stran

Na Domači strani aplikacije so prikazane vse restavracije na večih straneh, listanje med restavracijami je omogočeno z Paginator-jem. Uporabniki lahko spremenijo razvrstitev restavracij ter število restavracij na stran. Ob strani še je stranski meni z opcijo iskanja restavracij glede na oddaljenost ter iskanje po tipu hrane.

Prikaz na zemljevidu

Ob stisku na restavracijo se odpre okno kjer so na voljo vsi podatki o restavraciji (ime,lokacija, delovni čas, cena ...), zraven vseh podatkov pa še je prikazan zemljevid kjer se restavracija nahaja, po zemljevidu se je možno premikat, ga zoom-inat ter zoom-outat. Zemljevid prav tako uporabljamo pri prikazu restavracij v bližini uporabnika. Za delo z zemljevidom smo uporabili react-google-maps/api. Ustvarit smo si morali svoj google maps api ključ in ga uporabit v aplikaciji. Zemljevidu smo doddali osnoven zoom in nivo, stil ter markerje. Markerji se na zemljevidu prikažejo s pomočjo longitude in latitude. Lokacija uporabnika ima svojo ikono, lokacije restavracij pa so vse enake ikone, vsaka ikona restavracije na zemljevidu ima svoje ime, informacijo če je trenutno odprta ter ob stisku na njo uporabnika preusmeri na okno z informacijami o restvaracijami.