Veb aplikacija za elektronsko učenje (e-learning)


Aplikacija treba da omogući nastavnicima da kreiraju lekcije sa različitim vrstama sadržaja, a učenicima da mogu preko Interneta da pregledaju te lekcije. Pregledanje lekcija se evidentira kao prisustvo na času. Nastavnici i učenici se prijavljuju pomoću korisničkih imena i lozinki na sistem. Šablon korisničkih imena za nastavnike odgovara imenu i prezimenu, dok za učenike odgovara broju dosijea. Lozinke su proizvoljne i korisnici ih mogu menjati, ali moraju poštovati određena ograničenja, u smislu da su lozinke dovoljno složene da se smatraju bezbednim. Nastavnik može da kreira predmet. Predmet ima naziv i opis. U predmetu, nastavnik može da kreira lekcije. Lekcija ima redni broj , naziv, opis i datum od kada će postati vidljiva, kao i do kada će biti dostupna za pregledanje. Unutar lekcije, nastavnik može da kreira oblasti. Svaka oblast ima naziv, redni broj i opis, kao i procenjeno vreme koje učenik treba da provede pregledajući materijale u toj oblasti. Unutar oblasti, nastavnik može da dodaje polja. Svako polje ima naslov i kratak opis njegovog sadržaja. Polja mogu biti jednog od tri tipa. Prvi tip je tekstualni. U tekstualnom tipu polja nastavnik može da unosi samo tekst. Drugi tip polja je slika sa opisom. Nastavnik može za ovaj tip polja da izvrši upload fotografije i da otkuca opis sadržaja na toj fotografiji. Treći tip polja je upitnik za proveru znanja. Nastavnik za ovaj tip polja može da unese jedno ili više pitanja. Pitanje ima tekst i spisak ponuđenih odgovora (broj odgovora je proizvoljan). Pitanje može imati jedan ili više tačnih odgovora. Učenik može da otvori predmet i da vidi spisak lekcija ako su lekcije vidljive (prošlo je vreme od kada je lekcija dostupna). Ako je prošlo vreme do kada lekcija treba da se pregleda, učeniku se neće evidentirati prisustvo, tj. da je lekciju odgledao iako može da je otvori i pregleda. Kada otvori lekciju, prikazaće se spisak oblasti. Kada otvori oblast, biće mu prikazano prvo polje. Sve vreme dok je u oblasti će da teče vreme. Učenik može da se kreće kroz spisak polja jedne oblasti, ali ne može da pređe na sledeću oblast dok ne istekne vreme koje je nastavnik odredio za trenutnu oblast. Učeniku se polja unutar oblasti prikazuju na sledeći način. Tekstualno se prikazuje sa naslovom i opisom u zaglavlju i sa celim tekstom u telu stranice polja. U dnu postoji navigacija kojom učenik može da pređe na sledeće ili naredno polje (ako takvo postoji). Polje sa slikom se prikazuje tako da naslov i opis budu u zaglavlju, a da se u telu prikazuje slika i ispod nje opis koji objašnjava njen sadržaj. Tip polja koje je pitanje za proveru znanja se prikazuje tako što se prikažu pitanja sa ponuđenim odgovorima. Ako pitanje ima samo jedan tačan odgovor, pored odgovora su radio polja za unos (okrugla), tako da može da izabere samo jedan od ponuđenih odgovora. Ako pitanje ima više tačnih odgovora, pored njih se pojavljuje check-box polje za unos (kvadrat), tako da može da izabere više tačnih. Pošto klikne na dugme za proveru znanja, biće zelenim obeleženo tamo gde je tačno odgovorio, a crvenim tamo gde je obeležio barem jedan pogrešan odgovor. Biće prikazano koji od odgovora su bili tačni u odnosu na one koje je obeležio. Nastavnik može da vidi spisak učenika koji prate predmet i da vidi do koje lekcije su stigli, tj. koje lekcije su završili, a koje lekcije nisu. Grafički interfejs aplikacije treba da bude realizovan sa responsive dizajnom.


