Want to create interactive content? It’s easy in Genially!

Get started free

07-developpement_d_une_api_rest_en_js

CEFii

Created on March 1, 2024

Start designing with a free template

Discover more than 1500 professional designs like these:

Transcript

développement d'une API rest en js

5. Routes et requêtes

4. La base de données

3. Création de l'API

2. Mise en place de l'environnement

1. Introduction

Objectifs : découvrez dans cette séquence de formation comment développer une base d'une API REST en JS

Sommaire

Introduction

Node.js est un environnement d'exécution JavaScript côté serveur qui permet de faire fonctionner du code JavaScript en dehors d'un navigateur web. Express.js est un framework pour Node.js qui facilite la création d'applications web et d'API en fournissant des fonctionnalités de gestion de routage, de middleware et de gestion des erreurs. Pour tester notre API, nous allons utiliser de nouveau "postman". Mais avant cela, developpons-là !!

1- Les étapes de développement

Présentation de Node.js et Express.js :

Mise en place de l'environnement

Pour commencer, nous allons installer Node.js sur notre ordinateur. Nous pouvons télécharger la dernière version de Node.js sur le site officiel : https://nodejs.org/en. Nous selectionnons la version "LTS", celle recommandée.Une fois l'installation faite, nous allons vérifier les versions de node.js, ainsi que du gestionnaire de package "npm" qui s'installe également.

  • On ouvre notre terminal et on tape :
node --versionnpm --versionNotre environnement est d'ores et déjà installé. Le serveur que nous allons utiliser pour l'exécution de notre future API sera créé par nous même en JavaScript.

2- Mise en place de l'environnement

Installation de Node.js et Express.js :

Création de l'API

Nous créons un dossier nommé "cours_api_rest" et nous initialisons un nouveau projet npm en exécutant la commande suivante dans votre terminal :npm init -y Cette ligne de commande est utilisée dans un environnement Node.js pour initialiser un nouveau projet Node.js avec un fichier package.json par défaut, le "y" permet de valider les options par défauts sans qu'il soit nécessaire de répondre à des questions interactives.

3- Création de l'API

Création d'un nouveau projet :

Pour l'installation des dépendances essentielles pour notre API, nous utilisons une nouvelle fois "npm". on tape cette commande pour installer le framework express et l'outil nodemon :npm i express nodemon nodemon : outil qui surveille les modifications dans les fichiers de l'application Node.js et redémarre automatiquement le serveur lorsque des modifications sont détectées. Cela est utile pour le développement, car nous n'avons pas besoin de redémarrer manuellement le serveur à chaque modification. Cela à générer deux éléments essentiels du projet :node_modules : package-lock.json :

3- Création de l'API

Installation des dépendances :

On crée un fichier JS nommé "server.js". On met le code ci-dessous afin de pouvoir exécuter notre serveur. Dernière étape avant de lancer et tester notre serveur : • paramétrer le fichier package.json pour enregistrer automatiquement nos modifications avec nodemon. • on ajoute cette ligne :

3- Création de l'API

Création du serveur :

Maintenant nous pouvons lancer notre serveur avec cette ligne de commande : npm start Pourquoi cette erreur ? Parce que nous utilisons l'import de classe en format "module" JavaScript Le serveur est configuré par défaut pour utiliser un "require". Notre projet ne peut pas l'accepter. Il faut pour cela configurer le package.json pour lui attribuer le type d'import sous forme de module : Le serveur se relance et affiche le message du console.log; l'adresse du serveur dans le terminal.

3- Création de l'API

Exécution du serveur :

On ajoute la première route pour afficher des données JSON en dur. 1. Lorsqu'un client envoie une requête GET à l'URL "/" de votre serveur, 2. Express exécute la fonction callback associée à cette route. 3. Dans cette fonction callback, le statut de la réponse est défini sur 200 (OK) en utilisant response.statusCode = 200. 4. Ensuite, un tableau d'objet JSON est envoyé en réponse à la requête GET à l'URL "/". Ce tableau contient un objet avec la propriété "message". 5. La méthode response.send() est utilisée pour envoyer la réponse avec le contenu JSON au client.

3- Création de l'API

Les endPoints HTTP avec express :

Comment récupérer un paramètre passé dans l'URL de la requête. Lorsqu'un client effectue une requête GET à l'URL "/tasks/:id" de votre serveur, la fonction anonyme spécifiée en deuxième argument est exécutée. Cette fonction prend deux arguments : "request" et "response", qui représentent respectivement la requête entrante et la réponse sortante. Dans cette fonction, nous définissons le code de statut HTTP de la réponse à 200 (ce qui signifie "OK") à l'aide de la propriété "statusCode" de l'objet "response". Ensuite, nous envoyons une réponse au format JSON avec un message personnalisé à l'aide de la méthode "send" de l'objet "response". Le message envoyé est "La tâche [ID] a bien été récupérée.", où [ID] est remplacé par la valeur de l'identifiant de la tâche spécifiée dans l'URL. La valeur de l'identifiant de la tâche est extraite de l'URL à l'aide de la propriété "params" de l'objet "request". La propriété "params" contient un objet avec les paramètres d'URL spécifiés dans l'URL de la requête. Dans ce cas, nous récupérons la valeur de l'identifiant de la tâche à l'aide de la notation "request.params.id".

