Lect. Dr. Univ. PADURARU CIPRIAN MACOVEI CIPRIAN [616776]

1

UNIVERSITATEA DIN BUCURE ȘTI
FACULTATEA DE MATEMATICĂ ȘI INFORMATICĂ
SPECIALIZAREA Informatică

LUCRARE DE LICENȚĂ

COORDONATOR ȘTIINȚIFIC: ABSOLVENT: [anonimizat]. PADURARU CIPRIAN MACOVEI CIPRIAN

BUCUREȘTI
2019

2

3

UNIVERSITATEA DIN BUCURE ȘTI
FACULTATEA DE MATEMATICĂ ȘI INFORMATICĂ
SPECIALIZAREA Informatică

SISTEME DE RECOMANDARE
ONLINE STORAGE

COORDONATOR ȘTIINȚIFIC: ABSOLVENT: [anonimizat]. P ĂDURARU CIPRIAN MACOVEI CIPRIAN

BUCUREȘTI
2019

4

5

DECLARAȚIE DE AUTENT ICITATE

Subsemnatul/a………………………………………………………………………….,absol
vent al studiilor de licență/master, promoția .. …. în
specializarea……………………………….., FACULTATEA DE
MAT EMATICĂ ȘI INFORMATICĂ SPECIALIZAREA Informatică, în
legătură cu elaborarea lucrării de licență cu titlul
………………………………………………………….. …………………………………………..
………. …..
……………. …………………………………………………………………………………………
……………….coordonator……………………………………………………………………..
……………,prin p rezenta declar pe prop ria răspundere că:
a. Lucrarea a fost elaborată personal și îmi aparține în întregime;
b. Nu au fost folosite alte surse decât cele menționate în
Bibliografie;
c. Nu au fost preluate texte, date sau elemente de grafică din alte
lucrări sau din alte surse fără a fi citate și fără a fi pr ecizată
sursa prelucrării, inclusiv în cazul în care sursa o reprezintă alte
lucrări ale mele;
d. Lucrarea nu a mai fost folosită în alte contexte de examen sau
concurs.

Data, Semnătura

6

7 CUPRINS

INTRODUCERE ………………………….. ………………………….. ………………………….. …………….. 9
CAPITOLUL 1. ………………………….. ………………………….. ………………………….. ……………. 10
1.1. Motive pentru aleger ea temei …………………………………………………………………….. 10
1.2. Prezentarea conceptul ui aplicației ………………………………………………………………. 11
1.3. Descrierea componentelor aplicației ………………………………………………………. …..11
1.4. Utilizarea aplicației …………………………………………………………………………………. .15

CAPITOLUL2. DESCRIEREA CONTEXTULUI APLICAȚIEI ………………………….. .. 13
2.1. Scurt istoric al aplicațiilor web ………………………….. ………………………….. …………….. 14
2.2. Componente generale ale unei arhitecturi pentru aplicațiile web …………………….. 15
2.3. Arhitectura ………………………….. ………………………….. ………………………….. …………….. 15
2.4. Concluzii ………………………….. ………………………….. ………………………….. ……………….. 15

CAPITOLUL 3. DEZVOLTAREA DE APLI CAȚII WEB PE DIFERITE
FRAM EWORK -URI (3+4) ………………………….. ………………………….. …………………………. 22
3.1. Limitările care intervin folosind diferite frameworku ri ………………………….. ……………… 25
3.2. Caracteristicile frameworkului Angular ………………………….. ………………………….. …….. 25

CAPITOLUL 4. DIFERITE MET ODE DE A STOCA INFORMAȚIILE …………………. 13
4.1. Scurt istoric al bazelor de date ………………………….. ………………………….. ……………… 14
4.2. MongoDb și conectarea la baza de date …………………… Error! Bookmark not defined.
4.3. Co ncluzii ………………………….. ………………………….. ………………………….. ……………….. 15

CAPITOLUL 5. SERVERE ȘI DIFERITE METODE DE GESTIUNE A
BAZELOR DE D ATE ………………………….. ………………………….. ………………………….. ……. 10
5.1. Scurt istoric ………………………… …………………………………………………………………… 10
5.2. NodeJS și frame wok-urile acestuia …………. …………………………………………………. 11
5.3. Crearea unui server ……….. ……………………… …………. ………… ………….. ………………. 11
5.4. Comunicarea dintre un server și partea de Front End ……………… ……………….. ……15
5.5. Concluzii…… ………………………….. ………………………….. ………………………….. ………….. 14

8
CAPITOLUL 6. RECOMMENDATION SYSTEM ………………………….. …………………… 22
6.1. Scurt istoric ………………………….. ………………………….. ………………………….. ……………… 25
6.2. Python Sklearn ………………………….. ………………………….. .. Error! Bookmark not defined.
6.3. Descriere aplicaț ie Recommender System ………………………….. ………………………… 14
6.4. Concluzii ………………………….. ………………………….. ……… Error! Bookmark not defined.

CAPITOLUL 7. TESTARE AUTOMATĂ ………………………….. ………………………….. …… 10
7.1. Testarea aplicațiilor ………………………. …………………………………………………………. 10
7.2. Testare Fro nt-end Karma, Jas mine.. ……………………………………………………………. 11
7.3. Testare funcțională ………………………….. ………………………………….. …………….. ……11
7.4. Testarea sistemului de recomandari………………………….. ……………………………….. ……15

CONCLUZII ………………………….. ………………………….. ……. Error! Bookmark not defined.

BIBLIOGRAFIE ………………………….. ………………………….. ………………………….. …………… 60

9

INTRODUCERE

“Munca ne scute ște de trei rele: plictiseală , viciul și nevoia ”
Voltaire
Tema principal ă a acestei lucr ări este un system de recomandare
făcut in python , pentru un website care are o parte de front -end construit ă în
AnuglarJs 5 , o baz ă de date in mysql și cu un backend f ăcut in Nodejs.
Mai int âi voi spune c âteva cuvin te despre ce reprezint ă un system
recommendation și abordarea pe care acest proiect o va avea pentru aceast ă temă.
În zilele de azi , sistemele de recomandare sunt create pen tru a personaliza experien ța
ta pe internet respectiv site -urile pe care utilizatorii le aceseaz ă, spun âdu-le acestora
ce sa cumpere, ce sa m ănânce, sau chiar cu cine ar trebui s ă se împriet enească .
Oameni i tind să aibă aceleași gusturi cu person ele apropi ate lor. Sistemele de
recomandare înglobează toate aceste modele ca s ă prezic ă ce lucru îti place sau ce
obiect ai vrea s ă cumperi. E -commerce, social media, video și știrile de pe internet au
abordat deja aceast lucru si au construit propriile lor sisteme de recomandare care
sânt concentrate s ă ajute clien ții să aleag ă mai eficient produsele, c eea ce reprezintă o
strategie din care castig ă ambele par ți.

10 CAPITOLUL 1.
1.1. Motive pentru alegerea temei
Motivul pentru care am ales aceasta tema a fost unul pur stiintific, fiind curios cum as
putea implementa inteligenta artificiala pe partea de web application.
Am avut anumite probleme pentru ca nu am dispus initial de o baza de date populata
de useri reali care sa revizuiesc produsele mele, asa ca am c erut ajutorul amazon.com
pentru a face ro st de acestea.
Avand aceasta baza de date am putu sa produc produsul asteptat.
Pentru mine a fost o provocare aceasta aplicatie si cred ca pana la urma am dus treaba
la bun sfarsit.
Frame -work -ul ales de mine a fost Angular pentru ca are o structura exempl ara,
arhitectura primitoare si este usor de folosit.
MongoDb pentru partea de baze de date pentru ca foloseste obiecte de tip json, iar
fisierele primite de la amazon au fost de acet tip. Pentru aplicatii mai mici c e nu
necesita interogari foarte complexe este perfect.
Partea de server am folosit Nodejs stiind deja javascript mi a fost usor, mai ales
folosind framework -ul express care m -a ajutat simplificandu -mi munca cu mult.
Pentru partea de api -uri am folosit Dial og.flow un produs google pentru a descope ri
intentul clientului care isi spune problemele prin chat, vorbind practic cu un robot, am
vrut sa aprofundez si acest subiect, dar am luat o abordare simpla, functionalitatile
nefiind foarte importante.
Sistemul d e recomandare l -am constituit in Python p entru ca acest limbaj de
programare are multe librari si module special concepute pentru partea de neural
network.
Serverul sau end -point -ul pe care ruleaza acest sistem de recomandare l -am facut de
asemenea in pyth on folosid flask. A fost usor deoarece im portarea cat si folosirea
funtiilor importante s -a realizat in doua linii de cod.

11 1.2. Prezentarea conceptului aplicației .

Conceputl aplicatiei este de a reda clientului posibilitatea de inregistrare, logar e,
vizualizare produse, cumparare, evaluare, comentare la adresa calitatii si a altor
criterii, cautarea anumitor produse cat si recomandarea acestora.
Pentru partea de contact mai este un serviciu clienti in care clientul poate vorbi cu un
chatbot care il asigura ca problema lui va fi luata in calcul.
Pe pagina principala avem principalele categorii de produse cu un top trei cele mai
revizuite dintre ele.

1.3. Descrierea componentelor aplicației

Aplicatia web are 33 de componente care sunt impartite pe toate rutele aplicatiei.
Voi crea o diagrama care sa pozitioneze aceste componente pe pagina web asa cum se
aratajeaza acestea in mod normal utilizand ap licatia.
Aceasta diagrama va ilustra doar componentele cele mai importante ale aplicatiei
deoarece pintre cel e 33 de componente se afla si servicii care sunt doar in anumite
cazuri folosite.
Voi prezenta o poza pentru cazul in care user -ul este logat si a cumpara un produs
selectat.
Aceasta pagina va avea cea mai multa functionalitate, prin urmare vor intervenii cele
mai multe componente in asamblarea ei.

Poza va fi preluata de pe ruta /itemDetails/B000089GN3

12
Acum voi ilustra o diagrama uml in care componentele din imagine vor lua imaginea
unui arbore, cu legaturile de rigoare dintre acestea

13 1.4. Utilizarea aplicației
Aplicatia are patru componente care trebuie rulate simultat pentru a avea parte da
toata functionalitatea acesteia.
Aplicat ia va rula pe motorul de cautare Google Chrome si va avea nevoie de anumite
instructiuni pe pornire.
Voi descrie toate componentele ce intra in alcatuirea acestei aplicatii si anume:

• Partea de Front -end va porni cu ajutorul comenzi ng server -side
• Partea d e Back -end va porni cu ajutorul comenzi nodemon server.js
• Partea de api va porni pe un serve r nou cu comanda nodemon index.js
• Partea de end point in flask va porni cu comanda si aici vom avea doua:
1. export FLASK_APP=server.py
2. flask run

