Platformă integrată de co municare și planificare [612971]

Universitatea POLITEHNICA București
Facultatea Automatică și Calculatoare
Departamentul Automatică și Informatică Industrială

Platformă integrată de co municare și planificare
a deplasă rilor cu scop turistic

Coordonator Absolvent: [anonimizat]. Adriana Olteanu Diana -Cristina Cocea

2018

2
Cuprins

1. Introducere ………………………….. ………………………….. ………………………….. ………………… 3
1.1 Structura documentului ………………………….. ………………………….. …………………………. 3
1.2 Obiectivele proiectului ………………………….. ………………………….. ………………………….. 4
2. Prezentarea aplicațiilor din același domeniu ………………………….. ………………………….. . 5
3. Prin ce se diferențiază aplicația YourGuide ………………………….. ………………………….. .. 7
4. Tehnologii web ………………………….. ………………………….. ………………………….. ………….. 9
4.1 Instalare pachete ………………………….. ………………………….. ………………………….. ….. 9
4.2 Interfața aplicației ………………………….. ………………………….. ………………………….. . 10
4.3 Backend -ul aplicație i ………………………….. ………………………….. ………………………. 14
5. Implementarea și funcționalitatea aplicației YourGuide ………………………….. …………. 25
5.1 Logare ………………………….. ………………………….. ………………………….. ………………. 25
5.2 Înregistrare ………………………….. ………………………….. ………………………….. ………… 27
5.3 Recuperare parol ă ………………………….. ………………………….. ………………………….. . 29
5.4 Schimbare parol ă ………………………….. ………………………….. ………………………….. .. 30
5.5 Alegerea destinației ………………………….. ………………………….. …………………………. 31
5.6 Completarea informațiilor de către ghizi ………………………….. ………………………… 32
5.7 Chatbot ………………………….. ………………………….. ………………………….. ……………… 36
5.8 Chat ………………………….. ………………………….. ………………………….. ………………….. 41
5.9 Căutare utilizatori ………………………….. ………………………….. ………………………….. . 43
5.10 Profil utilizator ………………………….. ………………………….. ………………………….. ….. 43
6. Concluzii și dezvoltări ulterioare ………………………….. ………………………….. ………………… 47
6.1 Concluzii ………………………….. ………………………….. ………………………….. ……………….. 47
6.2 Dezvoltări u lterioare ………………………….. ………………………….. ………………………….. .. 47
7. Bibliografie ………………………….. ………………………….. ………………………….. …………………. 49

3 1. Introducere
Se poate spune, pe drept cuvânt, că trăim î ntr-o societate cu totul informatizată. A cest
lucru se datorează faptului că ne dăm seama din ce î n ce mai mult de faptul că sistemele de
calcul ne ușureaza munca, viața prin apariția ș i dezvoltarea lor. În ultimii ani, aplicațiile
desktop au început să fie tot mai puț in folosit e, tehnologiile de zvoltându -se foarte mult în
zona web. Cel mai evident avantaj al unei aplicaț ii web este fl exibilitatea acesteia. O
aplicație web poate fi accesată de oriunde, folosind orice device conectat la internet. Acest
lucru se d atorează localizării aplicaț iei pe u n server, care poate fi accesat dacă există
conexiune la internet.

1.1 Structura documentului

Primul capitol prezintă câteva noț iuni introductive referitoare la pr oblema dată ș i
obiectivele proiectului.

În capitolul 2 sunt prezentate alte aplicații cu aceeași temă, evidențiindu -se elementele
noi pe care proiectul de față le aduce.

În capitolul 3 este prezentată ideea generală a soluț iei problemei pe care o propune
proiectul. Se realizează un chestionar completat de pers oane de vârste diferite, pe baza
căruia se va implementa chatbot -ul.

În capitolul 4 sunt analizate tehnologiile folosite pentru implementarea interfeței
aplicației și a logicii din spate. Vom vorbi despre alegerea tehnologiilor, framework -ul
React p entru partea de front -end, dar și moti vul pentru care se combină atâ t de bine cu
Firebase, serviciul pentru centralizarea datelor.

În capitolul 5 se descrie funcționalitatea exactă a aplicați ei, fiecare pas pe care
utilizatorul trebuie să îl facă pentru a pu tea folosi acest serviciu. Pe lâng ă descrieri, fiecare
pas va avea asociat e imagini din aplicaț ie, p entru a se putea ilustra cât mai bine

4 funcț ionalitatea. Capitolul va descrie totodată procesul realizării aplicației. Fiecare etapă
importantă din realizarea proiectului va avea exemple de c od, pentru o mai bună ințelegere.
Vor fi, de asemenea, specificate moti vele pentru care s -au ales soluț iile, logica, ordinea.

Capitolul 6 reprezintă partea concluziilor. A ici vom face un rezumat al
funcționalităț ilor, c oncluzionâ nd cu ajutorul real pe car e aplicația îl oferă utiliz atorilor la
problema care există î n momentul actu al. Vom discuta, de asemenea, și despre dezvoltă rile
ulterioare pe care proiectul urmează să le aibă .

Capitolul 7 este și cel final, aici este prezentată bibliografia acestui proi ect.

1.2 Obiectivele proiectului

Există o varie tate foarte mare de aplicații, având diverse funcționalități care vin în
ajutorul utilizatorilor. După o cercetare asupra aplicațiilor existente până în momentul de
față, am desco perit faptul că oamenii înc ă au „probleme” la capitolul călă torie, indiferent
de natura acesteia, spre exemplu, alegerea unui restaurant pentru se rvirea mesei, găsirea
unui loc de relaxare, găsirea cază rii potrivite. Toate aceste locuri nu sunt atât de ușor de
găsit, deoarece oameni i au păreri ș i gusturi diferite, din acest motiv, părerile de pe un
forum sau de pe diverse site-uri de promovare nu sunt î ntotdeauna relevante.

