PROGRAMUL DE STUDIU TEHNOLOGIA INFORMA Ț IEI FORMA DE ÎNVĂ Ț ĂMÂNT IF EASY SHOP MANAGER COORDONATOR Ș TIIN [613569]

UNIVERSITATEA DIN ORADEA

FACULTATEA DE INGINERIE ELECTRICĂ
Ș
I TEHNOLOGIA

INFORMA
Ț
IEI

PROGRAMUL DE STUDIU TEHNOLOGIA INFORMA
Ț
IEI

FORMA DE ÎNVĂ
Ț
ĂMÂNT IF

EASY SHOP MANAGER

COORDONATOR
Ș
TIIN
Ț
IFIC

Conf. Dr.Ing. GIANINA GABOR

ABSOLVENT: [anonimizat]

2018

CUPRINS

INTRODUCERE
2

CAPITOLUL I. LIMBAJE
Ș
I TEHNOLOGII UTILIZATE
5

I.1. JAVA SCRIPT
5

I.2 TYPESCRIPT
6

I.3 NODE.JS
7

I.4 ANGULAR
9

I.5 MongoDB
13

I.5 Docker Containers
15

CAPITOLUL II. TIPURI DE SOFTWARE UTILIZATE
16

II.1 VISUAl STUDIO CODE
16

II.2 GIT
16

II.3 VISUAL STUDIO TEAM SERVICE
17

II.4 DOCKER FOR WINDOWS
17

II.5 Android Studio
18

CAPITOLUL III. PROIECTAREA SI IMPLEMENTAREA APLICA
Ț
IEI
18

III.1 PROIECTAREA APLICA
Ț
IEI
18

III.2. STRUCTURA APLICA
Ț
IEI
18

III.3. STRUCTURA BAZEI DE DATE
18

III.4. IMPLEMENTAREA APLICA
Ț
IEI
18

CONCLUZII
19

BILBIOGRAFIE
19

INTRODUCERE

Managementul
unui
magazin
este
o
ac
ț
iune
complexă
ș
i
costisitoare
din
punct
de
vedere

financiar
ș
i
ca
timp,
dar
acesta
este
unul
dintre
factorii
principali
care
duc
la
ob
ț
inerea
profitului

ș
i în consecin
ț
ă succesul unui magazin sau la pierderi financiare
ș
i faliment.

Considerând
acestea
o
solu
ț
ie
software
de
management
este
tot
mai
mult
o
necesitate
ș
i
nu
doar
o

optimizare
pentru
comercian
ț
i.
Suntem
obijnui
ț
i
sa
vedem
astfel
de
sisteme
cu
case
de
market

modern
cu
scanner
laser
pe
care
le
întâlnim
în
supermarketuri
ș
i
lan
ț
urile
de
magazine

consacrate,
dar
majoritatea
magazinelor
din
mici
si
mijlocii
din
ț
ara
(precum
cele
de
cartier
,
din

mediul
rural
sau
cu
un
specific
anume,
etc)
nu
folosesc
astfel
de
sisteme
,
se
bazează
pe
casa
de

marcat
fiscal
care
emite
bonuri,
pe
clasicele
registre
scrise
de
mană
pentru
a
ț
ine
eviden
ț
a

vânzărilor,
a
stocului
de
produse
ș
i
pe
etichetele
de
pe
rafturi
ș
i
memoria
comerciantului
pentru

eviden
ț
a pre
ț
urilor
ș
i a tre ndurilor în rândul cumpărătorilor.

Exista
multiple
motive
pentru
lipsa
unui
astfel
de
sistem
de
management
informatic
din
aceste

magazine,
consider
principalul
motiv
ca
fiind
efortul
financiar
considerabil
necesar
achizi
ț
ionării

ș
i
men
ț
inerii
hardware-ului
ș
i
software-ului
pentru
un
sistem
conform
celor
din
supermarket,
pe

care
proprietarii/managerii
unor
astfel
de
magazine
le
considera
prea
costisitoare
pentru
cifra
de

afacere al magazinului.

Un
al
doilea
motiv
ar
fi
evitarea
tehnologiei
modern
care
poate
părea
ca
o
complicare
a

activită
ț
ii
comerciale
pentru
managerii
ș
i
angaja
ț
ii
care
au
manageriat
afacerea
fără
un
astfel
de

sistem pentru perioade întinse de timp de la câ
ț
iva ani la zeci de ani de activitate.

Această
lucrare
are
ca
scop
descrierea
implementării
ș
i
realizarea
unei
solu
ț
ii
software
bazata
pe

tehnologii
web
si
mobile
pentru
management
a
unui
magazin
mic
sau
mijlociu
,
care
dore
ș
te
să

vină în ajutorul micilor comercian
ț
i, oferind o solu
ț
ie simplu de utilizat la un cost redus.

Idea
de
a
implementa
o
astfel
de
solu
ț
ie
de
management,
a
venit
în
urma
constientizării

practicalită
ț
ii
unui
astfel
de
sistem
când
am
lucrat
la
magazinul
familiei,
nefiind
obijnuit
cu

pre
ț
urile
produselor
eram
nevoit
să
părăsesc
tejgheaua
ș
i
să
caut
etichetele
cu
pre
ț
uri
pe
rafturile

cu
produse
din
magazin,
astfel
pierdeam
timp
atat
eu
cat
ș
i
clientul
care
era
nevoit
sa
a
ș
tepte
mai

mult pentru a achita cumpărăturile.

Grupul
ț
inta
al
acestei
solu
ț
ii
este
reprezentat
de
managerii
ș
i
angaja
ț
ii
unui
magazine
mic
sau

mijlociu
care
doresc
să
î
ș
i
aducă
afacerea
în
era
digitală
ș
i
să
crească
astfel
eficien
ț
a
ș
i

profitabilitatea activită
ț
ii pe care o desfă
ș
oară.

CAPITOLUL I. LIMBAJE
Ș
I TEHNOLOGII UTILIZATE

I.1. JAVA SCRIPT

JavaScript
este
un
limbaj
de
programare
orientat
pe
obiect,
bazat
pe
conceptul
prototipurilor.

Este
folosit
mai
ales
pentru
introducerea
func
ț
ionalită
ț
ilor
în
paginile
web,
codul
JavaScript
din

aceste pagini este rulat de către browser.

JavaScript
a
fost
dezvoltat
ini
ț
ial
de
către
Brendan
Eich
de
la
Netscape
Communications

Corporation sub numele de Mocha, apoi LiveScript
ș
i denumit în final JavaScript.

Acest
limbaj
este
cel
mai
des
utilizat
deoarece
programatorii
web
pot
îngloba
în
paginile
HTML

script-uri
pentru
diverse
activită
ț
i
cum
ar
fi
verificarea
datelor
introduse
de
utilizatori
sau
crearea

de meniuri
ș
i alte efecte a nimate.

Arborele
de
obiecte
poartă
numele
de
Document
Object
Model
sau
DOM.
Există
un
standard

W3C
pentru
DOM-ul
pe
care
trebuie
să
îl
pună
la
dispoziție
un
browser,
ceea
ce
oferă
premiza

scrierii de script-uri portabile, care să func
ț
ioneze pe toate browserele.[1]

Un
script
scris
în
acest
limbaj
este
un
program
inclus
într-o
pagină
HTML.
Textul
scriptului
nu

este
afișat
pe
ecran,
el
fiind
rulat
și
interpretat
de
browser.
Browser-ul
știe
că
este
vorba
despre

un
program
scris
în
Java
Script
atunci
când
întâlnește
tag-ul
și
acționează
în
consecință
rulând
și

interpretând codul respectiv.

A
fost
necesar
să
utilizez
acest
limbaj
deoarece
am
dorit
că
aplicația
să
arate
și
să
funcționeze
cel

puțin la fel cu cele concurente.

