🚀 Capítulo 13: HTTP Client e Conexão com APIs

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de usar o módulo HttpClient do Angular para realizar requisições HTTP para servidores externos (APIs), buscando dados reais na internet e exibindo-os na sua aplicação.

---

🏢 O Cenário Prático (Seu Desafio)

Chega de dados fictícios! Seu desafio hoje é conectar a sua nave ao Holocron da Galáxia (uma API real chamada SWAPI - Star Wars API) e buscar a lista real de planetas catalogados pelo Império para exibir no seu radar!

---

🧠 Fundamentos: A Teoria Traduzida

Para buscar dados na internet, o Angular usa um serviço chamado HttpClient. Ele se comunica com servidores usando o protocolo HTTP (o mesmo da internet).

1. O que é uma API?

É um sistema web que guarda dados e os fornece para quem pedir (através de uma URL). No nosso caso, usaremos a URL: https://swapi.dev/api/planets/.

2. Observables e Subscribe

O HttpClient do Angular não entrega os dados na hora. Ele entrega um Observable (um “observável”). Pense nele como uma encomenda que você fez na internet. Você precisa “assinar” (subscribe) a entrega para ser avisado quando ela chegar!

• Sintaxe: meuServico.buscarDados().subscribe(resultado => { ... })

---

📖 Exemplo Guiado: Buscando Planetas Reais

Vamos criar um serviço para buscar os dados.

🛠️ Passo a Passo (Habilitando o HTTP)

Se você estiver usando componentes Standalone (padrão moderno), abra o arquivo app.config.ts e certifique-se de que o HTTP está habilitado:

import { provideHttpClient } from '@angular/common/http';
 
export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()]
};

🛠️ Passo a Passo (Criando o Serviço)

Crie um serviço chamado holocron: ng g s holocron. Abra src/app/holocron.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class HolocronService {
  private apiUrl = 'https://swapi.dev/api/planets/';
 
  constructor(private http: HttpClient) { }
 
  getPlanetas(): Observable<any> {
    // Faz a requisição GET para a API
    return this.http.get(this.apiUrl);
  }
}

🛠️ Passo a Passo (Componente)

No seu painel-controle.component.ts:

import { Component, OnInit } from '@angular/core';
import { HolocronService } from '../holocron.service';
 
@Component({ /* ... */ })
export class PainelControleComponent implements OnInit {
  planetasReais: any[] = [];
 
  constructor(private holocronService: HolocronService) {}
 
  ngOnInit(): void {
    this.holocronService.getPlanetas().subscribe((resposta: any) => {
      // A SWAPI retorna os dados dentro de um array chamado 'results'
      this.planetasReais = resposta.results;
    });
  }
}

🕹️ Como Executar e Testar no VS Code

1. No HTML do painel, faça um *ngFor para listar planetasReais.
2. Como a resposta é um objeto complexo, use {{ planeta.name }} para ver o nome!
3. Salve e veja os planetas reais do universo Star Wars (Tatooine, Alderaan…) aparecerem na sua tela!

---

🛠️ Prática Obrigatória 1

Altere a URL do serviço para https://swapi.dev/api/people/ para buscar os personagens em vez de planetas. Exiba os nomes dos personagens na tela.

---

🛠️ Prática Obrigatória 2

A API retorna o peso dos personagens no campo mass. Use o pipe number (ou apenas exiba o texto) para mostrar o peso ao lado do nome do personagem.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No serviço:

private apiUrl = 'https://swapi.dev/api/people/';

No HTML:

<li *ngFor="let pessoa of planetasReais"> <!-- Nome da variável ainda é o mesmo -->
  {{ pessoa.name }}
</li>

---

← Capitulo Anterior | Proximo Capitulo →