Exercice : Écrire des données

5 minutes

Tailwind Traders est impressionné par vos API, qui retournent des produits existants. Vous devez maintenant créer une API capable d’insérer et de mettre à jour des produits. Les données sont en général stockées dans une base de données, et peuvent contenir des millions d’enregistrements. Pour cette raison, vous devez utiliser des techniques qui limitent la quantité de données transmises à l’API et retournées par l’API.

Implémenter la prise en charge de l’écriture de données

Implémentez l’API CRUD sur la ressource products :

Ce premier projet nodejs-route\exercise-express-routing\reading-writing contient les fichiers des produits et du code d’application de démarrage. Il vous suffit de remplir les parties manquantes.

Cliquez avec le bouton droit sur le nom du dossier lecture-écriture, puis sélectionnez Ouvrir dans le terminal intégré.
Dans le terminal, exécutez la commande suivante pour l’installer :
```
npm install
```

Ouvrez app.js pour l’inspecter. Ce fichier doit se présenter comme suit :

 const express = require('express');
 const app = express();
 const port = 3000;

 app.use(express.json());

 let products = [];

 app.post('/products', function (req, res) {
   // implement
 });

 app.put('/products', function (req, res) {
   // implement
 });

 app.delete('/products/:id', function (req, res) {
   // implement
 });

 app.get('/products', (req, res) => {
   // implement
 });

 app.listen(port, () =>
   console.log(`Example app listening at http://localhost:${port}`),
 );

Le fichier app.js montre la structure d’un programme. Votre prochaine tâche est d’implémenter les itinéraires.

Implémenter l’itinéraire pour lire des données

Pour implémenter des itinéraires, ajoutez quelques instructions, puis testez-les. Continuez étape par étape jusqu’à obtenir une API totalement fonctionnelle. Effectuez vos changements dans le fichier app.js dans le répertoire reading-writing. Tous les fichiers qui commencent par client sont des applications clientes que vous pouvez utiliser pour tester votre API.

Pour prendre en charge la lecture à partir de l’API, recherchez la partie du code qui ressemble à ceci :
```
app.get('/products', (req, res) => {
  // implement
})
```
Remplacez-le par le code suivant :
```
app.get('/products', (req, res) => {
  res.json(products);
})
```
Pour vérifier que le code fonctionne, démarrez l’application Node en exécutant cette commande :
```
node app.js
```
Dans un terminal distinct pour le même dossier, reading-writing, exécutez la commande suivante. Il est important d’ouvrir deux terminaux, car vous devez exécuter le serveur et le client en même temps.
```
node client-get.js
```
Vous devez obtenir la sortie suivante :
```
Received data []
Connection closed
```
L’API répond avec un tableau vide, car vous n’y avez pas encore écrit de données. Changeons cette valeur.
Dans le premier terminal, sélectionnez Ctrl+C pour arrêter l’application.

Implémenter l’itinéraire pour écrire des données

Pour implémenter l’écriture de données dans une base de données en mémoire, recherchez ce code :
```
app.post('/products', function (req, res) {
   // implement
});
```
Remplacez-le par le code suivant :
```
app.post('/products', function(req, res) {
  const newProduct = { ...req.body, id: products.length + 1 }
  products = [ ...products, newProduct]
  res.json(newProduct);
});
```
Le code lit les données entrantes depuis req.body et crée un objet JavaScript à partir de celles-ci. Ensuite, il est ajouté au tableau de base de données en mémoire products. Enfin, le nouveau produit est retourné à l’utilisateur.
Pour tester le code, exécutez le programme serveur en exécutant cette commande :
```
node app.js
```
Dans un terminal distinct pour le même dossier, reading-writing, exécutez la commande suivante. Il est important d’ouvrir deux terminaux, car vous devez exécuter le serveur et le client en même temps.
```
node client-post.js
```
La sortie doit ressembler à ceci :
```
response {"name":"product","id":1}
Closed connection
```
Pour vérifier que les données sont écrites dans l’API, exécutez la commande suivante :
```
node client-get.js
```
Vous devez normalement voir la sortie suivante :
```
Received data [{"name":"product","id":1}]
Connection closed
```
Vos demandes jusqu’à présent :
- client-post.js:La réponse vous indique que lorsque vous avez exécuté client-post.js, vous avez écrit des données dans l’API.
- client-get.js: Vous avez exécuté client-get.js pour interroger l’API pour obtenir des données. L’API a répondu aux données que vous venez d’écrire.
Dans le premier terminal, sélectionnez Ctrl+C pour arrêter l’application.

