Generar una Fake-API con JSON-Server
JSON Server es una herramienta que te permite crear una API REST simulando un archivo JSON como base de datos.
Es muy usado mayormente por desarrolladores Front-End debido a que está le permite enfocarse en hacer el diseño de la aplicación obteniendo una estructura de datos sin preocuparse por generar desde cero una API Rest, la plataforma Json Placeholder también muy usada por desarrolladores Front-End que te permite tener datos genéricos para las pruebas de aplicaciones está creada bajo esta misma herramienta.
En este artículo te mostraré en un ejercicio práctico como generar una Fake-API y ejecutarla desde JSON-Server.
El proyecto tendrá por nombre books-read-api realizaremos los siguientes pasos:
Generaremos un directorio con el nombre de nuestro proyecto, luego abrimos una terminal y nos ubicamos dentro del directorio que acabamos de generar.
Ejecutamos el comando git init para iniciar un repositorio de git (no es obligatorio, pero es una buena práctica).
Ejecutamos el comando npm init para generar el package.json para la descripción y configuración de nuestro proyecto.
Ejecutamos el comando de npm i json-server para instalar la dependencia.
Luego generamos el archivo info.json que contendrá dos objetos que serian books con las propiedades de los libros y el objeto categories tomando como propiedades solo id y nombre, relacionándose entre sí mediante la propiedad categoryId haciendo referencia al id del objeto categories.
Una vez que tenemos el archivo json, modificamos el archivo package.json agregándole en la propiedad script el comando que ejecutará la API con los valores:
- Json-server.
- --watch (sufijo que permite al servidor ejecutar los cambios en tiempo real).
- Nombre del archivo json.
Una vez modificado el archivo package.json lo que hacemos es ejecutar el comando npm start.
Al ejecutarlo en nuestro caso nos mostrará las dos rutas para acceder a la informacion del archivo json.
Si accedemos a la ruta de Home nos mostrara información relacionada con JSON-Server, enlaces para ir a la documentación, y los principales resources de nuestro archivo json y los diferentes métodos que se pueden usar para realizar la petición, tal como lo vemos en la siguiente imagen.
Resources
http://localhost:3000/Books
http://localhost:3000/Categories
Podemos buscar un dato en particular solo con colocar el id de la categoría de esta forma:
http://localhost:3000/Categories/1
Podemos obtener los datos de los libros en particular usando el nombre da la columna y dividimos cada valor con el símbolo “&”, colocándolo de la siguiente forma id=nro-min&id=nro-max
Ejemplo: http://localhost:3000/Categories/1/books?id=1&id=3
Podemos colocar un límite de registros en la búsqueda de los libros colocando en la URL el parámetro _limit=número-de-la-cantidad-de-registros.
Ejemplo: http://localhost:3000/Categories/1/books?_limit=5
Si buscamos generar un rango de registros en nuestra consulta lo podemos hacer haciendo uso de las palabras reservadas _start y _end de la siguiente forma:
Ejemplo: http://localhost:3000/Categories/1/books?_start=1&_end=3
En la línea anterior este rango actúa de la misma forma que el método slice de JavaScript que utilizamos en los arreglos, donde los valores serán como índices y si le indicamos que inicie por el 1 tomara el que tenga el índice 1 (incluyente) y el _end (excluyente), es decir, tomara el valor del índice que le indiquemos menos 1.
Y si deseamos hacer una paginación lo podemos hacer colocando en la URL el parámetro _page=número-de-la-página.
Ejemplo: http://localhost:3000/Categories/1/books?_page=1&_limit=5
Se pueden efectuar peticiones como POST (Agregar Item), PUT (Modificar Item), PATH (Modificar un dato en particular), DELETE (eliminar item) y lo gestionara en el archivo JSON.
Entre muchas otras funcionalidades que podremos ver en el repositorio de json-server.