Utilizarea
JavaScript
în
combinație
cu
HTML
duce
la
crearea
unor
pagini
web
cu
un
grad
ridicat

de interactivitate.[1]

De asemenea alte tehnologii moderne utilizează limbajul JavaScript
ș
i permit utilizarea acestuia.

Utilizând
Javascript
putem
induce
utilizatorului
sentimentul
că
datele
sunt
manipulate
și

încărcate
în
timp
real,
deși
durata
încărcării
și
manipulării
datelor
este
dată
de
viteză
internetului

și de viteză raspunslui dat de baza de date dacă este cazul.

La
realizarea
lucrării
de
diplomă
am
folosit
JavaScript
alături
de
librăria
jQuery
pentru
afișarea

dinamică
de
date,
în
cadrul
framework-ului
Angular
pentru
scrierea
componentelor
pentru

dezvoltarea aplica
ț
iei
ș
i pentru API-uri care au fost scrise tot cu li mbajul JavaScript.

Figura I.1Exemplu utilizare Javascript din aplica
ț
ie

I.2 TYPESCRIPT

TypeScript este un limbaj de programare open-source dezvoltat de compania Microsoft. Acesta

vine ca un superset pentru limbajul JavaScript
ș
i adaugă tipizare statică op
ț
ională limbajului,

astfel TypeScript este un limbaj mai puternic tipizat decât JavaScript.

TypeScript a fost conceput pentru dezvoltarea de aplica
ț
ii mare si este transpilat în Javascript.

Fiind un superset al Javascript programele javascript existente sunt de asemenea programe

TypeScript valide.[3]

TypeScript se compilează la codul JavaScript simplu
ș
i curat, care rulează pe orice browser, în

Node.js sau în orice motor JavaScript care acceptă ECMAScript 3 (sau mai nou).[4]

Compilatorul TypeScript însu
ș
i este scris în TypeScript
ș
i compilat în Javascript. Este licen
ț
iat

sub licen
ț
a Apache 2.[3]

TypeScript este inclus ca un limbaj de programare de primă clasă în Microsoft Visual Studio

2013 Update 2
ș
i ulterior, alături de C #
ș
i alte limbi Microsoft.[3]

Tipurile permit dezvoltatorilor JavaScript să utilizeze instrumente
ș
i practici de dezvoltare

extrem de productive, cum ar fi verificarea statică
ș
i refactorizare atunci când elaborează

aplica
ț
ii JavaScript. [4]

Tipurile sunt op
ț
ionale, ia r inferen
ț
a de tip permit câtorva adnotăr i de tip să aducă o mare

diferen
ț
ă verificării static e a codului. Tipurile vă permit să defini
ț
i interfe
ț
e între componentele

software
ș
i să ob
ț
ine
ț
i informa
ț
ii despre comportamentul bibliotecilor JavaScript existente. [4]

Anders Hejlsberg, arhitectul principal al lui C#
ș
i creatorul Delphi
ș
i Turbo Pascal, a lucrat la

dezvoltarea limbajului TypeScript. [3]

La
realizarea
lucrării
de
diplomă
am
folosit
TypeScript
în
aplica
ț
ia
client
side
dezvoltata
cu

framework-ului
Angular
versiunea
6
,
acesta
fiind
principalul
limbaj
de
programare
pe
care

Angular îl accepta
ș
i care este recomandat de către dezvoltatorii framework-ului.

Figura I.2 Exemplu utilizare TypeScript din aplica
ț
ie

I.3 NODE.JS

Node.js
este
un
mediu
run-time
JavaScript,
open-source
ș
i
cross-platform
,
care
execută

cod
JavaScript
server-side.
Inainte
de
Node.js
JavaScript
era
folosit
pentru
a
scrie
soft
care
era

utilizat
în
primul
rând
pe
partea
clientului,
în
care
script-urile
scrise
în
JavaScript
sunt

încorporate
în
HTML-ul
unei
pagini
web
ș
i
se
execută
în
partea
clientului
de
un
motor
JavaScript

încorporat în browser-ul web al utilizatorului.

Node.js
permite
dezvoltatorilor
să
folosească
JavaScript
pentru
a
dezvolta
scripturi
pe

partea
de
server,
pentru
a
produce
con
ț
inut
web
dinamic
înainte
de
a
ajunge
pe
browser-ul

utilizatorului,
astfel
Node.js
reprezinta
o
paradigma
"JavaScript
peste
tot",
unificând
astfel

dezvoltarea
​
aplica
ț
iilor
web
în
jurul
unui
singur
limbaj
de
programare
atât
pe
partea
de
client
cât

ș
i pe partea de server.

De
ș
i
“.js
“
este
extensia
conven
ț
ională
a
fi
ș
ierului
pentru
codul
JavaScript,
numele

"Node.js" nu se referă la un anumit fi
ș
ier în acest context
ș
i este doar numele produsului. Practic

Node.js
permite
crearea
de
servere
web
ș
i
instrumente
de
re
ț
ea
folosind
JavaScript
ș
i
o

colec
ț
ie
de
"module"
care
manipulează
diferite
func
ț
ionalită
ț
i
de
bază.
Sunt
furnizate
modulele

cu majoritatea func
ț
iilor de baza pentru: –

– I/O pentru sistemul de fi
ș
iere I/O,

– re
ț
ele (DNS, HT TP, TCP, TLS/SSL sau UDP),

– date binare (buffer-uri),

– func
ț
ii criptogra fice,

– fluxuri de date

– alte func
ț
ii de b ază.

Modulele
Node.js
utilizează
un
API
proiectat
pentru
a
reduce
complexitatea
scrierii
de

aplica
ț
i
server.
Node.js
este
suportat
oficial
pe
Linux,
MacOS,
Microsoft
Windows,
SmartOS,

FreeBSD
ș
i
IBM
AIX.
Codul
sursă
furnizat
poate
fi,
de
asemenea,
construit
pe
sisteme
de

operare
similare
sau
poate
fi
modificat
de
ter
ț
i
pentru
a
sprijini
al
ț
ii,
cum
ar
fi
serverele
NonStop

ș
i
Unix.
Alternativ,
ele
pot
fi
scrise
cu
CoffeeScript
(o
alternativă
JavaScript),
Dart
sau

TypeScript
(formua
puternic
tipizată
a
JavaScript)
sau
orice
alt
limbaj
care
poate
fi
compilat
în

JavaScript.
​
[5]

Node.js
este
folosit
în
principal
pentru
a
construi
programe
de
re
ț
ea,
cum
ar
fi
servere

web.
Cea
mai
mare
diferen
ț
ă
dintre
Node.js
ș
i
PHP
este
că
majoritatea
func
ț
iilor
în
PHP
sunt

blocante,
comenzile
se
execută
numai
după
încheierea
comenzilor
anterioare,
codul
este
executat

în
mod
sincron),
în
timp
ce
func
ț
iile
Node.js
sunt
non-blocante,
comenzile
se
execută
simultan

sau
chiar
în
paralel
(în
mod
asincron),
ș
i
se
folosesc
apelurile
înapoi
(“callbacks”)
pentru
a

semnala finalizarea sau e
ș
ecul.

Node.js
are
o
arhitectură
bazată
pe
evenimente,
capabilă
de
I/O
asincron.
Aceste
op
ț
iuni

de
proiectare
vizează
optimizarea
capacită
ț
ii
ș
i
a
scalabilită
ț
ii
în
aplica
ț
iile
web
cu
multiple

opera
ț
iuni
de
intrare
/
ie
ș
ire,
precum
ș
i
pentru
aplica
ț
ii
web
în
timp
real
(de
exemplu,
programe

de comunicare în timp real
ș
i jocuri de browser).
​
[5]

Arhitectura
platformei
Node.js
aduce
programare
bazată
pe
evenimente
pe
servere
web,

