Sustav je zasnovan na klijent-poslužitelj arhitektonskom stilu koji koristi višeslojnu arhitekturu i MVC unutar samog poslovnog sloja. Ovaj pristup omogućuje jasno odvajanje odgovornosti, modularnost te lakše održavanje i nadogradnju sustava.

• Klijent-poslužitelj stil definira fizičku organizaciju sustava - klijenti, što su učenici i administratori, su odvojeni od poslužitelja koji obrađuje zahtjeve i pristupaju bazi podataka. Takva strukturiranost omogućuje jednostavnu interakciju i podjelu između frontenda i backenda.
• Višeslojna arhitektura očituje se u organizaciji unutar samog sustava kroz tri osnovna sloja: prezentacijski (React), poslovni (Node.js) i podatkovni (PostgreSQL baza). Time se osigurava visoka kohezija i niska povezanost.
• MVC (Model-View-Controller) pristup se primjenjuje unutar aplikacijskog sloja kako bi se postigla modularnost koda. Controller preuzima zahtjev klijenta i prosljeđuje ga na obradu, Model prima taj zahtjev, obrađuje ga (provodi nužnu logiku) i šalje ga natrag, a View služi za prikaz tih informacija krajnjem korisniku.

Podsustav za autentifikaciju i korisničke račune: zadužen je za prijavu korisnika u aplikaciju putem korisničke adrese, promjenu lozinke i brisanje korisničkog računa.

Podsustav za upravljanje sadržajem: omogućuje administratorima pretragu vanjskih rječnika te dodavanje cijelog ili samo jednog njegovog dijela u sustav, kao i njihovo uređivanje i brisanje.

Podsustav za učenje i evaluaciju: omogućuje prevođenje riječi s materinjeg na strani jezik, implementira logiku premještanja riječi među posudama na temelju točnosti odgovora, različite modove koji provjeravaju ispravnost napisanih riječi i izgovora te ih ocjenjuju na ljestvici od 1 do 10.

Podsustav za sigurnost i autorizaciju: osigurava da je pristup podacima i funkcionalnostima aplikacije ograničen na temelju korisničkih uloga, implementira zaštitu osobnih podataka korisnika i sigurnosnu prijavu u skladu s OAuth 2.0. standardom.

Podsustav za infrastrukturu i održavanje: odgovoran je za praćenje performansi, skalabilnost sustava te osiguravanje trajnosti i oporavka podataka.

Za spremanje podataka sustava odabrana je relacijska baza podataka PostgreSQL čime se osigurava transakcijska pouzdanost i visok integritet podataka. U relacijskom modelu podaci su organizirani u tablice (entitete) koje su međusobno povezane vanjskim ključevima što omogućuje efikasno pretraživanje i provedbu kompleksne poslovne logike. Odnosi između entiteta (primjerice Users, Words i Dictionaries) prikazani su putem dijagrama klasa izrađenog u alatu AstahUML koji je poslužio za vizualizaciju strukture podataka i njihovih veza.

U aplikaciji se koriste sljedeći mrežni protokoli:

• HTTPS - omogućuje sigurnu i pouzdanu razmjenu podataka između prezentacijskog sloja (React) i logičkog sloja (Node.js).

• TCP/IP - osigurava pouzdan prijenos paketa podataka između korisničkog računala i poslužitelja.

• SSL/TLS - pruža enkripciju, osigurava zaštitu osobnih podataka i tokena tijekom prijenosa kroz mrežu.

• PostgreSQL protokol (SQL over TCP/IP) - koristi se za komunikaciju između logičkog sloja (Node.js) i podatkovnog sloja (PostgreSQL baze). Osigurava slanje SQL upita i primanje rezultata putem sigurne TCP veze.

Globalni upravljački tok predstavlja kružni tok podataka i informacija koji se pokreće interakcijom korisnika te se drži pravila višeslojne arhitekture - komunikacija samo sa susjednim slojem. Tok je centraliziran na poslužitelju gdje se odvija sva poslovna i sigurnosna logika.

Općeniti tok kroz aplikaciju izgleda ovako:

• Korisnik putem frontend sučelja izrađenog u Reactu pokreće određenu radnju (primjerice prijavljuje u sustav) nakon čega se prema poslužitelju šalje HTTPS zahtjev.
• Backend prima zahtjev i provjerava ima li korisnik valjan JWT (JSON Web Token) koji se koristi za potvrdu identiteta korisnika i provjeru njegovih ovlasti. Ovisno o tome zahtjev se prihvaća ili odbija.
• Ako je zahtjev ovlašten on se obrađuje - dohvaćaju se podaci iz baze podataka pomoću SQL upita koji se šalju putem TCP/IP i šalju se nazad u Node.js.
• Nakon obrade, backend generira odgovor u JSON formatu s traženim podacima ili statusima radnje (primjerice "uspješna prijava" ili "pogrešan odgovor") i šalje ih Reactu gdje se zatim oni prikazuju krajnjem korisniku.

Ako zahtjev dolazi od korisnika s administratorskim ovlastima tada su omogućene dodatne funkcionalnosti poput dodavanja novih riječi. Ti se podaci također spremaju u bazu pomoću istog toka obrade.

Mikrofon i zvučnici na klijentu zbog provjere izgovora prilikom učenja riječi takvim modom.

Odabrana arhitektura temelji se na klijent-poslužiteljskom stilu s implementiranom višeslojnom arhitekturom i MVC obrascem unutar aplikacijskom sloja. Ovaj pristup pruža optimalnu ravnotežu između jednostavnosti implementacije, fleksibilnosti i održivosti.

