UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE ŞTIINTE
SPECIALIZAREA METODE ŞI MODELE ÎN INTELIGENŢA
ARTIFICIALĂ
LUCRARE DE DISERTAŢIE
Îndrumător ştiinţific:
< BOLDEA Costin Radu >
CRAIOVA
2023
Absolvent:
< BOARIU Dan-Andrei>
UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE ŞTIINTE
SPECIALIZAREA METODE ŞI MODELE ÎN INTELIGENŢA
ARTIFICIALĂ
Aplicație multiplatformă de
gestiune a pieței horticole
Îndrumător ştiinţific:
< BOLDEA Costin Radu >
Absolvent:
< BOARIU Dan-Andrei>
CRAIOVA
2023
Cuprins
1.Introducere.....................................................................................4
1.1 Obiectivele şi structura lucrări...............................................4
1.2 Importanţa şi actualitatea unei aplicatii de delivery..............4
1.3 Rezumatul Proiectului............................................................5
1.4 Scurt istoric.............................................................................6
2. Partea I.............................................................................................7
2.1 Analiza stadiului cunoaşterii în domeniul...............................7
2.2 Tehnologii folosite...................................................................8
2.2.1 JavaScript..........................................................................8
2.2.2 JSX & Babel......................................................................9
2.2.3 Node.js & Npm package manager....................................10
2.2.4 Expo..................................................................................11
2.2.5 React Navigation...............................................................12
2.2.6 React native maps..............................................................14
2.2.7 React Redux ToolKit.........................................................15
2.2.8 Sanity.io.............................................................................16
2.2.9 TailwindCSS.....................................................................17
2.2.10 React native Feather – Icons...........................................18
3. Partea II..............................................................................................19
3.1 Prezentarea Aplicatiei..............................................................19
4. Concluzii.............................................................................................45
5. Bibliografie........................................................................................45
1.Introducere
1.1 Obiectivele şi structura lucrări
Aceasta aplicatie a fost realizata prin intermediul framework-ului de dezvoltare a
aplicațiilor mobile care permite programatorilor să creeze aplicații pentru iOS și
Android utilizând JavaScript și React.
Am folosit clase JavaScript pentru realizarea structurii proiectului astfel:

Pentru a putea crea pagina de inceput, Home Screen am importat diferiti
parametrii cu ajutorul framework-ului React Native.

Am creat diferite fisiere in folderul Screens, pentru fiecare ecran visibil in
aplicatie, iar pentru a putea face ca aceste ecrane sa fie functionale, am creat
diferite foldere unde am stocat datele .

Am importat si instalat in aplicatie diferite comenzi din React Native, Redux,
Sanity pentru o buna funtionare a aplicatiei.

Aplicatia poate fi testata pe android, cat si pe iOS cu ajutorul unui Virtual
Device, sau conectand direct telefonul la alicatie.

Am implementat si adaugat la proiect un server unde vom stoca diferitele
imagini cu plante pe care le vom putea vizualiza.

Imaginile din aplicatie sunt prima data puse de aspect intr-un folder index.js
ca mai apoi cand vom stoca datele in Sanity, sa putem afisa diferite date si
imagini.

Instalarea diferitelor tool-uri in React pentru a putea face Navigatia intre
pagini, precum si obtinerea unei harti din google maps.
1.2 Importanţa şi actualitatea unei aplicatii de
delivery
O astfel de aplicație le permite clienților să achiziționeze plante și produse asociate
direct de pe dispozitivele lor mobile, fără a fi nevoie să meargă fizic la un magazin si
asta o face convenienta pentru utilizatori. De asemenea, in ultimii ani, plantele de
interior au devenit extrem de populare. Mulți oameni se bucură să aibă plante în
casele și birourile lor, datorită beneficiilor estetice și pentru sănătate. O aplicație de
magazin de plante care oferă servicii de livrare se aliniază cu această tendință și
poate beneficia de creșterea continuă a comerțului online.
O aplicație de livrare a plantelor poate ajunge la clienți din întreaga zonă geografică
acoperită de serviciul de livrare. Acest lucru oferă o oportunitate de a extinde baza de
clienți și de a genera venituri suplimentare.
Într-o societate tot mai preocupată de mediul înconjurător și sustenabilitate, o
aplicație de magazin de plante care include și livrare poate promova și oferi plante
cultivate în mod sustenabil, produse ecologice și ambalaje prietenoase cu mediul.
1.3 Rezumatul Proiectului
Acest proiect are ca scop realizarea unei aplicatii mobile pe o platforma de Android
generata cu un virtual device disponibil si cu ajutorul caruia putem observa rezultate
in timp real cu aplicatia creata.
Aplicatia cuprinde diferite actiuni si butoane prin care ne putem deplasa inainte si
inapoi cu produsele achizitionate si pentru a puteam vizualiza cosul de cumparaturi:

Folder Screens unde avem interfetele fiecarei pagini a aplicatiei

Folder components unde avem fiecare componenta ce va fi apelata in paginile
principale, felurile de plante, produsele ce pot fi afisate.

Un folder constants in care am incarcat cateva imagini si iconite cu plante,
produse horticole si despre livrare.

In folderul de assets am creat folderul de images pentru pozele principale pe
care le voi afisa la inceputul aplicatiei, acestea nu includ diferitele iconite de
pe prima pagina si nici pozele cu diferite produse din magazin.

Folderul Slices unde avem 2 fisiere pentru cosul de cumparaturi si magazinul
principal, iar aceste fisiere ne arata cum definim valorile pentru magazin si
pentru cos

Schimbari au fost facute si in fisierele create automat de catre React, astfel
incat sa putem afisa rezultatul dorit pe aplicatia noastra

Folderul Server reprezinta partea importanta a aplicatiei unde salvam si
stocam datele pentru cod, cat si imaginile produselor ce vor fi adaugate in
magazin.

In folderul Server lucram cu Sanity, o platforma de gestionare a continutului.
Aceasta oferă un sistem de gestionare a conținutului structurat, care permite
crearea, editarea și publicarea conținutului într-un mod ușor și intuitiv. Cu
ajutorul Sanity.io, putem gestiona conținutul pentru aplicații mobile sau orice
alt proiect digital. Platforma oferă un editor de conținut personalizabil și un
API puternic.
1.4 Scurt istoric
React Native este un framework de dezvoltare a aplicațiilor mobile care a fost creat
și lansat inițial de către Facebook în martie 2015. Ideea principală din spatele React
Native a fost de a permite dezvoltatorilor să creeze aplicații mobile native pentru iOS
și Android utilizând JavaScript și biblioteca React, care a fost deja populară pentru
dezvoltarea de aplicații web.
React Native a fost conceput ca o abordare mai eficientă și reutilizabilă în
comparație cu dezvoltarea tradițională a aplicațiilor native pentru fiecare platformă în
parte. Prin utilizarea React Native, dezvoltatorii pot crea o singură bază de cod care
poate fi folosită pentru ambele platforme mobile, eliminând astfel necesitatea de a
dezvolta și întreține două seturi separate de cod.
Framework-ul a câștigat rapid popularitate în rândul comunității de dezvoltatori,
oferindu-le posibilitatea de a dezvolta aplicații mobile cu performanță nativă, fără a
fi nevoie să învețe limbajele și instrumentele specifice fiecărei platforme. Acest lucru
a deschis ușa pentru dezvoltatori să își extindă abilitățile de dezvoltare și să creeze
aplicații mobile cross-platform într-un mod mai eficient și mai rapid.
O caracteristică cheie a React Native este arhitectura sa bazată pe componente.
Dezvoltatorii pot construi interfețe de utilizator complexe prin combinarea și
reutilizarea componentelor React Native predefinite și personalizate. Această
abordare modulară facilitează dezvoltarea și întreținerea aplicațiilor, permițând
echipelor să lucreze în paralel și să facă actualizări rapide.
React Native oferă, de asemenea, acces la module și API-uri native, permițând
dezvoltatorilor să integreze funcționalități specifice platformei în aplicații. Aceasta
înseamnă că dezvoltatorii pot utiliza caracteristici precum camera, GPS, notificări
push și multe altele, pentru a oferi o experiență nativă și bogată utilizatorilor.
2. Partea I
2.1 Analiza stadiului cunoaşterii în domeniul
cercetat
Analiza stadiului cunoașterii în JavaScript și React Native este crucială pentru a evalua
competențele și a determina nivelul de pregătire și abilități necesare pentru a dezvolta aplicații
mobile de succes.
În ceea ce privește JavaScript, este important să se evalueze nivelul de cunoaștere a limbajului în
sine, inclusiv sintaxa, structurile de control, funcțiile, obiectele și manipularea datelor. O
persoana care lucreaza cu JavaScript ar trebui să aibă o înțelegere solidă a conceptelor
fundamentale, precum closure-uri, evenimente, prototipuri și programare asincronă.
De asemenea, este important să se evalueze cunoașterea despre biblioteca React. React este un
instrument puternic pentru construirea interfețelor utilizator, iar familiarizarea cu conceptele
React, cum ar fi componente, JSX, starea (state), props-uri și ciclul de viață al componentelor,
este esențială pentru a putea lucra cu succes în cadrul React Native.
Pe lângă cunoștințele de bază în JavaScript și React, trebuie să avem o înțelegere aprofundată a
conceptelor specifice React Native. Acest lucru include navigarea între ecrane, gestionarea stării
(state management), lucrul cu API-uri și integrarea cu module native. Familiarizarea cu
arhitecturile și framework-urile populare din ecosistemul React Native, cum ar fi Redux sau
React Navigation,
Astfel, analiza stadiului cunoașterii în JavaScript și React Native poate oferi o imagine clară
asupra nivelului de competență și a abilităților tehnice în dezvoltarea de aplicații mobile.
Aceasta poate ajuta la identificarea lacunelor de cunoștințe și la dezvoltarea unui plan de
dezvoltare și instruire adecvat pentru a îmbunătăți nivelul de competență și a asigura succesul
proiectelor viitoare în domeniul dezvoltării mobile cu React Native.
2.2 Tehnologii folosite
2.2.1 JavaScript
Istoria lui JavaScript în contextul React Native este deosebit de interesantă, deoarece reflectă
evoluția limbajului și impactul său în dezvoltarea aplicațiilor mobile.
JavaScript a fost creat de Brendan Eich în anii '90 ca limbaj de scripting pentru browserele web.
Inițial, a fost denumit LiveScript, dar a fost ulterior redenumit în JavaScript pentru a beneficia de
popularitatea limbajului Java. Încă de la început, JavaScript a avut un rol important în
interactivitatea și dinamismul paginilor web, adăugând funcționalități și interacțiuni interactive.
De-a lungul timpului, JavaScript a devenit unul dintre cele mai populare limbaje de programare
din lume, datorită adoptării sale extinse în dezvoltarea web. A apărut standardul ECMAScript,
care definește specificațiile JavaScript și adaugă noi caracteristici și funcționalități în fiecare
versiune. Dezvoltatorii au putut beneficia de avantajele unui limbaj versatil și dinamic, capabil
să se extindă în diferite domenii ale dezvoltării software.
Cu apariția framework-ului React, dezvoltat de Facebook, JavaScript a câștigat o importanță
deosebită în dezvoltarea aplicațiilor web.
În ceea ce privește dezvoltarea cu React Native, JavaScript joacă un rol crucial. Dezvoltatorii
utilizează JavaScript pentru a scrie logica aplicației, gestionarea datelor și interacțiunea cu
componentele. De asemenea, React Native folosește JSX, o extensie a limbajului JavaScript,
pentru a defini structura interfeței utilizator într-un format asemănător HTML, făcându-l mai
ușor de citit și de scris.
O altă tehnologie importantă în dezvoltarea cu React Native este Babel. Babel este un compilator
JavaScript utilizat pentru a transforma codul scris în sintaxa JSX în JavaScript standard, astfel
încât să poată fi interpretat și rulat de către dispozitivele mobile.
De-a lungul anilor, JavaScript și React Native au continuat să se dezvolte și să își consolideze
poziția în industria dezvoltării de aplicații mobile. Comunitatea de dezvoltatori s-a extins și a
contribuit la creșterea ecosistemului React Native, prin crearea de biblioteci, instrumente și
resurse pentru a facilita procesul de dezvoltare.
, JavaScript a avut un impact semnificativ în dezvoltarea aplicațiilor mobile cu React Native.
Evoluția limbajului și apariția framework-ului React au deschis noi orizonturi în dezvoltarea
interfețelor mobile, permițând dezvoltatorilor să creeze aplicații mobile native folosind un singur
limbaj de programare.
2.2.2 JSX & Babel
Babel și JSX sunt două tehnologii pe care le folosesc în mod frecvent în dezvoltarea mea de
aplicații mobile cu React Native. Ca persoană care lucrează în acest domeniu, apreciez
versatilitatea și puterea acestor tehnologii în procesul de dezvoltare.
Babel este un compilator JavaScript, care îmi permite să utilizez caracteristici de limbaj
JavaScript mai noi și să le transform într-un format compatibil cu toate browserele și mediile de
execuție. Ca persoană care utilizează Babel, pot scrie codul meu într-un stil modern, utilizând
funcționalități precum arrow functions, destructuring, spread operators și multe altele, fără a-mi
face griji cu privire la compatibilitatea cu mediile mai vechi sau browserele mai puțin suportate.
Utilizarea Babel în proiectul meu cu React Native este esențială pentru a profita de avantajele
oferite de JavaScript mai nou și pentru a scrie codul într-un mod mai concis și mai expresiv.
Acest lucru îmi permite să dezvolt aplicații mai eficiente și să îmbunătățesc productivitatea în
procesul de dezvoltare.
Unul dintre aspectele importante ale utilizării Babel în aplicațiile mele mobile este integrarea sa
cu JSX (JavaScript XML). JSX este o extensie a limbajului JavaScript care îmi permite să
construiesc interfețe utilizator într-un mod declarativ, asemănător cu HTML. În loc să
construiesc interfețele utilizator folosind metode de creare a elementelor în JavaScript pur, pot
utiliza sintaxa JSX pentru a crea componente React Native direct în codul meu JavaScript.
Ca persoană care utilizează JSX în aplicațiile mele React Native, apreciez felul în care acesta
îmbunătățește lizibilitatea și modularitatea codului meu. Pot defini componente vizuale
complexe utilizând sintaxa familiară a XML-ului și pot integra în mod transparent expresii
JavaScript pentru a manipula date și a crea interacțiuni dinamice. Acest lucru facilitează procesul
de dezvoltare și mă ajută să creez interfețe utilizator mai puternice și mai flexibile.
O altă caracteristică importantă a utilizării Babel și JSX este posibilitatea de a utiliza diferite
plugin-uri și configurații pentru a personaliza comportamentul compilatorului. Pot adăuga și
configura plugin-uri pentru a transforma și optimiza codul meu în funcție de nevoile specifice ale
aplicației. Acest nivel ridicat de configurabilitate îmi permite să optimizez performanța și
dimensiunea aplicației, adaptând compilatorul la cerințele mele specifice.
În concluzie, ca persoană care dezvoltă aplicații mobile cu React Native, Babel și JSX sunt
instrumente esențiale în fluxul meu de lucru. Aceste tehnologii îmi permit să utilizez
caracteristici JavaScript mai noi și să construiesc interfețe utilizator declarative și puternice.
Utilizarea Babel și JSX îmbunătățește calitatea și productivitatea dezvoltării mele, oferindu-mi
flexibilitatea și puterea de a crea aplicații mobile de înaltă calitate.
2.2.3 Node.js & Npm package manager
Node.js și npm sunt instrumente esențiale pe care le folosesc în mod regulat în dezvoltarea mea
de aplicații mobile. Ca persoană care lucrează în domeniul tehnologiei, apreciez mult
flexibilitatea și eficiența pe care le oferă aceste tehnologii în procesul de dezvoltare.
Node.js este un runtime JavaScript construit pe motorul V8 al Google, care permite executarea
codului JavaScript în afara browserului. Ca persoană care lucrează cu Node.js, pot utiliza
JavaScript nu doar pentru dezvoltarea aplicațiilor web, ci și pentru construirea aplicațiilor serverside și a aplicațiilor mobile cu React Native. Acest lucru mă ajută să împărtășesc aceeași bază de
cod între diferitele tipuri de aplicații, ceea ce reduce complexitatea și facilitează dezvoltarea.
Un aspect esențial al utilizării Node.js este modul în care gestionează pachetele și dependințele.
Acest lucru este posibil datorită npm (Node Package Manager), care este unul dintre cele mai
populare și utilizate gestionare a pachetelor pentru JavaScript. Ca persoană care lucrează cu
npm, pot căuta, instala și gestiona cu ușurință pachete și module externe necesare în dezvoltarea
aplicațiilor mele. Acesta facilitează colaborarea cu alți dezvoltatori și îmi oferă acces la o gamă
largă de resurse și funcționalități dezvoltate de comunitatea globală.
Prin intermediul npm, pot adăuga pachete externe în proiectul meu cu doar câteva comenzi
simple. Aceasta include și pachetele necesare pentru dezvoltarea aplicațiilor mobile cu React
Native, precum și orice alte module sau biblioteci de care am nevoie. Acesta simplifică procesul
de integrare a funcționalităților complexe în aplicația mea și îmi permite să mă concentrez pe
partea de dezvoltare specifică a aplicației.
Unul dintre avantajele folosirii npm este modul în care gestionează versiunile și actualizările
pachetelor. Pot specifica versiunile necesare pentru fiecare pachet în fișierul package.json al
proiectului meu, ceea ce înseamnă că pot menține un control strâns asupra dependințelor și pot
asigura compatibilitatea între diferitele module utilizate în aplicație. De asemenea, npm
facilitează actualizarea la cele mai recente versiuni ale pachetelor cu doar câteva comenzi,
oferindu-mi acces la cele mai noi caracteristici și îmbunătățiri.
O altă caracteristică valoroasă a npm este modul în care susține comunitatea open-source și
colaborarea între dezvoltatori. Prin intermediul npm, pot împărtăși propriile pachete și module cu
alte persoane, facilitând dezvoltarea în echipă și îmbunătățirea colaborării. De asemenea, pot
contribui la dezvoltarea pachetelor existente prin raportarea problemelor, sugerarea de
îmbunătățiri și chiar prin contribuții de cod.
Utilizarea Node.js și npm în dezvoltarea aplicațiilor mobile cu React Native aduce numeroase
avantaje pentru persoanele ca mine. Aceste tehnologii îmi oferă flexibilitate, eficiență și acces la
resursele necesare pentru a crea aplicații mobile de înaltă calitate. Prin intermediul Node.js și
npm, pot dezvolta aplicații mobile puternice și performante, în timp ce beneficiez de o
comunitate globală activă și de un ecosistem bogat de pachete și module.
În concluzie, ca persoană care dezvoltă aplicații mobile cu React Native, Node.js și npm sunt
instrumente esențiale în arsenalul meu de dezvoltare. Aceste tehnologii îmi oferă libertatea și
puterea de a crea aplicații mobile complexe, gestionând cu ușurință pachetele și dependințele și
beneficiind de contribuțiile și resursele comunității globale.
2.2.4 Expo
Expo este o platformă și un set de instrumente care facilitează dezvoltarea de aplicații mobile
cross-platform cu ajutorul React Native.
React Native este un framework pentru dezvoltarea de aplicații mobile, care permite scrierea de
cod JavaScript pentru a crea aplicații native pentru platformele iOS și Android. Cu toate acestea,
procesul de configurare și dezvoltare a unei aplicații React Native poate fi complex și implică
cunoștințe extinse despre platformele specifice și setările de mediu. Acesta este locul în care
Expo intră în scenă.
Expo oferă un set de instrumente și servicii care elimină complexitatea configurării și dezvoltării
unei aplicații mobile React Native. Una dintre cele mai mari avantaje ale Expo este faptul că nu
necesită o configurare specifică platformei sau instalarea unor SDK-uri și dependențe complexe.
Expo oferă un mediu de dezvoltare unificat, care poate fi utilizat pe platforme Windows, macOS
și Linux.
Pentru a începe să folosim Expo, trebuie să instalam Expo CLI (Command Line Interface) pe
computer. Acesta este un instrument de linie de comandă care permite crearea, rularea și
gestionarea proiectelor Expo. Expo CLI poate fi instalat prin intermediul npm, folosind comanda
npm install -g expo-cli.
După instalare, putem crea un proiect Expo utilizând comanda expo init. Acesta va crea o
structură de proiect preconfigurată, care include toate setările și dependențele necesare pentru
dezvoltarea unei aplicații mobile React Native. Expo oferă, de asemenea, un șablon de proiect
predefinit, care include funcționalități comune, cum ar fi navigația, gestionarea stării și
autentificarea.
Expo Go este o aplicație mobilă disponibilă pe platformele iOS și Android, dezvoltată de echipa
Expo, care oferă posibilitatea de a rula și testa aplicațiile Expo direct pe dispozitivele mobile.
Expo Go oferă o experiență similară cu cea a aplicației native, deoarece aplicația Expo este
rulată direct pe dispozitivul mobil, folosind toate funcționalitățile și interfețele utilizatorului
specifice platformei. Acest lucru facilitează testarea și verificarea aspectului și comportamentului
aplicației pe dispozitivul final, înainte de a o publica în App Store sau Google Play Store.
Expo Go oferă și alte funcționalități utile, cum ar fi suport pentru notificări push, înregistrarea și
analiza erorilor, monitorizarea performanței și multe altele. Aceste funcționalități extind puterea
și flexibilitatea Expo Go și facilitează dezvoltarea și testarea aplicațiilor mobile Expo într-un
mod eficient și rapid.
Expo oferă, de asemenea, o gamă largă de API-uri și servicii care pot fi utilizate în aplicație.
Acestea includ API-uri pentru camere, localizare, notificări push, autentificare socială și multe
altele. Expo simplifică integrarea acestor funcționalități în aplicație, eliminând necesitatea de a
lucra direct cu API-urile platformei specifice.
Astfel, Expo este o soluție puternică și eficientă pentru dezvoltarea de aplicații mobile crossplatform cu React Native. Cu ajutorul Expo, dezvoltatorii pot crea rapid aplicații mobile de înaltă
calitate, cu o experiență nativă, pe diferite platforme. Expo facilitează procesul de dezvoltare și
testare, oferind un mediu unificat și un set de instrumente și servicii pentru gestionarea
aplicațiilor Expo.
2.2.5 React Navigation
React Navigation este o bibliotecă populară pentru gestionarea navigației în aplicațiile React
Native. Ea oferă un set de componente și metode care permit dezvoltatorilor să creeze fluxuri de
navigare eficiente și intuitive în aplicațiile lor.
Una dintre caracteristicile remarcabile ale React Navigation este abordarea sa bazată pe
componente. Biblioteca utilizează componente React pentru a defini ecranele și navigarea între
acestea. Aceasta facilitează crearea unei ierarhii clare și modulare a ecranelor și navigației, ceea
ce este esențial pentru aplicațiile cu multiple ecrane și fluxuri complexe.
React Navigation oferă mai multe tipuri de navigatori, inclusiv Stack Navigator, Tab Navigator
și Drawer Navigator. Acești navigatori permit dezvoltatorilor să implementeze diferite tipuri de
navigație, cum ar fi navigarea în bază de stivă (stiva de ecrane), navigarea prin file (tab-uri) și
navigarea prin meniul tip sertar (drawer). Alegerea unui navigator potrivit depinde de tipul de
navigație pe care dezvoltatorul dorește să-l implementeze în aplicație.
Biblioteca oferă, de asemenea, suport pentru parametri de navigare, ceea ce permite trimiterea de
date între ecrane și personalizarea comportamentului navigației în funcție de aceste date.
Dezvoltatorii pot transmite și primi parametri între ecranele aplicației, permițând astfel o
interacțiune flexibilă între diferitele ecrane și componente.
React Navigation oferă, de asemenea, o gamă largă de opțiuni pentru configurarea și
personalizarea navigației. Dezvoltatorii pot defini aspectul și comportamentul navigației,
inclusiv animațiile de tranziție între ecrane, stilizarea anteturilor și picioarelor ecranelor și
gestionarea modului de revenire la ecranele anterioare.
O altă caracteristică importantă a React Navigation este suportul pentru navigarea în moduri
diferite, cum ar fi navigarea bazată pe gesturi și navigarea în modul ecran complet (full-screen).
Aceste funcționalități îmbunătățesc experiența utilizatorului și permit dezvoltatorilor să creeze
aplicații cu un aspect și o interacțiune modernă și intuitivă.
Pe lângă caracteristicile menționate mai sus, React Navigation oferă și suport pentru navigația
profundă (deep linking), gestionarea stării (state management) a navigației, integrarea cu alte
biblioteci și framework-uri populare, cum ar fi Redux, și multe altele. De asemenea, biblioteca
este activ întreținută și actualizată de o comunitate mare și implicată de dezvoltatori, asigurând
astfel un suport constant și îmbunătățiri continue.
Astfel ca, React Navigation este o bibliotecă esențială pentru gestionarea navigației în aplicațiile
React Native. Aceasta oferă un set de componente și metode care facilitează crearea de fluxuri
de navigare eficiente și personalizabile. React Navigation permite dezvoltatorilor să
implementeze diferite tipuri de navigație, să trimită și să primească parametri între ecrane și să
configureze aspectul și comportamentul navigației. Cu suportul său extins și actualizări continue,
React Navigation reprezintă o alegere populară pentru dezvoltarea aplicațiilor mobile React
Native.
2.2.6 React native maps
React Native Maps este o bibliotecă extrem de utilă și populară în cadrul utilizării hărților
interactive în aplicațiile mobile pentru persoane. Aceasta aduce funcționalități avansate de hartă
în aplicațiile mobile, permițând persoanelor să afișeze, să interacționeze și să personalizeze
hărțile într-un mod flexibil și eficient.
Principala caracteristică a React Native Maps este posibilitatea de a afișa hărți interactive bazate
pe platforme precum Google Maps sau Apple Maps. Biblioteca oferă componente precum
`MapView` care permit integrarea și afișarea hărților în aplicație. Aceste componente pot fi
personalizate cu diverse opțiuni, cum ar fi centrarea hărții pe o anumită locație, setarea nivelului
de zoom și controlul aspectului vizual al hărții.
O altă funcționalitate esențială oferită de React Native Maps este adăugarea de markeri pe hartă.
Acești markeri pot fi utilizați pentru a indica locații specifice, cum ar fi puncte de interes, adrese
sau locații personalizate. Persoanele pot seta diverse proprietăți pentru markeri, precum poziția
geografică, imaginea sau pictograma asociată și informațiile adiționale afișate când
interacționează cu markerul.
React Native Maps permite și desenarea de polilinii și poligoane pe hartă. Aceasta este utilă
pentru reprezentarea și evidențierea traseelor sau a anumitor zone geografice în aplicații.
Persoanele pot defini punctele componente ale unei polilinii sau poligon și le pot stiliza cu
diverse culori, grosimi sau tipuri de linie pentru a îmbunătăți claritatea și aspectul vizual al hărții.
Biblioteca oferă, de asemenea, funcționalități de interacțiune cu harta, cum ar fi detectarea
evenimentelor de apăsare sau glisare. Aceasta permite persoanelor să răspundă la acțiunile
utilizatorilor și să implementeze funcționalități specifice, cum ar fi afișarea detaliilor despre
locație sau navigarea la o altă pagină a aplicației în funcție de evenimentele de interacțiune.
Un alt aspect important al React Native Maps este suportul pentru geolocație. Biblioteca
facilitează obținerea și utilizarea informațiilor despre locația curentă a persoanelor în timp real.
Aceasta permite afișarea locației persoanelor pe hartă și implementarea funcționalităților
specifice, cum ar fi găsirea de locații apropiate sau urmărirea persoanelor pe parcursul unei rute.
React Native Maps oferă și posibilitatea de a utiliza straturi suplimentare pe hartă. Acestea pot
include informații adiționale, cum ar fi imagini satelitare, date meteorologice sau informații
despre trafic. Persoanele pot integra aceste straturi suplimentare și le pot utiliza pentru a
îmbogăți și a personaliza experiența utilizatorului cu ajutorul hărților.
În concluzie, React Native Maps reprezintă o soluție puternică pentru integrarea și utilizarea
hărților interactive în aplicațiile mobile pentru persoane. Biblioteca oferă funcționalități
avansate, cum ar fi afișarea hărților, adăugarea de markeri, desenarea de trasee și suport pentru
geolocație. Utilizarea React Native Maps permite persoanelor să creeze aplicații mobile cu o
experiență de hartă interactivă, personalizată și captivantă.
2.2.7 React Redux ToolKit
React Redux Toolkit este o bibliotecă puternică și ușor de utilizat în cadrul dezvoltării
aplicațiilor mobile React Native, care facilitează gestionarea stării aplicației și administrarea
fluxului de date. Aceasta aduce un set de unelte și convenții pentru a simplifica și eficientiza
dezvoltarea aplicațiilor mobile.
Una dintre caracteristicile principale ale React Redux Toolkit este "Slice". Un "Slice" reprezintă
o bucată din starea aplicației și conține reducerul corespunzător și acțiunile asociate. Persoanele
pot defini "Slices" pentru diferitele aspecte ale stării aplicației, cum ar fi autentificarea
utilizatorilor, produsele dintr-un coș de cumpărături sau preferințele utilizatorilor. Aceasta
permite persoanelor să gestioneze și să actualizeze starea în mod organizat și modular.
React Redux Toolkit oferă, de asemenea, funcționalitatea de a crea reduceri și acțiuni într-un
mod simplificat și declarativ. Persoanele pot defini reducerii și acțiunile într-un singur loc
folosind funcțiile createSlice() și createAction(). Aceste funcții abstractizează și automatizează
procesele de creare a reducerilor și acțiunilor, eliminând astfel codul redundant și repetitiv.
Persoanele pot utiliza apoi reducerii și acțiunile create pentru a actualiza starea aplicației într-un
mod simplu și intuitiv.
React Redux Toolkit oferă și un mod convenabil de a combina reducerii și acțiunile într-un
"store" global. Acest "store" reprezintă starea centralizată a aplicației și poate fi accesată de orice
componentă din aplicație. Persoanele pot utiliza funcția configureStore() pentru a configura
"store"-ul și a-l conecta la aplicație. Aceasta facilitează gestionarea stării aplicației și permite
persoanelor să acceseze și să actualizeze starea într-un mod eficient și organizat.
React Redux Toolkit promovează, de asemenea, utilizarea conceptului de "immer" pentru a
actualiza starea. "Immer" este o bibliotecă care permite actualizarea stării într-un mod imutabil și
declarativ. Persoanele pot utiliza funcția createReducer() din React Redux Toolkit împreună cu
"immer" pentru a actualiza starea într-un mod sigur și eficient, evitând astfel mutațiile directe ale
stării.
În concluzie, React Redux Toolkit este o bibliotecă puternică și ușor de utilizat pentru
gestionarea stării aplicațiilor mobile React Native pentru persoane. Aceasta aduce un set de
unelte și convenții care facilitează dezvoltarea și administrarea fluxului de date într-un mod
simplu și eficient. Utilizarea React Redux Toolkit permite persoanelor să creeze aplicații mobile
cu o gestionare eficientă a stării și un flux de date coerent, sporind astfel productivitatea și
calitatea dezvoltării aplicațiilor mobile.
2.2.8 Sanity.io
Prin intermediul unei interfețe ușor de utilizat și a unui API puternic, Sanity.io facilitează
crearea, organizarea și gestionarea conținutului aplicației mobile.
Folosirea Sanity.io în aplicațiile mobile React Native presupune integrarea bibliotecii Sanity
Client în proiectul de React Native. Persoanele pot utiliza această bibliotecă pentru a comunica
cu API-ul Sanity.io și pentru a accesa și manipula datele stocate în CMS. Prin intermediul
interfeței de programare a aplicațiilor (API), persoanele pot crea, citi, actualiza și șterge date,
facilitând astfel interacțiunea cu conținutul aplicației mobile.
Pentru a începe utilizarea Sanity.io într-un proiect de React Native, persoanele trebuie să urmeze
câțiva pași. În primul rând, trebuie să creeze un cont Sanity.io și să configureze un proiect. Apoi,
trebuie să definească schemele de date pentru conținutul aplicației mobile, cum ar fi articole,
imagini, pagini etc. Aceste scheme de date vor defini structura și tipurile de date pe care le va
conține conținutul aplicației mobile.
După ce schemele de date sunt definite, persoanele pot instala și configura Sanity Client în
proiectul de React Native. Aceasta implică adăugarea dependențelor necesare și configurarea
setărilor de conectare la proiectul Sanity.io. Odată ce Sanity Client este configurat, persoanele
pot utiliza comenzile și metodele disponibile pentru a accesa și manipula datele din CMS.
Sanity.io este folosit în aplicațiile mobile React Native pentru a facilita stocarea și gestionarea
datelor. Oferă un mediu centralizat pentru stocarea conținutului, inclusiv text, imagini,
videoclipuri și altele. Persoanele pot utiliza interfața de administrare a Sanity.io pentru a adăuga,
actualiza și șterge conținutul într-un mod vizual și intuitiv. Aceasta permite persoanelor nontehnice, cum ar fi conținutul redactorilor sau designerii, să contribuie la conținutul aplicației
mobile fără a avea nevoie de cunoștințe tehnice avansate.
Unul dintre avantajele majore ale utilizării Sanity.io în aplicațiile mobile React Native este
scalabilitatea. Platforma poate gestiona volume mari de conținut și poate face față traficului
sporit al aplicației mobile. De asemenea, oferă un API puternic și flexibil care permite
personalizarea și extinderea funcționalității CMS-ului conform nevoilor aplicației.
Un alt avantaj al Sanity.io este viteza și performanța sa. Datele sunt stocate într-o bază de date
scalabilă și optimizată, ceea ce permite accesul rapid la conținutul aplicației mobile. De
asemenea, Sanity.io folosește tehnici avansate de cache și livrare a conținutului, permițând
aplicației mobile să se încarce rapid și să ofere o experiență fluidă utilizatorilor.
În concluzie, Sanity.io este o soluție puternică și ușor de utilizat pentru gestionarea conținutului
în aplicațiile mobile React Native pentru persoane. Oferă un mediu centralizat și scalabil pentru
stocarea și gestionarea datelor, facilitând colaborarea între echipele de dezvoltare și conținut. Cu
avantajele sale în ceea ce privește scalabilitatea, viteza și performanța, Sanity.io este o alegere
excelentă pentru persoanele care doresc să construiască aplicații mobile cu o gestionare eficientă
a conținutului.
2.2.9 TailwindCSS
Tailwind CSS este o bibliotecă CSS pe care o folosesc în mod frecvent în proiectele mele de
dezvoltare a aplicațiilor mobile cu React Native. Ca persoană care lucrează în domeniul
dezvoltării mobile, apreciez foarte mult abordarea simplă și eficientă a Tailwind CSS în ceea ce
privește construirea interfețelor.
Unul dintre aspectele care mă atrage în mod special la Tailwind CSS este modul în care clasele
CSS sunt structurate și organizate. În loc să folosească clase predefinite cu nume complicate,
Tailwind CSS oferă un set extensibil de clase mici și reutilizabile, pe care le pot utiliza pentru a
construi rapid interfețe moderne și flexibile. Astfel, nu trebuie să petrec timp în plus definind
stiluri separate în fișiere CSS, ci pot utiliza direct clasele CSS în markup-ul HTML.
Utilizarea Tailwind CSS în React Native este extrem de simplă și ușor de implementat. Cu
ajutorul modulelor speciale precum react-native-tailwindcss sau react-native-classy-ui, pot
integra rapid Tailwind CSS în proiectele mele existente. De asemenea, pot personaliza
configurația implicită a claselor și stilurilor Tailwind CSS în funcție de nevoile mele specifice.
Prin utilizarea claselor Tailwind CSS, pot descrie stilurile elementelor mele direct în markup-ul
React Native. De exemplu, pot adăuga clase precum bg-blue-500 pentru a seta culoarea de
fundal la albastru, text-white pentru a seta culoarea textului la alb și p-4 pentru a adăuga un
padding de 4 unități în jurul elementului. Aceasta îmi permite să construiesc rapid și ușor
aspectul dorit al aplicației mele, fără a fi nevoie să scriu stiluri CSS personalizate.
Tailwind CSS este deosebit de util în dezvoltarea aplicațiilor mobile, deoarece îmi permite să mă
concentrez pe funcționalitatea și logica aplicației, în loc să pierd timp prețios în definirea și
stilizarea detaliată a elementelor. Clasele predefinite și ușor de înțeles îmi oferă posibilitatea de a
compune rapid stiluri complexe prin combinarea lor într-un mod semnificativ și intuitiv.
De asemenea, Tailwind CSS oferă o flexibilitate remarcabilă. Pot personaliza ușor aspectele
stilurilor, cum ar fi culorile, dimensiunile și marginile, prin intermediul fișierului de configurare.
Aceasta îmi permite să adaptez stilurile aplicației în funcție de designul și preferințele mele.
În concluzie, ca persoană implicată în dezvoltarea aplicațiilor mobile cu React Native, consider
Tailwind CSS o soluție excelentă pentru stilizarea interfețelor. Utilizarea clasei CSS predefinite
și reutilizabile mă ajută să construiesc rapid și eficient aspectul dorit al aplicației mele.
Flexibilitatea și personalizabilitatea oferite de Tailwind CSS completează perfect procesul de
dezvoltare, permițându-mi să creez interfețe moderne și flexibile într-un mod convenabil și
intuitiv.
2.2.10 React native Feather – Icons
React Native Feather este o bibliotecă pe care o folosesc frecvent în dezvoltarea aplicațiilor mele
mobile cu React Native. Ca persoană care lucrează în domeniul dezvoltării mobile, apreciez
foarte mult ușurința și versatilitatea acestei biblioteci în ceea ce privește importarea și utilizarea
iconițelor în aplicațiile mele.
Cu React Native Feather, pot adăuga rapid și ușor o varietate de iconițe în proiectul meu.
Această bibliotecă include o gamă largă de simboluri și pictograme, precum săgeți, butoane,
indicatoare și multe altele, pe care le pot utiliza pentru a îmbunătăți aspectul și funcționalitatea
aplicației mele. Utilizarea lor este simplă: trebuie doar să import componentele iconițelor și să le
utilizez în JSX-ul aplicației mele, așa cum aș face cu orice altă componentă React Native.
Pentru a utiliza React Native Feather în proiectul meu, trebuie să instalez mai întâi biblioteca în
proiectul meu, utilizând un manager de pachete precum npm sau Yarn. După instalare, pot
importa componentele iconițelor în fișierele mele JavaScript sau TypeScript și le pot utiliza în
markup-ul aplicației mele. De exemplu, pentru a adăuga o pictogramă de săgeată dreapta, import
componenta ArrowRight și o utilizez în codul meu, ca orice altă componentă React Native.
Unul dintre avantajele folosirii React Native Feather este flexibilitatea și personalizabilitatea sa.
Pot ajusta ușor stilul și aspectul iconițelor, setând proprietăți precum dimensiunea, culoarea sau
opacitatea. Astfel, pot adapta aspectul iconițelor la designul și tematica aplicației mele, fără a fi
nevoie să creez iconițe personalizate.
Un alt aspect important este că React Native Feather oferă o gamă largă de iconițe, acoperind o
varietate de nevoi și stiluri de design. Indiferent dacă am nevoie de iconițe generale și comune
sau de iconițe specifice unui domeniu sau industrii specifice, biblioteca oferă o colecție diversă
pentru a satisface diferite cerințe.
Un alt avantaj al utilizării React Native Feather este actualizarea și întreținerea ușoară a
iconițelor. Biblioteca este actualizată periodic, adăugând noi iconițe și îmbunătățind cele
existente. Astfel, beneficiez de iconițe actualizate și optimizate, fără a fi nevoie să investesc timp
și resurse în crearea și menținerea propriilor iconițe.
În concluzie, utilizarea React Native Feather în aplicațiile mele mobile cu React Native îmi oferă
acces rapid la o colecție extinsă de iconițe vectoriale, ușor de importat și personalizat. Acest
lucru îmbunătățește aspectul și funcționalitatea aplicațiilor mele, oferindu-le un aspect mai
profesionist și atrăgător. Sunt încântat de versatilitatea și ușurința de utilizare a acestei biblioteci
și o recomand cu căldură tuturor persoanelor care dezvoltă aplicații mobile cu React Native.
3. Partea II
3.1 Prezentarea Aplicatiei
Am inceput aplicatia prin crearea unui folder nou in care am creat un alt folder cu aplicatia Expo
astfel, npx create-expo-app my-app, dupa care am deschid codul sursa din Command Prompt si
am inceput prin adaugarea lui TailWindCSS, folosind npm install tailwind si npm install –dev
tailwindcss. Prin folosirea metodei, npx tailwindcss init, am initializat fisierul taiwind.js cu
ajutorul caruia putem scrie cod CSS direct in aplicatia react.
Fig. 1 Creare TailwindCSS
Incepem prin crearea folderului Screens in care vom avea diferite fisiere .js pentru fiecare pannel
al aplicatiei. In HomeScreen.js incep prin importarea de diverse componente necesare scrierii
codului, cat si a bibliotecilor apelate din Command Prompt.
HomeScreen
Această funcție reprezintă componenta HomeScreen. În interiorul acestei funcții, sunt definite
mai multe variabile de stare utilizate pentru gestionarea categoriilor de produse recomandate. De
asemenea, sunt utilizate hook-uri precum useNavigation, useLayoutEffect și useEffect.
Block-ul reprezintă bara de căutare de pe pagina principală. Aceasta conține un câmp de
introducere a textului pentru căutare, un buton pentru selectarea locației și un buton pentru
opțiuni suplimentare. Componentele Icon.Search, TextInput, Icon.MapPin și Icon.Sliders sunt
utilizate pentru a afișa pictogramele corespunzătoare.
<Categories />
Acest cod reprezintă componenta Categories, care afișează o listă de categorii recomandate.
Această componentă este definită într-un alt fișier și este importată în această pagină principală.
Iar Block-ul de Featured afișează categoriile de produse recomandate. Folosind metoda map,
fiecare categorie este afișată utilizând componenta FeatureRow. Aceasta primește mai multe
proprietăți, cum ar fi id, title, shops, description și featuredCategory, pentru a afișa informațiile
corespunzătoare despre fiecare categorie.
Fig. 2 HomeScreen
Fig. 2a Home-Screen
Cart Screen
Acest ecran afișează produsele adăugate în coș, calculează subtotalul, taxa de livrare și totalul
comenzii, și oferă opțiunea de a plasa comanda. Pentru a putea intelege codul mai bine definesc
urmatorii termeni astfel:

useSelector: un hook din biblioteca Redux care permite componentelor să selecteze date
din starea globală a aplicației.

useDispatch: un hook din biblioteca Redux care permite componentelor să dispecheze
acțiuni către reduceri.

useNavigation: un hook din biblioteca React Navigation care oferă funcționalitatea de
navigare între ecrane.
Codul este scris în limbajul JavaScript și utilizează bibliotecile React Native, Redux și React
Navigation. Aplicația utilizează două slice-uri Redux: basketSlice și shopSlice. Acestea sunt
importate și utilizate pentru a selecta produsele din coș și informațiile despre magazin.
Funcția BasketScreen este componenta principală a ecranului coșului de cumpărături. Aceasta
utilizează hook-urile useSelector și useDispatch pentru a accesa starea globală și a dispecheza
acțiuni.
În interiorul funcției BasketScreen, avem o serie de componente React Native care afișează
diferite elemente ale ecranului coșului de cumpărături, cum ar fi butonul de revenire, timpul
estimat de livrare, produsele din coș și totalurile comenzii.
Fragmentul de cod, unde definim items.length, name, price, afișează fiecare produs din coșul de
cumpărături. Utilizăm o buclă map pentru a itera prin grupurile de produse și a le afișa într-un
format specific.
Pentru fiecare produs, afișăm cantitatea, imaginea, numele și prețul. De asemenea, adăugăm un
buton de eliminare care dispechează acțiunea removeFromBasket atunci când este apăsat.
Fig. 3 Cart Screen
Fig. 3a Cart Screen
ShopScreen
Această pagină reprezintă ecranul de afișare a unui magazin într-o aplicație mobilă dezvoltată în
React Native. Scopul acestei pagini este de a afișa informații despre magazinul selectat, precum
și meniul acestuia.
useRoute: un hook din biblioteca @react-navigation/native care ne permite să accesăm
parametrii rutei curente.
Hook-urile useNavigation și useRoute sunt utilizate pentru a accesa parametrii rutei curente și
pentru a obține obiectul de navigare. Acești parametrii includ informații despre magazinul
selectat, precum id-ul, titlul, imaginea, rating-ul, tipul, adresa, descrierea, lista de modificări
(mods), longitudinea și latitudinea.
Hook-ul useSelector este utilizat pentru a selecta magazinul curent din starea globală a aplicației.
Acesta utilizează selectorul selectShop din felia (slice) shopSlice pentru a returna magazinul
curent.
Sunt utilizate componente specifice React Native, precum View, Text, Image și
TouchableOpacity, pentru a afișa imaginea magazinului și butonul de navigare înapoi. De
asemenea, este utilizată biblioteca react-native-feather pentru a afișa o pictogramă de săgeată
înapoi.
Fig. 4 ShopScreen
Fig. 4a ShopScreen
DeliveryScreen
Acest ecran este responsabil pentru afișarea hărții cu locația magazinului și a informațiilor
despre livrare.

