Curso Angular 2 – Aula 10: Acesso HTTP a um servidor remoto

Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 10 é ensinar como configurar e realizar acessos HTTP a servidores remotos no Angular 2.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você entenderá como configurar e implementar acessos HTTP a servidores remotos no Angular 2.

1. Definição

O Angular 2 é um framework front-end, e a menos que você crie uma aplicação que possa manter os dados todos localmente no navegador, você certamente precisará acessar um servidor remoto utilizando conexões HTTP para isso.

O Angular 2 possui um módulo específico para os principais acessos HTTP tornando nossas vidas bem mais simples.

Para a aula de hoje também criaremos nosso próprio servidor web em NodeJS, utilizando o framework LoopBack / StrongLoop, permitindo um aprendizado por completo em relação a implementação e comunicação entre back-end e front-end.

2. Criando uma API RestFul com o LoopBack / StrongLoop

O LoopBack é um framework altamente extensível e open source criado para o NodeJS.

Tamanho sucesso fez com que a IBM e o StrongLoop o adquirissem para mantê-lo e ajudá-lo com melhorias e implementação de novos recursos.

A escolha do LoopBack / StrongLoop para essa aula é devido ao fato da facilidade de implementação, e como você na sequência, é possível criar uma API RestFul completa com um esforço mínimo, além de utilizar o NodeJS, fazendo com que focamos em implementações JavaScript.

Para começar a criação da nossa API RestFul de gerenciamento de alunos, devemos instalar o pacote NPM do LoopBack / StrongLoop, conforme comando a seguir:

Caso você receba alguma mensagem de erro referente a permissão de acesso, execute o comando a seguir como administrador do sistema. Em sistemas Unix ficaria assim:

Após a instalação do LoopBack / StrongLoop, devemos criar nossa API RestFul, que será responsável por gerenciar nosso cadastro de alunos estudado na aula anterior.

Para isso ainda no console, navegue até o diretório onde deseja criar o projeto e execute o seguinte comando:

Um assistente de criação de projeto será executado, entre com as seguintes informações no assistente:

PerguntaResposta
Nome da aplicaçãoapi-aluno
Nome do diretórioapi-aluno
Tipo de aplicaçãoapi server (primeira opção exibida)
Versão do LoopBack3.x

Aguarde a criação dos arquivos do projeto e pronto, já temos uma API RestFul completa para uso!

Para executar a aplicação acesse o diretório da api e execute o comando abaixo:

Acesse a url http://0.0.0.0:3000/explorer para visualizar uma interface que contém toda a documentação de nossa API Restful, que até agora inclui as instruções para gerenciar usuários (Users) utilizados para autenticação em nossa API.

Com o servidor configurado e funcionando, vamos agora criar a API de gerenciamento de alunos, para isso execute no console com o servidor parado (Ctrl + C no console):

Entre com as seguintes informações no assistente que será exibido:

PerguntaResposta
Nome do modelaluno
Data sourcedb (memory)
Classe basePersistedModel
Expor via Rest APISim (Y)
Nome no pluralalunos
Modo comum ou servidorComum (common)
Nome do primeiro atributoid
Tipo do atributoNumérico (number)
ObrigatórioSim (Y)
Valor padrãoDeixar em branco
Nome do segundo atributonome
Tipo do atributoTexto (string)
ObrigatórioSim (Y)
Valor padrãoDeixar em branco
Nome do terceiro atributoemail
Tipo do atributoTexto (string)
ObrigatórioSim (Y)
Valor padrãoDeixar em branco
Aperte ENTER para finalizar

Pronto, com isso no diretório ‘common/models’ foram criados dois arquivos, ‘aluno.js’ e ‘aluno.json’.