Aplicația „Ghidul tă u” vi ne în ajutorul oamenilor prin gă sirea soluțiilor prin cea mai
simplă metodă – comuni carea dintre persoane. Lucrarea de față încurajeaz ă interacțiunea
dintre oameni, deoarece ghidul d in numele proiectului reprezintă, de fapt, chiar o persoană
reală care vine în ajutorul utilizatorului. De asemenea, cel care folosește aplicația va putea
să își definească itinerariul pe care l -a parcurs, adă ugand poze , comentarii folositoare
pentru alți utilizatori cu aceeaș i destinație.

Obiectivele aplicației :
 Găsirea ghidului ideal cu ajutorul chatbot -ului
 Comunicarea dintre utilizator si ghid
 Definire iti nerariu

5 2. Prezentarea aplicațiilor din același
domeniu
Există diferite aplicații în același centru de interes, aplicații care, însă, nu îmbină toate
elementele ne cesare pentru ca utilizatorul să aibă parte de o experiență completă .

Aplicaț ia “Flip the Tr ip” are puncte comune cu aplicaț ia dezvoltată în această lucrare,
obiectivul ei general f iind acela de a face legatura î ntre persoane care au interese comune ,
doar din punct de vedere al călă toriilor . Persoanele pot comunica, î si pot face propriul
profil , pot adă uga poze si informaț ii pers onale. Spre deosebire de aplicaț ia de față, “Flip
the Trip” nu are niciun mecanism prin care să se facă o legatură automată între uti lizatori.
Aplicația poate să se folosească, de aseme nea, de datele utilizatorului, în cazul în care
acesta are profil de Facebook ș i/sau Instagram.

Fig 2 .1. Pagina de prezentare a aplicației “Flip the Trip”

O altă idee de aplicație este “Ask a Stranger”, care, după cum îi sugerează și
numele, încurajează turiștii să comunice cu persoanele necunoscute din aceeași zonă în
care se află î n momentul de față. Aplicația oferă puncte câstigă toare utilizatorilor care au
ajutat, î n acest mod, comunitatea poate crește și aplicaț ia se poate dezvolta.

6 În concluzie, există în momentul actual o mulțime d e aplicații î n aria de interes a
turismului. Acestea se diferențiază î n funcție de scopul principal pe care doresc să î l
realizeze. Major itatea incurajează comunicarea între persoane, ceea ce confirmă faptul că
experienț a unei alte persoane este o foarte p uternică sursă de informaț ie.
“Your Guide” se diferențiază de restul aplicațiilor prin faptul că are implementat un
chatbot care face legatura î ntre persoane. Logica din s patele acestui chabot se bazează pe
un chestionar adresat persoanelor ce fac p arte di n diverse categorii de vâ rstă. Pe baza
răspunsurilor primite î n urma chestionarului au rezult at anumite procentaje asociate
întrebă rilor chatbotului.

7 3. Prin ce se diferențiază aplicația
YourGuide
Luând î n considerare scopul aplicației ș i aplicați ile similare, funcționalitatea principală
a proiectului de față este chatbot -ul.
Chatbot -ul fac e legatura dintre utilizatori, î ntre ce l care dorește să călătorească ș i ghid.
Acestă legatura nu este făcută întâmplă tor, ci pe baza unei logici bine pusă la punct.
Într-o primă etapă, vizitatorul și ghidul vor trebui să aibă în comun lucruri esenț iale:
 Destinația
 Limbile vorbite (cel puțin una să fie comună)
 Genul (în cazul î n care călătorul specifică explicit fapt ul că dorește să
aibă drept ghid o p ersoană de gen feminin/masculin)
Următoarele informații importante î n alegerea ghidului potrivit sunt:
o Atracțiile turistice
o Hobby -urile
o Vârsta
o Genul muzical
o Ocupația

Fiecare dint re informațiile de mai sus va avea anumite procentaje desemnate
pe baza unui chestionar completat de 20 de persoane (12 persoa ne cu vârste
cuprinse între 21 -30 ani și 8 persoane cu vârste cuprinse î ntre 41 -50 ani).

8
Fig 3.1 Formular realizat pentru alocarea procentajelor

Întrebarea adresată î n formular: “ Dacă ai avea ocazia s ă îți alegi un ghid pentru o
vacanță , care ar fi cele mai importa nte lucruri pe care ar trebui să le aveți în comun pentru
a fi sigur că sfaturi le lui ți s e potrive sc în totalitate?”.
În urma notelor date fiecărui ră spuns, au rezultat urmă toarele procentaj e:

Fig 3.2 Procentaje rezultate î n urma sondajului

9 4. Tehnologii web
Înainte de a alege tehnologiile web trebuie să ne punem întrebarea de ce fel de aplicație
avem nevoie, Single Page A pplication (S PA) sau Multiple Page A pplication (MPA ).

Fig 4.1 Avantaj e și dezavantaje SPA

Fig 4.2 Avantaje și dezavantaje MPA
SEO – Server Engine O ptimization

4.1 Instalare pachete

Pentru instalarea diferitelor pachete necesare proiectului am folosit NPM, un
manager de pa chete pentru modulele Node.js. SPA avantaje
foarte rapid
nu necesi tă cod pentru backendSPA dezavantaje
SEO-ul este dificil
JavaScript nu poate lipsi
pentru browsere moderne
MPA avantaje
SEO simplu
documentație, framework -uri bine
dezvoltate
suportat de majoritatea browserelorMPA dezavantaje
mai puțin rapid, necesită rerandarea
paginilor
logică de backend (controllers și modules)
și logică de frontend (views)

10 www.npmjs.com gă zduiește mii de pachete gratuite de descărcat și de utilizat. Odată cu
instalarea Node -ului, vom avea și managerul de pachete NPM instalat.
Un pachet din Node.js conține toate fișierele de care avem nevoie pentru un modul.
Modulele sunt bibliot eci JavaScri pt pe care le putem include în proiect .
Instalarea unui pachet se face foarte ușor, un exemplu este cel de mai jos :

Fig 4.3 Instalare pachet [13]

NPM creează un folder numit "node_modules", unde pachetul va fi plasat. Toate
pachetele pe care le insta lăm vor fi plasate în acest folder.
NPM ține evidența tuturor pachetelor și a versiunilor acestora și îi permite
dezvoltatorului să actualizeze sau să elimine cu ușurință aceste dependențe. Toate aceste
dependențe externe sunt stocate în interiorul unui f ișier numit package.json.
Fișierul inițial poate fi creat cu ușurință utilizând CLI npm init (presupunând că NodeJS
este instalat în sistem) .
Pentru a folosi un pachet instalat trebuie să îl importăm în fișierul unde dorim să
îl utilizăm.

Fig 4.4 Impor tare pachete

Când suntem pregătiți să facem deploy pe producție, rularea npm run build va
crea o variantă optimizată a aplicației în folderul build .

4.2 Interfața aplicaț iei

Interfaț a este realizată doar pentru zona web, existâ nd mai multe variante de
framework -uri pentru implementare:

11  React
 Angular
 Vue.JS

Dintre to ate aceste tehnologii am ales să folosesc Re act, un framework pentru
aplicațiile web, dezvoltat de iniți atorii Facebook. A cesta știe să randeze eficient doar
componenta î n care dat ele s -au schimbat, din acest motiv este foarte inteligent, spre
deosebire de frame work -ul Angular1, care rerandează întreaga componentă, în cazul în
care ceva se modifică .
Abordarea React minimizează noile concepte care trebuie invăț ate, fiind mai
apropiat de standardele JavaScript.
[1]: “Unul dintre lucrurile foarte bune la React este faptul că view templates
(sabloanele de vederi) s unt create in JavaScript sau fiș iere JSX. Avantajele rezultate:

 Nu trebuie să inventăm și să învăță m noi structuri de contro ale pentru a
manipula HTML, de exemplu directive “for” din Angular. Putem folosi cod
JavaScript pur, de exemplu “array.map” pentru a realiza iteratii intr -o
colectie.
 Orice eroare de sintaxă va fi remarcată din timp la compilare

Mana gementul de stare este dificil și în cazul în care aplicaț ia ajunge la o
dimensiune mai mare, pot apărea uneori erori în aplicație. Pentru a uș ura partea de
management, se folosește foarte mult libră ria Redux.
Redux se bazează pe trei principii:
 Întreaga stare a aplicației este stocată într -un obiect arbore, î ntr-un singur
loc de stocare ;
 Singura modalitate prin care se poate schimba arborele de stare este
emiterea unei acț iuni, un obiect ce descrie ceea ce s -a întâ mplat ;
 Pentru a specifica modul în care acțiunile transformă arborele de stare, se
scriu reductori puri ; “

Pentru aplicatia de față am ales să nu fo losesc libră ria Redux, deoarece
dimensiunile aplicaț iei nu necesitau acest lucru.

12 Angular reprezintă o alternativă pentru React. Este dezvoltat de Google și
reprezintă , de asemenea , un framework foarte cunoscut ș i folosit.
Vue.JS r eprezintă un framework de curând apărut. Este o combinație între React ș i
Angular, prezentâ nd avantajele amâ ndurora . Drept rezultat, Vue.JS su rprinde prin
simplitatea pe care o oferă .
React fo losește sintaxa JSX, în schimbul sintaxei de JavaScript obișnuit. Sintaxa
JSX arată ca limbajul HTML.

Fig 4.5 Exemplu sintaxă JSX

Chiar dacă este similar cu HTML, există câteva lucruri pe care trebuie să le avem în v edere
atunci când lucrăm cu JSX :
 Dacă vrem să returnăm mai multe elemente , trebuie să le încapsulăm pe
toate într -un element de container.

 Putem folosi propriile atribute personalizate pe lângă proprietățile și
atributele obișnuite ale limbajului HTML. Când vrem să adăugăm un
atribut person alizat, trebuie să folosim prefixul de date. Exemplu: data –
myattribute = "somevalue" .

 Expresiile JavaScript pot fi folosite în in teriorul JSX. Trebuie doar să le
folosim în interiorul acoladelor {}.

 Nu putem folosi declarații în interiorul JSX, dar putem folosi expresii
condiționale .

13  React recomandă utilizarea stilurilor inline. Când vrem să setăm stiluri
inline, trebuie să folosim sintaxa camelCase.

Fig 4.6 Exemplu utilizare inline style

 Etichetele HTML utilizează întotdeauna nume de etichete cu l itere mici,
în timp ce componentele React încep cu literă mare .

Pentru crearea proiectului utilizâ nd React am ales să folosesc pachetul create –
react -app. Acesta configurează mediul de dezvoltare pentru a putea utiliza cele mai recente
funcții JavaScript și optimizează aplicația pentru producție. Pentru a putea utiliza acest
pachet va trebui sa avem instalată o versiune de Node.js nu mai veche de v6.
Create React App nu gestionează logica de backend sau baze de d ate, ci doar creează o
legătură cu frontend -ul, astfel încât să îl putem folosi cu orice backend . Utilizează
instrumente precum Babel și Webpack, dar funcționează fără vreo configurație.

Ca orice limbaj de programare , Javascript are , de asemenea, versiuni numite
ECMAScript (scurt ES). În prezent, majoritatea browserelor suportă ES5.
Din păcate nu toate browserele suportă caracteristicile lui ES6 (specificațiile limbajului au
fost finalizate în 2015). Babel este un transformator JS care convertește noul cod JS în cele
vechi. Es te un instrument foa rte flexibil . Se pot adăuga cu ușurință presetări, cum ar fi
es2015, es2016, es2017, astfel încât Babel le compilează la ES5.

14
Webpack este un instrument modular care are două seturi de funcționalități –
Loaders și Plugins. Loaders transformă codul sursă al unui modul. De exemplu, sass-loader
compilează fișiere SASS în CSS .

Pentru stilizarea aplicației am ales să folosesc clase din Bootstra p [9], Font
Awesome [10] , Google Icons [11 ] și Flexbox [16]. Flexbox -ul ne oferă un control complet
asupra alinier ii, direcției, ordi nii și mărimii elementelor noastre, și este foarte ușor de
folosit.

4.3 Backend -ul aplicaț iei

Pentru partea de back -end a aplicaț iei am ales să folosesc o platformă care îmi
asigură accesul din client la baza de date – Firebase, dezv oltat de Google.
Acest serviciu este usor de folosit și prezintă o mulțime de tool -uri foarte utile în
dezvoltarea aplicațiilor, printre care și cele folosite î n realizarea aplicației de față –
serviciul de autentificare, de stocare și baza de date î n timp real. Pentru toate aceste
servicii ne sunt puse la dispoziț ie serve rele Google, dezvoltatorii neavând nevoie sa îș i
creeze un server propriu.
Baza de date este de tip NoSQL și are imp lementat protocolul de comunicaț ie
WebSockets.
WebSockets este princip iul care stă la baza ideii de „bază de date în timp real”.
Protocolul creează o sesiune activă atunci când se realizează o conexiune între client și
server. Această conexiune este deschisă cât timp ambii (clientul si serverul) sunt activi.
Protocolul HTTP nu realizează acest lucru, acesta nu memorează conexiunile, se
bazează doar pe primirea unui request, căruia îi răspu nde, după care conexiunea este
închisă.

15 [3]: “Avantaje WebSockets :

 Protocol bidirecțional – fie client ul / server -ul poate trimite un mesaj celeilalte părți
(în HTTP, cererea este inițiată întotdeauna de client și răspunsul este procesat de
server – făcând HTTP un protocol unidirecțional)
 Comunicare full -duplex – clientul și serverul pot vorbi unii cu alții independent în
același timp
 Conexiune unică TCP – După actualizarea conexiunii HTTP la început, clientul și
serverul comunică prin aceeași conexiune TCP de -a lungul ciclului de viață al
conexiunii Websocket

În concluzie, un canal bidirecțional, este mai atractiv pentru lucruri pre cum
jocuri, aplicații de mesagerie, instrumente de cola borare, experiențe interactive și pentru
cazuri în care avem nevoie de actualizări în timp real în ambele direcții. ”

Fig 4.7 Principiu de funcționare WebSockets [3]

Limitări protocol HTTP :
 serveru l nu poate deschide o conexiune cu clientul
 retrimite header -urile de fiecare dată – crește costul conexiunii
 protocolul TCP, care mai întâi face un handshake, apoi trimite datele

16

Fig 4.8 Principiu de funcționare HTTP [4]

WebSockets prezintă, de asem enea, ultimele doua limitări. Însă, atât header -urile
costisitoare, cât și handshake -ul, nu mai sunt o limitare, ele fiind trimise / făcute o
singură dată, la stabilirea conexiunii.

NoSQL, după cum îi spune și numele, în comparație cu bazele de date rela ționale,
nu se bazează pe conceptul de legături între tabele. O astfel de bază de date stochează
datele sub forma unui arbore.
Datele pot fi accesate pr in noduri, de exemplu, în cazul î n care avem calea
“/users/messages/text”:
 “text” – nodul curent
 “mess ages” – nodul pă rinte
 “users” – nodul pă rinte al precedentului
 “/” – nodul rădăcină

17 Firebase oferă o interfață foarte intuitivă utilizatorilor:

Fig 4.9 Structură bază de date î n Firebase

Utilizare Firebase :
Inițializarea bazei de date se face adaugând informațiile de configurare generate de
Firebase:

Fig 4.10 Informa ții configurare Firebase

Pentru a scrie sau a citi din baza de date avem nevoie de o referință către aceasta:

Fig 4.11 Referință către baza de date

18 Pentru ope rațiile de scriere în baza de date, putem utiliza metoda set() pentru a
salva datele într -o referință specificată, înlocuind orice date existente pe acea cale.
De exemplu:

Fig 4.12 Exemplu Firebase folosire metod ă set()
Pentru a citi datele și pentru a asculta modifică rile, utilizăm metodele on() sau
once() din firebase.database.Reference .
De exemplu :

Fig 4.13 Exemplu Firebase folosire metodă on()

Snapshot conține datele de la locația specificată din baza de date în momentul
evenimentului. Datele din snapshot sunt p reluate cu ajutorul metodei val().
În unele cazuri, este posibil să ne dorim un snapshot al datelor fără a asculta
schimbări, cum ar fi atunci când se inițializeaz ă un element UI care nu se schimbă. Putem
utiliza metoda once () pentru a simplifica acest sc enariu: se declanșează o singură dată.
Acest lucru este util pentru datele care trebuie să fie încărcate o singură dată și nu se
așteaptă să se schimbe frecvent sau să necesite ascultarea activă.
De exemplu :

Fig 4.14 Exemplu Firebase folosire metodă on ce()

19 Există, de asemenea , operația de updat e(). Aceasta ne permite să modificăm
câmpurile deja existente. Tot cu această metodă putem sa creăm câmpuri care nu existau
ințial.
Exemplu folosirea metodei update() pentru modi ficarea câmpurilor î n aplicație:

Fig 4.15 Utilizarea metodei update() în aplicație

Liste de date:

Utilizăm metoda push () pentru a adăuga date într -o listă în a plicații multiuser.
Metoda push () generează o cheie unică de fiecare dată când un nou copil este adăugat la
referința Firebase specificată. Prin utilizarea acestor chei generată automat pentru fiecare
element nou din listă, mai mulți clienți pot adăuga copii în aceeași locație , în același timp,
fără a c rea conflicte de scriere. Cheia unică generată de push () se bazează pe o marcă de
timp, astfel încât elementele din listă sunt ordonate automat în ordine cronologică.
Propriet atea .key a unei referințe push () conține cheia generată automat.
Exemplu utilizare :

Fig 4.16 Exemplu Firebase folosire metod ă push()

20 În aplicație am utiliza t metoda push() pentru crearea mesajelor la o anumită referință :

Fig 4.17 Utilizarea metodei push() în aplicație

Fiecare mesaj din baza de date are o cheie unică si conține textul propriu -zis, sursa,
destinația, dar si momentul când a fost creat :

Fig 4.18 Firebase – Baza de date

21 Evenimente pentru copii i unui nod:

