O que é o JSON Server
Ter uma API pronta para começar o desenvolvimento do front-end da sua aplicação as vezes pode ser um problema. Com isso te apresento o JSON Server.
JSON Server é uma biblioteca capaz de criar uma API Fake em 30 segundos e sem precisar escrever nenhuma linha de código.
O link para a documentação completa está no final do artigo.
Versão utilizada: 0.14.0
Passo a passo para simular uma API
- Começando com JSON Server
- Rotas
- Filtros
- Paginação
- Ordenação
1 – Começando com JSON Server
Instalação
npm install -g json-server
Criando o arquivo de banco de dados
Crie um arquivo de nome db.json em qualquer pasta do seu computador.
{
"produtos": [
{
"id": 1,
"nome": "Hambúrguer",
"descricao": "Pão, bife de hambúrguer 90g, salada e batata.",
"preco": 8.5,
"categoria_id": 1
},
{
"id": 2,
"nome": "X-Búrguer",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, salada e batata.",
"preco": 10.5,
"categoria_id": 1
},
{
"id": 3,
"nome": "X-Bacon",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, 2 fatia de bacon, salada e batata.",
"preco": 12.5,
"categoria_id": 1
},
{
"id": 4,
"nome": "X-Tudo",
"descricao": "Pão, 2 bifes de hambúrguer 90g, 2 fatias de queijo, 4 fatias de bacon, salada e batata.",
"preco": 14.5,
"categoria_id": 1
},
{
"id": 5,
"nome": "Coca cola 350ml",
"descricao": "",
"preco": 5.5,
"categoria_id": 2
},
{
"id": 6,
"nome": "Coca cola 600ml",
"descricao": "",
"preco": 7.5,
"categoria_id": 2
}
],
"categorias": [
{
"id": 1,
"nome": "Hambúrgueres"
},
{
"id": 2,
"nome": "Refrigerantes"
}
]
}
Iniciando o servidor
Agora é só rodar o comando abaixo e seu servidor estará iniciado. Lembrando que por padrão a API vai funcionar no enderço: http://localhost:3000
json-server --watch db.json
2 – Rotas
As rotas definem como você vai acessar a API.
As rotas são:
Request | URL | Detalhes |
---|---|---|
GET | /produtos | Busca todos os produtos |
GET | /produtos/1 | Busca um produto |
POST | /produtos | Salva um produto |
PUT | /produtos/1 | Atualiza dos os dados do produto |
PATCH | /produtos/1 | Atualiza parte dos dados do produto |
DELETE | /produtos/1 | Remove um produto |
As rotas vão ser compostas pelo endereço base (localhost:3000) mais o recurso que você quer acessar com por exemplo “produtos”.
Para executar os requests de exemplo abaixo você pode usar a ferramenta Postman (https://www.getpostman.com/) ou alguma outra de sua preferencia.
Para ver os resultados na pratica assista o vídeo acima ou execute os exemplos no seu computador.
Exemplos:
Exemplo 1: Buscar todos os produtos
Dados de envio
GET http://localhost:3000/produtos/
Content-Type: application/json
Retorno
[
{
"id": 1,
"nome": "Hambúrguer",
"descricao": "Pão, bife de hambúrguer 90g, salada e batata.",
"preco": 8.5,
"categoria_id": 1
},
{
"id": 2,
"nome": "X-Búrguer",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, salada e batata.",
"preco": 10.5,
"categoria_id": 1
},
{
"id": 3,
"nome": "X-Bacon",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, 2 fatia de bacon, salada e batata.",
"preco": 12.5,
"categoria_id": 1
},
{
"id": 4,
"nome": "X-Tudo",
"descricao": "Pão, 2 bifes de hambúrguer 90g, 2 fatias de queijo, 4 fatias de bacon, salada e batata.",
"preco": 14.5,
"categoria_id": 1
},
{
"id": 5,
"nome": "Coca cola 350ml",
"descricao": "",
"preco": 5.5,
"categoria_id": 2
},
{
"id": 6,
"nome": "Coca cola 600ml",
"descricao": "",
"preco": 7.5,
"categoria_id": 2
}
]
Exemplo 2: Buscar apenas um produtos
Dados de envio
GET http://localhost:3000/produtos/1
Content-Type: application/json
Retorno
{
"id": 1,
"nome": "Hambúrguer",
"descricao": "Pão, bife de hambúrguer 90g, salada e batata.",
"preco": 8.5,
"categoria_id": 1
}
Exemplo 3: Salvar um produto
Dados de envio
POST http://localhost:3000/produtos/
Content-Type: application/json
{
"nome": "Hambúrguer de frango",
"descricao": "Pão, bife de hambúrguer 90g de frango, salada e batata.",
"preco": 9.5,
"categoria_id": 1
}
Retorno
{
"nome": "Hambúrguer de frango",
"descricao": "Pão, bife de hambúrguer 90g de frango, salada e batata.",
"preco": 9.5,
"categoria_id": 1,
"id": 7
}
Exemplo 4: Alterar um produto
Dados de envio
PUT http://localhost:3000/produtos/1
Content-Type: application/json
{
"nome": "Hambúrguer de frango",
"descricao": "Pão, bife de hambúrguer 90g de frango, salada e batata.",
"preco": 10.5,
"categoria_id": 1
}
Retorno
{
"nome": "Hambúrguer de frango",
"descricao": "Pão, bife de hambúrguer 90g de frango, salada e batata.",
"preco": 10.5,
"categoria_id": 1,
"id": 1
}
Exemplo 5: Alterar apenas o nome de um produto
Dados de envio
PATCH http://localhost:3000/produtos/1
Content-Type: application/json
{
"nome": "Hambúrguer de frango artezanal"
}
Retorno
{
"nome": "Hambúrguer de frango artezanal",
"descricao": "Pão, bife de hambúrguer 90g de frango, salada e batata.",
"preco": 10.5,
"categoria_id": 1,
"id": 1
}
Exemplo 6: Excluir um produto
Dados de envio
DELETE http://localhost:3000/produtos/1
Content-Type: application/json
Retorno
Status: 200 OK
3 – Filtros
Para executar filtros é bem simples, você só precisa usar o nome das propriedades do objeto que você quer pesquisar.
No exemplo abaixo estou pesquisando por produtos que o nome é “X-Búrguer”
Dados de envio
GET http://localhost:3000/produtos?nome=X-Búrguer
Content-Type: application/json
Retorno
[
{
"id": 2,
"nome": "X-Búrguer",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, salada e batata.",
"preco": 10.5,
"categoria_id": 1
}
]
4 – Paginação
Para efetuar a paginação você vai usar o parâmetro “_page” e por padrão cada pagina vão ter 10 itens. Se você quer alterar a quantidade de itens é retornada por página, é só usar o parâmetro “_limit”.
No exemplo abaixo vou buscar a pagina 1 e quero 2 itens por página.
Dados de envio
GET http://localhost:3000/produtos/?_page=1&_limit=2
Content-Type: application/json
Retorno
[
{
"id": 2,
"nome": "X-Búrguer",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, salada e batata.",
"preco": 10.5,
"categoria_id": 1
},
{
"id": 3,
"nome": "X-Bacon",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, 2 fatia de bacon, salada e batata.",
"preco": 12.5,
"categoria_id": 1
}
]
5 – Ordenação
Para ordenar os dados, você pode usar os parâmetros “_sort” para informar qual campo vai sofrer a ordenação e “_order” para definir se ascendente ou descendente. Lembrando que é possível ordenar por mais de um campo.
No exemplo abaixo vou ordenar os produtos por nome e em ordem descendente.
Dados de envio
GET http://localhost:3000/produtos/?_sort=nome&_order=desc
Content-Type: application/json
Retorno
[
{
"id": 4,
"nome": "X-Tudo",
"descricao": "Pão, 2 bifes de hambúrguer 90g, 2 fatias de queijo, 4 fatias de bacon, salada e batata.",
"preco": 14.5,
"categoria_id": 1
},
{
"id": 2,
"nome": "X-Búrguer",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, salada e batata.",
"preco": 10.5,
"categoria_id": 1
},
{
"id": 3,
"nome": "X-Bacon",
"descricao": "Pão, bife de hambúrguer 90g, 1 fatia de queijo, 2 fatia de bacon, salada e batata.",
"preco": 12.5,
"categoria_id": 1
},
{
"nome": "Hambúrguer de frango",
"descricao": "Pão, bife de hambúrguer 90g de frango, salada e batata.",
"preco": 9.5,
"categoria_id": 1,
"id": 7
},
{
"id": 6,
"nome": "Coca cola 600ml",
"descricao": "",
"preco": 7.5,
"categoria_id": 2
},
{
"id": 5,
"nome": "Coca cola 350ml",
"descricao": "",
"preco": 5.5,
"categoria_id": 2
}
]
Referencias
- JSON Server: https://github.com/typicode/json-server
- Postman: https://www.getpostman.com/