Desarrollo rápido con Mocks de API

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.

"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

"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

Desarrollador a tiempo completo, amante del buen rol y los juegos de plataforma. Mi tiempo libre me gusta invertirlo para ver series y malas peliculas