Evenimentele pentru copii sunt declanșate ca răspuns la operațiile specifice care
se întâmplă cop iilor unui nod dintr -o operație, de exemplu un nou copil adăugat prin
metoda push () sau un copil care est e actualizat prin metoda update ().
 Child_added:
Acest eveniment este declanșat o dată pentru fiecare copil existent și
apoi din nou de fiecare dată când un copil nou este adăugat pe calea
specificată. Ascultătorului i se transmite un snapshot care conține datele
noului copil.
 Child_changed:
Acest eveniment este declanșat de fiecare dată când un nod copil este
modificat. Aceasta include orice modificare a descendenților nodului
copil. Snapshot -ul transmis către ascultătorul evenimentului conține
datele actualizate pentru copil.
 Child_removed:
Acest eveniment este declanșat când un copil imediat este eliminat.
Snapshot -ul trimis către blocul callback conține datele copilului
eliminat.
 Child_moved:
Evenimentele de tipul child_moved urmează întotdeauna evenimentul
child_changed care a provocat modificarea ordinii elementului (pe baza
metodei curente de ordonare ).
Exemple de utilizare:

Fig 4.19 Exemple Firebase utilizare evenimente child_added, child_ changed și
child_removed

22 Atașarea unui observator de valori la o listă de date va returna întreaga listă de
date ca un singur snapshot pe care îl putem parcurge pentru a accesa copiii individual .
Acest model poate fi util atunci când dorim să preluam toți copiii dintr -o listă într -o
singur ă operațiune, în loc să ascultăm evenimente suplimentare adăugate de copil.

Fig 4.20 Exemplu Firebase utilizare motedă once() și parcurgere a valorilor retunate
Utilizare în cod pentru găsirea tuturor utilizatorilor ș i cheilor acestora unice :

Fig 4.21 Exemplu parcurgere valori în aplicație

Sortarea și filtrarea datelor î n Firebase :

1. Metode utilizate pentru sortarea datelor:
 OrderByChild:
Ordo nează rezultatele după valoarea unei chei copil specificate .
 OrderByKey:
Pune î n ordine rezultatele folosind cheile copilului.
 OrderByValue:
Pune î n ordine rezultate le folosind valorile copilului.
Exemplu de utilizare:

Fig 4.22 Exemplu Firebase folosire metod ă orderByChild()

23
Fig 4.23 Exemplu Firebase folosire metodă orderByChild()

2. Metode utilizate pentru filtrarea datelor :
 LimitToFirst():
Setează numărul maxim de elemente pentru a fi returna te de la
începutul listei de rezultate ordonate.
 LimitToLast():
Setează num ărul maxim de elemente pentru a fi returna te de la s fârșit ul
listei de rezultate ordonate.
 StartAt() :
Returnează elemente mai mari sau egale cu cheia sau valoarea
specificată, în funcție de metoda de ordonare aleasă.
 EndAt():
Returneaz ă elemente mai mici sau egale cu cheia sau valoarea
specificată, în funcț ie de metoda de ordonare aleasă.
 EqualTo() :
Returneaz ă elemente egale cu cheia sau valoarea specificată, în funcție
de metoda de ordonare aleasă.

Autentificare folosind Firebase:

Pentru a putea folosi serviciul de autentificare trebuie să creăm o referi nță către
acesta:

Fig 4.24 Exemplu creare referință către serviciul de autentificare în aplicație

24
Fig 4.25 Interfață autentificare î n Firebas e

Firebase, pentr u partea de autentificare, oferă utilizatorilor diverse p osibilită ți:
 Autenficare normal ă (nume user + parola). În acest caz se poate opta pentru
recuperarea parolei prin serviciul de mail
 Autentificare folosind contul de Facebook
 Autentificare folosind contul de Google
 Autentificare folosind contul de Twitter
 Autentificare folosind contul de Git Hub
 Autentificare folosind numărul de telefon

Pentru acest proiect am ales să folosesc autentificarea obiș nuită, utilizatorul se
loghează cu adresa de mail și parola, iar în cazul în care acesta nu își mai amintește parola,
și-o poate schimba folosind ser viciul de mail.

25 5. Implementarea și funcționalitatea
aplicației YourGuide
Vor fi prezentate urmă toarele ecrane :
 Sign Up
 Sign In
 Recuperare paro lă
 Schimbare parolă
 Alegerea destinației de călătorie
 Completarea informațiilor de către utilizatorii care vor sa devină ghizi
 Chatbot
 Chat
 Căutare utilizatori
 Profil utilizator

5.1 Logare

Fig 5.1 Ecran Logare
Ecranul de înregistrare conține două câmpuri :
 Email
 Password

26 Butonul “ Sign In ” rămâne inactiv până când utilizato rul completează toate
câmpurile. Câmpu l de email, pentru a fi valid, trebuie să aibă “@” în conținut. În
momentul în care un utilizator acționează butonul de logare, acesta va fi redirecționat pe
pagina de Home.

Pentru redirectări se folosește pachetul react -router -dom. Router -ul include ma i
multe componente, dar cele trei pe care le -am utilizat cel mai des sunt <BrowserRouter>,
<Route> și <Link>. Primul, <Br owserRouter>, este de obicei un alias de "Router" și este
componenta părinte care este utilizată pentru a stoca toate componentele <Rou te>.
Compone ntele <Route> sunt cele care spun aplicației ce alte componente se afișează pe
baza traseului. Componentele <Link> reprezintă modul în care creăm link-uri către aceste
rute.

În exemplu de mai sus, avem rut ele pentru recuperarea parolei ș i pent ru
înregistrare.

Fig 5.2 Exemplu folosire Link

Pentru o mai bună gestiune am creat un fișier separat routes.js , unde definesc toate
rutele utilizate în aplicație.

Fig 5.3 Definire rute

Rutele și componentele pe care le accesează su nt definite in fiși erul App.js.

27
Fig 5.4 Exemplu utilizare <Route>

5.2 Înregistrare

Fig 5.5 Ecran înregistrare

Ecranul de înregistrare conține patru câmpuri :
 Username
 Email