permi
ț
ând
dezvoltarea
de
servere
web
rapide
în
JavaScript.
Dezvoltatorii
pot
crea
servere
extrem

de
scalabile
fără
a
folosi
fire
de
execu
ț
ie,
utilizând
un
model
simplificat
de
programare
bazată
pe

evenimente
care
utilizează
callback-uri
pentru
a
semnala
finalizarea
unei
sarcini.
Node.js

conectează
u
ș
urin
ț
a
limbajului
JavaScript
cu
puterea
programări i
de
re
ț
ea
Unix.
Este
extrem
de

rapid
ș
i
competent
cu
fundamentele
internetului,
cum
ar
fi
HTTP,
DNS,
TCP.
De
asemenea,

JavaScript
a
fost
un
limbaj
bine
cunoscut,
făcând
Node.js
accesibil
imediat
pentru
întreaga

comunitate de dezvoltare web.

Există
mii
de
biblioteci
open-source
pentru
Node.js,
cele
mai
multe
dintre
ele
fiind

găzduite
pe
site-ul
web
www.npmjs.com.
Comunitatea
open-source
a
dezvoltat
cadre
web
(web

frameworks)
pentru
a
accelera
dezvoltarea
aplica
ț
iilor.
Astfel
de
cadre
includ
Connect,

Express.js, Socket.IO, Koa.js, Hapi.js, Sails.js, Meteor, Derby
ș
i multe altele.

De
asemenea,
s-au
creat
diferite
pachete
pentru
interfa
ț
a
cu
alte
limbi
sau
cu
medii
de

executare, cum ar fi Microsoft .NET.
​
[5]

La
realizarea
lucrării
de
diplomă
am
folosit
Node.js
pentru
a
creea
aplica
ț
ii
server
,
API-uri
web

prin
intermediul
cărora
se
realizează
comunicarea
dintre
aplica
ț
ia
care
rulează
pe
partea

clientului
ș
i
baza
de
date.
Am
ales
Node.js
deoarece
sunt
foarte
familiar
acesta
ș
i
cu
limbajul

JavaScript,
serverele
dezvoltate
cu
Node.js
procesează
foarte
rapid
cererile
de
la
aplica
ț
ile
client

astfel înbunătă
ț
ind perfor man
ț
a întregului sistem.

I.4 ANGULAR

Angular
este
o
platformă
ș
i
un
framework
pentru
crearea
de
aplica
ț
ii
client
în
HTML
ș
i

TypeScript.
Angular
însu
ș
i
este
scris
în
TypeScript.
Acesta
implementează
func
ț
ionalitatea
de

bază
ș
i op
ț
ională ca set de biblioteci TypeScript pe care le import a
ț
i în aplica
ț
iile dvs.

Blocurile
de
bază
ale
unei
aplica
ț
ii
Angular
sunt
modulele
Anglar
(NgModules),
care

oferă
un
context
de
compilare
pentru
componente.
Modulele
Angular
colectează
codul
asociat
în

seturi
func
ț
ionale;
o
aplica
ț
ie
Angular
este
definită
de
un
set
de
module.
O
aplica
ț
ie
are

întotdeauna
cel
pu
ț
in
un
modul
rădăcină
care
permite
bootstrapping
ș
i
de
obicei
are
multe
alte

module de caracteristici.[6]

Componentele
definesc
​
view-uri
​
,
care
sunt
seturi
de
elemente
de
ecran
pe
care
Angular

le
poate
alege
ș
i
modific a
în
func
ț
ie
de
logica
programului
ș
i
de
date.
Fiecare
aplica
ț
ie
are
cel

pu
ț
in
o
componentă
rădăcină.
Componentele
utilizează
​
servicii
​
care
oferă
func
ț
ionalită
ț
i

specifice
care
nu
sunt
direct
legate
de
​
view-uri
​
.
Furnizorii
de
servicii
pot
fi
injecta
ț
i
în

componente ca dependen
ț
e, făcând codul modular, reutilizabil
ș
i eficient.

Atat
componentele
cât
ș
i
serviciile
sunt
pur
ș
i
simplu
clase,
cu
decoratori
care
marchează

tipul
lor
ș
i
oferă
metada te
care
îi
spun
lui
Angular
cum
să
le
folosească.
Metadatele
pentru
o

clasă
de
componentă
o
asociază
cu
un
ș
ablon
care
define
ș
te
un
view.
Un
ș
ablon
combină
codul

HTML
obi
ș
nuit
cu
direct ivele
Angular
ș
i
marcajul
de
legare
care
permit
lui
Angular
să
modifice

codul
HTML
înainte
de
al
randa
pentru
afi
ș
are.
Metadatele
pentru
o
clasă
de
tip
serviciu

furnizează
informa
ț
iile
necesare
lui
Angular
pentru
a
le
pune
la
dispozi
ț
ia
componentelor
prin

intermediul injec
ț
iei de d ependen
ț
ă (ID).[6]

Componentele
unei
aplica
ț
ii
definesc
de
obicei
multe
views,
aranjate
ierarhic.
Angular

furnizează
serviciul
Router
pentru
a
vă
ajuta
să
defini
ț
i
căile
de
navigare
între
views.
Router-ul

oferă capabilită
ț
i sofistica te de navigare în browser.

Angular
define
ș
te
NgModule
(modulul
Angular),
care
diferă
ș
i
completează
modulul

JavaScript
(ES2015).
Un
NgModule
declară
un
context
de
compilare
pentru
un
set
de

componente
care
este
dedicat
unui
domeniu
de
aplica
ț
ie,
unui
flux
de
lucru
sau
unui
set
de

capabilită
ț
i
strâns
legate.
Un
NgModule
poate
asocia
componentele
sale
cu
cod
asociat,
cum
ar
fi

serviciile,
pentru
a
forma
unită
ț
i
func
ț
ionale.
Fiecare
aplica
ț
ie
Angular
are
un
modul
rădăcină,

denumit
conven
ț
ional
AppModule,
care
oferă
mecanismul
de
pornire
care
lansează
aplica
ț
ia.
O

aplica
ț
ie con
ț
ine de obicei multe module func
ț
ionale. [6]

Ca
ș
i
modulele
JavaScript,
modulele
Angular
pot
importa
func
ț
ionalită
ț
i
din
alte

modulele
Angular
ș
i
poate
permite
ca
propriile
lor
func
ț
ionalită
ț
i
să
fie
exportate
ș
i
utilizate
de

alte
modulele
Angular.
De
exemplu,
pentru
a
utiliza
serviciul
de
router
în
aplica
ț
ia
dvs.,

importa
ț
i
NgModul-ul
Router.
Organizarea
codului
în
module
func
ț
ionale
distincte
ajută
la

gestionarea
dezvoltării
de
aplica
ț
ii
complexe
ș
i
la
proiectarea
pentru
reutilizare.
În
plus,
această

tehnică
vă
permite
să
profita
ț
i
de
încărcarea
lene
ș
ă
–
adică
încărcarea
modulelor
la
cerere
–
pentru

a minimiza cantitatea de cod care trebuie încărcată la pornire.

Fiecare
aplica
ț
ie
Angular
are
cel
pu
ț
in
o
componen tă,
componenta
rădăcină
care

conectează
o
ierarhie
de
componente
cu
pagina
DOM.
Fiecare
componentă
define
ș
te
o
clasă
care

con
ț
ine
datele
aplica
ț
iei
ș
i
logică
ș
i
este
asociată
cu
un
ș
ablon
HTML
care
define
ș
te
un
view
care

trebuie afi
ș
ată într-un me diu
ț
intă.[6]

Decoratorul
@Component
identifică
clasa
imediat
sub
ea
ca
o
componentă
ș
i
furnizează

ș
ablonul
ș
i metadatele specifice componentei.

