Voltar para o Blog Iniciante • 5 min

Guia Rápido: Criando uma API Fake com JSON Server

Aprenda a configurar o JSON Server para criar uma API REST fake rapidamente e testar aplicações front-end.

O que é o JSON Server?

JSON Server é uma ferramenta que permite criar uma API REST completa utilizando um arquivo JSON como banco de dados. Ideal para testes e desenvolvimento front-end.

Instalando o JSON Server

Antes de começar, certifique-se de ter o Node.js instalado. Em seguida, instale o JSON Server:

npm install -g json-server

Criando um Banco de Dados Fake

Crie um arquivo chamado db.json e adicione o seguinte conteúdo:

{
  "usuarios": [
    { "id": 1, "nome": "João", "email": "joao@email.com" },
    { "id": 2, "nome": "Maria", "email": "maria@email.com" }
  ]
}

Rodando o Servidor

No terminal, execute o seguinte comando para iniciar a API:

json-server --watch db.json --port 3000

Agora, você pode acessar os dados em http://localhost:3000/usuarios.

Consumindo a API com JavaScript

Vamos buscar os usuários e exibi-los na tela:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Consumindo JSON Server</title>
</head>
<body>
  <h1>Lista de Usuários</h1>
  <ul id="lista-usuarios"></ul>
  <script>
    async function carregarUsuarios() {
      try {
        const resposta = await fetch('http://localhost:3000/usuarios');
        const usuarios = await resposta.json();
        const lista = document.getElementById('lista-usuarios');
        usuarios.forEach(usuario => {
          const li = document.createElement('li');
          li.textContent = `${usuario.nome} - ${usuario.email}`;
          lista.appendChild(li);
        });
      } catch (erro) {
        console.error('Erro ao carregar usuários:', erro);
      }
    }
    carregarUsuarios();
  </script>
</body>
</html>

Próximos passos

Experimente adicionar, editar e excluir dados utilizando métodos HTTP como POST, PUT e DELETE.