Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:05 [2023/02/24 14:34] ciprian.dobre [Structura Backendului] |
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 | |
| - | 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. | + | - Instalați Material UI și React Query în proiectul nou creat |
| - | + | - Mapati endpointurile din BE folosind OpenAPI Generator | |
| - | <note important> | + | - Accesați endpointurile folosind componente de Material UI, React Query și metodele generate de OpenAPI Generator |
| - | Aceasta definitie nu este gresita, dar nu este nici complet corecta, deoarece supra-simplifica rolul unui backend.</note> | + | ===== Linkuri Utile ===== |
| - | + | ||
| - | 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> | + | |
| + | * 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/]] | ||
