Aula 12 - CRUD Completo 🏗️

Manipulando Dados Profissionalmente

Agenda de Hoje 📅

1. O que é CRUD?
2. Create (POST): Enviando dados
3. Read (GET): Relembrando a busca
4. Update (PUT): Editando registros
5. Delete (DELETE): Removendo dados
6. Prática: Dashboard de Inventário

1. O Ciclo de Vida do Dado: CRUD 🔄

• Create: Criar um novo recurso.
• Read: Ler um recurso existente.
• Update: Atualizar um recurso.
• Delete: Remover um recurso.

2. Preparando o fetch() ⚙️

• Para operações além do GET, precisamos passar um objeto de configuração:

fetch(url, {
  method: 'POST', // ou PUT, DELETE
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(dados)
})

3. Create (POST) 🆕

• Usado para enviar dados de um formulário para o banco.

async function adicionarItem(novoItem) {
  const res = await fetch(API_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(novoItem)
  });
  return await res.json();
}

4. Update (PUT / PATCH) ✏️

• PUT: Substitui o recurso inteiro.
• PATCH: Altera apenas alguns campos (parcial).

// Ex: Atualizando o preço de um produto
await fetch(`${API_URL}/${id}`, {
  method: 'PUT',
  body: JSON.stringify({ nome: 'Notebook', preco: 4500 })
});

5. Delete (DELETE) 🗑️

• O método mais simples, geralmente exige apenas o ID.

async function remover(id) {
  await fetch(`${API_URL}/${id}`, {
    method: 'DELETE'
  });
  // Após deletar na API, delete no Array local!
  lista = lista.filter(item => item.id !== id);
}

6. Sincronização Local vs Remota 📡

graph LR
    A[Usuário Clica] --> B(Chamada para API)
    B -->|Sucesso| C(Atualiza Variável no Svelte)
    C -->|Reatividade| D((Interface Atualizada))

• Lembre-se: A API salva o dado, o Svelte atualiza a tela.

7. Headers e Segurança 🛡️

• Content-Type: Avisa ao servidor que estamos enviando JSON.
• Authorization: Tokens de acesso para áreas restritas.

8. Tratamento de Resposta 💬

• Sempre verifique se o servidor retornou um erro (ex: 404 ou 500).

if (!res.ok) {
  throw new Error("Falha ao salvar os dados");
}

9. Prática: Gestor de Tarefas 📝

• Crie uma lista que busca dados de uma API.
• Adicione um formulário para cadastrar novas tarefas (POST).
• Adicione um botão "Lixeira" em cada item (DELETE).

10. Resumo da Aula ✅

• POST para criar, GET para ler, PUT para atualizar, DELETE para remover.
• Use JSON.stringify no corpo da requisição.
• Sincronize sempre o array local com o banco de dados.

Próxima Aula: Ciclo de Vida ⏳

• onMount, onDestroy.
• beforeUpdate, afterUpdate.
• Performance e tick().

Dúvidas? 🤔

"Um sistema CRUD bem feito é a base de 90% das aplicações comerciais do mundo."