Mockando um back-end com o JSON Server

Published in

Code Prestige

4 min readSep 20, 2022

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!

JSON Server

O 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:

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:

"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:

<!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:

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.

{
  "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:

"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 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:

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:

"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!