Capítulo 16 de 20 · 200 ideas de apps web para practicar con agentes de IA
Herramientas para desarrollo web (151-160)
Diez aplicaciones web de herramientas para desarrollo web con su UI y un reto de implementación para el agente.
| N.º | Aplicación | Nivel | Descripción | UI que implementar y probar | Reto para el agente |
|---|---|---|---|---|---|
| 151 | Cliente de API | A | Permite construir solicitudes y examinar respuestas. | Editor de URL, parámetros y cuerpo, pestañas de respuesta e historial. | Gestionar cancelación, tiempos de espera y restricciones del navegador. |
| 152 | Inspector de JSON | I | Facilita validar, editar y navegar estructuras JSON. | Editor, árbol desplegable, buscador y panel de errores. | Indicar ubicación del error y manejar árboles profundos. |
| 153 | Probador de expresiones regulares | I | Muestra coincidencias de patrones sobre texto editable. | Campos de patrón y texto, opciones, resaltado y grupos capturados. | Gestionar patrones inválidos y limitar trabajo costoso. |
| 154 | Comparador de versiones de código | I | Revisa diferencias entre dos fragmentos de código. | Editores con sintaxis, diferencias por línea y navegación entre cambios. | Preservar espacios y manejar líneas muy largas. |
| 155 | Constructor visual de formularios | A | Diseña formularios y prueba sus reglas de validación. | Paleta de campos, lienzo, inspector, vista previa y respuestas. | Implementar campos condicionales sin conservar valores ocultos indebidamente. |
| 156 | Catálogo de fragmentos de código | B | Guarda ejemplos reutilizables con contexto y lenguaje. | Buscador, etiquetas, editor con sintaxis y botón de copia. | Copiar contenido exacto y filtrar por varios atributos. |
| 157 | Probador de diseños adaptables | I | Compara una página de ejemplo en tamaños de pantalla configurables. | Paneles de vista, controles de dimensiones y presets de dispositivos. | Sincronizar navegación entre paneles y mostrar restricciones de incrustación. |
| 158 | Monitor de servicios simulado | I | Presenta disponibilidad y eventos de varios servicios. | Panel de estados, gráficos, incidentes y detalle de servicio. | Simular cambios periódicos y distinguir fallo de falta de datos. |
| 159 | Inspector de almacenamiento local | I | Permite explorar datos guardados por la propia aplicación. | Tabla de claves, editor, búsqueda y comparación de valores. | Validar cambios y permitir restaurar una copia previa. |
| 160 | Gestor de casos de prueba | I | Organiza escenarios manuales y sus ejecuciones. | Árbol de suites, editor de pasos, pantalla de ejecución y resultados. | Conservar la versión del caso usada en cada ejecución. |