Crear Api Rest con Json server

En el trabajo de un desarrollador front-end, muy a menudo sucede que tiene que usar datos falsos para llenar de contenido el sitio que está construyendo. Para hacer esto, el desarrollador web simula un servicio API REST backend para proporcionar algunos datos en formato JSON a la aplicación front-end y luego verifica que todo funcione como se esperaba.

Api rest: qué son

Las API representan un conjunto de procedimientos que se utilizan para hacer que dos o más aplicaciones se comuniquen entre sí.

Por supuesto, puede crear un servidor back-end completo utilizando la pila que prefiera. Sin embargo, esto requiere mucho tiempo de desarrollo.
En este artículo veremos cómo acelerar el tiempo de desarrollo front-end.

JSON Server es un proyecto simple que ayuda a configurar una API REST con operaciones CRUD muy rápidamente.

Veremos, en primer lugar, cómo configurar el servidor JSON y publicar un ejemplo de API REST; más adelante, veremos cómo usar otra biblioteca, Faker.js, para generar datos falsos para la API REST expuesta a través del servidor JSON.

Requisitos previos

Para utilizar estas bibliotecas necesitarás:

1. Node.js
2. npm

¡Comenzamos!

Comezamos instalando JSON server dentro de nuestro proyecto, ejecutando este comando en la consola.

npm install -g json-server

Al agregar la opción -g nos aseguramos de que el paquete se instale globalmente en todo el sistema y, por lo tanto, no tendrá que volver a instalarlo para futuros proyectos.

File JSON 

Ahora vamos a crear un nuevo archivo JSON llamado db.json. Este archivo es un archivo json de ejemplo, que es útil en este caso, pero hay varios para diferentes situaciones. Este archivo contiene los datos que debe exponer la API REST. Los puntos CRUD se crean automáticamente para los objetos contenidos en la estructura JSON.

Veamos un ejemplo : 

{
    "teachers": [
      {
        "id": 1,
        "name": "Marco",
        "surname": "Insabato",
        "email": "marco@aulab.it"
      },

      {
        "id": 2,
        "name": "Andrea",
        "surname": "Mininni",
        "email": "andrea@aulab.it"
      },

      {
        "id": 3,
        "name": "Francesco",
        "surname": "Talamona",
        "email": "francesco@aulab.it"
      }
    ]
}

La estructura JSON consta de un objeto "maestros" al que se asignan tres conjuntos de datos. Cada objeto “profesor” se compone de cuatro propiedades: id, nombre, apellido y correo electrónico.

¡Vamos a lanzar el server!

Iniciamos el servidor JSON ejecutando el siguiente comando en la consola:

json-server --watch db.json

Como parámetro tenemos que pasar el archivo que contiene nuestra estructura JSON (db.json). Además, usamos la opción –watch.

Con esta opción, nos aseguramos de que el servidor se inicie en modo de observación, es decir, que observe los cambios en el archivo y actualice la API expuesta en consecuencia.

Ahora podemos abrir la URL http://localhost:3000 en el navegador y obtendremos el siguiente resultado:

Podemos ver que el recurso del profesor ha sido reconocido correctamente.

Al hacer clic en el enlace "maestros" seremos redirigidos a http://localhost:3000/teachers con el siguiente resultado

El servidor JSON crea automáticamente los siguientes puntos finales HTTP:

GET    /teachers

GET    /teachers/{id}

POST   /teachers

PUT    /teachers/{id}

PATCH  /teachers/{id}

DELETE /teachers/{id}

Si realiza solicitudes POST, PUT, PATCH o DELETE, los cambios se guardarán automáticamente en db.json. Una solicitud POST, PUT o PATCH debe incluir un encabezado Content-Type: application/json para usar el JSON en el cuerpo de la solicitud. De lo contrario, el resultado será 200 OK, pero no se realizarán cambios en los datos.

Las URL se pueden ampliar con parámetros adicionales. Por ejemplo, puede aplicar un filtro utilizando parámetros de URL, como se puede ver en el siguiente ejemplo:

http://localhost:3000/employees?surname=Talamona

Esto devuelve solo un objeto teacher como resultado o ejecutar un texto completo en todas las propiedades:

http://localhost:3000/employees?q=Marco

Para obtener una lista completa de los parámetros de URL disponibles, consulta la documentación del JSON Server.

Creamos datos

Pues ha llegado el momento de llenar nuestro servidor JSON de datos falsos con el uso de faker.js, una librería que permite generar datos falsos y cuya integración con el servidor JSON es sumamente sencilla.

Ejecutamos los siguientes comandos en nuestro proyecto

npm init

npm install @faker-js/faker

Faker.js se ha instalado en la carpeta node_modules. Creamos otro archivo teachers.js y añadimos el siguiente código JavaScript:

// teachers.js

let {faker} = require('@faker-js/faker')

function generateTeachers() {

  let teachers = []

  for (let id = 0; id < 50; id++) {

    let name = faker.name.firstName()
    let surname = faker.name.lastName()
    let email = faker.internet.email()
   
    teachers.push({

      "id": id,
      "name": name,
      "surname": surname,
      "email": email
    })
  }
  return { "teachers": teachers }
}

module.exports = generateTeachers

Estamos implementando la función generateTeachers () para generar un objeto JSON que contiene 50 profesores. Para obtener los datos de nombre, apellido y correo electrónico falsos, utilizamos los siguientes métodos de biblioteca Faker.js:

• faker.name.firstName()
• faker.name.lastName()
• faker.internet.email()

El servidor JSON le solicita que exporte la función generateTeachers(), que es responsable de generar los datos falsos. Para ello, utilizamos la siguiente línea de código:

module.exports = generateTeachers

Añadiendo esta exportación, somos capaces de pasar el documento employee.js directamente al comando json-server:

json-server teachers.js

Ahora l'API REST expuesto le da acceso a los 50 conjuntos de datos de empleados creados con Faker.js.