28  Password
 Confirm Password

Butonul “Sign Up” rămâne inactiv până când utilizatorul completează toate
câmpurile. Fiecare input are tipul specificat, de exemplu, nu se poate introduce un string
pentru câmpul de email care să nu aibă “@” în conținut.
Înregistrarea în baza de date se face folosind serviciul de autentificare din Firebase.
Metoda “doCreat eUserWithEmailAndPassword” creează înregistrările în partea de
autentificare.

Fig 5.6 Firebase – autentificare

Metoda “doCreateUser” scrie înregistarea în baza de date creată de mine.

Fig 5.7 Firebase – Baza de date

Fig 5.8 Utilizare metode “ doCre ateUserWithEmailAndPassword” și “doCreateUser”

29 În momentul în care un utilizator acționează butonul de înregistrare, acesta va fi
redirecționat pe pagina de Home.

5.3 Recuperare parol ă

În cazul în care introducem un utilizator care nu se află in baza de dat e, aplicația
mă va atenționa.

Fig 5.9 Ecran schimbare parolă

Recuperarea parolei se face tot cu ajutorul serviciului de autentificare, mai exact
prin metoda “doPasswordReset”.

Fig 5.10 Utilizare metodă “doPasswordReset”

Prin acest serviciu vom prim i un mail pe adresa specificată. Email -ul respectiv
conține un link care ne permite schimbarea parolei.

30
Fig 5.11 Ecran schimbare parolă prin email
5.4 Schimbare parol ă

Fig 5.12 Ecran schimbare parolă
Recuperarea parolei se face tot cu ajutorul serviciulu i de autentificare, prin metoda
“doPasswordUpdate”.

Fig 5.13 Utilizare metodă “doPasswordUpdate”

31 5.5 Alegerea destinației

Fig 5.14 Ecran alegere destinație

Fig 5.15 Sugestii locație

În fișierul index.html am inclus următoarea cheie :

Fig 5.16 Adăugar e cheie API Google Maps

Pentru căutarea destinației am folosit pachetele react -google -maps -loader și react –
google -places -suggest.
Rezultatele căutarii sunt filtrare, astfel încât ne sunt afiș ate subdiviziuni, de
exemplu județe sau în Statele Unite, acest e niveluri administrative sunt state .
După ce se selectează destinația, butonul devine accesibil și ne trimite pe pagina Chatbot –
ului. Pentru ca destinația aleasă să fie reținută, ne vom folosi de proprietățile din React.

32 Prin props putem trimite valori de la părinte la copil. În acest fel, valoarea destinației este
trimisă către Chatbot.

Fig 5.17 Valoare trimisă prin props – copil

Fig 5.18 Valoare trimisă prin props – părinte

5.6 Completarea informațiilor de către ghizi

Fig 5.19 Completare info rmații ghid

33 Pentru ca un utilizator să devină ghid, acesta trebuie sa completeze informații
personale esențiale.
Câmpurile de completat sunt:
 Loca ția (unde locuiește)
 Vârsta
 Genul
 Ocupația
 Imagine cu profilul real
 Genuri de muzică preferate
 Limbi vorbite
 Hobby -uri
 Atracții turistice de care este interesat în general

În momentul în care toate datele sunt completate și butonul submit este acționat,
informațiile completate de fiecare ghid sunt înregistrare in baza de date.

Fig 5.20 Firebase – Baza de dat e

34

Pentru acest lucru, am folosit funcția update():

Fig 5.21 Utilizare funcție update() în aplicație

Aceste date pot fi în orice moment modificate de către ghid.

La accesarea paginii , informațiile completate vin din baza de date. Acest lucru este
posibil prin utilizarea uneia dintre funcțiile specifice React -ului “componentWillMount() ”.
Fiecare componentă are mai multe "metode de ci clu de viață" pe care le putem suprascrie
pentru a rula codul la anumite momente ale procesului. În cazul de față , funcția va fi
apelată atunci când componenta este încărcată și datele sunt aduse din baza de date.

Fig 5.22 Aducerea datelor din baza de date

35 Dintre toate informațiile pe care ghid-ul trebuie să le completeze, încărcarea unei imagini
de profil se face di ferit.

Firebase Storage este o soluție autonomă pentru încărcarea conținutului generat
de utilizatori, precum imaginile și videoclipurile de pe un dispozitiv iOS și Android,
precum și pe Web . Firebase Storage este proiectat special pentru scalabilitate, securitate și
reziliența rețelei .

 Scalabilitate : Fiecare fișier încărcat este susținut de Google Cloud Storage
 Securitate: Fișierele pot fi securizate pentru anumiți utilizatori sau seturi de
utilizatori , utilizând regulile de securitate a stocării.
 Rezil iența rețelei: Încărcările și descărcările sunt retrimise automat în cazul
conexiunilor de rețea necorespunzătoare, astfel încât să nu trebuiască să le
urmărim singuri.

Firebase Storage utilizează un sistem de fișiere pentru a structura datele. Fiecare fi șier este
accesat printr -o referință:

Fig 5.23 Referiță serviciul S torage – Firebase

Fig 5.24 Firebase – Storage

Odată ce avem o referință, putem încărca un fișier cu o singură metodă:

36
Fig 5.25 Încărcare fișier în Firebase – Storage

Observ ăm schimbările care se fac asupra state -ului cu ajutorul observatorului
“state_changed” si metodei “on”:

Fig 5.26 Folosirea metodei on() și a observatorului state_changed

În cazul în care se observă o schimbare, se modifică și câmpul “picture” din baza noastră
de date.

5.7 Chatbot
Chatbot -ul reprezintă următoarea etapă după alegerea destinației. Destinația pe care
utilizatorul o alege reprezintă, de fapt, primul criteriu de selecție. Ghidul care urmează să
fie ales pentru utilizator trebuie să p rovină d in regiunea destinație.

37
Fig 5.27 Ecran apariție ghid după parcugerea întrebărilor de către utilizator

Fig 5.28 Ecran Chatbot – completare întrebări

Pentru realizare a chatbot -ului am folosit librăria din React – React Simple Chatbot [8].
Librăria m -a ajutat în construirea chatbot -ului prin logica trimiterii mesajelor, dar și vizual.
Logica trimiterii mesajelor este următoarea :

38
Fig 5.29 Logica trimiterii mesajelor Chatbot -ului

Toate mesajele sunt puse într-un obiect steps. Trecerea de la un mesaj la altul se
face printr -un trigger. Acest trigger trebuie să fie, de fapt, id -ul următorului mesaj.
Librăria are diverse funcționalități, cum ar fi :

 Previous Value (recunoaște mesajul transmis anterior)
 Speech Recognition
 Options(utilizatorul poate să aleag ă opțiuni propuse de chatbot)
 Validator(pentru numere, de exemplu)
 Simple Form
 Custom Component

Dintre toate aceste funcționalități, în proiect am utilizat Custom Component. După
cum îi spune și numele, acestă funcționalitate îi dă posibilitatea dezvoltat orului să își
creeze propria componentă.
Pentru realizarea chatbot -ului am creat trei astfel de componente
 Aleg ere cu un singur răspuns
 Alegere multiplă
 Introducere câmp

39 Alegere a unui singur răspuns am utilizat -o pentru completarea câmpurilor
Occupation (Student, Employee, Freelancer) și Gende r (Female, Male, Both).

Fig 5.30 Alegere simplă

Alegerea multipl ă este folosită pentru câmpurile : Music (17 variante), Languages
(English, French, German), Hobbies (Music, Film, Sport, Art), Tourists Attractions (9
variante). Pentru realizarea acestei componente am folosit pachetul react -select, care imi
permite selectarea mai multor variante de răspuns.

Fig 5.31 Alegere multiplă

Componenta introducere câmp este utilizată pentru Vârstă.

Fig 5.32 Introducere câmp

40 În momentul în care utilizatorul completează toate input -urile si acționează butonul
Your Guide va apărea numele ghidului potrivit, în cazul în care există în baza de date o
persoană care să respecte criteriile minime (locație, cel puțin o limbă comu nă și genul în
cazul în care utilizatorul are o anumită preferință ).

Restul răspunsurilor contează pentru a crea un procentaj asociat fiecărui potențial
ghid. Acest procentaj este creat pe baza procentelor rezultate în urma chestionarului
prezentat mai s us. Procentajul se calculează astfel :

Fig 5.33 Calculare procentaj ghid

 nrAge este 1(diferen ța de vârstă între ghid și călător este mai mică sau egală cu 10
ani)
 nrAge este 0(diferen ța de vârstă între ghid și călător este mai mare de 10 ani)
 nrOccupati on este 1 (ghidul și călătorul au aceeași ocupație)
 nrOccupation este 0 (ghidul și călătorul nu au aceeași ocupație)
 nrAttraction, nrHobbies, nrMusic reprezintă numărul de atracții, hobby -uri,
respectiv tipuri de muzică pe care ghidul și călătorul le au în comun.

Ghidul potrivit al unui util izator este cel care respectă cele trei cerințe minime și al cărui
procentaj calculat mai sus este cel mai mare.
De exemplu :

Fig 5.34 Ecran Chatbot – alegere ghid

41 5.8 Chat
După selectarea ghidului propus, se pornește o conversație cu acesta.Primul m esaj
va fi default al ghidului.
Atunci când începe o conversație se creează automat un alt nod în baza de date –
messages.

Fig 5.35 Firebase – baza de date
Numele copiilor nodului messages sunt formate din “nume călător__n ume ghid”.

Fig 5.36 Firebase – Baza de date

Fiecare mesaj conține următoarele informații: cine este emițătorul, receptorul,
textul propriu -zis si timpul la care a fost transmis. Timpul este determinat tot cu ajutorul
serviciului Firebase : firebase.datab ase.ServerValue.TIMESTAP.
În cazul în care utilizatorul are aceeași destinație, parcurge încă o dată etapa de
completare a întrebărilor puse de Chatbot și pornește o altă conversație cu un alt ghid față
de cel curent, atunci conversația cu ghidul curent se va șterge din lista de conversații a
ambilor, inclusiv din baza de date.

42 Dacă din meniu se selectează opțiunea Chat, atunci utilizatorul vor fi direcționat pe
pagina de conversații. Utilizatorii din această listă sunt cei cu care user -ul curent are
deschi se conversații, indiferent dacă acestea sunt deschise de el sau de alte persoane
(utilizatorul curent este ghid).

Fig 5.37 Ecran listă conversații
Ecranul prezintă numele utilizatori lor, dar si imaginea de profil.

Fig 5.38 Ecran chat

43 Transmiterea mesaj elor se face în timp real, fără să necesite timp de așteptare.
Acestea sunt într -o primă fază introduse în baza de date, apoi imediat retrimise către
intefață.

5.9 Căutare utilizatori

Fig 5.39 Ecran căutare utilizatori

Căutarea utilizatorilor se reali zează după username -ul din baza de date.

Fig 5.40 Căutare în funcție de numele utilizatorilor

Se pot introduce în input atât litere mari, cât si litere mici, indiferent de poziția acestora în
cuvânt.

Fig 5.41 Căutare utilizator în funcție de litera tastată

5.10 Profil utilizator
Accesarea numelui căutat mă va duce pe o rută ce are ca și p arametru numele
utilizatorului.

Fig 5.42 Rută – parametru

44 Am realizat acest lucru î n codul de mai jos, utilizând instrumentele de mai sus : Link –
react -router -dom și pro ps – React.

Fig 5.43 Link – parametru

Fig 5.44 Rezultatul căutării
Acest ecran prezintă câteva informații despre utilizator, dar și pozele cu descrierile
asocia te pe care acesta le -a adăugat.
Infor mațiile despre utilizator sunt:
 Numele
 Ocupa ția
 Vârsta
 Locația
 Email -ul

45 Pentru a afișa pozele cu descrierile am construit un array, fiecare iterație a acestui
array având două proprietăți: image și description.

Fig 5.45 Creare array
Pentru a itera prin acest array creat am folosit funcția map() :

