SPECIALIZAREA Informatică [616777]

1

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

LUCRARE DE LICENȚĂ

COORDONATOR ȘTIINȚIFIC: ABSOLVENT: [anonimizat]
2019

2

3

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

SISTEME DE RECOMANDARE
ONLINE STORAGE

COORDONATOR ȘTIINȚIFIC: ABSOLVENT: [anonimizat]
2019

4

5

DECLARAȚIE DE AUTENTICITATE

Subsemnatul/a……………………………………………………………………,absolvent: [anonimizat]/master, promoția .. …. în
specializarea……………………………….., FACULTATEA DE
MATEMATICĂ ȘI INFORMAT ICĂ SPECIALIZAREA Informatică, în
legătură cu elaborarea lucrării de licență cu titlul
………………………………………………………….. …………………………………………..
………………………………………….. …………………………………………………………..
……………….coordonator……………………………………………………………………..
……………,prin prezenta declar pe propria 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 precizată
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 alegerea temei ……………………. ………………………………………………. 10
1.2. Prezentarea conceptul ui aplicației ………………………………………………………………. 11
1.3. Descrierea componentelor aplicației ………………………………………………………. …..11
1.4. Utilizarea aplicației …………………………………………………………………………………. .13

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 APLICAȚII WEB PE DIFERITE
FRAM EWORK -URI ………………………….. ………………………….. ………………………….. ……… 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 …………………. 26
4.1. Scurt istoric al bazelor de date ………………………….. ………………………….. ……….. 26
4.2. MongoDb și conectarea la baza de date ………………………….. ………………………… 26
4.3. Co ncluzi i ………………………….. ………………………….. ………………………….. ……….. 27

CAPITOLUL 5. SERVERE ȘI DIFERITE METODE DE GESTIUNE A
BAZELOR DE DATE ………………………….. ………………………….. ………………………….. ……. 28
5.1. Scurt istoric ………………………… ……………………………………………………… …………… 28
5.2. Node .js și framewok -urile acestuia …………………………………………………………….. 28
5.3. Crearea unui server ……….. …………………… ……………………………………………………. 29
5.4. Comunicarea dintre un server și partea de Front End ……………… ……………….. ……30
5.5. Concluzii…… ………………………….. ………………………….. ………………………….. …..33

8
CAPITOLUL 6. RECOMMENDATION SYSTEM ………………………….. …………………… 33
6.1. Scurt istoric ………………………….. ………………………….. ………………………….. …….33
6.2. Python Sklearn ………………………….. ………………………….. ………………………….. ..36
6.3. Descriere aplicație Recommender System ………………………….. …………………….. 37
6.4. Concluzii ………………………….. ………………………….. ………………………….. ……….. 46

CAPITOLUL 7. TESTARE AUTOMATĂ ………………………….. ………………………….. …… 47
7.1. Testarea aplicațiilor ………………………. …………………………………………………………. 47
7.2. Testare Front -end Karma, Jasmine.. ……………………………………………………………. 50
7.3. Testare funcțională …………………………………………………… ……………………………… 54
7.4. Testarea sistemului de recomandari…………………………. ………………………………… 57

CONCLUZII ………………………….. ………………………….. ………………………….. ………………… 58

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

9

INTRODUCERE

Tema principal ă a acestei lucr ări este un system de recomandare f ăcut in P ython ,
pentru un website care are o parte de front -end construit ă în Anuglar 5, o baz ă de date
in MySQL și cu un backend f ăcut in Node .js.
Mai întâi voi spune c âteva cuvin te despre ce repr ezint ă un system
recommendation și abordarea pe care acest proiect o va avea pentru aceast ă temă.
În zilele de azi , sistemele de recomandare sunt create pentru a personaliza
experien ța ta pe internet respectiv site -urile pe care utilizatorii le ace sează, spun âdu-le
acestora ce s ă cumpere, ce s ă mănânce, sau chiar cu cine ar trebui s ă se
împriet enească . Oameni i tind să aibă aceleași gusturi cu person ele apropiate lor.
Sistemele de recomandare înglobează toate aceste modele ca s ă prezic ă ce lucru îți
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,
ceea ce reprezintă o strategie din care castig ă ambele par ți.

10 CAPITOLUL 1.
1.1. Motive pentru alegerea temei
Motivul pentru care am ales aceast ă temă a fost unul pur științific, fiind curios
cum a ș putea implementa inteligen ța artificial ă pe partea de web application.
Am avut anumite probleme pentru c ă nu am dispus ini țial de o baz ă de date populat ă
de useri reali cu care s ă revizuiesc produsele mele, a șa că am cerut ajutorul
amazon.com pentru a face rost de ace asta.
Având aceast ă bază de date am putu t să realizez produsul a șteptat.
Pentru mine a fost o provocare aceast ă aplica ție și cred c ă pană la urm ă am dus treaba
la bun sf ârșit.
Frame -work -ul ales de mine a fost Angular pentru c ă are o structur ă exemplar ă,
arhitectur ă primitoare si este u șor de folosit.
MongoDB pentru partea de baze de date pentru c ă folose ște obiecte de tip json, iar
fisierele primite de la amazon au fost de acet tip. Pentru aplica ții mai mici ce nu
necesit ă interog ări foarte complexe este perfect.
Partea de server am fol osit Node.js știind deja JavaS cript, mi-a fost u șor, mai ales
folosind framework -ul Express care m -a ajutat simplific ându-mi munca cu mult.
Pentru partea de api -uri am folosit Dialog Flow, un produs google pentru a descoperi
intentul clientului care își spun e problemele prin chat, vorbind practic cu un robot, am
vrut sa aprofundez și acest subiect, dar am luat o abordare simpl ă, func ționalit ățile
nefiind foarte importante.
Sistemul de recomandare l -am constituit în Python pentru c ă acest limbaj de
programare are multe libr ări si module special concepute pentru partea de neural
network.
Serverul sau end -point -ul pe care ruleaz ă acest sistem de recomandare l -am făcut de
asemenea in P ython folosid F lask. A fost u șor deoarece importarea c ât și folosirea
funcțiilor importante s -a realizat in doua linii de cod.

11 1.2. Prezentarea conceptului aplicației .

Concep tul aplica ției este de a reda clientului posibilitatea de inregistrare, logare,
vizualizare produse, cump ărare, evaluare, comentare la adresa calit ății și a altor
criterii, c ăutarea anumitor produse c ât și recomandarea acestora.
Pentru partea de contact mai este un serviciu clien ți, în care clientul poate vorbi cu un
chatbot care il asigur ă că problema lui va fi luat ă în calcul.
Pe pagina principal ă avem p rincipalele categorii de produse cu un top trei , cele mai
revizuite dintre ele.

1.3. Descrierea componentelor aplicației

Aplica ția web are 33 de componente , care sunt împărțite pe toate rutele aplica ției.
Voi crea o diagram ă care s ă poziționeze a ceste componente pe pagina web a șa cum se
aratajeaz ă acestea în mod normal utiliz ând aplica ția.
Aceast ă diagram ă va ilustra doar componentele cele mai importante ale aplica ției
deoarece pintre cele 33 de componente se afl ă și servicii care sunt doar în anu mite
cazuri folosite.
Voi prezenta o poz ă pentru cazul în care user -ul este logat și a cumpara t un produs
selectat.
Aceast ă pagin ă va avea cea mai mult ă funcționalitate, prin urmare vor intervenii cele
mai multe componente în asamblarea ei.

Poza va fi p reluat ă de pe ruta /itemDetails/B000089GN3

12
Acum voi ilustra o diagram ă uml în care componentele din imagine vor lua imaginea
unui arbore, cu leg ăturile de rigoare dintre acestea .

13 1.4. Utilizarea aplicației
Aplica ția are patru componente car e trebuie rulate simulta n pentru a avea parte d e
toată funcționalitatea acesteia.
Aplica ția va rula pe motorul de c ăutare Google Chrome și va avea nevoie de anumite
instruc țiuni de pornire.
Voi descrie toate componentele ce intr ă în alc ătuirea acestei apli cații și anume:

• Partea de Front -end va porni cu ajutorul comenzi ng server -side
• Partea de Back -end va porni cu ajutorul comenzi nodemon server.js
• Partea de api va porni pe un server nou cu comanda nodemon index.js
• Partea de end point in F lask va porni cu comanda și aici vom avea dou ă:
1. export FLASK_APP=server.py
2. flask run

Aceste comenzi trebuie scrie in linia de comand ă a terminalului în cadrul fiec ărei par ți
în parte.
După ce am urmat ace ști pași, se va deschide un server local cu portul 4200 unde vom
putea interac ționa cu aplica ția

14 CAPITOLUL2. DESCRIEREA CONTEXTULUI APLICAȚIEI

2.1. Scurt istoric al aplicațiilor web
Prin web design se înțelege crearea de site -uri web, de la momentul conceperii
structur ării și interfe țelor grafice p ână la introducerea propriuzis ă a datelor care
alcătuiesc într-un final con ținutul site -ului: imagini, elemente etc.
Primul designer web a fost Tim Berners Lee, inventatorul www -ului, care în anul
1991 a publicat primul site din istorie.
La inceput site-urile web aveau o complexitate mult mai sc ăzută ca acum, ele fiind
realizate în mare parte în HTML, limbaj care nu este at ât de complex , permi țând doar
o serie limitat ă de format ări, precum inserarea de linkuri pentru a naviga de pe o
pagin ă pe alta, iar designul web fiind mai mult un soi de programare web.
În present exist ă o preocupare ridicat ă pentru aspectul gafic al site -urilor,
devenite puternice intrumente de comercializare, publicitate iar acest lucru justific ă
denumirea de web design.
Tehnologiile utilizate s -au diversificat foarte mult, in prezent fiind din ce in ce
mai complexe, reamintim aici c âteva limbaje: P ython cu frameworkul de web Django,
Php, JavaS cript cu multitudinea de frameworkuri cele mai importante fiind (Angul ar,
React , Vue .js).
Companiile care au ca activitate principal ă produc ția de site -uri au angaja ți
specializa ți pentru fiecare etapa din crearea și dezvoltarea unui site, de la stadiul de
concept grafic la programare si editare de con ținut pentru motoarele de c ăutare adica
SEO (search engine optimization).
Site-urile din prezent sunt din ce în ce mai mult axate pe dinamism si anima ție
interactiv ă, aceste necesit ăți fiind îndeplinite de cunoscutul Adobe Flash, precum și
alte programe ap ărute dup ă acesta, care pot genera diferite fi șiere animate în diferite
formate care pot fi u șor urcate pe site.
Site-urile sunt realizate și structurate astfel încât fiecare persoan ă fără cuno ștință în
domeniu s ă poată să le utilizeze cu u șurința, ele fiind afi șate intr -un browser.
Web designerii lucreaz ă în diferite limbaje din care a poi se genereaz ă într-un limbaj
specific al internetului HTML(HyperText Markup Language) sau direct in HTML.

