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

Danilo Agostinho
Aug 28, 2017 · 4 min read

Olá meus queridos esses dias tenho feito um exercício bem bacana que acessa uma API REST em nodejs.

Gostei tanto que resolvi compartilhar aqui com vocês porque penso que conhecimento, por mais simples que seja, deve ser compartilhado. :P

Nesse post 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 pode ser acessado via protocolo HTTP, que por sua vez esse protocolo possui alguns métodos que são:

  • 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 ou cmd do windows, ou até mesmo o terminal do seu sistema operacional e digite o comando

Caso não consiga instala-lo pode ser que você não tenha permissão, logo digite o comando:

Aguarde o download dos pacotes do npm- pode demorar um pouco, então tenha paciência. :D

Ponto de partida (Criando a API)

Para dar o ponta pé incial e criar a API REST digite:

Neste momento uma interface do Yeoman será exibido 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 essas informações de acordo 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:

  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, ele será usada para ser acessada via GET.

  1. Execute a API e visualize-a no endereço localhost:3000/#explorer

Caso tenha alguma dificuldade em fazer os passos 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 esses dados.

Agora basta executar o servidor para visualizar a API no navegador.

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.

E o JavaScript é bem simples também

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 alguém feedbacks são bem vindos grande abraço!

Links e referências


Front-end e afins

Blog para compartilhar coisas interessantes e úteis

)

    Danilo Agostinho

    Written by

    Front-end developer. Autor @Imasters. Mentor Traning Center. @danilodev_silva

    Front-end e afins

    Blog para compartilhar coisas interessantes e úteis

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade