🇪🇸 🔧 Crea APIs simuladas gratis con Mocky en segundos

01 Apr 2025 en / Tecnología e Innovación sobre Mocky, Api, Desarrollo Última modificación el: 2025-04-16

¿Necesitas simular una API para una demo o tu frontend aún sin backend? Con Mocky puedes crear endpoints falsos en segundos. ¡Aquí te muestro cómo!

---

🛠️ Paso 1: Crear neew Mock

1. Ingresa a designer.mocky.io
2. Presionar el botón de New Mock.

---

⚙️ Paso 2: Configura tu respuesta

Rellena los campos como se indica:

• HTTP Status: Elige 200 - OK.
• Content-Type: Selecciona application/json.
• Charset: Usa UTF-8.

---

📦 Paso 3: Define tu respuesta JSON

En el campo HTTP Response Body, pega por ejemplo:

{
  "identity": {
    "id": "b06cd03f-75d0-413a-b94b-35e155444d70",
    "login": "John Doe"
  },
  "permissions": {
    "roles": ["moderator"]
  }
}

También puedes agregar headers personalizados, como:

{
  "X-Foo-Bar": "Hello World"
}

---

🧪 Paso 4: Genera la respuesta

Haz clic en Generate my HTTP Response y obtendrás una URL similar a:

https://run.mocky.io/v3/03fb86c3-f9f5-40af-89af-163144c96c01

¡Ese será tu endpoint de prueba!

---

🌐 Paso 5: Úsalo con Fetch en tu frontend

Ejemplo con GET:

fetch("https://run.mocky.io/v3/tu-id-generado")
  .then(res => res.json())
  .then(data => console.log("✅ Respuesta:", data))
  .catch(error => console.error("❌ Error:", error));

Y como respuesta te deberia devolver el json:

Ejemplo con POST:

fetch("https://run.mocky.io/v3/tu-id-generado", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ nombre: "Eduardo", mensaje: "Hola Mocky!" })
})
.then(res => res.json())
.then(data => console.log("✅ Respuesta:", data))
.catch(error => console.error("❌ Error:", error));

Y como respuesta te deberia devolver el json:

---

🎉 ¡Listo!

Ahora ya puedes trabajar en tu frontend sin depender del backend. Mocky es ideal para prototipos, pruebas o incluso para enseñar a otros.