Aceste comenzi trebu ie scrie in linia de comanda a terminalului in cadrul fiecarei parti
in parte.
Dupa ce am urmat acesti pasi se va deschide un server local cu portul 4200 unde vom
putea interactiona cu aplicatia

14 CAPITOLUL2. DESCRIEREA CONTEXTULUI APLICAȚIEI

2.1. Scurt istoric al aplicațiilor web
Prin web design se intelege crearea de site-uri web, de la momentul conceperii
structurarii si interfetelor grafice pana la introducerea propriuzisa a datelor care
alcatuiesc intr -un final continutul site -ului: imagini, elemente etc.
Primul designer web a fost Tim Berners Lee, inventato rul www -ului, care in anul
1991 a publicat primul site din istorie.
La inceput site -urile web aveau o complexitate mult mai scazuca ca acum, ele fiind
realizate in mare parte in HTML, limbaj care nu este atat de puternic, permitand doar
o serie limitata de formatari, precum inserarea de linkuri pentru a naviga de pe o
pagina pe alta, iar designul web fiind mai mult un soi de programare web.
In present exista o preocupare ridicata pentru aspectul gafic al site -urilor, devenite
puternice intrumente de comerci alizare, publicitate iar acest lucru justifica denumirea
de web design.
Tehnologiile utilizate in prezent s -au diversificat foarte mult, in prezent fiind din
ce in ce mai complexe, reamintim aici cateva limbaje: python cu frameworkul de web
Django , php , javascript cu multitudinea de frameworkuri cele mai importante fiind
(AngularJs, ReactJs , VueJs).
Companiile care au ca activitate principala productia de site -uri au angajati
specializati pentru fiecare etapa din crearea si dezvoltarea unui site, de la stadiul de
concept grafic la programare si editare de continut pentru motoarele de cautare adica
SEO (search engine optimization).
Site-urile din prezent sunt din ce in ce mai mult axate pe dinamism si animatie
interactiva, aceste necesitati fiind indeplinite de cunoscutul Adobe Flash, precum si
alte programe aparute dupa acesta, care pot genera diferite fisiere animate in diferite
formate care pot fi usor urcate p e site.
Site-urile sunt realizate si structurate astfel incat fiecare persoana fara cunostinta in
domeniu sa poate sa le utilizeze cu usurinta , ele fiind afisate intr -un browser. Web
designerii lucreaza in diferite limbaje din care apoi se genereaza intr -un limbaj
specific al internetului HTML(HyperText Markup Language) sa u direct in HTML.

15 Daca nu ar fi existat browserele specializate care sa stie sa interpreteze partea
de script atunci site -urile ar fi niste blocuri de text fara imagini, fara pr ea multe
puterea de interactiune din partea clientului.
In principal limbajul HTML indica locul unde sa se afiseze eventualele elemente .
2.3. Componente generale ale unei arhitecturi pentru aplicațiile web

Arhitectura Web standard a fost proiectat a astfel incat un calculator client poate
interactiona cu un calculator server printr -o conectare printr -o retea TCP/IP .
Browser -ul si serverul comunica utilizand protocolu l Hypertext Transport
Protocol (HTTP). TCP/IP manevreaza detaliile de transport, asi gurandu -se ca
pachetele ajung la destinatie corect. HTTP structureaza comunicatia legata de fisierele
ce se primesc si cum se interpreteaza ele. Aceasta permite software -ului Web sa fie
focalizat asupra a ceea ce face mai bine: accesarea si afisarea contin utului. Ca
majoritatea proiectelor client/server, Web -ul utilizeaza o metoda cerere -raspuns, ceea
ce inseamna ca serverul asteapta si asculta cererile clientului inainte de a raspunde la
ele.

16 Browser -ul Web cere o anumita pagina web (URL – Uniform Resource Locator)
de la server. Nu conteaza daca acel URL a fost introdus de utilizator, sau a fost asociat
cu un hiperlink, un bookmark, sau cu un buton al browser -ului numit Home.
Important este ca serverul de Web raspunde la cereri, de obicei trimis e de un browser
web sub controlul utilizatorului.
Software -ul serverului Web este instalat pe un calculator gazda potrivit. In
functie de volumul cererilor pe car e trebuie sa le manipuleze serverul se alege
sistemul de operare si platforma harware pentru server. Odata instalate si configurate,
majoritatea serverelor web doar asteapta si asculta daca exista cereri de la browser -ele
web.
O data receptionata c ererea, serverul intra in actiune. Serverul localizeaza URL –
ul cerut si il copiaza pe conexiunea retea, unde TCP/IP il transporta la browser. Odata
ce browser -ul primeste fisierul cerut (pagina web) de la server, browser -ul
interpretea za HTML -ul (si alte c oduri incluse) si afiseaza fisierul (pagina web) corect
(cu maximum capacitatilor sal e) pe calculatorul client.
In general, web -ul a fost descris ca si cross -platforma dinamica, sistem
informatic hipermedia distribuit ce ruleaz a pe Internet. De fap t Web -ul este prima
generatie a unei noi clase de sisteme distribuite ce continua sa evolueze rapid. Aceste
sisteme au marea capacitate sa integreze sistemele informationale si bazele de date
deja construite cu cele ce urmeaza sa fie c onstruite.
Web-ul este usor de utilizat, iar HTML -ul este usor de scris. Totusi, Web -ul ca si
platforma de dezvoltare sistem, este plin de provocari; aceasta intrucat dezvoltarea
sistemelor presupune adesea sarcina dificila de integrare a oamenilo r, a datelor, a
proce selor, a retelelor cu tehnologii potrivite in vederea rezolvarii problemelor si
crear ii oportunitatilor. Dezvoltarea efectiva a aplicatiilor Web este creativa si implica
o multime alti de factori pe linga cei legati de tehnologie.
Utilizarea Web -ului ca mediu de dezvoltare este relativ recenta ;
datorita mediului de dezvoltare, o aplicatie Web este in general formata din mai multe
parti si sa foloseasca multe tehnologii. Cadrul de lucru pentru dezvoltarea Web
constituie un exem plu de combinatie fer icita intre o multime de tehnologii, fiecare
limitata in domeniul sau de actiune. In ciuda acestor limitari, combinatia acestor
tehnologii in aplicatii furnizeaza o modalitate extrem de eficienta pentru dezvoltarea
de solutii pentru In ternet si intranet.

17 2.2. Arhitectura
Arhitectura acestei aplicatii web este impartita in patru mari catego rii si anume:
• Partea de server si api-urile aferente
• System Recommendati on
• Baza de date
• Parte de Front -end
Serverul si api -urile aferente
Pentru aceasta aplicatie, am preferat sa utilizez NodeJs cu frameworkul express pentru
a usura codul si pentru a avea o experienta mai placuta.
NodeJs es te un limbaj de programare asyncron bazat pe limbajul de programare
JavaScript. El este conceput pentru a constui aplicatii scalabile pentru partea de
retele/servere.
Acest limbaj de programare este asemanator lui pyhton sau ruby, doar ca nodejs duce
parte a de event model mai departe si previne singur ciclarea e venimentelor ca parte de
runtime .
Acest server de node mai are legaturi cu un api , pentru un chatbot care este atasat
site-ului sau aplicatiei web. Numele acestui api este DialogFlow si este creat de
google.
Acest api le permite user -ilor un nou fel de a interactiona cu produsele expuse prin
intermediul aceste aplicatii. Acest produs este bazat pe interactiune pe cale orala sau
prin text a clientului cu eventualul bot.
DialogFlow a fost conectat pe server prin cadrul unui webhook si primeste requesturi
de la useri prin intermediul aplicatiei web, acesta la randul lui trimitand responsuri
inapoi la aplicatie iar in final mesajul va fi afisat pe partea de front -end u nde clientul
va fi intampinat de un raspuns promt si precis.
Acest api este bazat pe intent -uri si are o masinarie de invatare pe server, fiecare fraza
fiind analizata si interpretata. In functie de complexitatea botului creat, el poate
sustine o discutie cu un eventual client creandui impr esia de o adevarata conversatie.

System Recommendati on
Acest system de recomandare este construit in python3 cu ajutorul librariei ‘sklear’ si
este folosit cu ajutorul unui end -point facut in flask, la care ulterior Fron t-end-ul face
requesturi prin care cere anumite informatii legate de un anumit produs.

18 Voi p rezenta ulterior o schema care sa clarifice mai mult situatia:

Voi prezenta pun pe scurt libraria sklearn, iar ulterior voi revenii cu mai multe detalii
in capitolul 6 unde voi prezenta in d etalii algoritmul si modul in care acest sistem de
recomandare functioneaza.
In prezenta lucrare am folosit ca algoritm de clasificare ‘sklearn.neighbors’ care
suplimenteaza functionalitate supervizata si nesupervizata pe ntru metoda neighbors de
invatare.
Metoda neighbor de invatare nesupervizata se poate intalni mai ales pentru gruparile
spectrale.
Cea supervizata prezinta doua ramificatii si anume : metoda de clasificare cu etichete
discrete si metoda regresiei pentru da te cu etichete continue.
In ciuda f aptului ca pare simpla , metoda sklearn.neighbors a facut fata cu succes
numarului mare de clasificari si problemelor de regresie, incluzand scanarea literelor
scrise de mana si a imaginilor din satelit, fiind o metodata fara parametri, fiind adesea
cu suc ces folosita in situatii in care este dificila clas ificarea, aceasta fiind adesea
neregulata.
Pentru NearestNei ghbors implementeaza metoda nesupervizata a celui mai apropiat
vecin. Actioneaza ca o interfata uniforma cu trei algoritmi diferiti si anume:
• BallTree
• KDTree
• Brute Force
Aceasta alegere este controlata prin atributul ‘al gorithm’ care poate avea urmatoarel e
valor : ['auto', 'ball_tree', 'kd_tree', 'brute']
Cand valoarea algoritmului este auto, atunci acesta tinde sa aleaga cea mai buna
metoda pentru valorile de antrenare.

19 Baza de date a fost creata in limbajul mysql care e ste un sistem de gesiune a bazalor
de date si de relationare, produs de compania suedeza MySql. Este unul din cele mai
populare SGBD -uri open -source la ora actuala.
Acest limbaj a fost creat in c++ si c. Pa rserul SQL a fost scris in yaac.
Are si parte de s erver si anume MySql server care co ntine librarii propri.
Aceasta are si o parte de vizualizare a bazei de date cu toate tabele aferente, unde
proprietarul poate interactiona direct cu aceasta numita MySql workbench.
Aplicatia are la baza un numar de cinci tabela si anume:
• categorySubtype
• items
• itemsoferte
• raiting
• users
In subcapitolul de concluzii voi reveni cu o tabela uml in care voi explica relatiile
dintre aceste tabele.

