Fake API JSON-Server
Crea e implementa un Fake API en minutos con json-server
Cómo desarrollador Frontend muchas veces tenemos la tarea de simular algún servicio REST para entregar o recibir datos en formato JSON y así asegurarnos que todo funcione como esperamos antes de enviar algo a producción.
Si bien cuando programamos solemos trabajar con un equipo con gente dedicada a armar estos servicios, nosotros como desarrolladores Frontend para no retrasar los proyectos debemos implementar estos de manera temprana y con una complejidad mínima para poder realizar las diferentes operaciones.
Por supuesto, podríamos sentarnos a configurar un Backend completo utilizando Node.js, Express, Mongo o PostgreSQL pero tardaremos mucho tiempo y retrasamos todas nuestras tareas.
Hoy en día contamos con herramientas como JSON Server la cual nos permite configurar e implementar una API REST con todas las operaciones CRUD en cuestión de minutos, y si… en minutos literalmente.
Ahora… ¿Que es esta gran herramienta?, ellos se describen como la manera de crear una API REST en 30 segundos sin la necesidad de configurar nada.
Vamos a lo que vinimos, lo primero que debemos hacer es crear una carpeta para nuestro proyecto y abrir una terminal en ella, luego instalaremos la herramienta de manera global en nuestra computadora, eso lo hacemos con el siguiente comando
npm install -g json-server
Puede ser que te de un error de acceso, eso lo solucionamos agregando la palabra sudo antes de npm, quedaría de la siguiente manera sudo npm install -g json-server.
Una vez que este proceso esté listo crearemos un archivo JSON llamado db.json, este archivo nos servirá como una base de datos la cual podremos modificar mediante las diferentes operaciones a lo largo de la vida de nuestro proyecto.
A modo ejemplo implementaremos un archivo con datos de personas.
{
"people": [
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "90566-7771",
"geo": {
"lat": "-43.9509",
"lng": "-34.4618"
}
},
"phone": "010-692-6593 x09125",
"website": "anastasia.net",
"company": {
"name": "Deckow-Crist",
"catchPhrase": "Proactive didactic contingency",
"bs": "synergize scalable supply-chains"
}
},
]
}
Te dejo el ejemplo la base de datos completa en jsonplaceholder.typicode.com/users
Ahora abriremos el archivo package.json y modificaremos el comando test por server seguida de la instrucción json-server --watch db.json
"scripts": {
"server": "json-server --watch db.json"
},
Automáticamente veremos en nuestra consola un mensaje como el siguiente
Distinguimos dos títulos, el primero Resources y Home de momento ingresamos a la pestaña de resources para que nos liste toda la información que tenemos en la dirección people.
Al ingresar a Home nos mostrara una pagina que se crea de manera automática por json-server seguido de las rutas disponibles.
Operaciones CRUD
GET
En este caso abriremos Postman para poder ejecutar las diferentes consultas a nuestra Fake API REST.
Lo primero sera realizar la operaciones READ la cual nos permite obtener/leer los datos.
La operación la ejecutamos sobre la ruta localhost:3000/people
POST
A la hora de ejecutar la operación POST el archivo db.json sufrirá cambios, en este caso agregaremos una nueva persona y esto se escribirá en el archivo anteriormente mencionado
En este caso lo primero que haremos en Postman es cambiar la operación de GET a POST e ingresamos a la pestaña Headers agregando como KEY Content-Type VALUE application/json.
Seguido de esto ingresamos a la pestaña Body y cambiaremos el valor none por raw, aca es donde ingresamos la información a agregar en nuestra base de datos.
En este caso copiamos un valor y modificamos simplemente el id seguido de name y username.
{
"id": 11,
"name": "Mr Post",
"username": "Man",
"email": "postman@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Postman-inc-fake",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
Luego de hacer clic en el botón “send” ingresaremos al archivo db.json para así poder ver al final de este a Mr Post.
Ahora, en nuestro caso pusimos el atributo ID pero…, si no sabemos cual es el id? ¡No hay drama! automáticamente el servidor agrega este atributo respetando los valores siguientes, te invito a que ejecutes una consulta como la anterior quitando el atributo ID y luego revises db.json para que veas esto.
PATCH
En este caso actualizaremos el correo de nuestro amigo Mr Post, para realizar esta acción en la URL agregaremos una barra diagonal seguido del ID de Mr Post quedando así
Al enviar y revisar el archivo vemos que automáticamente el correo electronico es @gmail en este caso.
DELETE
Para realizar la acción de DELETE o eliminar simplemente utilizaremos el ID pero con la operación DELETE automáticamente elimina el elemento que coincida con el ID que nosotros especificamos.
Json-server nos permite realizar diferentes acciones como listar en rangos, filtrar, obtener archivos estáticos y más, es por eso que te invito a visitar su repositorio y puedas implementar estas operaciones dentro de nuestra simple API.
¡Espero que este tutorial te haya servido !