Simulando uma API REST com JSON Server de maneira simples

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

  1. Começando com JSON Server
  2. Rotas
  3. Filtros
  4. Paginação
  5. 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