15 Dacă nu ar fi existat browserele specializate care s ă știe să interpreteze partea
de script atunci site -urile ar fi niste blocuri de text fără imagini, f ără prea mult ă putere
de interac țiune din partea clientului.
În principal limbajul HTML indic ă locul unde s ă se afi șeze eventualele elemente .
2.2. Componente generale ale unei arhitecturi pentru aplicațiile web

Arhitectura Web stan dard a fost proiectat ă astfel încât un calculator client poate
interac ționa cu un calculator server printr -o conectare printr -o rețea TCP/IP .
Browser -ul și serverul comunic ă utiliz ând protocolul Hypertext Transport
Protocol (HTTP). TCP/IP manevreaz ă detali ile de transport, asigur ându-se că
pachetele ajung la destina ție corect. HTTP structureaz ă comunica ția legat ă de fișierele
ce se primesc și cum se interpreteaz ă ele. Aceasta permite software -ului Web s ă fie
focalizat asupra a ceea ce face mai bine: accesar ea și afișarea con ținutului. Ca
majoritatea proiectelor client/server, Web -ul utilizeaz ă o metod ă cerere -răspuns, ceea
ce inseamn ă că serverul asteapt ă și ascult ă cererile clientului înainte de a r ăspunde la
ele.

16 Browser -ul Web cere o anumit ă pagină web (URL – Uniform Resource Locator)
de la server. Nu conteaz ă dacă 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 c ă serverul de Web r ăspunde la cer eri, de obicei trimise de un browser
web sub controlul utilizatorului.
Software -ul serverului Web este instalat pe un calculator gazd ă potrivit. În
funcție de volumul cererilor pe care trebuie s ă le manipuleze serverul , se alege
sistemul de operar e și platforma harware pentru server. Odat ă instalate si configurate,
majoritatea serverelor web doar asteapt ă și ascult ă dacă exist ă cereri de la browser -ele
web.
O dat ă recep ționat ă cererea, serverul intr ă în acțiune. Serverul localizeaz ă URL –
ul cerut și îl copiaz ă pe conexiunea re țea, unde TCP/IP il transport ă la browser. În
momentul în care browser -ul prime ște fișierul cerut (pagina web) de la server,
browser -ul interpreteaz ă HTML -ul (și alte coduri incluse) și afișează fișierul (pagina
web) cor ect (cu maximum capacit ăților sale) pe calculatorul client.
În general, web -ul a fost descris ca și cross -platform ă dinamic ă, sistem
informatic hipermedia distribuit ce ruleaz ă pe Internet. De fapt Web -ul este prima
genera ție a unei noi clase de si steme distribuite ce continu ă să evolueze rapid. Aceste
sisteme au marea capacitate s ă integreze sistemele informa ționale și bazele de date
deja construite cu cele ce urmeaz ă sa fie construite.
Web-ul este u șor de utilizat, iar HTML -ul este u șor de scris. Totu și, Web -ul ca și
platform ă de dezvoltare sistem, este plin de provoc ări; aceasta întruc ât dezvoltarea
sistemelor presupune adesea o sarcin ă dificil ă de integrare a oamenilor, a datelor, a
proceselor, a retelelor cu tehnologii potrivite în vede rea rezolv ării problemelor și
creării oportunit ăților. Dezvoltarea efectiv ă a aplica țiilor Web este creativ ă și implic ă
o mul țime de alți factori pe ling ă cei lega ți de tehnologie.
Utilizarea Web -ului ca mediu de dezvoltare este relativ recent ă;
datorită mediului de dezvoltare, o aplica ție Web este în general format ă din mai multe
părți și folose ște mai multe tehnologii. Cadrul de lucru pentru dezvoltarea Web
constituie un exemplu de combina ție fericit ă intre o mul țime de tehnologii, fiecare
limita tă in domeniul s ău de ac țiune. În ciuda acestor limit ări, combina ția acestor
tehnologii în aplica ții furnizeaz ă o modalitate extrem de eficient ă pentru dezvoltarea
de solu ții pentru Internet și intranet.

17 2.3. Arhitectura
Arhitectura acestei aplica ții web e ste împărțită în patru mari categorii și anume:
• Partea de server și api-urile aferente
• System Recommendation
• Baza de date
• Parte a de Front -end
Serverul și api-urile aferente
Pentru aceast ă aplica ție, am preferat s ă utilizez Node .js cu frameworkul E xpress
pentru a u șura codul și pentru a avea o experien ță mai pl ăcută.
Node.j s este un limbaj de programare asyncron bazat pe JavaScript. El este conceput
pentru a constui aplica ții scalabile pentru partea de re țele/servere.
Acest limbaj de programare este asem ănător lui Pyhton sau R uby, doar c ă Node.js
duce partea de event model mai departe si previne singur ciclarea evenimentelor ca
parte de runti ne.
Acest server de N ode.js mai are leg ături cu un api, pentru un chatbot care este ata șat
site-ului sau aplica ției web . Numele acestui api este DialogFlow și este creat de
Google.
Acest api le permite user -ilor un nou fel de a interac ționa cu produsele expuse prin
intermediul aceste i aplica ții. Acest produs este bazat pe interac țiune pe cale oral ă sau
prin text a clientu lui cu eventualul bot.
DialogFlow a fost conectat pe server prin cadrul unui webhook si prime ște requesturi
de la useri prin intermediul aplica ției web, acesta la r ândul lui trimi țând răspunsuri
înapoi la aplica ție iar în final mesajul va fi afi șat pe part ea de Front-end unde clientul
va fi int âmpinat de un r ăspuns promt și precis.
Acest api este bazat pe intent -uri si are o ma șinărie de învățare pe server, fiecare fraz ă
fiind analizat ă și interpretat ă. În func ție de complexitatea botului creat, el poate
susține o discu ție cu un eventual client cre ândui impresia de o adevarat ă conversa ție.

System Recommendation
Acest system de recomandare este construit in P ython3 cu ajutorul libr ăriei ‘S klear’ și
este folosit cu ajutorul unui end -point f ăcut în Flask, la c are ulterior Front -end-ul face
requesturi prin care cere anumite informa ții legate de un anumit produs.
Voi prezenta ulterior o schem ă care s ă clarifice și mai mult situa ția:

18

Voi prezenta pe scurt libr ăria S klearn, iar ulterior voi revenii cu mai multe detalii în
capitolul 6 unde voi prezenta în detali u algoritmul și modul în care acest sistem de
recomandare func ționeaz ă.
În prezenta lucrare am folosit ca algoritm de clasificare ‘sklearn.neighbors’ care
suplimenteaz ă funcționalitate a supervizat ă și nesupervizat ă pentru metoda neighbors
de învățare.
Metoda neighbor de inv ățare nesupervizat ă se poate întâlni mai ales pentru grup ările
spectrale.
Cea supervizat ă prezint ă doua ramifica ții și anume: metoda de clasificare cu etichete
discrete și metoda reg resiei pentru date cu etichete continue.
In ciuda faptului c ă nu pare simpl ă, metoda ‘sklearn .neighbors ’ a făcut fa ță cu succes
numarului mare de clasific ări și problemelor de regresie, incluz ând scanarea literelor
scrise de m ână și a imaginilor din sateli t, fiind o meto da dată fară parametri, fiind
adesea cu succes folosit ă în situa ții în care este dificil ă clasificarea, aceasta fiind
adesea neregulat ă.
Pentru NearestNeighbors implementeaz ă metoda nesupervizat ă a celui mai apropiat
vecin. Ac ționeaz ă ca o interfa ță uniform ă cu trei algoritmi diferi ți și anume:
• BallTree
• KDTree
• Brute Force
Aceast ă alegere este contro lată prin atributul ‘algorithm’ care poate avea urmatoarele
valor i : ['auto', 'ball_tree', 'kd_tree', 'brute']
Când valoarea algoritmului este auto, atunci acesta tinde s ă aleag ă cea mai bun ă
metod ă pentru valorile de antrenare.

19 Baza de date a fost creat ă în limbajul mysql care este un sistem de gesiune a bazalor
de date și de rela ționare, produs de compania suedez ă MySql. Este unul din cele mai
populare SGBD -uri open -source la ora actual ă.
Acest limbaj a fost creat in C ++ și C. Parserul SQL a fost scris în yaac.
Are și parte de server și anume MySql server care con ține libr ării propri.
Acesta are și o parte de vizualizare a bazei de date cu toate tabele le aferente, unde
proprietarul poate interac ționa direct cu aceasta numit ă MySql Workb ench.
Aplicatia are la baz ă un num ăr de cinci tabel e și anume:
• categorySubtype
• items
• itemsoferte
• raiting
• users
În subcapitolul de concluzii voi reveni cu o tabel ă uml în care voi explica rela țiile
dintre aceste tabele.

Partea de Front -end
Aceast ă parte, fiind și cea mai gene roasă, exercit ă posibilitatea de a vizualiza și
interac ționa cu toate produsele si atributele/optiuni le pe care aceast ă aplica ție le ofer ă.
Pe scurt aplica ția este realizat ă în Angular 5 un framework popular de JavaScript,
conceput de Google.
Acest framewo rk este structurat pentru aplica ții web dinamice și permite utilizarea
HTML -ului ca o parte din componenta creat ă. Angular creaz ă o legatur ă cu informa ția
și elimin ă injec ția dependentelor usur ând astfel metoda de codare și elimin ă cu
aceast ă ocazie și mul t din textul codului.
Angular este bazat pe componete și le randeaz ă automat pe site fiind a single page
aplication. Componentele sunt formate din patru fisiere put ând fi generate automat cu
ajutorul modulului angular -cli instalat prin node package module cu comanda „ ng g c
numecomponenta ”.
Aceste folder care alc ătuiește corpul componente i este format din patru mari fi șiere și
care au fiecare în parte , partea lui în concep ția designul aranjarea func ționalitatea și
testarea componetei:
• componenta.ts

