# Fake API 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. > [Enlace al proyecto json-server GitHub](https://github.com/typicode/json-server) 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 https://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 ![Mask group (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652180870822/fTcYHbSBP.png align="left") 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](https://www.postman.com/) 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. ![Mask group.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652180955481/qd3F1rdus.png align="left") >La operación la ejecutamos sobre la ruta http://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í ![Mask group (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652181124273/wUWNV89sn.png align="left") >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. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652181766412/5jNGvRh8s.png align="left") 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 !