UNIVERSITATEA DIN BUCURE ȘTI FACULTATEA DE MATEMATICĂ ȘI INFORMATICĂ SPECIALIZAREA INFORMATICĂ LUCRARE DE LICEN ȚĂ Realitate augmentată în E – C [606522]

UNIVERSITATEA DIN BUCURE
ȘTI

FACULTATEA DE MATEMATICĂ
ȘI INFORMATICĂ

SPECIALIZAREA INFORMATICĂ

LUCRARE DE LICEN
ȚĂ

Realitate augmentată în E
–
C
ommerce

Coordonator
științific
:

Absolvent: [anonimizat].dr

Vasile Silviu Lauren
țiu

Tăpîrdea Alexandru

Bucure
ști
, iunie 2019

2

Rezumat

Comer
țul electronic
1

a cunoscut o
dezvoltare accelerată,

ca urmare a evolu
ției
tehnolog
iei
și în special datorită dispozitivelor mobile tot mai
performante. Realitatea virtuală
2

și
realitatea augmentată
3

oferă utilizatorilor o experi
e
n
ță completă, ce contribuie în mod decisiv la
influen
ț
area alegerilor consumatorilor.

Companii

mari din domeniu, precum Amazon
și IKEA
,

au
decis să integreze realitat
ea augment
at
ă în aplica
țiile disponibile publicului larg și rezultatele
pozitive înregistrate pe termen lung sunt notabile.

Proiectul de fa
ță este
implementarea
unei aplica
ții de retail online, ce folo
s
e
ș
te
realitatea augmentată pentru a oferi
utilizatorilor

o idee mai clară despre modul în care produsele
se
îmbină

cu mobilierul deja existent.

Aplica
ția folosește camera dispozitivului mobil (telefon, tabletă) și modele 3D ale
obiectelor disponibile în magazin pentru a da utilizatorilor oportuni
tatea să vizualizeze mai bine
produsele, să le plaseze
și să le rotească după bunul plac. De asemenea, interfața intuitivă facilitează
selectarea
și înlocuirea diferitelor obiecte.

1

comer
țul electronic, cu varian
ta

uzuală de grafie E
–
Commerce, este o activitate ce presupune
vânzarea de bunuri
și servicii prin intermediul internetului

2

Realitatea virtuală constă în
reconfigurarea
modului în care utilizatorul percepe realitatea prin
intermediul calculatorului
și a
l

echipamentelor speciale.

3

Realitatea augmentată presupune îmbunătă
țirea realității concrete cu elemente generate de
calculator.

3

Pe lângă augmentarea realită
ții, aplicația permite întreg procesul de achi
zi
ționa
re, prin
func
ționalități precum
:
a
dăugarea produselor în lista de cumpărături, introducerea anumitor filtre
de
căutare
, dar
și finalizarea comenzi
lor

și descărcarea unei fac
t
uri generate din aplica
ție.

Pentru
intenden
ții

de magazin există o interfa
ț
ă web de administrare

a
magazinului
,
ce
oferă instrumente pentru

gestionarea

utilizatorilor,

produselor, categoriilor de produse,
precum
și al resursei umane sau șabloanelor pentru facturi
.

Aplica
ția numită Shop Mania AR a fost dezvoltată prin intermed
iului framework
–
ului React native
4
, fiind o aplica
ție

cross
–
platform
5

(multi platformă)
, ce poate rula atât pe Android
cât
și pe iOS, pe o gamă largă de dispozitive mobile.

Aplica
ția web este accesibilă din orice browser
desktop sau mobile
și a fost
construită având la bază principiul accesibilită
ții.

Pentru implementarea realit
ă
ții

augment
a
t
e

s
–
a folosit librăria ReactViro
6
,
configurată pentru
interac
țiunea

cu modele 3D de tipul obj
7

și vr
x
.

Pentru interfa
ța mobile a
m

folosit Native Base
8
, cu modif
i
cări realizate prin CSS
9

ș
i Javascript
, iar interfa
ța web pentru

administrare
se bazează pe React
10

ș
i
implementează

Material UI
11

pentru un aspect unitar
și pentru compatibilitatea cu diferitele
dimensiuni de ecran
ale dispozitivelor.

Partea de backend a fost realizată cu PHP 7, framework
–
ul Laravel
12
, Passport cu
Oauth2 pentru
autentificare

și autorizare
, precum
și

MySQL

pentru baza de date
.

4

Rea
ct native este un framework de J
avascript dezvoltat de Facebook, folosit

pentru realizarea
aplica
țiilor mobile cross
–
plat
form.
Are la bază acelea
și principii ca React. https://facebook.github.io/react
–
native/

5

Aplica
ție cross
–
platform : acela
și cod este folosit pentru mai multe platforme diferite

6

React Viro este o platformă dezvoltată de Viro
M
edia cu scopul de a facili
ta programarea
aplica
țiilor ce necesită realitate augmentată sau realitate virtuală. Platforma este compatibilă cu framework
–
ul React Native https://viromedia.com/viroreact

7

obj este un format text based dezvoltat de Wavefront Technologies. Formatul const
ă într
–
un număr
de linii pe care se află câte o cheie de valoare diferită. Formatul suportă reprezentarea elementelor
geometrice prin vârfuri, muchii
și fețe și este acceptat de principalele aplicații pentru modelarea obiectelor
3D.

8

Framework folosit pen
tru interfa
ța aplicațiilor mobile
dezvoltate

cu React Native sau Vue Native.
https://nativebase.io/

. Vezi sec
țiunea
2.8

9

Cascading Style Sheets este un limbaj de markup, care descrie cum trebuie să fie afi
ș
ate
elementele grafice pe ecran.

10

React este un framework de Javascript folosit pentru construirea interfe
țelelor diferitelor aplicații
web.

11

Framework dezvoltat de Google ce oferă componente cu un aspect unitar
și modern pentru
aplica
țiile web : https:
//material
–
ui.com/

12

Framework MVC pentru PHP
,
dezvoltat de Taylor Otwell. Vezi sec
țiunea
2.2

4

Cuprins

1.

Introducere

…………………………..
…………………………..
…………………………..
……………

7

1.1 Contextul lucrării

…………………………..
…………………………..
…………………………..
…..

7

1.2 Motiva
ția dezvoltării aplicației

…………………………..
…………………………..
…………….

8

1.3 Structura lucrării

…………………………..
…………………………..
…………………………..
……

8

2.

Tehnologii utilizate

…………………………..
…………………………..
…………………………..
.

10

2.1 PHP 7

…………………………..
…………………………..
…………………………..
…………………..

10

2.1.1 Introducere

…………………………..
…………………………..
…………………………..
………..

10

2.1.2 Scurt Istoric

…………………………..
…………………………..
…………………………..
……….

10

2.2 Framework
–
ul Laravel

…………………………..
…………………………..
………………………

11

2.2.1 Pr
ezentare

…………………………..
…………………………..
…………………………..
………….

11

2.2.2 Motiva
ție

…………………………..
…………………………..
…………………………..
……………

13

2.3 MySQL

…………………………..
…………………………..
…………………………..
………………..

14

2.3.1 Prezentare

…………………………..
…………………………..
…………………………..
………….

14

2.3.2 Motiva
ție

…………………………..
…………………………..
…………………………..
……………

15

2.6 Javascript

…………………………..
…………………………..
…………………………..
…………….

15

2.6.1 Prezentare

…………………………..
…………………………..
…………………………..
………….

15

2.7 React Native

…………………………..
…………………………..
…………………………..
…………

16

2.7.1 Prezentare

…………………………..
…………………………..
…………………………..
………….

16

2.7.2 Scurt istoric

…………………………..
…………………………..
…………………………..
……….

17

2.7.3 Utilizarea
și reutilizarea
componentelor

…………………………..
………………………

17

2.7.4 Stilizarea unei componente de React Native

…………………………..
…………………

18

2.7.5 Folosirea listelor în React Nativ

…………………………..
…………………………..
………

19

5

2.7.6 Gestionarea librăriilor
și a pachetelor

…………………………..
………………………….

21

2.7.7 Ciclul de via
ță al unei componente React Native
…………………………..
…………..

23

2.7.8 Compara
ție dintre React Native, Cordova și Flutter

…………………………..
…….

25

2.7.9 Motiva
ția alegerii React Native

…………………………..
…………………………..
……….

25

2.8 Native Base

…………………………..
…………………………..
…………………………..
…………..

26

2.8.1 Prezentare

…………………………..
…………………………..
…………………………..
………….

26

2.8.2 Motiva
ție

…………………………..
…………………………..
…………………………..
……………

27

2.9 ViroReact

…………………………..
…………………………..
…………………………..
……………..

28

2.9.1 Prezentare

…………………………..
…………………………..
…………………………..
………….

28

2.9.2 Încărcarea de obiecte 3D

…………………………..
…………………………..
…………………

29

2.
9.3 Modificarea aspectului obiectelor prin intermediul materialelor, luminii
și al
umbrelor

…………………………..
…………………………..
…………………………..
…………………………..
….

29

3.

Descrierea
aplica
ției

…………………………..
…………………………..
………………………..

32

3.1 Autentificare
și autorizare

…………………………..
…………………………..
…………………

32

3.1.1 Autentificarea

…………………………..
…………………………..
…………………………..
…

32

3.1.2 Autorizarea

…………………………..
…………………………..
…………………………..
…….

32

3.2 Backend

…………………………..
…………………………..
…………………………..
…………….

33

3.2.2 Structura bazei de date

…………………………..
…………………………..
………………..

33

3.2.3 Opera
ții uzuale

…………………………..
…………………………..
…………………………..
.

34

3.3 Realitate augmentată

…………………………..
…………………………..
…………………………

35

3.3.1 Încărcarea modelelor 3D

…………………………..
…………………………..
……………..

35

3.3.2 Interac
țiunea utilizatorului cu modelul 3D

…………………………..
……………….

38

4.

Exemple de utilizare

…………………………..
…………………………..
………………………..

41

4.1. A
plica
ția mobile destinată clienților magazinului

…………………………..
…………..

41

4.2 Interfa
ța web pentru administrare

…………………………..
…………………………..
…….

50

6

Concluzii

…………………………..
…………………………..
…………………………..
……………………….

56

Bibliografie

…………………………..
…………………………..
…………………………..
……………………

58

Listă de figuri

…………………………..
…………………………..
…………………………..
………………..

60

7

Capitolul 1

1.

Introducere

1.1
Contextul lucrării

Comer
țul electronic s
–
a dezvoltat

puternic în ultima vreme,

mai ales
datorită
integrării
tehnologi
ei

în activită
țile economice
, precum
transfer
u
l

electronic de bani, tranzac
ț
ii
le

bancare online

sau

campanii
le

de
marketing pe internet.

Ca urmare

a

evolu
ției capacității de procesare a disp
ozitivelor mobile

s
–
a dezvoltat sectorul
de M
–
Commerce
13
.
Avantajele principale pe care M
–
Commerce le aduce sunt : utilizarea
loca
ției
furnizate de GPS

pentru a selecta clien
ții din apropierea magazinelor fizice, accesibilitatea pentru
utilizatori, în mod i
ndependent de loca
ția lor fizică, posibilitatea de a face oferte personalizate, dar
mai ales utilizarea realită
ții augmentate și a realității virtuale pentru a oferi o experiență superioară
utilizatorilor.

Realitatea augmentată este o tehnologie relativ no
uă, ce presupune îmbunătă
țirea realității
prin introducerea de elemente generate de calculator.

Ter
m
e
nul de realitate augmentată face parte
dintr
–
un domeniu mult mai vast, real
itate amestecat
ă
, ce înglobează
: realitate virtuală (VR),
realitate augmentată (AR), teleprezen
ță, precum și alte tehnologii.

Primele aplica
ții cu realitate
augmentată

și realitate virtuală au
apărut

încă din anii 70’, cu
scopul ini
țial de facilita
re

a vizualizării datelor. Din anul 20
08 s
–
a
u

dezvoltat mult aplica
țiile mobile
bazate pe realitate augmentată, datorită capabilită
ților oferite de dispozitivele mobile, precum
accesul la camera
f
oto/video

și

GPS.

Conform unui studiu

al
PewResearchCenter
din

2016, rea
lizat

în peste 40 de
țăr
i, 67% din
popula
ție folosește internetul sau deține un
telefon inteligent
. Mai mult, 93% din utilizatorii de
telefoane inteligente

folosesc aplica
ții de telefon.

Astfel, au început să apară tot mai multe aplica
ții mobile care utilizează realitatea
augment
ată sau realitatea virtuală
și
care
î
și propun să ofere utilizatorilor o experi
e
n
ță complet

13

M
obile
–
Commerce, scris
și M
–
Commerce, presupune utilizarea aplica
țiilor mobile pentru
tranzac
ționarea de bunuri.

8

nouă. Printre cele mai populare aplica
ții ce utilizează AR sau VR se numără : Google Translate
,
Just a Line, AR GPS Compass Map 3D, Snapchat, Holo
și SketchAR. Pe s
egmentul de retail cele
mai cunoscute aplica
ții ce încorporează realitatea au
gmentată sunt :
IKEA Place, Amazon AR
View

și Shopify AR.

1.2
Motiva
ția dezvoltării aplicației

Conform unui studiu
al

Apollo Box în 2016, una din companiile mari de retail online care
a integrat realitatea augmentată în activitatea sa, rezultatele pozitive sunt semnificative.

Timpul medi
u

petrecut într
–
o aplica
ție cu AR este cu 10 minute mai mare decât în cazul
celorla
lte aplica
ții. Tot din același studiu se observă că un utilizator care a interacționat cu
func
ționalitatea de AR

este cu 25% mai probabil să cumpere un produs în final decât utilizatorul
care a folosit varianta standard de magazin online
.

Scopul principal
al aplica
ției este să ofere utilizatorilor oportunitatea de a vedea produsele
dorite în propria casă
, prin intermediul realită
ții augmentate

și să contribuie la reducerea numărului
de produse returnate. Pentru companii solu
ția software reprezintă un sistem

complet de gestionare
a
unui magazin, înlocuind chiar necesitatea unui spa
țiu fizic de vânzare. În cazul companiilor mici
aplica
ția reprezintă ocazia de a ieși în evidență printre competitori, iar în cazul companiilor mari
produsul poate conduce la o cre
ș
tere semnificativă a vânzărilor
și la fidelizare
a

clien
ților.

De asemenea, compatibilitatea cross
–
platform
determină

redu
cerea costului

de dezvoltare
,
precum
și al
timp
ului

de implementare
(comparativ cu aplica
țiile

programate
separat pentru diferite
sist
eme de operare )
.

1.3
Structura lucrării

Lucrarea are următoarea structură :



Capitolul 1: Introducere
–

cuprinde considera
ții generale, analiza contextului actual
și expunerea motivației dezvoltării aplicației.

9



Capitolul 2: Tehnologii utilizate
–

enumerarea
și prezentarea tehn
ologiilor

alese,
precum motivarea deciziilor de implementare
.



Capitolul 3: Descrierea aplica
ției
–

structura aplica
ției, arhitectura și îmbinarea
p
ă
r
ților componente.



Capitolul 4: Exemple de utilizare
–

exemplificarea modului
de utilizare al aplica
ției
ShopManiaAR prin capturi de ecran
și prin prezentarea detaliată a logicii de
func
ționare
.



Capitolul 5: Concluzii
–

analiza cerin
țelor și a rezultatelor obținute

10

Capitolul 2

T
eh
nologii utilizate

2.1
PHP 7

2.1.1
Introducere

PHP (acronim pentru PHP: Hypertext Preprocessor) este un limbaj de scripting
14

creat
ini
țial

pentru dezvoltarea paginilor web. Este unul

dintre cele mai populare limbaje pentru

server
–
side, fiind folosit de 79% dintre
site
–
urile web, conform unei analize realizată de w3techs în
2019.

În timp, limbajul PHP a cunoscut o revitalizare

datorată

adăugării

de func
ționalități noi,

precum: func
ții anonime
15
,
clase anonime
16
, namespace
17

și type
–
hinting
18
.

2.1.2
Scurt
Istoric

PHP a fost dezvoltat în 1994 de Rasmus Lerdorf
, care a implementat un

set de scripturi GCI
pentru
monitorizarea

vizualizării CV
–
u
lui său online.
Prima versiune de PHP, numită PHP/FI

1.0
,

era destul de simplă

și
–
i lipseau multe aspecte de securitate
, ad
ă
ugate în versiunile ulterioare.

PHP/FI 2.0 a reprezentat o rescriere completă
a versiunii anterioare
și ad
ă
uga

suport pentru
numeroase tipuri de baze de date.

În 1997 Andi Gutmans
ș
i

Zeev Suraski au rescris parserul de PHP
și a fost lansat PHP 3.0.
S
intaxa este mai consistentă
și noua arhitectură încurajează programatorii să dezvolte extensii
proprii.

14

Limbaj de scripting

–

este un limbaj creat pentru integrarea
și comunicarea cu alte limbaje de
programare.

15

Func
ții fără un nume asociat, declarate inline și atribuite unei variabile.

16

Anonymous classes
–

permit instan
țierea de obiecte fără a crea o clasă cu nume. Un nume
este
asociat automat de
motorul

PHP ( class@anonymous/in/oDsi1A0x7d6ac6ad8613 )

17

Spa
țiu de nume
–

folosit pentru a crea un domeniu logic separat, ce poate îngloba defini
ții de
clase, interfe
țe și funcții

18

Asigurarea tipului pentru parametrii unei func
ții
. O eroare este returnată dacă tipul de date cu care
este apelată o func
ție nu corespunde cu tipul de date specificat.

11

PHP 4.0 a apărut în 200
0

și aduce cu sine un
motor

nou, performan
ță și stabilitate crescută,
precum
și suport nativ pentru programarea orientată pe obie
cte.

Doar 4 ani mai târziu,

î
n 2004
, apare PHP 5.0,
ce schimbă fundamental design
–
ul versiunii
anterioare. Engine
–
ul

(
motorul PHP)
este rescris,
modelul de programare orientată pe obiect e
ste
îmbunătă
țit și apar numeroa
se elemente noi de
securitate. Este inclus suport pentru clase abstracte,
destructori
19
, interfe
țe multiple și type
–
hinting.

În ianuarie 2008 apare PHP 5.3 care corectează din probleme
le

apărute în ultima versiune.
Sunt introduse elemente noi, precum namespace
–
uri, suport pen
tru SQLite 3
și pentru MySQL.

Este folosită versiunea de engine Zend 2.0.

PHP 7 aduce un n
ou interpretator Zend optimizat

cu performan
țe comparabile cu HHVM.
Astăzi PHP este un limbaj ajuns la maturitate, cu o comunitate solidă

2.2
Framework
–
ul Laravel

2.
2.1
Prezentare

În 2011, Taylor Otwell a creat Laravel, un framework MVC
20

open source pentru PHP.
Laravel vine cu
numeroase

func
ționalități
, precum managementul sesiunii, managementul bazel
or
de date, composer

ș
i folose
ște ORM
–
ul Eloquent.
Fiind un
fram
ew
ork full stack
, Laravel oferă
unelte
le

necesare pentru întreg procesul de dezvoltare al unei aplica
ții web, de la interacțiunea cu
baza de date
și până la un sistem de șabloane numit Blade.

Laravel a fost puternic influen
țat de Symfony, un alt framework de PHP, de la care a preluat
diferite c
oncepte. Ultima versiune de Laravel este 5.8, iar versiunea 5.9 a fost anun
țată pentru 26
august

2019
.

19
Destructorul este folosit atunci când referin
ța către o zonă de memorie nu mai există.

20

Model View Controller este un model popular d
e separare a păr
ților componente ale unei aplicații,
cu reguli clare de interac
țiune între diferitele componente.

12

Figura 2.2.1 : Schem
a

MVC

Fiind un framework MVC, Laravel are la bază 3 niveluri principale :



Model
–

Clasele utilizate pentru a modela datele pr
oblemei. Modelul este folosit
pentru a primi, insera
și actualiza datele în baza de date corespunzătoare aplicației.
Este independent de interfa
ța vizuală și poate gesti
o
na p
ă
r
ți din logica aplicației.



View
–

Nivelul folosit pentru a pregăti interfa
ța prod
usului software
,

cu care
interac
ționează utilizatorii.



Controller
–

gestionează (controlează) cererile venit
e

de la utilizator. Controller
–
ul
manipulează modelul pentru a produce într
–
un final modificări la nivel de View.

Avantajul adus de utilizarea arh
itecturii MVC este o mai bună separare a păr
ților
componente ale aplica
ției, ce favorizează dezvoltarea în paralel a diferitelor funcțion
alită
ți și
reutilizarea codului

(în cadrul acelea
și aplicații sau a aplicațiilor diferite)

.

13

2.2.2
Motiva
ție

Una
dintre principalele întrebări care apar în dez
v
oltarea unei aplica
ții complexe este dacă
un framework este necesar sau nu. De cele mai multe ori, utilizarea unui framework nu este o
cerin
ță obligatorie, dar contribuie la reducerea timpului necesar dezvoltă
rii produsului software
și
conduce la respectarea unor standarde înalte privind calitatea
și organizarea codului.

Pe termenul lung, utilizarea unui framework facilitează dezvoltarea ulterioară a aplica
ției
și reutilizarea unei cantități însemnate de cod p
entru versiunile subsecvente ale aplica
ției. Prin
constrângerile impuse de framework se asigură o dezvoltare unitară a aplica
ției și

se

elimină nevoia
de a reimple
me
nta func
ționalități de bază.

Principalele benefi
ci
i pe care utilizarea Laravel le aduce sun
t :



Securitate

–

Laravel propune numeroase mecanisme menite să asigure securitatea
aplica
țiilor. Astfe
l
, utilizarea Eloquent
conduce la evitarea SQL Injection
21

prin
eliminarea bucă
ților de cod SQL

introduse in câmpurile destinate pentru text
.
Protec
ția coo
kie
–
urilor prin c
r
iptare
22

cu cheie secretă. 32 de caractere sunt adăugate
la cookie
,

astfel încât confiden
țialitatea informație
i să fie
garantată. Un token
special asigură securitate împotriva CSRF
23
.



Performan
ță sporită
–

sunt realizate numeroase optimizăr
i ce conduc la cre
șterea
performan
ței aplicației și minimizarea timpului de răspuns.



Comunitate activă
și numeroasă
–

o comunitate activă înseamnă un framework ce
nu va dispărea pentru o perioadă lungă de timp. Resursele disponibile pentru
învă
țare și pent
ru rezolvarea diferitelor erori sunt mult mai numeroase decât în cazul
framework
–
uri mai pu
țin populare.



Arhitectură MVC



Testare automată
24

realizată u
șor prin intermediul PHPUnit
25
.

21

Unul dintre cele

mai comune tipuri de atacuri,
ce constă în transmiterea unor bucă
ți de cod în
câmpurile din formulare destinate
utilizatorilor. Dacă nu sunt luate măsuri de securitate, se poate ajunge la
compromiterea bazei de date.

22

Procesul de mascare a informa
ției pentru a o face ilizibilă fără cunoști
i
n
țe speciale.

23

Cross
–
Site Request Forgery
–

atac ce for
țează utilizatorul s
ă facă ac
țiuni nedorite în cadrul
aplica
ției în care este autentificat.

24

Utilizarea codului pentru a testa bucă
ți din cod și a compara rezultatul obțin
ut cu ceea ce era
a
șteptat. Sunt

numeroase tipuri de testare automată, ce
conduc la reducerea timpului t
otal

pentru dezolvarea
unei aplica
ții complexe și o calitate cr
e
scută a prodului finit

25

Framework popular pentru testarea codului PHP. Versiunea curentă este PHPUnit 8.0

14

2.3
MySQL

2.3.1
Prezentare

MySQL este un SGBD

26

rela
țional
27

open
source
28
, dezvoltat de MySQL AB
și folosit de
un număr foarte mare de utilizatori.

MySQL a fost scris în C
și C++ și
func
ționează

pe diferite
platforme.

Prima versiune de MySQL a fost lansată în 1995
, iar ultima versiune stabila este 8.0.16,
apărută în apr
ilie 2019.

Figura 2.3.1 MySQL
–

gestionarea cererilor utilizatorilor

În linii mari, ciclul cerere
–
răspuns se poate reprezenta astfel :



MySQL cre
e
ază baza de date pentru stocarea
și

manipularea informa
țiilor, def
inind
rela
ții între tabele



Utilizatorii fac cereri prin intermediul codului SQL către server
și ulterior către
MySQL



Serverul răspunde cu informa
ția rezultată în urma
executării
codului SQL

26

Sistem de gestiune a bazei de date

27

Datele sunt stocate în tabele
diferite, între care sunt stabilite rela
ții ce fac posibilă interogarea și
manipularea ulterioară a datelor

28

Oricine are acces la codul sursă al aplica
ției și poate să facă modificări, fără să plătească ceva.

15

2.3.2
Motiva
ție

Există numeroase variante pentru stocarea
și manipularea datelor, atât pen
tru

bazele de date
rela
ționare, cât și pentru cele

nerela
ționare
29
.

Baze de date de tip rela
țional : MySQL, MS
–
SQL Server, Oracle,

Baze de date de tip noSQL: MongoDB, CouchDB, Redis
.

Am ales să folosesc MySQL din
pentru următoarele caracteristici:



Maturit
ate
și stabilitate
–

timpul îndelungat de existen
ță este un argument puternic
pentru utilizarea MySQL într
–
un proiect nou, ce are nevoie de stabilitate
și
consisten
ță în timp.



Compatib
i
litate
–

sunt suportate principalele platform
e
, incluzând : Linux,
Wind
ows, Mac, BSD
și Solaris. De asemenea, există API
–
uri pentru conectarea cu
cele mai importante limbaje de programare, printre care
și PHP.



Costul
–

open source
și gratuit



Func
ționalități
–

oferă func
ționalitățile cele mai folosite din
principalele SGBD
–
uri.

2.6
Javascript

2.6.1
Prezentare

Javascript a fost introdus în 1995 pentru
adăugarea

de
func
ționalități

în

browserul Netscape
Navigator.
Ulterior a fost adoptat de celelalte browsere

