Módulo 12: HttpClient I

2. Resumo da Aula Anterior

No Módulo 11, entrámos no mundo reativo do RxJS e descobrimos os Observables. Agora, vamos usar esse conhecimento para fazer algo que todo o site profissional faz: buscar dados reais na internet usando o HttpClient.

3. O Que Vais Aprender Hoje

✅ Configurar o HttpClient no projeto.
✅ Fazer pedidos GET para buscar dados JSON.
✅ Tipar as respostas com Interfaces do TypeScript.
✅ Lidar com erros de rede usando catchError.

4. Teoria: O Emissário de Dados

Conceito: O HttpClient é um serviço integrado no Angular que lida com pedidos HTTP (web). Ele usa Observables para gerir as respostas, o que permite cancelar pedidos ou transformar os dados facilmente antes de chegarem ao componente.

🍽️ Analogia: O Criado de Mesa Moderno

Imagina que estás num restaurante tecnológico:

O Componente (Tu): Queres um menu de hambúrgueres (Dados).
O HttpClient (O Criado): Tu chamas o criado e pedes o menu. Ele não traz o menu instantaneamente; ele vai à cozinha (API) ver se há stock.
O Observable (O Pager): O criado dá-te um pager. Quando o menu estiver pronto, o pager vibra (emite o dado) e tu podes começar a ler.
HTTP GET: É o comando "Traz-me aquilo ali, por favor".

5. Exemplos Práticos

Exemplo 1: Configuração (app.config.ts)

Habilitar o serviço no Angular moderno.

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient() // Essencial para o HttpClient funcionar!
  ]
};

Exemplo 2: O Serviço de API

Sempre centralizamos as chamadas num serviço.

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

@Injectable({ providedIn: 'root' })
export class ClimaService {
  constructor(private http: HttpClient) {}

  buscarDados() {
    return this.http.get('https://api.exemplo.com/tempo');
  }
}

Exemplo 3: Tipagem e Consumo

Saber exatamente o que a API nos devolve.

interface Post {
  id: number;
  title: string;
}

// No componente
this.http.get('https://.../posts').subscribe(posts => {
    this.lista = posts;
});

6. Agora é a Tua Vez!

Vamos criar o "Buscador de Utilizadores Fantasmas":

Gera um serviço chamado UserService.
Injeta o HttpClient no constructor do serviço.
Cria uma função getUsers() que faz o get para https://jsonplaceholder.typicode.com/users.
No teu AppComponent, subscreve essa função dentro do ngOnInit.
Usa um *ngFor no HTML para mostrar a lista de nomes dos utilizadores vindos da internet!

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 O **HttpClient** é a ferramenta oficial do Angular para comunicarmos com servidores.
📌 Deves usar **provideHttpClient()** na configuração da tua App.
📌 O método **.get()** devolve sempre um **Observable**.
📌 Usar Interfaces (ex: ``) torna o código mais seguro e evita erros de escrita.

9. Desafios Práticos

Desafio 1: O Ciclo de Vida

As chamadas HTTP de um componente devem ser feitas no constructor ou no ngOnInit? Porquê?

Desafio 2: Segurança (JSON)

O HttpClient do Angular converte o texto que vem da internet em objeto JSON automaticamente? Ou temos de usar o JSON.parse()?

Desafio 3: Lidar com Desastres

Como farias para mostrar uma mensagem de erro ao utilizador se a internet for abaixo durante a chamada da API?

Aprende Web: Angular

Módulo 12: HttpClient I (GET e APIs Reais)