SVEUČILIŠTE U ZAGREBU

FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA

ZAVRŠNI RAD br. 6200

DRUŠTVENA MREŽA ZA LJUBITELJE

AUTOMOBILA

Kristijan Čačković

Zagreb, lipnja 2019.

Sadržaj Uvod ................................................................................................................... 1

1. Moderni web .............................................................................................. 2

1.1. Aplikacije s jednom stranicom............................................................. 3

1.1.1. Prednosti i nedostaci SPA ............................................................ 3

1.2. Progresivne web-aplikacije ................................................................. 4

1.3. Angular 2+ .......................................................................................... 5

1.3.1. Angular Material ........................................................................... 6

1.4. NoSQL ................................................................................................ 7

1.5. Firebase .............................................................................................. 8

2. Opis funkcionalnosti aplikacije ................................................................ 10

3. Implementacijski detalji ........................................................................... 16

3.1. Auth service ...................................................................................... 16

3.2. Uploader ........................................................................................... 17

3.3. Angular Router.................................................................................. 19

3.4. App module ...................................................................................... 19

3.5. Infinite Scroll ..................................................................................... 20

3.6. Main component HTML .................................................................... 22

3.7. Promjena veličine slika ..................................................................... 23

4. Korištene tehnologije i alati ..................................................................... 25

4.1. Figma ................................................................................................ 25

4.2. Git ..................................................................................................... 25

4.3. GitLab ............................................................................................... 26

4.4. Visual Studio Code ........................................................................... 26

4.5. Chrome DevTools ............................................................................. 26

5. Zaključak ................................................................................................. 27

6. Literatura ................................................................................................. 28

Sažetak ............................................................................................................ 32

Ključne riječi: ................................................................................................ 32

Summary .......................................................................................................... 33

Keywords: ..................................................................................................... 33

Uvod

1

Uvod

U ovom završnom radu opisana je funkcionalnost, implementacija i korištenje

web-aplikacije namijenjene za druženje, razmjenu iskustava te rješavanje problema

ljubitelja automobila. Razlog za odabir web-aplikacije kao tehnologije izrade

društvene mreže leži upravo u činjenici da je web-aplikacijama moguće pristupiti sa

svih platformi, i mobilnih i desktop. Samim time se razvoj jedne ovakve platforme

znatno pojeftinjuje jer nije potrebno razviti tri do četiri aplikacije (Android, iOS,

Windows) već samo jednu. Moderne web-aplikacije temeljene na modernim

bibliotekama pružaju korisničko iskustvo koje se može usporediti sa klasičnom

mobilnom ili desktop aplikacijom. Stoga razliku između moderne web-aplikacije i

klasične mobilne ili desktop aplikacije mogu primijetiti samo iskusni korisnici ili

programeri. Osnovna ideja za izradu ovakve društvene mreže proizašla je iz

činjenice da trenutno ne postoji društvena mreža vezana samo za automobilizam i

automobile. Osnovne funkcionalnosti ove web-aplikacije su prezentacija vlastitih

projekata, dodavanje slika i sadržaja, dijeljenje poveznica, postavljanje pitanja i

sudjelovanje u raspravama te razni sustavi natjecanja i ocjenjivanja. Kako bi

korisniku aplikacija bila uvijek nadohvat ruke nuditi će se i mogućnost dodavanja

aplikacije na početni zaslon. Također aplikacija će raditi i u uvjetima malih brzina

mreže pa čak i u uvjetima bez pristupa mreži. U današnje vrijeme postoje mnoge

društvene mreže kao što su Facebook, Instagram, Twitter, ali i mnoge druge. Stoga

je glavni izazov ove web-aplikacije pružiti što više jedinstvenih mogućnosti, usluga

i funkcionalnosti, a sve to kroz što ljepše i intuitivnije sučelje.

Moderni web

2

1. Moderni web

U razvoju modernih web-stranica postoje tri glavne arhitekture izrade, a to su:

dinamičke web-stranice (dynamic web pages), statičke web-stranice (static web

pages) te aplikacije s jednom stranicom (Single Page Applications, SPA).

Kod dinamičkih stranica HTML (Hypertext Markup Language) se generira dinamički

na poslužitelju. Prilikom zahtjeva od strane klijenta poslužitelj dinamički generira

HTML uz pomoć nekog poslužiteljskog programskog okvira i vraća gotovu HTML

stranicu u odgovoru.

Ukoliko se radi o statičkim web-stranicama HTML kod je unaprijed generiran i

pohranjen na poslužitelju. Te se stranice mogu pisati ručno, ali obično se generiraju

automatski uz pomoć generatora statičkih stranica.

Kod web-aplikacija s jednom stranicom poslužitelj ne vraća gotove HTML stranice

već samo podatke, tipično u JSON (JavaScript Object Notation) formatu, koji se uz

pomoć JavaScripta dinamički prikazuju u pregledniku.

Koji je najbolji pristup?

Nema najboljeg ili najgoreg pristupa! Svaki pristup ima svoje područje primjene.

Statičke web-stranice nisu dobar izbor za web-stranice sa sadržajem koji se često

mijenja i koji zahtijeva korisničku interakciju. Čak iako je proces visoko

automatiziran, stranica će se morati ponovno generirati i ponovno postaviti.

Dinamičke web-stranice ili aplikacije s jednom stranicom su u ovom slučaju puno

bolji izbor.

Aplikacije sa jednom stranicom su često odličan odabir, pogotovo za web-aplikacije

koje ne zahtijevaju SEO (Search Engine Optimization) optimizaciju. Također postoji

mogućnost da se uz SPA aplikaciju napravi i početna stranica aplikacije koja je

generirana statički radi bolje SEO optimizacije.

Dinamičke web-stranice s druge strane su savršen odabir ako se sadržaj web-

stranica učestalo mijenja te SEO optimizacija igra veliku ulogu. Primjer takvih web-

stranica su internetske trgovine.

Moderni web

3

1.1. Aplikacije s jednom stranicom

Aplikacija s jednom stranicom je web-aplikacija ili web-stranica koja komunicira s

korisnikom dinamičkom izmjenom podataka na stranici. Ovim se pristupom

izbjegava prekid korisničkog iskustva prouzročen izmjenom stranica, a aplikacija se

ponaša poput desktop aplikacije. [1]

Popularizacijom modernih JavaScript biblioteka kao što je React1 i radnih okvira kao

što su Angular2 i Vue3, aplikacije se obično grade kao aplikacije s jednom stranicom.

Aplikacijski kod, HTML, CSS (Cascading Style Sheets) i JavaScript, učitava se

jednom, prilikom otvaranja aplikacije u pregledniku, a prilikom daljnje komunikacije

aplikacije i poslužitelja, uobičajeno je da umjesto novog zahtjeva prema poslužitelju

koji zatim vraća novi HTML dokument, klijent zahtijeva neki JSON dokument ili

izvršava radnju na poslužitelju, ali stranica koju korisnik vidi nikada nije potpuno

obrisana. Neki značajniji primjeri aplikacije s jednom stranicom su: Gmail4, Google

karte5, Google disk6, Facebook7, Twitter8.

1.1.1. Prednosti i nedostaci SPA

Prva prednost je bolje korisničko iskustvo. Umjesto čekanja na komunikaciju klijent-

poslužitelj i čekanja da preglednik ponovo prikaže stranicu, korisnik sada može imati

trenutnu povratnu informaciju. Osim toga, poslužitelj će trošiti manje resursa te je

mnogo lakše izgraditi pripadajuću mobilnu aplikaciju jer nema potrebe za dodatnim

preinakama na poslužiteljskoj strani. Aplikacije se lako pretvaraju u progresivne

web-aplikacije, čime se omogućuje spremanje u lokalnu memoriju te podrška za

izvanmrežni rad aplikacije.

1 Poveznica na službenu stranicu biblioteke React: https://reactjs.org/

2 Poveznica na službenu stranicu radnog okvira Angular: https://angular.io/

3 Poveznica na službenu stranicu radnog okvira Vue: https://vuejs.org/

4 Poveznica na aplikaciju Gmail: https://mail.google.com

5 Poveznica na aplikaciju Google karte: https://www.google.hr/maps

6 Poveznica na aplikaciju Google disk: https://drive.google.com/drive

7 Poveznica na društvenu mrežu Facebook: https://www.facebook.com/

8 Poveznica na društvenu mrežu Twitter: https://twitter.com

Moderni web

4

SPA aplikacije izvrsne su za rad u timovima. Backend programeri mogu se

usredotočiti na stvaranje što kvalitetnijeg poslužiteljskog dijela aplikacije dok se

frontend programeri mogu usredotočiti na stvaranje što boljeg korisničkog iskustva.

Glavna mana aplikacija s jednom stranicom je otežana SEO optimizacija. Iako

tražilice svakodnevno napreduju u tom pogledu, još uvijek je puno lakše napraviti

kvalitetnu optimizaciju za klasične web-aplikacije nego za web-aplikacije s jednom

stranicom.

1.2. Progresivne web-aplikacije

Progresivne web-aplikacije (Progressive Web App, PWA) moderne su offline web-

aplikacije, prvenstveno namijenjene za mobilne uređaje, čije korisničko iskustvo se

može usporediti s ponajboljim klasičnim mobilnim aplikacijama. [2] Zamišljene su

kao novi standard za mobilni web. Razvoj kvalitetnih PWA aplikacija donosi brojne

prednosti, uključujući lakše privlačenje korisnika te povećani angažman korisnika.

Progresivne web-aplikacije stvaraju korisnički doživljaj čije je iskustvo usporedivo s

webom, a odlikuju ih:

• Pouzdanost jer se trenutno učitavaju i nikad ne prikazuju simbol prekida

veze, čak ni u uvjetima nestabilne veze.

• Brzina jer brzo reagiraju na interakcije korisnika, prikazuju uglađene

animacije i kvaliteta prikaza pri pomicanju uvijek je dobra.

• Privlačnost zbog toga što pružaju dojam mobilne aplikacije s potpunim

korisničkim doživljajem.

Pri pokretanju s korisnikova početnog zaslona uslužne skripte omogućuju trenutno

pokretanje PWA aplikacije, bez obzira na mrežnu povezanost. Uslužna skripta

djeluje kao proxy na strani klijenta, napisana je u JavaScriptu i omogućuje kontrolu

nad pohranom resursa u lokalnu memoriju te načinom odaziva na zahtjeve za

resursima. Spremanjem ključnih resursa u lokalnu memoriju ostvaruje se eliminacija

ovisnosti o mreži i time je zajamčen trenutni odaziv aplikacije i pouzdan doživljaj za

korisnike. [3]

Moderni web

5

Progresivne web-aplikacije mogu se instalirati i smjestiti na korisnikovu početnom

zaslonu, bez potrebe za trgovinom aplikacija. Zahvaljujući manifestu web-aplikacije

pružaju potpuni doživljaj upotrebe na cijelom zaslonu, a uz pomoć web push

obavijesti mogu čak i ponovo privući korisnike. Manifest web-aplikacije omogućuje

kontrolu nad izgledom aplikacije i njezinim pokretanjem. Moguće je odrediti ikone

za početni i pozdravni zaslon koji se prikazuje tijekom učitavanja aplikacije, stranicu

koja će se učitati kad se aplikacija pokrene, orijentaciju zaslona, pa čak i hoće li se

aplikacija prikazivati na pregledniku Google Chrome ili ne.

1.3. Angular 2+

Angular je radni okvir i platforma za izradu klijentskih aplikacija pomoću HTML-a i

TypeScripta. Angular je napisan u TypeScriptu. Osnovni građevni blokovi Angular

aplikacije su NgModuli, koji pružaju kontekst za prevođenje komponenti. NgModuli

objedinjuju srodni kod u funkcionalne skupove. Angular aplikacija definirana je

skupom NgModula. Aplikacija uvijek ima barem jedan korijenski modul koji

omogućuje podizanje sustava no on obično ima mnogo više funkcionalnosti.

Angular aplikacija sastoji se od komponenti koje definiraju poglede, koji su skupovi

elemenata zaslona. Ti se elementi mogu mijenjati prema logici programa i