și a fost standardizat în ECMAScript, de
către Ecma International. În timp
,

Javascript s
–
a maturizat
și a ajuns un limbaj ce oferă
func
ționalități complexe, precum : suport pentru programare OOP,
func
ții

anonime
și interacțiunea
cu date în format JSON.

C
ea mai folosită versiune este ECMAScript 2016, care a introdus cele mai multe schimbări,
iar ultima versiune standardizată este ECMAS
cript

2018.

29

NoSQL
–

“not only SQL”,
o alternativă pentr
u bazele de date de tip rela
țional, cu diferite
implementări ( cheie
–
valoare, model tabular, model bazat pe document).

16

2.7
React
N
ative

2.7.1
Prezentare

React Native

este un framework de Javascript
creat
de Facebook, ce are ca
scop realizarea
aplica
țiilor mobile cross
–
platform, cu un aspect nativ. Unul dintre cele mai mari avantaje

ale React
Native

este că permite dezvoltarea de aplica
ții mobile folosind
J
avascript
și JSX
30
, ceea ce
reprezintă un avantaj important pentru
companiile cu programatori cu experien
ță în dezvoltarea
aplica
țiilor web.

Senza
ția de aplicație nativă se obține pentru că în spate React Native apelează
API
31
–
uri native de Objective
–
C
32

( pentru iOS)
și Java (pentru Android). Astfel, se obțin chiar
element
e native specifice platformei
țintă. Mai mult, React Native expune interfețe de
J
avascript
pentru accesarea func
ționalităților native, precum camera telefonul sau locația GPS
33
.

Aplica
ții de succes care sunt dezvoltate prin React Native : Facebook, Instagra
m, Skype,
Walmart, Tesla, Airbnb, SoundCloud, Blomberg News, Uber Eats

Figura 2.7.1
–

Arhitectura

React Native

30

JSX( Javascript eXtension) permite scrierea de cod Javascript folosind o sintaxa similara cu HTML.

31

API (Application programming in
terface) reprezintă un set de func
ții/metode ce permit aplicațiilor să
comunice între ele
și să facă schimb de resurse

32
Ojbective C este un limbaj de programare orientat pe obiect, apărut în 1984

33

GPS (Global Positioning System) sistem bazat pe satelit pe
ntru detectarea de obiecte

17

2.7.2
Scurt
i
storic

React Native a început în 2013 ca un proiect intern

al

Facebook, în cadrul un hackathon
,

și
a fost lansat 2 ani mai târziu, în martie 2015. Cea mai recentă versiune stabilă este 0.59.9,
apărută

în
luna
iunie 2019.

Popularitatea sa a continuat să crească, mai ales datorită principiilor comune
dintre React
și React Native
, ceea ce favorizează o

învă
țare ușoară și o tranziție rapidă
.

În prezent există 1969 de contribu
i
tori
și o comunitate impresionantă care su
s
ț
ine proiectul,
ceea ce facilitează găsirea rapidă de solu
ții pentru problemele comune.

2.7.3 Utilizarea
și reutilizarea
componentelor

Unul dintre cele mai importante avantaje ale React Native îl reprezintă componentele
reutilizabile. Astfel timpul de dezvoltare scade
și codul este mai ușor de întreținut pe termen lung.

Mai jos este un exemplu p
entru definirea unei componen
te:

// import
ă
m elementele de care avem nevoie

import React, { Component } from 'react';

import { Text, View, Button} from 'react
–
native'; // importam
elemente native

// definim clasa componentaReutilizabila, care con
ț
ine un
mesaj
și un buton

class com
ponentaReutilizabila extends Component {

render() {

return (

<View style={{ flex: 1, justifyContent: "center",
alignItems: "center" }}>

<Text>Acesta este un buton</Text>

<Button>Click</Button>

</View>

);

18

}

}

// exportă
m componenta astfel în
cât să o putem folos
i în alte
//
ecrane ale aplica
ției

export default componentaReutilizabila;

Atunci când vrem să folosim
componenta în alt ecran este su
ficient să o importăm. Mai
mult, putem modifica după bunul plac componentele
,

a
stfel încât să se potrivească pentru

situa
ții
diferite.

import “componentaReutilizabila” from
“./components/componentaReutilizabila”;

2.7.4 Stilizarea unei componente

de React Native

Pentru a crea o experien
ță cât mai plăcută
utilizatorilor, de cele mai multe ori ne dorim să
construim o interfa
ță atractivă și ușor de folosit. Astfel, avem nevoie să modificăm proprietățile de
bază ale com
p
onentelor oferite de
R
eact
N
ative. Acest lucru este posibil cu ajutor CSS
și al
componentei

StylesSheet din
R
eact
N
ative. Avem posibilitatea să schimbăm pozi
ționarea
elementelor, culoarea, dimensiunea sau orice altă proprietate vizuală.

Mai jos este un exemplu de modificare al stilului unei componente :

// importăm elementele de bază, printre c
are
și StyleSheet

import React, { Component } from 'react';

import {StyleSheet, Text, View } from 'react
–
native';

// ne definim stilul aplica
ției folosind StyleSheet.create

const styles = StyleSheet.create({

bigBlue: {

color: 'blue',

fontWeight:

'bold',

fontSize: 30,

19

},

red: {

color: 'red',

},

});

// definim clasa
ExempluClasaStil
și ne folosim de obiectul
//
styles.numeProp
rietate pentru a modifica as
pectul elementelor,
//
în raport cu stilul definim anterior.

export default clas
s
ExempluClasaStil

extends Component {

render() {

return (

<View>

<Text style={styles.red}>just red</Text>

<Text style={styles.bigBlue}>just bigBlue</Text>

<Text style={[styles.bigBlue, styles.red]}>bigBlue,
then red</Te
xt>

<Text style={[styles.red, styles.bigBlue]}>red, then
bigBlue</Text>

</View>

);

}

}

2.7.5
Folosirea listelor

în
R
eact
N
ativ

React native ne pune la dispozi
ție
FlatList
, o componentă utilizată pentru afi
șarea listelor
de elemente. Optimizarea are loc astfel încât să fie construite doar elementele care sunt afi
șate pe
ecran la un moment dat.

Mai jos avem un exemplu pentru utilizarea
FlatList

cu o li
stă de produse dintr
–
u
n magazin
:

20

//importăm elementele utilizate, printre care
și FlatList

import React, { Component } from 'react';

import {FlatList, StyleSheet, Text, View } from 'react
–
native';

// definim clasa ExempluLista

export default class ExempluLista extends Compone
nt {

render() {

return (

<View style={styles.container}>

<FlatList

data={[

{key: '
Produs1
'},

{key: '
Produs2
'},

{key: '
Produs3
'},

]}

renderItem={({item}) => <Text
style={s
tyles.item}>{item.key}</Text>}

/>

</View>

);

}

}

// definim stilul componentei
și implicit modul în care va
arăta fiecare element din listă.

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

},

item: {

21

padding: 10,

fontSize: 18,

height: 44,

},

})

2.7.6 Gestionarea librăriilor
și a pachetelor

Modul de gestionare al librăriilor
și al pachetelor în React Native este similar cu cel din
React. Se poate folo
s
i npm
34

sau yarn
35

și se creeză un fișier

numit
package.json
36

Mai jos este un exemplu de fi
șier package.json ce conține librăriile folosite împreună cu
versiunile corespunzătoare
și cu date despre aplicație

:

// prima parte con
ține date despre apli
ca
ție și prescurtări
pen
tru com
e
n
zile uzuale.

{

"name": "RNShopManiaAR",

"version": "0.0.1",

"private": true,

"scripts": {

"start": "node node_modules/react
–
native/local
–
cli/cli.js start",

"test": "jest",

"android": "react
–
native run
–
android
–
variant=
gvrdebug",

"nou": "react
–
native bundle
–
platform android
–
dev
false
–
entry
–
file index.android.js
–
bundle
–
output
android/app/src/main/assets/index.android.bundle
–
assets
–
dest
androi
\
nd/app/src/main/res/
\
n"

34

npm este un manager de pachete pentru Javascript
și Node.js

35

Un manager de pachete dezvoltat recent, apărut ca alternativă pentru npm

36

Fi
șier folosit de sistemele de management ale pachetelor pentru a stabili o corespondență

între fiecare pachet
ș
i versiunea corespunzătoare utilizată în proiect

22

},

// sunt specificate dependin
țele, împ
reună cu versiunea
corespunzătoare.

"dependencies": {

"native
–
base": "^2.8.0",

"react": "16.8.3",

"react
–
native": "^0.59.3",

"react
–
native
–
action
–
button": "^2.8.5",

"react
–
native
–
elements": "^1.1.0",

"react
–
native
–
gesture
–
handler"
: "^1.2.2",

"react
–
navigation": "^3.0.9",

"react
–
timer
–
mixin": "^0.13.4",

"react
–
viro": "2.14.0"

},

"devDependencies": {

"@babel/core": "^7.4.5",

"@babel/runtime": "^7.4.5",

"babel
–
jest": "^24.8.0",

"jest": "^24.8.0",

"m
etro
–
react
–
native
–
babel
–
preset": "^0.54.1",

"react
–
test
–
renderer": "16.8.3"

},

"jest": {

"preset": "react
–
native"

}

}

