Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:05 [2023/02/24 14:34] ciprian.dobre [Organizarea codului] |
pw:laboratoare:05 [2023/04/24 22:36] (current) ciprian.dobre [React Query] |
||
|---|---|---|---|
| Line 146: | Line 146: | ||
| === Uilizare React Query === | === Uilizare React Query === | ||
| - | - Pentru a începe să utilizați React Query, trebuie să îl instalați mai întâi. Puteți face acest lucru utilizând comanda de instalare npm: <code>npm install react-query</code> | + | - Pentru a începe să utilizați React Query, trebuie să îl instalați mai întâi. Puteți face acest lucru utilizând comanda de instalare npm: <code>npm install @tanstack/react-query</code> |
| - După ce ați instalat React Query, trebuie să îl importați și să îl configurați în aplicația voastră. React.js. În mod tipic, acest lucru se face în fișierul App.js. Iată un exemplu simplu: <code>import React from 'react'; | - După ce ați instalat React Query, trebuie să îl importați și să îl configurați în aplicația voastră. React.js. În mod tipic, acest lucru se face în fișierul App.js. Iată un exemplu simplu: <code>import React from 'react'; | ||
| import { QueryClient, QueryClientProvider } from 'react-query'; | import { QueryClient, QueryClientProvider } from 'react-query'; | ||
| Line 196: | Line 196: | ||
| - | ==== Teams ==== | + | ===== Sarcini de laborator ===== |
| - | Asa cum am spus la inceputul anului, aveti un canal special dedicat pentru **Discutii de laborator**. Orice intrebare aveti cu privire la laborator, va rog sa o puneti acolo, pentru a putea sa va lamurim. | + | - Creați un nou proiect de BE, așa cum a fost prezentat în Laboratorul 1 |
| - | ===== Ce este un backend? ====== | + | - Extindeți funcționalitatea din WeatherForecastController adăugând o metoda care întoarce prognoza pentru o data primita că parametru. Trebuie să întoarcă prognoza doar pentru următoarele 7 zile. În cazul în care este ceruta o data mai îndepărtată, trebuie întors un cod de eroare. |
| + | - Creați un nou proiect de FE, așa cum a fost prezentat în Laboratorul 4 | ||
| + | - Instalați Material UI și React Query în proiectul nou creat | ||
| + | - Mapati endpointurile din BE folosind OpenAPI Generator | ||
| + | - Accesați endpointurile folosind componente de Material UI, React Query și metodele generate de OpenAPI Generator | ||
| + | ===== Linkuri Utile ===== | ||
| - | Multa lume considera ca backendul este pur si simplu o colectie de rute expuse de un server, prin care acesta primeste informatii si furnieaza informatii. Pe scurt, un blackbox. | ||
| - | |||
| - | <note important> | ||
| - | Aceasta definitie nu este gresita, dar nu este nici complet corecta, deoarece supra-simplifica rolul unui backend.</note> | ||
| - | |||
| - | Un backend este acea componenta software dintr-o aplicatie care coordoneaza **business logic**-ul unei aplicatii. Chiar daca utilizatorii interactioneaza cu frontendul, frontendul poate efectua doar //actiunile care sunt permise de backend//. Asadar, backendul reprezinta **nucleul logicii de domeniu** a oricarei aplicatii. | ||
| - | |||
| - | Backendurile pot fi scrise in multe moduri. Noi ne vom axa pe clasicul **Web API REST**. | ||
| - | |||
| - | <note tip>Un Web API este un server web ce expune rute prin care clientii pot interactiona cu sistemul.</note> | ||
| - | <note tip>Un Web API REST (Representational State Transfer) este un Web API care comunica peste HTTP.</note> | ||
| - | |||
| - | |||
| - | ===== Structura Backendului ====== | ||
| - | |||
| - | Cea mai simpla structura pe care puteam sa o folosim este **3-tier architecture**. Asa cum a fost prezentat la curs, este cea mai simpla de folosit, dar si cea mai simpla de transformat in dezastru. | ||
| - | |||
| - | Am ales sa construim codul folosind o combinatie intre [[https://docs.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/common-web-application-architectures|Clean Architecture]], [[https://docs.microsoft.com/en-us/azure/architecture/microservices/model/tactical-ddd|Tactical Domain Driven Design]] si [[https://www.youtube.com/watch?v=cVVMbuKmNes&ab_channel=CodeOpinion|Vertical Slicing]]. Motivatia pentru fiecare alegere este urmatoarea: | ||
| - | |||
| - | * **Clean** - ofera o separatie clara intre nivele si, cu toate astea, dependentele sunt curate. Nivelul **core** nu are depedenta fata de nimeni. Nivelul **infrastructure** are dependenta de **core**. Nivelul **application** are depdendenta de **core** si **infrastructure**. | ||
| - | * **Tactical Domain Driven Design** - deoarece folosim deja Clean, logica de domeniu este scrisa in Core. Am utilizat sabloane expuse de Tactical DDD (precum agregate), pentru a reflecta ce am discutat pana acum. | ||
| - | * **Vertical Slicing** - ofera un grad de readability foarte mare codului. Cu toate astea, am utilizat Vertical Slicing doar in nivelul **application**, pentru a segrega cat mai bine functionalitatile. | ||
| - | |||
| - | <note important>Pentru acest backend, care este simplu, arhitectura pe care noi am propus-o este **overkill**. Cu toate astea, am luat aceasta decizie cu scopul de a va oferi un material didactic cat mai cuprinzator.</note> | ||
| + | * Documentație Materia UI: [[https://mui.com/material-ui/getting-started/overview/]] | ||
| + | * OpenAPI Generator [[https://openapi-generator.tech/]] | ||
| + | * React Query [[https://react-query-v3.tanstack.com/]] | ||