Partea de Front -end
Aceasta par te, fiind si cea mai generoasa, exercita posibilit atea de a vizualiza si
interactiona cu toate produsele si atributele/optiunipe pe care aceasta aplicatie le
ofera.
Pe scurt aplicatia este realizata in AngularJs 5 un framework popular de JavaScript,
concep ut de Google.
Acest framework este structurat pent ru aplicatii web dinamice si permit e utilizarea
HTML -ului ca o parte din componenta creata. AngularJs creaza o legatura cu
informatia si elimina injectia dependentelor usurand astfel metoda de codare si
elimina cu aceasta ocazie si mult din textul codului.
AngularJs este bazat pe componete si le randeaza automat pe site fiind a single page
aplication. Componentele sunt formate din patru fisiere putand fi generate automat cu
ajutorul modulului angular -cli ins talat prin node package module cu comanda „ng g c
numecomponenta”.
Aceste folder care alcatuiesc corpul componente este formata din patru mari fisiere si
care au fiecare in parte partea lui in conceptia designul aranjarea functionalitatea si
testarea compo netei:

20 • componenta.ts
• componenta.html
• componenta.cs s
• componenta.spec.ts
Componet a.ts are ca rol partea de functionalitate a componentei respective ea fiind
gestionata prin intermediul limbajului typescript care este ulterior compilat si
transformat in cod de javascrip. Limbajul typescript este dupa p arerea mea mult mai
puternic decat javascript avand avantaje esentiale : crearea de clase, interfete, multe
module si o parte in care se pot predefinii tipul de date alea variabilelor dupa cum ii
recomanda si numele.
Componenta.html are ca rol partea de pozitionare a elementelor cat si createa de
legaturi cu componeta.ts. Index.html este componenta parinte care randeaza pe rand
toate partile de html aferente componentelor in parte.
Componenta.css are ca rol stilizarea partii de html a acesteia, a ceasta partea are un
rol esential i n vizualizarea componetelor ea fiind singura posibilitatea de silizare a
elementelor. Aceasta componentea este legata strict de partea de html a acesteia
neavand posibilitati de aplicare globala pentru toate componentele.
Pentru a putea stiliza global avea m o componenta globala si anume
app.component.css unde putem accesa toate elementele din componentele aplicatiei.
Componenta.spec.ts are rolul de a te sta acestea in modul unit testing pentru
fisierul sursa. Acestea ruleaza in Jasmine javascript test framework prin intermediul
lui Karma care ruleaza sarcinile cand testerul introduce in linia de comanda „ng test”.

2.4. Concluzii
In concluzii voi prezenta diagrama uml a aplicatiei elaborand si explicand pe larg
legaturile dintre componentele esentiale alea aplicatiei.
Prima data voi face referinta la limbajele utilizate facand referinta la alternativele
pe care un programator (web designer) le poate avea :
Pentru partea de backend/server -side, am ales nodejs pentru ca foloseste limbajul
javascrip, fiind un limbaj usor de manevrat care a avut o ascensiune in ultimii ani
fiind clasat pe pe trei intr -un clasa ment facut de github sub python si java.
Alegerea mea pentru partea de stocare de date si manipular e a fost mysql care are
o interfata primitoare desi mongo are o mai usoara structura, nu foarte complexa

21 bazate pe colectii care foloseste un limbaj no Sql, am vrut sa raman la vechiul sql
pentru ca foarte multe baza de date sunt gestionate si au nevoie in continuare de
support pe acest limbaj in detrimentul lui mongoDb care este un produs recent scos pe
piata.
Pentru partea de front -end, am ra mas tot la promitatorul javascript, alegand
frameworkul AngularJs. Opinii pro si contra au existat tot timpul, multi din bransa
web-designe -rilor au trecut rand pe rand la frameworkul Reactjs dezvoltat de
Facebook, di n cauza evolutiei si deprecierilor pe rmanente pe care AngularJs le a avut.
El avand actual 6 versiuni, si o schimbare radicala de arhitectura de la angularjs la
angularjs 2.
In ultimult timp React a castigat teren si pe partea de joburi, oferind mu lte
oportunitati proaspetilor candida ti.In schimb AngularJs ramane in top si promite in
continuare, iar cei de la google pun din ce in ce mai mult accent pe aceasta parte de
dezvoltare. Cel mai proaspat framework VueJs vine cu o noua abordare, o arhitectu ra
interesanta, fiind usor de manevra t, fiind recomandat pentru aplicatii mici deoarece
arhitectura acestuia nu permite descompunerea in fisie re a celor 4 elemente esentiale,
acestea fiind toate adunate in componeta acestula „numecomponeta.vue” avand o
parte de template unde este randat html -ul o parte de script unde este introdusa partea
de functionalitate si la sfarsit partea de stilizare in c are este introdus codul de css.In
final voi prezenta arhitectura aplicatiei, baza de date, partea de web cat si ap iurile care
fac legatura cu acesta pr in intermediul serverului.
Ca ultim paragraf al acestui subcapitol voi prezenta o diagrama uml cu arhitectura
aplicatie:

22 CAPITOLUL 3. DEZVOLTAREA DE APLICAȚII WEB PE
DIFERITE FRAMEWORK -URI (3+4)

3.1. Limitările care intervin folosind diferite frameworkuri

Vom prezenta top 3 cele mai folosite framework -uri/librari de javascript și modul
în care aceste interactioneaza cu brow serele moderne.
Acestea sunt VueJs,Angular și ReactJs, fiecare din acestea având plusuri și
minusuri .
În următorul paragraf voi prezenta un grafic cu cererea de angajare de pe piața pe
aceste framework -uri:

[1]

________ ______________
[1] https://medium.com/@TechMagic/reactjs -vs-angular5 -vs-vue-js-what -to-choose -in-2018 -b91e028fa91d

23
În tabelul următor voi prez enta în parte ca racter isticile fiecarul framework și timpii la
care sunt aceștia supusi .

[1]

______________________
1 https://medium.com/@TechMagic/reactjs -vs-angular5 -vs-vue-js-what -to-choose -in-2018 -b91e028fa91d

24
În diagrama de jos voi prezenta segventa de login cu nagivarea pe pagina de
‘/itemDetail/:id’ unde vor aparea si recomandarile pentr u alte trei produse:

Din cele prezentate tragem concluzia ca VueJs ocupa un loc fruntas, urmat de angular
și react.

25 3.2. Caracteris ticile frameworkului Angu lar
Super eroul MVW Angular 5 a venit pe piața în luna noiebrie anul 2 017, deși au fost
ceva intarzieri pana să fie scos p e piața, a avut un succes așteptat.
Motoul pe care l a avut Angular 5 este următorul : rapid,usor și simplu d e utilizat.
Ca noutate în Angular 5 echipa google a adaugat Material Design pentru a usura
procesul de design al aplicatiilor web.

Ce este nou în Angular 5:

• Aplicații web simple și progresive
• Material Design
• Construcție optimiza ta
• Angular Universal Api și DOM
• Au imbunatatit Com pilatorul și TypeScript
• Cli v1.5
• Router
• Numere, data și valuta legate de pipes

26 CAPITOLUL 4. DEFERITE METDE DE A STOCA INFORMAȚIILE

4.1. Scurt isto ric al bazelor de date

[2] “Bazele de date sau pe scurt BD, reprezintă o metoda de stocare a datelor și
informațiilor pe un suport extern, cu posibilitatea ușoară de extindere și regasire
rapidă a acestora.
De obicei o baza de date este memorata în unul sau mai multe fisiere.
Bazale de date sunt ma nipulate cu ajutorul sistemelor de gestiune a bazelor de date,
un exemplu ar fi: mysql, postgresql, mongo etc.
Cel mai răspândit tip de baze de date este cel relational, în care datele sunt memorate
în tabele. Pe lângă tabele, o baza de date relationala m ai poate conține: indecsi,
proceduri de stocare, declansatori, utilizatori și grupuri de utilizatori, tipuri de date,
mecanisme de securitate și gestiune a tranzactiilor etc.
Cele mai noi sisteme de gestiune de date au modelul ierarhic, orientate pe obiect e, și
mai nou, modelul XML”

4.2. MongoDb și conectarea la baza de date
“MongoDB este o baza de date NoSQL open -source orientata pe obiecte.
Diferența principala pe care MongoDB o are fata de celelalte sisteme de gesionare a
bazelor de date este faptul ca stocarea datelor nu se face folosind tabele precum o baza
de date relationala, MongoDB stocheaza datele sub forma de documente de timp
JSON(javascript object notation) cu scheme dinamice.
MongoDB este scrisa în limbajul C++, aceasta putand conține mai mult e baze de date,
colectii și indecsi. În unele cazuri aceste obiecte pot fi create implicit.
Odată create inregistrarile , ele se găsesc intr un catelog de sistem și anume :
db.system.colle ction,db.system.indexes.
În plus fiecare inregistrare creata are un index special de timp Mongo Object, el
putand fi pa rsat și descompus ca data/monentul la care a avut loc aceasta inregistrare.”
Pentru a putea să ne conectam la o baza de date mongo trebui e sa instalam cu ajutorul

______________________
[2] https://ro.wikipedia.org/wiki/Baz%C4%83_de_date
[3]https://ro.wikipedia.org/wiki/Mon goDB

27

npm manager un package numit mongodb iar apoi cu a jutorul i nstructiunii:
var MongoClient =require(‘mongodb’).MongoClient

Aici am invocat obiectul principal cu care vom face legătura cu baza de date și
anume:
MongoClient.connect(url,func tion(err,d b){})

Al doilea argument reprezintă o funcție care ia c a parametrii o eventuala eroare de
conectare și obiectul db, care este prac tic baza noastră de date pe care vom face
ulterior interogarile
Primul argumet fiind url -ul de conectare a bazei de date, de exemplu în cazul de fata,
aplicația ruland local url-ul este:
mongodb://localhost:27017/shopsite
La sfârșitul url -ul este numele ba zei de date pe care o folosesc.

4.3. Concluzii
MongoDb reprezinta o abordare interesanta si noua a gestionarii unei baze da date.
Tabelele poarta numele de colectii iar fiecare rand sau informatie stocata in acest
tabel/colectie poarta numele de inregistr are sau record, avand un format de tip JSON.
MongoDb reprezinta o alternativa buna pentru vechile metode sql de gestionare, dar
intampina putine probleme cand aplicatiile sunt d estul de mari neavand interogari
foarte complexe pe obiectele stocate

28 CAP ITOLUL 5. SERVERE ȘI DIFERITE METODE DE GESTIUNE A
BAZELOR DE DATE

