Merida Design Blog

Publicado el | Tutoriales / , ,

Crea una API local para desarrollo con json-server

En las aplicaciones modernas lo normal es desarrollar una API que se encargue del procesamiento de datos y la lógica de negocio, sin embargo, no siempre podemos esperar a que la API esté terminada, generalmente necesitamos datos muestra con la estructura final para poder desarrollar la interfaz de usuario o un prototipo para presentar al cliente.

Json-Server es un script de NodeJS que te permite hacer precisamente eso, generar una API completa con datos y todas las operaciones CRUD en menos de 1 minuto, sí, así de rápido. Veamos como se realiza.


Requerimientos

  • NodeJS: Es necesario contar con este entorno ya instalado en tu equipo, si aún no lo instalas, visita su página web y sigue los pasos.
  • Cliente REST: Este en realidad no es un requerimiento, pero es aconsejable para poder probar la API con distintos parámetros y escenarios antes de escribir una línea de código. Yo uso POSTMAN, pero cualquiera puede servir.

Instalación

Para comenzar a usar json-server primero lo instalamos con el manejador de paquetes de node npm (viene incluido cuando instalas node).

En la línea de comandos o terminal escribimos lo siguiente:

    npm install -g json-server

Lo instalamos global para que podamos ejecutarlo desde cualquier carpeta.


Crear la base de datos

Para la base de datos simulada solo necesitamos crear un archivo JSON con la estructura.

    {
        "clients": []
    }

No es necesario definir las propiedades que va a contener el objeto clientes ya que al agregar nuevos elementos mediante POST podemos enviar los parámetros que queramos y éstos se van a insertar, sin embargo, puedes crear un objeto inicial que te sirva como referencia.


Levantar el servicio

Ahora solo necesitamos levantar el servicio de la API con json-server.
En la terminal colocate en la carpeta donde creaste el archivo db.json y ejecuta lo siguiente:

    json-server --watch db.json

Listo, la terminal te debe arrojar un resultado similar al de esta imagen.

imagen-1

El parámetro --watch es opcional y sirve para que se imprima en la terminal cada petición que se haga describiendo el tipo de petición (PUT, POST, GET, etc) y el tiempo de ejecución en mili-segundos.


Probar API

Ahora que el servicio ha sido levantado json-server ha creado de manera automática las siguientes rutas basadas en el archivo db.json.

    GET    /clients
    GET    /clients/:id
    POST   /clients
    PUT    /clients/:id
    PATCH  /clients/:id
    DELETE /clients/:id

Vamos a probar la API creando un nuevo registro.

  1. Abre POSTMAN e ingresa la ruta para ejecutar una petición POST, en este caso la ruta sería: http://localhost:3000/clients.
  2. Cambia el tipo de petición a POST.
  3. Ingresa algunos parámetros y presiona el botón SEND para ejecutar la petición.
  4. La petición automáticamente regresa el nuevo registro creado, y como puedes ver sin necesidad de asignarle directamente un ID, éste se crea solo y de manera incremental.

imagen-2

Ahora si cambias el tipo de petición a GET verás como te regresa el listado de los registros creados.

Si revisas el archivo db.json observarás como los registros se han insertado de manera automática, pero ya que este archivo es la definición de la estructura de tu base de datos es posible que no quieras que la información de las pruebas se mantenga ahí, pero sí deseas conservar los datos y para éste fin, json-server te permite crear un snapshot (copia) de tus base de datos.

Para realizar la copia regresa a la terminal (asegúrate que sea la misma ventana en la que ejecutaste el comando para levantar la API) y presiona la tecla s seguido del enter, una vez hecho esto en la terminal aparecerá el mensaje indicando que se ha creado la copia y el nombre del archivo. Ahora ya puedes eliminar los datos de tus archivo original db.json.


Crear datos iniciales falsos de manera automática

Json-server también permite crear la base de datos a partír de una función en lugar de un archivo JSON y para ello solo necesitas pasarle el nombre del archivo javascript que contenga la función.

Dentro de la función podemos hacer uso de otra librería llamada faker que genera datos aleatorios y cuenta con muchas opciones, desde nombres de personas, lugares, hasta imágenes.

Antes de crear la función ejecuta lo siguiente en tu terminal para instalar las librerías que nos van a servir.

NOTA: recuerda detener antes el proceso anterior de json-server en tu terminal, puedes hacerlo presionando CTRL + C ó CMD + C en Windows y Mac respectivamente.

    npm install lodash faker -s

Ahora crea un archivo con nombre db.js y coloca el siguiente código:

    module.exports = function () {
        var faker = require("faker"),
            _ = require("lodash");
            
        return {
            clients: _.times(100, function(n) {
                return {
                    id: n,
                    name: faker.name.findName(),
                    avatar: faker.internet.avatar()
                }
            })
        }
    }

  • En las líneas 2 y 3 se incluyen las librerías que recién instalaste.
  • La función times de lodash ejecuta la función pasada como 2do parámetro la cantidad de veces pasada en el 1er parámetro. Esta función regresa un objeto en donde al id le asignamos el valor del índice actual en el ciclo y luego un par de propiedades con valores aleatorios gracias a la librería faker.

En la terminal ahora ejecuta lo siguiente:

 json-server db.js 

Listo, ahora cuentas con una API con 100 registros con los que puedes hacer todas las operación CRUD a través de las mismas rutas que vimos anteriormente.

imagen-3


Conclusión

Esta es solo una pequeña demostración de lo que se puede hacer con esta increible utilería, adicionalmente json-server permite realizar paginación, filtros y ordenamiento entre otros.

Para ver la lista de funciones completa y la documentación completa visita su página en github.
https://github.com/typicode/json-server



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: