1. Arhitektura sustava

U ovom poglavlju je opisana arhitektura programskog sustava. Objašnjene su komponente arhitekture i njihovi međusobni odnosi. Također su priloženi i dijagrami radi lakšeg razumijevenja određenih komponenti.

Opis arhitekture

Stil arhitekture

Arhitektura koja se koristi u ovom programskom rješenju je klijentsko-poslužiteljska s elementima slojevite arhitekture. S obzirom da klijenti ne komuniciraju međusobno već koriste uslugu poslužitelja smo se odlučili za ovu arhitekturu. Korisnici koji žele objaviti društvenu igru komunciraju s poslužiteljem kojem šalju podatke te on dalje te podatke koristi u komunikaciji s drugim korisnicima. Također arhitektura ima i elemente slojevite zato što smo sve funkcionalnosti podijelili u 3 sloja, to su prezentacijski, poslovni i podatkovni.

Podsustavi

• Prezentacijski: Prezetnacijski odnosno frontend sustav je napravljen pomoću Reacta. React je moderan alat koji služi za izradu dinamičkih korisničkih sučelja te ima puno funkcionalnosti koje olakšavaju rad. React se također dobro integrira sa Djangom koji je korišten za backend.

• Poslovni: Poslovni odnosno backend sustav je izveden koristeći Django. Django je Python framework koji se često koristi u modernim sustavima. Nudi puno funkcionalnosti te se dobro integrira sa velikim brojem frontend frameworkova te velikim brojem bazi podataka.

• Podatkovni: Podatkovni sustav smo realizirali koristeći PostgreSQL koji je jednostavan za upotrebu te ima širok izbor funkcionalnosti. Također Django je dobro integriran s njim što je još jedna njegova dobra značajka. Koristeći Djanog ORM (object-relational mapping) smo olakšali unošenje podataka u bazu te baratanje s njima zato što nije potrebno pisati SQL kod nego Django to napravi umjesto nas.

Preslikavanje na radnu platformu

Platforma koju smo mi koristili je Render. Za nju smo se odlučili zato što je jednostavna za korištenje i praktična zbog toga što sve dijelove arhitekture možemo smjestiti za nju što olakšava lakše povezivanje i rješavanje mogućih problema. Također smo na Renderu hostali bazu, frontend i backend što je olakšalo međusobnu integraciju i postupak razvoja.

Spremišta podataka

Za pohranu podataka je korištena PostgreSQL baza podataka koja je relacijskog tipa. PostgreSQL je vrlo dobro integriran sa Django frameworkom zato što je prijevod naredbi u PostgreSQL jezik automatski te se nije potrebno s time zamarati, a dobivamo sve njegove prednosti. Baza podataka je hostana na Renderu te to također olakšava povezivanje s backendom.

Mrežni protokoli

• Globalni upravljački tok: Korisnik preko Reacta ineraktira sa sustavom te šalje HTTP zahtjeve prema backendu gdje se nalazi Django koji dalje te zahtjeve obrađuje i šalje odgovore Reactu u JSON sa potrebnim informacijama koje korisnik traži

• Sklopovskoprogramski zahtjevi: Program ne zahtjeva posebne sklopovske zathjeve.

Obrazloženje odabira arhitekture

U ovom dijelu trebate objasniti razloge za odabir arhitekture opisane u prethodnom poglavlju. Objasnite ključne čimbenike koji su utjecali na vaš izbor arhitekture, uključujući izazove i kompromise koje ste razmatrali tijekom odlučivanja. Pojasnite kako odabrana arhitektura zadovoljava zahtjeve vašeg projekta i omogućava skalabilnost, održivost i modularnost.

• Izbor arhitekture temeljen na principima oblikovanja: U izboru arhitekture smo se vodili time da odaberemo tehnologije koje su jednostavne za naučiti, pružaju puno mogućnosti te lagano se integriraju. Također React i Django se često koriste u modernim sustavima te je znanje o korištenju biti korisno u budućnosti.

• Razmatrane alternative: Osim Reacta, Djanga i PostgreSQL su bili razmatrani SQLite, Express.js i Node.js no u razgovoru s asistentom i demosom smo zaključili da su oni prejednostavni i biti će teže napraviti objektnu strukturu

Organizacija sustava na visokoj razini i organizacija aplikacije

Klijent-poslužitelj

• React: Preko prezentacijskog sloja komunicira sa backendom i ostatkom sustava. Šalje zahjeve preko HTTP protokola. React nudi dinamičko korisničko iskustvo što je odličje modernih programa.