5.1. Scurt istoric
[4] “Serverul reprezintă un program de aplicație care furnizeaza servicii altor aplicații
care sunt locale sau pe diferite statii.
În mod obișnuit serverul așteaptă conex iuni din partea clientilor aplicație i.
Numele de server se potrivește și pentru un anume calculator pe care ruleaza anumite
aplicații.
Pentru aplicatiile mai mari cu mai mulți utilizatori arhitectura se bazează pe sistem ul
client -server, care are la baza c el puțin 2 aplicații și cel puțin doua calculat oare.
Serverele au apărut în paralel cu reteaua de calculatorea. Retelele permit
calculat oarelor sa comunice unul cu altul, iar cu cât reteaua este mai mare apare
nevoia ca un calculator sa ia rolul de server care sa servească alte calculatoare.

După aparitia serverelor, retelele s -au dezvoltat și au crescut exponential, iar
minicomputerele a u dispărut.
Aparitia internetului a dus la aceasta dezvoltare împreuna cu utilizator ii acestor
servicii care au dat impu ls acestei cresteri.”

5.2. NodeJS și frame wok-urile acestuia

[5] “NodeJS este un libaj de programare bazat pe javascript, care ruleaza toate acțiunile
în mod asyncron.
Asyncron înseamnă în mare parte ca fiecare acțiune se propaga deși nu s -a finalizat,
iar compilatorul nu se blochează așteptând răspunsul ci trece mai departe la
următoarea instrucțiuni.
NodeJS este costruit sa creeze aplicații s calare, iar mai multe conexiuni la serveru l
ulterior pot fi gestionate.
______________________
[4] https://en.wik ipedia.org/wiki/Server _(computing)
[5]https://en.wikipedia.org/wiki/Node.js

29
Pentru fiecare conexiune o funcție de tip callback este activata, dar în schimb, dacă nu
exista nimic de făcut NodeJS i ntra în modul sleep.
NodeJS este similar la design cu Ruby sau cu Python, în schimb duce modelul de
evenimente mai departe.”
Framkework -ul pe care aplicația prezentata îl folosește este Express.js .
Express mai poarta numele și de ‘de facto standard fra mework’. Este foarte popular și
ușor de folosit.

5.3. Crearea unui server