Implémenter l’itinéraire pour mettre des données à jour

Pour implémenter la possibilité de mettre à jour vos données, localisez le code qui ressemble à ceci :

app.put('/products', function (req, res) {
  // implement
});

Remplacez-le par le code suivant :

app.put('/products', function(req, res) {
  let updatedProduct;
  products = products.map(p => {
    if (p.id === req.body.id) {
      updatedProduct = { ...p, ...req.body };
      return updatedProduct;
    }
    return p;
  })
  res.json(updatedProduct);
});

Le nouveau code localise l’enregistrement dans le tableau de base de données en mémoire products qui correspond à la propriété id, puis il le met à jour.

Pour tester le code, démarrez l’application serveur :
```
node app.js
```
Dans l’autre terminal, exécutez cette commande pour créer un enregistrement :
```
node client-post.js
```
Exécutez ensuite cette commande pour mettre à jour l’enregistrement qui vient d’être créé :
```
node client-put.js
```
Vous devez voir la mise à jour suivante dans le terminal :
```
response {"name":"product-updated","id":1}
Closed connection
```
Pour vérifier que la mise à jour fonctionne, exécutez la commande suivante :
```
node client-get.js
```
Vous devez voir cette mise à jour :
```
Received data [{"name":"product-updated","id":1}]
Connection closed
```
Dans le premier terminal, sélectionnez Ctrl+C pour arrêter l’application.

Implémenter l’itinéraire pour supprimer des données

Pour implémenter la suppression, recherchez la partie du code qui ressemble à ceci :
```
app.delete('/products/:id', function (req, res) {
  // implement
});
```
Remplacez-le par le code suivant :
```
app.delete('/products/:id', function(req, res) {
  const deletedProduct = products.find(p => p.id === +req.params.id);
  products = products.filter(p => p.id !== +req.params.id);
  res.json(deletedProduct);
});
```
Le nouveau code recherche le produit à supprimer. Ensuite, il filtre cet élément hors du tableau de base de données en mémoire products et retourne le produit supprimé.
Pour tester le code, démarrez l’application serveur :
```
node app.js
```
Dans un terminal distinct, exécutez cette commande pour créer un enregistrement :
```
node client-post.js
```
Exécutez cette commande pour supprimer l’enregistrement :
```
node client-delete.js
```
La sortie suivante s’affiche :
```
response {"name":"product","id":1}
Closed connection
```
Pour vérifier le code, exécutez cette commande :
```
node client-get.js
```
Elle doit produire cette sortie :
```
Received data []
Connection closed
```
Félicitations ! Vous avez implémenté une ressource products à l’aide d’actions CRUD complètes (actions de création, lecture, mise à jour et suppression).
Dans le premier terminal, sélectionnez Ctrl+C pour arrêter l’application.

Nettoyer le conteneur de développement

Une fois le projet terminé, vous souhaiterez peut-être nettoyer votre environnement de développement ou le ramener à son état normal.

Développement à distance (navigateur)
Développement local (Docker)

En supprimant l’environnement GitHub Codespaces, vous pouvez optimiser le nombre d’heures-cœurs gratuites auquel vous avez droit avec votre compte.

Important

Pour plus d’informations sur les droits de votre compte GitHub, consultez GitHub Codespaces mensuel inclus stockage et heures principales.

Connectez-vous au tableau de bord GitHub Codespaces (https://github.com/codespaces).
Localisez vos codespaces en cours d’exécution provenant du référentiel GitHub MicrosoftDocs/node-essentials.
Ouvrez le menu contextuel du codespace et sélectionnez Supprimer.

Continuer