As configurações necessárias para um servidor funcionar devidamente podem demandar conhecimentos técnicos e, até mesmo, uma infraestrutura para que o back-end funcione perfeitamente. Às vezes precisamos fazer testes no front-end de nossas aplicações e páginas — é aí que entra o JSON-server, um servidor simulado virtualmente em sua máquina para a realização de testes.
Embora seja um recurso mais avançado, com dependências e módulos específicos para seu funcionamento, na prática, não é tão complicado. Veremos que existe uma estrutura facilitadora para a implementação dos mais diversos testes para que nossa aplicação esteja a melhor possível na hora de fazer o deploy.
Se ainda não sabe o que são essas ferramentas e nem como colocar um servidor em funcionamento, saiba que este guia foi feito para você. Nele, exploraremos os pontos principais de um servidor JSON, seu funcionamento e colocaremos todo esse conhecimento em prática juntos, criando um ambiente de testes de fácil implementação e muito efetivo no dia a dia da pessoa programadora.
Os tópicos que apresentaremos são:
- O que é o JSON Server?
- Como instalar um servidor JSON? Siga as instruções
- Como realizar as operações CRUD com o módulo JSON-server?
- Para que serve o JSON-server e quando usar?
Vamos lá?
O que é o JSON Server?
JSON-server é um dos pacotes do npm. O npm é o gerenciador nativo da linguagem Javascript, usado no ambiente de execução Node.js. Esse servidor fica responsável pela simulação de uma API completa, em poucos cliques, facilitando muito durante a realização de teste durante o período de desenvolvimento de Aplicações Web — principalmente, no front-end.
O módulo JSON-server atua na criação de uma simulação de serviços REST do JSON por um curto espaço de tempo. Se você ainda não sabe o que é uma API REST, confira neste artigo, os detalhes sobre esse tema.
Sua aplicação facilita muito o desenvolvimento de aplicações, pois dispensa a necessidade de configurações complexas, as quais envolvem configurações extensas do servidor, apenas para realizar testes básicos entre a comunicação de seus arquivos JSON e seu sistema em construção.
Como instalar um servidor JSON? Siga as instruções
A instalação de um servidor JSON está longe de ser complicada. Por ser um pacote do npm, temos apenas a necessidade de ter o Node.js instalado e configurado em nossa máquina. Se você ainda não está com esse ambiente de execução pronto, você pode baixá-lo no site do próprio Node.js.
Com tudo pronto, basta executar o seguinte comando no prompt:
$ npm install -g json-server
Pronto! Ou quase — para realizar os testes, precisamos apenas ter um arquivo contendo qualquer informação no formato JSON. Veja o que usamos em nosso exemplo, para ficar mais didático:
{
"cursos": [
{
"serie": 1,
"duração": 1,
"linguagem": "PHP",
"id": 1
},
{
"serie": 2,
"duração": 2,
"linguagem": "JavaScript",
"id": 2
},
{
"serie" : "1",
"duração": 3,
"linguagem": "JAVA",
"id": 3
},
{
"serie" : "1",
"duração": 4,
"linguagem": "COBOL",
"id": 4
},
{
"serie": 2,
"duração": 5,
"linguagem": "Python",
"id": 5
}
],
"prazos": [
{
"serie": 1,
"linguagem": "Pronto"
},
{
"serie": 2,
"linguagem": "Em produção"
}
]
}
Você pode copiá-lo em sua máquina, com o nome meuJSON, para ficar mais simples para você visualizar os resultados com o que traremos a seguir. Não se esqueça de adicionar a extensão .json no arquivo. Agora, você pode utilizar o seguinte comando:
json server --watch meuJSON.json
Ao apertar “Enter”, você verá algo bem parecido com isso:
\{^_^}/ hi!
Loading meuJSON.json
Done
Resources
http://localhost:3000/cursos
http://localhost:3000/prazos
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
Ao acessar, agora, o endereço de hospedagem local “http://localhost:3000”, você poderá visualizar essa página:
Pronto, agora já temos nosso servidor funcionando. Nas próximas partes deste guia, você poderá conferir como manipular esses dados em sua própria máquina. Tudo pronto?
Como realizar as operações CRUD com o módulo JSON-server?
Para aqueles que ainda não sabem, CRUD é uma sigla inglesa para “Create, Read, Update, Delete” — ou “Criar, Ler, Atualizar, Apagar”, em português. São, basicamente, os recursos mais necessários para qualquer operação que envolva armazenamento e leitura de dados. Todas as linguagens de programação são capazes de realizar essas operações em algum nível de abstração.
Essas operações podem ser feitas com auxílio do módulo JSON-server. Explicaremos como realizar cada uma delas em nossa simulação, apresentando cada um dos métodos separadamente — use seu navegador para aplicar o que você aprenderá no decorrer do guia.
Sobre o Postman
Para isso, usaremos um facilitador, o Postman, uma API Client, um aplicativo. Ele ajuda e facilita durante os períodos de teste de uma aplicação, monitorando o tráfego em nosso servidor JSON, resumidamente.
Com esse recurso, as pessoas desenvolvedoras podem testar, compartilhar, criar e documentar todo tipo de API. A ferramenta auxilia os usuários a criar e salvar solicitações HTTP e HTTPs. Com ela, podemos visualizar o que está sendo trafegado na conexão entre a aplicação e o nosso servidor simulado.
Existem outras aplicações: a API Gateway da Amazon e Insomnia são alguns dos exemplos possíveis. Se você se interessa pela área de testes no desenvolvimento de aplicações, é bom conhecer cada uma delas para escolher a melhor para suas necessidades. Acompanhe, na sequência, os principais métodos utilizados nas requisições e como fazer os primeiros testes, na prática!
GET
O primeiro deles é o método http GET. A palavra pode ser traduzida por “pegue”. Ou seja, o nosso módulo JSON-server realizará uma requisição e nos mostrará as informações disponíveis naquele arquivo JSON que realizamos upload, anteriormente. Podemos fazer isso usando código HTTP:
GET http://localhost:3000/cursos/
Content-Type: application/json
Uma alternativa é apenas abrir a página do Postman, selecionar GET e adicionar nosso endereço (http://localhost:3000/cursos), e enviar. Em ambos os casos, o servidor retornará nosso arquivo JSON que salvamos no começo de nosso tutorial.
POST
O método POST funciona como um criador de chaves e valores. Para aplicá-lo, usamos o seguinte código para a requisição:
POST http://localhost:3000/cursos/
Content-Type: application/json
Fazendo isso, criaremos um novo curso em nosso arquivo JSON. O servidor retornará a seguinte informação:
{
"id": 6
}
Como você pode perceber, na lista que usamos, só temos cinco tipos de cursos, ou seja, cinco números de “id”, portanto. O método POST cria um a mais, e já define automaticamente que esse próximo objeto terá, por padrão, o “id” de número 6, sem precisarmos especificar essa tarefa.
PUT
Agora que criamos um novo objeto curso a partir do método POST, podemos usar a requisição PUT para incluir um novo curso nessa nova posição. Para isso, usamos o seguinte código:
PUT http://localhost:3000/cursos/6
Content-Type: application/json
{
"serie": 1,
"duração": 1,
"linguagem": "C#",
"id": 6
}
Esse comando incluirá um novo curso no espaço reservado ao “id : 6”. Em aplicações como o Postman, incluímos o mesmo endereço, colocamos no modo “PUT” e preenchemos as informações do JSON na aba “raw” — no mesmo espaço em que os objetos em JSON são exibidos.
PATCH
A requisição PATCH pode ser interpretada como um conserto. Isso porque apenas faremos alterações em nosso JSON. Por exemplo, se quisermos mudar o nome da linguagem no caso do exemplo anterior, usaremos o seguinte código:
PATCH http://localhost:3000/cursos/6
Content-Type: application/json
{
"linguagem": "C++",
}
O console deverá imprimir a seguinte resposta, alterando apenas o valor que contém a chave “linguagem”:
{
"serie": 1,
"duração": 1,
"linguagem": "C++",
"id": 6
}
Caso esteja utilizando algum dos aplicativos de gerenciamento de requisições, basta preencher a alteração no arquivo na aba “raw” e enviar a requisição PATCH para o mesmo endereço.
DELETE
A requisição DELETE serve para apagar determinada entrada. Podemos fazer requisições DELETE para o objeto todo dessa maneira:
Delete http://localhost:3000/cursos/6
Content-Type: application/json
Saída:
Status: 200 OK
Perceba que nosso arquivo JSON já não tem mais o sexto elemento. Fácil, não é mesmo?
Para que serve o JSON-server e quando usar?
Agora que já conferimos se está tudo certo com nossa API REST feita com poucos toques de teclado e cliques do mouse, podemos usar o método GET para ter as informações contidas em nosso JSON. Com o seu servidor ainda aberto, digite o seguinte endereço em seu browser:
http://localhost:3000/cursos?linguagem=Python
Você terá uma página com as informações dos cursos inseridos em nosso JSON que ocupem o valor Python, na chave descrita como “linguagem”:
[
{
"serie": 2,
"duração": 5,
"linguagem": "Python",
"id": 5
}
]
Acessando aqueles dados que você copiou para um arquivo JSON, lá no começo de nosso guia, de uma nova maneira, talvez fique mais fácil entender as funcionalidades dessa ferramenta no mundo real, não é mesmo?
Imagine que, no decorrer do desenvolvimento de um sistema em que você participe, exista uma série de contextos representados por meio de JSON no front-end do projeto. Realizar investigações sobre o processamento e o armazenamento desses dados, em produção, é inviável — devido aos riscos e demais problemas que essas atitudes possam acarretar.
Para resolver esse problema, utilizamos uma simulação de um servidor para testar cada requisição e troca de informações, buscando possíveis problemas de mau funcionamento. A maioria das empresas usa esses ambientes, fazendo o conhecimento desses recursos ser essencial para qualquer pessoa iniciante no mundo da programação.
Nosso guia chegou ao fim! Aprendemos, no decorrer dele, que a importância do módulo presente no Node.js JSON-server reside na facilitação de testes e na criação de um ambiente seguro para o desenvolvimento front-end, sem a necessidade de programar toda uma API para a realização de testes simples em nossas Aplicações Web.
Quer entender mais sobre APIs e as principais tecnologias do momento, mas ainda não sabe muito bem por onde começar? Então faça a inscrição em nosso processo seletivo, acesse nosso curso introdutório gratuito de JavaScript e tire todas as suas dúvidas em nossa comunidade do Slack.
Venha com a Trybe e garanta seu espaço no mercado de desenvolvimento! Tem alguma dúvida? Entre agora mesmo em contato com a gente e descubra mais!
