Simulador de API Mock (Cliente) Online

Guía de Uso del Simulador de API Mock

1. Definir un Mock:
   • Haz clic en el botón " Añadir Nuevo Mock". Se abrirá un formulario modal.
   • Método HTTP: Selecciona el método (GET, POST, PUT, etc.) para el que este mock responderá.
   • Path (URL): Ingresa la ruta de la API que quieres simular. Puedes usar parámetros dinámicos como /api/users/:id. La herramienta los reconocerá.
   • Código de Estado HTTP: Introduce el código de estado que la API simulada debe devolver (ej. 200, 404, 500).
   • Cabeceras Respuesta: Escribe las cabeceras de respuesta, una por línea, en formato Nombre-Cabecera: Valor (ej. Content-Type: application/json).
   • Cuerpo Respuesta: Pega el cuerpo de la respuesta que la API simulada debe devolver (ej. un objeto JSON, HTML, texto plano).
   • Retraso (ms): Opcionalmente, introduce un retraso en milisegundos para simular la latencia de red.
   • Haz clic en " Guardar Mock".
2. Gestionar Mocks Definidos:
   • La lista de tus mocks aparecerá en el panel "Mocks Definidos".
   • Puedes editar (✏️) o eliminar (🗑️) un mock usando los botones junto a cada entrada.
3. Probar un Mock:
   • En el panel "Probar Mock", ingresa la URL (path) que quieres probar en el campo "URL (Path)".
   • Selecciona el método HTTP correspondiente.
   • Opcionalmente, añade cabeceras o un cuerpo para la petición de prueba.
   • Haz clic en " Enviar Petición Mock".
4. Ver la Respuesta Simulada: Los resultados de tu petición de prueba aparecerán en el panel "Respuesta Simulada", mostrando el código de estado, las cabeceras y el cuerpo que definiste para el mock coincidente.
5. Importar/Exportar Mocks:
   • Usa " Exportar JSON" para guardar todas tus definiciones de mocks en un archivo.
   • Usa " Importar JSON" para cargar mocks desde un archivo previamente exportado.
6. Pantalla Completa: Para una mejor visualización y gestión de tus mocks y pruebas, puedes usar el botón "Pantalla Completa" (o la tecla 'F'). Presiona 'Esc' o el botón de nuevo para salir.

Características Clave del Simulador API

• Definición Flexible de Mocks: Crea mocks para cualquier método HTTP (GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD) y paths URL, incluyendo soporte para parámetros dinámicos en la ruta (ej. /items/:id).
• Respuestas Personalizables: Configura el código de estado HTTP, las cabeceras de respuesta y el cuerpo de la respuesta (JSON, XML, texto, etc.) para cada mock.
• Simulación de Retraso (Delay): Añade un retraso en milisegundos a tus mocks para simular condiciones de red variables.
• Panel de Pruebas Integrado: Envía peticiones simuladas a tus mocks definidos directamente desde la herramienta.
• Visualizador Detallado de Respuestas: Observa claramente el estado, las cabeceras y el cuerpo de la respuesta simulada, con formato JSON automático para el cuerpo si aplica.
• Gestión de Mocks: Lista, edita y elimina tus mocks fácilmente. Un contador te indica cuántos mocks tienes definidos.
• Importación y Exportación (JSON): Guarda tus conjuntos de mocks en un archivo JSON para backups o para compartirlos, e importa definiciones existentes.
• Almacenamiento Local: Todas tus definiciones de mocks se guardan en el almacenamiento local de tu navegador, asegurando privacidad y acceso rápido.
• Modo Pantalla Completa: Trabaja con tus mocks y pruebas en una interfaz ampliada para mayor comodidad.
• Herramienta Gratuita y Online: Una herramienta Optikit para API testing y desarrollo frontend, sin costos ni necesidad de instalaciones complejas.

Preguntas Frecuentes sobre el Simulador API Mock

¿Cómo puedo simular una API REST para mis pruebas de frontend?

Con esta herramienta de simulación API, puedes definir un "mock" para cada endpoint de tu API REST. Especifica el método (GET, POST, etc.), la ruta (path), el código de estado esperado (200, 401, etc.), y el cuerpo de la respuesta JSON (o el formato que necesites). Luego, tu aplicación frontend puede hacer llamadas a estas rutas simuladas. Es ideal para el desarrollo frontend sin backend.

¿Qué significa "mockear una API" y por qué es útil?

Mockear una API significa crear una versión simulada de ella que devuelve respuestas predefinidas. Es útil porque permite a los desarrolladores frontend construir y probar la interfaz de usuario sin depender de que el backend esté listo o disponible. También permite simular fácilmente escenarios de error o diferentes tipos de datos, lo cual es crucial para las pruebas de API.

¿Este simulador API online guarda mis definiciones de mocks?

Sí, todas las definiciones de mocks que creas se guardan en el almacenamiento local (LocalStorage) de tu navegador. Esto significa que persistirán entre sesiones en el mismo navegador. Sin embargo, no se comparten entre navegadores ni se guardan en nuestros servidores. Para ello, usa las funciones de exportar/importar JSON. Es una herramienta inteligente para uso personal.

¿Puedo simular diferentes códigos de estado HTTP, como errores 404 o 500?

Absolutamente. Al definir un mock, puedes especificar cualquier código de estado HTTP (desde 100 hasta 599). Esto te permite probar cómo tu aplicación frontend maneja diferentes respuestas del servidor, incluyendo errores comunes. Es una característica esencial de un buen API tester.

¿Cómo manejo paths de API con parámetros dinámicos, como `/users/:id`?

Nuestra herramienta soporta parámetros de ruta estilo Express.js (ej. /users/:id o /products/:category/:productId). Cuando envías una petición de prueba (ej. a /users/123), la herramienta identificará que "123" corresponde al parámetro "id". Aunque la lógica de reemplazo de parámetros en la respuesta no está implementada en esta versión básica, la coincidencia de ruta sí funciona.

¿Es esta una alternativa a Postman o Insomnia para mockear APIs?

Este es un simulador de API del lado del cliente, lo que significa que los mocks "viven" en tu navegador. Herramientas como Postman o Insomnia pueden ofrecer mock servers más robustos que se ejecutan como procesos separados. Esta herramienta es ideal para pruebas rápidas, desarrollo frontend individual o cuando no quieres configurar un mock server completo. Es una de las herramientas online gratuitas y ligeras de Optikit.

¿Puedo simular respuestas API con diferentes tipos de contenido (JSON, XML, texto)?

Sí. En el campo "Cuerpo Respuesta" del formulario de mock, puedes pegar el contenido en el formato que necesites (JSON, XML, HTML, texto plano). Asegúrate de configurar también la cabecera Content-Type apropiada en las "Cabeceras Respuesta" (ej. Content-Type: application/xml) para que la simulación sea precisa.

¿Cómo funciona el modo "Pantalla Completa" en este simulador de API?

El modo "Pantalla Completa" (activado con o la tecla 'F') expande la interfaz del simulador para llenar toda tu pantalla. Esto te da más espacio para ver la lista de mocks, el formulario de prueba y el visor de respuestas, lo cual es muy útil cuando trabajas con muchas definiciones o cuerpos de respuesta largos. Es una mejora para la usabilidad de esta herramienta para desarrolladores.

Si importo un archivo JSON, ¿se borran mis mocks actuales?

Sí, al importar un archivo JSON con definiciones de mocks, la herramienta te pedirá confirmación porque la acción reemplazará todos los mocks que tengas guardados actualmente en tu navegador. Es una buena práctica exportar tus mocks actuales primero si deseas conservarlos antes de importar un nuevo conjunto.

¿Puedo usar esta herramienta para probar la lógica de mi aplicación frontend antes de que el backend esté listo?

¡Exactamente! Ese es uno de los principales casos de uso. Puedes crear mocks para API que tu frontend consumirá, permitiéndote desarrollar y probar la lógica de manejo de datos, estados de carga, errores y la interfaz de usuario de forma independiente. Esta herramienta online gratuita acelera el desarrollo frontend.