20 • componen ta.html
• componenta.css
• componenta.spec.ts
Componet a.ts are ca rol partea de funcț ionalitate a componentei respective ea fiind
gestiona ta prin intermediul limbajului TypeS cript care este ulterior compilat ș i
transformat in cod de JavaS cript. Limbajul TypeScript este după parerea mea mult
mai puternic decat JavaS cript avand avantaje esențiale : crearea de clase, interfețe,
multe module și o parte î n care se p ot predefinii tipul de date ale variabilelor după
cum îl recomandă ș i numele.
Componenta.htm l are ca rol partea de poziționare a elementelor cât și crearea de
legături cu componeta. ts. Index.html este componenta părinte care randează pe rând
toate parț ile de html aferente componentelor in parte.
Compone nta.css are ca rol stilizarea părții d e html a acesteia, această partea are un
rol esențial î n vizualizarea componetelor ea fiind s ingura posibilitate de stilizare a
elementelor. Această componentă este legată strict de partea de ht ml a acesteia
neavand posibilități de aplicare globală pentru toate componentele.
Pentru a putea s tiliza global aveam o componentă globală ș i anume
app.component.css unde putem accesa toate ele mentele din componentele aplicaț iei.
Componenta.spec.t s are rolul de a testa acestea în modul unit testing pentru
fișierul sursă. Acestea rulează in Jasmine JavaS cript test framework prin intermediul
lui Karma c are rulează sarcinile când testerul introduce în linia de comandă „ng test”.

2.4. Concluzii
În concluzii voi prezenta diagrama uml a aplicației elaborând și explicând pe larg
legăturile dintre componentele esențiale ale aplicaț iei.
Prima dată mă voi referi la limbajele utilizate făcând referință la alternativele pe
care un programat or (web designer) le poate avea :
Pentru partea de backend/serve r-side, am ales N ode.js pentru că foloseș te limbaj ul
JavaS cript, fiind un limbaj uș or de manevrat și care a avut o ascensiune în ultimii ani
fiind clasat pe locul t rei într -un clasament făcut de GitHub, sub P ython ș i Java.
Alegerea mea pe ntru partea de stocare de date ș i manipulare a fost mysql care are
o interfață primitoare desi MongoDB are o mai uș oara structură, nu foarte complexă
bazată pe colecț ii și care folosește un limbaj N oSql, am vrut să rămâ n la vechiul S ql

21 pentru că foarte multe baze de date sunt g estionate și au nevoie î n continuare de
support pe acest limbaj in detri mentul lui MongoDB care est e un produs recent scos
pe piață .
Pentru partea de front -end, am rămas tot la promițătorul JavaS cript, alegâ nd
frameworkul Angular . Opinii pro ș i contra au existat tot timpul, mulți din branșa
web-designe -rilor au trecut rând pe râ nd la frameworkul React dezvoltat de Facebook,
din cauza evolutiei ș i deprecierilor permanente pe care Angular le-a avut. El avâ nd
actual 7 versiuni, si o schimbare radi cală de arhitectură de la AngularJs la Angular 2.
În ultimul timp React a caș tigat teren ș i pe partea de joburi, oferind multe
oportunități proaspeților candidaț i. În schimb Angular rămâne în top și promite în
continuare, iar cei de la Google pun d in ce în ce mai mult accent pe această parte de
dezvoltare. Cel mai proaspă t framework V ue.js vine cu o nouă abordare, o arhitectură
interesantă, fiind ușor de manevrat, recomandat pentru aplicaț ii mici deoarece
arhitectura ace stuia nu permite descompuner ea în fisiere a celor 4 elemente esenț iale,
acestea fiind toate adunate î n componeta acestuia „numecomponeta.vue” avâ nd o
parte de template unde este randat html -ul, o par te de script unde este introdusă partea
de funcționalitate și la sfârșit partea de st ilizare î n care este introdus codul de css. In
final voi prezenta arhitectura aplicaț iei, baza de date, partea de web cât și apiurile care
fac legă tura cu ace asta prin intermediul serverului.
Ca ultim paragraf al acestui su bcapitol voi prezenta o di agramă uml cu arhitectura
aplicaț iei:

22 CAPITOLUL 3. DEZVOLTAREA DE APLICAȚII WEB PE
DIFERITE FRAMEWORK -URI

3.1. Limitările care intervin folosind diferite frameworkuri

Vom prezenta top 3 cele mai folosite framework -uri/libră ri de JavaScript și modul
în care aceste a interacționează cu browserele moderne.
Acest ea sunt Vue .js, Angular și React , 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 prezenta în parte caracteris ticile fiecarui 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 segvenț a de login cu nagivarea pe pagina de
‘/itemDetail/:id’ unde vor aparea și rec omandă rile pentru alte trei produse:

Din cel e prezentate tragem concluzia că Vue .js ocupă un loc fruntaș, urmat de
Angular ș i React.

25 3.2. Caracteristicile frameworkului Angular
Super erou l MVW Angular 5 a venit pe piață în luna noiebrie a nul 2017, deși au fost
ceva intârzieri până să fie scos pe piață , a avut un succes neașteptat.
Motoul pe care l -a avut Angular 5 este următorul : rapid,uș or și simplu de utilizat.
Ca noutate în Angular 5 echipa Google a adăugat Material Desig n pentru a uș ura
procesul de design al aplicaț iilor web.

Ce este nou în Angular 5:

• Aplicații web simple și progresive
• Material Design
• Construcție optimiza tă
• Angular Universal Api și DOM
• Au imbunătăț it Compilatorul și TypeScript
• Cli v1.5
• Router
• Numere, d ata și valuta legate de pipes

26 CAPITOLUL4. DEFERITE METDE DE A STOCA INFORMAȚIILE

4.1. Scurt istoric al bazelor de date

[2] “Bazele de date sau pe scurt BD, reprezintă o metodă de stocare a datelor și
informațiilor pe un suport extern, cu posibilit atea ușoară de extindere și regă sire
rapidă a acestora.
De obi cei o baza de date este memorată în unul sau mai multe fiș iere.
Bazale de date sunt manipulate cu ajutorul sistemelor de gestiune a bazelor de d ate,
un exemplu ar fi: MySql, PostgreSQL , Mongo DB etc.
Cel mai răspândit ti p de baze de date este cel relaț ional, în care datele sunt memorate
în tabele. Pe lângă tabele, o bază de date relațională mai poate conține: indecși,
proceduri de stocare, declanș atori, utilizatori și grupuri de utilizat ori, tipuri de date,
mecanisme de s ecuritate și gestiune a tranzacț iilor etc.
Cele mai noi sisteme de gestiune de date au modelul ierarhic, orientate pe obiecte, și
mai nou, modelul XML”

4.2. MongoDb și conectarea la baza de date
“MongoDB este o bază de date NoSQL open -source orientată pe obiecte.
Diferența principală pe care MongoDB o are față de celelalte sisteme de ges tionare a
bazelor de date este faptul că stocarea datelor nu se fa ce folosind tabele precum o bază
de date relatională, MongoDB stochează datele sub formă de documente de ti p
JSON(JavaS cript object notation) cu scheme dinamice.
MongoDB este scrisă în limbajul C++, aceasta putâ nd conține mai mult e baze de date,
colecții și indecș i. În unele cazuri aceste obiecte pot fi create implicit.
Odată create inregistrările, ele se găsesc intr -un catelog de sistem și anume :
db.system.collection, db.system.indexes.
În plus fiecare inregistrare creată are un index speci al de timp Mongo Object, el
putând fi vă rsat și descompus ca data/monentul la care a av ut loc aceasta inregistrare.”
Pentru a putea să ne conectam la o bază de date m ongo trebuie să instală m cu ajutorul

______________________
[2] https://medium.com/@rwilliams_bv/intro -to-databases -for-people -who-dont-know -a-whole -lot-about -them -a64ae9af712
[3] https://docs.mongodb.com/manual/introduction/

27

npm manager un package numit ‘mongodb ’ iar apoi cu ajutorul i nstrucț iunii:
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,function(err,db){})

Al doilea argument reprezintă o funcție c are ia ca parametrii o eventuală eroare de
conectare și obiectul db, care este practic baza noastră de date pe care vom face
ulterior interogă rile
Primul argumet fiind url -ul de conectare a bazei de date, de exemplu în cazul de fața,
aplicația rulâ nd local url -ul este:
mongodb://localhost:27017/shopsite
La sfârșitul url -ul este numele bazei de date pe care o folosesc.

4.3. Concluzii
MongoDB reprezintă o ab ordare interesantă și nouă a gestionării unei baze de
date. Tabelele poartă numele de colecții iar fiecare rând sau informație stocată în acest
tabel/colecție poartă numele de î nregistr are sau record, avâ nd un format de tip JSON.
MongoDB reprezintă o alter nativă bună pentru vechile metode sql de gestionare, dar
intampină puține probleme când aplicațiile sunt destul de mari neavând interogă ri
foarte complexe pe obiectele stocate .

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

5.1. Scurt istoric
[4] “Serverul reprezintă un prog ram de aplicație care furnizează servicii altor aplicații
care sunt locale sau pe diferite staț ii.
În mod obișnuit serverul așteaptă conex iuni din partea clienț ilor aplicației.
Numele de server se potrivește și pentru un anume calculator pe care rulează anumite
aplicații.
Pentru aplicaț iile mai mari cu mai mulți utilizatori arhitectura se bazează pe sistemul
client -server, care are la baza cel puțin 2 aplicații și cel puțin doua calculatoare.
Serve rele au apăr ut în paralel cu rețeaua de calculatoare. Rețelele permit
calculatoarelor să comuni ce unul cu altul, iar cu cât reț eaua este mai mare apare
nevoia ca un calculator sa ia rolul de server care să servească alte calculatoare.