Un
ș
ablon
combi nă
HTML
cu
marcajul
Angular
care
poate
modifica
elementele
HTML

înainte
de
a
fi
afi
ș
ate.
Directivele
de
ș
abloane
oferă
logica
programelor,
iar
marcajul
de
legare

leagă
datele
dvs.
de
aplica
ț
ie
ș
i
modelul
obiect
de
documente
(DOM).
Legarea
evenimentului

permite
aplica
ț
iei
dvs.
să
răspundă
la
intrarea
utilizatorului
în
mediul
ț
intă
prin
actualizarea

datelor
din
aplica
ț
ie.
Legarea
proprietă
ț
ii
vă
permite
să
interpola
ț
i
valorile
calculate
de
la
datele

aplica
ț
iei în HTML.

Înainte
de
afi
ș
area
unui
view,
Angular
evaluează
directivele
ș
i
rezolvă
sintaxa
de
legare

din
ș
ablon
pentru
a
modifica
elementele
HTML
ș
i
DOM,
în
conformitate
cu
datele
ș
i
logica

programului.
Angular
acceptă
legarea
datelor
bidirec
ț
ionale,
ceea
ce
înseamnă
că
modificările

din
DOM,
cum
ar
fi
alegerile
utilizatorilor,
pot
fi
reflectate
ș
i
în
datele
dvs.
de
program.

Ș
abloanele
dvs.
pot
utiliza,
de
asemenea,
conducte
pentru
a
îmbunătă
ț
i
experien
ț
a
utilizatorului

prin
transformarea
valorilor
pentru
afi
ș
are.
Utiliza
ț
i
conductele
pentru
a
afi
ș
a,
de
exemplu,
datele

ș
i
valorile
valutare
într-un
mod
adecvat
localizării
utilizatorului.
Angular
oferă
conducte

predefinite pentru transformări comune
ș
i pute
ț
i defini
ș
i conducte. proprii.[6]

Pentru
date
sau
logică
care
nu
sunt
asociate
cu
un
anumi
view
ș
i
pe
care
dori
ț
i
să
le

partaja
ț
i
între
ele,
crea
ț
i
o
clasă
de
serviciu.
O
defini
ț
ie
a
clasei
de
servicii
este
imediat
precedată

de
decoratorul
@Injectable.
Decoratorul
furnizează
metadatele
care
permit
serviciului
dvs.
să
fie

injectat în componentele clientului ca o dependen
ț
ă.

Injec
ț
ia
de
depend en
ț
ă
(sau
DI)
vă
permite
să
păstra
ț
i
clasele
de
componente
mai
clare
ș
i

mai
eficiente.
Nu
prelucrează
date
de
la
server,
nu
validează
intrarea
utilizatorului
sau
nu
se

înregistrează direct în consola; ace
ș
tia deleagă astfel de sarcini serviciilor.[6]

Modulul
Angular
Router
oferă
un
serviciu
care
vă
permite
să
defini
ț
i
o
cale
de
navigare
între

diferitele
stări
de
aplica
ț
ii
ș
i
să
ierarhiile
de
views
din
aplica
ț
ie
Router-ul
mapează
căi
de
tip

URL
la
views
în
loc
de
pagini.
Când
un
utilizator
efectuează
o
ac
ț
iune,
cum
ar
fi
clic
pe
un
link,

care
ar
încărca
o
pagină
nouă
în
browser,
routerul
interceptează
comportamentul
browserului
ș
i

afi
ș
ează sau ascunde iera rhiile de vizualizare.[6]

Dacă
routerul
stabile
ș
te
că
starea
actuală
a
aplica
ț
iei
necesită
o
anumită
func
ț
ionalitate
ș
i

modulul
care
o
define
ș
te
nu
a
fost
încărcat,
routerul
poate
încărca
lene
ș
modul
la
cerere.
Routerul

interpretează
o
adresă
URL
a
unui
link
în
conformitate
cu
regulile
de
navigare
pentru
view-urile

aplica
ț
iei
dvs.
ș
i
cu
starea
datelor.
Pute
ț
i
naviga
la
view-uri
noi
atunci
când
utilizatorul
face
clic

pe
un
buton,
selectează
o
căsu
ț
ă
dintr-un
meniu
derulant
(dropdown)
sau
ca
răspuns
la
un
alt

stimulent din orice sursă.

Router-ul
înregistrează
activitatea
în
jurnalul
istoric
al
browserului,
astfel
încât
ș
i

butoanele
de
înainte
si
de
înapoi
func
ț
ionează
la
fel.
Pentru
a
defini
regulile
de
navigare,
se

asociază căile de navigare cu componentele.

La
realizarea
lucrării
de
diplomă
am
folosit
Angular
pentru
a
crea
aplica
ț
ia
pentru
parte

de
client
prin
intermediul
căruia
utilizatorul
interac
ț
ionează
cu
restul
sistemului.
Toate

elementele
de
interfa
ț
ă
grafică
cu
care
utilizatorul
lucrează
sunt
în
aceasta
aplica
ț
ie
web
Angular,

aceasta
procesează
toate
opera
ț
ile
de
introducere
de
date
ș
i
de
afi
ș
are
a
datelor
prin
intermediu

formularelor
ș
i view-urilo r utilizate în diferitele componente.

Am
decis
să
folosesc
Angular
versiunea
6
,
acesta
fiind
cea
mai
recenta
versiune
disponibilă
la

momentul
dezvoltării
aplica
ț
iei,
deoarece
con
ț
ine
multiple
înbunătă
ț
iri
fa
ț
a
de
versiunile

precedente,
de
asemenea
Angular
este
foarte
popular
în
rândul
dezvoltatorilor
de
aplica
ț
ii
web,

iar
această
popularitate
are
un
trend
ascendent,
acesta
fiind
utilizat
în
produsele
multor
companii

consacrate din domeniul IT precum Google , Microsoft ,etc.

Am
decis
sa
folosesc
acest
proiect
pentru
a
îmi
extinde
cuno
ș
tin
ț
ele
despre
Angular,
înainte
de

acest
proiect
am
utilizat
AngularJs
prima
versiune
de
Angular
,numit
ș
i
Angular
1,
bazat
pe

JavaScript,
în
alte
proiecte
utilizate
în
produc
ț
ie,
dar
începând
cu
versiunew
2
Angular
a
fost

rescris
de
echipa
dezvoltatoare
folosind
TypeScript
,
introducând
diferen
ț
e
majore
de
arhitectură

limbaj
ș
i sintaxă, de a intr odus numeroase caracteristici noi
ș
i ca
ș
tiguri de performan
ț
a.

I.5 MongoDB

MongoDB
este
o
bază
de
date
NoSQL
open-source
orientată
pe
documente.
Acestă
bază

de
date
beneficiază
de
suport
din
partea
companiei
10gen.
MongoDB
face
parte
din
familia
de

sistemelor
de
baze
de
date
NoSQL.
Diferen
ț
a
principală
constă
în
faptul
că
stocarea
datelor
nu
se

face
folosind
tabele
precum
într-o
bază
de
date
rela
ț
ională,
MongoDB
stochează
datele
sub

formă de documente JSON cu scheme dinamice.
​
[7]

MongoDB
acceptă
interogări
de
câmp,
interogări
pe
intervale
ș
i
expresii
regulate.

Interogările
pot
returna
anumite
domenii
ale
documentelor
ș
i
includ
func
ț
ii
JavaScript
definite
de

utilizator.
Interogările
pot
fi,
de
asemenea,
configurate
pentru
a
returna
un
e
ș
antion
aleatoriu
de

rezultate de o anumită dimensiune.

Indexarea
câmpurile
dintr-un
document
MongoDB
poate
fi
realizata
cu
indici
primari
ș
i

secundari.
​
[7]

MongoDB
oferă
disponibilitate
ridicată
cu
seturi
de
replici.
Un
set
de
replici
constă
din