react-native: o bibliotecă care permite dezvoltarea de aplicații mobile native folosind
JavaScript și React.



MapView: un component React Native care afișează o hartă interactivă.
Marker: un component React Native care reprezintă un marker pe hartă.
emptyBasket: o acțiune Redux care golește coșul de cumpărături.
Codul începe prin importarea modulelor necesare, cum ar fi View, Text, StatusBar,
TouchableOpacity, Image și SafeAreaView din biblioteca react-native. De asemenea, sunt
importate și alte module precum useNavigation, useSelector și MapView din bibliotecile
@react-navigation/native și react-native-maps. Aplicația folosește și o temă personalizată,
definită într-un fișier separat, care conține culorile utilizate în aplicație.
Funcția DeliveryScreen este componenta principală a ecranului de livrare. Aceasta utilizează
hook-urile useNavigation și useSelector pentru a obține obiectul de navigare și starea
magazinului din starea globală a aplicației. De asemenea, se utilizează și hook-ul useDispatch
pentru a dispeceriza acțiunea emptyBasket atunci când utilizatorul anulează comanda.
Codul returnează o structură de vizualizare (View) care conține un component MapView pentru
afișarea hărții și un component View pentru afișarea informațiilor despre livrare.
MapView primește o regiune inițială și un tip de hartă. Componenta Marker primește
coordonatele magazinului, titlul și descrierea acestuia, precum și o culoare pentru marker.
Fig. 5 DeliveryScreen
Fig. 5a Delivery-Screen
PreparingOrderScreen
Codul începe cu instrucțiunile de import pentru modulele și componentele necesare. Apoi, este
definită componenta PreparingOrderScreen ca o funcție React. În interiorul acestei funcții, se
utilizează hook-ul useNavigation pentru a obține obiectul de navigare din React Navigation.
Următorul pas este utilizarea hook-ului useEffect pentru a programa o acțiune care va fi
executată după ce componenta este montată. În acest caz, se utilizează funcția setTimeout pentru
a amâna navigarea către ecranul "Delivery" timp de 3000 de milisecunde (adică 3 secunde).
În final, componenta returnează o structură de vizualizare (View) care conține o imagine (Image)
și este stilizată folosind clase CSS.
Am importat componenta PreparingOrderScreen și am plasat-o în interiorul componentei
principale App. Componenta App conține o vizualizare (View) care ocupă întregul ecran (flex:
1) și include și bara de stare (StatusBar). Apoi, am adăugat componenta PreparingOrderScreen în
interiorul vizualizării principale.
Pentru o buna rulare a codului este nevoie de diferite pachete:

React Navigation ---- npm install @react-navigation/native => Această comandă va
descărca și instaleaza pachetul "@react-navigation/native" și toate dependențele sale
necesare pentru a utiliza navigația în aplicația React Native.

npx expo install react-native-screens react-native-safe-area-context => este utilizată
pentru a instala pachetele "react-native-screens" și "react-native-safe-area-context" întrun proiect Expo cu React Native. Aceste pachete sunt necesare pentru a utiliza
funcționalități avansate precum gestionarea ecranului și a zonelor sigure în aplicația
React Native

npm i react-native-maps => Această comandă va descărca și instala pachetul "reactnative-maps" și toate dependențele sale necesare pentru a utiliza hărțile în aplicația React
Native. Pachetul "react-native-maps" oferă funcționalități avansate pentru integrarea
hărților în aplicațiile React Native. Se poate utiliza acest pachet pentru a afișa hărți
interactive, a adăuga marcatori, a desena poligoane și multe altele.
Fig. 6 PreparingOrderScreen
BasketIcon
Componenta BasketIcon este o componentă React Native care afișează un icon pentru coșul de
cumpărături. Această componentă este utilizată în cadrul unei aplicații de comerț electronic
pentru a permite utilizatorului să vizualizeze conținutul coșului de cumpărături și să acceseze
pagina de finalizare a comenzii. Componenta BasketIcon este o funcție care returnează un
element View care conține un element TouchableOpacity. În interiorul TouchableOpacity, avem
mai multe elemente View și Text care afișează numărul de elemente din coșul de cumpărături,
textul "View Cart" și totalul coșului de cumpărături.
În interiorul butonului, sunt afișate informații despre numărul de elemente din coșul de
cumpărături, textul "View Cart" și totalul coșului de cumpărături. Aceste informații sunt obținute
din starea globală a aplicației utilizând hook-ul useSelector.
Atunci când butonul este apăsat, se activează funcția onPress, care utilizează obiectul de
navigare pentru a naviga la ecranul coșului de cumpărături.
În final, componenta BasketIcon este exportată ca un component React și poate fi utilizată în alte
componente ale aplicației pentru a afișa butonul coșului de cumpărături.
Fig. 7 BasketIcon
Categories.js / Components
Componenta "Categorii" este o componenta React Native care afiseaza o lista orizontala de
categorii. Utilizatorul poate selecta o categorie, iar aceasta devine activa, schimbandu-se stilul
butonului si textului asociat.
Concepte cheie
Utilizarea hook-ului useState pentru a gestiona starea componentei.
Utilizarea hook-ului useEffect pentru a efectua o actiune dupa randarea componentei.
Utilizarea componentelor React Native precum View, Text, ScrollView, TouchableOpacity si
Image pentru a construi interfata utilizatorului.
Componenta "Categorii" este definita ca o functie JavaScript care returneaza un element View ce
contine un ScrollView. In interiorul ScrollView, sunt afisate butoanele pentru fiecare categorie,
impreuna cu imaginea si numele categoriei.
Starea componentei este gestionata folosind hook-ul useState. Variabila activeCategory retine idul categoriei active, iar variabila categories retine lista de categorii.
Folosind hook-ul useEffect, se apeleaza functia getCategories pentru a obtine lista de categorii.
Dupa ce datele sunt primite, acestea sunt setate in variabila categories folosind functia
setCategories.
Fig. 8 Categories
FeaturedRow
Concepte cheie
Utilizarea componentelor React Native: Codul utilizeaza componente React Native precum
View, Text, ScrollView si TouchableOpacity pentru a construi interfata utilizatorului.
Utilizarea efectului useEffect: Efectul useEffect este utilizat pentru a rula codul atunci cand
componenta este montata sau atunci cand valoarea variabilei id se schimba. In acest caz, efectul
este comentat, dar poate fi utilizat pentru a obtine date despre magazinele caracteristice utilizand
functia getFeaturedShopById.
Utilizarea componentei ShopCard: Componenta ShopCard este importata dintr-un alt fisier si
este utilizata pentru a afisa informatii despre fiecare magazin din lista.
Codul incepe prin importarea componentelor necesare din biblioteca react-native si din alte
fisiere. Apoi, este definita componenta FeatureRow care primeste ca parametri un id, un title, o
description si o lista de shops.
In interiorul componentei, este definit un efect useEffect care este comentat in prezent. Acest
efect poate fi utilizat pentru a obtine date despre magazinele caracteristice utilizand functia
getFeaturedShopById si pentru a actualiza lista de magazine utilizand functia setShops.
Apoi, componenta returneaza o structura de vizualizare care contine un titlu, o descriere si un
buton "Vezi tot". Sub aceasta structura, este afisata o lista orizontala de magazine utilizand
componenta ScrollView. Fiecare magazin este reprezentat de componenta ShopCard, care
primeste informatii precum id-ul, imaginea, titlul, rating-ul, tipul, adresa si descrierea
magazinului.
Fig. 9 FeaturedRow.js
ModRow
Acest cod reprezintă un component React Native numit "ModRow". Acesta este utilizat pentru a
afișa un rând de produs într-o listă de produse. Componenta primește informații despre produs
(nume, descriere, id, preț, imagine) și permite utilizatorului să adauge sau să elimine produsul
din coșul de cumpărături.
Codul este structurat într-o funcție numită "ModRow" care primește informații despre produs ca
parametri. Aceasta utilizează hook-urile "useDispatch" și "useSelector" pentru a accesa starea
coșului de cumpărături din Redux. Funcțiile "handleIncrease" și "handleDecrease" sunt definite
pentru a adăuga sau a elimina produsul din coșul de cumpărături atunci când utilizatorul apasă
butoanele corespunzătoare.
Componenta returnează o structură de vizualizare (View) care conține o imagine, numele și
descrierea produsului, prețul și butoanele de adăugare și eliminare. Imaginea produsului este
afișată utilizând componenta "Image" și este încărcată de la o adresă URL. Numele și descrierea
produsului sunt afișate utilizând componente "Text". Prețul produsului este afișat utilizând
componenta "Text" și este înconjurat de un stil special pentru a-l evidenția. Butoanele de
adăugare și eliminare sunt afișate utilizând componente "TouchableOpacity" și sunt înconjurate
de un stil special pentru a le oferi un aspect vizual plăcut.
Componenta "ModRow" este utilizată pentru a afișa informații despre un produs. Sunt furnizate
valorile pentru nume, descriere, id, preț și imagine. Componenta va afișa aceste informații și va
permite utilizatorului să adauge sau să elimine produsul din coșul de cumpărături.
Componenta "ModRow" este utilizată într-o listă de produse. Lista de produse este furnizată ca
un array de obiecte, fiecare obiect reprezentând un produs. Componenta "FlatList" este utilizată
pentru a afișa lista de produse, iar fiecare element din listă este reprezentat de componenta
"ModRow". Astfel, fiecare produs va fi afișat într-un rând separat, cu informațiile și
funcționalitatea corespunzătoare.
Fig. 10 ModRow
ShopCard
Aceasta componenta reprezintă un card de magazin și este utilizat pentru a afișa informații
despre un anumit magazin, cum ar fi titlul, imaginea, evaluarea, adresa și tipul.
Codul sursă definește un component funcțional React Native numit "ShopCard". Acesta primește
o serie de proprietăți, cum ar fi "id", "title", "imgUrl", "rating", "type", "address", "description",
"dishes", "reviews", "lng" și "lat". Aceste proprietăți sunt utilizate pentru a afișa informațiile
specifice despre magazin în card.
Componenta "ShopCard" utilizează hook-ul "useNavigation" din biblioteca React Navigation
pentru a obține obiectul de navigare. Acesta este utilizat pentru a naviga către ecranul "Shop"
atunci când cardul de magazin este apăsat. Proprietățile cardului de magazin sunt transmise ca
parametri în obiectul de navigare pentru a fi utilizate în ecranul "Shop".
Codul sursă definește, de asemenea, structura vizuală a cardului de magazin utilizând
componente React Native, cum ar fi "View", "Text", "TouchableOpacity" și "Image". Aceste
componente sunt utilizate pentru a crea aspectul și comportamentul cardului de magazin.
Fig. 11 ShopCard
Index.js / Constants
Codul prezentat definește categoriile de plante și plantele recomandate pentru fiecare categorie.
Utilizând acest cod, putem accesa și utiliza aceste informații în dezvoltarea unei aplicații care se
ocupă de vânzarea de plante și semințe.
Concepte cheie
Categorii: Codul definește o listă de categorii de plante, cum ar fi "Seminte", "Trandafiri",
"Alge", "Plante cu Flori", "Plante Fara Seminte" și "Cicade". Fiecare categorie are un ID unic, un
nume și o imagine asociată.
Plante recomandate: Codul definește, de asemenea, o listă de plante recomandate pentru fiecare
categorie. Fiecare plantă recomandată are un ID unic, un titlu, o descriere, o imagine, un preț și
alte detalii relevante.
Structura codului
Codul este structurat în două secțiuni principale: categories și featured.
Categorii: Secțiunea categories definește lista de categorii de plante. Fiecare categorie este
reprezentată ca un obiect cu următoarele proprietăți:
id: ID-ul unic al categoriei.
name: Numele categoriei.
image: Imaginea asociată categoriei.
Plante recomandate: Secțiunea featured definește lista de plante recomandate pentru fiecare
categorie. Fiecare plantă recomandată este reprezentată ca un obiect cu următoarele proprietăți:
id: ID-ul unic al plantei recomandate.
title: Titlul plantei recomandate.
description: Descrierea plantei recomandate.
shops: Lista de magazine care vând această plantă recomandată. Fiecare magazin este reprezentat
ca un obiect cu următoarele proprietăți:
id: ID-ul unic al magazinului.
name: Numele magazinului.
image: Imaginea asociată magazinului.
description: Descrierea magazinului.
lng și lat: Coordonatele geografice ale magazinului.
address: Adresa magazinului.
stars: Rating-ul magazinului.
reviews: Numărul de recenzii ale magazinului.
category: Categorie asociată magazinului.
dishes: Lista de plante disponibile în magazin. Fiecare plantă este reprezentată ca un obiect cu
următoarele proprietăți:
id: ID-ul unic al plantei.
name: Numele plantei.
description: Descrierea plantei.
price: Prețul plantei.
image: Imaginea asociată plantei.
Fig. 12 Index.js / Constants
Index.js / Theme
Concepte Cheie
pallete: Aceasta este o variabilă constantă care stochează o matrice de obiecte. Fiecare obiect
reprezintă o culoare din paletă și are două proprietăți: text și bgColor. Proprietatea text stochează
codul de culoare pentru text, în timp ce proprietatea bgColor stochează o funcție care returnează
codul de culoare pentru fundal, cu o opacitate specificată.
themeColors: Aceasta este o variabilă constantă care stochează prima culoare din paletă
(pallete[0]). Aceasta este utilizată pentru a defini culoarea temei.
Structura de cod constă într-o matrice numită pallete și o variabilă numită themeColors. Matricea
pallete stochează obiecte care reprezintă culorile din paletă, în timp ce variabila themeColors
stochează prima culoare din paletă.
Fig. 13 Index.js/Theme
BasketSlice
Concepte cheie:
Redux Toolkit: Este o bibliotecă pentru gestionarea stării aplicației în JavaScript. Aceasta oferă
un set de unelte și convenții pentru a simplifica dezvoltarea aplicațiilor bazate pe Redux.
Slice: Un slice în Redux Toolkit este o porțiune de starea aplicației și conține reduceri și acțiuni
asociate.
Reducer: Un reducer este o funcție pură care primește starea curentă și o acțiune și returnează o
nouă stare bazată pe acțiunea primită.
Acțiune: O acțiune este un obiect care descrie o intenție de a modifica starea aplicației. Aceasta
conține un tip și, opțional, o încărcătură de date.
Codul începe prin importarea funcției createSlice din biblioteca @reduxjs/toolkit. Această
funcție este folosită pentru a crea un slice în Redux Toolkit.
Următoarea secțiune definește starea inițială a coșului de cumpărături. Aceasta conține un array
gol pentru articolele din coș.
Apoi, se utilizează funcția createSlice pentru a crea un slice numit "basket" cu starea inițială
definită anterior și reduceri asociate.
Reducerii sunt funcții care modifică starea coșului de cumpărături în funcție de acțiunile primite.
În acest caz, avem trei reduceri definite:
addToBasket: Adaugă un element în coșul de cumpărături. Aceasta primește o acțiune care
conține încărcătura de date (elementul de adăugat) și adaugă elementul respectiv în array-ul
items al stării.
removeFromBasket: Elimină un element din coșul de cumpărături. Aceasta primește o acțiune
care conține încărcătura de date (elementul de eliminat) și caută indexul elementului în array-ul
items. Dacă elementul este găsit, acesta este eliminat din array, altfel se afișează un mesaj de
eroare în consolă.
emptyBasket: Golește coșul de cumpărături. Aceasta primește o acțiune și setează array-ul items
al stării ca fiind gol.
La finalul codului, se exportă reducerii și acțiunile definite pentru a putea fi utilizate în alte părți
ale aplicației.
De asemenea, sunt exportate și câteva funcții de selecție care permit accesul la anumite părți ale
stării coșului de cumpărături:
selectBasketItems: Returnează array-ul de articole din coș.
selectBasketItemsById: Returnează articolele din coș care au un anumit ID.
selectBasketTotal: Calculează suma totală a prețurilor articolelor din coș.
Codul implementează funcționalitatea unui coș de cumpărături utilizând Redux Toolkit în
JavaScript. Acesta definește reduceri și acțiuni pentru a adăuga, elimina și goli coșul de
cumpărături. De asemenea, oferă funcții de selecție pentru a accesa anumite părți ale stării
coșului. Utilizând acest cod, putem crea și gestiona un coș de cumpărături în aplicațiile noastre
JavaScript.
Fig. 14 BasketSlice
ShopSlice.js
Codul furnizat definește un Slice pentru un magazin în Redux. Acesta include starea inițială a
magazinului și reducerii asociate pentru a actualiza starea în funcție de acțiunile dispecerizate.
Utilizăm useDispatch din biblioteca react-redux pentru a obține o referință la funcția dispatch a
magazinului. Apoi, putem dispeceriza acțiunea setShop pentru a actualiza magazinul cu o
valoare nouă.
Utilizăm useSelector din biblioteca react-redux pentru a selecta magazinul din starea globală a
aplicației. Apoi, putem utiliza proprietățile magazinului în componenta noastră pentru a afișa
informații despre magazin.
Fig. 15 ShopSlice
Server: Sanity – Schemas
Codul de sanity este scris in schemas astfel:
Concepte cheie:
Sanity.io: Este o platformă de gestionare a conținutului care permite dezvoltatorilor să creeze și
să administreze conținutul într-un mod structurat și flexibil.
Definirea tipurilor: În Sanity.io, putem defini tipuri de documente care reprezintă diferite entități
în sistemul nostru. Aceste tipuri de documente pot avea câmpuri și validări specifice.
Câmpuri: Câmpurile reprezintă proprietățile unui document și pot fi de diferite tipuri, cum ar fi
șiruri de caractere, imagini sau alte tipuri de date.
Codul furnizat definește un tip de document numit "category" în Sanity.io. Acest tip de
document reprezintă categoriile în sistemul nostru
Definim câmpul "name" ca un șir de caractere și îi atribuim un titlu "Category name". De
asemenea, adăugăm o validare care impune ca acest câmp să fie obligatoriu.
Definim câmpul "description" ca un șir de caractere și îi atribuim un titlu "Description". De
asemenea, adăugăm o validare care impune ca acest câmp să aibă o lungime maximă de 200 de
caractere.
Definim câmpul "image" ca un tip de date "image" și îi atribuim un titlu "Image of the shop".
Acest câmp va fi utilizat pentru a stoca imaginea asociată categoriei.
Fig. 16 Sanity-schemas-category
Sanity-schemas-featured.js
Acest cod definește un câmp numit "name" de tipul "string" în cadrul tipului "featured". Acest
câmp reprezintă numele magazinului și este obligatoriu (validarea este realizată prin funcția
rule.required()).
Codul definește un câmp numit "description" de tipul "string" în cadrul tipului "featured". Acest
câmp reprezintă descrierea magazinului și are o limită maximă de 200 de caractere (validarea
este realizată prin funcția rule.max(200)).
Codul definește un câmp numit "shops" de tipul "array" în cadrul tipului "featured". Acest câmp
reprezintă o listă de referințe către alte documente de tipul "shop". Prin utilizarea opțiunii of:
[{type: 'reference', to: [{type: 'shop'}]}], se specifică că acest câmp poate conține doar referințe
către documente de tipul "shop".
Codul furnizat definește un tip numit "featured" în Sanity.io, care reprezintă magazinele
recomandate. Acest tip are trei câmpuri: "name" (numele magazinului), "description" (descrierea
magazinului) și "shops" (o listă de referințe către alte documente de tipul "shop").
Fig. 17 Sanity-schemas-featured.js
Fig. 17a Sanity-schemas / Online View
Index.js / Sanity-Schemas
Concepte cheie:
Importarea modulelor: În JavaScript, putem importa module folosind sintaxa import. Aceasta ne
permite să aducem funcționalități din alte fișiere în fișierul nostru curent.
Exportarea modulelor: Putem exporta funcționalități dintr-un fișier folosind sintaxa export.
Aceasta ne permite să facem funcționalitățile noastre disponibile pentru alte fișiere care le
importă.
Structura de cod implică importarea și exportarea a patru module: category, shop, mod și
featured. Aceste module sunt apoi exportate ca un array denumit schemaTypes.
Fig. 18 Index.js / Sanity-Schemas
Mod.js / Sanity-Schemas
Codul furnizat definește un tip de document numit "mod" în Sanity.io.
Fig. 19 Mod.js / Sanity-Schemas
Shop.js / Sanity-Schemas
Concepte cheie
Document: Un document în Sanity.io reprezintă o entitate de date care poate fi stocată și
gestionată în cadrul sistemului. În acest caz, documentul "Shop" va conține informații despre un
magazin.
Câmpuri: Câmpurile reprezintă proprietățile unui document și definesc tipurile de date și
validările asociate acestora. În codul furnizat, sunt definite mai multe câmpuri pentru
documentul "Shop", cum ar fi "name" (nume), "description" (descriere), "image" (imagine), "lat"
(latitudine), "lng" (longitudine), "address" (adresă), "rating" (evaluare), "reviews" (recenzii),
"type" (categorie) și "mods" (modificări).
Tipuri de date: Fiecare câmp are un tip de date asociat, cum ar fi "string" (șir de caractere),
"number" (număr), "image" (imagine) și "reference" (referință). Aceste tipuri de date determină
cum vor fi stocate și gestionate valorile câmpurilor.
Validare: Validările sunt utilizate pentru a asigura că valorile introduse în câmpuri respectă
anumite reguli. În codul furnizat, sunt definite mai multe validări pentru câmpurile "name",
"description", "address" și "rating". De exemplu, câmpul "name" este obligatoriu, câmpul
"description" poate avea maxim 200 de caractere, câmpul "address" este obligatoriu, iar câmpul
"rating" trebuie să fie un număr între 1 și 5.
Referințe: Câmpurile de tip "reference" permit asocierea unui document cu un alt document
existent în sistem. În codul furnizat, câmpul "type" este de tip "reference" și este asociat cu
documentul "category". Acest lucru permite selectarea unei categorii existente pentru un
magazin.
Codul începe cu o linie comentată care importă funcțiile defineField și defineType din modulul
'sanity'. Aceste funcții sunt utilizate pentru a defini câmpurile și tipurile de date personalizate în
Sanity.io. Cu toate acestea, în codul furnizat, aceste funcții nu sunt utilizate explicit.
Apoi, este exportat un obiect care reprezintă definiția documentului "Shop". Obiectul are
următoarea structură:
name: Numele documentului, în acest caz "shop".
title: Titlul documentului, în acest caz "Shops".
type: Tipul documentului, în acest caz "document".
fields: Un array care conține definițiile câmpurilor documentului "Shop".
Fig. 20 Shop.js / Sanity-Schemas
4. Concluzii
Aplicatia mobila Delivery-app a fost creata cu succes dupa cum se poate observa din cod si din
imaginile atasate. Am lucrat la aceasta aplicatie de-alungul semestrului 2 de facultate, cu scopul
de a putea face o platforma de vanzari si delivery cu plante. Aplicatia poate fi incercata folosind
Expo Go pe Android si pe IOS.
In vederea implementarii acestei aplicatii, am inceput sa studiez tehnicile de realizare a unei
aplicatii mobile folosind React Native.
In concluzie am reusit sa termin aplicatia cu succes.
5. Bibliografie
https://javascript.info/
https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch01.html
https://www.section.io/engineering-education/getting-started-with-sanity-cms/
https://reactnative.dev/
DECLARAŢIE DE AUTENTICITATE
Subsemnatul/a BOARIU DAN ANDREI, Absolvent al studiilor de master,
promoţia 2023, înspecializarea METODE ŞI MODELE ÎN INTELIGENŢA
ARTIFICIALĂ Facultatea de Ştiinţe,
în legătură cu elaborarea lucrării de disertaţie cu titlul Aplicație multiplatformă
de gestiune a pieței horticole, coordonator Boldea Costin Radu, prin prezenta declar
pe propria răspundere că:
a. Lucrarea a fost elaborată personal şi îmi aparţine în întregime;
b. Nu au fost folosite alte surse decât cele menţionate în Bibliografie;
c. Nu au fost preluate texte, date sau elemente de grafică din alte lucrări sau
din alte surse fără a fi citate şi fără a fi precizată sursa prelucrării, inclusiv
în cazul în care sursa o reprezintă alte lucrări ale mele;
d. Lucrarea nu a mai fost folosită în alte contexte de examen sau concurs.
Data,
26.06.2023
Semnătura,