Tehnička ograničenja
- Aplikacija mora da bude realizovana na Node.js platformi korišćenjem Express biblioteke. Aplikacija mora da bude podeljena u dve nezavisne celine: back-end veb servis (API) i front-end (GUI aplikacija). Sav kôd aplikacije treba da bude organizovan u jednom Git spremištu u okviru korisničkog naloga za ovaj projekat, sa podelom kao u primeru zadatka sa vežbi.
- Baza podataka mora da bude relaciona i treba koristiti MySQL ili MariaDB sistem za upravljanje bazama podataka (RDBMS) i u spremištu back-end dela aplikacije mora da bude dostupan SQL dump strukture baze podataka, eventualno sa inicijalnim podacima, potrebnim za demonstraciju rada projekta.
- Back-end i front-end delovi projekta moraju da budi pisani na TypeScript jeziku, prevedeni TypeScript prevodiocem na adekvatan JavaScript. Back-end deo aplikacije, preveden na JavaScript iz izvornog TypeScript koda se pokreće kao Node.js aplikacija, a front-end deo se statički servira sa rute statičkih resursa back-end dela aplikacije i izvršava se na strani klijenta. Za postupak provere identiteta korisnika koji upućuje zahteve back-end delu aplikacije može da se koristi mehanizam sesija ili JWT (JSON Web Tokena), po slobodnom izboru.
- Sav generisani HTML kôd koji proizvodi front-end deo aplikacije mora da bude 100% validan, tj. da prođe proveru W3C Validatorom (dopuštena su upozorenja - Warning, ali ne i greške - Error). Grafički korisnički interfejs se generiše na strani klijenta (client side rendering), korišćenjem React biblioteke, dok podatke doprema asinhrono iz back-end dela aplikacije (iz API-ja). Nije neophodno baviti se izradom posebnog dizajna grafičkog interfejsa aplikacije, već je moguće koristiti CSS biblioteke kao što je Bootstrap CSS biblioteka. Front-end deo aplikacije treba da bude realizovan tako da se prilagođava različitim veličinama ekrana (responsive design).
- Potrebno je obezbediti proveru podataka koji se od korisnika iz front-end dela upućuju back-end delu aplikacije. Moguća su tri sloja zaštite i to: (1) JavaScript validacija vrednosti na front-end-u; (2) Provera korišćenjem adekvatnih testova ili regularnih izraza na strani servera u back-end-u (moguće je i korišćenjem izričitih šema - Schema za validaciju ili drugim pristupima) i (3) provera na nivou baze podataka korišćenjem okidača nad samim tabelama baze podataka.
- Neophodno je napisati prateću projektnu dokumentaciju o izradi aplikacije koja sadrži (1) model baze podataka sa detaljnim opisom svih tabela, njihovih polja i relacija; (2) dijagram baze podataka; (3) dijagram organizacije delova sistema, gde se vidi veza između baze, back-end, front-end i korisnika sa opisom smera kretanja informacija; (4) popis svih aktivnosti koje su podržane kroz aplikaciju za sve uloge korisnika aplikacije prikazane u obliku Use-Case dijagrama; kao i (5) sve ostale elemente dokumentacije predviđene uputstvom za izradu dokumentacije po ISO standardu.
- Izrada oba dela aplikacije (projekata) i promene kodova datoteka tih projekata moraju da bude praćene korišćenjem alata za verziranje koda Git, a kompletan kôd aplikacije bude dostupan na javnom Git spremištu, npr. na besplatnim GitHub ili Bitbucket servisima, jedno spremište za back-end projekat i jedno za front-end projekat. Ne može ceo projekat da bude otpremljen u samo nekoliko masovnih Git commit-a, već mora da bude pokazano da je projekat realizovan u kontinuitetu, da su korišćene grane (branching), da je bilo paralelnog rada u više grana koje su spojene (merging) sa ili bez konflikata (conflict resolution).

Ova tema je rezervisana od strane studenata:

M. Tair, "Teme projektnih zadataka za predmet Praktikum Internet i veb tehnologije", 2016-2025. [Online]. Available at: http://zadatak.singidunum.ac.rs/app/piivt-biranje-tema/ [Accessed: 2025-04-28]