Entendiendo los Verbos HTTP a través de Actualizaciones de UI

La Importancia de Múltiples Verbos HTTP

A las 1:17, Tim explica por qué un clon funcional de Postman debe soportar más que solo solicitudes GET. Mientras que el método GET se usa para recuperar datos o información de un servidor sin afectar el estado del servidor, otros métodos HTTP como POST, PUT, y PATCH modifican un recurso o crean un recurso nuevo.

Por ejemplo:

• El método POST envía datos de solicitud al servidor para crear un nuevo recurso en una ubicación especificada.

• El método PUT reemplaza el recurso completo en la ubicación especificada, haciéndolo una solicitud idempotente.

• El método PATCH permite modificaciones parciales a un recurso existente.

• El método DELETE elimina un recurso especificado.

Tim señala que soportar correctamente estos métodos de solicitud HTTP asegura que el clon de Postman pueda manejar APIs REST, APIs RESTful, y otros servicios web con datos de solicitud realistas y comportamiento del cuerpo de respuesta.

Agregando el Desplegable de Verbo HTTP a la UI

Tim comienza mejorando la UI redimensionando el cuadro de entrada API para hacer espacio para un desplegable (caja combinada) para seleccionar verbos HTTP. Lo renombra Selección de verbo HTTP y codifica GET y POST por ahora (2:42).

Tim explica por qué esto es suficiente: los verbos HTTP están estandarizados en la especificación HTTP, y rara vez cambian. Usar una lista estática evita una complejidad innecesaria y asegura un rendimiento rápido, especialmente ya que los verbos como TRACE, CONNECT, y OPTIONS raramente se requieren en un clon básico de Postman.

Configurando el Comportamiento del Desplegable

Un detalle clave de la UI, Tim explica, es cambiar el estilo del desplegable a lista desplegable para que los usuarios solo puedan seleccionar métodos de solicitud HTTP válidos (4:47). Esto previene errores y asegura que la aplicación interprete correctamente el verbo seleccionado, ya sea una solicitud GET, una solicitud POST, o más tarde una solicitud PUT, PATCH, o DELETE.

También ajusta el ancho del desplegable para acomodar verbos más largos, como DELETE o PATCH, sin romper el diseño (5:51-7:27). Esta atención al detalle asegura una interfaz de aplicación web profesional que es tanto autoexplicativa como funcional.

Presentando las Pestañas de Cuerpo y Resultados

A las 7:57, Tim agrega un control de pestañas para manejar la entrada del cuerpo de solicitud y respuestas de API. Esto separa el cuerpo y los resultados en pestañas distintas:

• Pestaña de Cuerpo: Permite al usuario teclear datos JSON para enviar datos al servidor mediante un método POST o una solicitud PUT.

• Pestaña de Resultados: Muestra el cuerpo de respuesta devuelto por el servidor, incluyendo códigos de estado HTTP y cualquier dato devuelto.

Este diseño asegura que los datos sensibles en el cuerpo de la solicitud estén claramente separados de la información recuperada, y respalda el manejo limpio de múltiples métodos HTTP para APIs RESTful (8:00).

Diferenciando Cuadros de Texto de Entrada y Salida

Tim enfatiza la distinción entre el cuadro de texto de cuerpo y el cuadro de texto de resultados (12:16). El texto de cuerpo es editable para que los usuarios puedan escribir datos de solicitud, mientras que el texto de resultados es de solo lectura para prevenir la modificación accidental de la respuesta del servidor.

También renombra la pestaña de Resultados de "Salida" a Resultados para mejorar la claridad. Esta simple denominación hace la lista de verbos HTTP más intuitiva, especialmente al manejar múltiples solicitudes idénticas o métodos idempotentes como GET, PUT y DELETE (12:44).

Pruebas de Solicitudes GET

Tim demuestra que la UI funciona correctamente con solicitudes GET. Al pegar una URL y seleccionar GET, el usuario recupera datos del servidor, que aparecen en la pestaña de Resultados. Este proceso refleja cómo las aplicaciones web interactúan con una página web o servicio web para recuperar información o verificar si un recurso existe (13:22).

Nota que múltiples solicitudes GET o repetir la misma solicitud GET recuperarán la misma información si el estado del recurso no ha cambiado, destacando la propiedad de método seguro de GET (14:00).

Limpieza y Configuración de Predeterminados

A las 14:34, Tim limpia el desplegable y establece la selección predeterminada en GET (16:05). Esto asegura que los usuarios vean inmediatamente un método de solicitud HTTP válido, evitando confusión.

Además, cuando el usuario hace clic en "Ir", la aplicación cambia automáticamente a la pestaña de Resultados, proporcionando una experiencia fluida. Esto demuestra el manejo de escenarios de solicitud múltiple y asegura que múltiples solicitudes idénticas produzcan cuerpos de respuesta consistentes (17:02).

Preparándose para Solicitudes POST

Tim explica que aunque la UI ahora soporta GET y POST, la funcionalidad actual para enviar datos mediante un método POST aún necesita implementación. La pestaña de Cuerpo permite a los usuarios ingresar datos de solicitud, simulando solicitudes POST, solicitudes PUT, o solicitudes PATCH para modificar un recurso existente o crear un recurso nuevo en una ubicación especificada.

Anima a los estudiantes a usar esto como un desafío de práctica, experimentando con cuerpos de solicitud JSON y probando contra servicios como JSONPlaceholder, que soporta solicitudes GET y POST para la práctica (20:11).

Los puntos clave

El video de Tim Corey resalta la importancia de entender los verbos HTTP y los métodos de solicitud HTTP en aplicaciones web:

• Método GET: Recuperar datos de un servidor sin cambiar el estado del recurso.

• Método POST: Enviar datos al servidor para crear un nuevo recurso.

• Método PUT: Reemplazar el recurso completo (solicitud idempotente).

• Método PATCH: Aplicar modificaciones parciales a un recurso existente.

• Método DELETE: Eliminar un recurso especificado.

• Métodos HEAD, OPTIONS, TRACE, CONNECT: Proveer metadatos, opciones de comunicación, o capacidades de prueba de bucle de mensajes.

El enfoque de Tim muestra que una UI bien diseñada hace que la lista de verbos HTTP sea intuitiva, respalda tanto métodos seguros como métodos idempotentes, y prepara la app para manejar APIs REST y APIs RESTful de manera confiable. Al separar el cuerpo de la solicitud, los resultados, y la selección de verbos, el clon de Postman se convierte en una herramienta práctica para probar servicios web y entender el protocolo de transferencia de hipertexto en aplicaciones del mundo real.