DifícilFase 6
Exercício Difícil — App de Notas Persistente com SQLite
Constrói o CRUD completo (GET, POST, DELETE) para uma app de notas, com frontend simples a consumi-lo.
FerramentasVS CodeTerminalNode.jsExpressbetter-sqlite3
Este exercício junta a Fase 5 e a Fase 6: um pequeno frontend em HTML/JS que fala, via fetch, com uma API Express ligada a SQLite — o mesmo padrão usado em aplicações reais.
Passos a realizar
- Cria uma pasta app-notas dentro de fase6, com um subdiretório backend (servidor.js) e um subdiretório frontend (index.html, script.js).
- No backend, cria a tabela notas (id, titulo, conteudo, criado_em com
DEFAULT CURRENT_TIMESTAMP). - Implementa três rotas: GET /api/notas (todas as notas, ordenadas da mais recente para a mais antiga), POST /api/notas (cria uma nota nova), DELETE /api/notas/:id (remove uma nota pelo id, usando o parâmetro da rota).
- No frontend, usa fetch para: carregar e mostrar todas as notas ao abrir a página, adicionar uma nota nova através de um formulário, e remover uma nota ao clicar num botão "Apagar" junto a cada uma.
- Depois de qualquer criação ou remoção, volta a pedir a lista completa ao servidor (em vez de tentares atualizar o array local à mão) — mantém o frontend sempre sincronizado com a base de dados real.
- Testa o ciclo completo: adicionar três notas, apagar a do meio, e confirmar que as outras duas continuam lá depois de recarregares a página no navegador (prova de que os dados ficaram mesmo persistidos em disco).
Fluxo de funcionamento
- 1Frontend: fetch GET /api/notas
- 2Express + SQLite devolvem JSON
- 3JS desenha as notas no DOM
- 4Recarrega ao criar/apagar
Dicas
- req.params.id (não req.body) é onde vais encontrar o valor de :id numa rota como /api/notas/:id.
- O teste do "recarregar a página e os dados continuarem lá" é o que prova que a persistência está mesmo a funcionar — sem ele, podes estar só a atualizar uma cópia em memória que desaparece ao reiniciar o servidor.
Erros comuns
- Esquecer de recarregar a lista de notas do servidor depois de um POST ou DELETE, deixando o ecrã dessincronizado com a base de dados real.
- Comparar req.params.id (que chega como texto) diretamente com um id numérico sem o converter, fazendo o DELETE falhar silenciosamente.