După apariția serverelor, reț elele s-au dezvoltat și au crescut exponenț ial, iar
minicomputerele au dispărut.
Apariția internetului a dus la această dezvoltare împreuna cu utilizatorii acestor
servicii care au dat impu ls acestei creș teri.”

5.2. Node.js și framewok -urile acestuia

[5] “Node.js este un libaj de programare b azat pe JavaS cript, care rulează toate
acțiunile în mod asyncron.
Asyncron înseamnă în mare parte că fiecare acțiune se propagă deși nu s -a finalizat,
iar compilatorul nu se blochează așteptând răspunsul ci trece mai dep arte la
următoarele instrucțiuni.
Node.js este costruit să creeze aplicații scalare, iar mai multe conexiuni la serverul
ulterior pot fi gestionate.
______________________
[4] https://www.brighthub.com/computing/hardware/articles/17271.aspx
[5] https://nod ejs.org/en/about/

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

5.3. Crearea unui server

În această aplicație am folosit framework -ul Express pentru a cr ea serverul pe care
este situată baza de date, cu următoarele instrucțiuni :
const express = require('express');
1.În prima expresie se importa obiectul express din package -ul in stalat inițial cu
ajutorul instrucț iunii (npm install expr ess –save)
const app = express();
2.Se inițializează variabila app cu care vom crea rutele și funcționalitatea ulterioară
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, POST, 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 setată prefața serverului, ce requesturi acceptă , din ce parte si d e ce tip să
______________________
[5] https://nodejs.org/en/about/

30 fie datele pe care clientul le face .

5.4. Comunicarea dint re un server și partea de Front -end

Cele două apl icații comunică prin anumite requesturi. În mod obișnuit aceste
requesturi asyncrone, dar pot fi transformate și în mod syncron .
Pe parte a de front end s -a folosit libră ria ‘HttpClient’ incl usă în pachetele standard
‘@angular’.
Această librărie are un obi ect care inițiază un request către url -ul serverului nostru.
Voi prezenta o schemă în care voi trata aceast lucru:

31
Un exemplu de request spre server este urmă torul:

login(Email:String, Password:String){
var headers = new HttpHeade rs().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.setItem('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 impă turit intr -un promise ce are ca p arametru o funcț ie cu 2
argumente ‘resolve’ si ‘reject ’ care vo r transmite ulterior datele după terminarea
procesului .
În acest promise se folosește un request de tip http după cum observaț i care are
ca prim argumet rut a unde se va trimite, obiectul ș i un obiect de tip HttpHeaders care
spune î ntr-un fel sau altul , ce tip de date trimite către server, ca un fel de copertă a
unei carți spus în altă formă .
La sfârșitul requestului, putem să gestionăm ră spunsul primit de la server cu ajutorul
metodei ‘.subscribe’ care ia ca parametru o variabilă de tip response, permițându -ne să
modificăm sau să urmăm o logică aferentă funcționalităț ii dorite.
In cele ce urmează, data restituită de server si modificată va fi trimisă că tre partea de
Front -end cu ajutorul comenzii ‘resolve(data)’ si utilizată mai apoi de client.
Pentru partea de server avem definite rutele pe care serverul asteaptă requeturile de la
front-end, unde exemplu este urmă torul:

app.get('/', function (req, res) {
res.send('hello world')
})
Primul argum et este ruta adică „/”, iar cel de al doil ea argument este o funcț ie cu doi
parametrii req,res completâ nd ciclul de la figura de mai sus.
Req este un obiect care reprezintă requestul html din partea front -end-ului și are mai
multe proprietăți ș i anume :
• req.app (această instanță reține informați i despre aplicaț ia Express)
• req.baseUrl (calea URL pe care a fost instalată o instanță a routerului)
• req.body (cea mai importantă parte, pentru varianta de post, delete sau put
cand request -ul trimis din partea front -endului impreună cu o infomație,
aceast a poate fi accesată cu req.body)
• req.path (conț ine path -ul requestului)
• req.protocol (Șirul de protocol de solicitare, "http" sau "https" când este
solicitat cu TLS. )
• req.route (ruta curentă )
• req.secure (este de tip Boolean si returnează true, dacă conexiu nea TLS este
făcută )

33 5.5. Concluzii
În concluzie front -end-ul este acel cod care se execută pe partea clientului. Acest
cod este tipic (HTML, CSS și JavaS cript) care rulează în browser și crează o interfață
utilizator.
Partea de bac k-end este acel cod care rulează pe partea de server, care recepționează
request -uri din partea clientului, conține și logica care face să întoarcă pe ră spuns data
de care are nevoie clientul.
Back -end-ul include de altfel ș i baza de date, ce va stoca î n mod persistent to ate datele
aplicaț iei.

CAPITOLUL 6. RECOMMENDATION SYSTEM

6.1. Scurt istoric
În ziua de azi informația este generată în mod exponențial deoarece tot mai mulț i
oameni folosesc inte rnetul care nu face altceva decât să salveze ac este interacț iuni
uman e.
Acest cumul de informaț ie devine o provocare pentru industria e -market de exemplu
întrebarea fregventă pe care și -o pune producătorul este: cum poț i oferi i cea mai bună
recomandare clientului, determinându -l astfel să cumpere nu unul ci mai multe
produs e.
Pentru a depăș i aceste obstacole, oamenii de cerc etare au depus eforturi substanț iale
pentru a evolu a aceste systeme de recomandare, care ulterior pot prezice cele mai
bune produse pentru client.
Cele mai multe sisteme de recomandare implementează niste tehnici de descoperi re
pentru a produce preziceri câ t mai exacte.
Aceste sisteme de recomandare generează liste de recomandare pe două procese de
filtrare.
Cele două moduri prin care se pot filtra sunt :
• Content -Based
• Collaborative Filtering

Collaborative Filtering

34 Collaborative F iltering pentru produse este bazată pe cunoșterea userilor și atitudinea
acestora față de acestea, care mai poarta și numele de înțelepciunea mulț imii de a
recomanda produse. In contrast Content -Based se bazeaz ă pe atributele produselor s au
a obiectelor comercializate ș i similitudinile dintre ele.
In general, collabor ative filtering sau CF este staț ia pentru sistemele de
recomandare . Algoritmul are niste proprietăț i foarte inter esante prin care este capab il
să înveț e de unul singur, ceea ce inseamnă că poate invăța singur prorietățile sau
atributele pe care să le folosească .
Collaborative filtering este imparțită in 2 mari abordă ri:
• Memory -Based Collaborative Filtering
• Model -Based Collaborative filtering
Memory -Based Collaborative Filtering
În acest caz se utilizează raitingul u ser-ului pentru ca algoritmul să computeze
similitudinile dintre user sau produs/item.
Această abordare este folosită î n general pentru partea de marketing. Ea a fost folosită
la început de toate site -urile cu activitatea principală e -commerce. Este eficient și uș or
de imp lementat. Cele mai uzuale abordă ri sunt neighbourhood -based collaborative
filtering ș i item -based/user -based top N re commendation, pe scurt se crează o mat rice
de M pe N care are pe coloană userii care folosesc acest site ș i pe linie produsele care
se regăsesc pe această aplicaț ie.
Ca exem plu in abordarea user -based, rai tingul pe care userul îl dă produsului i se
calculează ca o agregare a unor asemănă ri dintre useri si retingul lor pentru produse.

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

Din următorul tabel se observă clar ca user -ul U1 pare să aibă gusturi similare cu user –
ul U2 pe când user -ul U3 pare să aibe gusturi diferite de ceilalți 2. Î n concluzie user-ul
U1 și user -ul U2 se numesc vecini sau neighbours, de aici și numele acestei abordă ri.
Pentru a calcula coeficienții și celelalte atribuț ii ne stau la dispozitie formule și
algoritmi specifici pe care îi voi prezenta în capitolele urmă toare.

35 Model -Based Collaborative Filtering
În această abordare modelele su nt create sau construite utilizâ nd diferite data -mining,
algoritmi folosiți î n machi ne learning pentru a prezice rai tingul utiliz atorului pentru
produsele care încă nu au fost evaluate.
Sunt foar te multi al goritmi model -based, amintesc câțiva dintre ei ș i anume: Retea
Bayesiana, Modele Clustering, modele latent semantic precu m valori singurale de
decompoziț ie.
Pentru această abordare, metodele de reducere a dimensiunilor sunt folosite ca
tehnici compl ementare pentru a îmbunătăți robustețea ș i acutitatea pentru abordarea
model -based.
În acest sens, metode ca valori singulare de descom punere sau principiul de analiză a
componentelor, cunoscute ca m odele latent factor, se comprimă î ntr-o mat rice user –
item într-o dimensiune mică î n termini de latent factor.
Un avantaj pentru folosirea acestei abordări este ca î n schimb ul unei matrice de
dimensiune foarte mare ce c onține foarte multe valori lipsă, se va folosi o mult mai
mică matrice intr -un sp ațiu dimensional mai mic.

Content -Based
Aceste sisteme de recomandare recomandă produse similare care au fost cumpărate î n
trecut sau evaluate cu un scor mare pentru un anumit client sau user, neavâ nd nici o
legătură cu ce au evaluat sau cumpărat alț i useri.
Content -based recommendation systems analizează atributele produselor pentru a
identifica produse care sunt pe placul us eri-lor, pentru că paritcularităț ile sistemelor de
recomandare diferă bazate pe reprezentarea produselor sau obiectelor .
În abordar ea content -based, cuvintele cheie s unt pentru a descrie produsele ș i un profil
de user este contruit pentru a indi ca ce tipuri de produse sunt plăcute/cumpă rate de
user. In alte cuvinte, acești algoritmi încearcă să recomande produse care sunt
asemănă toare celor care au fos t cumpărate sau evaluate î n trecut.
Pentru a abstracti za caracteristicile produselor î n sistem, un algoritm de prezentare a
produsului este aplicat. Un foarte utilizat algoritm este fregvența inversă a
documentului mai numită ș i reprezent aria vectorial spa țială.
Pentru a crea un model de user sau un p rofil, sistemele se concentrează pe doua tipuri
de informaț ii:

36 • Un model care caracterizează preferinț ele utilizatorului
• Un model bază pe istoricul userului cu sistemul de recomandare
Practic a ceste metode folosesc un profil de produse (un set discret de caracte ristici si
atribute) caracterizânt acestea î n sistem.
Sistemul crează un profil de useri bazat pe niste vectori de ponderi pentru
caracteristicile p roduselor. Aceste ponderi denotă import anța, fiecare dintre
caracteristicile produselor pentru ut ilizator. Cele mai simple abordări folosesc media
aritmetică a evaluării produselor într -un vector, pe câ nd alte m etode mai sofisticate
folosesc ș i tehnici de machine -learning precum Clasificatorul Bayesian, abore de
decizie și aș a mai departe.
O problemă cheie a acestui sistem este dacă acesta poate să învețe preferințele
utilizatorului în materie de produse și acț iunile acestuia cu privire la o singură sursă
de conținut și de a le utiliza în alte tipuri. Câ nd sistem ul este limitat să recomande
acelaș i tip de produs pe care userul l -a plăcut, valoarea sistemului de recomandare
scade vertiginos, în schimb dacă userul prim este o recomandare care nu seamănă
neap ărat cu produsele pe care acesta le -a plă cut acest sistem de recoandare primeste o
importan ta aparte fiind mai complex decâ t cel prezentat 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 multifuncț ional care
este folosit de Google, Yahoo pentru programarea aplicațiilor web, însă există și o
parte de aplicații științifice sau divertismet care sunt programate parț ial in P ython.
Python pune accent pe curățenia ș i simplitate a codului, iar si ntaxa permite
dezvoltatorilor să exprime unele idei progamatice într -o manieră mai clară și mai
concisă decât î n alte limbaje de programare ca ș i C.
In ceea ce priveș te paradigma de programare, P ython poate servi ca limbaj pentru
soft-urile de tip or ientate pe obiect, dar permite și programare imperativă, funcțională,
sau procedurală .
Sistemul de tipizare este dinamic iar administrarea memoriei decurge automat prin
intermediul unui serviciu ‘gunoi’ (garbage collector).”
____________________ __
[6] https://www.infoworld.com/article/3204016/python/what -is-python.html

37 “Librăria Sklearn este o librărie cu caracter științific, ea fiind folosită î n cadrul
‘Machine Learning’ avand o varietate de caracteristici cum ar fi: casificare, regresie
algorit mi de tip ‘Cluster’.
Scikit -learn este scris i n mare parte in P ython, dar mai are niste algoritmi de bază
scriși î n ‘Cyclon’ pe ntru a atinge anumite performanț e.
Pentru această libră rie problemele se impart in doua categori si anume:
• metoda superv izată
• metoda nesupervizată
Pentru aplicatia mea am folosit metoda nesupervizată ș i o voi detalia în capitolul
urmă tor.
Metoda supervizată care vine cu niș te atribute suplimentare de predicție iar problema
poate fi împărțită din nou în două metode ș i anume:
• clasific are
• regresie
Pentru partea nesupervizată, în care datele constau într -un set de vectori x fără nici o
legătură cu datele ț inta. Scopul acestei probleme este să descopere grupuri de
exemple similare în data noastră, care poartă numele de ‘clustering’ , sau să determine
distribuția datei în spaț iul inputat, numit s i estimator de densitate, sau să expună
această data intr -un spati u dimensional mai redus astfel încât să putem vizualiza
graficul.”

6.3. Descriere aplicație Recommender System
Pentru sistemul de recomandare am folosit P ython3 și libră ria S klearn cu metoda
NearestNeighbour.
Date procesate de acest sistem de recomand are sunt preluate de la amazon și conț in
circa (7,824,482) de reviews pentru (498,196 products).
Aceste produse sunt stocate intr -un format JSON. Voi exemplifica în urmă torul
paragraf un produs din baza de date:

______________________
[7] https://scikit -learn.org/stable/

38 { "asin": "0000031852", "title": "Girls Ballet Tutu Zebra Hot 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", "B003AVEU6G", "B003IEDM9Q", "B002R0FA24",
"B00D23MC6W", " B00D2K0PA0", "B00538F5OK", "B00CEV86I6",
"B002R0FABA", "B00D10CLVW", "B003AVNY6I", "B002GZGI4E",
"B001T9NUFS", "B002R0F7FE", "B00E1YRI4C", "B008UBQZKU",
"B00D103F8U", "B007R2RM8W"], "also_viewed": ["B002BZX8Z6",
"B00JHONN1S", "B008F0SU0Y", "B00D23MC6W", "B 00AFDOPDA",
"B00E1YRI4C", "B002GZGI4E", "B003AVKOP2", "B00D9C1WBM",
"B00CEV8366", "B00CEUX0D8", "B0079ME3KU", "B00CEUWY8K",
"B004FOEEHC", "0000031895", "B00BC4GY9Y", "B003XRKA7A",
"B00K18LKX2", "B00EM7KAG6", "B00AMQ17JA", "B00D9C32NI",
"B002C3Y6WG", "B00JL L4L5Y", "B003AVNY6I", "B008UBQZKU",
"B00D0WDS9A", "B00613WDTQ", "B00538F5OK", "B005C4Y4F6",
"B004LHZ1NY", "B00CPHX76U", "B00CEUWUZC", "B00IJVASUE",
"B00GOR07RE", "B00J2GTM0W", "B00JHNSNSM", "B003IEDM9Q",
"B00CYBU84G", "B008VV8NSQ", "B00CYBULSO", "B00I2UHSZ A",
"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 Sports", "Dance"]] }

