Tenho feito um exercício bem bacana que acessa uma API REST em nodejs. Gostei tanto que resolvi compartilhar com vocês porque penso que conhecimento, por mais simples que seja, deve ser compartilhado.
Neste artigo veremos:
Não deve ser segredo para você que tudo na web são requisições Ajax, e boa parte das coisas são acessadas via protocolo HTTP, que por sua vez possui alguns métodos:
- GET (Requisição do navegador ao servidor)
- POST (Envio de informações para o servidor)
- PUT (Atualização assíncrona tanto do cliente quanto do servidor)
A ordem não altera o fator
Vamos começar desenvolvendo a API para consumo no JavaScript. Como foi mencionado o Loopback é um Framework desenvolvido em nodejs que facilita e muito a criação de um REST para consumo.
Antes de continuar certifique-se de ter instalado o nodejs, ele é muito importante para nosso exemplo.
Instalação do Loopack
Abra o Nodejs command prompt, cmd do windows ou o terminal do seu sistema operacional. Digite o comando:
npm install -g strongloop
Caso não consiga instala-lo pode ser que você não tenha permissão, logo digite o comando:
sudo npm install -g strongloop
Aguarde o download dos pacotes do npm. Pode demorar um pouco, então tenha paciência.
Ponto de partida (Criando a API)
Para dar o ponta pé incial e criar a API REST digite:
slc loopback
Neste momento uma interface do Yeoman será exibida com os seguintes campos:
- Nome da aplicação Loopback (nome da API)
- Versão da aplicação (versão da API)
- Api-server (Se vamos dispor nossa aplicação em REST)
Preencha estas informações de acordo com o gif abaixo:
Asim que o download dos pacotes finalizar, estarão disponíveis os seguintes passos:
- cd heros (Entrar na pasta da API)
- slc loopback:model (Criar um modelo da API)
- node . (Executa o servidor com a API disponível na porta 3000)
Vamos seguir os passos seguintes:
- Entre no diretorio da API;
- Crie o modelo REST.
Dê um nome para o modelo, ele será o nome da API de consumo que criaremos e será usada para ser acessada via GET.
- Execute a API e visualize-a no endereço localhost:3000/#explorer
Caso tenha alguma dificuldade fique a vontade pra seguir o gif. Este Gif será dividido em algumas partes para facilitar a compreensão e ajudá-lo no passo a passo.
- Criando o modelo
- Criando as propriedades do Modelo
Criaremos em nossa API, as seguintes propriedades:
- id (number)
- nome (string)
- email (string)
Dentro de common > models foi gerado um arquivo chamado heros.json, nele temos todas as propriedades que acabamos de criar, sem falar na possibilidade de customizar a qualquer momento os dados.
Agora basta executar o servidor para visualizar a API no navegador.
node .
Agora é só brincar com o resultado.
Cadastrando Heros
Essa parte exige que você entenda um pouco do padrão REST e dos métodos de acesso, mas para facilitar as coisas siga os passos abaixo:
Criando o JavaScript pra acessar a API
Agora o negócio fica por conta do front (cliente), vamos criar o seguinte html.
<!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CRUD - Mentoria</title> <link rel="stylesheet" href="main.css"> </head> <body> <main> <h2>My Heroes</h2> <div class="addHero"> <h3>Hero Name:</h3> <input type="text" name="heroname" value=""> <button type="submit">Add</button> </div> <ul class="heroList"> <li><span class="numero">01</span><span class="heroName">Zero</span> <button class="delHero">x</button></li> </ul> </main> <script src="main.js"></script> </body> </html>
E o JavaScript é bem simples também:
function carregaHeros() { setTimeout(function() { let heros = fetch('http://localhost:3000/api/heros'); heros .then(data => data.json()) .then(data => data.map(hero => { let _ul = document.getElementsByClassName("heroList")[0]; console.log(_ul); let _li = _ul.childNodes[1]; _li = _li.cloneNode(true); let _spanNum = _li.getElementsByClassName('numero')[0]; let _spanName = _li.getElementsByClassName('heroName')[0]; _spanNum.innerHTML = hero.id; _spanName.innerHTML = hero.nome; _ul.appendChild(_li); })) .catch(err => console.error(err)) }, 300); }
Resultado final
É isso pessoal, não foquei muito nos conceitos de Vanilla JS (JavaScript puro), mas qualquer dúvida pode postar nos comentários. Espero ter ajudado e feedbacks são bem-vindos.
Grande abraço!