Angular: comunicando-se com uma API via requisições HTTP

Comunicação com o backend - Apresentação

Que tal aprender a utilizar o protocolo HTTP para integrar e comunicar a sua aplicação Angular a um back-end? A Nayanne Batista te dá as boas-vindas a mais um curso de Angular.

Audiodescrição: Nayanne Batista se identifica como uma mulher de pele morena. Tem olhos castanhos e cabelos longos e lisos castanho-escuros. Está com uma blusa laranja. Ao fundo, estante de livros com iluminação azulada.

O que vamos aprender?

Neste curso, vamos utilizar o projeto Indexa, a nossa agenda de contatos. Você vai entender como utilizar o HttpClient do Angular para fazer requisições do tipo HTTP, utilizando os métodos GET, POST, PUT, DELETE e, assim, conseguir enviar e obter dados do servidor.

Para isso, você também vai entender como funcionam os observables (observáveis) e o que é necessário fazer para obter informações deles.

Na parte de roteamento, você vai entender como passar parâmetros nas rotas. Além disso, vamos utilizar boas práticas e fazer algumas melhorias no final do projeto, como, por exemplo, a componentização e a reutilização de componentes em diferentes partes da aplicação.

Pré-requisitos

Para fazer este curso, você precisa ter conhecimento prévio sobre HTML e CSS, assim como ter uma base de TypeScript. Também é preferível ter feito os cursos anteriores, onde já vinhamos desenvolvendo o projeto que vamos finalizar neste curso.

Se você aceita este desafio, então venha conosco mergulhar no Angular!

Comunicação com o backend - Configurando o ambiente de desenvolvimento com JSON Server

Que bom que você está aqui conosco para continuar o desenvolvimento do projeto Indexa, a nossa agenda de contatos. O foco neste curso será aprender como fazer a comunicação da nossa aplicação Angular com o back-end. E como podemos fazer isso?

Será que precisamos aprender uma linguagem back-end, como Java, por exemplo, e desenvolver uma API para só então entender como funciona essa integração? A boa notícia é que não. Esse cenário é tão comum que já existem ferramentas que nos auxiliam com isso.

No mercado de trabalho, é muito comum você, como pessoa desenvolvedora front-end, e o seu time estarem desenvolvendo a aplicação enquanto o time de back-end está simultaneamente desenvolvendo a API. Por isso, muitas vezes, você não tem uma API pronta para fazer essa integração. Nesse caso, vamos utilizar uma ferramenta chamada JSON Server.

Para isso, vamos acessar o navegador e buscar por "json-server". O primeiro link que aparece é a documentação do JSON Server, onde temos algumas informações, como as versões e o comando para instalar, que é o npm i json-server.

O segundo link que aparece na pesquisa é o do GitHub do JSON Server, que também tem algumas informações. Inclusive, no canto superior direito, há uma seção de About (sobre), que numa tradução livre diz: "Obtenha uma API REST fake com zero código em menos de 30 segundos". Será que conseguiremos fazer isso? Vamos lá.

Criando arquivo de configuração para o back-end

Vamos acessar o VS Code. Como teremos tanto o back-end quanto o front-end na sua máquina, vamos criar uma pasta reservada para o back-end para conseguir executar a API.

No menu lateral esquerdo, na parte superior, vamos clicar nos três pontinhos, em "New Folder", na raiz do projeto. Assim, poderemos criar uma pasta chamada "backend".

Agora, vamos abrir o terminal com o atalho "Ctrl + J" para entrar nessa pasta. Atualmente, o caminho mostra que estamos na pasta 3655/indexa. Para conseguir acessar essa pasta, vamos digitar cd backend/. Se você começar a digitar e teclar "Tab", ele autocompleta.

cd backend/

Agora, sim, estamos na pasta "backend". Dentro dessa pasta, vamos digitar o comando npm init -y. Esse comando vai criar um arquivo de configuração, um package.json, dentro da pasta "backend".

npm init -y

Ao acessar esse arquivo, já temos algumas configurações. Criamos esse arquivo para conseguirmos modificar um script para iniciar essa aplicação.

package.json:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Instalando JSON Server

Agora, vamos instalar o JSON Server. O comando para isso é npm i ou npm install seguido da flag -g json-server para instalá-lo de forma global.

É importante que você utilize a mesma versão que vamos utilizar para evitar algumas incompatibilidades e possíveis erros no código. Por isso, vamos passar também a versão especificada, que é @0.17.4.

npm i -g json-server@0.17.4

Depois de apertar "Enter" e baixar essa ferramenta, podemos conferir a versão digitando json-server -version.

json-server -version

Aparecerá a versão que foi baixada:

0.17.4

Configurando o JSON Server

Agora, vamos alterar os scripts do package.json. Onde está escrito test na linha 7, vamos mudar para start. Vamos apagar o conteúdo que está entre aspas duplas na linha 7 e digitar outro comando: json-server --watch db.json --port 3000.

package.json:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "json-server --watch db.json --port 3000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Para executar essa API, teríamos que digitar todo esse comando. Para facilitar e conseguirmos rodar essa API só com o comando npm start, fizemos essa mudança nesse script.

O que esse comando significa? Ele indica que essa ferramenta vai ficar monitorando o arquivo db.json na porta 3000. Ainda precisamos criar esse arquivo db.json.

Acessando o menu lateral esquerdo, dentro da pasta "backend", vamos clicar com o botão direito e escolher "New file". Vamos nomeá-lo como db.json.

Será nesse arquivo onde criaremos os endpoints da API. Nele, vamos colar as informações de dois contatos:

db.json:

{
  "contatos": [
    {
      "nome": "Maria",
      "telefone": "99 99999999",
      "email": "maria@email.com",
      "aniversario": "01/06/1995",
      "redes": "",
      "observacoes": "",
      "id": 1
    },
    {
      "nome": "João",
      "telefone": "88 88888888",
      "email": "maria@email.com",
      "aniversario": "06/01/1990",
      "redes": "",
      "observacoes": "",
      "id": 2
    }
  ]
}

Temos o endpoint contatos, que é um array. E esse array contém dois objetos com dois contatos. Por isso, possuem todas aquelas propriedades que os contatos têm: nome, telefone, email, id, entre outros. Vamos formatar o arquivo com o atalho "Alt + Shift + F".

Agora, abriremos o terminal novamente com o "Ctrl + J" e executaremos a API para verificar se está tudo correto. Basta digitar npm start ainda dentro da pasta "backend".

npm start

Press CTRL-C to stop

Watching db.json…

Logo abaixo, aparece o endpoint http://localhost:3000/contatos. Se o apertamos com "Ctrl + clique", vai abrir o endpoint os dois contatos que salvamos.

Conseguimos instalar essa ferramenta e configurar a API. O próximo passo é entender as regras para que consigamos nos comunicar com essa API.

Comunicação com o backend - Explorando o protocolo HTTP no Angular

Agora que já configuramos a API, vamos entender como o Angular utiliza o HTTP para realizar a comunicação com o back-end. Se você ainda não ouviu falar sobre HTTP, esse é um protocolo muito conhecido de comunicação, envio e recebimento de dados na internet.

Existem vários protocolos, mas o HTTP é um dos mais utilizados. Ele utiliza o modelo cliente-servidor, onde o cliente, normalmente o navegador, solicita informações e recursos e o servidor envia essas informações.

Protocolo HTTP

No VS Code, vamos acessar dentro da pasta "src > app > services", o arquivo contato.service.ts. Atualmente, estamos utilizando a abordagem do local storage no projeto. Mas, pensando em evoluir o projeto, é ideal que modifiquemos essa estratégia e utilizemos algo que esteja mais alinhado com as práticas do mercado, do mundo real.

Por isso, vamos refatorar o serviço e, ao invés de local storage, vamos utilizar o HTTP.

Na classe ContatoService, vamos excluir as linhas 9 a 11, dos contatos. Também vamos excluir todo o conteúdo dentro do construtor, das linhas 10 a 18.

Para parar o erro nos métodos, vamos apagar a linha 12, que era todo o conteúdo de obterContatos() e 16 e 17, que é todo o conteúdo de salvarContato().

contato.service.ts:

export class ContatoService {

    constructor() {
    }

    obterContatos() {
    }

    salvarContato(contato: Contato) {
    }
}

Como o Angular utiliza esse protocolo nas suas aplicações? No Angular, utilizamos o serviço chamado HttpClient. Esse serviço é injetado no construtor do service e, através dele, temos acesso a todos os métodos do protocolo HTTP.

Para fazer isso, no constructor(), vamos criar uma propriedade privada com o private, que se chamará http e será do tipo HttpClient. Vamos importá-lo na linha 3 do pacote common/http e agora temos acesso a todos os métodos desse serviço.

Dentro do método obterContatos na linha 13, vamos digitar return this.http. Quando digitamos ponto novamente, já aparecem vários métodos, que são os verbos HTTP que podemos utilizar para obter informações ou enviar, dependendo do caso, dessa API.

Para obter os contatos, queremos receber uma lista desses contatos. Por isso, o método que vamos utilizar é o get. Então, vai ficar this.http.get. Em seguida, vamos tipar esse método como array de Contatos. Utilizamos o generics (<>) e passamos Contato[].

Tipagens, uso de generics e modificadores de acesso como private, são recursos do TypeScript, que é a linguagem que o Angular utiliza por padrão. Se você tem dúvida sobre esses recursos, vamos deixar para você sugestões de ótimos cursos que temos na plataforma sobre esse assunto.

Antes de continuar no método obterContatos, para conseguirmos pegar essa lista de contatos, precisamos indicar de onde queremos que essa informação venha. Por isso, dentro da classe, mas fora dos métodos, na linha 10, vamos criar uma constante com private readonly e o nome API.

Essa API vai representar o caminho, o localhost na porta 3000 que configuramos. Ela começa com http://localhost:3000 e terá o endpoint /contatos.

Voltando ao método obterContatos, vamos abrir e fechar parênteses ao final do return, porque esse método get recebe alguns parâmetros. No caso, precisamos passar a URL em formato string como primeiro parâmetro.

A justificativa para criar a constante API na linha 10 é não ter que digitar toda vez a URL da API nesse método e em outros que vamos criar. Para esse método, vamos passar this.API. Dessa forma, vamos conseguir obter os contatos da nossa API.

import { HttpClient } from '@angular/common/http';

export class ContatoService {

    private readonly API = 'http://localhost:3000/contatos';

    constructor(private http: HttpClient) {}

    obterContatos() {
        return this.http.get<Contato[]>(this.API);
    }

    salvarContato(contato: Contato) {

    }
}

Testando

Agora que refatoramos, ou seja, removemos a abordagem do local storage e estamos utilizando o HTTP, vamos executar a aplicação para verificar se está funcionando.

É importante que a API esteja sendo executada durante todo o curso. Se você fechar o projeto e voltar, você deve executar tanto a parte do front-end com o ng serve, como o back-end com o npm start.

Vamos abrir o terminal com "Ctrl + J" e abrir uma aba diferente da atual, onde a API está sendo executada. Basta clicar na seta ao lado do ícone de "+" (New Terminal) e escolher uma nova aba do terminal, do Git Bash, para executar a aplicação front-end. Você também pode usar o atalho "Ctrl + Shift + '".

Agora, digitaremos o comando:

ng serve

[Error] TS2740: Type 'Observable<Contato[]>' is missing the following properties from type 'Contato[]': lenth, pop, push, concat, and 28 more.

Tivemos um erro, cuja mensagem nos informa que o tipo Observable de Contato[] não está conseguindo se conectar com as propriedades do tipo contato, que estamos tentando consumir no lista-contato.

No menu lateral esquerdo, vamos acessar a pasta "paginas > lista-contatos", onde está o arquivo lista-contatos.component.ts. O erro está em ngOnInit():

lista-contatos.component.ts:

ngOnInit() {
    this.contatos = this.contatoService.obterContatos();
}

Modificamos o service e estamos consumindo esse método do service no lista-contatos.component.ts e está dando um erro por conta da tipagem.

O retorno do método obterContatos é, na verdade, um Observable. Por isso que não estamos conseguindo fazer essa conexão do tipo Contato para o tipo Observable. Mas vamos te mostrar como resolver esse erro no próximo vídeo.

Sobre o curso Angular: comunicando-se com uma API via requisições HTTP

O curso Angular: comunicando-se com uma API via requisições HTTP possui 119 minutos de vídeos, em um total de 54 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Comunicação com o backend
• Salvando informações
• Obtendo parâmetros das rotas
• Adicionando imagens com o FileReader
• Componentização e boas práticas