Simulando una API REST con json-server

​ En las empresas es habitual consumir APIs REST en nuestros frontends. Eventualmente, puede ser necesario desarrollar el frontend primero o en paralelo con el backend. Cuando esto sucede, tenemos que simular de alguna manera los datos enviados por el backend, es decir, decimos que estamos trabajando con mocks o "mockando" el backend. Mock no es más que el nombre que se le da a un contenido inventado y utilizado únicamente par marcar una posición. Hay varias maneras de hacer esto. Una de ellas es por json-server. Brevemente, json-server simulará una API REST, con todos los puntos finales de un recurso: GET, POST, PUT y DELETE. Por lo tanto, nuestra interfaz consume esta API simulada, lo que permite crear toda la capa HTTP de la aplicación. Json-server es un paquete NPM que se puede instalar globalmente en ambientes que tienen instalado NodeJS. Entonces, nuestro primer paso es ejecutar la instalación:

Una vez hecho esto, ya podemos ejecutar el comando json-server en el terminal, desde cualquier directorio:

Tenemos varias opciones disponibles para usar, pero comencemos creando un archivo JSON que representará nuestro backend. Vamos a crear dos recursos:

proyectos;tareas

​ El proyecto es una entidad simple, que tiene un nombre y un ID incremental numérico. La tarea tiene una descripción, un ID numérico y un proyecto. Entonces podemos representarlos:

{ 
 "proyectos": [ 
   { 
      "id": 1,
      "nombre": "Alura Tracker 3.0"
    },
    {
      "id": 2,
      "nombre": "ByteBank 2.0"
     }
     ],
     "tareas": [
     {
       "id": 1,
       "descripcion":
       "Configuración del ambiente",
       "proyecto": {
       "id": 1,
       "nombre": "Alura Tracker 3.0"
       }
      },
     {   "descripcion": "Refactorización del vuex 4",
         "proyecto": {
         "id": 1,
         "nombre": "Alura Tracker 3.0"
         },
         "id": 2
         }
      ]
   }

Tenga en cuenta que esta es una estructura JSON simple, guardemos este archivo como db.json. Tenemos una matriz con proyectos y otra con tareas, siguiendo la estructura definida anteriormente. Ahora podemos ejecutar el comando base:

Accediendo a la ruta de proyectos:

​ Así que db.json hace que el proyecto funcione. Estas rutas se crean a partir de la estructura de archivos JSON. Entonces, ¿qué sucede cuando tenemos una variedad de tareas y una variedad de proyectos? Se crean las dos rutas. Incluso podemos ir más allá y crear un endpoint único que devolverá, por ejemplo, los datos del usuario conectado:

{
    "proyectos": [
        {
            "id": 1,
            "nombre": "Alura Tracker 3.0"  },
        {
            "id": 2,
            "nombre": "ByteBank 2.0"
        }
   ],
    "tareas": [
        {
            "id": 1,
            "descripcion": "Configuración del ambiente",
            "proyecto": {
            "id": 1,
            "nombre": "Alura Tracker 3.0"
         }
        },
        {
        "descripcion": "Defactorización vuex 4",
        "proyecto": {
        "id": 1,
        "nombre": "Alura Tracker 3.0"
        },
        "id": 2
      }
   ],
     "usuario": {
        "id": 13,
        "nome": "Laura González",
        "perfil": "Administración"
     }
}

​ Como cambiamos el db.json manualmente, tenemos que detener el comando y volver a iniciarlo para cargar los nuevos cambios. Siempre que el archivo JSON cambia, idealmente, el servidor json carga automáticamente la nueva información. Así que agreguemos la opción --watch:

Tenga en cuenta que, de acuerdo con la estructura JSON, el servidor json monta los endpoints de las API. Ahora tenemos las tres rutas disponibles y aún mantenemos el servidor json atento a los cambios en el archivo db.json. Ahora, con un excelente backend emulado, ¡estamos listos para avanzar con el desarrollo de frontend hasta que la API real esté disponible!

No logro instalar el json server, me sale un error, que debo hacer?

Es muy común que cuando uno intente instalar el json server salga un mensaje cómo este:

Generalmente cuando este error es exhibido significa que su Windows está con una configuración de políticas de script que no permite instalar determinados paquetes. Para cambiar esta licencia hay que seguir los siguientes pasos:

1. Abrir Windows Powershell como administrador

2 .Digite el comando Get-executionpolicy en el terminal. Es esperado que sea exhibido el valor Restrict como en la imagen

Get-executionpolicy

3. Si el Restricted fue exhibido , digite el comando: Set-ExecutionPolicy Unrestricted y el siguiente mensaje aparecerá:

4. Presione la llave S y la política de restricciones de scripts cambiará , permitiendo que logres instalar lo que necesites para programar. Para garantizar que la alteración ocurrió correctamente digite nuevamente el comando `Get-executionpolicy` en Windows Powershell y cheque si el valor `Unrestricted` es exhibido.

¡Ahora estás listo para empezar tu proyecto!

Vinicios Neves

Vinicios es ingeniero de software, involucrado en la arquitectura, diseño e implementación de microservicios, micro frontends y sistemas distribuidos. Tiene una experiencia significativa en aplicaciones, integración y arquitectura empresarial. Es Ingeniero de Software de la UNESA y Arquitecto de Software de la PUC Minas.

traducido y adaptado por Barbara Santos