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!
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!
Top comments (0)