În aceasta aplicație am folosit framework -ul express pentru a crea serverul pe care este
situata baza de date, cu următoarele instrucțiuni :
const express = require ('express' );
1.În pr ima expresie se importa obiectul express din package -ul instalat initial cu
ajutorul instructiunii (npm install express –save)
const app = express ();
2.Se initializeaza variabila app cu care vome crea rutele și functionalitatea ulterioara
app.listen (8000 , ()=>{console.log(‘server start’)}
3.In ultima instrucț iune serverul pornește pe portul 8000.
app.use(function (req, res, next ) {
res.setHeader ('Access -Control -Allow -Origin' , 'http://localhost:4200' );
res.setHeader ('Access -Control -Allow -Methods' , 'GET, POS T, OPTIONS, PUT, PATCH, DELETE' );
res.setHeader ('Access -Control -Allow -Headers' , 'X-Requested -With,content -type' );
res.setHeader ('Access -Control -Allow -Credentials' , true );
res.setHeader ('Content -Type' , 'application/json' )
next ();
});
4.Aici este setata pref ata serverului , ce requesturi accepta , din ce parte si d e ce tip sa
__________________ ____
[5]https://en.wikipedia.org/wiki/Node.js

30 fie datele pe care clientul le face .
5.4. Comunicarea dintre un server și partea de Front End

Cele doua aplicații comunica prin anumite requesturi.In mod obișnuit aceste
requesturi asyncrone, dar pot fi transform ate și în mod syncron .
Pe partea de front end s -a folosit libraria ‘HttpClient’ incl usa în pachetele standard
‘@angular’.
Aceasta librărie are un obiect care initiaza un request către url -ul serverului nostru.
Voi prezenta o schema în care voi trata ac east lucru:

31
Un exemplu de request spre server este urmatorul:

login (Email :String , Password :String ){
var headers = new HttpHeaders ().set('Content -Type' , 'application/x -www -form –
urlencoded' );
this.options = {
headers: this.headers
}
const promise = new Promise <boolean >((resolve ,reject ) => {
const user = new User ();
user.Email = Email ;
user.Password = Password ;
this.http.post('http://localhost:8000/login' ,user,this.options )
.subscribe ( res => {
if (res[Object .keys(res)[0]] == true)
{
console .log("BOULE UITA TE AICI" ,res);
// this.token = res.token;
sessionStorage .setIte m('currentUser' ,JSON .stringify (res));
resolve (true);
}
else if (res[Object .keys(res)[0]] == false)
{
resolve (false);
}
console .log(res);
resolve (true);
}, err => {
reject (err);
})
})
return promise ;
}

32 Acest request este impaturit intr -un promise ce are ca parametru o functie cu 2
argumente ‘resolve’ si ‘reject’ care vor transmite ulterior datele dupa terminarea
procesului .
In acest promise se foloseste un request de tip http dupa cum observati care are ca
prim argumet ruta unde se va trimite, obiectul si un obiect de tip HttpHeaders care
spune intr -un fel sau altul ce tip de date trimite catre server, ca un fel de coperta a unei
carti spus in alta forma.
La sfarsitul requestului, putem sa gestionam raspunsul primit de la server cu ajutorul
metodei ‘.subscr ibe’ care ia ca parametru o variabila de tip response, permitandu -ne sa
medificam sau sa urmam o logica aferenta functionalitatii dorite.
In cele ce urmeaza, data restituita de server si modificata va fi trimisa catre partea de
Front -end cu ajutorul comenz ii ‘resolve(data)’ si utilizata mai apoi de client.
Pentru partea de server avem definite rutele pe care serverul asteapta requeturile de la
front -end, unde exemplu este urmatorul:

app.get('/', function (req, res) {
res.send ('hello world' )
})
Primul argum et este ruta adica „/”, iar cel de al doilea argument este o functie cu doi
parametrii req,res completand ciclul de la figura de mai sus.
Req este un obiect care reprezinta requestul html din partea front -end-ului si are mai
multe proprietati si anume
• req.app (aceasta instanta retine informatii despre aplicatia express)
• req.baseUrl (calea URL pe care a fost instalată o instanță a routerului)
• req.body (cea mai import anta parte, pentru varianta de post,delete sau put
cand request -ul trimis din partea front -endului impreuna cu o infomatie,
aceasta poate fi accesata cu req.body)
• req.path (contine path -ul requestului)
• req.protocol (Șirul de protocol de solicitare, "http" sau "https" când este
solicitat cu TLS. )
• req.route (ruta curenta)
• req.secure (este de tip Boolean si returneaza true,daca conexiunea TLS este
facuta)

33 5.3. Concluzii
In concluzie front -end-ul este acel cod care se executa pe partea clie ntului. Acest cod
este tipic(HTML,css si javascript) care ruleaza in browser si creaza o interfata
utiliza tor.
Partea de back -end este acel cod care ruleaza pe partea de server, care receptioneaza
request -uri din partea clientului, contine si logica care face sa intoarca pe raspuns data
de care are nevoie clientul.
Back -end-ul include de altfel si baza de date , ce va stoca in mod persistent toate datele
aplicatiei.

CAPITOLUL 6. RECOMMENDATION SYSTEM

6.1. Scurt istoric
In ziua de azi informatia este generata in mod exponential deoarece tot mai multi
oameni folosesc internetul care nu face altceva decat sa salve ze ac este interactiuni
umane.
Acest cumul e informatie devine o provocare pentru industria e -market de exemplu
intrebarea fregventa pe care si -o pune producatorul este : cum poti oferi cea mai buna
recomandare clientului, determinandu -l astfel sa cumpere n u unu l ci mai multe
produse.
Pentru a depasi aceste obstacole, oamenii de cercetare au depus eforturi substanti ale
pentru a evolu aceste systeme de recomandare, care ulterior pot prezice cele mai bune
produse pentru client.
Cele mai multe sisteme de recoma ndare implementeaza niste tehnici de descoperire
pentru a produce preziceri cat mai exacte.
Aceste sisteme de r ecomandare genereaza liste de recomandare pe doua procese de
filtrare.
Cele doua moduri prin care se pot filtra sunt :
• Content -Based
• Collaborati ve Fil tering
Collaborative filtering

34 Collaborative filtering pentru produse este bazata pe cunosterea useri lor si atitudinea
acestora fata de acestea, care mai poarta si numele de intelepciunea multimii de a
recomanda produse. In contrast Content -Based se bazeaz a pe atributele produselor sau
a obiectelor comercializate si similitudinile dintre ele.
In general, collaborative filtering sau CF este statia pentru sistemele de recomandare.
Algoritmul are niste proprietati foarte interesante prin care este capabi l sa i nvete de
unul singur, ceea ce inseamna ca poate invata singur prorietatile sau atributele pe care
sa le foloseasca.
Collaborative filtering este impartita in 2 mari mari abordari:
• Memory -Based Collaborative Filtering
• Model -Based Collaborative filteri ng
Mem ory-Based Collaborative Filtering
In acest caz se utilizeaza raitingul user -ului pentru ca algoritmul sa computeze
similitudinile dintre user sau produs/item.
Aceasta abordare este folosita in general pentru partea de marketing. Ea a fost folosita
la incep ut de toate site -urile cu activitatea principala e -commerce. Este eficient si usor
de imple mentat. Cele mai uzuale abordari sunt neighbourhood -based collaborative
filtering si item -based/user -based top N recommendation, pe scurt se creaza o matice
de M pe N care are pe coloana userii care folosesc acest site si pe linie produsele care
se regases c pe aceasta aplicatie.
Ca exemplu in abordarea user -based, raitingul pe care userul o da produsului i se
calculeaza ca o agregare a unor asemanari dintre user i si raitingul lor pentru produse.

Useri \Produse P1 P2 P3
U1 4 5
U2 5 5 4
U3 1 1

Din urmatorul tabel se observa clar ca user -ul u1 pare sa aibe gusturi similare cu user –
ul u2 pe cand user -ul u3 pare sa aibe gusturi diferite de ceilalti 2. In conclu zie us er-ul
u1 si user -ul u2 se numesc vecini sau neighbours, de aici si numele acestei abord ari.
Pentru a calcula coeficientii si celelalte atributii ne stau la dispozitie formule si
algoritmi specifici pe care ii voi prezenta in capitolele urmatoare.

35 Mod el-Based Collaborative Filtering
In aceasta abordare modelele sunt create sau construite u tilizand diferite data –
mining,algoritmi folositi in machine learning pentru a prezice raitingul utilizatorului
pentru produsele care inca nu au fost evaluate.
Sunt fo arte m ulti algoritmi model -based, amintesc cativa dintre ei si anume: Retea
Bayesiana, Mod ele Clustering, modele latent semantic precum valori singurale de
decompozitie.
Pentru aceasta abordare, metodele de reducere a dimensiunilor sunt folosite ca tehnici
compl ementare pentru a imbunatati robustetea si acutitatea pentru abordarea model –
based.
In acest sens, metode ca valori singulare de descompunere sau principiul de analiza a
componentelor, cunoscute ca modele latent factor, se comprima intr -o matrice use r-
item intr-o dimensiune mica in termini de latent factor.
Un avantaj pentru folosirea ace stei abordari este ca in schimb de o matrice de
dimensiune foarte mare ce contine foarte multe valori lipsa, se va folosi o mult mai
mica matrice intr -un spatiu dimen sional mai mic.

Content -Based
Aceste sisteme de recomandare recomanda produse similare care au fost cumparate in
trecut sau evaluate cu un scor mare pentru un anumit client sau user, neavand nicio
legatura cu ce au evaluat sau cumparat alti useri.
Conten t-based recommendation systems analizarea atributele produselor pentru a
identif ica produse care sunt pe placul useri -lor. Pentru ca paritcularitatile sistemelor
de recomandare difera bazate pe reprezentarea produselor sau obiectelor
In abordarea content -based, cuvintele cheie sunt pentru a descrie produsele si un profil
de user este contruit pentru a indica ce tipuri de produse sunt placute/cumparate de
user. In alte cuvinte, acesti algoritmi incearca sa recomande produse care sunt
asemanatoare celor care au fos t cumparate sau evaluate in trecut.
Pentru a abstractiza caracteristicile produselor in sistem, un algoritm de prezentare a
produsului este aplicat. Un foarte utilizat algoritm este fregventa inversa a
documentului mai numita si reprezentaria vectori al spa tiala.
Pentru a crea un model de user sau un profil, sistemele se concent reaza pe doua tipuri
de informatii:

36 • Un model care caracterizeaza preferintele utilizatorului
• Un model baza pe istoricul userului cu sistemul de recomandare
Practic aceste metode folos esc un profil de produse (un set discret de caracteristici si
atribute) c aracterizit acestea in sistem.
Sistemul creaza un profil de useri bazat pe niste vectori de ponderi pentru
caracteristicile produselor. Aceste ponderi denota importanta fiecare dintre
caracteristicile produselor pentru utilizator. Cele mai simple abordari folosesc mediar
aritmetica a evaluarii produselor intr -un vector, pe cand alte metode mai sofisticate
folosesc si tehnici de machine -learning precum Clasificatorul Bayesian, abo re de
decizie si asa mai departe.
O problema cheie a acestui sistem este daca acesta poate sa invete preferintele
utilizatorului in materie de produse si actiunile acestuia cu privire la o singura sursa
de continut si de a le utiliza in alte tipuri. Cand sistem ul este limitat sa recomande
acelasi tip de produs pe care userul l a pla cut, valoarea sistemului de recomandare
scade vertiginos, in schimb daca userul primeste o recomandare care nu seamana
neaparat cu produsele pe care acesta le a placut acest sis tem de recoandare primeste o
importanta aparte fiind mai complex decat cel prez entat anterior.

6.2. Python Sklearn

[6] “Python este un limbaj de programare dinamic multi -paradigma, creat in 1989 de
programatorul olandez Guido van Rossum. Acesta este un limbaj multifunctional care
este folosit de Google, Yahoo pentru programarea aplicatiil or web, insa exista si o
parte de aplicatii stiintifice sau divertismet cate sunt programate partial in python.
Python pune accent pe curatenia si simplitatea codului, iar sin taxa permite
dezvoltatorilor sa exprime unele idei progamatice intr -o maniera mai clara si mai
concisa decat in alte limbaje de programare ca si C.
In ceea ce priveste paradigma de programare, python poate servi ca limbaj pentru
soft-urile de tip orientate pe obiect, dar permite si programare imperativa, functionala,
sau procedurala.
Sistemul de tipizare este dinamic iar administrarea memoriei decurge automat prin
intermediul unui serviciu ‘gunoi’ (garbage collector).”
__________________ ____
[6] https://ro.w ikipedia.org/wiki/Python

37 “Libraria Sklearn este o librarie cu caracter stiintific, ea fi ind folosita in cadrul
‘Machine Learning’ avand o varietat e de caracteristici cum ar fi: casificare, regresie
algoritmi de tip ‘Cluster’.
Scikit -learn este scris in mar e parte in python, dar mai are niste algoritmi de baza
scrisi in ‘Cyclon’ pentru a atin ge anumite performante.
Pentru aceasta librarie problemele se impart in doua categori si anume:
• metoda supervizata
• metoda nesupervizata
Pentru aplicatia mea am folosit m etoda nesupervizata si voi detalia in capitolul
urmator.
Metoda supervizata care vine cu niste atribute suplimentare de predictie iar problema
poate fi impartita din nou in doua metode si anume:
• clasificare
• regresie
Pentru partea nesupervizata, in care dat ele constau intr -un set de vectori x fara nicio
legatura cu datele tinta. Scopul ace stei probleme este sa descopere grupuri de
exemple similare i n data noastra, care poarta numele de ‘clustering’, sau sa determine
distributia datei in spatiul inputat, nu mit si estimator de densitate, sau sa expuna
aceasta data intr -un spatiu dimensional mai redus astfel incat sa putem vizualiza
graficul.”

6.3. Descriere aplicaț ie Recommender System
Pentru sistemul de recomandare am folosit python3 si libraria sklearn cu metoda
NearestNeighbour.
Date procesate de acest sistem de recomandare sunt preluate d e la amazon si contin
circa (7,824,482) de reviews pentru (498,196 products).
Aceste produse sunt stocate intr -un format JSON. Voi exemplifica in urmatorul
paragraf un produs din baza de date:

________ __________ ____
[7] https://scikit -learn.org/stable/

38 { "asin": "0000031852", "title": "Girls Ballet Tutu Zebra H ot Pink", "price": 3.17,
"imUrl": "http://ecx.images -amazon.com/images/I/51fAmVkTbyL._SY300_.jpg",
"related": { "also_bought": ["B00JHONN1S", "B002BZX8Z6", "B00D2K1M3O",
"0000031909", "B00613WDTQ", " B00D0WDS9A", "B00D0GCI8S", "0000031895",
"B003AVKOP2", "B 003AVEU6G", "B003IEDM9Q", "B002R0FA24",
"B00D23MC6W", "B00D2K0PA0", "B00538F5OK", "B00CEV86I6",
"B002R0FABA", "B00D10CLVW", "B003AVNY6I", "B002GZGI4E",
"B001T9NUFS", "B002R0F7FE", "B00E1YRI4C", "B008 UBQZKU",
"B00D103F8U", "B007R2RM8W"], "also_viewed": ["B0 02BZX8Z6",
"B00JHONN1S", "B008F0SU0Y", "B00D23MC6W", "B00AFDOPDA",
"B00E1YRI4C", "B002GZGI4E", "B003AVKOP2", "B00D9C1WBM",
"B00CEV8366", "B00CEUX0D8", "B0079ME3KU", "B00CEUWY8K",
"B004FOEEHC", "00000 31895", "B00BC4GY9Y", "B003XRKA7A",
"B00K18LKX2", "B00EM7 KAG 6", "B00AMQ17JA", "B00D9C32NI",
"B002C3Y6WG", "B00JLL4L5Y", "B003AVNY6I", "B008UBQZKU",
"B00D0WDS9A", "B00613WDTQ", "B00538F5OK", "B005C4Y4F6",
"B004LHZ1NY", "B00CPHX76U", "B00CEUWUZC", "B00IJVASU E",
"B00GOR07RE", "B00J2GTM0W", "B00JHNSNSM", "B003IEDM9Q ",
"B00CYBU84G", "B008VV8NSQ", "B00CYBULSO", "B00I2UHSZA",
"B005F50FXC", "B007LCQI3S", "B00DP68AVW", "B009RXWNSI",
"B003AVEU6G", "B00HSOJB9M", "B00EHAGZNA", "B0046W9T8C",
"B00E79VW6Q", "B00D10CLVW", "B00B0AVO54", "B00E95LC8Q",
"B00GOR92SO", "B007ZN5Y56", " B00AL2569W", "B00B608000",
"B008F0SMUC", "B00BFXLZ8M"], "bought_together": ["B002BZX8Z6"] },
"salesRank": {"Toys & Games": 211836}, "brand": "Coxlures", "categories":
[["Sports & Outdoors", "Other Sp orts", "Dance"]] }

Voi detalia si explica acest produs s i toate valorile cheia a JSON -ului:
• asin (reprezinta id -ul produsului)
• title (titlul produsului)
• price (pretul produsului)
• imUrl (un link catre o poza a produsului)

39 • related (aici apar toti userii care au manifestat un interes de a cumpara sau
doar de a pri vi respectivul produs)
• brand (brandul prdusului)
• categories (categoriile din care face parte produsul)

Im baza de date mai sunt stocate si review -urile, esenta acestui sistem de recomandare
care au forma urmatoare:

{ "reviewerID": "A2SUAM1J3GNN3B", "asin ": "0000013714", "reviewerName": "J.
McDonald", "helpful": [2, 3], "reviewText": "I bought this for my husband who plays
the piano. He is having a wonderful time playing these old hymns. The music is at
times hard to read because we think the book was publ ished for singing from more
than playing from. Great purchase though!", "overall": 5.0, "summary": "Heavenly
Highway Hymns", "unixReviewTime": 1252800000, "reviewTime": "09 13, 2009" }

De asemena review -uri sunt de tip JSON cu urmatoare valori cheie:
• reviewerID (id -ul user -ului)
• asin (id -ul produsului)
• reviewerName (numele user -ului)
• reviewText (textul comentat de user la adresa produsului revizuit)
• sumarry (scurta descriere)
• overall (raiting -ul oferit de user pentru produsul respectiv)
• unixReviewTime (d ata sub forma de numar)
• reviewTime (data de forma mm dd, yyyy)
Acest sistem de recomandare prelucreaza aceste date intr -un mod particular, initial
aceste date, pentru a fi proc esate trebuie citite.
Fisierele initiale sunt de tip json file iar singura prob lema a fost marimea fisierului
fiind de peste 600mb. Asadar a trebuit o noua librarie pe nume pandas prin care am
facut citirea fisierului.
Functiile pe care le -am folosit le vo i explica in urmatorul paragraf:

40
def parse (path):
g = gzip.open(path, 'r')
for l in g:
yield eval(l)
def getDF (path):
i = 0
df = {}
for d in parse(path):
df[i] = d
i += 1
return pd.DataFrame.from_dict(df, orient ='index' )

Prima functie este folosita in cea de a doua intr -un mod iterativ si parcurge fiecare
obiect de tip json.
A doua functie creaza o variabila i=0 si initializeaza alta variabila df = {} cu un
dictionar gol, mai apoi fiind populat acest dictionar cu obiectele json din fisierul
parsat.
Ca urmare df va fi de forma :
df = { 1:Obiect.JSON,2:Obiect.JSON,3:….}
Ca obs ervatie tipul fisierului returnat de functia getDF() este de tip pandas, un tip
special, iar acest obiect are mai multe metode pe care le voi folosi in urmatoarele
instructiuni.
Urmatorul pas este sa numar grupand fiecare produs dupa id -ul acestuia (asin) si in
plus sa calculez me dia pe fiecare produs .
Avem urmatorea instructiunea care produce acest rezultat si anume:
count = df.groupby( "asin" , as_index =False ).count()
mean = df.groupby( "asin" , as_index =False ).mean()

Urmatorul pas este de a grupa acest cou nt cu re stul de produse avand in final pe
fiecare produs cate review -uri a primit cu toate campurile acestuia.
Exemplu de date afisate in count:

41

Acest pas este necesar p entru a selecta doar o anumita parte din aceste review -uri.
Din cauza unei pr obleme legate de antrenare, am decis ca obiectele selectate sa aibe
cel putin 200 de review -uri asta marind succesul sistemului de recomandare.
Acest lucru l -am observat facand repetate schimbari. Problemele apar atunci cand un
produs are prea putine revie w-uri iar sistemul de recomandare nu poate clasifica pe
acea baza.
Alta problema ar fi numarul destul de redus de produse cu cel putin 200 de review -uri,
acesta fiind de 988 de elemente, un numar destul de mic, dar valabil.
Aceasta grupare se produce cu aj utorul comenzii :
dfMerged = pd.merge(df, count, how='right' , on=['asin' ])

Pasul urmator contine trei instructiuni prin care redenumim niste capuri in datele de
review -uri pentru a ne usura munca si pentru a fi mai intuitive :
dfMerged[ "totalReviewers" ] = dfMe rged[ "reviewerID_y" ]
dfMerged[ "overallScore" ] = dfMerged[ "overall_x" ]
dfMerged[ "summaryReview" ] = dfMerged[ "summary_x" ]

42 Ca urmare a acestor redenumiri vom incerca sa selectam data precum am precizat mai
sus, cu criteriul urmator: fiecare produs va fi nevo it sa aiba cel putin 200 de revizuiri
ca sa poa ta fi luat in considerare.
Aceasta problema va fi rezolvata intr -un mod cat se poate de simplu cu urmatoarele
instructiuni:
dfMerged = dfMerged.sort_values( by='totalReviewers' , ascending =False )
dfCount = dfMer ged[dfMerged.totalReviewers >= 200]
Prima insctructiune ajuta la sortarea listei de produse intr -un mode descrescator. Cea
de-a doua face doar selectia pe baza campului ‘totalReviewers’ cu criteriu de a fi mai
mare de 200.
Cea mai importanta parte a sistemului de recomandare este pe ce anume ne bazam sa
producem aceste recomandari, raspunsul este simplu pe produsele pe care le avem in
baza de date adica cele 988, insa raspunsul acesta este unul destul de imprecis.
Recomandarea se face pe baza coment ariile fiecarul user la adresa produsului, fiind
cea mai plauzibila varianta, neavand solutia unei grupari mai coerente. In alte cuvinte
este greu sa faci context based pe niste produse care nu au tocmai calitati sau
componente asemanatoare.
Context -based recomme nders se bazeaza cum am spus mai sus pe similitudinile
produselor, iar ideea de baza a acestui sistem este urmatoarea: daca un user a placut
un obiect x care este similar cu y, atunci acelasi user ar trebui sa placa si produsul y.
Un exemplu de cont ext-based recommender este movieLens care are ca scop principal
caracterizarea fiecarul film pe categori ex: Actiune, Comedie, Drama etc., formand
ulterior o matrice de similitudini pentru toate filmele prezentate.
Pentru modelul meu a fost dificil sa fac o astfel de matrice,iar ponderea de impartire
fiind imposibila datorita numarului mare de categorii si mai mult de atat, fiecare
produs fiind grupat pe mai multe categori.

Voi da un exemplu interogand baza de date pentru un anumit element :

Acest obiec t este impartit in 6 categori ceea ce face destul de dificila abordarea
metodei context -based.
Voi enumera in paragraful urmator categoriile tuturor celor 988 de produse:

43

Urmatoarea etapa este sa parsam aceste comentarii, adica sa eliminam semnele de
punctuatie dintre cuvinte, cuvinte ce vor avea un rol esential in recomandarea
ulterioara.
Voi expune in urmatorul paragraf functia de parsare si eliminare a punctuatiilor:
regEx = re.compile( '[^a-z]+')
def cleanReviews (reviewText ):
reviewText = reviewText.lower()
reviewText = regEx.sub( ' ', reviewText).strip()
return reviewText

Aceasta functie va fi aplicata campului ‘summaryReview’ cu urmatoare instructiune :
df["summaryClean" ] = df["summaryReview" ].apply(cleanReviews)

Urmeaza sa eliminam to ate elementele car e au acelasi scor cu urmatoarea
instructiune:
df3 = df3.drop_duplicates([ 'overall' ], keep ='last')
Aceata instructiune elimina doar duplicatele pastrand doar una din revizuire. Ca
urmare numarulul produselor scade la 966 cu cate 200 de re vizuiri fiecare in parte.

44 In cele ce urmeaza voi face apel la libraria sklearn pe care am folosit -o pentru aceasta
parte a proiectului si vom importa din ea metoda ‘CountVectorizer’ prin urmatoa rea
operatie:
from sklearn.feature_extraction.text import Coun tVectorizer

‘Coun tVectorizer’ converteste o colectie de documente cu text intr -o matrice de
jetoane numarabile.
Sintaxa urmatoare transfoma documentul de revizuiri intr -o patrice cum am enuntat
lai sus. Aceasta matrice se poate construi cu ajutorul comenz ilor :
countVector = CountVectorizer( max_features = 300, stop_words ='english' )
transformedReviews = countVector.fit_transform(reviews)

Prima comanda invoca CounterVectorize pe anumite proprietati, ‘max_features’
reprezinta cate cuvinte sa culeaga aceasta metoda din tot dic tionarul de reviews,
stop_words un atribut care verifica in mare pentru anumite cuvinte pentru care
algoritmul ar avea probleme cu ar fi ‘english’.
In poza urmatoare voi prezenta prima linie a matricii si pentru pe ce cuvinte se
formeaza matricea cu jetonu ri dupa care se va fa ce recomandarea.

Numarul lor este de 300 iar tuplurile din ‘transformReviews’ practic numara toate
aparitiile celor 300 de cuvinte aleator selectate de ‘CountVectorizer’.
Acum vom transforma practic aceste date intr -o matrice cu ajut orul
‘pandas.DataFram e’ prin urmatoarea instructiune:
dfReviews =DataFrame(transformedReviews.A, columns =countVector.get_feature_na
mes())

45 Aceasta matrice are liniile produsele revizuite iar coloanele cele 300 de cuvinte alese
aleator din toa ta data de antre nare.
Pentru a functiona mai rapid aplicatia ruleaza intru -un mod offline, deoarece ar dura
mai mult tot procesul de selectie a datelor si de procesare a recomandarilor. De aceea
voi salva datele deja procesate intr -un fisier de tip csv pe nume ‘dfReviews .csv’.
Pentru m odul online exista metoda ‘reloadReviews’ care poate fi apelata pentru a
completa modificarile facut pe Front -end.
Vom transforma ‘dfReviews.csv’ intr -un array the tip numpy cu urmatoare
instructiune:
X = np.array(d fRev iews)
Urmeaza seg venta de imparti re a datelor revizuite in train si test cu un procent de 90%
pentru train respectiv 10% pentru test.
tpercent = 0.9
tsize = int(np.floor(tpercent * len(dfReviews)))
dfReviews_train = X[:tsize]
dfReviews_test = X[tsize: ]
‘tsize’ reprezinta variabila ce ia valoarea multimii de antrenare in cazul nostru 90%
din toate produsele pe care le randam.
Urmeaza doua instructiuni care impart array -ul cu syntaxa specifica python [:tsize]
care aduce toate elemente de la 0 la lungime a ‘tsize’ analog [ts ize:] care va aduce
toate inregistrarile de la ‘tsize’ la ultima inregistrare.
Urmeaza o instructiune foarte importanta cea care practic face recomandarea in sine,
aici se va face referire la libraria ‘sklearn’ din nou, dar cu o noua ab ordare si anume:
from sklearn.neighbors import NearestNeighbors
‘NearestNeighbors’ implementeaza o metoda de invatare nesupervizata de cautare a
celui mai apropiat vecin. Acesta actioneaza ca o interfata uniforma formata din trei
algoritmi : BallTree,KDT ree si Brute Force.
Instructiunea care produce acest efect este urmatoarea :
neighbor = NearestNeighbors( n_neighbors =3,
algorithm ='ball_tree' ).fit(dfReviews_train)
Se intelege din precedenta sintaxa ca : ‘n_neighbors’ va fi numarul de vecini pe care il
va avea pun ctul asu pra caruia se va face antrenarea, ‘algorithm’ este algorimul pe care
l-am ales in cazul de fata ‘ball_tree’.

46 In cele ce urmeaza voi vorbi despre algoritmul ‘ball_tree’ de prezicere. El imparte
recursiv data de antrenare definita de un cen troid C si raza r , asa ca fiecare punct sa
fie cuprins de acest centroid C cu raza r. Numarul de puncte candidate se reduce la o
inecuatie triunghiulara de forma : |x+y|<=|x|+|y|
Cu aceasta configurare, o singura distanta calculata dintre un punct de test si centroi d
este suficienta sa determine un punct de minim si unul de maxim pe intreaga data de
puncte. Aceasta abordare este mai rapida decat KD -tree in dimensiuni mai mari.
La sfarsitul acestui sistem de recomandare vom alege ca parametru id -ul produ sului
nostru dupa care vom cauta in toata lista de antrenare cele mai apropiate doua puncte
respectiv doua produse de cel cautat.

6.4. Concluzii
La finalul acestui capitol am sa vrea sa atrag atentia asupra intrebarii : De ce un sistem
de recomand are ?
Pentru aceasta v oi prezenta in paragraful urmator o diagrama cu toate metodele de
abordare al acestui subiect :

[8]

________ __________ ____
[8] https://www.sciencedirect.com/science/article/pii/S1110866515000341

47 Sistemele de recomandare sunt un mod de gest ionare a tuturor informatiilor pe care un
client le furnizeaza utilizand aplicatia web, pentru imbunatatirea relatiei dintre cei doi
actori client respectiv furnizor.
Sistemele de recomandare au inceput sa fie din ce in ce mai populare, cele mai
avansate avand la baza retele neuronale care sunt antrenate supervizat sau
nesupervizat pe o baza de date uriasa si in continua expansiune pe care furnizorul o
detine.
Evaluarea sistemele de recomandare se face destul de greu, exista niste metrici cum ar
fi mse sau mean square error, dar ideea de baza este faptul ca reactiile umane la
anumite produse pot fi diferite de la persoana la persoana.

CAPITOLUL 7. TESTARE AUTOMATĂ

7.1. Testarea aplicațiilor
[9] “Testarea aplicatiilor se refera la testarea per totala a compo rtamentului fiecarei
componente resp ectiv partea de front -end si partea de backend.
Aceasta implica niste seturi de activitati care pot fi manuale sau automate, ambele
metode vor sa descopere toate erorile pe care softul sau aplicatia generata le are.
Acea sta este acoperita de e2e testare fu nctionala pentru aplicatia noastra.
Acest tip de testate ajuta echipa sa evalueze si sa imbunatateasca calitatea software –
ului si in acelasi timp reduce costurile de dezvoltare si testare a software -ului de catre
organiz atori.
Testarea aplicatiilor poate fi considerata ca un pachet de teste care acopera testarea
front -endului sau testarea GUI, testarea back -endului , testarea bazei de date, testarea
sarcina etc.
Ciclurile de testare ale unei aplicatii:
1. Testarea designului ( aceasta implica proiectarea p lanurilor de testare pe baza
cerintei aplicatiei )
2. Testarea productiei ( aceasta implica elaborarea de cazuri de testare manuala,
precum si scripturi de testare automata )
3. Testare de executie ( aceasta implica executarea tes telor functionale pentru
valid area cerintelor de aplicare )

48 4. Reglarea aplicatiei ( implica executarea testelor de incarcare si a performantei
aplicatiei )
Exista trei categori de testare a unei aplicatii si anume:
• Testarea aplicatiilor web ( pe care am sa o abordez )
• Testarea aplicatiilor de destop
• Testarea aplicatiilor de mobil

Testarea aplicatiilor web implica testarea site -urilor dinamice sau statice. Exista multe
tipuri de teste care pot fi efectuate ca parte a testarii aplicatiilor web, in functie de
nevoia d e testare. Astfel de tipuri de testare implica testarea functionala, testarea
performantelor, testarea incrucisata a browserului, testarea incarcarii, testarea GUI,
tests de stres, testare de regresie, testarea conformitatii, testare beta, testul de
accept are a utilizatorului UAT, testare experimentala.
Exista trei tipuri de metodologii de testare care pot fi utilizate pentru a asigura nivelul
necesar de testare in functie de tipul de aplicatie:
• Testare functionala sau testarea Black Box

In metodolo gia d e testare functionala pentru orice tip de aplicatie software, rezultat ul
este egal cu rezultatul asteptat pentru setul de intrebari dat.
Testul de Black Box sau cutie neagra este cunoscut si adesea folosit pentru testare
functionala, testarea nefuncti onala si testare de regresie.
Testul de cutie neagra poate urmari in contin uare strategiile de testare, cum ar fi
abordarea clasei de echivalenta, abordarea valorii limita, abordarea tabelului de
decizie si abordarea tabelelor de tranzitie de stat.
• White box sau testate unitara

Pentru testate cutie alba sau White box, testerul t rebuie sa cunoasca codul. Un astfel
de tip de testare este adesea realizat de catre dezvoltatori imediat dupa finalizarea
codarii pentru orice model de aplicatie.
Testul cutie alb a poate urmari in continuare strategiile de testare, cum ar fi analiza
acoper irii codului, acoperirea traseului, analiza codului mort, analiza duplicarii
codului, analiza buclelor infinite etc.
• Testare Grey box

49 Termenul de testare gri sau Grey box se refera la tipul de combinare de testare dintre
testare cutie alba si testare cutie neagra. Aici, testerul poate adopta startegii mixte care
implica atat cutii negre, cat si strategii de testate cutie alba.
Planul de testare este un document in care test erii spec ifica planul global de testare si
utilizeaza acest document ca metoda de com unicare intre membrii echipei de testare.
In cazul planului de testare a aplicatiilor, documentul este pregatit pe baza descrierii
produsului SRS (specificarea cerintelor software) si a documentelor de utilizare a
cazurilor. Documentul planului de testare acopera detalii despre testarea aplicatiilor
software.
Cele mai bune tactici de performare a testelor sunt urmatoare :
• Tipurile de identificare necesare testarii

In fu nctie de tip ul aplicatiei software, ar trebui sa fim siguri cu privire la tipul de
testare pe care ar trebui sa o efectuam pentru a ne asigura ca au fost folosite teste
ample care sa corespunda asteptarilor de calitate a software -ului.
• Testarea functional a cu specific atii

Inainte de a incepe testarea sau scrierea cazurilor de testare, trebui e sa fim foarte
siguri ca functiile necesare vor fi testate pentru orice aplicatie software.
Ar trebui sa putem indentifica toate functionalitatile necesare documentul ui SRS (
specificarea cerintelor software ) si sa folosim documentul dupa caz.
• Analiza ca zurilor de testare
Ar trebui sa examinam cazurile de testare cu echipa pentru a ne asigura ca aveam o
acoperire de 100% a testelor
• Definirea criteriilor de intrare si iesire
Ar tre bui sa fie clare cu privire la amploarea testelor sau cazurilor de testare c are
trebuie executate. Prin urmare, este necesar sa se defineasca clar criteriile de intrare si
iesire inainte de inceperea si finalizarea testelor.
• Executia automata a testelor
Ar trebui sa indentificam scenariile de testare si functionalitatile care ar p utea fi
automatizate prin testare. Acestea ne vor ajuta astfel de cazuri de testare.”

________ __________ ____
[9] https://medium.com/frontend -fun/angular -unit-testing -jasmi ne-karma -step-by-step-e3376d110ab4

50 7.2. Testare Fro nt-end Karma, Jas mine
Pentru part ea de testare a front -endului sau aplicatiei web am folosit un framework de
testare javascrip pe nu Jasmine.
Jasmine este un framework open -source de testare a fisierel or de tip ja vascript. Este
destinat sa ruleze pe absolut orice platforma pe care este im plementat javascript.
A fost dezvoltat de Privotal Labs, similar ca si logica cu frameworkul JsUnit care a
fost dezvoltat inaintea lui.
Jasmine ofera un set bogat de s imilitudini i ncorporate. Voi oferii un exemplu simplu
de testare in samine pentru un cod de javascript :
Pentru functia helloWorld
function helloWorld() {
return 'Hello world!' ;
}
Functia de testare ar arata in felul urmator :
describe( 'Hello world' , function () {
it('says hello' , function () {
expect(helloWorld()).toEqual( 'Hello world!' );
});
});
In exemplul de mai sus , toEqual verifica egalitatea dintre valoarea returnata de
helloWorld() si ‘Hello world’. Daca jasmine potriveste corect aceasta verificare atun ci
returneaza o variabila de tip bolean: adevarat daca protrivirea este adev arata si fals in
caz contrar. O buna practica este de a pune o singura asteptare intr -o specificatie de
testare individuala.
Karma este un motor de testare pentru javascript care r uleaza in nodejs. Este potrivit
pentru testarea proiectelor in AngularJs sau a altor proiecte in javascript. Folosind
Karma pentr u a rula teste utilizand unul din numeroasele suite de testare javascript,
voi aminti aici : Jasmine, Mocha, Qunit etc. Efectua rea testelor se poate face nu numai
pe motoarele de cautare alese ci si pe p latformele dorite, de exemplu pentru versiune
de desk top, Karma este extrem de configurabila, se integreaza cu pachetele populare
de inregistrare continua Jenkins, Travis si Semaph ore avand un suport de plugin
excelent.

51 Inainte de a rula Karma, trebuie sa o configuram. Acesta este cel mai important pas,
dar angular cli vine in pachet cu acesata functionalitate, fisierul karma.config.js care
va fi generat automat la initializarea unu i proiect nou
Voi ilustra in cele ce urmaza fisierul karma.config.js si voi explica in mare liniile ce il
compun.

Fisierul karma.config.js are mai multe campuri cele mai importante fiind :
• Framework ( precizeaza ce frameworkuri utilizeaza pentru testar e si
constructie , aici observam prezenta framework -ului de testare jasmine )
• Plugins
• Portul ( portul pe care va rul a karma cu ajutorul lui nodejs )
• Browsers ( pe ce motor de cautare poate rula )
• singleRun ( modul in care ruleaza , poate astepta modificari sau poate rula
doar o singura data )
Cu ajutorul lui Karma si Jsamine voi f ace unit testing pentru aplicatia web, voi
prezenta codul pentru niste componente cheie cat si compilarea cu succes a tuturor
componentelor aplicatiei.
Rularea testelor se face cu comanda ng test, care porneste karma si serverul de nodejs,
deschizand un lo cal host pe portul precizat mai sus a dica 9876.

52 Voi prezenta in cele ce urmaza testarea cu succes a tuturor componentelor aplicatiei,
incepand cu cele mai de baza si terminand cu c ele mai complexe dupa care voi lua pe
rand anumite componente pentru care am sa fac niste teste mai complexe exp licand
astfel testarea ce a avut loc.

Mai sus sunt verificate cele 34 de componente pe care aplicatia web le contine, acest
unit testing test eaza intr -un mod automat : codul fiecare componente, randarea
acesteia, anum ite buguri legate de variabile, re questurile pe care le contin, modul de
rutare, implementarea parinte copil, declararea serviciilor si functinarea lor si posibila
randare cu posib ilitatea unei bucle infinite.
Fiecare componenta a noastra cand este creata automat cu comanda ‘ng g c
numeco mponenta’ va genera cele 4 fisere : html , css , component.ts si fisierul de test
scris in jasmine spec.ts.
In acest fisier se va face testarea uni tara pe fiecare componenta pe care o avem.

Voi prezenta in urmatorul paragr af codul de verificare a unui req uest pentru sectia de
preluare a unui produs si anume serviciului ‘ItemsService’.
Ce anume voi verifica in acest fisier de test :

53 • Functionalitatea lui
• Functionalitate metodei getItem care are ca argument id -ul produsul cau tat
In imagine de mai sus aveam configurerea fisierului ‘ItemService’ cu campurile
providers unde trebuie sa specificam exact componentele care intra la testare si
importurile adic a librariile care duc la buna functionare a componentei.
Mai jos se verifica toate requeturile pe car e serviciul nostru le are implementate, iar la
sfarsit testam una din aceste requesturi prin urmatoare logic:

Definim o variabila userId si ii atribuit i d-ul unui produs, mai apoi initializam un
obiect de tip ItemServici pentru a putea apela metodele lui i nterne.
Apelarea aceste metode se face simplu cu obiec.metoda dupa care gestionam rezultat
optinut din promise cu metoda .then verificand daca raspunsul contine un obiect de tip
item si cele trei de tip reviews pe care le afisam in aplicatia noastra.

Aceasta testare se termina cu un request care varifica de ce tip este si daca s -a produs
conform cerintelor noastre.
Acest lucru se poate verifica in interfa ta grafica creata de karma si prezentata mai sus,
unde toate cele 34 de comp onenta au fos t verificate cu succes.

54 7.3. Testare funcțională

[10] “Testarea functionala este un proces de asigurare a calitatii bazat pe un sistem de
intrebare si raspuns si un tip de test de tip black -box sau cutie neagra care isi bazeaza
cazurile de testare pe specificat iile componentei softwa re testate.
Functiile sunt testate prin alimentarea lor si examinarea rezultatelor, iar structura
interna a programelor este rareori lua ta in considerare spre deosebire de testare cutie
alba. Testarea functionala descrie de obicei ce face sistemul.
Testare a functionala a aplicatiei web se va produce cu ajutorul lui Protractor. El este
un soft open source, end -to-end framework de testare sp ecial construit pentru
aplicatiile construite in AngularJs. A fost produs de o echipa din cadrul Google,
deasupra WebDri verJs, cu tehnologii existente, cum ar fi Selenium, NodeJs si Jasmine
ceea ce face testarea destul de usor de constituit si foarte intui tiva. Este, de asemenea,
un inlocuitor pentru cadrul de testare AngularJs E2E, numit ‘Runner Sce nario
Angular’.”

Avanta jele Protractor sunt urmatoarele :
• Usor de instalat si de configurat
• Usor de randat datorita framework -ului jasmine
• Sustinerea testului de date
• Includeti toate avantajele produsului Selenium WebDriver
• Auto -sincronizare
• Suporta teste paralele prin mai multe motoare de cautare
• Viteza excelenta

In cele ce urmeza voi porni de la componentele acestei functionalitati de end to end pe
care o are angular.
In proiectul principal avem un folder cu numele e2e, acesta contine trei fisiere cu
numele:

_______ __________ ____
[10] https://medium.com/@marcozuccaroli/functional -testing -with-protractor -and-angular -cli-getting -started -c3ddeefbc4da

55 • tsconfig.e2 e.json (acest fisier este configurare a acestui proces, fiind de forma
json, avand mai multe valor i cheie precum type in care enumera framework –
urile pe care le va folosi ex: jasmine)
• protractor.conf.js (acest fisier configureaza tot procesul pe care protr actor il va
initia folosind comanda ng e2e din cadrul comenzilor specifice angular -cli)
• src (acest folder cuprinde cele doua fisiere specifice testarii si anume: app.e2e –
spec.ts respectiv app.po.ts)
Voi descrie pe scurt cele doua fisiere de testare dupa ca re voi ilustra printr -o poza
procesul de testare functionala explicand fiecare linie de cod din acesta.
App.po.ts este f isierul clasa care defineste anumite metode care vor fi importate
eventual in fisierul de test app.e2e.spec.ts.
Aceste metode se defines c in cadrul clasei AppPage care va fi importata cu ajutorul
comenzi :
import { AppPage } from './app.po' ;

App.e2e -spec. ts este fisierul centrat pentru testarea functionala in proiectele de
angular. Voi prezenta intr -o poza principalele functionalitati si parcurgerea testata a
mai multor componente din cadrul unui proces de selectie a unor pro duse conditionata
fiind de nece sitatea unei logari controlate.
Dupa cum am mentionat si mai sus importam fisierul app.po.ts cu classa AppPage
folosind astfel metodele : navigateTo si getTitleText care nu fac altceva decat sa
produca prima parte a testului adica : navigarea pe ruta home si sa verifice daca

56 numele de ShopyFy exista in titlul site -ului, daca instructiunea este adevarata atunci
trece mai departe la urmatoru l test.

Voi parcurge pe scurt fiecare test in parte:
• incercam sa dam click pe un produs ca sa -i vizualizam toate detali ile, acest
lucru ne conduce la redirectionarea pe pagina de login, credentialele unui
cont creat fiind necesare
• Verificam daca dupa even tul de click am fost redirectionati pe componenta
de login, daca verificare est e adevarata testul trece mai departe
• Acum vom introduce in campurile de login credentialele pentru o actiune
intampinata cu succes, dupa care declansam un evenimet de click pe
butonul de login
• in ultima fata verificam daca userul s -a logat corespunzator co mparand in
panoul user credentialele intr oduse mai sus in componenta de logare

In cele ce urmeaza voi simula cu ajutorul unei poze acest proces compilat cu succes si
timpul nec esar realizarii acestui fapt:

57 7.4. Testarea sistemului de recomandari
Legat de testarea sistemului de recomandare am folosit metoda MSE sau mean square
error pe care o voi descrie in cele ce urmeaza invocant metoda de testare cu partea de
cod aferenta a cestuia.
MSE sau eroare medie patratica masoara media patratelor erorilor – adica diferenta
medie patrata intre valorare si ceea ce este estimat. MSE este o functie de risc, care
corespunde valorii asteptate a pierderii de eroare patrata.
Faptul ca MSE est e intotdeauna strict pozitiv (si nu 0) se datoreaza intampinarii sau
pentru ca est imatorul nu tine cont de informatiile care ar putea genera o estimare mai
precisa.

Voi prezenta in cele ce urmeaza functia de testare prezenta in sistemul de
recomandare:

def test(df3,dfReviews_train ,dfReviews_test ,lentrain ,lentest ):
df5_train_target = df3["overall" ][:lentrain]
df5_test_ta rget = df3["overall" ][lentrain:lentrain +lentest]
df5_train_target = df5_train_target.astype( int)
df5_test_target = df5_test_target.ast ype(int)
n_neighbors = 4
knnclf = neighbors.KNeighborsClassifier(n_neighbors, weights ='distance' )
knnclf.fit(dfReview s_train, df5_train_target)
knnpreds_test = knnclf.predict(dfReviews_test)
print ("Accuracy: " ,accuracy_score(df5_test_target, knnpreds_ test))
print ("MSE: " ,mean_squared_error(df5_test_target, knnpreds_test))

Functia de test are cinci argumente toare re prezentand date lengate de partitionarea
datei referitoare la reviews sau revizuiri si matricea tranformata cu CountVectorizer
pentru pr odusele testate.
Modul de testare este unul supervizat, de aceea avem in functia
neighbours.KneighborsClassifier argumen tul de weights=’distances’.

58 Dupa antrenarea retelei voi afisa cei doi metrici de acuratete si eroare medie patratica.
Acestia vor avea urmatoarele valo r:

CONCLUZII
Aplicatia prezentata mai sus este construita din patru parti si anume:
• Front -end
• Back -end
• Api-uri
• Recommender System

Voi formula o concluzie pentru fiecare parte din acestea amintite, aplicand o parere
personala asupra fiecarui aspect.
Partea de Front -end am realizat -o in Angular 7. Acest framework de javascript creat
de google are o arhi tectura bine pusa la punct, fiecare componenta avand la baza un
model MVC adica Model View Controller.
Partea mai putin buna a acestui framwork este faptul ca avem o gama destul de
diversificata de metode care seamana intre ele, multi utilizatori avand mod ul lor
propriu de codare, astfel incat cei care preiau codul au o misiune mai dificila de a
intelege respectiv de al modifica. Un exem plu scurt pentru acest lucru o reprezinta
comunicare dintre elemente care are nu mai multe de 4 metode: comunicare dintre
parinte copil cu ajutorul lui @Input() si single binding pe tagul componentei copil,
comunicare dintre coli parinte cu ajutorul lui @O utput si EventEmitter cu un event
listener pe tagul componentei copil, comunicare dintre parinte si copil cu ajutorul
View Child si inca o comunicare dintre componentele de tip rude sau sibblings cu
ajutorul rxjs adica ReactiveJavaScript.

59 Pentru partea de Back-end am folosit limbajul de programare Nodejs care poate fi
gestionat cu ajutorul javascript, el avand o arhitectura b azata pe evenimente, capabila
de input si output asyncron.
Cu ajutorul frameworkului express aceasta partea a proiectului a fost reali zata cu
usurinta.
Pentru partea de baze de date am folosit un limbaj de programare noSQL pe nume
mongoDb legat de serverul de node. Acest limbaj de gestionare este format din
colectii si records care au un tip de forma json ceea ce mi -a usurat cu mult munc a,
avand interogari simple si eficiente.
Baza de date am obtinut -o de la amazon.com, acestia mi -au furnizat -o in format js on
avand pt fiecare obiect/produs mai multe revizuiri care m -au ajutat sa creez sistemul
de recomandare.

Api-rile pe care le am folos it au legatura stransa cu google, acest api se numeste
DialogFlow si are la baza un sistem implementat cu inteligenta arti ficiala care poate
intui ce anume vrea sa specifice utilizatorul folosind un chat integrat in cadrul
aplicatiei web.

Sistemul de reco mandare a fost realizat in python si importat pe un end -point de flask
acesta avand posibilitatea sa faca recomandari intr -un mod offline care este mult mai
rapid, dar si intr -un mod offline care este putin mai lent datorita interogarilor realizate
cu baza de date pentru preluarea de noi date.
Acesta face recomandarile in functie de comentariile fiecarui utilizator la adresa
produselui listate. Pentru aceasta am folosit libraria sklearn care are mai multe clase si
metode special concepute pentru acest lucru , detalii despre acestea au fost reamin tite
in capitolele anterioare.

60 BIBLIOGRAFIE
________ ______________
[1] https://medium.com/@ TechMagic/reactjs -vs-angular5 -vs-vue-js-what -to-
choose -in-2018 -b91e028fa91d
[2] https://ro.wikipedia.org/wiki/Baz%C4%83_de_date
[3]https:/ /ro.wikipedia.org/wiki/Mon goDB
[4]https://en.wikipedia.org/wiki/Server_(computing)
[5]https://en.wikipedia.org/wiki/Node.js
[6]https://ro.wikipedia.org/wiki/Python
[7]https://scikit -learn.org/stable/
[8]https://www.sciencedirect.com/science/article/pii/S1 110866515000341
[9]https://medium.com/frontend -fun/angular -unit-testing -jasmi ne-karma -step-
by-step-e3376d110ab4
[10]https://medium.com/@marcozuccaroli/functional -testing -with-protractor –
and-angular -cli-getting -started -c3ddeefbc4da
1. https://www.quora.com/
2. http://www.methodsandtools.com/tools/karma.php
3. https://www.softwaretestingclass.com/application -testing/
4. https://www.uniassignment.com
5. https://scikit -learn.org/stable/modules/neighbors.html
6. https://www.tutorialspoint.com
7. https://expressjs.com/en/guide/routing.html
8. https://nodejs.org/en/about/
9. WIKIPEDI A
10. CAMBRIDGE SPARK.
11. HARHARD
12. MEDIUM,
13. THE ADAPTIVE WEB (Peter Brusilovsky Alfred Kobsa Wolfgang Nejdl )