Hoy en día cualquier desarrollador front-end sabe que necesitamos obtener un JSON de un servidor que está en algún sitio que responde a nuestras llamadas para darle algo de vida al front. Así que las APIs son necesarias, si no dispones de un servicio de web real, puedes *mockear *la API.

Por qué *mockear *una API?

Aquí varias razones:

  1. **Porque no dispones de una API aun **– una API *mockeada *te permite empezar a desarrollar sin tener que depender de que el *backend *crea el servicio necesario. No tener una API funcional realmente también es positivo a la hora de realizar pequeños cambios respecto al funcionamiento.
  2. **Porque tu API es muy lenta **– si tu API es muy lenta y tarda mucho en devolver las llamadas, es recomendable *mockear *porque tardas menos en desarrollar y en testear el front.
  3. **Elimina la dependencia con otros departamentos **– ya no dependes del equipo encargado de programar y crear los servicios web de tu aplicación, simplemente moldeas la API a lo que “se supone” que tiene que devolver tu servicio real y a programar!
  4. Te permite trabajar offline* – *si tienes que trabajar desde un avión, un bus o desde una cafetería que no dispone de conexión wifi, trabajar con una API *mockeada *localmente te permitirá no depender de dicha conexión a Internet.

Manos al a obra – crear una API Mockeada

Paso 1 – Declarar nuestro Schema

Para declarar el *Schema *de nuestra API usaremos JSON Schema Faker.

Esta librería nos permitirá darle la forma que queramos a nuestro servicio. Declararemos el objeto, sus propiedades y tipos. La librería dispone de un REPL online con el que podemos probar y aprender.

JSON Schema Faker nos permite hacer uso de otras librerías para crear nuestra estructura, como faker.js, chance.js y randexp.js. Las primeras dos son muy similares, con ellas podemos generar información aleatoria que parezca real, como nombre, email, teléfono, dirección etc… Y con randexp podemos generar datos a partir de expresiones regulares.

Aqui tenemos el *schema *de ejemplo que vamos a usar para este artículo, lo llamaremos schema.js

var schema = { "type": "object", "properties": { "users": { "type": "array", "minItems": 5, "maxItems": 8, "items": { "type": "object", "properties": { "id": { "type": "number", "unique": true, "minimum": 0 }, "firstName": { "type": "string", "faker": "name.firstName" }, "lastName": { "type": "string", "faker": "name.lastName", }, "email": { "type": "string", "faker": "internet.email", }, "phone": { "type": "string", "faker": "phone.phoneNumber", } }, required: ['id', 'firstName', 'lastName', 'email'] } } }, required: ['users'] }; module.exports = schema

Como podéis ver, estamos usando faker para generar el tipo de dato ( phone.phoneNumber, internet.email)

Paso 2 – Llenar esta maqueta con datos

Para eso he creado un script que meteré en el package.json.

<code class="EnlighterJSRAW" data-enlighter-language="json"> "generate-data": "node script/generateData"

Este script invoca a un script de Node llamado generateData:

var jsf = require('json-schema-faker'); var schema = require('./schema'); var fs = require('fs'); var json = JSON.stringify(jsf(schema)); fs.writeFile("db.json", json, function (err) { if (err) { return console.log(err); } else { console.log("Mock data generated."); } });

Aqui podemos ver como estamos usando el schema que creamos antes para crear un archivo local llamado db.json lleno de datos aleatoriamente generados.

Paso 3 – servir esta API

Ahora que ya tenemos nuestra api creada y organizada, vamos a crear un pequeño servidor JSON que apunte a nuestro db.json generado para poder “consumirlo”

Tengo este script que genera todos los datos necesarios y crea el servidor necesario para nuestros datos

<code class="EnlighterJSRAW" data-enlighter-language="js">"start-api": "json-server --watch db.json --port 3001"

para acceder a él debemos ir a la dirección localhost:3001/users

Esta API te permite hacer llamadas put, post, delete y get.

Código del proyecto:

github-logo