Pentru a adăuga
o dependin
ță nouă este su
ficient să folosim comanda:

npm install <nume
–
pachet>

23

2.7.7 Ciclul de
via
ță al unei componente React Native

Figura 2.7.7.1
–

Ciclul de via
ță al unei componente

În figura alăturată sunt prezente etapele din afi
șarea și actualizarea unei componente
de

R
eact sau
R
eact
N
ative.

24

Prima etapă este cea de ini
țializare, în
care este apelat constructorul. Aici este construită
starea ini
țială

a

aplica
ției și se primesc eventuale proprietăți de la componenta părinte.

constructor(props)

{

super(props);

this.state=

{

message:'hello
world'

};

}

Etapa imediat următoare este
ComponentWillMount
. Metoda este folosită când vrem să
efectuam opera
țiuni înainte d
e apari
ția componentei pe ecran

(de exemplu să cere
m

date de la
server).

componentWillMount(){

fetch
('http://api/method')

.then(data=>data.json()) //cast response to json

.then(

console.log(data)

});

}

Metoda render este cea care returnează o componentă de
R
eact
și actualizează interfața
utilizatorului. În exemplu
l

de mai jos este afi
șat

un View care con
ține mesajul din
this.state.message

render(){

return(

<View>

<Text>Acesta mesaj o sa fie afisat pe ecran</Text>

</View>

)};

După ce este construită interfa
ța utilizatorului se apelează
componentDidMount
. Aici
este
locul perfect pentru actualizarea stării aplica
ției. Prin modificarea stării se va actualiza automat și
interfa
ța grafică a utilizatorului.

25

Exemplu pentru m
e
toda
componentDidMount

:

componentDidMount()

{

this.setState(

{

data:’updated version of data’

};

}

2.7.
8

Compa
ra
ț
ie
dintre React Native,

Cordova
ș
i Flutter

Cordova este un framework dezvoltat de Apache pentru realizare
a

de aplica
ții multi

platformă. Se bazează pe HTML, CSS
și Java
s
cript, cee
a
ce înseamnă că reutilizarea codului unui
site deja existent este foarte facilă.

Cordova se
folose
ște

de WebView, ceea ce conduce la

anumite
limitări
,

precum

performan
ță redusă și un aspect care nu se
apropie de cel nativ. Totu
și, Cordova
rămâne o variantă pentru proiectele unde timpul de dezvoltare scurt este esen
țial și unde există deja
o variantă de aplica
ție web.

Flutter este un framework apărut recent, dezvoltat de Google, ce folose
ște ca limbaj de

programare Dart. De
și oferă
performan
ță

ridicată
și este su
s
ț
inut de o
companie

mare din domeniul
IT&C, Flutter nu a avut încă timp să ajungă la maturitate.

Numărul libră
riilor compatibile este
substan
țial mai mic decât în cazul React Native.

2.7.
9

Motiva
ți
a alegerii React Native

Am ales să folosesc React Native din următoarele considerente :



Posibilitatea de a dezvolta o aplica
ție mobila cross
–
platform folosind tehnologii web



Comunitatea numeroasă
și resursele de învățare disponibile



Numărul
semnificativ

al

librării
lor

compatibile, în special librăriile specializate pe
realitate augmentată
și realitate virtuală.



Performan
țele crescute și aspectul nativ al aplicației finale



Similitudinile

dintre React
și React Native

26

2.8
Native
Base

2.8.1
Prezentare

Native Base este o librărie cu componente pentru aplica
ții mobile dezvoltate prin React
Native sau Vue Native. Native Base a fost creat de

Geekyants.c
o
m, este open source

și oferă atât
componente pentru Android, cât
și pentru iOS. Ult
ima versiune stabilă este 2.4.1. În momentul de
fa
ță există peste 125 de contribu
i
tori
și o documentație actualizată în permanență.

În func
ție de platforma folosită (Android sau iOS) , native base poate să schimbe modul în
care un element este afi
șat în pa
gină.

Exemplu următor prezintă codul
și componentele pentru un formular de login, împreună cu
aspectul în func
ție de platforma pe care este lansată aplicația.

Sunt importate elementele :
Container, Header, Content, Form, Item, Input
ș
i
Label

din
native
–
base.

i
mport

React, { Component }
from

'react'
;

import

{ Container, Header, Content, Form, Item, Input, Label }
from

'native
–
base'
;

export

default

class

FixedLabelExample

extends

Component

{

render() {

return

(

<Container>

<
Header />

<Content>

<Form>

<Item fixedLabel>

<Label>Username</Label>

<Input />

</Item>

<Item fixedLabel last>

<Label>Password</Label>

<Input />

</Item>

</Form>

</Content>

</Container>

);

}

}

27

Pentru Android ecranul rezultat este :

Figura 2.8.1.1 Formular
de autentificare Android

Pentru iOS acela
și ecran este :

Figura 2.8.1.
2

Formular de autentificare iOS

Această abordare conduce la un timp redus pentru dezvoltare
a

aplica
țiilor multi platformă
și la un cod mai ușor de întreținut pe termen lung.
Experien
ța

utilizatorului nu
are de suferit.

2.8.2

Motiva
ție

Am ales să integrez
N
ative
B
ase în aplica
ție din următoarele motive :

28



Există o comunitate activă
și o documentație foarte detaliată



Numărul de componente existente este semnificativ



Componentele sunt compatibile atât cu
iOS, cât
și cu Android



Design
–
ul elementelor este simplu
și conferă aplicației un aspect plăcut

2.9
ViroReact

2.9.1
Prezentare

ViroReact este o platformă pentru dezvoltarea de aplica
ții cu realitate augmentată sau
realitate virtuală, utilizând React Nativ
e. Platforma se bazează pe ARKit
37
, ARCore
38

și este
compatibilă inclusiv cu ochelari Google Cardboard, Samsung Gear VR
și Google Daydream.

Ultima versiune stabilă este Viro

React 2.14, care oferă suport pentru React Native 0.57.7
și aduce îmbunătățiri pe partea de optimizare de

a duratei de

via
ță a bateriei, dar și prin d
ezvoltarea
de anima
ții complexe

cu performan
ță superioară.

Platforma permite
crearea
experimentelor de re
alitate augmentată cu 6DOF
39
, ceea ce
înseamnă că platforma recalculează scena în
func
ție

de modul în care utilizatorul rote
ște sau
pozi
ționează camera.

Figura 2.9.1.1
–

6DOF

37

ARKIT
–

librărie de realitate augumentată pentru iOS

38

ARCORE
–

un pachet pentru dezvoltatea aplica
țiilor cu realitate auguemntată lansat de Google îm 2018

39

6 degrees
–
of
–
freedom

29

2.9.2 Încărcarea de obiecte 3D

ViroReact suportă principale forma
te pentru reprezentarea obiectelor 3D, specific :
obj, mtl,
vrx, gltf, glb, bin, arobject
, precum
și încărcarea texturilor
.

Pentru a încărca un model 3D vom folosi componenta Viro3
DObject din ViroReact,
specificâ
nd sur
sa modelului

3D
și a texturii, tipul o
biectului încărcat, precum
și principale
le
caracteristici

de început (dimensiune
și poziție).

<Viro3DObject
source={require('./res/arProducts/10216_Bean_Bag_Chair_v2_max2008
_it2.obj')}
resources={[require('./res/arProducts/10216_Bean_Bag_Chair_v2_max
2008_it2.mtl'),

require('./res/arProducts/10216_Bean_Bag_Chair_v1_Diffuse.j
pg')]}

position={[0, .1, 0]}

scale={[0.01, 0.01, 0.01]}

rotation={this.state.rotation}

dragType="FixedDistance"

onDrag={()=>{}}

onRotate={this._onRotate}

type="OBJ"

/>

2.9.3

Modificarea aspectului obiectelor prin intermediul
materialelor
,
luminii
și al umbrelor

Utilizarea
materialelor
40

poate schimba substan
țial modul în care un obiect 3D e
ste afi
șat.
Obiectele simple,
în general
,

sunt formate dintr
–
un singur material
, în timp ce obiectele complexe

40

M
aterialul define
ște proprietățile vizibile ale unui obiect

30

pot folosi mai multe
materiale

diferite.

Pentru atribu
i
rea
materialelor

se folose
ș
te

propr
ietatea
materials
din cadrul Viro3Dobject.

Un exemplu pentru încărcarea
materialului

corespunzătoare unui obiect:

<
Viro3DObject

source
=
{
require
(
'./res/heart.obj'
)}

position
=
{[
–
0.0
,
–
5.5
,
–
1.15
]}

materials
=
{[
"heart"
]}
/>

Pentru a defini

un material trebuie să specificăm un tip de iluminare
și una
sau mai multe
texuri.
Utilizăm

createMaterials
, după cum urmează :

ViroMaterials
.
createMaterials
({

heart
: {

lightingModel
:
"Blinn"
,

diffuseTexture
:
require
(
'./res/Heart_D3.jpg'
),

specularTexture
:
require
(
'./res/Heart_S2.jpg'
),

},

});

Proprietatea
diffuseTexture/diffuseMaterial
descrie

culoarea luminii reflectate în mod egal
în toate direc
ț
ii
le

supr
afe
ței materialului. Proprietatea este independentă de punct
ul

de vizualizare,
deci
diffuseTexture

reprezintă
și culoarea de bază sau textura materialului.

Proprietatea
specularTexture
descrie culoarea luminii reflectată în mod direct de material.
Suprafa
ț
a este strălucitoare
și se creează un efect ce scoate obiectul în evidență.

Există 4 moduri de iluminare tradi
ționale, ce definesc modul de combinare dintre
diffuseTexture

și lumina existentă într
–
un cadru:
Constant, Lambert, Phong, Blinn.

31

Figura 2.9.3.
1

Tip
uri de iluminare

Modu
ri de iluminare :



Constant
–

proprietatea diffuseMaterial define
ște culoarea întregii suprafețe.

color =
diffuseMaterial



Lambert
–

culoarea este determin
a
tă folosind regula lui Lambert pentru reflexia
luminii
:

ℎ

+

ℎ

∗



Phong
–

este o
aproximare

a reflec
ției din lumea reală, ce adaugă
specularLight
ș
i

specularTexture
la regula lui Lambert
:

ℎ

+

ℎ

∗



+

ℎ

∗

unde
specularLight
se calculează cu formula:

specularLight = pow(max(0, dot(R, E)), shininess)



Blinn

–

la fel ca în cazul metodei Phong
, dar cu o formulă diferită pentru
specularLight
:

specularLight = pow(max(0, dot(H, N)), shininess)

32

Capitolul 3

Descrierea aplica
ției

3.1
Autentificare
și autorizare

3.1.1
Autentificarea

Aplica
ția ShopManiaAR este bazată pe un sistem de
autentificare a utilizatorilor prin
intermediul unui email un
ic

și al unei parole.

Parolele sunt stocate în baza de date folosind o func
ți
a de hashing
41

bcrypt
. Bcrypt este
utilizat pe scară largă încă din 1999
și pro
du
ce un hash pe 184 de bi
ți, ce conferă
aplica
ției securitate
sporită.

Există validări pentru datele introduse de utilizator astfel încât să fie cert că adresa de email
introdusă are forma corespunzătoare
și că parola respectă niște
standarde

de securitate.

3.1.2
Autorizarea

Aplica
ția de tel
efon este destinată exclusiv clien
ților în timp ce pentru gestionarea
magazinului există o interfa
ță web, unde au acces doar administratorii.

Un client poate să acceseze categoriile de produse, să utilizeze realitatea augmentată pentru
produsele care perm
it acest tip de vizualizare, să adauge produse în co
ș și să vadă statusul unei
comenzi, împreună cu o listă a comenzilor anterioare
.

Administratorul de magazin poate să realizeze opera
ții asupra bazei de date ( adăugarea și
eliminarea de produse, modificar
ea
caracteristicilor produselor existente,
încărcarea unui
șablon
pentru fac
t
uri
, precum
și gestionarea comenzilor
lansate

de clien
ți).

41

Func
ție folosită pentru a transforma un input de lungime variabilă într
–
un
șir de caractere de lungime fixă.
Este foarte difilă ob
ținerea valorii inițiale din hash
–
ul corespunzător unui text de i
nput

33

3.2
Backend

3.2.2
Structura bazei de date

Bază de date utilizată este de tip rela
ționa
l ,
MariaDB

10.1.36, care reimplementează
func
ționalități din MySQL 5.6 și MySQL 6.7, dar aduce și unele elemente noi
.

Bază de date este normalizată până la formă normală 3(3NF)
42

și conține X tabele.

Diagrama bazei de date este
:

Figura 3.2.2.
1 Diagrama bazei

de date

42

3NF este o tabelă care con
ține doar atribute atomice, elementele de pe aceeași coloană sunt de acelși tip,
toate coloanele sunt identificate în mod unic
și nu conține dependente parțiale sau tranzitive.

34

3.2.3
Opera
ț
ii uzuale

Principalele rute pe care API
–
ul de backend le expune pentru interfa
ța utilizatorului sunt :



Route::post('login', 'Api
\
AuthController@login');

Metod
ă

folosită pentru
autentificare
. Se veri
fi
că dac
ă

datele introduse de
utilizator (email
și parolă) sunt corecte. În caz afirmativ serverul răspunde cu codul
200 OK
și utilizatorul are acces la funcționalitățile aplicației care necesită utilizarea
unui cont.
În caz negativ codul de eroare primit este
401
Unauthorised

.



Route::post('register', 'Api
\
AuthController@register');

Metod
ă

folosită pentru înregistrarea unui utilizator. Se verifică unicitatea
și
structura adresei de email, precum
și condițiile de securitate pentru parolă. În cazul
în care datele i
ntroduse respectă cerin
țele, o înregistrare nouă este creată în baza de
date
și utilizatorul este redirecționat către pagin
a de

Login

(
autentificare
)
.



Route::get('products', 'ProductController@index');

Returnează o listă de obiecte de tip JSON
43

ce con
ține produsele din baza de
date. În cazul în care nu există niciun obiect în baza de date, lista returnată este vidă.



Route::put('product/{id}', 'ProductController@
updateProduct
');

Permite modificarea caracteristicilor unui anumit produs, folosind id
–
ul
produsului respectiv. Este disponibilă doar pentru rolul de administrator.



Route::delete(''product/{id}', 'ProductController@
deleteProduct
');

Permite
ștergerea unui produs din lista

de produse.

43

JSON ( JavaScript Object Nota
țion ) este un
format pentru reprezentarea datelor de forma cheie
–
valoarea.
Este u
șor de citit, de parsat și de generat, fapt pentru care a devenit popular pe scară largă.

35



Route::get('categories', 'CategoriesController@index');

Returnează o listă cu obiecte de tip JSON corespunzătoare categoriilor de
produse existente



Route::put(' categoriey/{id}', 'CategoriesController@updateCategory');

Metodă folosită p
entru modificarea titlului, descrierii sau imaginii unei
anumite categorii de produse.



Route::delete(' categoriey/{id}', 'CategoriesController@updateCategory');

Permite
ș
tergerea

unei categorii de produse, împreună cu toate produsele din
categoria respe
ctivă

3.
3

Realitate augment
at
ă

3.
3
.1
Încărcarea modelelor 3D

Func
ționalitatea inovativă pe care o implementează ShopManiaAR este
vizualizarea produselor prin intermediul realită
ții augmentate. Pentru a nu limita gama de produse
existente în
magazin, butonul ce permite vizualizarea în AR va apărea doar în dreptul produselor
pentru care există un model 3D asociat.

Principalele tipuri de obiecte 3D folosite sunt OBJ, împreună cu texturile
MTL

asociate, precum
și
VRX

( ob
ținut din
FBX
).

În cazul
în care
textura
corespunzătoare

unui obiect de tip
OBJ

nu este specificată
explicit, obiectul este încărcat fără textură.

36

Figura 3.3.1.1 Obiect 3D fără textură

Fi
șierul
MTL

specifică diferitele materiale ce compun textura unui obiect, p
recum
și
indica
ții despre iluminarea și poziționarea materialelor componente.

Proprietă
țile unui fișier
MTL

:



Materialele componente (definite folosind
newmtl Nume_Material)



Ka
–

define
ș
te culoarea de ambient prin modelul RGB
44



Kd
–

culoarea difuză



KS
–

culoarea speculară



illum x
–

specific unul din cele 10 tipuri de iluminare existent.

Exemplu de fi
șier MTL :

// numele materialului

newmtl BMD_CarPaint_0020

Ka 1.000000 1.000000 1.000000

Kd 0.317404 0.800000 0.187641

Ks 0.500000 0.5
00000 0.500000

illum 2

44

RGB ( Red Green Blue ) : un model în care culorile ro
șu, verde și albastru sunt folosite pentru a

genera un
spectru întreg de culori

37

newmtl BMD_PBRMetallic

Ka 1.000000 1.000000 1.000000

Kd 0.640000 0.640000 0.640000

Ks 0.500000 0.500000 0.500000

illum 2

Aplica
țiile ce folosesc realitate augmentată sunt în general costisitoare din punct de vedere
al
resurselor dat fiind că trebuie utilizată camera telefonului
și se realizează un număr semnificat
de calcule pe funda
l

pentru afi
șarea, rotirea și mutarea obiectelor în 3D. Dacă luăm în calcul
diferitele tipuri de lumini
, calitatea înaltă a texturilor/mate
rialelor

și
efectele speciale aplicate
obiectelor, necesarul de resurse este foarte mare.

Dat fiind că telefoane au o putere de procesare mai mica decât sisteme de tip desktop sau
laptop
și luând în considerare importanta conservării bateriei dispozitivelo
r mobile, o solu
ție bună
este utilizarea obiectelor 3D de tip Low Poly. Acest obiecte au un număr relative scăzut de
poligoane. Astfel timpul de încărcare scade
și este redus consumul de baterie.

Varianta utilizării obiectelor 3D Low Poly este foarte bună

mai ales pentru că majoritatea
obiectelor dintr
–
un magazine pot să fie reprezentate fără sacrificarea
observabilă

calită
ții.

În figura 3.3.1.2 de mai jos putem observa cum arată un obiect 3D de tip Low Poly,
optimizat pentru utilizarea în cadrul aplica
ții
lor mobile.

38

Figura 3.3.1.2 Obiect 3D Low Poly

3.
3
.2
Interac
țiunea utilizatorului cu modelul 3D

Principalele func
ționalități pe care aplicația le pune la dispoziția utilizatorului, privitor la
interac
țiunea cu obiectele 3D sunt :

Vizualizarea obiectelor în 3D.

Pentru a vizualiza obiectul în 3D este suficient ca utilizatorul să î
și dea acceptul pentru

utilizarea camerei
și să poziționeze obiectul pe o suprafață.

Rotirea obiectelor
la

stânga sau dreapta

Rotirea se face
prin detect
area gestului corespunzător rotirii, prin detectarea direc
ției de
rota
ției și prin modificarea coordonatei corespunzătoare, în acord cu un parametru ce
reprezintă

factorul de rota
ție.

_onRotate(rotateState, rotationFactor, source) {

if (rotateState === 3) {

39

this.setState({

rotation:[this.state.rotation[0],
this.state.rotation[1] + rotationFactor*7, this.state.rotation[2]]

});

}

}

Metoda trebuie aplicată ca proprietate a obiectului, folosind proprietatea
onRotate
:

<Viro3DObject
source={require('./res/arProducts/10216_Bean_Bag_Chair_v2_max2008
_it2.obj')}

resources={[require('./res/arProducts/10216_Bean_Bag_Ch
air_v2_max
2008_it2.mtl'),

require('./res/arProducts/10216_Bean_Bag_Chair_v1_Diffuse.jpg')]}

position={[0, .1, 0]}

scale={[0.01, 0.01, 0.01]}

rotation={this.
state.rotation}

dragType="FixedDistance"

onDrag={()=>{}}

onRotate={this._onRotate}

type="OBJ"

/>

Detectarea suprafe
țelor și plasarea obiectelor pe suprafețele co
respunzătoare
.

Detectarea suprafe
țelor se face folosind componenta
ViroARPlaneSelector.
În func
ție de
proprietă
țile pe care le
prime
ște
, componenta poate detecta suprafe
țe verticale sau orizontale,
numărul maxim de planuri pe care să le afi
șeze utilizator
ului, dimensiunile minime ale unui plan,
precum
și să definească acțiuni ca urmare a interacți
unii

cu unul dintre planuri ( de exemplu

40

plasarea unui obiect în perimetrul determinat de un plan ). După ce un plan a fost detectat, el este
marcat
corespunzător

și utilizatorul poate interacționa pentru plasarea obiectelor în raport cu acesta.

Figura 3.3.2.
1

Detectarea suprafe
țelor

41

Capitolul 4

Exemple de utilizare

Dat fiind că solu
ția este compusă dintr
–
o aplica
ț
ie

mobile disponibilă utilizatorilor
și o
aplica
ție web pentru administrare
a

magazinului, voi prezenta separat fluxul de utilizare pentru
fiecare componentă în parte.

4.1. Aplica
ția mobile destinată clienților magazinului

Orice utilizator, fie că este
înregistrat sau nu, poate să vizualizeze categoriile de produse,
produsele disponibile în magazin
și să acceseze funcționalitatea AR.

Primul ecran cu care utilizatorul interac
ționează este cel de alegere al unei categorii de
produse. În func
ție de categori
a aleasă, utilizatorul va vizualiza o listă de produse, împreună cu
caracteristicile acestora ( denumire, descriere, pre
ț, imagine 2D ). Pentru fiecare
produs

există

un
buton de “adaugă în co
ș” și, dac
ă

există un model 3D pentru obiectul respectiv, un buto
n pentru
vizualizarea obiectului cu ajutorul realită
ții
augmentat
e
.

Butonul pentru vizualizarea produsului în
AR nu este afi
șat dacă pentru un anumit produs nu există un model 3D care să permită vizualizarea.

Dacă utilizatorul ini
țiază acțiunea de adăugarea a unui produs în coș fără să fie autentificat,
atunci este redir
ec
ționat către ecranul de logic. În ecranul de

login

(autentificare), utilizatorul

poate
introduce datele contului ( email
și parolă) pentru a se autentifica. Dacă datele sunt valide, atunci
este redirec
ționat către lista cu categoriile de produse. În cazu
l în care autentificarea nu s
–
a realizat
cu succes, un mesaj de eroare este afi
șat și clientul poate introduce datele din nou să poate să
–
și
creeze un cont.

Dacă utilizatorul alege să vizualizeze produsul dorit prin intermediul realită
ții
augmentate
,
atunc
i i se solicită permisiunea pentru folosirea camerei video
și obiectul este afișat pe ecran. Prin
efectuarea diferitelor gesturi, un client are posibilitatea să rotească obiectele, să le repozi
ționeze
sau să le plaseze în raport cu un anumit plan ( de exem
plu suprafa
ța unui birou de lucru pentru
obiectele electronice sau masa din bucătărie pentru electrocasnice).

Există un ecran special “my list”, unde un client poate vedea produsele adăugate în co
ș și
poate finaliza o comandă. La finalizarea comenzii stat
usul este “pending” până când un angajat al

42

magazinului va prelua comanda
și va modifica statusul. Există posibilitatea vizualizării comenzilor
anterioare
,
precum
și a descărcării facturii în format electronic.

43

Figura 4.1.1
–

Selectarea categori
ei de produse

44

Figura 4.1.2 Lista de produse

45

Figura 4.1.3 Ecran de autentificare

46

Figura 4.1.4 Afi
șarea unui obiect folosind
realitate

augmentată

47

Figura 4.1.5 Crearea unui cont în ecranul de înregistrare

48

Figura 4.1.6 Vizualizarea
co
șului

de cumpărături

49

Figura 4.1.7 Vizualizarea tuturor comenzilor ( curente sau anterioare)

50

4.
2

Interfa
ța web pentru administrare

Primul ecran din aplica
ția pentru administratori este cel de autentificare. Utilizatorul cu rol
de
administrator trebuie să
–
și introducă datele contului (email și parolă) pentru a avea acces la
instrumentele de management ale magazinului.

Nu există un ecran special pentru înregistrare pentru că toate
conturi

de
administrator

sunt
create de către un alt
administrator.

După ce utilizatorul s
–
a autentificat cu succes, poate să aleagă dintre diferitele
func
ționalități pe care sistemul le pune la dispoziție.

În meniul “administrare produse” administrator vede o listă cu toate produsele existente în
magazin
ș
i poate să modifice proprietă
țile unui produs (denumire, descriere, preț,
cantitatea

disponibilă pe
stoc

, imagine 2D ), poate să
șteargă complet un produs sau să introducă un model
3D pentru un produs deja existent. La crea
rea

unui produs nou singurele câ
mp op
țional este cel
pentru modelul 3D. În cazul în care nu există un model 3D pentru un produs, utilizatorul nu va
avea op
țiunea să vizualizeze obiectul folosind realitatea
augmentată

din aplica
ția mobile.

Din sec
țiunea “gestionare comenzi” se pot vizuali
za toate comenzile utilizatorilor
și după
expedierea comenzii statusul poate să fie modificat corespunzător. Comenzile ini
țiale au statusul
“pending”
și devin “closed” după expediere.

În pagina „
administrare

generală” se pot schimba categoriile de produse
existente, precum
și
ș
abloanele

pentru facturi.

Ultimul element din meniu este “administrare personal” unde se pot adăuga noi utilizatori
cu rolul de administrator, se pot dezactiva conturile administratorilor existen
ți și se poate vizualiza
o listă
completă a personalului.

Prin instrumentele de gestionare a magazinului se
dore
ște

oferirea

unei solu
ții
intuitive
, care
răspunde

celor

mai importante nevoi ale personalului administrativ. Interfa
ța este minimalistă și
u
șor de folosit.

Motivul pentru care
am decis utilizarea unei platforme web de administrare în detrimentul
unei solu
ții mobile este chiar confortul utilizatorului. Adăugarea de fișiere și introducerea unui
volum mare de date se pretează mai bine pentru utilizarea pe desktop sau laptop decât p
rin
intermediul ecranului dispozitivului mobil.

51

Figura 4.
2
.
1

Pagina de autentificare pentru administratori

52

Figura 4.2.2 Administrare produse

53

Figura 4.2.3 Gestionare comenzi

54

Figura 4.2.4 Administrare generală
–

adăugarea de
șabloane pentru
facturi

Figura 4.2.5 Administrare generală
–

categorii de produse

55

Figura

4.2.6 Administrare personal

56

Capitolul 5

Concluzii

Comer
țul electronic este cu certitudine cea importantă modalitate de vânzare, specific
pentru societatea modernă caracterizată de tehnologie
și viteză. Dezvoltarea impresionantă din
ultimii ani demonstrează fără urmă de îndoială că omul secolului XXI nu ma
i vrea să se deplaseze
la magazine fizice, cu o gamă limitată de produse, ci preferă să aibă acces la o gamă aproape infinită
de alegeri, din confortul propriei locuin
țe. Conform unui studiu Oberlo din 2019, până în 2021
vânzările electronice vor produce v
enituri de 4.5 trilioane dolari (o cre
ștere de peste 300%), iar
73% dintre acestea se vor realiza prin intermediul dispozitivelor mobile. Poate cel mai spectaculos
aspect

din aceea
și analiză este că până în 2022 mai mult de 120,000 de magazine vor integra
realitatea
augmentată

în serviciile folosite pentru promovarea produselor. Astfel, este evident că
viitor
ul

apar
ține celor care
în
țeleg

să folosească tehnologia pentru fidelizarea consumatorilor, iar
magazine fizice
și site
–
urile statice vor pierde o parte

importantă

din pon
d
erea de pia
ță pe care încă
o mai de
țin.

Aplica
ția ShopManiaAR vine să răspundă chiar acestei nevoi, pe care atât producătorii, cât
și

consumatorii

o resimt. Prin integrarea realită
ții
augmentate

în procesul de vânzare clien
ții se
bucură

de servicii superioare, pot face o alegere mult mai bine informată
și economisesc timpul
petrecut pentru deplasarea către un magazin fizic în scopul vizualizării produselor. De asemenea,
flexibilitatea este foarte mare
și pentru comercianți, ce pot opta s
ă încarce modele 3D doar pentru
acele produse pentru care se dore
ște acest lucru. Astfel, nu există limitări în privința produselor
care pot apăra
într
–
o

astfel de platformă.

Pentru utilizatori experien
ța folosirii aplicației este una plăcută, design
–
ul e
ste
intuit
iv

și
orice opera
țiune poate să fie efectuată din doar câteva apăsări de ecran. Clientul este în permanență
informat despre statusul comenzii sale
și despre cele mai noi produse apărute.

Pentru

administratorii de magazin, solu
ția oferă exact fun
c
ționalitățile de care este nevoie,
fără să existe un timp de învă
țare îndelungat și meniuri excesiv de complicate. Aplic
a
ț
ia a fost
dezvoltată având la bază principiul
u
șurinței în utilizare
, focusul fiind mereu pe experien
ța
utilizatorului final. Practic
, în doar câteva secunde se pot adăuga produse, modif
i
ca informa
ții
despre cele existente
și chiar se poate gestiona resursa umană.

57

Din punct de vedere al securită
ții, soluțiile avute în vedere pe timpul
dezvoltării

garantează
confiden
țialitatea datelor ș
i elimină riscul ca persoane neautorizate să interfereze cu activitatea
economică desfă
șurată.

În final, ShopManiaAR
este mai mult decât

un produs u
șor de folosit, ce oferă soluții pentru
clien
ți și administratori deopotrivă. Produsul software, prin tehnol
ogiile folosite
și prin viziunea
ambi
țioasă își propune să demonstreze că tehnologia este viitorul și că indiferent de vechimea pe
pia
ță sau de dimensiune, companiile de retail trebuie să se reinventeze prin tehnologie. Niciodată
nu a fost mai simplu să of
eri consumatorilor o
experien
ță

superioară
și să ușurezi munca
personalului administrativ, iar ShopManiaAR are
ș
anse

reale să contribuie la introducerea
realită
ții

augmentate

în E
–
Commerce
și în rutina noastră zilnică.

58

Bibliografie

[1] Vlada, Marin.
,
Mircea Popovici. Realitatea Virtuală (Virtual Reality), tehnologie
modernă a informaticii aplicate
, 2004

[2] Cipresso P, Giglioli IAC, Raya MA, Riva G. The Past, Present, and Future of Virtual
and Augmented Reality Research
: A Network and Cluster Analysis of the Literature, 2018

[3] Kenton McHenry, Peter Bajcsy An Overview of 3D Data Content, File Formats and
Viewers, National Center for Supercomputing Applications University of Illinois, 2008

[4] Jacob Poushter, Pew Researc
h Center,Smartphone Ownership and Internet Usage
Continues to Climb in Emerging Economies, 2016

[5] R. Silva, J.C Oliveira, G.A. Giraldi Introduction to Augmented Reality, 2003

[
6
] Martin Kutz, Introduction to E
–
Commerce : Combining Business and Informati
on
Technology, 2016

[
7
]
Vikram Vaswani ,
PHP A beginner’s guid, 2009

[
8
] Jack Vo,

Learning Laravel: The Easiest Way, 2014

[
9
] Abdul Majeed, Ibtisam Rauf, MVC Architecture: A Detailed Insight to the Modern Web
Applications Development, 2018

[
10
]
MySQL AB ,
MySQL Reference Manual

[1
1
] Marijn Haverbeke,

Eloquent JavaScript, Third Edition, 2018

[1
2
]
Ari Lerner,
30 days of React, An Introduction to React in 30 bite
–
size morsels, 2017

[1
3
]

Peter Cowburn,
PHP Manual
, The PHP Documentation Group, 2018

https://www.php.net/manual/en/

[1
4
]
https://www.oberlo.com/blog/ecommerce
–
trends

[1
5
]
https://docs.virome
dia.com/

59

[1
6
]
https://w3techs.com/technologies/overview/programming_language/all

[1
7
]
https://www.json.org/

[1
8
]
https://mariadb.com/kb/en/library/mariadb
–
10136
–
release
–
notes/

[1
9
]
https://dev.mysql.com/doc/

[
20
]
https://levelup.gitconnected.com

:

[
21
]
https://cdn
–
images
–
1.medium.com/max/1600/1*u8hTumGAPQMYZIvfgQMfPA.jpeg

[
22
]
https://docs.nativebase.io/

60

Listă
de
figuri

2.1 Schema MVC………………………………………………………………………
…
12

2.3.1 MySQL
–

gestionarea cererilor
utilizatorilor……………………………………………………
.
13

2.7.1
–

Arhitectura React Native…………………………………………………………………………….
.
16

2.7.7.1
–

Ciclul de via
ță al unei componente……….
……………………………………………..
.
……
.
23

2.8.1.1 Formular
de autentificare

Android……………………………………………………………….
.
27

2.8.1.2 Formular de autentificare
iOS
……………………………….
…………………………………..
.
..27

2.9.1.1

6DO
F
…………………………………………………………………………………………………….
…
29

2.9.3.1 Tipuri de iluminare…………………………………………
…………………………………………..31

3.2.2.
1 Diagrama bazei de date
…………………………………………………………………………
.
…….34

3.3.1.1 Obiect 3D fără textură………………………………………
…………………………………………36

3.3.1.2 Obiect 3D Low Poly……………………………………………………………………………..
.
……38

3.3.2.1 Detectarea
suprafe
țelor…………………………………………………………………………..
.
…..41

4.1.1 Selectarea categoriei de produse…………………………………………………………………
.
….43

4.1.2 Lista de produse……
…………………………………………………………………………………..
.
…44

4.1.3 Ecran de autentificare…………………………………………………………………………………
.
…45

4.1.4 Afi
șarea unui obiect

folosind
realitate

augmentată
…………………………………………
.
..46

4.1.5 Crearea unui cont în ecranul de
înregistrare……………………………………………………
..
.47

4.1.6 Vizualizarea
co
șului

de cumpărături
………………………………………………………………
..
48

4.1.7 Vizualizarea tuturor comenzilor ( curente sau anter
ioare)………………………………..
..
.49

4.
2.1

Pagina de autentificare pentru administratori………………………………………………
..
…
.
.51

4.2.
2

Administrare produse
………………………………………………………..
…………………………..52

4.2.3 Gestionarea comenzilor………………………………………………………………………………….53

4.2.4 Administrare generală
–

de
șabloane pentru facturi
…………………………………
………..54

4.2.5 Administrare generală
–

categorii de produse…………………………………………………..54

4.2.6 Administrare personal……………………………………………………………………………………55