două
sau
mai
multe
copii
ale
datelor.
Fiecare
membru
al
setului
de
replici
poate
ac
ț
iona
oricând

în
rolul
replicii
primare
sau
secundare.
Toate
opera
ț
ile
de
scriere
ș
i
citire
se
efectuează
în
mod

implicit
pe
replica
primară.
Replicile
secundare
men
ț
in
o
copie
a
datelor
primare
folosind

replicarea
încorporată.
Atunci
când
o
replică
primară
e
ș
uează,
replica
setată
efectuează
automat

un
proces
electoral
pentru
a
determina
ce
secundar
ar
trebui
să
devină
primar.
Replicile

secundare pot op
ț
ional fu rniza informa
ț
ile pentru opera
ț
ii de citire.

Scalarea
MongoDB
se
face
orizontal
folosind
sharpening.
Utilizatorul
alege
o
cheie

shard,
care
determină
modul
în
care
datele
vor
fi
distribuite
într-o
colec
ț
ie.
Datele
sunt
împăr
ț
ite

în
intervale
(bazate
pe
cheia
shard)
ș
i
distribuite
pe
mai
multe
sharduri.
(Un
shard
este
un

maestru
cu
unul
sau
mai
mul
ț
i
sclavi).
În
mod
alternativ,
cheia
shard
poate
fi
împră
ș
tiată
pentru
a

realiza o mapare spre un shard – ceea ce permite distribuirea uniformă a datelor.
​
[7]

MongoDB
poate
rula
pe
mai
multe
servere,
echilibrând
încărcarea
sau
duplicarând
datele

pentru a men
ț
ine sistemu l în func
ț
iune în caz de defec
ț
iuni hardware.

MongoDB
poate
fi
folosit
ca
sistem
de
fi
ș
iere
numit
GridFS,
cu
func
ț
ii
de
echilibrare
a

încărcăturii
ș
i
de
replica re
a
datelor
pe
mai
multe
ma
ș
ini
pentru
stocarea
fi
ș
ierelor.
Această

func
ț
ie,
denumită
sistem
de
fi
ș
iere
de
grilă,
este
inclusă
în
driverele
MongoDB.
MongoDB

expune
dezvoltatorilor
func
ț
ii
de
manipulare
a
fi
ș
ierelor
ș
i
de
con
ț
inut.
GridFS
împarte
un
fi
ș
ier

în păr
ț
i sau bucă
ț
i
ș
i stoch ează fiecare dintre aceste bucă
ț
i ca un document separat.
​
[7]

MapReduce
poate
fi
utilizat
pentru
procesarea
în
serie
a
opera
ț
iilor
de
date
ș
i
agregare.

Cadrul
de
agregare
permite
utilizatorilor
să
ob
ț
ină
tipul
de
rezultate
pentru
care
se
utilizează

clauza
SQL
GROUP
BY.
Operatorii
de
agregare
pot
fi
strân
ș
i
împreună
pentru
a
forma
o

conductă
–
analogă
conductelor
Unix.
Cadrul
de
agregare
include
operatorul
de
căutare
​
$lookup
​
,

care
poate
sa
unească
în
document
din
mai
multe
documente,
precum
ș
i
operatori
statistici,
cum

ar fi abaterea standard.

JavaScript
poate
fi
folosit
în
interogări,
în
func
ț
ii
de
agregare
(cum
ar
fi
MapReduce)
ș
i

trimis direct la baza de date ca să fie executată.

MongoDB
acceptă
colec
ț
ii
cu
dimensiuni
fixe
numite
colec
ț
ii
cu
capac.
Acest
tip
de

colec
ț
ie
men
ț
ine
ordinea
inser
ț
iei
ș
i,
odată
ce
dimensiunea
specificată
a
fost
atinsă,
se
comportă

ca o coadă circulară.
​
[7]

Versiunea
curentă
stabilă
nu
acceptă
tranzac
ț
iile,
dar
tranzac
ț
iile
sunt
programate
să
fie

disponibile într-o nouă versiune majoră. (Candidatul de lansare 4.0.0 este deja disponibil)

La
realizarea
lucrării
de
diplomă
am
folosit
MongoDB
ca
să
stochez
toate
informa
ț
ile
necesare
în

aplica
ț
ie.
Am
ales
Mong oDB
datorita
rapidită
ț
ii
opera
ț
ilor
de
scriere
ș
i
citire
ș
i
datorita
faptului

că îmi este o baza de date foarte cunoscută pe care am utilizat-o în diverse proiecte.

I.6 HTML 5

HTML
este
un
limbaj
de
marcare
utilizat
pentru
crearea
paginilor
web
ce
pot
fi
afi
ș
ate

într-un
browser.
Scopul
HTML
este
de
a
prezenta
informa
ț
ii:
paragrafe,
fonturi,
tabele
ș
.a.m.d.

decât
de
a
descrier
semantica
documentului.
HTML
este
prescurtarea
de
la
Hyper
Text
Mark-up

Language
și
este
codul
care
stă
la
baza
paginilor
web.
Specifica
ț
iile
HTML
sunt
dictate
de
World

Wide Web Consortium (W3C).
​
[8]

HTML
este
un
format
text
proiectat
pentru
a
putea
fi
citit
ș
i
editat
de
oameni
utilizând
un

editor
de
text
simplu.
Totu
ș
i
scrierea
ș
i
modificarea
paginilor
în
acest
fel
este
consumatoare
de

timp
ș
i solicită cuno
ș
ti
ț
e avansate de HTML.

Paginile
HTML
sunt
formate
din
etichete
sau
tag-uri
ș
i
au
extensia
.html
sau
.htm.

Majoritatea
acestor
etichete
sunt
pereche,
una
de
deschidere
<eticheta>
ș
i
alta
de
închidere

</eticheta>,
mai
există
ș
i
cazuri
în
care
nu
se
închid,
atunci
se
folose
ș
te
<eticheta
/>.
Browserul

interpretează aceste etichete afi
ș
ând rezultatul pe ecran.

HTML5
este
a
cincea
revizuire
a
standardului
HTML
(creat
în
1990
ș
i
standardizat
ca

HTML4
din
1997)
ș
i,
din
octombrie
2011,
este
în
curs
de
dezvoltare.
Obiectivele
sale
principale

au
fost
acelea
de
a
îmbunătă
ț
i
limbajul
cu
un
suport
pentru
cele
mai
recente
apari
ț
ii
multimedia,

în
acela
ș
i
timp
men
ț
inându-l
u
ș
or
de
citit
de
către
oameni
ș
i
bine
în
ț
eles
de
către
computere
ș
i

device-uri
(browsere
web,
parsere,
etc.).
HTML5
î
ș
i
propune
să
însumeze
nu
numai
HTML4,

dar
ș
i XHTML1
ș
i DOM2HTML (îndeosebi JavaScript).
​
[9]

HTML5
include
modele
detaliate
de
prelucrare
pentru
a
încuraja
mai
multe
implementări

interoperabile;
extinde,
îmbunătă
ț
e
ș
te
ș
i
ra
ț
ionalizează
disponibilită
ț
ile
pentru
documentele
web

ș
i
introduce
marcarea
ș
i
aplica
ț
ii
API
(application
programming
interfaces)
pentru
aplica
ț
ii
web

complexe.
Din
aceste
motive
HTML5
este
un
posibil
candidat
pentru
aplica
ț
iile
de
platforme

mobile.
Multe
caracteristici
ale
HTML5
au
fost
create
din
considerarea
că
va
trebui
să
devină

capabil să ruleze pe dispozitive cum ar fi smart-phone-urile sau tabletele.

În
special,
HTML5
aduce
multe
noi
caracteristici
sintactice.
Acestea
cuprind
elemente
ca

