Scribd
Importer
3 vues3 pages

Tester une API Node.js avec ReactJS

Le document décrit un cours sur la consommation d'une API Node.js avec une application ReactJS, en se concentrant sur le test des endpoints via Postman et la création d'une interface utilisateur. Il détaille les étapes pour tester l'API, concevoir l'application, et implémenter les fonctionnalités nécessaires. Les livrables attendus incluent des captures d'écran des tests et le code source de l'application.

Transféré par

karrarhajar77
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
3 vues3 pages

Tester une API Node.js avec ReactJS

Le document décrit un cours sur la consommation d'une API Node.js avec une application ReactJS, en se concentrant sur le test des endpoints via Postman et la création d'une interface utilisateur. Il détaille les étapes pour tester l'API, concevoir l'application, et implémenter les fonctionnalités nécessaires. Les livrables attendus incluent des captures d'écran des tests et le code source de l'application.

Transféré par

karrarhajar77
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Cours Node Js

Séance à distance : Test et Consommation d’une API [Link] avec


une Application ReactJS

Objectifs
 Tester les endpoints de l'API [Link] via Postman ou un autre outil.
 Concevoir une application ReactJS ergonomique pour consommer cette API.

Partie 1 : Test des Endpoints de l’API [Link]


Étape 1 : Tester l’API avec Postman

1. Lancer l’API [Link] avec la commande : npm start

2. Tester les différentes routes :


o Récupérer la liste des membres
Méthode : GET
URL : [Link]
o Ajouter un nouveau membre
Méthode : POST
URL : http//localhost:8081/api/v1/members
Corps (body en JSON) :

{
"id": 4,
"name": "M4",
"email": "M4E@[Link]"
}

o Modifier un membre
Méthode : PUT
URL : http//localhost:8081/api/v1/members/4
{

"name": "FStack",
"email": "FStack@[Link]"
}

o Supprimer un membre
Méthode : DELETE
URL : http//localhost:8081/api/v1/members/4
Cours Node Js

Étape 2 : Vérifier les réponses

 Vérifier que les données retournées par l’API sont correctes.


 Vérifier que les erreurs sont bien gérées (ex : suppression d’un ID inexistant).

Partie 2 : Conception d’une Application ReactJS


Étape 1 : Initialisation du projet React

1. Créer un projet React:


2. nécessaires :

npm install axios react-router-dom

Étape 2 : Création des composants

L’application React devra contenir les composants suivants :

 Liste des membres ([Link]) : affiche la liste des membres.


 Formulaire d’ajout/modification ([Link]) : permet d’ajouter ou modifier
un membre.
 Composant principal ([Link]) : gère la navigation entre les pages.

Étape 3 : Implémentation des fonctionnalités

1. Récupération des membres depuis l’API avec axios :

import { useState, useEffect } from "react";


import axios from "axios";

function MembersList() {
const [members, setMembers] = useState([]);

useEffect(() => {
[Link]("http//localhost:8081/api/v1/members")
.then(response => setMembers([Link]))
.catch(error => [Link]("Erreur:", error));
}, []);

return (
<div>
<h2>Liste des Membres</h2>
<ul>
{[Link](member => (
<li key={[Link]}>{[Link]} -
{[Link]}</li>
))}
</ul>
</div>
);
}
Cours Node Js

export default MembersList;

2. Ajout d’un membre avec [Link]


3. Modification et suppression des membres
o Modifier un membre avec [Link]
o Supprimer un membre avec [Link]

Étape 4 : Mise en place de la navigation avec react-router-dom

Partie 3 : Tests et Améliorations


1. Tester l’application React avec l’API [Link] en parallèle.
2. Ajouter un design ergonomique avec Tailwind CSS ou Material UI.
3. Améliorer la gestion des erreurs et afficher des messages utilisateur.

Livrables attendus
 Capture des tests des endpoints via Postman.
 Code source de l’application ReactJS.
 Présentation de l’interface finale.

Vous aimerez peut-être aussi