3- Création de l'API

Les paramètres avec express :

Maintenant voyons comment manipuler le body de la request, car celui de la response on l'utilise depuis le début.Voyons ce qui se cache derrière ce body avec un console.log : Faisons l'essai avec postman en envoyant une donnée via le body dans la request : Regardons ensuite l'affichage de notre console.log dans le terminal : Il affiche l'objet récupéré avec la propriété "body" de l'objet "request", "request.body". Ainsi lors de requête de méthodes "POST","PUT" ou "PATCH", on va pouvoir faire passer des données.

3- Création de l'API

Le body avec express :

Les "query params" sont des paramètres facultatifs qui peuvent être ajoutés à une URL pour fournir des informations supplémentaires à une requête HTTP. Dans Express.js, vous pouvez accéder aux "query params" à l'aide de la propriété "query" de l'objet "request". Nous utilisons de nouveau "postman" pour ajouter deux "query" dans la requête.

3- Création de l'API

Les query params avec express :

La base de données

Afin de compléter notre API, nous allons mettre en place une connexion avec une base de données NoSql de MongoDB. Pour cela, nous allons exploiter une collection "tasks", sur laquelle un CRUD sera mis en place. Commençons par concevoir la base de données. Nous créons une base de données appelée "todolist". On ajoute à l'intérieur une collection nommée "tasks". Puis on l'alimente de plusieurs documents pour être consommés.

4- La base de données

Se connecter avec MongoDB :

Pour la mise en place de la connexion à notre base de données, on doit installer une dépendance appelée "Mongoose".Pour cela on tape cette ligne de commande :npm i mongoose On importe la classe dans notre fichier server.js. Puis enfin, on met en place la connexion à notre base de données en reprenant l'URL de connexion à la BDD et le nom de notre BDD passée dans la méthode "connect" de l'objet "mongoose". Selon le serveur local, il faut changer l'adresse ip "127.0.0.1" par "localhost".

4- La base de données

Se connecter avec MongoDB :

Mongoose est un ODM (Object Document Mapping) pour MongoDB qui permet de définir des modèles de données pour vos documents MongoDB et de fournir une interface simple pour interagir avec la base de données. Dans Mongoose, un modèle de données est défini à l'aide d'un schéma. Un schéma définit la structure des documents dans une collection MongoDB, y compris les types de données et les validations pour chaque champ. Nous créons un modèle Mongoose à l'aide de la méthode "model" de Mongoose. Le modèle représente une collection MongoDB et peut être utilisé pour créer, lire, mettre à jour et supprimer des documents dans la collection. nous définissons un schéma pour une collection "Task" avec les champs "title", "description", "completed" et "createdAt". Chaque champ a un type de données spécifié (chaîne de caractères, booléen ou date) et des validations facultatives (par exemple, "required", "minlength" et "maxlength").

4- La base de données

Création d'un modèle de données :

Routes et requêtes

Afin de manipuler nos données, nous allons définir des routes pour chaque action avec chacune sa requête "mongoose".Nous allons respecter les normes d'API REST avec les différentes méthodes comme le POST, GET, PUT ou PATCH et DELETE. Puis à l'intérieur de chacune des routes générées par "express", nous allons exécuter des requêtes pour le CRUD comme "find", "findById", "save", "findByIdAndUpdate", "findByIdAndDelete".

5- Routes et requêtes

Mise en place du CRUD :

Pour récupérer toutes les tâches de la collection "tasks" : La méthode "get" de l'objet "express" exécute la route "/tasks" en premier argument, puis en second, une fonction anonyme est exécutée avec la méthode "find" qui renvoie une promesse qui se résout avec un tableau de documents "tasks" lorsque la requête est réussie, ou qui est rejetée avec une erreur si la requête échoue.

5- Routes et requêtes

Toutes les tâches de la collection :

Pour ajouter une tâche : On instancie la classe "Tasks" pour en obtenir un objet afin de l'hydrater avec les données envoyées dans le corps de la requête "req.body". Imaginons le passage des données via un formulaire. La méthode "save" du document "Tasks" est appelée pour enregistrer le nouveau document dans la base de données MongoDB. La méthode "save" renvoie une promesse qui se résout avec le document enregistré lorsque l'enregistrement est réussi, ou qui est rejetée avec une erreur si l'enregistrement échoue. On utilise la méthode "then" de la promesse pour envoyer une réponse au format JSON avec le document enregistré à l'aide de la méthode "json" de l'objet "res". Si la promesse est rejetée, une erreur sera levée et devra être gérée à l'aide d'un bloc "catch".

5- Routes et requêtes

Ajout d'une tâche :

3- Exercices

Retour sur VirtualSchool

Vous venez de terminer cette séquence de formation ! Bravo à présent c'est à vous de jouer ! Rendez-vous dans VirtualSchool pour poursuivre l'aventure... Au programme le exercice 03 intitulé : "Terminer l'API REST en JS"

Terminé !

Faite un ctrl ou cmd clic gauche sur l'url" "http://localhost:3000" Ci-dessous, voici ce que renvoie notre api dans le navigateur. Cela est normal, car aucune route n'est encore paramétrée. Nous verrons cela dans la suite du cours.