podacima. Komponente koriste servise koji pružaju specifične funkcionalnosti koje

nisu izravno povezane s pogledima. Način na koji se servisi povezuju sa

komponentama čine programski kod modularnim, učinkovitim i ponovo

upotrebljivim. [4]

Komponente i servisi su klase, s dekoratorima (engl. decorators ), koji označavaju

njihov tip i daju metapodatke o načinu njihova korištenja. Metapodaci povezuju klase

komponente s predloškom koji definira pogled. Predložak (engl. template) je

kombinacija HTML-a i Angularovih direktiva s karakterističnim oznakama koje

omogućuju izmjenu i nadopunu HTML-a prije prikazivanja. Direktive predložaka

pružaju programsku logiku i metapodatke pomoću kojih se povezuju podaci

aplikacije i DOM (Document Object Model). Postoje dvije vrste povezivanja

podataka, a to su: povezivanje na događaje (engl. Event binding), pomoću kojeg

aplikacija prima korisničke interakcije i povezivanje vrijednosti vraćenih iz servisa u

poglede (engl. Property binding ).

Moderni web

6

Grafički prikaz navedenih svojstava nalazi se na Slici 1. Podaci ili programska logika

koja nije direktno povezana ni sa jednim pogledom i koja se dijeli između više

pogleda implementira se pomoću servisa. U servisima se navodi dekorator

@Injectable() te se oni uključuju u pojedine klase (engl. Dependency injection,

DI) Aplikacije se obično sastoje od mnogo prikaza raspoređenih hijerarhijski.

Angular ima ugrađeni servis Router koji služi za određivanje navigacijskih puteva

među prikazima.

Slika 1 Struktura Angular aplikacije [5]

TypeScript je programski jezik otvorenog koda koji je razvio i održava Microsoft.

TypeScript je čisto sintaktički nadskup JavaScripta koji dodaje dodatnu statičku

tipizaciju jeziku. TypeScript je dizajniran za razvoj velikih aplikacija i prevodi se u

JavaScript. Kako je TypeScript nadskup JavaScripta, postojeći JavaScript programi

također su valjani TypeScript programi. [6] TypeScript se može koristiti za razvoj i

izvođenje JavaScript aplikacija na strani klijenta, ali i na strani poslužitelja.

1.3.1. Angular Material

Angular Material je biblioteka komponenti korisničkog sučelja. Komponente

korisničkog sučelja Angular Materiala pomažu u izradi atraktivnih, konzistentnih i

funkcionalnih web-stranica i web-aplikacija, a pritom se pridržavaju načela

modernog web dizajna kao što su kompatibilnost između preglednika i neovisnost

o veličini uređaja. [7]

Moderni web

7

Nekoliko značajki biblioteke Angular Material:

• Prilagodljiv i responzivan dizajn,

• Uključuje nove verzije uobičajenih kontrola korisničkog sučelja kao što su

gumbi i tekstualna polja za unos koja su prilagođena da slijede Angularove

koncepte dizajna.

• Uključuje poboljšane i specijalizirane značajke poput kartica, alatne trake,

brzog biranja, bočne navigacije, povlačenja s dna ili vrha ekrana.

• Komponente biblioteke Angular Material kompatibilne su među

preglednicima te se mogu koristiti za izradu web komponenti za višekratnu

upotrebu.

1.4. NoSQL

Relacijske baze podataka nastale su 1970-ih godina kako bi aplikacije mogle

pohranjivati podatke putem standardnog načina modeliranja podataka i jezika upita

SQL (Structured Query Language). U to je vrijeme pohrana bila skupa, a sheme

podataka bile prilično jednostavne i jasne. Od uspona weba, količina podataka

pohranjenih o korisnicima, objektima, proizvodima i događajima je eksplodirala. Do

podataka se također pristupa češće i intenzivnije se obrađuju. Na primjer, društvene

mreže samo za prikaza aktivnosti korisnika u stvarnom vremenu na temelju

aktivnosti njihovih veza stvaraju velike količine podataka. [8]

Čak i za prikazivanje jedne web-stranice ili odgovaranje na jedan API (Application

Programming Interface) zahtjev može trebati nekoliko desetaka ili stotina zahtjeva

za bazu podataka jer aplikacije obrađuju sve složenije korisničke zahtjeve.

Iako su relacijske baze podataka i dalje najpopularnija vrsta baza podataka,

posljednjih se godina na tržištu pojavilo nekoliko "alternativnih”, takozvanih NoSQL

(Not Only Structured Query Language) baza podataka. To su općenito baze

podataka koje nisu zasnovane na relacijskom modelu podataka, pa stoga upitni

jezik SQL, koji je standardni upitni jezik za relacijske baze podataka, uglavnom nije

zastupljen u takvim sustavima.

Moderni web

8

NoSQL sustavi nastali su iz novih zahtjeva za većom fleksibilnošću i boljim

performansama u pohrani i obradi velikih količina podataka, uglavnom zbog

popularnosti Interneta i Internetskih tehnologija i sve veće količine podataka.

Postoje četiri osnovne vrste NoSQL sustava za rad s bazama podataka: ključ-

vrijednost, graf, dokument i stupčani sustavi.

1.5. Firebase

Firebase je Googleova platforma koja sadrži mnoge mogućnosti koje programerima

olakšavaju razvoj mobilnih ili web-aplikacija. [9] Platforma Firebase je na svome

početku bila baza podataka u stvarnom vremenu, kasnije ju je kupio Google i

proširio te pretvorio u sveobuhvatnu platformu. Platforma Firebase sastoji se od

mnogo servisa čija je uporaba besplatna, a neki od njih su: Cloud Firestore, ML Kit,

Cloud Functions, Authentication, Hosting, Cloud Storage, Realtime Database.

• Cloud Firestore služi za pohranu i sinkronizaciju podataka između

korisnika i uređaja na globalnoj razini koristeći NoSQL bazu podataka. Cloud

Firestore pruža trenutnu sinkronizaciju podataka i izvanmrežnu podršku uz

učinkovite upite prema bazi. Odlična integracija s drugim Firebase

proizvodima omogućuje ubrzanu izgradnju aplikacija bez poslužitelja. [10]