• Django: Django igra ulogu backenda odnosno poslužitelja koji obavljva sve zahtjeve korisnika na preko funkcija koje su definirane te dohvaća podatke iz baze ako je potrebno i šalje ih Reactu.

Baza podataka

PostgreSQL je relacijska baza podataka s kojom se komunicira preko Djanga koristeći objektno-relacijsko mapiranje što ne zahtjeva pisanje SQL koda.

Grafičko sučelje

React omogućuje dinamičku web aplikaciju te laku prilagodbu na različite veličine uređaja. Također uz svoje moderne mogućnosti donosi pozitivno korisničko iskustvo.

2. Baza podataka

Korištena je relacijska baza podataka, točnije PostgreSQL koja je jednostavna, praktična i raznovrsna. Njene prednosti su prethodno objašnjene.

Opis tablica

auth_user

Atribut	Tip podatka	Opis varijable
userId (PK)	INT	Jedinstveni identifikator korisnika
password	VARCHAR	Lozinka
last_login	TIMESTAMP	Zadnje vrijeme ulogiravanja
is_superuser	BOOLEAN	Je li korisnik superuser (ima li neke posebne mogućnosti)
username	VARCHAR	Korisničko ime
first_name	VARCHAR	Ime korisnika
last_name	VARCHAR	Prezime korisnika
email	VARCHAR	Email adresa korisnika
is_staff	VARCHAR	Je li korisnik admin
is_active	BOOLEAN	Je li korisnik aktivan
date_joined	DATE	Datum registracije
is_on_blacklist	BOOLEAN	Je li korisniku zabranjeno korištenje programa
profileId (FK)	INT	ID povezanog profila

tablica 4.1

Nastaje nakon registracije automatski korištenje OAuth APIja. Osnovni podaci o korisniku te varijable za razvrstavanje korisnika u grupe u ovisnosti o dozvolama. Također je povezano sa profilom preko ID profila.

api_profile

Atribut	Tip podatka	Opis varijable
profileId (PK)	INT	Jedinstveni identifikator profila
address	VARCHAR	Adresa profila
latitude	INT	Geografska širina
longitude	INT	Geografska dužina
updated_at	TIMESTAMP	Vrijeme zadnje promjene na profilu
photo	VARCHAR	Naziv fotogrije (slika proifla)

tablica 4.2

Nastaje nakon registracije te je povezano s korisnikom. Daje informacije o lokaciji korisnika te vrijeme zadnje promjene profila i prikazuje profilnu sliku.

game

Atribut	Tip podatka	Opis varijable
gameId (PK)	INT	Jedinstveni identifikator igre
name	VARCHAR	Naziv igre
description	VARCHAR	Opis igre
photo	VARCHAR	Naziv fotografije (slika profila)
publisher	VARCHAR	Izdavač igre
grade	INT	Ocjena očuvanosti igre
numberOfPlayers	INT	Broj igrača koji igra
playingTime	INT	Vrijeme trajanja igre u satima
complexity	INT	Težina igre
active	BOOLEAN	Je li igra na posudbi
profileId (FK)	INT	ID vlasnika igre
borowsprofileId (FK)	INT	ID osobe koja je posudila
genreId (FK)	INT	ID žanra

tablica 4.3

Nastaje nakon što korisnik unese igru u sustav. Opisuje igru kroz ime, opis, sliku, proizvođača, ocjenu očuvanosti, broj igrača koji igra, duljinu trajanja igre, težinu igre, je li igra na posudbu, te ID vlasnika i osobe koje je posudila ako se posudba dogodila te žanr. Sve podatke unosi korisnik ili se unose sami prije zamjene.

listing

Atribut	Tip podatka	Opis varijable
listingId (PK)	INT	Jedinstveni identifikator objave
description	VARCHAR	Opis objave
profileId (FK)	INT	ID profila osobe koja je objavila
gameId (FK)	INT	ID igre koja je objavljena

tablica 4.4

Objava nastaje nakon što korisnik svoju igru stavi javno te ju nakon toga mogu vidjeti i drugi.

genre

Atribut	Tip podatka	Opis varijable
genreId (PK)	INT	Jedinstveni identifikator žanra
name	VARCHAR	Naziv žanra

tablica 4.5

Žanrovi su obilježje igre te imaju svoj naziv i id s čim ih se povezuje s listom interesa i igrama.

hasInterest

Atribut	Tip podatka	Opis varijable
profileId (PK) (FK)	INT	ID korisnika koji ima interes u neki žanr
genreId (PK) (FK)	INT	ID žanra

tablica 4.6

