Mockando um back-end com o JSON Server
Published: 2022-09-14 02:05:20

## Contexto
Você já passou por uma situação onde precisava do back-end pronto para implementar/testar a integração com o seu front-end? Pois é... isso pode ocorrer com mais frequência do que gostaríamos. É para este e outros cenários semelhantes que eu gostaria de apresentar o JSON Server. 

Com este pacotinho, conseguiremos "criar um back-end" em menos de 30 segundos que será capaz não somente de armazenar dados, assim como dar suporte para requisições do tipo GET, POST, PUT... etc, seguindo todo o padrão Rest.

## Edição em vídeo
Prefere assistir? Não tem problema, gravei também em vídeo!
{% embed https://youtu.be/G4RHpXSa7dw %}

## JSON Server
O [JSON Server](https://www.npmjs.com/package/json-server) é um dos pacotes mais completos que eu já vi no que diz respeito a quantidade de configurações e funcionalidades. Para entender o seu funcionamento, vamos partir de um exemplo prático.

Criaremos um novo projeto de front-end usando o parcel e mais algumas dependências. Basta digitar os comandos abaixo no seu terminal de preferência:
``` bash
npm init -y
npm i -D parcel
npm i json-server axios
```

E depois no `package.json`, configure um script para rodar o projeto em um servidor de desenvolvimento:
``` json
"scripts": {
  "dev": "parcel index.html"
},
```

Muito bem. Para o nosso teste, faremos uma tela com dois botões: um que deverá fazer uma requisição do tipo GET e trazer todos os dados de usuários; e outra que fará uma requisição do tipo POST para cadastrar um novo usuário. Minha intenção é te mostrar que podemos fazer vários tipos de requisições diferentes (como em uma API REST).

Crie um arquivo `index.html` na raiz do projeto com essa estrutura:

``` html
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON Server</title>
</head>

<body>
  <button class="search">Todos os usuários</button>
  <div><input type="text" class="user" /><button class="insert">Inserir usuário</button></div>
  <script type="module" src="index.js"></script>
</body>

</html>
```

Em seguida, crie um arquivo index.js na raiz do projeto com essa estrutura:

``` js
const axios = require("axios");

async function getAllUsers() {
  try {
    const { data } = await axios.get("http://localhost:3000/users");
    console.log("users", data);
  } catch (error) {
    console.log("error", error);
  }
}

async function addNewUser() {
  const user = document.querySelector(".user").value;
  try {
    await axios.post("http://localhost:3000/users", {
      name: user
    })
  } catch (error) {
    console.log("error", error);
  }
}

window.onload = () => {
  document.querySelector(".search").addEventListener("click", getAllUsers);
  document.querySelector(".insert").addEventListener("click", addNewUser);
}
```

Note que as requisições estão sendo feitas para o `localhost:3000`. Este endereço não é por acaso. Por padrão, é neste local que o servidor local do JSON Server irá funcionar.

O primeiro passo para configurar o JSON Server é criarmos um arquivo JSON que será o nosso banco de dados. Crie-o na raiz do projeto. Eu chamarei o meu de `db.json` e o iniciarei com alguns dados. A estrutura deste arquivo também fica ao seu critério.

``` json
{
  "users": [
    {
      "id": 1,
      "name": "diego"
    },
    {
      "id": 2,
      "name": "luiza"
    },
    {
      "id": 3,
      "name": "marcela"
    },
    {
      "id": 4,
      "name": "maria"
    },
    {
      "id": 5,
      "name": "gilberto"
    }
  ]
}
```

Feito isso, tudo o que precisamos fazer agora é criar um script para subir este back-end. Para isso, volte no package.json e crie uma nova instrução:

``` json
"scripts": {
  "dev": "parcel index.html",
  "dev:json": "json-server db.json"
}
```

E se eu te disser que só isso é o sufiente pra fazer tudo funcionar? Abra dois terminais e rode o comando `npm run dev` em um e `npm run dev:json` em outro! Pronto! 😃

## Criando uma base aleatória
Em alguns cenários mais complexos, você vai querer uma quantidade maior de dados para testar. É o caso, por exemplo, de uma paginação (que olhem só, tem suporte nativo no JSON Server!). Nestas situações, se torna bastante desgastante ter que ficar criando os dados um por um. E se utilizarmos a biblioteca [Faker](https://fakerjs.dev/) para nos ajudar?

O JSON Server disponibiliza uma forma de criar um banco em memória baseado no retorno de uma função. Nesta função, podemos usar o Faker (por exemplo), para gerar os dados do nosso teste. Para ver isso funcionando, crie um novo arquivo na raiz do projeto chamado `seed.js`.

Neste arquivo, coloque o seguinte conteúdo:
``` js
const { faker } = require("@faker-js/faker");

module.exports = () => {
  const data = { users: [] };
  for(let i = 0; i < 1000; i++) {
    data.users.push({
      id: i,
      name: faker.name.firstName()
    })
  }

  return data;
}
```

Perceba que estamos criando 1000 usuários, returnando este array e exportando essa função. Com isso em mãos, basta criarmos um script no `package.json` que fará o JSON Server usar estes dados:

``` json
"scripts": {
  "dev": "parcel index.html",
  "dev:json": "json-server db.json",
  "dev:json:seed": "json-server seed.js"
}
```

Agora, ao invés de usar o `npm run dev:json`, só trocar pelo `npm run dev:json:seed`!

## Considerações finais
O JSON Server está longe de ser a única opção de ferramenta para a criação de mocks de back-end, por outro lado, é muito difícil encontrar ferramentas tão completas e fáceis de usar como essa. Aqui só mostrei pra vocês a pontinha do iceberg, vale entrar na documentação e explorar as possibilidades.

## Agradecimentos
Curtiu? Então dê uma passada no meu canal no Youtube ou me procure nas redes sociais para trocarmos uma ideia!
- [Youtube](https://www.youtube.com/c/ProfDiegoPinhoPrograma%C3%A7%C3%A3o)
- [Site](https://www.diegopinho.com.br/)