• ML Kit je servis pomoću kojega je moguće integrirati značajke strojnog

učenja u mobilnu aplikaciju. ML Kit API mogu se pokretati na uređaju ili u

oblaku, ovisno o funkcionalnosti.

• Cloud Functions je usluga koja omogućuje proširenje mobilnih ili web-

aplikacija pomoću koje je moguće izvoditi pozadinske zadatke bez potrebe

za upravljanjem te skaliranjem vlastitih servera. Funkcije mogu biti aktivirane

događajima koje emitiraju Firebase usluge, Google Cloud usluge ili pomoću

korisnički definiranih okidača.

Moderni web

9

• Authentication je usluga za upravljanje korisnicima na jednostavan i

siguran način. Firebase Auth nudi višestruke metode za provjeru

autentičnosti, uključujući e-poštu i zaporku, te autentifikaciju pomoću Google

ili Facebook računa. Dio usluge je i potpuno prilagodljivo korisničko sučelje

koje može biti zamijenjeno i vlastitom implementacijom. [11]

• Firebase Hosting je usluga držanja datoteka web-aplikacije uz vrlo dobre

performanse i malo kašnjenje. Uz Firebase Hosting dolazi i besplatni SSL

(Secure Sockets Layer) certifikat.

• Cloud Storage je usluga koja nudi mogućnost pohrane korisnički

generiranih sadržaja kao što su slike, audio zapisi i videozapisi uz moćnu,

jednostavnu i ekonomičnu uslugu pohrane. Firebase SDK (Software

Development Kit) za pohranu u oblaku nudi sigurnost prijenosa i preuzimanja

datoteka za Firebase aplikacije, bez obzira na kvalitetu mreže. [12]

Funkcionalni zahtjevi

10

2. Opis funkcionalnosti aplikacije

Web-aplikacija Horsepower Projects prvenstveno je zamišljena kao mjesto

druženja i razmjene iskustava između korisnika aplikacije, ljubitelja automobila.

Ulaskom u aplikaciju otvara se glavni zaslon aplikacije na kojemu su smještene

kartice sa opisima i naslovnim slikama projekata kao što je prikazano Slikom 2.

Projekt može biti vozilo bilo koje vrste. Projekte i sadržaj projekata stvaraju korisnici.

Mogućnost stvaranja novog projekta imaju samo registrirani korisnici.

Slika 2 Početna stranica

Korisnik aplikacije ima nekoliko mogućnosti prilikom dolaska u aplikaciju, a to su:

pregledavanje projekata, pregledavanje objava drugih korisnika, pregled informacija

o nadolazećim događajima te prijava ili registracija u aplikaciju. Da bi se korisniku

omogućio potpuni doživljaj aplikacije potrebna je prijava u sustav.

Prijava u sustav vrši se pomoću Google računa. Izgled dijaloga za prijavu prikazan

je Slikom 3. Razlog za odabir Google računa je taj da se korisniku olakša i ubrza

prijava u aplikaciju i smanji broj korisničkih računa i zaporki koje mora pamtiti.

Funkcionalni zahtjevi

11

Slika 3 Prijava u aplikaciju

Nakon prijave u sustav korisniku se otvaraju dodatne mogućnosti, a to su:

dodavanje novog projekta, dodavanje nove objave, ocjenjivanje drugih projekata i

objava, komentiranje drugih projekata i objava, pregled vlastitih projekata i objava,

pregled vlastitih korisničkih podataka i računa te interakcija s drugim korisnicima

aplikacije.

Navigacija aplikacijom vrši se na više načina: pomoću bočne navigacije i pomoću

navigacije na vrhu ekrana. Time je olakšana navigacija na uređajima svih veličina

zaslona. Prikaz otvorene bočne trake unutar aplikacije nalazi se na Slici 4.

Slika 4 Navigacija aplikacijom

Funkcionalni zahtjevi

12

Prilikom odabira gumba u gornjem lijevom uglu zaslona otvara se bočna navigacija

u kojoj su ponuđene poveznice na projekte, objave, na korisnički profil te na

informacije o samoj aplikaciji. Mogućnost prijave nalazi se na dva mjesta, u glavnoj

navigacijskoj traci te u bočnoj navigacijskoj traci.

Slika 5 Dijagram obrazaca uporabe

Prilikom dolaska na početni zaslon aplikacije korisniku se nude mogućnosti

pregledavanja projekata drugih korisnika. Također, na vrhu zaslona ispod

navigacijske trake nalaze se polje za pretraživanje projekata te padajući izbornik koji

nudi mogućnost sortiranja projekata prema vremenu nastanka te prema prosječnoj

ocjeni. Klikom na poveznicu u obliku lebdećeg gumba u donjem desnom kutu

zaslona otvara se novi zaslon koji nudi mogućnost unosa novog projekta. Prikaz

korisničkih mogućnosti opisan je dijagramom obrazaca uporabe na Slici 5.

Za unos novoga projekta potrebno je ispuniti obavezna polja, a to su: marka vozila,

model vozila i opis projekta. Također moguće je ispuniti i neobavezna polja: snaga,

boja vozila, obujam motora, godina proizvodnje, veličina naplataka, kratki opis

projekta te tagovi za pretraživanje. Izgled zaslona za unos novog projekta prikazan

je Slikom 6.

Funkcionalni zahtjevi

13

Slika 6 Forma za unos novog projekta

Korisniku se nudi i mogućnost učitavanja slika koje će se prikazivati u sklopu

novonastalog projekta. Slike se mogu učitavati odabirom iz lokalnog direktorija

računala ili jednostavnim povlačenjem datoteke u pravokutnik u aplikaciji. Primjer

prijenosa slika prikazan je Slikom 7. Prilikom prijenosa slika grafički je prikazano

koliki je postotak podataka prenesen te je ponuđena mogućnost prekida prijenosa.

Ako je slika uspješno učitana prikazati će se korisniku ispod forme za unos. Nakon

što korisnik unese sve podatke može potvrditi unos klikom na poveznicu potvrdi ili

može odustati od iste klikom na gumb odustani.

Slika 7 Prijenos fotografija

Prilikom pregledavanja projekata ukoliko se korisniku dopadne projekt on može

označiti gumb „sviđa mi se“ i na taj način dati do znanja da mu se sviđa taj projekt.

Funkcionalni zahtjevi

14

Također korisnik može i pregledati komentare određenog projekta klikom na

poveznicu komentari. Komentari su prikazani Slikom 8. Ukoliko želi korisnik može i

ostaviti vlastiti komentar na projekt.

Slika 8 Komentari

Klikom na gumb više o projektu otvara se novi zaslon u kojemu se prikazuju sve

objave vezane uz taj projekt kao i galerija slika, a to je prikazano Slikom 9. Korisnik

također može ocjenjivati svaku pojedinu objavu, pregledavati komentare i naravno

prema želji ostaviti vlastiti komentar.

Slika 9 Detaljni prikaz projekta

Odabirom ikone osobe u navigacijskoj traci otvara se zaslon na kojemu korisnik

ukoliko je prijavljen može vidjeti osobne podatke i sve svoje projekte i statistike.

Funkcionalni zahtjevi

15

Zaslon profila prikazan je Slikom 10. Ukoliko korisnik nije prijavljen ikona profila mu

nije ni ponuđena u navigacijskoj traci.

Slika 10 Korisnički profil

Korisniku se nudi i mogućnost pregledavanja najnovijih objava i novosti drugih

korisnika. Dolaskom na zaslon s objavama korisniku se prikazuju objave u obliku

kartica kao što je prikazano na Slici 11. Na taj način korisnicima se omogućuje da

svakodnevno dijele razne zanimljivosti i novosti vezane uz svoje projekte, ali i uz

razne druge teme. Uz to korisnici mogu ocjenjivati objave i sudjelovati u raspravama

i razmjeni iskustava kroz sustav komentara.

Slika 11 Zaslon sa objavama korisnika

Implementacijski detalji

16

3. Implementacijski detalji

U ovom poglavlju biti će opisani najvažniji i najzanimljiviji dijelovi izrađene

aplikacije. Prilikom izrade aplikacije korišteni su preporučeni načini izrade i

implementacije programskog koda u skladu sa službenom dokumentacijom radnog

okvira Angular i servisa Firebase.

3.1. Auth service

Sustav autentifikacije korisnika temelji se na Firebase Auth servisu s kojim je

moguće implementirati OAuth provjeru autentičnosti pomoću prijave putem Google

računa. U projekt je uključena službena biblioteka za korištenje Firebase servisa,

angularfire2. Unutar klase AuthService definirane su metode za prijavu i odjavu

u aplikaciju te se podaci o korisnicima spremaju u kolekciju u Firestore bazi

podataka.

@Injectable({

providedIn: 'root'

})

export class AuthService {

user$: Observable<User>;

constructor(

private afAuth: AngularFireAuth,

private afs: AngularFirestore,

private router: Router) {

// Get the auth state, then fetch the Firestore user document or return

null

this.user$ = this.afAuth.authState.pipe(

switchMap(user => {

// Logged in

if (user) {

return this.afs.doc<User>(`users/${user.uid}`).valueChanges();

} else {

// Logged out

return of(null);

}

})

)

}

async googleSignin() {

Implementacijski detalji

17

const provider = new auth.GoogleAuthProvider();

const credential = await this.afAuth.auth.signInWithPopup(provider);

return this.updateUserData(credential.user);

}

private updateUserData(user) {

// Sets user data to firestore on login

const userRef: AngularFirestoreDocument<User> =

this.afs.doc(`users/${user.uid}`);

console.log(user);

const data = {

user: user.uid,

email: user.email,

displayName: user.displayName,

photoURL: user.photoURL,

creationTime: user.metadata.creationTime,

lastSignInTime: user.metadata.lastSignInTime

}

return userRef.set(data, { merge: true })

}

async signOut() {

await this.afAuth.auth.signOut();

this.router.navigate(['/']);

}

3.2. Uploader

Jedna od važnih značajki aplikacije je mogućnost prenošenja slika. Ta

funkcionalnost ostvarena je pomoću baze podataka AngularFireStorage gdje se

pohranjuju slike te Firebase NoSQL baze gdje se pohranjuju URL-ovi (Uniform

Resource Locator) za preuzimanje. U klasi UploadTaskComponent implementirana

je pohrana slika u AngularFireStorage kao i spremanje URL-ova za preuzimanje.

Također ostvarena je i funkcionalnost praćenja stanja prijenosa podataka i količine

prenesenih podataka.

export class UploadTaskComponent implements OnInit {

@Input() file: File;

task: AngularFireUploadTask;

percentage: Observable<number>;

snapshot: Observable<any>;

Implementacijski detalji

18

downloadURL;

constructor(private storage: AngularFireStorage, private db:

AngularFirestore) { }

ngOnInit() {

this.startUpload();

}

startUpload() {

// The storage path

const path = `test/${Date.now()}_${this.file.name}`;

// Reference to storage bucket

const ref = this.storage.ref(path);

// The main task

this.task = this.storage.upload(path, this.file);

// Progress monitoring

this.percentage = this.task.percentageChanges();

this.snapshot = this.task.snapshotChanges().pipe(

tap(console.log),

// The file's download URL

finalize( async() => {

this.downloadURL = await ref.getDownloadURL().toPromise();

this.db.doc(`projects/${project.uid}`).add( { downloadURL:

this.downloadURL, path });

}),

);

}

isActive(snapshot) {

return snapshot.state === 'running' && snapshot.bytesTransferred <

snapshot.totalBytes;

}

}

Implementacijski detalji

19

3.3. Angular Router

Angular router omogućuje navigaciju između pogleda unutar aplikacije. Potrebno je

stvoriti polje objekata koje služi za navigaciju između komponenata pomoću URL-

ova. U narednom isječku koda konstanti routes pridjeljuje se polje objekata tipa

Routes. Pomoću direktive canActivate i klase AuthGuard implementirana je

zaštita od pristupa neautoriziranih korisnika određenim komponentama i putanjama.

const routes: Routes = [

{path: '', component: MainComponent},

{path: 'newProject',

component: NewProjectComponent,

canActivate: [AuthGuard]},

{path: 'newPost',

component: NewPostComponent,

canActivate: [AuthGuard]},

{path: 'comments/:id', component: CommentsComponent},

{path: 'posts', component: PostsComponent},

{path: 'posts/comments/:id', component: CommentsPostsComponent},

{path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]},

{path: 'project/:id', component: ProjectPostsComponent},

// otherwise redirect to home

{ path: '**', redirectTo: '' }

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

3.4. App module

Angular aplikacije su modularne, a Angular ima vlastiti sustav modularnosti nazvan

NgModules. NgModuli mogu sadržavati komponente, davatelje usluga (engl. service

provider) i druge datoteke čiji je opseg definiran sadržajem NgModula. Svaka

Angular aplikacija ima barem jednu korijensku klasu NgModule koja se uobičajeno

zove AppModule. U primjeru ispod nalazi se tek mali isječak iz app.module.ts

datoteke u kojem se vidi dio modula uključenih u aplikaciju.

import { AngularFireModule } from '@angular/fire';

import { AngularFirestoreModule } from '@angular/fire/firestore';

import { AngularFireStorageModule } from '@angular/fire/storage';

import { AngularFireAuthModule } from '@angular/fire/auth';

Implementacijski detalji

20

import { AngularFireFunctionsModule } from '@angular/fire/functions';

import {MatInputModule} from '@angular/material/input';

import {MatSelectModule} from '@angular/material/select';

import { NewPostComponent } from './new-post/new-post.component';

import { NewProjectComponent } from './new-project/new-project.component';

@NgModule({

declarations: [

AppComponent,

MainComponent,

NewPostComponent,

NewProjectComponent,

],

imports: [

AngularFirestoreModule, // imports firebase/firestore, only needed for

database features

AngularFireAuthModule, // imports firebase/auth, only needed for auth

features,

AngularFireStorageModule, // imports firebase/storage only needed for

storage features

AngularFireFunctionsModule,

MatSelectModule,

MatInputModule,

],

providers: [],

bootstrap: [AppComponent]

})

3.5. Infinite Scroll

Radi poboljšanja performansi aplikacije i funkcionalnosti aplikacije straničenje (engl.

paging) je izvedeno u obliku jedne stranice gdje se prilikom spuštanja po stranici

dohvaćaju novi podaci. Unutar klase InfiniteScrollComponent definirana je

konstanta batch koja predstavlja broj dokumenata koji će se dohvatiti prilikom

svakog dohvata iz baze podataka Firestore. Pomoću CdkVirtualScrollViewport

prati se trenutna lokacija na stranici i ako se dođe do kraja stranice poziva se metoda

za dohvaćanje novih dokumenata. Dohvaćeni podaci se spajaju s postojećim

podacima te se na taj način korisniku ostavlja utisak da su se ti podaci već tu nalazili.

Također koristi se svojstvo Firestore baze podataka pomoću kojega se u stvarnom

vremenu prate izmjene u podacima te se lokalni podaci sinkroniziraju u stvarnom

vremenu.

Implementacijski detalji

21

export class InfiniteScrollComponent {

@ViewChild(CdkVirtualScrollViewport)

viewport: CdkVirtualScrollViewport;

batch = 20;

theEnd = false;

offset = new BehaviorSubject(null);

infinite: Observable<any[]>;

constructor(private db: AngularFirestore) {

const batchMap = this.offset.pipe(

throttleTime(500),

mergeMap(n => this.getBatch(n)),

scan((acc, batch) => {

return { ...acc, ...batch };

}, {})

);

this.infinite = batchMap.pipe(map(v => Object.values(v)));

}

getBatch(offset) {

console.log(offset);

return this.db

.collection('projects', ref =>

ref

.orderBy('date')

.startAfter(offset)

.limit(this.batch)

)

.snapshotChanges()

.pipe(

tap(arr => (arr.length ? null : (this.theEnd = true))),

map(arr => {

return arr.reduce((acc, cur) => {

const id = cur.payload.doc.id;

const data = cur.payload.doc.data();

return { ...acc, [id]: data };

}, {});

})

);

}

Implementacijski detalji

22

nextBatch(e, offset) {

if (this.theEnd) {

return;

}

const end = this.viewport.getRenderedRange().end;

const total = this.viewport.getDataLength();

console.log(`${end}, '>=', ${total}`);

if (end === total) {

this.offset.next(offset);

}

}

trackByIdx(i) {

return i;

}

}

3.6. Main component HTML

U sljedećem isječku koda nalazi se dio prezentacijskog sloja aplikacije načinjen od

HTML-a i Angular direktiva. Za iteriranje kroz podatke koristi se Angularova ngFor

direktiva te async cjevovod (engl. pipeline) za asinkrono dohvaćanje podataka. Za

prikaz podataka unutar HTML-a koriste se klasični HTML tagovi i posebne Angular

direktive.

<mat-card *ngFor="let project of projects | async; let i = index" class="card">

<mat-card-header>

<div mat-card-avatar class="header-image"></div>

<mat-card-title>{{ project.author }}</mat-card-title>

<mat-card-subtitle>{{ project.timestamp.toDate().toLocaleTimeString() ¸

}},

{{project.timestamp.toDate().toLocaleDateString()}}

</mat-card-subtitle>

</mat-card-header>

<img mat-card-image [src]='project.images.frontPage' alt="Project photo">

<mat-card-content>

<h2>{{project.specification.brand}}</h2>

<h6>{{project.content.intro}}</h6>

<p>{{project.content.desc}}</p>

<table mat-table class="mat-elevation-z8">

<tr mat-header-row>

<th mat-header-cell>Radni obujam</th>

<th mat-header-cell>Snaga motora</th>

<th mat-header-cell>Godina proizvodnje</th>

Implementacijski detalji

23

</tr>

<tr mat-row>

<td>{{project.specification.engineDisplacement}}</td>

<td>{{project.specification.power}}</td>

<td>{{project.specification.year}}</td>

</tr>

</table>

</mat-card-content>

<mat-card-actions>

<div class="akcije">

<button mat-button (click)="like(project)">

<mat-icon>thumb_up_alt</mat-icon> LIKE

</button>

<button mat-button routerLink="/comments/{{project.id}}">

<mat-icon>comment</mat-icon> COMMENTS

</button>

<span class="example-fill-remaining-space"></span>

<button mat-fab>

<mat-icon>share</mat-icon>

</button>

</div>

</mat-card-actions>

</mat-card>

3.7. Promjena veličine slika

Za promjenu veličine učitanih slika koristi se Firebase servis Cloud Functions. [13]

To je serverless servis na kojemu se izvode JavaScript funkcije. U nastavku je dan

primjer u kojemu se poziva funkcija koja na osnovu učitanih slika u Firebase Cloud

Storage stvara thumbnail smanjene veličine.

export const generateThumbs = functions.storage

.object()

.onFinalize(async object => {

const bucket = gcs.bucket(object.bucket);

const filePath = object.name;

const fileName = filePath.split('/').pop();

const bucketDir = dirname(filePath);

const workingDir = join(tmpdir(), 'thumbs');

const tmpFilePath = join(workingDir, 'source.png');

if (fileName.includes('thumb@') || !object.contentType.includes('image')) {

console.log('exiting function');

return false;

}

Implementacijski detalji

24

// 1. Ensure thumbnail dir exists

await fs.ensureDir(workingDir);

// 2. Download Source File

await bucket.file(filePath).download({

destination: tmpFilePath

});

// 3. Resize the images and define an array of upload promises

const sizes = [64, 128, 256];

const uploadPromises = sizes.map(async size => {

const thumbName = `thumb@${size}_${fileName}`;

const thumbPath = join(workingDir, thumbName);

// Resize source image

await sharp(tmpFilePath)

.resize(size, size)

.toFile(thumbPath);

// Upload to GCS

return bucket.upload(thumbPath, {

destination: join(bucketDir, thumbName)

});

});

// 4. Run the upload operations

await Promise.all(uploadPromises);

// 5. Cleanup remove the tmp/thumbs from the filesystem

return fs.remove(workingDir);

});

Korištene tehnologije i alati

25

4. Korištene tehnologije i alati

U ovom poglavlju ukratko su opisane korištene tehnologije i alati koji su uvelike

pomogli prilikom izrade ovog završnog rada. Alati korišteni u izradi ovog završnog

rada služili su za dizajniranje korisničkog sučelja, kontrolu verzija programskog

koda, pisanje i uređivanje programskog koda te ispravljanje i uočavanje pogrešaka.

4.1. Figma

Figma je online aplikacija za dizajniranje korisničkog sučelja, ali postoji i desktop

verzija koja također radi pomoću web preglednika. Pošto je aplikacija stalno

povezana s Internetom ona je odličan izbor za rad u timu jer omogućuje uživo

surađivanje na projektu. Uz to Figma još omogućuje i ostavljanje komentara, izradu

biblioteka komponenata, simulacije korisničkog sučelja te osigurava da svi članovi

tima imaju najnoviju kopiju projekta. Nakon izrade željenog dizajna aplikacija

omogućuje automatsko generiranje CSS, SVG, Android ili iOS koda. [14]

4.2. Git

Git9 je najrašireniji moderni sustav kontrole verzija programskog koda. Git je aktivno

održavani open source projekt kojeg je 2005. godine razvio Linus Torvalds, poznati

tvorac jezgre operativnog sustava Linux. Veliki broj softverskih projekata oslanja se

na Git, uključujući komercijalne projekte kao i open source projekte. Git radi na

širokom rasponu operacijskih sustava i razvojnih okruženja. Imajući distribuiranu

arhitekturu, Git je primjer distribuiranog sustava kontrole verzija. Umjesto da ima

samo jedno mjesto za cjelokupnu povijest verzija softvera kao što je to uobičajeno

u nekada popularnim sustavima za upravljanje verzijama kao što su CVS

(Concurrent Versions System) ili SVN (Subversion), u Gitu svaka radna kopija koda

svakog razvojnog programera također je i spremište koje može sadržavati

cjelokupnu povijest promjena. Osim što je distribuiran, Git je dizajniran tako da bude

brz, siguran i fleksibilan.

9 Poveznica na službenu stranicu alata za verzioniranje Git: https://git-scm.com/

Korištene tehnologije i alati

26

4.3. GitLab

Gitlab je web bazirani DevOps alat otvorenog koda koji nudi upravljanje Git

repozitorijem. Uz to Gitlab ima i mogućnosti vođenja dokumentacije (wiki),

organizacije rada, CI/CD (Continuous Integration and Deployment) cjevovoda te

mnoge druge mogućnosti. [15]

4.4. Visual Studio Code

Visual Studio Code je jednostavan i prilagodljiv uređivač teksta visokih performansi

koji nudi mnoga svojstva i alate kao i neke puno složenije razvojne okoline. Visual

Studio Code dostupan je za sve veće platforme, MacOS, Linux i Windows. Njegova

najveća prednost upravo je u tome što nudi veliku prilagodljivost i mnoga proširenja

koja korisnik može instalirati prema vlastitim željama i potrebama. [16]

4.5. Chrome DevTools

Chrome DevTools je skup alata za razvojne programere koji su ugrađeni izravno u

preglednik Google Chrome. DevTools pomaže u uređivanju stranica uživo na licu

mjesta i u brzom dijagnosticiranju problema, što u konačnici pomaže u izradi bržih i

boljih web stranica. [17]

Zaključak

27

5. Zaključak

Cilj završnog rada bio je oblikovati i programski izvesti web-aplikaciju koja će

služiti kao društvena mreža za ljubitelje automobila. Razvijena aplikacija je prije

svega trebala biti jednostavna za uporabu i imati lijepo korisničko sučelje. Uz to bilo

je potrebno ostvariti zavidne performanse web-aplikacije radi što boljeg korisničkog

iskustva.

Izrada web-aplikacije u radnom okviru Angular je bila vrlo poučna, ali na dijelove

podosta zahtjevna. Glavni izazov je optimizirati rad aplikacije i postići što bolje

performanse. Podrška za razvoj od strane službene Angular dokumentacije je

odlična, kao i podrška za Firebase dio aplikacije. Glavni izazov Firebase dijela

aplikacije je bio izrada modela baze podataka iz razloga što je bilo potrebno

optimirati omjer cijene i performansi.

Ukoliko se nastavi rad na ovoj web-aplikaciji u daljnjim koracima potrebno je provesti

detaljno ispitivanje aplikacije te ispraviti i optimizirati dijelove aplikacije ukoliko se za

to ukaže potreba. Nakon toga bi aplikacija trebala biti spremna za produkciju. Uz to

postoje još mnoge funkcionalnosti koje je moguće implementirati u narednim

verzijama aplikacije.

Literatura

28

6. Literatura

[1] Angular Single Page Applications (SPA): What are the Benefits?, s Interneta, https://blog.angular-university.io/why-a-single-page-application-what-are-the-benefits-what-is-a-spa/ , 26.4.2019.

[2] Progressive Web Apps, s Interneta, https://developers.google.com/web/progressive-web-apps/ , 2019.

[3] What is a progressive web app?, s Interneta, https://medium.com/@amberleyjohanna/seriously-though-what-is-a-progressive-web-app-56130600a093 , 6.8.2018.

[4] Docs - Angular, s Interneta, https://angular.io/docs , 2019.

[5] Angular architecture overview, s Interneta, https://angular.io/generated/images/guide/architecture/overview2.png, 2019.

[6] Angular Blog, s Interneta, https://blog.angular.io/ , 2019.

[7] Angular Material guides, s Interneta, https://material.angular.io/guides , 2019.

[8] NoSQL Databases Explained, s Interneta, https://www.mongodb.com/nosql-explained, 2019.

[9] Firebase Documentation, s Interneta, https://firebase.google.com/docs , 2019.

[10] Cloud Firestore, s Interneta, https://firebase.google.com/docs/firestore/ , 2019.

[11] Firebase Authentication, s Interneta, https://firebase.google.com/docs/auth/ , 2019.

[12] Cloud Storage, s Interneta, https://firebase.google.com/docs/storage/ , 2019.

[13] Fireship.io, s Interneta, https://fireship.io/ , 2019.

Literatura

29

[14] Figma Help, s Interneta, https://help.figma.com/ , 2019.

[15] GitLab Documentation, s Interneta, https://docs.gitlab.com/ , 2019.

[16] Using Angular in Visual Studio Code, s Interneta, https://code.visualstudio.com/docs/nodejs/angular-tutorial , 2019

[17] Chrome DevTools, s Interneta, https://developers.google.com/web/tools/chrome-devtools/ , 2019.

Popis oznaka i kratica

30

Popis oznaka i kratica

HTML HTML je skraćenica od Hypertext Markup Language, a to je standardni označni jezik za izradu web-stranica i web-aplikacija.

CSS CSS je skraćenica od Cascading Style Sheets. CSS je stilski jezik koji se koristi za opis prezentacije HTML dokumenata.

JSON JSON (JavaScript Object Notation) je otvoren i neovisan format zapisa podataka koji je lako čitljiv i služi za prijenos podataka i objekata u obliku ključ - vrijednost ili u obliku polja.

CI/CD Kontinuirana integracija i kontinuirana primjena ( engl. Continuous Integration and Deployment) je koncept koji omogućava jednostavniju integraciju i razvoj programske potpore.

PWA PWA (Progressive Web App) je web-aplikacija koja pruža korisničko iskustvo slično mobilnoj aplikaciji

SPA SPA (Single-page application) je web-aplikacija koja dinamički izmjenjuje stranice bez osvježavanja prikaza.

SEO SEO (Search Engine Optimization) je optimizacija količine i kvalitete prometa web-stranice pomoću rezultata upita tražilice.

SQL SQL (Structured Query Language) je strukturni upitni programski jezik za izradu, pretraživanje, ažuriranje i brisanje podataka iz relacijskih baza podataka.

NoSQL NoSQL (Not Only SQL) baze podataka su općenito baze podataka koje nisu zasnovane na relacijskom modelu podataka.

Popis slika

31

Popis slika

Slika 1 Struktura Angular aplikacije [5] ................................................................... 6

Slika 2 Početna stranica ....................................................................................... 10

Slika 3 Prijava u aplikaciju .................................................................................... 11

Slika 4 Navigacija aplikacijom .............................................................................. 11

Slika 5 Dijagram obrazaca uporabe ..................................................................... 12

Slika 6 Forma za unos novog projekta ................................................................. 13

Slika 7 Prijenos fotografija .................................................................................... 13

Slika 8 Komentari ................................................................................................. 14

Slika 9 Detaljni prikaz projekta ............................................................................. 14

Slika 10 Korisnički profil........................................................................................ 15

Slika 11 Zaslon sa objavama korisnika ................................................................ 15

Sažetak

32

Sažetak

U ovom radu napravljena je društvena mreža za ljubitelje automobila koja je

implementirana kao web-aplikacija. Aplikacija je namijenjena za druženje i razmjenu

iskustava ljudima koji vole automobile, ali i druga prijevozna sredstva. U aplikaciji je

omogućeno kreiranje projekata, objava, komentiranje, ocjenjivanje te dodavanje

fotografija. Tehnologije kojima je implementiran ovaj rad su Angular 7 i Firebase

servisi: Firestore, Cloud Storage, Cloud Functions i Firebase Auth.

Ključne riječi:

Angular, Firebase, Firestore, Cloud Storage, Cloud Functions, Firebase

Auth, HTML, CSS, JSON, TypeScript, SPA, PWA, NoSQL, automobili,

društvena mreža

Summary

33

Summary

The result of this work is a social network for car enthusiasts implemented as a

web application. The application is intended for socializing and sharing experiences

with people who like cars and other vehicles. Some of the features offered by this web

application are: creating a project, leaving comments, releasing photos. Technologies

used in this work are: Angular 7 and Firebase Services: Firestore, Cloud Storage,

Cloud Functions and Firebase Auth.

Keywords:

Angular, Firebase, Firestore, Cloud Storage, Cloud Functions, Firebase

Auth, HTML, CSS, JSON, TypeScript, SPA, PWA, NoSQL, cars, social

network