🔄

Módulo 13: HttpClient II (CRUD Completo)

2. Resumo da Aula Anterior

No Módulo 12, aprendemos a usar o .get() para ler dados da internet. Agora, vamos fechar o ciclo do CRUD (Create, Read, Update, Delete). Vais aprender a enviar novos dados, atualizar os existentes e apagar o que já não precisas.

3. O Que Vais Aprender Hoje

✅ POST: Criar novos recursos.
✅ PUT e PATCH: Atualizar dados salvos.
✅ DELETE: Remover dados do servidor.
✅ Enviar Headers (Cabeçalhos) e lidar com o Body.

4. Teoria: A Gestão do Arquivo

Conceito: Comunicar com um servidor não é só ler. É uma conversa de ida e volta. Para cada tipo de ação, o protocolo HTTP tem um "verbo" específico. Usar o verbo certo é a base de uma API bem feita (REST).

📁 Analogia: O Arquivista

Imagina que trabalhas num arquivo de documentos:

POST: Tu chegas com um novo dossiê e entregas ao arquivista para ele guardar (Criar).
PUT: Tu pedes um dossiê, riscas tudo e escreves informações novas por cima do papel antigo (Substituir).
PATCH: Tu pedes um dossiê e apenas colas um post-it com um detalhe corrigido (Atualizar parcial).
DELETE: Tu dizes ao arquivista: "Tritura este dossiê, por favor" (Apagar).

5. Exemplos Práticos

Exemplo 1: Criar (POST)

Enviar um objeto para ser guardado.

novoUser = { nome: 'Sandro', job: 'Dev' };

this.http.post('https://api.com/users', this.novoUser)
  .subscribe(res => {
    console.log('Utilizador criado com sucesso!', res);
  });

Exemplo 2: Atualizar (PUT)

Mudar os dados de um ID específico.

userEditado = { id: 5, nome: 'Sandro Editado' };

this.http.put('https://api.com/users/5', this.userEditado)
  .subscribe(() => alert('Atualizado!'));

Exemplo 3: Apagar (DELETE)

Remover um item pelo seu ID.

this.http.delete('https://api.com/users/5')
  .subscribe(() => {
    console.log('O utilizador 5 desapareceu!');
  });

6. Agora é a Tua Vez!

Vamos criar o "Gestor de Tarefas Remoto":

No teu TodoService, cria uma função addTodo(titulo: string).
Usa o this.http.post para enviar a tarefa para https://jsonplaceholder.typicode.com/todos.
Cria uma função deleteTodo(id: number) que usa o delete apontando para a URL com o ID no fim.
No componente, cria botões de "Adicionar" e "Remover" que chamam estas funções.
Verifica na consola do browser (separador Network) os pedidos a serem feitos!

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 **POST** envia dados novos no corpo (body) do pedido.
📌 **PUT** substitui o recurso inteiro; **PATCH** faz atualizações parciais.
📌 **DELETE** remove o recurso (normalmente identificado pelo ID na URL).
📌 O HttpClient facilita o envio de **Cabeçalhos** (Headers) para autenticação.
📌 Deves sempre subscrever os métodos, senão o pedido nunca é enviado!

9. Desafios Práticos

Desafio 1: Onde está o ID?

Porque é que no método POST não enviamos o ID na URL, mas no PUT e no DELETE enviamos?

Desafio 2: Erros de Resposta

O que acontece se tentares dar DELETE num ID que não existe? O Angular rebenta?

Desafio 3: Headers de Segurança

Se a tua API exigir um "Token de Acesso" para deixares apagar dados, onde é que esse token deve ser colocado no código do HttpClient?