Aula 12 - CRUD Completo com API 🏗️

Objetivo

Objetivo: Consolidar os conhecimentos de componentes, eventos, binding e APIs para construir uma aplicação funcional completa (CRUD), lidando com a persistência de dados em um servidor.

---

1. O que é um CRUD? 📝

CRUD é um acrônimo para as quatro operações básicas de gerenciamento de dados: * Create (Criar) -> POST * Read (Ler/Listar) -> GET * Update (Atualizar) -> PUT / PATCH * Delete (Apagar) -> DELETE

---

2. Ciclo de Vida do CRUD em uma SPA (Mermaid) 📊

graph TD
    A[Lista de Itens] -->|Clique em Novo| B[Formulário de Criação]
    B -->|Submit POST| C{Servidor}
    C -->|Sucesso| A
    A -->|Clique em Editar| D[Formulário de Edição]
    D -->|Submit PUT| C
    A -->|Clique em Excluir| E[Confirmação]
    E -->|Submit DELETE| C

---

3. Listagem e Exclusão 🗑️

Para listar, usamos o {#each}. Para excluir, chamamos uma função que faz o DELETE e atualiza a lista local.

async function excluir(id) {
  const res = await fetch(`https://api.com/itens/${id}`, { method: 'DELETE' });
  if (res.ok) {
    // Remove da lista local para atualizar a tela instantaneamente
    itens = itens.filter(i => i.id !== id);
  }
}

---

4. Criação e Envio de JSON 📤

Ao criar um item, precisamos enviar o body da requisição como uma string JSON e definir o cabeçalho correto.

async function salvar() {
  await fetch('https://api.com/itens', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ nome: novoNome })
  });
  // Recarregar a lista ou adicionar o item retornado
}

---

5. Simulação de Operação CRUD 💻

<div id="termynal" data-termynal>
    <span data-ty="input"># Enviando novo registro...</span>
    <span data-ty="progress"></span>
    <span data-ty>POST /tasks { "title": "Aprender Svelte" }</span>
    <span data-ty>Status: 201 Created</span>
    <span data-ty># Item adicionado com sucesso!</span>
</div>

---

6. Mini-Projeto: Gerenciador de Contatos 🚀

Vamos construir um sistema de contatos completo: 1. Listagem: Busque uma lista de contatos de uma API de testes (ex: JSONPlaceholder). 2. Criação: Adicione um formulário no topo para inserir o nome e telefone. 3. Remoção: Cada contato na lista deve ter um botão "Excluir". 4. Feedback: Mostre um aviso de "Salvando..." enquanto a API processa o pedido.

Dica de UX

Após uma operação de sucesso (como deletar), você pode simplesmente filtrar o array local em vez de fazer uma nova requisição GET. Isso deixa a aplicação muito mais rápida para o usuário!

---

7. Exercício de Fixação 📝

1. Quais os métodos HTTP correspondentes a cada letra do acrônimo CRUD?
2. Por que precisamos do header Content-Type: application/json ao enviar dados?
3. Como você atualizaria um item da lista local após receber a confirmação de sucesso do servidor?

---

Próxima Aula: Vamos entender como otimizar a performance com o Ciclo de Vida e Performance! 🚀