Differences

This shows you the differences between two versions of the page.

Link to this comparison view

pw:laboratoare:07 [2022/05/13 15:40]
alexandru.hogea
pw:laboratoare:07 [2022/05/13 21:01] (current)
alexandru.hogea [Formulare]
Line 2: Line 2:
  
 ===== Scopul laboratorului ===== ===== Scopul laboratorului =====
-Acest laborator reprezinta integrarea frontend-ului cu backend-ul creat pentru aceasta aplicatie. Vom introduce ​o biblioteca importanta: ​[[https://​axios-http.com/​docs/​intro|Axios]],​ cu care vom putea face aceasta integrare.+Acest laborator reprezinta integrarea frontend-ului cu backend-ul creat pentru aceasta aplicatie. Vom introduce ​un pachet important, cel pentru axios, ​[[https://​axios-http.com/​docs/​intro|Axios]],​ cu care vom putea face aceasta integrare.
  
 ===== Ce veti invata la acest laborator? ===== ===== Ce veti invata la acest laborator? =====
-Cum sa interactionati cu un server, ​care sunt tipurile de cereri si cum sa manipulam raspunsul.+Cum sa interactionati cu un server, ​cum sa folositi Axios pentru a face cereri si cum sa manipulam raspunsul. 
 + 
 +===== Inainte de integrarea frontend-backend ===== 
 +==== Actualizarea formularelor ==== 
 +<note important>​Au fost actualizate formularele astfel incat sa foloseasca biblioteca[[https://​react-hook-form.com/​|react-hook-form]]. Aceasta biblioteca ne scuteste de gestionarea fiecarui input din cadrul formularelor.</​note>​ 
 + 
 +Mai jos puteti vedea un exemplu din documentatia celor de la react-hook-form. Cel mai important feature este **register** care paseaza urmatoarele proprietati fiecarui input: 
 +  * onChange 
 +  * name 
 +  * onBlur 
 +  * ref 
 + 
 +Prin aceste proprietati,​ se vor actualiza campurile, valorile finale fiind returnate de **getValues()**. 
 +<​code>​ 
 +import React from "​react";​ 
 +import { useForm } from "​react-hook-form";​ 
 + 
 +export default function App() { 
 +  const { register, handleSubmit,​ watch, formState: { errors } } = useForm();​ 
 +  const onSubmit = data => console.log(data);​ 
 + 
 +  console.log(watch("​example"​));​ // watch input value by passing the name of it 
 + 
 +  return ( 
 +    /* "​handleSubmit"​ will validate your inputs before invoking "​onSubmit"​ */ 
 +    <form onSubmit={handleSubmit(onSubmit)}>​ 
 +      {/* register your input into the hook by invoking the "​register"​ function */} 
 +      <input defaultValue="​test"​ {...register("​example"​)} /> 
 +       
 +      {/* include validation with required or other standard HTML validation rules */} 
 +      <input {...register("​exampleRequired",​ { required: true })} /> 
 +      {/* errors will return when field validation fails  */} 
 +      {errors.exampleRequired && <​span>​This field is required</​span>​} 
 +       
 +      <input type="​submit"​ /> 
 +    </​form>​ 
 +  ); 
 +
 +</​code>​ 
 + 
 +<​note>​Desi pentru aceasta aplicatie nu am pus mesajele de eroare, va recomandam sa aveti intotdeauna un raspuns pe care sa il dati utilizatorilor care nu completeaza corect. Greselile facute de oameni in interactiunea cu un program nu sunt 'human error',​ sunt bad design.</​note>​ 
 + 
 +===== Ce este Axios? ===== 
 +Axios este un client HTTP pentru node.js sau pentru browser. Cu ajutorul acestuia putem sa: 
 +  * interceptam cererea sau raspunsul 
 +  * transformam datele cererii sau al raspunsului 
 +  * anulam cereri 
 +  * transformam automat raspunsul pentru format JSON 
  
 ===== Configurarile necesare ===== ===== Configurarile necesare =====
Line 14: Line 62:
 ==== 2. Fisier de configurare rute ==== ==== 2. Fisier de configurare rute ====
 Pentru a avea toate informatiile intr-un loc, vom crea un fisier in care sa tinem toate rutele. Pentru a avea toate informatiile intr-un loc, vom crea un fisier in care sa tinem toate rutele.
 +
 +<​note>​Daca am avea undeva hostat serverul, pur si simplu am inlocui base in acest fisier, in loc sa inlocuim oriunde folosim axios.</​note>​
 +<​note>​Am grupat rutele in functie de functionalitati,​ va recomandam sa tineti informatiile statice sub o forma cat mai ordonata.</​note>​
 <​code>​ <​code>​
 const base = "​https://​localhost:​7002/​api/​v1/";​ const base = "​https://​localhost:​7002/​api/​v1/";​
Line 40: Line 91:
 </​code>​ </​code>​
 ==== 3. Configurare instanta Axios ==== ==== 3. Configurare instanta Axios ====
-De ce o instanta de Axios? Pentru ca in diferite cazuri avem nevoie de o configurare mai specifica pentru interactiunea cu backend-ul. De asemenea, aceasta instanta ne ajuta pentru a folosi [[https://​axios-http.com/​docs/​interceptors|interceptori]]. ​Acesti interceptori ​ne pot ajuta in 2 moduri:+De ce o [[https://​axios-http.com/​docs/​instance|instanta]] de Axios? Pentru ca in diferite cazuri avem nevoie de o configurare mai specifica pentru interactiunea cu backend-ul. De asemenea, aceasta instanta ne ajuta pentru a folosi [[https://​axios-http.com/​docs/​interceptors|interceptori]]. ​ 
 +<note tip> 
 +Interceptorii ​ne pot ajuta in 2 moduri:
   - Daca vrem sa modificam orice cerere inainte sa o trimitem (ex: sa atasam un header in plus)   - Daca vrem sa modificam orice cerere inainte sa o trimitem (ex: sa atasam un header in plus)
   - Daca vrem sa gestionam datele primite de la server   - Daca vrem sa gestionam datele primite de la server
- +</​note>​ 
-In cazul nostru, nu a trebuit sa folosim ​acesti ​interceptori.+In cazul nostru, nu a trebuit sa folosim interceptori.
 <​code>​ <​code>​
 import axios from "​axios";​ import axios from "​axios";​
Line 56: Line 109:
 export default axiosInstance;​ export default axiosInstance;​
 </​code>​ </​code>​
 +==== 4. Folosirea instantei pentru a face cereri ====
 +<​note>​Cele mai folosite tipuri de cereri folosite sunt: GET, POST, PUT si DELETE. GET este folosit pentru a cere resurse, POST pentru crearea unei resurse, PUT pentru actualizarea unei resurse deja existente, iar DELETE, precum ii zice si numele, va sterge o resursa.</​note>​
 +Mai jos puteti gasi doua exemple de functii care fac doua cereri: una de tip GET - pentru a cere toate cartile si una de tip POST - pentru a adauga o carte. Primul pas in ambele este de a prelua **access token-ul** provenit de la auth0. Aceasta actiune o facem folosind functia getAccessTokenSilently() pe care auth0 ne-o ofera. Al doilea pas este sa folosim instanta noastra de axios pentru a cere datele respective sau pentru a adauga resursa. In final, pentru a citi raspunsul cererii, vom folosi **then** pentru a actualiza lista de carti.
 +
 +<note tip>​Pentru '​prinderea'​ erorilor puteti folosi **catch**. </​note>​
 +<​code>​
 +  const getAllBooks = useCallback(async () => {
 +    const accessToken = await getAccessTokenSilently();​
 +    axiosInstance
 +      .get(routes.books.getAll,​ {
 +        headers: {
 +          Authorization:​ `Bearer ${accessToken}`,​
 +        },
 +      })
 +      .then(({ data }) => setBooks(data));​
 +  }, [getAccessTokenSilently]);​
 +
 +  const handleAddBook = (form) => {
 +    (async () => {
 +      const accessToken = await getAccessTokenSilently();​
 +      axiosInstance
 +        .post(routes.books.addBook,​ form, {
 +          headers: {
 +            Authorization:​ `Bearer ${accessToken}`,​
 +          },
 +        })
 +        .then(() => getAllBooks());​
 +    })();
 +  };
 +</​code>​
 +
 +<note tip>Daca vrem sa primim toate cartile de fiecare data cand componenta noastra Books se va randa, atunci vom folosi **useEffect**.</​note>​
 +<​code>​
 +  useEffect(() => {
 +    getAllBooks();​
 +  }, [getAllBooks]);​
 +</​code>​
 +
 +Un exemplu de cerere de tip DELETE o avem pentru stergerea unei resurse (carti):
 +<​code>​
 +  const handleDelete = () => {
 +    **confirmare stergere resursa**
 +    axiosInstance
 +      .delete(routes.books.deleteBook(id))
 +      .then(() => navigate("/​books"​));​
 +  };
 +</​code>​
 +
 +<note tip>​Inainte de stergerea resursei, utilizatorul ar trebui cumva anuntat de actiunea acestuia, in caz ca a apasat din greseala. Acest lucru se poate face printr-un pop-up in care sa confirme stergerea.</​note>​
 +Putem observa ca functia este asemanatoare,​ avem instanta de axios care va face o cerere de tip **delete** si daca cererea a fost efectuata cu succes, se va naviga pe pagina cu toate cartile.
 +
pw/laboratoare/07.1652445606.txt.gz · Last modified: 2022/05/13 15:40 by alexandru.hogea
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0