Pri oblikovanju arhitekture sustava primijenjeni su sljedeći temeljni principi oblikovanja:

• visoka kohezija - svaki sloj ima jasno definiranu odgovornost pa se tako frontend bavi prikazom podataka, backend obradom poslovne logike, a baza pohranom.
• slaba povezanost - slojevi međusobno komuniciraju preko REST API sučelja čime se omogućuje paralelni razvoj i testiranje.
• hijerarhija i modularnost - omogućuje jednostavno dodavanje novih funkcionalnosti bez potrebe za izmjenom postojećih dijelova koda.

Moguće druge alternativne arhitekture:

1. Monolitna arhitektura: jednostavnija implementacija zbog toga što objedinjuje frontend i backend u jednu cjelinu no istovremeno otežava održavanje i fleksibilnost. Također, zbog načina funkcioniranja CDN-a (Content Delivery Network) odziv bi bio znatno sporiji jer se učitava više sadržaja. Zbog navedenik informacija, ova arhitektura je naposljetku odbačena.

2. Mikroservisi: podrazumijeva razdvajanje sustava na niz malih neovisnih servisa koji međusobno komuniciraju, što omogućuje visoku skalabilnost i neovisno razvijanje komponenti sustava. Takav pristup je optimalan za opširnije i brzorastuće sustave, što isključuje ovu arhitekturu upravo zbog svoje presloženosti za trenutni opseg projekta.

• Klijent-poslužitelj:
• Baza podataka:
• Datotečni podsustav:
• Grafičko sučelje:

• organizacija aplikacije na složenijoj razini (struktura slojeva i komponenata aplikacije) - frontend i backend slojevi, MVC obrazac

Atribut	Tip podataka	Opis
userId	int	primarni ključ
email	charvar (100)	unique
password	charvar (50)
role	charvar (10)

USERS opisuje svakog prijavljenog korisnika u aplikaciju. UserId se automatski određuje, email i password upisuje korisnik (password se sprema hashiran), a role definira ulogu korisnika te se automatski definira kao 'student' pri registraciji.

Atribut	Tip podataka	Opis
userId	int	primarni ključ, strani ključ
langId	int [PK]	primarni ključ, strani ključ

USERLANG povezuje tablice USERS i LANGUAGES, povezuje korisnika sa svakim jezikom koji je krenuo učiti. Sastoji se od userId koji je strani ključ iz USERS i langId koji je strani ključ iz LANGUAGES.

Atribut	Tip podataka	Opis
langId	int	primarni ključ
langName	charvar (50)
langImg	charvar (256)

U LANGUAGES se spremaju svi dostupni jezici za učenje. LangId se automatski određuje pri stvaranju jezika, langName je naziv jezika, a langImg put do slikovne datoteke koja predstavlja taj jezik.

| Atribut | Tip podataka | Opis | | ------------- | ------------- | | dictId | int | primarni ključ | | dictName | charvar (100) | | | langId | int | strani ključ | | description | charvar (256) | |

U DICTIONARIES se spremaju svi rječnici. DictId se automatski određuje pri stvaranju rječnika, dictName je naziv pridružen rječniku, langId je strani ključ iz LANGUAGES koji označava na kojem jeziku je rječnik, a description je kratki opis sadržaja rječnika.

Atribut	Tip podataka	Opis
dictId	int	primarni ključ, strani ključ
wordId	int	primarni ključ, strani ključ

DICTWORD povezuje tablice DICTIONARIES i WORDS, povezuje riječ sa svakim rječnikom u kojem se nalazi. Sastoji se od dictId koji je strani ključ iz DICTIONARIES i wordId koji je strani ključ iz WORDS.

Atribut	Tip podataka	Opis
wordId	int	primarni ključ
word	charvar (100)
audioFile	charvar (256)
langId	int	strani ključ
translationId	int	strani ključ

WORDS je tablica koja sadrži sve strane riječi i hrvatske prijevode. WordId je identifikacija riječi te se automatski određuje pri stvaranju, word je riječ, audioFile je put do dokumenta u kojem je spremljen izgovor riječi, langId je strani ključ iz tablice LANGUAGES i označava jezik na kojem je riječ, a hrvatski prijevod strane riječi povezan je s translationId koji je zapravo wordId tog prijevoda (za hrvatske riječi, tj. kada je langId onaj od hrvatskog jezika, translationId je NULL).

Atribut	Tip podataka	Opis
phrase	charvar (256)	primarni ključ
wordId	int	strani ključ

Fraze koje opisuju riječ spremljene su u tablicu PHRASES, phrase sadrži frazu, a wordId je strani ključ iz tablice WORDS za onu riječ koju fraza opisuje.

Ovaj dijagram razreda prikazuje glavne entitete sustava i njihove međusobne odnose.

Atribiti klasa su privatni, zbog čega će svaka klasa (osim relacijskih) imati gettere i settere za te atribute.

Klasa User predstavlja korisnika koji se može registrirati, prijaviti, mijenjati lozinku i upravljati jezicima koje uči.

Klasa Dictionary sadrži riječi nekog jezika i posjeduje funkcije addWord i removeWord koje samo admin može pozvati. Također sadrži funkciju getStatus koja služi kao pomoćna funkcija koja provjera stanje riječnika (npr. može nam ispisati ukupni broj riječi, broj riječi bez prijevoda, broj riječi bez audioFile-a, itd.)

Klasa Word predstavlja riječ i njen prijevod, s povezanim frazama i izgovorom. Isto kao i za klasu Disctionary, sadrži funkcije koje samo admin može pokretati. Ima samoreferencijalnu vezu (translation: Word).