Neste hands-on onde vou mostrar uma ferramenta que é bastante interessante no dia a dia, o Json-server. Primeiro vamos instalar: O que ele faz? Muitas vezes estamos criando uma aplicação apenas front-end, como React ou Angular e ele é uma rest API para podermos testar, trazer dados, alterar esses dados, etc. Ele permite…
por: Tulio Faria
Categoria: Video-Tutorial
Neste hands-on onde vou mostrar uma ferramenta que é bastante interessante no dia a dia, o Json-server.
Primeiro vamos instalar:
npm install -g json-serverO que ele faz?
Muitas vezes estamos criando uma aplicação apenas front-end, como React ou Angular e ele é uma rest API para podermos testar, trazer dados, alterar esses dados, etc. Ele permite que a gente faça isso de uma forma muito simples.
Vou criar um novo arquivo, por exemplo db.json, e dentro dele vou colocar o seguinte:
{ "produtos":\[
{"id": 1, "name": "bike"}
\]
}Criamos uma base de produtos onde tenho uma bicicleta com o ID 1. Com isso posso ir por exemplo no Shell e escrever:
json-server --watch db.jsonEle retorna que já temos um recurso, que é:
http://localhost:3000/produtosEsse produto é o key que foi criado, que seria como se fosse nosso banco de dados. Se abrirmos o Postman para testar, podemos colar essa url e dar um get, ele irá retornar nosso json.
Então podemos fazer uma requisição em jQuery, por exemplo, que ele já baixa. O mais legal é que podemos criar um produto novo copiamos o retorno do nosso get:
{
"id": 1,
"name": "bike"
}E depois mudamos o parâmetro para post e vamos postar um produto com ID 2. No body, temos que colocar que ele será em Raw
{
"id": 2,
"name": "carrinho"
}Se clicarmos em Send e voltarmos a dar um Get, ele retorna os dois produtos, então eu consigo criar um registro e retornar esse registro apenas fazendo isso. Podemos também fazer com um ID direto dessa maneira:
http://localhost:3000/produtos/1Ele retornará apenas o ID 1.
Perceba que ele transforma um Json em um banquinho de dados para podermos testar. À medida que vamos trocando, percebemos que o Json vai mudando também, então podemos criar essas alterações de uma forma persistida.
Use bastante, é uma ótima forma para poder ilustrar que está havendo uma comunicação com o servidor, e ele também é muito flexível, já vem com os métodos do HTTP implementados, então se quisermos excluir, podemos também. Não dá para usar em produção, seria muito inseguro, mas é possível para prototiparmos uma interface ou quem sabe um aplicativo móvel.
Deixe suas dúvidas e sugestões nos comentários. Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!