Voi detalia și explica acest produs ș i toate valorile cheia a JSON -ului:
• asin (reprezi ntă id-ul produsului)
• title (titlul produsului)
• price (preț ul produsului)
• imUrl (un link către o poză a produsului)

39 • related (aici apar toț i userii care au manifestat un interes de a cumpă ra sau
doar de a privi respectivul produs)
• brand (brandul pr odusului)
• categ ories (categoriile din care face parte produsul)

În baza de date mai sunt stocate si review -urile, esenta acestui sistem d e recomandare
care au forma urmă toare:

{ "reviewerID": "A2SUAM1J3GNN3B", "asin": "0000013714", "reviewerName": "J.
McDonald", "helpf ul": [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 published for singing from more
than playing from. Great p urchase though!", "overall": 5.0, "summary": "Heavenly
Highway Hymns", "unixReviewTime": 1252800000, "reviewTime": "09 13, 2009" }

De asemena rev iew-uri sunt de tip JSON cu urmă toare le 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 (scurtă descriere)
• overall (raiting -ul oferit de user pentru produsul respectiv)
• unixReviewTime (data sub forma de numar)
• reviewTime (data de forma mm , dd, yyyy)
Acest s istem de recomandare prelucrează aceste date î ntr-un mod particular, initial
aceste date, pentru a fi procesate trebuie citite.
Fisierele initiale sunt de ti p json file iar singura problemă a fost m ărimea fiș ierului
fiind de peste 600mb. Așadar, a trebuit o nouă libră rie pe nume Pandas prin care am
făcut citirea fiș ierului.
Functiile pe car e le-am folosit le voi explica în urmă torul 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 funcție este folosită în cea de a doua într -un mod iperativ ș i parcurge fiecare
obiect de tip JSON .
A doua funcție crează o variabilă i=0 si inițializează altă variabilă df = {} cu un
dicționar gol, m ai apoi fiind populat acest dicționar cu obiectele json din fișierul
varsat.
Ca urmare df va fi de forma :
df = { 1:Obiect.JSON,2:Obiect.JSON,3:….}
Ca observație tipul fișierului returnat de funcț ia getDF() este de tip pandas, un tip
special, iar acest obiect are mai multe meto de pe care le voi folosi in următoarele
instrucț iuni.
Următorul pas este să număr grupând fiecare produs după id-ul acestuia (asin) și în
plus să calculez media pe fiecare produs .
Avem urm ătorea instrucțiune care produce acest rezultat ș i anume:
count = df.groupby("asin", as_index=False).count()
mean = df.groupby("asin", as_index=False).mean()

Urmă torul pas este de a grupa aces t count cu restul de produse având î n final pe
fiecare produs câte review -uri a primit cu toate câ mpurile acestuia.
Exemplu de date afișate î n count:

41

Acest pas este necesar pentru a selecta doar o anumit ă parte din aceste review -uri.
Din cauza unei probleme legate de antrenare, am decis ca obiectele s electate s ă aibe
cel pu țin 200 de review -uri asta m ărind succesul sistemului de recomandare.
Acest lucru l -am observat f ăcând repetate schimb ări. Problemele apar atunci c ând un
produs are prea putine review -uri iar sistemul de recomandare nu -l poate clasif ica pe
acea baz ă.
Altă problem ă ar fi num ărul destul de redus de produse cu cel pu țin 200 de review -uri,
acesta fiind de 988 de elemente, un num ăr destul de mic, dar valabil.
Aceast ă grupare se produce cu ajutorul comenzii :
dfMerged = pd.merge(df, count, how='right', on=['asin'])

Pasul urm ător con ține trei instruc țiuni prin care redenumim ni ște câmpuri în datele de
review -uri pentru a ne u șura munca și pentru a fi mai intuitive :
dfMerged["totalReviewers"] = dfMerged["reviewerID_y"]
dfMerged["overallScore "] = dfMerged["overall_x"]
dfMerged["summaryReview"] = dfMerged["summary_x"]

42 Ca urmare a acestor redenumiri vom încerca s ă select ăm data precum am precizat mai
sus, cu criteriul urm ător: fiecare produs va fi nevoit s ă aibă cel pu țin 200 de revizuiri
ca să poată fi luat in considerare.
Aceast ă problem ă va fi rezolvat ă intr-un mod c ât se poate de simplu cu urm ătoarele
instruc țiuni:
dfMerged = dfMerged.sort_values(by='totalReviewers', ascending=False)
dfCount = dfMerged[dfMerged.totalReviewers >= 200]
Prima i nsctruc țiune ajut ă la sortarea listei de produse într-un mod descresc ător. Cea
de-a doua face doar selec ția pe baza c âmpului ‘totalReviewers’ cu criteriu de a fi mai
mare de 200.
Cea mai important ă parte a sistemului de recomandare este pe ce anume ne baz ăm să
producem aceste recomand ări, răspunsul este simplu pe produsele pe care le avem în
baza de date adic ă cele 988, ins ă răspunsul acesta este unul destul de imprecis.
Recomandarea se face pe baza comentariil or fiecărui user la adresa produsului, fiind
cea mai plauzibil ă variant ă, neavand solu ția unei grup ări mai coerente. Cu alte cuvinte
este greu sa faci context ba zându-te pe ni ște produse care nu au tocmai calit ăți sau
componente asem ănătoare.
Context -Based recommenders se bazeaz ă cum am spus mai sus pe similitudinile
produselor, iar ideea de baz ă a acestui sistem este urm ătoarea: dac ă unui user i-a
plăcut un obiect x care este similar cu y, atunci acel uiași user ar trebui s ă-i placă și
produsul y.
Un exemplu de context -based recommender este movieLens c are are ca scop principal
caracterizarea fiec ărui film pe categori ex: Actiune, Comedie, Drama etc., form ând
ulterior o matrice de similitudini pentru toate filmele prezentate.
Pentru modelul meu a fost dificil s ă fac o astfel de matrice, iar ponderea de împărțire
fiind imposibil ă datorit ă numărului mare de categorii și mai mult de at ât, fiecare
produs fiind grupat pe mai multe categori.

Voi da un exemplu interog ând baza de date pentru un anumit element :

Acest obiect 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

Următoarea etap ă este s ă parsăm aceste comentarii, adic ă să elimin ăm semnele de
punctua ție dintre cuvint e, cuvinte ce vor avea un rol esen țial în recomandarea
ulterioar ă.
Voi expune în urm ătorul paragraf func ția de parsare și eliminare a punctua țiilor:
regEx = re.compile('[^a -z]+')
def cleanReviews(reviewText):
reviewText = reviewText.lower()
reviewText = re gEx.sub(' ', reviewText).strip()
return reviewText

Aceast ă funcție va fi aplicat ă câmpului ‘summaryReview’ cu urm ătoare a instruc țiune:
df["summaryClean"] = df["summaryReview"].apply(cleanReviews)

Urmeaz ă să eliminam toate elementele care au acela și scor cu urm ătoarea
instruc țiune:
df3 = df3.drop_duplicates(['overall'], keep='last')

44 Aceat ă instruc țiune elimin ă doar duplicatele p ăstrand doar una din revizuire. Ca
urmare num ărulul produselor scade la 966 cu c âte 200 de revizuiri fiecare în parte.
In cele ce urmeaz ă voi face apel la libr ăria sklearn pe care am folosit -o pentru aceast ă
parte a proiectului și vom importa din ea metoda ‘CountVectorizer’ prin urm ătoarea
opera ție:
from sklearn.feature_extraction.text import CountVectorizer

‘CountVectorizer’ conver tește o colec ție de documente cu text intr -o matrice de
jetoane num ărabile.
Sintaxa urm ătoare transfo rmă documentul de revizuiri într-o matrice cum am enun țat
mai sus. Aceast ă matrice se poate construi cu ajutorul comenzilor :
countVector = CountVectorizer (max_features = 300, stop_words='english')
transformedReviews = countVector.fit_transform(reviews)

Prima comand ă invoc ă CounterVectorize pe anumite propriet ăți, ‘max_features’
reprezint ă câte cuvinte s ă culeag ă aceast ă metod ă din tot dic ționarul de review s,
stop_words un atribut care verific ă în mare pentru anumite cuvinte pentru care
algoritmul ar avea probleme cu ar fi ‘english’.
În poza urm ătoare voi prezenta prima linie a matricii și pentru pe ce cuvinte se
formeaz ă matricea cu jetonuri dup ă care se va face recomandarea.

Num ărul lor este de 300 iar tuplurile din ‘transformReviews’ practic num ără toate
apari țiile celor 300 de cuvinte aleator selectate de ‘CountVectorizer’.
Acum vom transforma practic aceste date într-o matrice cu ajutorul
‘pandas.DataFrame’ prin urm ătoarea instruc țiune:

45 dfReviews=DataFrame(transformedReviews.A,columns=countVector.get_feature_na
mes())
Aceast ă matrice are liniile produsele revizuite iar coloanele cele 300 de cuvinte alese
aleator din toat ă data de antrenare.
Pentru a func ționa mai rapid aplica ția ruleaz ă intru -un mod offline, deoarece ar dura
mai mult tot procesul de selec ție a datelor și de procesare a recomand ărilor. De aceea
voi salva datele deja procesate într-un fișier de tip csv pe nume ‘dfReviews.csv’.
Pentru modul online exist ă metoda ‘reloadReviews’ care poate fi apelat ă pentru a
completa modific ările f ăcute pe Front -end.
Vom transforma ‘dfReviews.csv’ într-un array the tip numpy cu urm ătoare a
instruc țiune:
X = np.array(dfReviews)
Urmeaz ă segven ța de împărțire a datelor revizuite în 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’ reprezint ă variabila ce ia valoarea mul țimii de antrenare in cazul nostru 90%
din toate produsele pe care le rand ăm.
Urmeaz ă două instruc țiuni care împart array -ul cu syntaxa specific ă Python [:tsize]
care aduce toate elemente le de la 0 la lungimea ‘tsize’ analog [tsize:] care va a duce
toate inregistr ările de la ‘tsize’ la ultima inregistrare.
Urmeaz ă o instruc țiune foarte important ă cea care practic face recomandarea în sine,
aici se va face referire la libr ăria ‘sklearn’ din nou, dar cu o nou ă abordare și anume:
from sklearn.neigh bors import NearestNeighbors
‘NearestNeighbors’ implementeaz ă o metod ă de inv ățare nesupervizat ă de căutare a
celui mai apropiat vecin. Acesta ac ționeaz ă ca o interfat ă uniform ă format ă din trei
algoritmi : BallTree,KDTree și Brute Force.
Instruc țiunea car e produce acest efect este urm ătoarea:
neighbor = NearestNeighbors(n_neighbors= 4,
algorithm='ball_tree').fit(dfReviews_train)

46 Se înțelege din precedenta sintax ă că : ‘n_neighbors’ va fi num ărul de vecini pe care îl
va avea punctul asupra c ăruia se va face antrenarea, ‘algorithm’ este algorimul pe care
l-am ales în cazul de fa ță ‘ball_tree’.
În cele ce urmeaz ă voi vorbi despre algoritmul ‘ball_tree’ de prezicere. El împarte
recursiv data de antrenare definit ă de un centroid C și raza r, a șa ca fiecare punct șa
fie cuprins de acest centroid C cu raza r. Num ărul de puncte candidate se reduce la o
inecua ție triunghiular ă de forma : |x+y|<=|x|+|y|
Cu aceast ă configurare, o singur ă distan ță calculat ă dintre un punct de test si centroid
este suficient ă să determine un punct de minim și unul de maxim pe întreaga data de
puncte. Aceast ă abordare este mai rapid ă decat KD -tree în dimensiuni mai mari.
La sf ârșitul acestui sistem de recomandare vom alege ca parametru id -ul produsului
nostru dup ă care vom c ăuta în toat ă lista de antrenare cele mai apropiate dou ă puncte
respectiv dou ă produse , de cel c ăutat.

6.4. Concluzii
La finalul acestui capitol am s ă vreau să atrag aten ția asupra întreb ării: De ce un
sistem de recomandare?
Pentru aceasta voi prezenta în paragraful urm ător o diagram ă 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 gestionare a tuturor info rmațiilor
pe care un client le furnizeaz ă utiliz ând aplica ția web, pentru îmbun ătățirea rela ției
dintre cei doi actori client respectiv furnizor.
Sistemele de recomandare au început s ă fie din ce în ce mai populare, cele mai
avansate av ând la baz ă rețele n euronale care sunt antrenate supervizat sau
nesupervizat pe o baz ă de date urias ă și în continu ă expansiune pe care furnizorul o
deține.
Evaluarea sistemel or de recomandare se face destul de greu, exist ă niste m atrici cum
ar fi mse sau mean square error, d ar ideea de baz ă este faptul c ă reacțiile umane la
anumite produse pot fi diferite de la persoan ă la persoan ă.

CAPITOLUL 7. TESTARE AUTOMATĂ

7.1. Testarea aplicațiilor
[9] “Testarea aplica țiilor se refer ă la testarea per total a comportamentului fiec ărei
componente respectiv partea de front -end și partea de backend.
Aceasta implic ă niște seturi de activit ăți care pot fi manuale sau automate, ambele
metode vor s ă descopere toate erorile pe care softul sau aplica ția generat ă le are.
Aceasta este acoperit ă de e2e testare func țional ă pentru aplica ția noastr ă.
Acest tip de testate ajut ă echipa s ă evalueze și să îmbun ătățească calitatea software –
ului și în acela și timp reduce costurile de dezvoltare și testare a software -ului de c ătre
organizatori.
Testarea aplic ațiilor poate fi considerat ă ca un pachet de teste care acoper ă testarea
Front-end-ului sau testarea GUI, testarea back -endului , testarea bazei de date, testarea
sarcin ă etc.
Ciclurile de testare ale unei aplica ții:
1. Testarea designului ( aceasta implic ă proiectarea planurilor de testare pe baza
cerin ței aplica ției )
2. Testarea produc ției ( aceasta implic ă elaborarea de cazuri de testare manual ă,
precum și scripturi de testare automat ă )
3. Testare de execu ție ( aceasta implic ă executarea testelor func ționale pe ntru
validarea cerin țelor de aplicare )

48 4. Reglarea aplica ției ( implic ă executarea testelor de încărcare și a performan ței
aplica ției )
Exist ă trei categori de testare a unei aplica ții și anume:
• Testarea aplica țiilor web ( pe care am s ă o abordez )
• Testarea aplica țiilor de destop
• Testarea aplica țiilor de mobil

Testarea aplica țiilor web implic ă testarea site -urilor dinamice sau statice. Exist ă multe
tipuri de teste care pot fi efectuate ca parte a test ării aplica țiilor web, în func ție de
nevoia de testare. As tfel de tipuri de testare implic ă testarea func țional ă, testarea
performan țelor, testarea încruci șată a browserului, testarea încărcării, testarea GUI,
test de stres, testare de regresie, testarea conformita ții, testare beta, testul de acceptare
a utilizat orului UAT, testare experimental ă.
Exist ă trei tipuri de metodologii de testare care pot fi utilizate pentru a asigura nivelul
necesar de testare în func ție de tipul de aplica ție:
• Testare func țional ă sau testarea Black Box

în metodologia de test are func țional ă pentru orice tip de aplica ție software,
rezultatul este egal cu rezultatul a șteptat pentru setul de întreb ări dat.
Testul de Black Box sau cutie neagr ă este cunoscut și adesea folosit pentru testare
funcțional ă, testarea nefunc țional ă și testare de regresie.
Testul de cutie neagr ă poate urm ări în continuare strategiile de testare, cum ar fi
abordarea clasei de echivalen ță, abordarea valorii limit ă, abordarea tabelului de
decizie și abordarea tabelelor de tranzi ție de stat.
• White B ox sau test ate unitar ă

Pentru testa re cutie alb ă sau Whit e Box, testerul trebuie s ă cunoasc ă codul. Un astfel
de tip de testare este adesea realizat de c ătre dezvoltatori imediat dup ă finalizarea
codării pentru orice model de aplica ție.
Testul cutie alb ă poate urm ări în continuare strategiile de testare, cum ar fi analiza
acoperirii codului, acoperirea traseului, analiza codului mort, analiza duplic ării
codului, analiza buclelor infinite etc.
• Testare Grey B ox

49 Termenul de testare gri sau Grey B ox se refer ă la tipul de combinare de testare
dintre testare cutie alb ă și testare cutie neagr ă. Aici, testerul poate adopta startegii
mixte care implic ă atât cutii negre, c ât și strategii de testa re cutie alb ă.
Planul de testare este un document în care testerii speci fică planul global de testare și
utilizeaz ă acest document ca metod ă de comunicare între membrii echipei de testare.
În cazul planului de testare a aplica țiilor, documentul este preg ătit pe baza
descrierii produsului SRS (specificarea cerin țelor software) și a documentelor de
utilizare a cazurilor. Documentul planului de testare acoper ă detalii despre testarea
aplica țiilor software.
Cele mai bune tactici de performare a testelor sunt urm ătoare le :
• Tipurile de identificare necesare test ării

În funcție de tipul aplica ției software, ar trebui s ă fim siguri cu privire la tipul de
testare pe care ar trebui s ă o efectu ăm pentru a ne asigura c ă au fost folosite teste
ample care s ă corespund ă așteptărilor de calitate a software -ului.
• Testarea func țional ă cu specifica ții

Înainte de a începe testarea sau scrierea cazurilor de testare, trebuie s ă fim
foarte siguri c ă funcțiile necesare vor fi testate pentru orice aplica ție software.
Ar trebui s ă putem indentifica toate func ționalit ățile necesare documentului SRS
( specificarea cerin țelor software ) și să folosim documentul dup ă caz.
• Analiza cazurilor de testare
Ar trebui s ă examin ăm cazurile de testare cu echipa pentru a ne asigura ca aveam o
acoperire de 100% a testelor
• Definirea criteri ilor de intrare și ieșire
Ar trebui s ă fie clare cu privire la amploarea testelor sau cazurilor de testare care
trebuie executate. Prin urmare, este necesar s ă se defineasc ă clar criteriile de intrare și
ieșire înainte de începerea și finalizarea testelor.
• Execu ția automat ă a testelor
Ar trebui s ă indentific ăm scenariile de testare și func ționalita țile care ar putea fi
automatizate prin testare. Acestea ne vor ajuta în astfel de cazuri de testare.”

______________________
[9] https://medium.com/frontend -fun/angular -unit-testing -jasmine -karma -step-by-step-e3376d110ab4

50 7.2. Testare Front -end Karma, Jasmine
Pentru par tea de testare a F ront-end-ului sau aplica ției web am f olosit un framework
de testare JavaS crip pe nu Jasmine.
Jasmine este un framework open -source de testare a fi șierelor de tip JavaS cript. Este
destinat s ă ruleze pe absolut orice platform ă pe care este implementat JavaS cript.
A fost dezvoltat de Privotal Labs, similar ca si logic ă cu frameworkul JsUnit care a
fost dezvoltat înaintea lui.
Jasmine oferă un set bogat de similitudini încorporate. Voi oferii un exemplu simplu
de testare în jasmine pentru un cod de JavaS cript :
Pentru func ția helloWorld
function helloWorld() {
return 'Hello world!';
}
Func ția de testare ar arata în felul urm ător :
describe('Hello world', function () {
it('says hello', function () {
expect(helloWorld()).toEqual('Hello world!');
});
});
În exemplul de mai sus , toEqual verific ă egalitatea dintre valoarea returnat ă de
helloWorld() și ‘Hello world’. Dac ă jasmi ne potriveste corect aceast ă verificare atunci
returneaz ă o variabil ă de tip bolean: adevarat dac ă protrivirea este adev ărată și fals în
caz contrar. O buna practic ă este de a pune o singur ă asteptare intr -o specifica ție de
testare individual ă.
Karma e ste un motor de testare pentru JavaS cript care ruleaz ă în Node.js. Este potrivit
pentru testarea proiectelor în AngularJs sau a altor proiecte în JavaS cript. Folosind
Karma pentru a rula teste utiliz ând unul di n numeroasele suite de testare JavaS cript,
voi ami nti aici: Jasmine, Mocha, Qunit etc. Efectuarea testelor se poate face nu numai
pe motoarele de c ăutare alese ci și pe platformele dorite, de exemplu pentru versiune
de desktop, Karma este extrem de configurabil ă, se integreaz ă cu pachetele populare
de inr egistrare continu ă Jenkins, Travis si Semaphore avand un suport de plugin
excelent.

51 Înainte de a rula Karma, trebuie s ă o configur ăm. Acesta este cel mai important
pas, dar angular cli vine în pachet cu acesat ă funcționalitate, fisierul karma.co nfig.js
care va fi generat automat la ini țializarea unui proiect nou .
Voi ilustra in cele ce urmaz ă fișierul karma.config.js si voi explica în mare liniile ce îl
compun.

Fișierul karma.config.js are mai multe c âmpuri cele mai importante fiind :
• Framewo rk ( precizeaz ă ce frameworkuri utilizeaz ă pentru testare și
construc ție, aici observ ăm prezen ța framework -ului de testare jasmine )
• Plugins
• Portul ( portul pe care va rula karma cu ajutorul lui N ode.js )
• Browsers ( pe ce motor de c ăutare poate rula )
• singleRun ( modul în care ruleaz ă, poate a ștepta modific ări sau poate rula
doar o singur ă dată )
Cu ajutorul lui Karma si Jsamine voi face unit testing pentru aplica ția web, voi
prezenta codul pentru niste componente cheie c ât și compilarea cu succes a tuturor
componentelor aplica ției.
Rularea testelor se face cu comanda ng test, care porne ște karma și serverul de
Node.js, deschiz ând un local host pe portul precizat mai sus adic ă 9876.

52 Voi prezenta în cele ce urmaz ă testarea cu succes a tuturor componentelor ap licației,
încep ând cu cele mai de baz ă și termin ând cu cele mai complexe dup ă care voi lua pe
rând anumite componente pentru care am s ă fac ni ște teste mai complexe explic ând
astfel testarea ce a avut loc.

Mai sus sunt verificate cele 34 de componente pe care aplica ția web le
conține, acest unit testing testeaz ă într-un mod automat: codul fiec ărei component e,
randarea acesteia, anumite buguri legate de variabile, requesturile pe care le con țin,
modul de rutare, implementarea p ărinte-copil, d eclararea serviciilor și func ționarea lor
și posibila randare cu posibilitatea unei bucle infinite.
Fiecare component ă a noastr ă când este creat ă automat cu comanda ‘ng g c
numecomponenta’ va genera cele 4 fisere : html , css , component.ts și fișierul de test
scris în jasmine spec.ts.
În acest fi șier se va face testarea unitar ă pe fiecare component ă pe care o avem.

Voi prezenta în urm ătorul paragraf codul de verificare a unui request pentru sec ția de
preluare a unui produs și anume serviciul ‘ItemsService ’.
Ce anume voi verifica în acest fi șier de test :

53 • Func ționalitatea lui
• Func ționalitate metodei getItem care are ca argument id -ul produsul ui
căutat
În imagine a de mai sus aveam configurerea fi șierului ‘ItemService’ cu
câmpurile providers unde t rebuie s ă specific ăm exact componentele care intr ă la
testare și importurile , adică librăriile care duc la buna func ționare a componentei.
Mai jos se verific ă toate requeturile pe care serviciul nostru le are implementate, iar la
sfârșit test ăm una din ace ste requesturi prin urm ătoare logic:

Definim o variabil ă userId și îi atribui id -ul unui produs, mai apoi ini țializăm un
obiect de tip ItemServici pentru a putea apela metodele lui interne.
Apelarea aceste i metode se face simplu cu obiec.metoda dup ă care gestion ăm
rezultat ul opținut din promise cu metoda .then verific ând dac ă răspunsul con ține un
obiect de tip item și cele trei de tip reviews pe care le afi șăm în aplica ția noastr ă.

Aceast ă testare se termin ă cu un request care varific ă de ce tip este și dacă s-a produs
conform cerin țelor noastre.
Acest lucru se poate verifica în interfa ța grafic ă creat ă de karma și prezentat ă mai sus,
unde toate cele 34 de component e au fost verificate cu succes.

54
7.3. Testare funcțională

[10] “Testarea func țional ă este un proces de asigurare a calit ății bazat pe un sistem de
întrebare și răspuns și un tip de test de tip black -box sau cutie neagr ă care îsi bazeaz ă
cazurile de testare pe specifica țiile componentei software testate.
Func țiile sunt testate prin alimentarea lor și examinarea rezultatelor, iar structura
intern ă a programelor este rareori luat ă în considerare spre deosebire de testare cutie
albă. Testarea func țional ă descrie de obicei ce face sistemul.
Testarea func țional ă a aplicatiei web se va produce cu ajut orul lui Protractor. El este
un soft open source, end -to-end framework de testare special construit pentru
aplica țiile construite în AngularJs. A fost produs de o echip ă din cadrul Google,
deasupra WebDriverJs, cu tehnologii existente, cum ar fi Selenium, Node .js și
Jasmine ceea ce face testarea destul de usor de constituit și foarte intuitiv ă. Este, de
asemenea, un înlocuitor pe ntru cadrul de testare Angular E2E, numit ‘Runner
Scenario Angular’.”

Avantajele Protractor sunt urm ătoarele :
• Ușor de instalat și de configurat
• Ușor de randat datorit ă framework -ului jasmine
• Susținerea testului de date
• Include toate avantajele produsului Selenium WebDriver
• Auto -sincronizare
• Suport ă teste paralele prin mai multe motoare de c ăutare
• Viteza excelent ă

În cele ce ur meză voi porni de la componentele acestei func ționalit ăți de end to end
pe care o are angular.
În proiectul principal avem un folder cu numele e2e, acesta con ține trei fi șiere cu
numele:

_____________________
[10] https://medium.com/@marcozuccaroli/functi onal-testing -with-protractor -and-angular -cli-getting -started -c3ddeefbc4da

55 • tsconfig.e2e.json (acest fi șier este configurare a acestui proces, fiind de forma
json, av ând mai multe valori cheie precum type în care enumer ăm framework –
urile pe care le va folosi ex: jasmine)
• protractor.conf.js (acest fisier configureaz ă tot procesul pe care protractor îl va
iniția folosind comanda ng e2e din cadrul comenzilor specifice angular -cli)
• src (acest folder cuprinde cele dou ă fișiere specifice test ării și anume: app.e2e –
spec.ts respectiv app.po.ts)
Voi descrie pe scurt cele dou ă fișiere de testare dup ă care voi ilustra printr -o poz ă
procesul de testare func țional ă explic ând fiecare linie de cod din acesta.
App.po.ts este fi șierul clas ă care define ște anumite metode care v or fi importate
eventual în fișierul de test app.e2e.spec.ts.
Aceste metode se definesc în cadrul clasei AppPage care va fi importat ă cu ajutorul
comenzi :
import { AppPage } from './app.po';

App.e2e -spec.ts este fi șierul centrat pentru testarea func țională în proiectele de
angular. Voi prezenta într-o poz ă principalele func ționalit ăți și parcurgerea testat ă a
mai multor componente din cadrul unui proces de selec ție a unor produse condi ționat ă
fiind de necesitatea unei log ări controlate.
După cum am men ționat și mai sus import ăm fișierul app.po.ts cu classa AppPage
folosind astfel metodele: navigateTo și getTitleText care nu fac altceva dec ât să
produc ă prima parte a testului adic ă: navigarea pe ruta home și să verifice dac ă

56 numele de ShopyFy exist ă în titlul site -ului, dac ă instruc țiunea este adev ărată atunci
trece mai departe la urm ătorul test.

Voi parcurge pe scurt fiecare test în parte:
• încerc ăm să dăm click pe un produs ca s ă-i vizualiz ăm toate detaliile, acest
lucru ne conduce la redirec ționarea pe p agina de login, creden țialele unui
cont creat fiind necesare
• Verific ăm dac ă după eventul de click am fost redirec ționați pe componenta
de login, dac ă verificare a este adevarat ă testul trece mai departe
• Acum vom introduce în câmpurile de login creden țialele pentru o ac țiune
întâmpinat ă cu succes, dup ă care declan șăm un evenime nt de click pe
butonul de login
• in ultima fa ță verific ăm dac ă userul s -a logat corespunz ător compar ând în
panoul user creden țialele introduse mai sus în componenta de logare

În cele ce urmeaz ă voi simula cu ajutorul unei poze acest proces compilat cu succes și
timpul necesar realiz ării 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 în cele ce urmeaz ă invoc ând metoda de testare cu partea de
cod aferent ă acestuia.
MSE sau eroare medie p ătratic ă măsoară media p ătratelor erorilor – adica diferen ța
medie p ătrată între valorare și ceea ce este estimat. MSE este o func ție de r isc, care
corespunde valorii a șteptate a pierderii de eroare p ătrată.
Faptul ca MSE este întotdeauna strict pozitiv (si nu 0) se datoreaz ă întâmpin ării sau
pentru ca estimatorul nu ține cont de informa țiile care ar putea genera o estimare mai
precis ă.

Voi prezenta în cele ce urmeaz ă funcția de testare prezent ă în sistemul de
recomandare:

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

Func ția de test are cinci argumente toare reprezent ând date lengate de parti ționarea
datei re feritoare la reviews sau revizuiri și matricea tranformat ă cu CountVectorizer
pentru produsele testate.
Modul de testare este unul supervizat, de aceea avem in func ția
neighbours.KneighborsClassifier argumentul de weights=’distances’.

58 După antrenarea re țelei voi afi șa cele dou ă metrici de acurate țe și eroare medie
pătratic ă.
Acestia vor avea urm ătoarele valor i:

CONCLUZII
Aplica ția prezentat ă mai sus este construit ă din patru par ți și anume:
• Front -end
• Back -end
• Api-uri
• Recommender System

Voi formula o concluzie pentru fiecare parte din acestea amintite, aplic ând o p ărere
personal ă asupra fiecarui aspect.
Partea de Front -end am realizat -o in Angular 7. Acest framework de JavaS cript creat
de Google are o arhitectur ă bine pus ă la punct, fiecare component ă având la baz ă un
model MVC adic ă Model View Controller.
Partea mai pu țin bun ă a acestui framwork este faptul c ă avem o gam ă destul de
diversificat ă de metode care seam ănă între ele, multi utilizatori av ând modul lor
propriu de codare, astfel încât cei car e preiau codul au o misiune mai dificil ă de a
ințelege respectiv de al modifica. Un exemplu scurt pentru acest lucru o reprezint ă
comunicare a dintre elemente care are nu mai mult de 4 metode: comunicare dintre
părinte-copil cu ajutorul lui @Input() și sing le binding pe tagul componentei copil,
comunicare dintre co pil-părinte cu ajutorul lui @Output si EventEmitter cu un event
listener pe tagul componentei copil, comunicare dintre p ărinte și copil cu ajutorul
ViewChild și înca o comunicare dintre componentel e de tip rude sau sibblings cu
ajutorul rxjs adic ă ReactiveJavaScript.

59 Pentru partea de Back -end am folosit limbajul de programare Node .js care poate fi
gestionat cu ajutorul JavaS cript, el av ând o arhitectur ă bazat ă pe evenimente, capabil ă
de input și output asyncron.
Cu ajutorul frameworkului E xpress aceast ă parte a proiectului a fost realizat ă cu
ușurință.
Pentru partea de baze de date am f olosit un limbaj de programare N oSQL pe nume
MongoDb legat de serverul de Node.js. Acest limbaj de gestionare este format din
colec ții și records care au un tip de forma json ceea ce mi -a ușurat cu mult munca,
având interog ări simple și eficiente.
Baza de date am obtinut -o de la amazon.com, acestia mi -au furnizat -o in format JSON
având pt fiecare obiect/produs mai mult e revizuiri care m -au ajutat s ă creez sistemul
de recomandare.

Api-rile pe care le am folosit au legatur ă strans ă cu Google, acest api se nume ște
DialogFlow și are la baz ă un sistem implementat cu inteligen ță artificial ă care poate
intui ce anume vrea s ă specifice utilizatorul folosind un chat integrat in cadrul
aplica ției web.

Sistemul de recomandare a fost realizat în Python și importat pe un end -point de F lask
acesta av ând posibilitatea s ă facă recomand ări într-un mod offline care este mult mai
rapid, dar și într-un mod online care este pu țin mai lent datorit ă interog ărilor realizate
cu baza de date pentru preluarea de noi date.
Acesta face recomand ările în func ție de comentariile fiec ărui utilizator la adresa
produsel or listate. Pentru aceasta am folos it libr ăria S klearn care are mai multe clase
și metode special concepute pentru acest lucru, detalii despre acestea au fost
reamintite în capitolele anterioare.

“Programatorul este un creator de universuri pentru care doar el este
responsab il. Universuri de complexitate practic nelimitată pot fi create sub forma
programelor de calculator.”
definiție de Joseph Weizenbaum

60 BIBLIOGRAFIE
Cărți:
1. Building Recommendation Engines (Autor:Suresh Kumar Gorakala,
Editura:Paperback edition, Anul: Decembrie 2016)
2. Recommender Systems Handbook ( Autor: Francesco Ricci , Lior Rokach,
Beer -Sheva, Editura:Springer Science+Business Media, Anul:201 5 )
3. Recommender Systems ( Autor: Dietmar Jannach, Markus Zanker, Alexander
Felfernig, Gerhard Friedrich, Editura:Hardcover edition, Anul:2010)
4. THE ADAPTIVE WEB ( Autor :Peter Brusilovsky,Alfred Kobsa,
Wolfgang Nejdl, Editura:Springer, Anul:2007 )
Referin țe:
5. [1] https://medium.com/@TechMagic/reactjs -vs-angular5 -vs-vue-js-what -to-
choose -in-2018 -b91e028fa91d
6. [2] https://medium.com/@rwilliams_bv/intro -to-databases -for-people -who-
dont-know -a-whole -lot-about -them -a64ae9af712
7. [3] https://docs.mongodb.com/manual/introduction/
8. [4] https://www.brighthub.com/computing/hardware/articles/17271.aspx
9. [5] https://nodejs.org/en/ab out/
10. [6] https://www.infoworld.com/article/3204016/python/what -is-python.html
11. [7]https://scikit -learn.org/stable/
12. [8]https://www.sciencedirect.com/science/article/pii/S1110866515000341
13. [9]https://medium.com/frontend -fun/angular -unit-testing -jasmine -karma -step-
by-step-e3376d110ab4
14. [10]https://medium.com/@marcozuccaroli/functional -testing -with-protractor –
and-angular -cli-getting -started -c3ddeefbc4da

Articole :
15. http://www.methodsandtools.com/tools/karma.php
16. https://www.softwaretestingclass.com/appli cation -testing/
17. https://scikit -learn.org/stable/modules/neighbors.html
18. https://expressjs.com/en/guide/routing.html
19. https://cambridgespark.com/content/tutorials/implementing -your-own-
recommender -systems -in-Python/index.html HARHARD