# JSON Server
## Introducción
Aprendimos cómo realizar solicitudes a las API web, pero hay veces que para empezar a trabajar en nuestro Front-end necesitamos esperar a que el equipo del Back-end termina la API REST.
[JSON Server](https://github.com/typicode/json-server) es un **módulo NPM** muy útil, de código abierto y publicado bajo la licencia MIT, que permite a los desarrolladores crear prototipos de su Back-end realmente rápido, creando una API REST falsa a partir de un archivo JSON simple.
De esta manera, cuando necesites conectarte al Back End real del proyecto, solo necesitas cambiar la URL a la que apuntan las solicitudes.
## Instalar
Primero, necesitamos instalar el paquete. Lo haremos a nivel global para que podamos ejecutarlo desde cualquier lugar en nuestras computadoras. Ejecutamos el siguiente código en la terminal:
```bash
$ npm install -g json-server
```
## Creando los Recursos
Creemos una carpeta **my-fake-api** para empezar a trabajar. Dentro de la carpeta necesitamos crear un archivo `JSON`, donde pondremos toda la información, creamos un archivo **`db.json`**.
```javascript
my-fake-api/
├── db.json
```
Abrimos el archivo `db.json` en el editor y pegamos el siguiente código:
```javascript
{
"cities":[
{
"id":1,
"name":"Barcelona"
},
{
"id":2,
"name":"Madrid"
},
{
"id":3,
"name":"Miami"
},
{
"id":4,
"name":"Paris"
}
],
"courses":[
{
"id":1,
"name":"WebDev",
"type":"Full Time"
},
{
"id":2,
"name":"WebDev",
"type":"Part Time"
},
{
"id":3,
"name":"UX/UI",
"type":"Full Time"
},
{
"id":4,
"name":"UX/UI",
"type":"Part Time"
}
],
"bootcamps":[
{
"id":1,
"cityId":1,
"courseId":1
},
{
"id":2,
"cityId":2,
"courseId":2
},
{
"id":3,
"cityId":3,
"courseId":1
},
{
"id":4,
"cityId":4,
"courseId":2
},
{
"id":5,
"cityId":2,
"courseId":3
},
{
"id":6,
"cityId":3,
"courseId":4
},
{
"id":7,
"cityId":1,
"courseId":3
}
]
}
```
Vayamos a la terminal y dentro de **my-fake-api**, ejecutamos el siguiente código:
```bash
$ json-server --watch db.json --port 8000
```
**:eyes: Observamos que estamos especificando el `puerto` donde queremos ejecutar nuestra API falsa. De forma predeterminada, se ejecutará en el **puerto 3000**, por lo que si queremos ejecutar al mismo tiempo nuestra aplicación Express, no podremos hacerlo.**
Si todo salió bien, debería ver algo como esto en la terminal:
Ahora estamos listos para comenzar a hacer solicitudes a nuestra nueva API, así que continúe y ejecute una solicitud GET de Postman, debería ver todos los datos que acabamos de pegar en el archivo `db.json`.
```bash
GET http://localhost:8000/cities
```
## Rutas
**JSON-Server** obtiene las claves que especificamos en el archivo `.json`, y crea una ruta para cada una de ellas *(como si fueran colecciones en nuestra base de datos)*, por lo que en nuestro caso tendremos lo siguiente rutas:
- `/cities`
- `/courses`
- `/bootcamps`
### GET Requests Parameters
Hicimos una solicitud GET a la ruta `/cities`, pero eso es solo el comienzo. **JSON-server** nos permite hacer algunas solicitudes GET específicas agregando parámetros:
- **Id específico**. Especificar el **id** después de que la colección, para que recupere **solo** la ciudad especificada.
```javascript
GET /cities/1
```
- **Filtrar**. En nuestro ejemplo, recupera todas las ciudades que tienen una propiedad `name` con el valor **Barcelona**
```javascript
GET /cities?name=Barcelona
```
- **Paginar**. Utilice _page y, opcionalmente, _limit para paginar los datos devueltos.
```javascript
GET /cities?_page=1
GET /bootcamps?_page=7&_limit=20 //10 items are returned by default
//In the Link header, you'll get first, prev, next and last links.
```
**La paginación es una forma en que podemos dividir un documento en porciones más pequeñas.**
- **Ordenar**. Agregamos _sort y _order (orden ascendente por defecto)
```javascript
GET /cities?_sort=name&_order=asc
```
## Solicitudes POST, PUT, PATCH y DELETE
Somos maestros haciendo solicitudes GET a nuestra nueva API falsa, pero ¿y si necesitamos agregar más datos? ¿O tal vez editar o eliminar algo? ¡Sí! Podemos hacer solicitudes usando otros métodos :wink:
**Si realizas solicitudes POST, PUT, PATCH o DELETE, los cambios se guardarán de forma automática y segura en `db.json` usando [lowdb](https://github.com/typicode/lowdb).**
### Método POST
Usando JSON-Server es exactamente lo mismo que usar el método POST para agregar nuevos datos a nuestra base de datos.
Es importante tener en cuenta que el cuerpo de su solicitud JSON debe incluirse en un objeto, al igual que la salida `GET` Por ejemplo, `{"name":" Berlín "}`
Así que imagina que queremos agregar una nueva ciudad a nuestra colección de `cities`, deberíamos hacer algo como esto:
Usando Postman, podemos enviar los datos como un JSON usando la opción `raw`, o agregarlos a través de `x-www-form-urlenconded` especificando el objeto clave-valor.
Como respuesta obtendremos el nuevo elemento recién agregado a nuestra DB :wink: Entonces, si hacemos una solicitud GET a la colección `cities`, deberíamos poder ver **Berlín** en la lista.
### Método PUT/PATCH
Usar el método PUT o PATCH es realmente similar al método POST, pero en la URL debe especificar el **id** del elemento que desea editar.
Al igual que en el método POST, el cuerpo de su solicitud JSON debe incluirse en un objeto.
Si especificas un *id* que no existe, no realizará ningún cambio en el archivo. Los valores de identificación no son mutables.
**Se ignorará cualquier valor de identificación en el cuerpo de su solicitud PUT o PATCH. Solo se respetará un valor establecido en una solicitud POST, pero solo si aún no se ha tomado.**
### Método DELETE
Por último, pero no menos importante, tenemos los métodos DELETE. Al igual que los métodos PUT y PATCH, debemos especificar el **id** que queremos eliminar de nuestra base de datos.
Y eso es todo, ¡eliminamos con éxito un elemento de nuestra base de datos falsa! :wink:
## Recursos extra
- [JSON Server](http://github.com/typicode/json-server)
- [Node Module of the Week - JSON Server](http://nmotw.in/json-server/)
Sign in with Wallet
Connect another wallet