Comprendre les verbes HTTP à travers les mises à jour de l'UI

L'importance de plusieurs verbes HTTP

À 1:17, Tim explique pourquoi un clone de Postman fonctionnel doit prendre en charge plus que de simples requêtes GET. Alors qu'une méthode GET est utilisée pour récupérer des données ou des informations d'un serveur sans affecter l'état du serveur, d'autres méthodes HTTP comme POST, PUT et PATCH modifient une ressource ou créent une nouvelle ressource.

Par exemple :

• La méthode POST envoie des données de requête au serveur pour créer une nouvelle ressource à un emplacement spécifié.

• La méthode PUT remplace la ressource entière à l'emplacement spécifié, ce qui en fait une requête idempotente.

• La méthode PATCH permet des modifications partielles à une ressource existante.

• La méthode DELETE supprime une ressource spécifiée.

Tim note que prendre correctement en charge ces méthodes de requête HTTP garantit que le clone de Postman peut gérer les APIs REST, RESTful et d'autres services web avec des données de requête réalistes et un comportement de corps de réponse.

Ajout du menu déroulant des verbes HTTP à l'interface utilisateur

Tim commence à améliorer l'interface utilisateur en redimensionnant la boîte de saisie API pour faire de la place à un menu déroulant (boîte combo) pour sélectionner les verbes HTTP. Il le renomme sélection de verbe HTTP et code en dur GET et POST pour le moment (2:42).

Tim explique pourquoi cela est suffisant : les verbes HTTP sont standardisés dans la spécification HTTP et changent rarement. Utiliser une liste statique évite une complexité inutile et assure des performances rapides, d'autant plus que des verbes comme TRACE, CONNECT, et OPTIONS sont rarement requis dans un clone de Postman de base.

Configuration du comportement du menu déroulant

Un détail clé de l'interface utilisateur, Tim explique, est de changer le style du menu déroulant en une liste déroulante, de sorte que les utilisateurs ne puissent sélectionner que des méthodes de requête HTTP valides (4:47). Cela prévient les erreurs et garantit que l'application interprète correctement le verbe sélectionné, qu'il s'agisse d'une requête GET, d'une requête POST ou plus tard d'une requête PUT, PATCH, ou DELETE.

Il ajuste également la largeur du menu déroulant pour accueillir des verbes plus longs, comme DELETE ou PATCH, sans casser la mise en page (5:51–7:27). Cette attention au détail assure une interface utilisateur d'application web professionnelle à la fois explicite et fonctionnelle.

Introduction des onglets Body et Results

À 7:57, Tim ajoute un contrôleur d'onglets pour gérer les entrées de corps de requête et les réponses API. Cela sépare le corps et les résultats dans des onglets distincts :

• Onglet Body : Permet à l'utilisateur de taper des données JSON pour envoyer des données au serveur via une méthode POST ou une requête PUT.

• Onglet Results : Affiche le corps de la réponse retourné par le serveur, y compris les codes de statut HTTP et toutes les données retournées.

Cette conception assure que les données sensibles dans le corps de la requête sont clairement séparées des informations récupérées, et elle supporte la gestion propre de plusieurs méthodes HTTP pour les APIs RESTful (8:00).

Différencier les zones de texte d'entrée et de sortie

Tim souligne la distinction entre la zone de texte du corps et la zone de texte des résultats (12:16). Le texte du corps est modifiable pour que les utilisateurs puissent taper des données de requête, tandis que le texte des résultats est en lecture seule pour prévenir toute modification accidentelle de la réponse du serveur.

Il renomme également l'onglet Results de " Sortie " à Results pour améliorer la clarté. Cette simple dénomination rend la liste des verbes HTTP plus intuitive, surtout lorsqu'il s'agit de gérer des requêtes multiples identiques ou des méthodes idempotentes telles que GET, PUT et DELETE (12:44).

Tester les requêtes GET

Tim démontre que l'interface utilisateur fonctionne correctement avec les requêtes GET. En collant une URL et en sélectionnant GET, l'utilisateur récupère les données du serveur, qui apparaissent dans l'onglet Results. Ce processus reflète comment les applications web interagissent avec une page web ou un service web pour récupérer des informations ou vérifier si une ressource existe (13:22).

Il note que plusieurs requêtes GET ou répéter la même requête GET récupéreront les mêmes informations si l'état de la ressource n'a pas changé, soulignant la propriété de méthode sûre de GET (14:00).

Nettoyage et définition des valeurs par défaut

À 14:34, Tim nettoie le menu déroulant et définit la sélection par défaut sur GET (16:05). Cela garantit que les utilisateurs voient immédiatement une méthode de requête HTTP valide, évitant toute confusion.

De plus, lorsque l'utilisateur clique sur "Go", l'application passe automatiquement à l'onglet Results, offrant une expérience fluide. Cela démontre le traitement des scénarios de demandes multiples et assure que les demandes identiques multiples produisent des corps de réponse cohérents (17:02).

Préparation des Requêtes POST

Tim explique que bien que l'interface utilisateur prenne désormais en charge GET et POST, la fonctionnalité réelle pour envoyer des données via une méthode POST doit encore être implémentée. L'onglet Body permet aux utilisateurs d'entrer des données de requête, simulant des requêtes POST, des requêtes PUT ou des requêtes PATCH pour modifier une ressource existante ou créer une nouvelle ressource à un emplacement spécifié.

Il encourage les apprenants à utiliser cela comme un défi pratique, en expérimentant avec des corps de requête JSON et en testant contre des services comme JSONPlaceholder, qui prend en charge les requêtes GET et POST pour la pratique (20:11).

Les points clés à retenir

La vidéo de Tim Corey souligne l'importance de comprendre les verbes HTTP et les méthodes de requête HTTP dans les applications web :

• méthode GET : Récupérer des données d'un serveur sans changer l'état de la ressource.

• méthode POST : Envoyer des données au serveur pour créer une nouvelle ressource.

• méthode PUT : Remplacer la ressource entière (requête idempotente).

• Méthode PATCH : appliquer des modifications partielles à une ressource existante.

• Méthode DELETE : supprimer une ressource spécifiée.

• Méthodes HEAD, OPTIONS, TRACE, CONNECT : fournir des métadonnées, des options de communication, ou des capacités de test de boucle de message.

L'approche de Tim montre qu'une interface bien conçue rend la liste des verbes HTTP intuitive, soutient à la fois les méthodes sûres et les méthodes idempotentes, et prépare l'application à gérer les API REST et les API RESTful de manière fiable. En séparant le corps de la demande, les résultats et la sélection de verbe, le clone de Postman devient un outil pratique pour tester les services web et comprendre le protocole de transfert hypertexte dans des applications concrètes.