III.1 Prezentarea aplicatiei [305393]

Capitolul III

III.1 Prezentarea aplicatiei

Aplicația mobilă creată în cadrul lucrării de licență este un magazin online care se axează pe o [anonimizat] o varietate de produse din multiple categorii. [anonimizat]-end.

Ecranele Aplicatie din cadrul licentei sunt structurate in 2 sau 3 componente mari: Bara de navigatie din partea de sus a ecranului, zona de continut si bara de navigatie din partea de jos a ecranului

Bara de navigatie din partea de sus a ecranului prezentata in figura 3.1 cuprinde : [anonimizat].

Fig 3.1- Bara de navigatie din antet

Zona de continut difera in functie de pagina pe care se afla utilizatorul. [anonimizat].

Fig. 3.2 – Continutul paginii de cos

Bara de navigatie din partea de jos a ecranului contine 3 butoane care fac legatura cu alte ecrane ale aplicatie . Aceasta bara de navigatie este accesibila doar in ecranele pe care le contine aceasta.

Fig. 3.3- Bara de navigatie din josul paginii

In continuare voi prezenta fiecare ecran din cadrul aplicatiei.

[anonimizat]-ul, [anonimizat].

Setarea acestui ecran a fost facuta astfel: in fisierul app.json a fost setata o imagine pentru splash screen, o [anonimizat] (fig. 3.1.1 )

"splash": {

"image": "./assets/splash-screen.png",

"resizeMode": "contain",

"backgroundColor": "#010412"

},

Fig. 3.4-[anonimizat] “Bine ati venit” si cele doua butoane care ne permit navigarea catre ecranele de inregistrare si Autentificare in aplicatie.

Fig. 3.5- Ecran de intampinare

Ecranul de integistrare contine un formular cu datele necesare pe care utilizatorul trebuie sa le completeze pentru utilizarea aplicatiei. La primirea mesajului de alerta “Inregistrar reusita”, utilizatorul poate avansa la urmatorul ecran.

[anonimizat], necesara fiind doar autentificarea. Ecranul de autentificare contine un formular de date necesare pentru accesarea continutului aplicatiei. [anonimizat].

Fig. 3.6- [anonimizat] o [anonimizat] 2 coloane .In partea de jos a ecranului current se gaseste si o bara de navigatie cu 3 butoane care ne duc catre alte 2 [anonimizat], adica pagina curenta.

[anonimizat].

Fig. 3.7 Ecranul de Categorii

In figura 3.8 [anonimizat]. Fiecare produs se poate aduga in cos sau se poate vizualiza in detaliu prin apasarea butonului corespunzator operatiunii dorite.

Prin accesarea meniului lateral putem naviga spre ecrane precum: comenzile mele, setari, produse sau deconectare. Pentru utilizatorii care au dreptul de a adauga proudse in aplicatie in aces meniu lateral apar mai multe butoane precum: produsele mele, comenzi plasate,comenzile mele, produse si deconectare.

Fig. 3.8 Ecranul de produse din categorie

Fig. 3.9 Meniu lateral

In Ecranul detalii produs sunt afisate urmatoarele elemente: titlul produsului in bara de navigatie, o imagine in partea superioara a ecranului, zona de continut si butonul de adaugare in cos a produsului.

Fig.3.10 Ecranul detalii produs

Ecranul cos de cumparaturi contine produsele aflate in cos, valoarea acestora, valoarea totata, cantitatea, posibilitatea de a scadea numarul de articole din cos sau stergerea acestora din cos.

Se poate observa ma jos structura produselor care ajung in cosul de cumparaturi.

class CartItem {

constructor(quantity, productPrice, productTitle, sum) {

this.quantity = quantity;

this.productPrice = productPrice;

this.productTitle = productTitle;

this.sum = sum;

}

}

export default CartItem;

Fig. 3.11 Ecranul cos de cumparaturi

Pe partea de front-end avem structura prezentata in figura 3.1.1 Am ales sa foloses aceasta structura de folder pentru a putea structura foarte bine aplicatia.

In folderul assets am inclus fonturile aplicatiei, imaginile folosite pentru iconita afisata in telefonul utilizatorului si ecranul afisat la intrarea in aplicatie despre care am sa va vorbesc in sectiunile ce urmeaza.

Folderul Components este impartit in 3 subfoldere pentru o mai buna gstionare a continutului. In folderus Shop sunt toate conponentele folosite in ecranele corespunzatoare magazinului, in Ui sunt elemente precum butoane creeate custom iar in folderul user sunt componente create specific pentru partea de admin precum comenzi.

Folderul constants contine un fisier js in care au fost introduse culorile folosite in aplicatie pentru o mai buna gestionare a UI.

Folderul modals contine structura produselor si a utilizatorilor introduse in aplicatie . In Figura 3.2 se poate observa structura unui produs in aplicatia noastra. Astfel un obiect de tip produs va fi structurat cu argumentele de pe lini 2 de cod din figura 3.2 si se vor stoca toate aceste date in proprietati cu ajutorul cuvantului this.

Produsele stocate in baza de date vor avea structura setata in figura 3.2.

Fig. 3.1.1- Structura de foldere a aplicatiei

Fig. 3.2- Structura unui produs introdus in aplicatie.

Ecran de autentificare, ecranul cu categoriile magazinului, Produsele prezente intr-o categorie, sectiunea de admin care cuprinde mai multe ecrane printre care se numara: ecranul de produse, ecranul de comenzi plasate de clienti; Sectiunea de produse favorite, cos de cumparaturi si nu in ultimul rand comenzi plasate.

In fiecare pagina gasim o bara de navigatie plasata in antetul aplicatiei care se modifica in functie de ecranul in care navigam .

Pentru state management am folosit biblioteca Redux care ne ajuta sa manageriem stat-urile aplicatiei. In foldetul Store avem 2 subfoldere: actions si reducers.

I action creem functiile addToCart si deleteFromCart pe care le importam in fisierul cart din folderul reducers. In reducer creem logica pentru adaugarea produselor in cosul de cumparaturi si logica pentru stergerea produselor in cosul de cumparaturi.