Utilizando json-server: criando sua própria carga “fake” de dados

Nos dias de hoje, grande parte dos desenvolvedores precisam fazer requisições a APIs, serviços externos, etc, para que alguma ação seja feita ou que algum dado seja retornado. No presente artigo, será demonstrado como utilizar uma ferramenta do gerenciador de pacotes NPM para uma carga “fake” de testes em sua aplicação, utilizando o json-server.

Para começar, é necessário instalar a dependência em seu projeto. Utilizando o prompt de comando, o Windows PowerShell, o terminal (para usuários de Linux e Mac), ou utilizando o próprio terminal de seu editor de código (Visual Studio Code), você deve navegar até a pasta raiz de seu projeto e digitar o comando:

npm i json-server

Exemplo no VS Code:

Figura 01 — Comando de instalação do json-server no Visual Studio Code. Fonte: Autoria própria.

Após digitar o comando na pasta raiz de seu projeto, apertar ENTER em seu teclado e aguardar a instalação desse módulo.

Com a instalação concluída, você irá criar sua estrutura JSON em um arquivo dentro de sua aplicação. A estrutura JSON possui sempre uma chave e um valor, como por exemplo:

“nome”: “Mariana”;

No exemplo acima, a chave seria o nome e o valor seria a palavra Mariana.

O arquivo poderá ser de temas diversos, como produtos, flores, do que você quiser. No exemplo abaixo, o arquivo chama animais.json, com as chaves:

id: que seria um identificador único para cada animal;
nome: que seria o nome que o animal possui, se ele é um hamster, um crocodilo, etc;
patas: que seria a quantidade de patas que um animal possui;
classe: por fim, a classe dele, se é um mamífero, um réptil, uma ave, etc.

O arquivo será o seguinte:

	{
	"animais": [
	{
	"id": 2,
	"nome": "Pirarara",
	"patas": 0,
	"classe": "Peixes"
	},
	{
	"id": 3,
	"nome": "Aranha",
	"patas": 8,
	"classe": "Insetos - aracnídeos"
	},
	{
	"nome": "Golfinho",
	"patas": "0",
	"classe": "Peixe",
	"id": 4
	},
	{
	"id": 5,
	"nome": "Jacaré",
	"patas": 4,
	"classe": "Reptéis"
	},
	{
	"nome": "Girafa",
	"patas": "4",
	"classe": "Mamífero",
	"id": 6
	},
	{
	"nome": "Cavalo",
	"patas": "4",
	"classe": "Mamifero",
	"id": 7
	}
	]
	}

view raw animais.json hosted with ❤ by GitHub

No arquivo, antes da inserção de dados, é necessário declarar uma variável do que será testado, no caso “animais”, mas podia ser “vasos”, “presentes”, etc;
Cada conjunto de dados, que una chave e valor, irá dentro de chaves {}, separados por vírgulas;
As chaves e os valores precisam estar entre aspas, a não ser no caso de números inteiros (2, 3, 5, 66);

Para gerar uma API fake a partir deste arquivo animais.json, você irá na pasta onde o arquivo .json está localizado e digitar o seguinte comando e apertar ENTER:

npx json-server animais.json

Figura 02 — Exemplo de como utilizar o comando npx json-server, passando o arquivo criado como parâmetro. Fonte: Autoria própria.

No caso, o segundo parâmetro seria o nome do seu arquivo que, no exemplo deste documento é o arquivo animais.json

Feito isso, irá aparecer um link para você acessar em seu navegador:

Figura 03 — Link de acesso para a API fake gerada. Fonte: Autoria própria.

Você pode copiar ele e colar ele na barra de endereços do navegador de sua preferência, ou, clicar no link apertando a tecla CTRL em seu teclado (ambas ações ao mesmo tempo), que será aberto seu JSON em sua máquina, localmente:

Figura 04 — Exemplo do json do arquivo animais.json gerado no servidor local. Fonte: Autoria própria.

Agora, que sua API já está disponível no servidor local de sua máquina, você pode utilizar a URL: http://localhost:3000/animais em softwares como o Postman e o Insomnia, para fazer requisições para essa API.

Posts relacionados: