Construye un Clon de Postman: Añadiendo PUT, PATCH y DELETE

Actualización del menú desplegable y opciones en la aplicación

Tim comienza mostrando la configuración de la aplicación. Actualmente, el menú desplegable permite seleccionar GET y POST. Para construir un clon de Postman completamente funcional, necesitamos agregar PUT, PATCH y DELETE a la lista de opciones.

En propiedades, Tim actualiza los elementos del menú desplegable para que los cinco verbos HTTP aparezcan como opciones: GET, POST, PUT, PATCH, DELETE. Él enfatiza que la selección del menú desplegable debe coincidir con el Enum utilizado en el backend, que define acciones HTTP válidas para el cliente API. Esto asegura que cuando un usuario selecciona una opción del menú desplegable, el proceso lo mapea correctamente a la lógica de código subyacente.

Mapeo de la selección del usuario a acciones HTTP

Tim explica cómo la aplicación convierte la selección del usuario en el menú desplegable en un método de solicitud HTTP específico. El sistema primero valida la URL ingresada en el formulario HTML, luego analiza la opción seleccionada como una acción HTTP en JavaScript simple.

Esta configuración permite que la aplicación pase tres piezas clave de información al método CallApiAsync:

1. La URL del formulario HTML.

2. El contenido del cuerpo, generalmente en JSON, ingresado a través de un área de JavaScript de formulario o un editor de texto JSON.

3. La acción seleccionada correspondiente al verbo HTTP.

Esto asegura que el clon de Postman pueda procesar diferentes tipos de solicitudes y devolver el JavaScript de respuesta correcto para mostrar en la sección de respuesta HTML.

Implementación de métodos PUT, PATCH y DELETE

Tim demuestra el código necesario para manejar PUT, PATCH y DELETE:

• PUT: Actualiza un registro completo. El cliente API envía un objeto JSON completo, sobrescribiendo todos los campos para el ID dado.

• PATCH: Actualiza solo campos específicos. Esto es útil cuando se desea modificar parte de un registro sin afectar otros datos.

• DELETE: Elimina un registro por completo. Requiere solo la URL y el ID; no se envía contenido.

Tim señala que DELETE es ligeramente diferente porque no devuelve contenido, solo una confirmación de éxito. Estos cambios se implementan completamente en JavaScript simple, modificando el método CallApiAsync para manejar todas las opciones y acciones.

Pruebas de las características

Tim enfatiza la importancia de verificar que cada método HTTP funcione como se espera.

1. GET: Tim selecciona GET en el menú desplegable y obtiene publicaciones. El cliente API devuelve el JavaScript de respuesta correcto, mostrando los datos en la sección de respuesta HTML.

2. PUT (5:01): Para PUT, Tim actualiza un registro completo con ID, título, cuerpo y ID de usuario. Él muestra que el JSON devuelto coincide con los datos enviados, confirmando que el proceso funciona correctamente.

3. PATCH (6:10): Tim demuestra PATCH actualizando solo el título de un registro. El clon de Postman deja intactos otros campos, demostrando que puede manejar actualizaciones parciales de manera efectiva.

4. DELETE (7:32): DELETE requiere solo el ID del registro. Tim ejecuta la solicitud y confirma el éxito a través de corchetes vacíos, indicando que el registro fue eliminado sin devolver datos innecesarios.

A través de este proceso, Tim ilustra cómo un clon de Postman puede realizar todas las operaciones CRUD: Crear (POST), Leer (GET), Actualizar (PUT/PATCH) y Eliminar (DELETE).

Resumen de cambios y configuración

Tim resume los pasos clave y cambios de código necesarios para mejorar el cliente API:

• Actualizar el menú desplegable para incluir todos los verbos HTTP (opciones).

• Asegurarse de que el Enum en el backend coincida con cada verbo para que la selección se mapee correctamente a un método.

• Modificar el método CallApiAsync en JavaScript para manejar los verbos adicionales y procesar datos adecuadamente.

Él menciona una mejora opcional: para DELETE, podrías devolver un simple mensaje de éxito en lugar de una salida serializada, agilizando la experiencia del usuario.

Estado actual y características del clon de Postman

En este punto, el clon de Postman es completamente funcional con los cinco verbos HTTP. Los usuarios pueden ingresar una URL, enviar datos JSON a través de un editor JavaScript de formulario, y recibir respuestas en la pantalla de respuesta HTML.

Sin embargo, Tim señala algunas características adicionales que podrían mejorar la aplicación:

• Soporte para solicitudes XML.

• Manejo de autenticación.

• Adición de cabeceras personalizadas.

Estas son oportunidades para que los desarrolladores amplíen el clon y lo hagan más versátil.

Consejos de Tim para mejorar tu propio Postman

Tim desafía a los espectadores a continuar construyendo y mejorando su clon de Postman:

• Añadir interfaces de usuario web usando frameworks como WPF, Blazor, o HTML/JavaScript simple.

• Incluir APIs adicionales y manejar diferentes formatos de datos.

• Probar diferentes opciones en el menú desplegable y expandir las características para una funcionalidad más rica.

• Compartir tu proyecto en GitHub para mostrar el repositorio, el código y el proceso a empleadores potenciales.

Él enfatiza que la práctica es clave: construir, probar e iterar en tu proyecto te ayuda a comprender las APIs y los conceptos de programación en profundidad.

Conclusión

Tim concluye el video animando a la experimentación. Él disfruta jugando con aplicaciones de prueba y enfatiza que los desarrolladores mejoran mediante la iteración repetida.

Aunque el código de GitHub para la serie no se proporciona inmediatamente, puede estar disponible en el Dev Pass en el futuro. Por ahora, el objetivo es permitir que los aprendices construyan su propio clon de Postman desde cero, practicando configuración, proceso e implementación de código mientras hacen el proyecto único.

Siguiendo el enfoque de Tim, los desarrolladores pueden crear un cliente API funcional, entender los métodos HTTP y producir un proyecto listo para el portafolio que demuestre habilidades prácticas con HTML de formularios, JavaScript de respuesta y procesamiento JSON.