Desenvolvimento

13 set, 2017

Criando uma aplicação simples no padrão REST/API – com JavaScript /ES6 e Strongloop/Loopback

Publicidade

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:

  • Requisições HTTP com Fetch do JavaScript;
  • Criação de uma API REST com LoopBack.

 

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 promptcmd 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:

Criando uma aplicação simples no padrão REST/API — com JavaScript /ES6 e Strongloop/Loopback

Asim que o download dos pacotes finalizar, estarão disponíveis os seguintes passos:

Criando uma aplicação simples no padrão REST/API — com JavaScript /ES6 e Strongloop/Loopback

  • 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:

  1. Entre no diretorio da API;
  2. 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.

  1. 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 uma aplicação simples no padrão REST/API — com JavaScript /ES6 e Strongloop/Loopback

  • Criando as propriedades do Modelo

 

Criaremos em nossa API, as seguintes propriedades:

  • id (number)
  • nome (string)
  • email (string)

 

Criando uma aplicação simples no padrão REST/API — com JavaScript /ES6 e Strongloop/Loopback

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.

Criando uma aplicação simples no padrão REST/API — com JavaScript /ES6 e Strongloop/Loopback

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 uma aplicação simples no padrão REST/API — com JavaScript /ES6 e Strongloop/Loopback

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

Criando uma aplicação simples no padrão REST/API — com JavaScript /ES6 e Strongloop/Loopback

É 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!

Links e referências