<video>,
<audio>,
<header>
ș
i
<canvas>
elemente
HTML,
precum
ș
i
integrarea
con
ț
inutului

SVG
care
înlocuie
ș
te
utilizarea
tag-ului
generic
<object>.
Aceste
noută
ț
i
sunt
proiectate
pentru
a

facilita
includerea
ș
i
manipularea
în
web
a
con
ț
inuturilor
multimedia
ș
i
grafice
fară
a
fi
nevoie
să

se recurgă la proprietă
ț
ile de plugin
ș
i API.
​
[9]

Alte
noi
elemente
ca
<section>,
<article>,
<header>
ș
i
<nav>
sunt
proiectate
să

îmbunătă
ț
ească
con
ț
inutul
semantic
al
documentelor.
Noi
atribute
au
fost
introduse
cu
acela
ș
i

scop,
în
acela
ș
i
timp
unele
elemente
​
ș
i
atribute
au
fost
îndepărtate .
Unele
elemente
ca
<a>,<cite>

ș
i<menu>
au
fost
schim bate,
redefinite
ș
i
standardizate.
API-urile
ș
i
DOM-urile
(Document

Object Model) sunt certitudini
ș
i sunt păr
ț
i fundamentale în specifica
ț
iile HTML5.

La
realizarea
lucrării
de
diplomă
am
folosit
HTML5,
fiind
prezente
noile
elemente

<section>,
<nav>
<canvas>,
de
asemenea
toate
ș
abloanele
predefinite
utilizate
de
Angular
sunt

scrise cu HTML5.

I.7 CSS
ș
i SASS

Cascading
Style
Sheets,
sau
CSS
pe
scurt,
este
un
standard
simplu,
ce
oferă

designerilor/programatorilor
un
mod
eficient
de
a
controla
modul
de
prezentare
a
paginilor

WEB
​
.
CSS
este,
în
mod
primar,
un
limbaj
folosit
exclusiv
doar
pentru
"web
design",
însă
nu

putem exclude faptul că acest limbaj este folosit
ș
i în alte medii de programare.

În
compara
ț
ie
cu
anii
90,
când
controlul
prezentării
unei
pagini
se
făcea
prin
tag-uri
HTML,

divizate
între
ele
în
mai
multe
fi
ș
iere,
ce
confereau
o
muncă
enormă
în
cazul
unei
actualizări,

CSS
vine
cu
un
nou
standard,
ș
i
anume
ca
printr-un
singur
fi
ș
ier
să
fie
controlat
întreg
aspectul

proiectului WEB.
​
[10]

Syntactically awesome style sheets sau Sass este un limbaj de foi de stil conceput ini
ț
ial

de Hampton Catlin
ș
i dez voltat de Natalie Weizenbaum. Sass este un limbaj de scripting

preprocesor care este interpretat sau compilat în foi de stil cascadă (CSS – Cascading Style

Sheets).

Sass
este
o
extensie
a
CSS
care
adaugă
putere
ș
i
elegan
ț
ă
limbajului
de
bază.
Permite
utilizarea

de
variabile,
reguli
imbricate,
mixuri,
importuri
inline
ș
i
multe
altele,
toate
cu
o
sintaxă
completă

compatibilă
cu
CSS.
Sass
ajută
la
păstrarea
foilor
de
stil
mari
bine
organizate
ș
i
rularea
rapidă
a

foilor de stil mici, în special cu ajutorul bibliotecii de stil Compass.
​
[11]

Sass
acceptă
un
mic
set
de
extensii
numite
SassScript,
acesta
​
este
limbajul
de
scripting
în
sine
​
m,

acesta
​
permite
proprietă
ț
ilor
să
utilizeze
variabile,
aritmetică
ș
i
func
ț
ii
suplimentare.
SassScript

poate
fi
folosit
în
orice
valoare
de
proprietate.
SassScript
poate
fi,
de
asemenea,
utilizat
pentru
a

genera selectori
ș
i nume d e proprietă
ț
i, care este util atunci când s crie
ț
i mixuri
​
.

Caracteristicile Sass:

●
Complet compatibil cu CSS

●
Extensii de limbă, cum ar fi variabilele, liste, imbricarea
ș
i mixins

●
Suportă 8 tipuri de date (numere, secven
ț
a de text,culori, booleans, nulls, listă de valori,

mapări de valori, referin
ț
ă de func
ț
ie)

●
Multe func
ț
ii utile pentru manipularea culorilor
ș
i a altor valori

●
Caracteristici avansate precum directivele de control pentru biblioteci

●
O ie
ș
ire bine form atată
ș
i personalizabilă [11]

La
realizarea
lucrării
de
diplomă
am
folosit
CSS
ș
i
mai
ales
Sass
pentru
stilizarea

paginilor
web
din
aplica
ț
ia
de
pe
partea
de
client,
Angular.
Sintaxa
mai
scurtă
ș
i
intuitivă
ș
i

extensile
aduse
de
Sass
sunt
foarte
utile
ș
i
cresc
semnificativ
viteza
de
stilizare
a
paginilor
web

ș
i nivelul de reutilizare a stilurilor.

Utilizarea
variabilelor
pentru
stocarea
culorilor
facilitează
schimbarea
rapida
ș
i
u
ș
oara
a

tematici
cromatice
a
aplica
ț
ie,
modificând
doar
o
linie
dintr-un
fi
ș
ier
de
stil
unde
variabilei
de

culoare îi este atribuită valoare.

Am
creat
cate
o
foaie
de
still,
Sass,
pentru
fiecare
componentă
care
apare
în
pagina
web

cea
ce
îmi
permite
modificarea
rapidă
a
stilului
oricărei
componente
ș
i
un
management
mult
mai

facil al stilurilor din aplica
ț
ie.

CAPITOLUL II. TIPURI DE SOFTWARE UTILIZATE

II.1 VISUAl STUDIO CODE

Visual Studio Code (VSCode) este un editor de cod sursă dezvoltat de Microsoft care poate fi

rulat pe Windows, MacOS
ș
i Linux. Este gratuit, open-source
ș
i oferă suport pentru depanare,

precum
ș
i controlul versiu nii Git încorporat, eviden
ț
ierea sintaxei, snipplet-uri
ș
i a
ș
a mai departe.

Interfa
ț
a de utilizare a VS Code este foarte personalizabilă, deoarece utilizatorii pot comuta la

diferite teme, comenzi rapide de la tastatură
ș
i preferin
ț
e.

VSCode a fost ini
ț
ial anu n
ț
at în 2015 ca un proiect open-source g ăzduit pe GitHub, a fost lansat

pe web un an mai târziu. De atunci, editorul de cod Microsoft a câ
ș
tigat popularitate printre

dezvoltatori.

VSCode prime
ș
te actualiz ări lunare, utilizatorii se pot a
ș
tepta să se bucure de o experien
ț
ă tot

mai buna, fixuri de bug-urile, cre
ș
terea stabilită
ț
ii
ș
i a performan
ț
elor sunt efectuate frecvent.

O caracteristica foarte apreciată a VSCode este suportul pentru modulele de extensii, acesta

permite instalarea de astfel de module care adaugă func
ț
ionalitate nou IDE-ului. Astfel de

module de extensie pot fi: module pentru eviden
ț
ierea sintaxei, lintere, suport pentru un limbaj

specific, depanatoare
ș
i alte servicii externe.

Figura II.1 Exemplu utilizare Visual Studio Code în aplica
ț
ie

VSCode împarte suprafa
ț
a de lucru în 3 par
ț
i:

●
bara de meniu din stânga ecranului – aceasta prezintă mai multe butoane care modifică

con
ț
inutul din fere astra din dreapta acesteia.

●
fereastra din stângă – în func
ț
ie de op
ț
iunea aleasă aici se afi
ș
ează structura

proiectului,meniul de cautare in toata aplicatia deschisa, fi
ș
ierele modificate detectate de

Git, comenzile de depanare sau extensile instalate
ș
i sugestii de extensii noi. Pot aparea si

alte op
ț
iuni adaug ate de extensile instalate.

●
fereastra din dreapta – con
ț
ine în partea de sus lista cu fi
ș
ierele recent deschise
ș
i în restul

ecranului este editorul propriu zis

Am
ales
VSCode
deoarece
este
un
IDE
gratuit,
are
suport
integrat
pentru
​
JavaScript,
TypeScript

and
Node.js
limbaje
utilizate
in
dezvoltarea
acestei
lucrari,
de
asemenea
am
instalat
modulele
de

extensie
pentru
eviden
ț
ierea
sintaxei
,
lintere
pentru
JavaScript
ș
i
TypeScript
care
detectează

erori înainte de compilare
ș
i sugerează corec
ț
ii, auto-formatoare de cod pentru a aranja codul.

II.2 GIT

Git este un sistem de revision control care rulează pe majoritatea platformelor, inclusiv Linux,

POSIX, Windows. Git este un sistem distribuit
ș
i nu între
ț
ine o bază de date comună. Este folosit

în echipe de dezvoltare, în care membrii echipei ac
ț
ionează oarecum independent
ș
i sunt

răspândi
ț
i pe o arie geogr afică mare.

Git este dezvoltat de Junio Hamano, fiind publicat sub licen
ț
ă GPL
ș
i este considerat software

liber. Cateva proiecte majore care folosesc Git: Linux, Android, Debian, DragonFly BSD,

Eclipse, Fedora, GIMP, Linux Kernel, Linux Mint, openSUSE, Perl, phpBB, Qt, Ruby on Rails,

Samba.

Dezvoltarea
Git
a
început
după
ce
mai
mul
ț
i
developeri
ai
nucleului
Linux
au
renun
ț
at
la

sistemul
de
revision
control
proprietar
BitKeeper.
Posibilitatea
de
a
utiliza
BitKeeper
gratuit
a

fost
retrasă
după
ce
titularul
drepturilor
de
autor
a
afirmat
că
Andrew
Tridgell
a
încălcat
licen
ț
a

BitKeeper
prin
ac
ț
iunile
sale
de
inginerie
inversă.
La
conferin
ț
a
Linux.Conf.Au
2005,
Tridgell
a

demonstrat
în
timpul
discursului
său
că
procesul
de
inginerie
inversă
pe
care
l-a
folosit
a
fost
pur

ș
i
simplu
o
sesiune
telnet
pe
portul
corespunzător
al
serverului
BitKeeper
ș
i
rularea
comenzii

help pe server.

Controversa
a
dus
la
o
renun
ț
are
rapidă
la
sistemul
BitKeeper
care
a
fost
înlocuit
cu
un
nou

sistem
intitulat
Git
construit
special
pentru
scopul
de
revision
control
în
cadrul
proiectului
Linux

kernel.
Dezvoltarea
noului
sistem
a
fost
începută
de
Linus
Torvalds
în
3
aprilie
2005
pentru
a
fi

anun
ț
at
câteva
zile
mai
târziu
(aprilie
6)
pe
lista
de
email
a
proiectului
Linux
kernel.
O
zi
mai

târziu, noul sistem a început să fie folosit pentru dezvoltarea actuală de cod pentru proiectul Git.

Primele
opera
ț
ii
merge
au
avut
loc
pe
data
de
18
aprilie.
În
data
de
16
iunie,
versiunea
2.6.12

Linux
kernel
a
fost
pusă
în
Git
care
continuă
ș
i
în
ziua
de
azi
să
fie
sistemul
revision
control

folosit de proiectul Linux kernel.

Figura II.2 Exemplu utilizare Git în aplica
ț
ie

La realizarea proiectului de licen
ț
ă am ales sa folosesc Git pentru siguran
ț
a de a nu pierde

proiectul
ș
i pentru a avea acces la versiunile anterioare de dezvoltare a aplica
ț
iei.

Pentru a putea utiliza GIT a fost necesară descărcarea și instalarea programului. După instalare a

apărut opțiunea de GIT Bash atunci când se face click-dreapta într-un folder.

Comenzile de GIT utilizate cel mai frecvent pe parcursul dezvoltării acestei aplicații au fost:Git

status,Git add . , Git commit –m “mesaj de commit”, Git pull origin development, Git push

origin development, Git checkout master, Git merge development.

II.3 VISUAL STUDIO TEAM SERVICES

Visual Studio Team Services sau VTST este un set de servicii menite sa ajute echipele de dezvoltatori de

software. VTST dispun de instrumente
ș
i roluri speciale pentru dezvoltatorii de software, testeri
ș
i

speciali
ș
ti. Acestea includ instrumente pentru colaborare, raportare, dezvoltare
ș
i m
ă
surare.

Printre servicile ooferite se g
ă
sesc servicii de versionare a codului
ș
i de web hosting pentru proiecte,

similare cu cele oferite de GitHub.Microsoft ofer
ă
pentru VTST conturi gratuite cu un numar nelimitat

de depozit
ă
ri private (care pot avea un numar maxim de 5 utilizatori).

La realizarea proiectului de diplom
ă
am activat servicile VSTS folosind contul Microsoft personal si am

primit un spa
ț
iu de depozitare pentru proiect putând reveni oricând la una dintre versiunile anterioare

în cazul unei erori
ș
i posibilitatea de accesare de pe alte calculatoare la proiectului.

Figura II.3 Exemplu utilizare Visual Studio Team Services pentru aplica
ț
ie

II.4 POSTMAN

Postman este un client REST popular care facilitează dezvoltatorilor să creeze, să

partajeze, să testeze
ș
i să documenteze API-uri. Acest lucru se face permi
ț
ând utilizatorilor să

creeze
ș
i să salveze cereri HTTP/s simple
ș
i complexe, precum
ș
i să citească răspunsurile lor, sa

seteze variabile
ș
i medii d e testare sau sa creeze server de test . De asemenea permite gruparea

cererilor HTTP/s în colec
ț
ii care pot fi partajate cu ceilal
ț
i membri echipei de dezvoltare sau pot

fi exportate
ș
i transmise a ltor persoane se pot crea
ș
i spa
ț
ii de lucru separate care sa con
ț
ina

colec
ț
ile. Astfel muncă m ai este eficientă
ș
i mai pu
ț
in obositoare. Postman permite crearea de

conturi pentru acesta, după logare colec
ț
ile create sunt trimise la un API Postman
ș
i stocate astfel

la logarea în aplica
ț
ie pe alt calculator aceasta se sincronizează cu serverul
ș
i colec
ț
ile

utilizatorului sunt descărcate.

La realizarea proiectului de diplomă am utilizat applica
ț
ia Postman în procesul de dezvoltare a

API-urilor RESTfull din lucrare
ș
i pentru testarea acestora. Am mai folosit aplica
ț
ia
ș
i pentru alte

proiecte având multe colec
ț
ii pe spa
ț
iul principal de lucru, am cre at un alt spa
ț
iu de lucru co o

colec
ț
ie pentru acest proi ect. colec
ț
ia con
ț
ine cate un folder cu cererile HTTP/s pentru fiecare

API.

Figura II.4 Exemplu utilizare Postman pentru aplica
ț
ie

II.5 DOCKER

Docker este o platformă de containere foarte populară, aceasta permite împachetarea unei

aplica
ț
i cu tot ce are nevo ie, de la sistemul de operare în sus, într-o singură unitate pe care o po
ț
i

partaja
ș
i rula pe orice co mputer (PC, Server, etc) care are Docker.

Docker rulează aplica
ț
ia într-o componentă u
ș
oară, izolată numită container. Forma

împachetată a aplica
ț
iei se nume
ș
te imagine Docker
,
​
are de obicei cateva zeci sau sute de