Fig 5.46 Utilizare funcție map()

Spre deosebire de ecranul anterior, profilul utilizatorului logat con ține un buton de
uploadare poză, adăugare descriere și stergere imagine alături de descriere.

Fig 5.47 Ecran profil utilizator logat

46 Imaginile se adau gă în câmpul images, care este un nod copil al user -ului.

Fig 5.48 Firebase – Baza de date

47 6. Concluzii și dezvoltări ulterioare
6.1 Concluzii

Aplicația YourGuide este un instrument care vine în ajutorul călătorilor, ce le oferă
un suport prin alegerea unei persoane compatibile. În modul acesta, călătorii primesc
sfaturi, opinii, ce îi pot ajuta să își organizeze mai bine vacanța și să profite de orice
informație în plus oferită, evitând astfel neplăcerile care pot apărea în orice călătorie.
Ca orice instrument nou apărut, trebuie încercat pentru a ne da seama dacă are
succes sau nu. Aplicația, în stadiul de față poate fi folosită, datorită acestui lucru este și
urcată pe server, iar lumea poate a vea acces la ea. Există însă multe îmbunătățiri și adăugiri
pe care le voi trata în subcapitolul următor.
Pentru realizarea acestei aplicații am folosit mai diferite tehnologii web, majoritatea
fiind în totalitate noi pentru mine, atât Firebase, cât și React. Am ales s ă folosesc serviciul
Firebase datorită ușurinței cu care se face configurarea și legatura cu clientul.

6.2 Dezvoltări ulterioare

Aplicația necesită multe îmbunatăți viito are:

 Serviciul de notific ări pentru chat, în momentul în care u tilizatorul nu se
află pe browser sau pe pagina aplicației , acesta să poată fi informat dacă
primește noi mesaje. Firebase ne ajută inclusiv aici, prin serciviul Cloud
Messaging.

 Chat -ul să aibă inclusă opțiunea de a transmite imagini, utilizatorul să poată
atașa documente sau să poată da sha re locației.

 Utilizatorul să î și poată modifica comentariile.

 Utilizatorul să poată grupa pozele, comentariile în funcție de excursie .

 În momentul în care numărul utilizatorilor va crește , căutarea locației să fie
una mai restrânsă, adică să nu rămână la nivel de județ, ci să se extindă la
nivel de oraș / localitate.

 Utilizatorul, la finalul experienței cu ghidul ales, să poată da recenzie pentru
serviciile oferite, astfel încât conținutul profilului ghidului să conțină o
medie a recenziilor primite. În acest fel, se încurajează implicarea din partea
ghizilor, dar și o informație relevantă pentru viitori utilizatori cu care ghidul
va intra în contact.

 Trecerea la Progressive Web Apps, cu ajutorul acestei tehnologii aplicația
va fi disponibilă pe orice d ispozitiv. Deși aplicația este una responsive,

48 PWA aduce în plus și pictograma pe ecranul dispozitivului. Accesarea
acesteia ne duce pe browser.

 Includerea unor avantaje pe care ghizii le pot avea în cazul în care , după un
anumit număr de clien ți, ghidul obține un scor mare.

49 7. Bibliografie
[1] Typescript, React și Redux. Să alegem cele mai bune tool -uri pentru aplicațiile web –
Iunie 2018
https://www.todaysoftmag.ro/article/2117/typescript -react -si-redux -sa-alegem -cele-mai-
bune -tooluri -pentru -aplicatiile -web

[2] Firebase – Aprilie 2018
https://firebase.google.com/docs

[3] Înțelegerea capabilităților tehnologiilor de comunicare web de astăzi – Iunie 2018
https://medium.com/platform -engineer/web -api-design -35df8167460
[4] Real Time Streaming with WebSocket – Iunie 2018
https://happycodingbox.blogspot.com/2017/01/real -time-streaming -with-websocket.html

[5] Basic intro to React Router v4 – Iunie 2018
https://medium.com/@thejasonfile/basic -intro-to-react-router -v4-a08ae1ba5c42

[6] Google Maps Platform – Aprilie 2018
https://developers.google.com/maps/documentation/javascript/get -api-key

[7] 5 tips for Firebase Storage – Iunie 2018
https://firebase.googleblog.com/2016/07/5 -tips-for-firebase -storage.html

[8] React Simple Chatbot – Mai 2018
https://lucasbassetti.com.br/react -simple -chatbot/

[9] Bootstrap – Aprilie 2018
https://getbootstr ap.com/docs/4.0/components/dropdowns/

50 [10] Font Awesome – Mai 2018
https://www.w3schools.com/icons/fontawesome_icons_intro.asp

[11] Google Icons – Mai 2018
https://www.w3schools.com/icons/google_icons_intro.asp

[12] Stilizare react -select – Aprilie 2018
https://npmcdn.com/react -select@1.0.0 -beta13/dist/react -select.css

[13] Node.js NPM – Aprilie 2018
https://www.w3schools.com/nodejs/nodejs_npm.asp

[14] Create React App – Aprilie 2018
https://reactjs.org/docs/add -react -to-a-new-app.html

[15] What are NPM, Yarn, Babel, and Webpack; and how to properly use them? – Iunie 2018
https://medium.com/front -end-hacking/what -are-npm-yarn-babel -and-webpack -and-how-to-
properly -use-them -d835a758f987

[16] Flex box – Mai 2018
https://css -tricks.com/snippets/css/a -guide -to-flexbox/

[17] ReactJS – JSX – Aprilie 2018
https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm

[18] All you need is Reac t and Firebase – Aprilie 2018
https://www.codementor.io/yurio/all -you-need-is-react-firebase -4v7g9p4kf

[19] Intro into React and Firebase – Aprilie 2018
https://css -tricks.com/intro -firebase -react/

[20] User Authentication – Aprilie 2018
https://css -tricks.com/firebase -react-part-2-user-authentication/

51 [21] A complete Firebase in React Authentication Tutorial – Aprilie 2018
https://www.robinwieruch.de/complete -firebase -authentication -react-tutorial/