Ako neki korisnik ima interes u neki žanr igara on to označi i u tablicu se unese id profila i žanra te se po tome radi lista interesa.

report

Atribut	Tip podatka	Opis varijable
listingId (PK) (FK)	INT	ID objave na koju se odnosi prijava
profileId (PK) (FK)	INT	ID profila osobe koja je napisala prijavu
description	VARCHAR	Opis prijave

tablica 4.7

Ako korisnik želi prijaviti neku objavu igre može te onda se spremaju podaci o objavi, profilu prijavitelja i opisu te dalje o uklanjaju objave odlučuje administrator.

isOnWishlist

Atribut	Tip podatka	Opis varijable
gameId (PK) (FK)	INT	ID igre koja je na popisu želja
profileId (PK) (FK)	INT	ID profila koji je stavio igru na listu želja

tablica 4.8

Ako neki korisnik stavi neku igru na listu želja povezuje se id korisnika i id igre.

notification

Atribut	Tip podatka	Opis varijable
notificationId (PK)	INT	Jedinstveni identifikator obavijesti
description	VARCHAR	Opis obavijesti
time	TIMESTAMP	Vrijeme obavijesti
profileId (FK)	INT	ID pošiljatelja obavijesti
recievedprofileId	INT	ID primatelja obavijesti

tablica 4.9

Obavijest se šalje korisniku koji je objavio igru kada netko zatraži zamjenu te se korisniku šalje opis te tko je pošiljatelj.

Dijagram baze podataka

ER model za bazu podataka

dijagram 4.1

Relacijski model za bazu podataka

dijagram 4.2

Dijagram razreda

Napomena: Prilikom druge predaje projekta dijagram razreda i opisi moraju odgovarati stvarnom stanju implementacije

Dinamičko ponašanje aplikacije

Dinamičko ponašanje aplikacije odnosi se na način na koji objekti u sustavu evoluiraju kroz vrijeme, uključujući prijelaze između različitih stanja. To uključuje aktivnosti, događaje, odluke i interakcije unutar aplikacije. UML dijagrami stanja omogućuju vizualizaciju tih promjena i olakšavaju razumijevanje dinamike sustava.

Razumijevanje promjena stanja neophodno je za pravilno funkcioniranje aplikacije jer pruža uvid u interakcije među objektima, komponentama i korisnicima tijekom rada sustava. Korištenjem UML dijagrama stanja i aktivnosti moguće je vizualizirati prijelaze i stanja objekata, identificirati potencijalne probleme, osigurati točnu implementaciju te poboljšati komunikaciju među članovima tima.

Zadatak:

• Dokumentirajte dva dinamička dijagrama koji prikazuju značajne ili neke složene procese u aplikaciji. Registracija i prijava korisnika nisu ključni procesi u ovom kontekstu, stoga se usmjerite na specifične, značajne procese.

UML dijagrami stanja

UML dijagrami stanja nužni su za razumijevanje dinamičkog ponašanja sustava. Oni jasno prikazuju promjene stanja objekata tijekom vremena ovisno o događajima i uvjetima.

Preporuke za izradu UML dijagrama stanja:

1. Odaberite značajan objekt sustava (npr. prijava štete, obrada zahtjeva).

2. Identificirajte stanja objekta (npr. aktivan, neaktivan, obrisan).

3. Definirajte događaje i uvjete prijelaza.

4. Ako je potrebno, koristite hijerarhiju stanja za složenije probleme.

5. Dodajte bilješke za pojašnjenje važnih prijelaza i elemenata.

Primjer: Dijagram stanja za prijavu štete može uključivati:

• Stanja: Kreirana prijava, Obrađena prijava, Zatvorena prijava….

UML dijagrami aktivnosti

Dijagram aktivnosti prikazuje tijek izvršavanja određenog procesa. Osim za razumijevanje toka podataka unutar aplikacije, koristi se za analizu poslovnih procesa.

Zadatak:

1. Identificirajte proces koji želite modelirati (npr. obrada zahtjeva).

2. Razlomite proces na aktivnosti i povežite ih za prikaza slijeda izvršavanja.

3. Upotrijebite pseudo čvorove za jasan prikaz.

Primjer:** Na primjer, u aplikaciji za upravljanje štetama, dijagram aktivnosti može prikazivati proces obrade zahtjeva za pomoć, što uključuje aktivnosti: Primanje zahtjeva, Analiza podataka, Odobravanje resursa, Slanje pomoći.

Predložak temeljen na wiki materijalima projekta Programsko inženjerstvo autora Vlado Sruk, pod licencom CC BY-NC-SA 4.0.