Simulando uma API Restful parte I.

Já precisou testar seu código Front-end ou aquele novo framework MVVM e interagir com uma API? Já teve que configurar um servidor em Node.js ou escrever monte de código para simular uma API.

Salvar os dados em um arquivo local ou ainda configurar um MongoDB só para realizar alguns testes ou modelar uma API e interagir com os verbos HTTP: 1. GET 2. POST 3. PUT 4. DELETE 5. OPTIONS

Felizmente temos uma alterantiva para isso, com pouquissimas linhas de código podemos simular um API Restful e interagir com ela, não apenas utilizando o método GET mas todos os outros, sem configurar um banco de dados.

Vamos ver como isso é possível neste primeiro post sobre o assunto.

Instalando as ferramentas necessárias!

Abra seu Terminal/Shell e digite:

npm install -g json-server

Agora instale a extenção do Chrome para testes de HTTP/REST/Client neste link.

Neste momento já temos o necessário para esta primeira parte, então mãos a obra.

Iniciando o projeto API de testes.

Crie uma nova pasta onde preferir e abra seu Terminal/Shell nela.

Agora, crie um arquivo chamado db.json e insira o seguinte código:

{
  "band": [
    {
      "name": "Metallica",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      "active": true,
      "id": 0
    }
  ]
}

Este código vai funcionar como uma especie de Model algo similar ao que fariamos utilizando o mongoose.

Iniciando o servidor.

Agora, vamos iniciar o servidor e ver o resultado.

Abra seu Terminal/Shell e digite:

json-server db.json

Abra seu navegador e acesse a url localhost:3000/band.

Você vai ver o resultado abaixo:

JSON VIEW
Servidor Rodando

Esta formatação do browser é devido ao jsonview uma extenção do Chrome para facilitar e visualização de arquvios JSON.

Adicionando Registros.

Para adicionar registros em nosso arquivo, você pode utilizar qualquer REST/Client, mas neste exemplo vamos utilizar o que instalamos logo acima.

Então abra o dhc-resthttp-api-client e vamos inserir os seguintes dados, conforme a imagem:

dhc-restclient
DHC RestClient

Note: que adicionei um campo para imagem.

Você pode notar que após clicar no botão Send, logo abaixo já tem o resultado da requisição:

dhc-restclient
201 Created

Agora é só alterar o verbo para GET e enviar novamente para ver o resultado:

dhc-restclient
GET

Ou ir direto no browser e acessar: localhost:3000/band.

Consultando Registros.

Além de toda essa facilidade, podemos consultar registros individualmente e altera-los.

No exemplo anterior, podemos ver dois registros, um com imagem e outro sem, então vamos adicionar uma imagem ao registro 0.

Altere o verbo para PUT.

Passe o id no final do endpoint: localhost:3000/band/0.

Adicione o campo picture e o link para imagem: http://placehold.it/350x150.

Clique em Send.

Logo após o envio você já pode conferir o resultado, no console logo abaixo.

No próximo post, mostro como inserir mais dados de uma forma diferente.

comments powered by Disqus