Execute o servidor novamente e explore a API criada (http://0.0.0.0:3000/explorer):

Para finalizar nossa API RestFul, vamos agora adicionar um controle de acesso para nossas URLs. Esse controle de acesso apenas restringirá o acesso a todas as nossas APIs a usuários autenticados no sistema.

O controle de acesso será adicionado executando a seguinte instrução no console na raíz da aplicação:

A seguir entre com as seguintes instruções no assistente que será exibido:

PerguntaResposta
Selecione o modelaluno
Escopo do ACLTodos os métodos (All methods and properties)
Tipo de acessoTodos (All)
Perfil de usuárioTodos (All users)
Permissão de acessoNegar para todos (Explicitly deny access)

Execute mais uma vez o assistente, mas agora com as seguintes instruções:

PerguntaResposta
Selecione o modelaluno
Escopo do ACLTodos os métodos (All methods and properties)
Tipo de acessoTodos (All)
Perfil de usuárioUsuários autenticados (Any authenticated user)
Permissão de acessoHabilitar para todos (Explicitly grant access)

Devemos primeiramente negar o acesso para todos os usuários, então criar uma regra para permitir o acesso a usuários autenticados no servidor.

Seu arquivo aluno.json deve conter o seguinte conteúdo agora:

Com isso terminamos a implementação da nossa API RestFul, execute a aplicação e realize alguns testes para se familiarizar com seu funcionamento.

Nesse momento temos:

  • API RestFul completa escrita em NodeJS com LoopBack / StrongLoop
  • API para gerenciamento completo para nosso modelo de aluno
  • Controle de acesso a nossa API RestFul

3. Criando um serviço utilitário para acesso HTTP

Visto que a maioria das requisições HTTP seguirão um mesmo padrão, vamos primeiramente criar um serviço utilitário para nos ajudar a executar as operações HTTP, que incluirão a geração da URL, criação dos headers, e processamento das mensagens de retorno e erros.

Segue abaixo o código do serviço utilitário para requisições HTTP:

Uma vez que a comunicação será realizada usando dados no formato JSON, no método ‘headers’ realizamos essa configuração para que nossas requisições sigam esse padrão.

Em ‘extrairDados’ fazemos a conversão de resposta (response) para o formato JSON, e em ‘processarErros’ apenas retornamos um erro genérico caso ocorra algum erro de comunicação com o servidor.

4. Configurando o módulo HTTP na aplicação

Para configurar nossa aplicação para suportar o HTTP, iremos carregar o módulo HTTP e nosso serviço utilitário na inicialização da aplicação, conforme código a seguir:

Existem basicamente duas formas similares de executar uma requisição HTTP, sendo elas usando Promises ou Observers.

Promises são mais simples porém menos poderosos que observers, e como o Angular 2 oferece suporte para Observers, que pode ser muito poderoso e cheio de recursos, iremos utilizá-los aqui ao invés das Promises.

Observers fazem parte do módulo RXJS, que é um módulo grande e pesado, por isso existe a possibilidade de carregarmos apenas alguns de seus utilitários, que é o que faremos no código a seguir:

O código acima contém até mais recursos dos que os utilizados nessa aula, mas mantive todos para já deixar os principais recursos configurados para ações mais avançadas.

Para termos esses recursos disponíveis, devemos importá-lo em nosso componente principal, conforme código a seguir:

Pronto, com isso já podemos implementar nossas requisições HTTP!

5. Implementando a tela de login

A tela de login consistirá em uma requisição ao servidor HTTP para obter um token de acesso dado um usuário e senha, conforme código a seguir:

Repare que devemos injetar no construtor dois serviços, o HTTP e o nosso HTTPUtil criado anteriormente.

Depois no método ‘login’ chamamos o método ‘post’ do serviço HTTP, que nos retornará um Observer, que é um objeto assíncrono e que será notificado após o servidor retornar as informações requisitadas.

Na requisição acima registramos duas ações no Observer, a ‘map’ e ‘catch’, que deverão ser processadas em caso de sucesso ou erro, respectivamente.

Já nosso componente (com a view como template inline) ficará conforme o código a seguir:

A grande diferença na utilização do Observer é que devemos usar o método ‘subscribe’ para ser notificado do retorno da requisição, que executará o código contido dentro dele para os casos de sucesso e erro, sendo o primeiro e segundo bloco de código, respectivamente.

Os métodos ‘map’ e ‘catch’ do Observer serão responsáveis por converter os dados de retorno do servidor, enquanto que o código utilizado pelo método ‘subscribe’ será responsável por utilizar os métodos previamente tratados/formatados pelo Observer.

No bloco de código da view apenas criamos uma caixa de alerta que será exibido no caso de algum erro.

6. Implementando o serviço de acesso HTTP dos alunos

Nosso serviço de alunos será o responsável por efetuar todas as requisições HTTP para listar todos, cadastrar, atualizar, visualizar e remover um aluno.

Todas as requisições serão realizadas com o uso de Observers em conjunto com o módulo HTTP do Angular 2, e nosso serviço HTTP utilitário.

Usaremos quatro verbos distintos do HTTP para realizar tais ações, seguindo as definições de uma API Restful, sendo elas:

Verbo HTTPAcao
GETLista todos os alunos / listar aluno por ID
POSTCadastrar novo aluno
PUTAtualizar dados de um aluno
DELETERemover um aluno por ID

Abaixo seguem as implementações no serviço citadas na tabela acima:

Basicamente todas seguem um mesmo padrão, onde a variação ocorre mesmo no verbo HTTP utilizado.

7. Implementando a tela de listagem de alunos

Com o serviço de aluno devidamente implementado devemos apenas fazer a utilização do mesmo.

Toda a parte que envolve a requisição foi implementada no serviço, bastando agora apenas implementarmos o método ‘subscribe’ para utilizar os dados retornados pelo servidor remoto.

Segue o código do componente:

Segue o código da view:

8. Implementando a tela de cadastro de alunos

Seguindo a mesma lógica utilizada anteriormente na listagem de alunos, a seguir temos o código do componente de cadastro de alunos:

E a seguir o código da view:

9. Implementando a tela de Edição de alunos

Seguindo a mesma lógica utilizada anteriormente, a seguir temos o código do componente de edição de alunos:

E a seguir o código da view:

10. Implementando a tela de visualização de alunos

Por fim, segue o código para visualizar um aluno:

E a seguir o código da view:

Clique para fazer o download dos arquivos do template base da aula 10.

Clique para fazer o download dos arquivos do projeto completo desenvolvido na aula 10.

22 comentários em “Curso Angular 2 – Aula 10: Acesso HTTP a um servidor remoto

  1. Márcio, é possível desenvolver uma aplicação com Angular no estilo TDI ou MDI.
    Tenho um ERP em Forms/Reports Oracle, e quero converte-lo pra web,.
    Estou, no momento, tentando com JSF/Primefaces. Porém não consegui deixa-lo de uma maneira que seja possível o usuário alternar entre paginas sem que tenha que abrir uma nova aba do navegador.

    Em minhas pesquisas, vi que o EXTJS da Sancha permite isto, porém a licença está muito cara.

    Por isso, venho pesquisando mais o Angular 2.

    1. Olá Sérgio. Sim é possível criar praticamente qualquer tipo de interface com o Angular 2, o que você terá que ver mesmo é como fazer para criar uma API Restful no Forms/Reports para ser consumida pelo Angular 2.

  2. Gostaria de saber se tem alguma forma para facilitar a publicação da aplicação depois de pronta, que minifique os arquivos e elimine o que não será necessário em produção ?

    1. Olá Mack,

      existe sim, e embora não abordarei nesse curso, estarei disponibilizando na sequência um artigo específico para isso.

      A publicação pode ser feita de algumas formas distintas, mas a que devemos estudar deverá ser utilizando o WebPack, que é o framework recomendado pela própria equipe do Angular 2 e que atende bem o que precisamos.

  3. Márcio, existe uma diferença conceitual entre o service criado no angular 1 e o service criado no angular 2?
    Pelo que sei os services no angular 1 são singletons, mas pelo que pude perceber no angular 2 são instâncias separadas. É isto mesmo?
    Obrigado.

    1. Na verdade os serviços no Angular 2 são herdados entre componentes, de pai para filho, mas ele continua sendo um singleton da mesma forma como no Angular 1.

  4. Márcio,
    Parabéns pelo curso. Excelente apresentação e material. Melhor que muito curso pago por aí. Estou ansioso pelos próximos.
    Até a aula 9 tudo funcionou perfeitamente, mas ao final da aula 10, não sei se perdi alguma coisa, mas deu erro ao editar aluno.
    No método “atualizar” do serviço “AlunoService”, o path da chamada do put está sem o parâmetro “id”. Se adicionar o parâmetro ( + ‘/’ + aluno.id), tudo funciona. Segue o método corrigido:

    atualizar(aluno: Aluno) {
    let params = JSON.stringify(aluno);

    return this.http.put(
    this.httpUtil.url(this.path + ‘/’ + aluno.id),
    params,
    this.httpUtil.headers()
    )
    .map(this.httpUtil.extrairDados)
    .catch(this.httpUtil.processarErros);
    }

    1. Olá Cláudio,

      certifique que você instalou o strongloop globalmente com o comando:

      sudo npm install -g strongloop

      Após a instalação, verifique no terminal a versão dp slc com o seguinte comando:

      slc –version

      A versão do dlc deve ser exibida e agora ele deverá funcionar corretamente.

  5. Sr. Kazale, Boa tarde,

    Em primeiro lugar muito obrigado por suas aulas e disponibilidade para faze-las,
    Gostaria de saber se é possível publicar essas apis – do strongloop em um servidor apache normal, sem a necessidade da IBM ou algum serviço pago.

    1. Obrigado Ricardo!

      No Apache não é possível porque é preciso um servidor NodeJS para isso. A IBM mantém o loopback (https://loopback.io) que é um projeto open source e gratuito que anda lado a lado com o strongloop, então basta você publicar ele em um servidor que tudo funcionará sem problemas ou despesa alguma.

  6. Boas amigo venho acompanhando suas aula muito didatico, tentei me aventurar com o conector mysql, tudo deu certo mais so tenho a duvida como fazer o meu sistema de login recuperando do banco de dados, pois na api tem como padrão “users” que ja vem integrado na proprio strongloop para teste.

    Ajudaria muito Obrigado.

    1. Olá Flávia, a melhor forma de fazer isso é utilizando o *ngIf contendo uma variável com a indicação se o usuário está ou não autenticado no sistema.

  7. Como fazer algo do tipo?

    processarErros(erro: any) {
    return Observable.throw(alert(‘Erro acessando servidor remoto, Serviço HTTP’));
    this.router.navigate([‘/home’]); <——————————————————————-
    }

    1. Olá Júnior.

      Nesse caso você deverá fazer esse tratamento no retorno do Observer, que seria o segundo método do ‘subscribe’ que você utilizará para se inscrever nesse serviço. O ‘subscribe’ possui dois métodos de retorno, um para sucesso, e o segundo para falha, que é onde você deverá fazer esse tratamento.

  8. olá Kazale, como faço para tratar o retorno 204 em um delete? No exemplo acima qualquer retorno diferente de 200 a mensagem de erro é exibida.

    1. Olá Manoel,

      nesse caso você precisaria ver como modificar o código para obter o código de retorno do erro, assim você conseguiria dentro do erro mesmo, direcionar para o tratamento adequado de acordo com o erro retornado.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

2 + sete =