megaOcte
ț
i of megabytes , astfel sunt u
ș
or de stocat
ș
i de mutat. Când rula
ț
i un container din

imagine, va începe în câteva secunde
ș
i procesul de aplicare se execută efectiv pe gazdă, ceea ce

înseamnă că pute
ț
i rula su te de containere pe o singură ma
ș
ină.

Docker este open source
ș
i cross-platform, iar unul dintre aspectele cele mai

convingătoare ale ecosistemului său este Docker Hub – un registru public în care organiza
ț
iile
ș
i

persoanele fizice împărtă
ș
esc propriile imagini ale containerului de aplica
ț
ii. Pe Docker Hub se

găsesc imagini oficiale, acceptate pentru tehnologii populare, cum ar fi Nginx, MariaDB,

MongoDB
ș
i Redis, alătu ri de imagini personalizate ale comunită
ț
ii
ș
i se pot partaja proprile

imagini.

La realizarea lucrarii de diplomă am decis să folosesc Docker pentru a îmi containeriza

aplica
ț
ile utilizate, de ase menea baza de date MongoDB utilizată rulează într-un container

Docker care a fost lansat folosind imaginea oficială Mongo de pe Docker Hub. Am folosit
ș
i

unealta docker-compose oferita de Docker ,aceasta îmi permite ca folosind un singur fi
ș
ier,

“docker-compose.yml” să îmi configurez mai multe imagini docker, ale API-urilor dezvoltate
ș
i

a bazei de date,
ș
i să le po rnesc pe toate cu o singura comandă din terminal, comanda

‘docker-compose up’.

Figura II.4 Exemplu utilizare Docker pentru aplica
ț
ie

CAPITOLUL III. PROIECTAREA SI IMPLEMENTAREA APLICA
Ț
IEI

III.1 PROIECTAREA APLICA
Ț
IEI

Ideea pentru această solu
ț
ie mi-a venit în timp ce lucram la magazinul familiei, acesta

fiind un simplu ABC din mediul rural, pre
ț
urile produselor erau afi
ș
ate pe etichetele de pe raft,

iar eu nefiind familiar cu pre
ț
ul produselor datorita faptului că ajutam doar la sfâr
ș
it de

săptămână câteva ore
ș
i a modificării constante a pre
ț
urilor trebuia sa merg la rafturi
ș
i sa caut

pre
ț
ul produsului dacă nu mi-l aminteam, fapt care ma frustra enorm mai ales când erau mai

mul
ț
i clien
ț
i care a
ș
teptau .

Atunci m-am gândit ce util ar fii sa pot scana codul de bare al produsului cu telefonul

pentru a primii pre
ț
ul, de la această prima idee am continuat să dezvolt un conceptul
ș
i să adaug

noi func
ț
ionalită
ț
i, ajungând la o func
ț
ionalitate de casă de marcat iar apoi la conceptul final de

solu
ț
ie web de manageme nt al unui magazin, care să nu necesite efort minim de instalare din

partea utilizatorului
ș
i hardware uzual pe care acesta probabil îl de
ț
ine
ș
i îl utilizează zilnic, adică

un laptop
ș
i un smartphon e.

M-am documentat despre codurile de bare
ș
i modul în care func
ț
ionează acestea
ș
i am

căutat posibile astfel de solu
ț
ii existente, am găsit câteva solu
ț
ii de management
ș
i software de

case de marcat dar toate necesitau sisteme hardware standard de case de marcat din domeniu, iar

instalarea trebuia efectuată de o echipa de speciali
ș
ti.

Deoarece vroiam ca acest sistem de management sa fie o solu
ț
ie web Am decis sa

folosesc tehnologiile cu care eram familiar astfel am ales sa utilizez MEAN stack adică , Mongo,

Express, Angular
ș
i Node .

Am utilizat o abordare de tip Model-First în proiectarea solu
ț
ie, astfel am început prin a

schi
ț
a modelul document elor pe care urma să le stochez în baza de date
ș
i colec
ț
iile de

documente necesare.

Având o viziune asupra bazei de date am continuat prin a proiecta structura de ansamblu întregii

solu
ț
ii, am decis sa urmez o arhitectură bazată pe micro-servicii RESTfull. O astfel de arhitectură

presupune descompunerea solu
ț
iei software în mai multe micro-servicii autonome care pot să

colaboreaze între ele. În acastă abordare fiecare micro-serviciu realizează un set de

func
ț
ionalită
ț
i bine definit
ș
i strâns legate între ele. Spre exemplu în aceasta solu
ț
ie am un

micro-serviciu pentru produse, toate opera
ț
ile care au loc asupra produselor din baza de date se

fac de către acest microserviciu.

( agaugă ceva despre REST-
​
REPRESENTATIONAL STATE TRANSFER
​
)

Microserviciile sunt dezvoltate
ș
i lansate ca
ș
i containere în mod independent unele de altele.

Aceasta înseamnă că o echipă de dezvoltare poate dezvolta
ș
i desfă
ș
ura o anumită microserviciu

fără a afecta alte subsisteme ale aplica
ț
iei.

Cateva avantaje ale arhitecturii bazată pe microservicii:

●
Sunt simplu de lansat în produc
ț
ie,sunt lansate în bucă
ț
i fară a afecta alte servicii.

●
Sunt mai u
ș
or de î n
ț
eles, codul este mai u
ș
or de urmărit, func
ț
ionalitatea fiind izolata
ș
i

cu pu
ț
ine depende n
ț
e.

●
Sunt reutilizabile serviciile mici precum cele de pla
ț
i sau de logare pot fi partajate.

●
Izolare rapidă a defectelor, când un test pică sau un serviciu e
ș
ueaza acesta poate fi rapid

identificat.

●
Minimalizează riscul schimbării, fiind independente unele de altele servicile pot fi scrise

în limbaje diferite
ș
i pot folosii tehnologii diferite.

Netflix, eBay, Amazon, Twitter, PayPal
ș
i alte vedete de tehnologie au evoluat de la arhitectura

de tip monolit la arhitectura bazată pe microservicii.

Cu partea de server proiectată am trecut la partea de client, aici am schi
ș
at cateva pagini pe care

doream sale am în aplica
ț
ia angular

III.2. STRUCTURA APLICA
Ț
IEI

III.2.1 STRUCTURA UNUI API

( Particularită
ț
ii: -users , products ,sales)

III.2.1 STRUCTURA APLICATIEI ANGULA

III.3. STRUCTURA BAZEI DE DATE

III.4. IMPLEMENTAREA APLICA
Ț
IEI

CONCLUZII

BILBIOGRAFIE

[1]
​

​

Despre limbajul JavaScript

​
– data ultimei acces
ă
ri 2018/06/19

[2]
​

​
http://www.scritub.com/stiinta/informatica/html/Realizarea-paginilor-interacti13382.php
​
– accesat la

data 2018/06/19

[3]
​
https://en.wikipedia.org/wiki/TypeScript
​
– accesat la data 2018/06/19

[4]
​
https://www.typescriptlang.org/index.html
​
– accesat la data 2018/06/19

[5]
​
https://en.wikipedia.org/wiki/Node.js
​
– accesat la data de 2018/06/20

[6]
​
https://angular.io/guide/architecture
​
– accesat la data de 2018/6/20

[7]
​
https://en.wikipedia.org/wiki/MongoDB
​
– accesat la data de 2018/6/20

[8]
​
https://ro.wikipedia.org/wiki/HyperText_Markup_Language

[9]
​
https://ro.wikipedia.org/wiki/HTML5

[10 ]
​
https://ro.wikipedia.org/wiki/Cascading_Style_Sheets

[11]
​
https://ro.wikipedia.org/wiki/Cascading_Style_Sheets

[11]
​
https://sass-lang.com/documentation/file.SASS_REFERENCE.html