Construire un Clone Postman: Ajout de PUT, PATCH, et DELETE

Mise à jour de la liste déroulante et des options de l'application

Tim commence par montrer la configuration de l'application. Actuellement, le menu déroulant permet de sélectionner GET et POST. Pour construire un clone de Postman pleinement fonctionnel, nous devons ajouter PUT, PATCH, et DELETE à la liste des options.

Dans les propriétés, Tim met à jour les éléments du menu déroulant pour que les cinq verbes HTTP apparaissent comme choix : GET, POST, PUT, PATCH, DELETE. Il souligne que la sélection dans le menu déroulant doit correspondre à l'Enum utilisé dans le backend, qui définit les actions HTTP valides pour le client API. Cela garantit que lorsqu'un utilisateur sélectionne une option dans le menu déroulant, le processus la mappe correctement à la logique du code sous-jacente.

Associer la sélection de l'utilisateur aux actions HTTP

Tim explique comment l'application convertit la sélection de l'utilisateur dans le menu déroulant en une méthode de requête HTTP spécifique. Le système commence par valider l'URL saisie dans l'entrée HTML du formulaire, puis analyse le choix sélectionné en tant qu'action HTTP en JavaScript pur.

Cette configuration permet à l'application de passer trois informations clés à la méthode CallApiAsync :

1. L'URL à partir de l'entrée HTML du formulaire.

2. Le contenu du corps, généralement en JSON, saisi via une zone JavaScript de formulaire ou un éditeur de texte JSON.

3. L'action sélectionnée correspondant au verbe HTTP.

Cela permet au clone de Postman de traiter différents types de requêtes et de renvoyer le JavaScript de réponse correct à afficher dans la section HTML de réponse.

Implémentation des méthodes PUT, PATCH, et DELETE

Tim démontre le code nécessaire pour gérer PUT, PATCH, et DELETE :

• PUT : Met à jour un enregistrement complet. Le client API envoie un objet JSON complet, écrasant tous les champs pour l'ID donné.

• PATCH : Met à jour uniquement certains champs. Ceci est utile lorsque vous souhaitez modifier une partie de l'enregistrement sans affecter les autres données.

• DELETE : Supprime entièrement un enregistrement. Il nécessite uniquement l'URL et l'ID ; aucun contenu n'est envoyé.

Tim note que DELETE est légèrement différent car il ne renvoie pas de contenu, juste une confirmation de succès. Ces changements sont implémentés entièrement en JavaScript pur, modifiant la méthode CallApiAsync pour gérer tous les choix et actions.

Test des fonctionnalités

Tim souligne l'importance de vérifier que chaque méthode HTTP fonctionne comme prévu.

1. GET : Tim sélectionne GET dans le menu déroulant et récupère les publications. Le client API retourne le JavaScript de réponse correct, affichant les données dans la section HTML de réponse.

2. PUT (5:01) : Pour PUT, Tim met à jour un enregistrement complet avec ID, titre, corps, et ID utilisateur. Il montre que le JSON retourné correspond aux données soumises, confirmant que le processus fonctionne correctement.

3. PATCH (6:10) : Tim démontre PATCH en mettant à jour uniquement le titre d'un enregistrement. Le clone de Postman laisse les autres champs intacts, prouvant qu'il peut gérer des mises à jour partielles efficacement.

4. DELETE (7:32) : DELETE nécessite uniquement l'ID de l'enregistrement. Tim exécute la requête et confirme le succès via des crochets vides, indiquant que l'enregistrement a été supprimé sans retourner de données inutiles.

Par ce processus, Tim illustre comment un clone de Postman peut réaliser toutes les opérations CRUD : Create (POST), Read (GET), Update (PUT/PATCH), et Delete (DELETE).

Résumé des changements et configuration

Tim résume les étapes clés et les modifications de code nécessaires pour améliorer le client API :

• Mettre à jour le menu déroulant pour inclure tous les verbes HTTP (options).

• S'assurer que l'Enum dans le backend correspond à chaque verbe afin que la sélection soit adéquatement mappée à une méthode.

• Modifier la méthode CallApiAsync en JavaScript pour gérer les verbes supplémentaires et traiter les données de manière appropriée.

Il note une amélioration facultative : pour DELETE, vous pourriez retourner un simple message de succès au lieu d'une sortie sérialisée, simplifiant ainsi l'expérience utilisateur.

Statut actuel et fonctionnalités du clone de Postman

À ce stade, le clone de Postman est pleinement fonctionnel avec les cinq verbes HTTP. Les utilisateurs peuvent entrer une URL, soumettre des données JSON via un éditeur JavaScript de formulaire, et recevoir des réponses dans l'affichage HTML de réponse.

Cependant, Tim souligne quelques fonctionnalités supplémentaires qui pourraient enrichir l'application :

• Support pour les requêtes XML.

• Gestion de l'authentification.

• Ajout d'en-têtes personnalisés.

Ce sont des opportunités pour les développeurs d'étendre le clone et de le rendre plus versatile.

Conseils de Tim pour améliorer votre propre Postman

Tim met les spectateurs au défi de continuer à construire et à améliorer leur clone de Postman :

• Ajouter des interfaces utilisateur Web en utilisant des frameworks comme WPF, Blazor, ou HTML/JavaScript pur.

• Inclure des APIs supplémentaires et gérer différents formats de données.

• Tester différentes options dans le menu déroulant et étendre les fonctionnalités pour une richesse fonctionnelle accrue.

• Partager votre projet sur GitHub pour montrer le repo, le code, et le processus aux employeurs potentiels.

Il insiste sur le fait que la pratique est essentielle : construire, tester, et faire évoluer votre projet vous aide à comprendre les APIs et les concepts de programmation en profondeur.

Conclusion

Tim clôt la vidéo en encourageant l'expérimentation. Il apprécie de bricoler avec des applications de test et insiste sur le fait que les développeurs s'améliorent grâce à une itération répétée.

Bien que le code GitHub pour la série ne soit pas immédiatement fourni, il pourrait être disponible dans le Dev Pass à l'avenir. Pour l'instant, l'objectif est de laisser les apprenants construire leur propre clone de Postman à partir de zéro, en pratiquant la configuration, le processus et l'implémentation du code tout en rendant le projet unique.

En suivant l'approche de Tim, les développeurs peuvent créer un client API fonctionnel, comprendre les méthodes HTTP, et produire un projet prêt pour un portfolio qui démontre des compétences pratiques avec HTML de formulaire, JavaScript de réponse, et traitement JSON.