Univerzitet u Novom Sadu
Fakultet tehničkih nauka
Inženjerstvo informacionih sistema
Veb orijentisane tehnologije i sistemi
Dokumentacija za MEAN 2 web
aplikaciju
Novi Sad, 2018. god.
Sadržaj
1. Uvod
2
1.1 Opis aplikacije
2
1.2 Tehnologije
3
1.3 Način korišćenja
3
1.4 Osnovna struktura aplikacije
7
2. Backend
10
2.1 Modeli
14
2.2 Rute
16
2.2.1 Autentifikacija
17
3. Frontend
28
3.1 Modeli
34
3.2 Servisi
36
3.2.1 HTTP Zahtevi
37
3.3 Komponente
51
4. Ostalo
80
4.1 Linkovi
80
4.2 Sajt
82
4.3Bazapodataka
87
2
1. Uvod
1.1 Opis aplikacije
U pitanju je web aplikacija za trgovanje knjigama.
Registrovani korisnici imaju mogućnost postavljanja knjiga za prodaju, kupovine knjiga od strane
drugih korisnika, učestvovanje na forumu, ocenjivanja i komentarisanja kako knjiga, tako i iskustva sa
određenim korisnicima u trgovini.
Posetioci koji nisu registrovani imaju mogućnost pregleda dostupnih knjiga, objava na forumu i objava
od strane drugih korisnika.
Administator ima sve mogućnosti kao i registrovani korisnik, s tim da može još da: briše i menja sve
knjige, vidi listu svih registrovanih korisnika sajta, briše i menja sve objave na forumu.
1.2 Tehnologije
Za izradu aplikacije su korišćene sledeće tehnologije:
Angular, HTML; CSS i Bootstrap za Frontend i
NodeJS, ExpressJS, Moongose i MongoDB za Backend.
Za izradu aplikacije je korišćeno razvojno okruženje Visual Studio Code
3
1.3 Način korišćenja
Za lokalno pokretanje aplikacije neophodno je imati instaliran
Prvo je neophodno klonirati sledeći repozitorijum:
Nakon toga je potrebno izvršiti sledeće komande (u command prompt-u, u folderu gde se
nalazi projekat):
1.npm install - za instaliranje zavisnosti
2. npm run-script build - za pokretanje frontend dela
3. npm start - za pokretanje backend dela
Kompletan kod je dostupan na sledećem linku:
1.4 Osnovna struktura aplikacije
Osnovna struktura aplikacije je kreirana upotrebom ExpressJS generatora
Za generisanje strukture aplikacije ExpressJS generatorom potrebno je izvršiti sledeće
komande:
1. npm install -g express-generator - instaliranje express js framework-a
2. express mojaPrvaAplikacija - generisanje aplikacije sa Jade templating-om:
3. npm install - instaliranje zavisnosti.
4
Glavne celine aplikacije:
-Backend:
• Osnovna Express i Serverska konfiguracija
• Modeli
• Rute i kontroleri vezani za njih - odgovaraju HTTP zahtevima
• Autentifikacija
-Frontend:
• Modeli
• Komponente
• Servisi
• Rute
• Stilizacija
• Autentifikacija
5
Slika 1. Glavna struktura aplikacije
6
Slika 2. Backend struktura aplikacije
7
Slika 3. Frontend struktura aplikacije
8
Aplikacija je razvijana pod MIT licencom.
Slika 4. LICENSE fajl
package.json fajl je prisutan je u root direktorijumu u svakoj Node aplikaciji ili modulu i koristi
se za definisanje svojstva paketa.
9
Slika 6. Zavisnosti u package.json fajlu
11
2. Backend
U www.js fajlu se vrši kreiranje servera i kreiranje i podešavanje porta. Ovaj kod je
automatski generisan od strane ExpressJS generatora.
12
Slika 8. Serverski www.js fajl
13
app.js predstavlja glavni serverski fajl aplikacije. U njemu se prvo se importuju svi potrebni
moduli a zatim definišu sve rute koje će se koristiti u aplikaciji. Nakon toga se vrši
konektovanje na bazu podataka. Ostala serverska podešavanja su automatski generisana
od strane ExpressJS generatora.
Slika 9. Serverski app.js fajl
14
Slika 10. Serverski app.js fajl
U database.js fajlu se nalazi modul sa linkom na Mlab bazu podataka.
Slika 11. database.js fajl
15
2.1 Modeli
MongoDB rukuje jednostavnim JSON dokumentima. Poslovna logika je smeštena u
aplikativni sloj. Mongoose ODM nam omogućuje jednostavnu konverziju između
dokumenata i JavaScript objekata
Mongoose nam služi za struktuiranje podataka. Ne može se skladištiti ništa što ne odgovara
šemi. Šema sluzi kao deklaracija kako treba da izgledaju podaci.
Modeli su prave klase kreirane u JavaScript-i.
U aplikaciji postoje četiri modela i to:
1. user.js - model koji reprezentuje korisnika
2. post.js - model koji reprezentuje objavu na forumu
3. comment.js - model koji reprezentuje komentar o knjizi
4. book.js - model koji reprezentuje knjigu
Slika 12. model (šema) knjige
16
Slika 13. model (šema) komentara o knjizi
Slika 14. model (šema) objave na forumu
17
Slika 15. Model (šema) registrovanog korisnika sajta
2.2 Rute
Rutiranje se odnosi na to kako aplikacija odgovra na klijentske zahteve u zavisnotsti od
endpoint-a, HTTP zahteva (GET, POST,…), URI-a…
Vrši se parsiranje tela zahteva i preuzimanje parametara (parsiranje se vrši ukoliko je
content-type application/JSON ili application/x-www-form-urlencoded).
Upiti ka bazi su zahtevni prema resursima. Zato se koriste kroz Callback-ove. Šalje se
zahtev, obrađuju se drugi poslovi, i kada se dobije povratna vrednost upita, izvrsava se
callback funkcija. Upiti su uvek u formatu: function(error, result) {...}.
Express framework omogucuje integrisanje middleware-a za odgovor na HTTP zahteve,
definisanje ruting tabele radi implementacije raznih akcija u zavisnosti od URL-a i HTTP
metoda kao i dinamičko renderovanje HTML strana bazirano na prosleđivanju argumenata
templejtu.
Express aplikacije koriste callback funkcije čiji su parametri request i response objekti.
18
Request objekat predstavlja HTTP zahtev i poseduje propertije za query string, pararametre,
body, HTTP hedere… Response objekat predstavlja HTTP odgovor koji Express aplikacija
šalje kao odgovor na zahtev.
Pri tome body-parse middleware nam služi za rukovanje JSON, Text, URL enkodovanim i
sirovim podacima.
2.2.1 Autentifikacija
Svi zahtevi sa klijenta stižu preko tokena. Korisiti se JWT - JSON web tokens
Svi zahtevi su autentifikovani. Prilikom logovanja token se šalje korisniku sa servera, pri
čemu se čuva u LocalStorage na klijentu. U token-u se čuvaju enkriptovane informacije o
korisniku. Vreme trajanja tokena je proizvoljno, u aplikaciji je 10800s.
Za svaki zahtev prema bazi, korisnik se verifikuje preko tokena. Ako je token verifikovan, iz
njega se izvlače informacije o korisniku I akcije ka bazi vezane su samo za korisnikove
podatke.
U aplikaciji postoje četiri rute i to:
1. user.js - ruta za sve zahteve vezane za korisnike (registracija, logovanje, promena
profilne slike)
2. post.js - ruta za sve zahteve za objave (dodavanje novih objava, njihovo brisanje i
ažuriranje od strane administratora)
3. comment.js - ruta koja reprezentuje sve zahteve vezane za komentare komentar o
knjigama (dodavanje novog komentara)
4. book.js - ruta koja reprezentuje sve zahteve vezane za knjige (dodavanje knjige,
brisanje, ažuriranje, pregled knjige, kao i brisanje i ažuriranje od strane
administratora koji može da briše i ažurira sve knjige).
19
Slika 16. GET zahtev za sve komentare za određenu knjigu
20
Slika 17. POST zahtev za dodavanje novog komentara o knjizi ili korisniku
21
Slika 18. Osnovna ruta home stranice, prikazuju se sve knjige svih korisnika
22
Slika 19. GET zahtevi za sve korisnike i za pojedinačnog korisnika, kao i
POST zahtev za registraciju
23
Slika 20. POST zahtev za logovanje
24
Slika 21. PATCH zahtev za ažuriranjem profile slike, prilikom registracije korisniku se šalje
mejl dobrodošlice koristeći nodemailer module
25
Slika 22. GET zahtev za sve objave i za pojedinačnu objavu
26
Slika 23. GET zahtevi za knjige koje pripadaju određenom korisniku za i pojedinačnu knjigu
27
Slika 24. POST zahtev za dodavanje nove knjige
28
Slika 25. PATCH zahtev za izmenju knjige i DELETE zahtev za brisanje knjige
29
3. Frontend
Angular 2 je JavaScript Framework za ‘’Single Page’ veb aplikacije.
Koriste se asinhroni zahtevi, šalje se manji broj zahteva ka serveru, što kao za posledicu ima
brži odziv UX.
Kod se piše u TypeScript-u - nadskup JavaScript-a kompajliran u cist JavaScript.
Slika 26. index.hbs html stranica
index.hbs stranica je kreirana putem Jade template-a i omogućava renderovanje templejta.
30
Slika 27. style.css fajl
31
style.css fajl predstavlja glavni stysheet aplikacije, primenjuje se na sve komponente
Slika 28. app.routing.ts fajl
U app.routing.ts fajlu je kreiran Angular ruter i definisane su sve moguće putanje (rute) sa
odgovarajućim komponentama koje je potrebno učitati.
32
Slika 29. app.component.ts fajl
app.component.ts fajl predstavlja glavni typescript fajl. U njemu definisemo servise
BookService, PostService i CommentService kako bi bili dostupni svim ostalim
komponentama.
33
Slika 30. app.module.ts fajl
34
U app.module.ts fajlu definisemo sve komponente aplikacije, module i service AuthService i
ErrorService koji će na taj način biti dostupni na nivou cele aplikacije. Definise se root
komponenta unutar AppModule unutar boostrap niza. Ne ucitavaju se sve komponente
prilikom pokretanja Angular 2 aplikacije kako se ne bi narušile performanse.
Slika 31. app.component.html fajl
Ovaj fajl će prikazivati renderovane komponente u zavisnosti od rute. Takođe definiše
osnovni raspored komponenti.
35
3.1 Modeli
U aplikaciji postoje 5 modela i to:
1. book.model.ts - model koji reprezentuje knjigu
2. user.model.ts - model koji reprezentuje korisnika
3. post.model.ts - model koji reprezentuje objavu
4. comment.model.ts - model koji reprezentuje komentar
5. error.model.ts - model koji reprezentuje grešku
Slika 32. model knjige
36
Slika 33. model komentara
Slika 34. model greške
37
Slika 35. model objave
Slika 36. model korisnika
38
3.2 Servisi
Servisi služe za centralizaciju funkcionalnosti. Smanjuje se dupliciranje koda kroz
centralizaciju, prosleđuju se samo instance servisa specijalizovanog za određenu logiku
unutar aplikacije. Servisi se često koriste za rukovanje podacima - centralizujemo logiku za
rukovanje podacima kroz servis.
3.2.1 HTTP Zahtevi
Ne renderuje se serverski nova stranica, podaci se šalju koriz XMLHttpRequest objekat-
AJAX zahtevi. Koriste se Observables i Observable patern. Observable služi za asinhrone
zahteve, osluškuje različite izvore. Javlja Observer-u kada dođe do promene od interesa.
Angular koristi observables u pozadini za zahteve - http.post kreira observable.
subscribe na http observable - rukujemo podacima poslanim od Observable-a što je slično
kao callbacks ili promises.
Observable HTTP zahtevi - RxJS Svi zahtevi ka backend-u, šalju token kao query
parametar.
U aplikaciji postoje pet servisa i to:
1. auth.service.ts - servis za rukovanje autentifikacijom korisnika
2. post.service.ts - servis za rukovanje objavama
3. comment.service.ts - servis za rukovanje komentarima
4. book.service.ts - servis za rukovanje knjigama
5. error.service.ts - zaseban servis i komponenta za rukovanje greskama na nivou
aplikacije
Svaki servis poseduje odgovarajuće operacije koje su već navedene prilikom definisanja ruta
za korisnika, knjigu, objavu i komentar.
39
Slika 37. servis korisnika
Metoda logout() vrši odjavljivanje korisnika brisanje njegovih informacija(tokena i id) iz
localstorage-a.
Metoda isLoggedIn() vrši proveru da li je korisnik trenutno ulogovan proveravajući da li je
token različit od null.
40
Metoda register() vrši registrovanje korisnika, metoda login prijavljivanje, dok metoda
getUser vraća specifičnog korisnika.
Slika 38. servis korisnika
Metoda getUsers() služi za prikaz svih korisnika administratoru.
Metoda changeProflePicture() služi za promenu profilne slike.
41
Slika 39. servis knjiga
Metoda addBook() služi za dodavanje nove knjige.
42
Slika 40. servis knjiga
Metoda getBooks() služi za prikaz svih korisnikovih knjiga.
43
Slika 41. servis knjiga
Metoda getBooksHome() služi za prikaz svih knjiga svih korinika na početno strani.
44
Slika 42. servis knjiga
Metoda getBook() služi za prikaz određene knjige.
Metoda updateBook() služi za ažuriranje knjige od strane korisnika. Korisnik može da ažurira
samo svoje knjige ukoliko je registrovan.
Metoda updateBookAdmin() služi za ažuriranje knjige od strane admina. Admin može da
ažurira sve knjige.
45
Slika 43. servis knjiga
Metoda updateSold() služi za ažuriranje knjige prilikom njene kupovine od strane nekog
korisnika.
Metoda deleteBook() služi za brisanje knjige od strane nekog korisnika. Svaki korisnik može
da briše jedino svoje knjige (knjige koje je on postavio).
Metoda deleteBookAdmin() služi za brisanje knjige od strane administratora. Administrator
može da briše knjige svih korisnika.
46
44. servis komentara
Metoda addComment() služi za dodavanje komentara na neku knjigu, o knjizi ili korisniku
koji ju je postavio. Samo registrovani korisnici mogu komentarisati.
47
Slika 45. servis komentara
Metoda getComments() služi za prikaz svih komentara neke knjige.
48
Slika 46. servis za rukovanje greškama
49
dodavanje novog Slika 47. Slika 47. servis Slika
Slika 47. servis objava
Metoda addPost() služi za objavljivanje novih postova na blogu. Samo registrovani korisnici
mogu objavljivati na blogu.
50
Slika 48. servis objava
Metoda getPosts() služi za prika svih objava na forumu.
Metoda getPost() služi za prikaz jedne određene objave.
Metoda deletePost() služi za brisanje postova. Samo administrator može brisati postove (i to
sve).
51
Slika 49. servis objava
Metoda updatePost() služi za izmenu objava na forumu. Samo administrator sistema može
vršiti izmenu objava(i to svih) ukoliko uoči neki neprikladan sadržaj.
52
3.3 Komponente
Aplikacija se sastoji od ukupno 23 komponente i te komponente su sledeće:
●
about - služi za prikaz stranice sa nekim osnovnim informacijama o sajtu
●
add-book - reprezentuje formu za dodavanje nove knjige
●
add-comment - reprezentuje formu za dodavanje novog komentara
●
blog - služi za prikaz stranice za blog
●
book - gradivna komponenta koja reprezentuje knjigu
●
book-details - služi za prikaz stranice sa detaljima o odabranom knjizi
●
change-profile-picture - služi za prikaz stranice koja omogućuje promenu profilne
slike
●
comment - gradivna komponenta koja reprezentuje komentar
●
error - komponenta koja je namenjena za obradu grešaka
●
header - služi za prikaz zaglavlja stranice
●
home - služi za prikaz naslovne strana sajta
●
login - reprezentuje formu za logovanje
●
logout - služi za odjavljivanje sa sajta
●
page-not-found - komponenta koja se prikazuje u slučaju pogrešno URL-a
●
post - gradivna komponenta koja reprezentuje objavu
●
post-details - služi za prikaz pojedinačne objave
●
profile - služi za prikaz profilne stanice registrovanog korisnika
●
publish - služi za objavljivanje novih postova
●
register - reprezentuje formu za registraciju
●
showinfo - služi za prikaz informacija o kupcu
●
update-book - reprezentuje formu za ažuriranje knjige
●
update-post - reprezentuje formu za ažuriranje posta
●
users - služi za prikaz svih registrovanih korisnika (ova mogućnost je dostupna samo
adminu)
U nastavku je dat prikaz svih navedenih komponenti koje se sastoje iz tri dela - htm, css i ts
fajl.
53
Slika 50. about.component.hmtl
54
Slika 51. about.component.ts
Slika 52. add-book.component.html
55
Slika 53. add-book.component.ts
56
Slika 54. add-comment.component.html
57
Slika 55. add-comment.component.ts
58
Slika 56.blog.component.html
59
Slika 58. blog.component.ts
Slika 59. book.component.html
60
Slika 60. book.component.ts
61
Slika 61. book-details.component.html
62
Slika 62. book-details.component.ts
Slika 63. change-profile-picture.component.html
64
Slika 64.change-profile-picture.component.ts
Slika 65. comment.component.html
65
Slika 66. comment.component.ts
Slika 67. error.component.html
66
Slika 68. error.component.ts
67
Slika 69. header.component.html
68
Slika 70. header.component.ts
69
Slika 71. home.component.html
70
Slika 72. home.component.ts
Slika 73. login.component.html
71
Slika 74. login.component.ts
Slika 75. logout.component.html
72
Slika 76. logout.component.ts
Slika.77. page-not-found.component.html
Slika 78. page-not-found.component.ts
73
Slika 79. post.component.html
Slika 80. post.component.ts
74
Slika 81. post-details.component.html
75
Slika 82. post-details.component.ts
76
Slika 83. profil.component.html
77
Slika 84. profil.component.ts
78
Slika 85. publish.component.html
Slika 86. publish.component.ts
79
Slika 87. register.component.html
80
Slika 88. register.component.ts
81
Slika 89. show-info.component.html
Slika 90. show-info.component.ts
82
Slika 91. update-book.component.html
83
Slika 92. update-book.component.ts
Slika 93. update-post.component.html
84
Slika 94. update-post.component.ts
Slika 95. users.component.html
85
Slika 96. users.component.ts
86
4. Ostalo
4.1 Linkovi
Tehnologije:
87
4.2 Sajt
Slika 97. Naslovna strana sajta iz aspekta neregistrovanog korisnika
88
Slika 98. Neregistrovan korisnik može samo da pregleda dostupne knjige bez ostalih
89
Slika 99. Login strana vidljiva samo ako korisnik nije već ulogovan
90
Slika 100. Blog, neregistrovan korisnik može samo da pregleda objave
Slika 101. About stranica sa kratkim opisom sajta
91
Slika 101. Register stranica vidljiva samo korisnicima koji nisu registrovani
(ulogovani)
Slika 102. Administator se identifikuje preko email-a koji je jedinstven
92
Slika 103. Detalji knjige sa aspekta administatora koji može da kupuje, briše, menja i
komentriše sve knjige
93
Slika 104. Objava na blogu sa aspekta administratora koji može da menja i briše sve objave
Slika 105. Objavljivanje novog posta, ovu mogućnost imaju samo registrovani korisnici
94
Slika 106. Administrator ima mogućnost pregleda svih registrovanih korisnika
95
Slika 107. Profilna strana
96
Slika 108. Ažuriranje knjige
97
Slika 109. Pregled korisnikove knjige
98
Slika 110. Pregled knjige od strane drugog korisnika
99
Slika 111. Dodavanje novog komentara
100
Slika 112. Dodani komentar
101
Slika 113. Pregled objave sa apseta korisnika koji nije administrator
Slika 114. Dodavanje nove knjige
102
Slika 115. Korisnik može da vidi podatke neophodne za obavljanje kupovine
...onog korisnika koji ju je izvršio.
103
