Installer Postman et tester son API - Tutoriel React.js

Pour compléter ce chapitre, je vais vous faire découvrir cette application qui est Postman et qui va nous permettre de tester les routes que nous venons de mettre en place. On va découvrir ici en suivant ce lien, donc postman, product et tools, on va découvrir juste en dessous la section API client et on va sélectionner Learn more. Donc, c'est ici, sur la gauche, que vous allez sélectionner Installing and Updating pour découvrir les différentes options pour installer l'application Postman selon le système d'exploitation. Donc moi, je vais sélectionner Mac pour MacOS. Donc là, vous allez télécharger une copie pour installer Postman sur votre machine. Une fois que ce sera fait, donc vous allez ouvrir Postman. On va donc découvrir l'interface de cette application. C'est assez intuitif. Ce que l'on va avoir ici, c'est cette section qui va permettre de rajouter l'URL, c'est-à-dire le point de terminaison. Ensuite, on va également spécifier la méthode pour la requête qui sera soit GET soit POST. Donc, on va faire ce test. Pour l'instant, on n'aura pas de réponse puisqu'on n'aura pas encore connecté notre serveur. Donc, c'est ce que l'on va faire ici, on va s'assurer de lancer notre serveur avec npm start. Une fois que c'est fait, on retourne dans l'application Postman et on va de nouveau cliquer sur Send pour cette fois-ci avoir en retour l'ensemble des documents qui sont stockés dans la base de données, que l'on obtient en réponse sous forme de tableau. Voilà la liste complète des documents qui sont déjà stockés dans la base de données. Ce que l'on va faire ensuite, c'est tester la méthode POST. C'est la raison pour laquelle nous allons utiliser cette application Postman qui va nous permettre de tester également la méthode POST en s'assurant d'accompagner notre requête d'un objet. Dans le retour dans le code source, nous allons faire quelques corrections ici puisque là, pour l'instant, dans le code source, on envoie justement un objet uniquement vide ici même, donc on va corriger. Ce que l'on va faire pour l'instant, c'est juste rajouter un objet qui va servir d'exemple. Par exemple, en aura Title. On pourra dire de façon générique title pour la valeur. Ensuite, on aura également la clé content qui, pour l'instant, on pourra lire « content ... ». Et ensuite, on va remplacer cet objet vide avec objet. Et on va faire un premier test qui va servir à rajouter un tout nouvel objet et on aura en réponse ici... Lorsque l'on fait une requête avec insertOne avec MongoDB, il nous retourne un objet avec en premier une valeur qui sera un booléen et l'id qui aura été automatiquement généré suite à la requête de rajouter une nouvelle valeur, un nouveau document à la base de données. Et si on retourne dans l'interface de MongoDB Atlas, on va pouvoir retrouver la liste des documents, y compris le tout dernier document que l'on vient d'insérer que l'on va trouver juste en dessous, qui correspond à l'objet que nous avons définis dans notre code source. Donc, bien évidemment, ce ne sera pas la manière dont on va procéder. On va donc permettre de faire accompagner notre requête d'un payload, c'est-à-dire un body, et à la place, ce que l'on va utiliser, ce sera requestBody. Donc, je vais remplacer ici avec req.body. On va faire un test qui sera différent cette fois-ci. On retourne dans Postman et on va aller dans cette section qui est Body. Donc là, pour l'instant, j'ai déjà du contenu, je vais remplacer ici avec title. Et là, je vais faire new title. Et pour content, je vais mettre new content, quelque chose de vraiment basique. Ce que je vais tester, c'est tout d'abord la requête, que ça fonctionne bien. Et la catégorie, il n'y a pas de clé catégorie pour cet exemple. Et on n'oublie pas de fermer avec les guillemets. Voilà, donc on va tester cette requête de nouveau en permettant cette fois-ci de faire accompagner notre requête d'un payload, d'un body. Je faire Send. Ça ralentit un petit peu, pourquoi ? Puisque là, on sera obligé de déterminer le format de l'objet, qu'on va voir à la suite. Donc on va retourner aussi dans notre application pour voir les erreurs qui auraient pu se produire. Donc, ce qui va se passer ici, c'est que l'on va préciser aussi que le format d'objet qui sera transmis à la base de données, ce sera au format JSON. Donc, on va ici rajouter ce que l'on utilisait auparavant. C'était body parser, pour s'assurer que le format d'objet était en format JSON. Donc ici, on va préciser express.json pour s'assurer que ce soit du format JSON, comme ici, préciser le format d'objet sera du JSON. Donc là, on va préciser cela, donc, s'assurer que notre application express utilise bien le format JSON pour envoyer les bodies en accompagnant les requêtes. Et donc là, on va relancer notre serveur. Et de nouveau, tester notre requête. Il n'a pas pu obtenir de réponse. Voilà, donc, il fonctionne très bien, donc, on avait juste à rajouter ici express.json que vous allez rajouter juste au-dessus de dotenv.config, par exemple, ce qui permettra de définir le format qui accompagne la requête HTTP, donc, qui doit être du JSON. Et donc là, on a pu avec succès rajouter un nouveau document à la base de données. On retourne dans l'interface de MongoDB Atlas pour vérifier que cette fois-ci, on ait bien un nouveau document qui soit rajouté, et qui aura automatiquement généré un nouvel id, qu'on va trouver juste en dessous, avec new title et new content. Voilà qui est fait. Donc, on est prêt donc avec notre nouvelle API. On a pu tester avec succès les différentes routes que nous avons mis en place. À présent, nous sommes prêts pour utiliser cette interface de programmation applicative pour pouvoir servir d'interface entre notre base de données et notre application client, ce qui sera la prochaine étape.