Projeto Prático II: CRUD System 💾

Aula 12 - Criando uma aplicação completa

🎯 Objetivo: Masterizando o CRUD

• Create: Criar novos itens
• Read: Listar e Buscar
• Update: Editar informações
• Delete: Remover registros

🛠️ Tecnologias Envolvidas

• Vue Router: Navegação entre Listagem e Formulário
• Axios: Comunicação com a API
• Pinia: Guardar os dados carregados da API globalmente
• Vee-Validate: (intro) Validação de formulários

📋 Requisitos do Dashboard

• Tela de Listagem com busca/filtro
• Formulário de Edição/Criação em rota separada
• Modais de confirmação de exclusão
• Alertas de Sucesso/Erro

📊 Arquitetura do Sistema

graph TD
    Router[Vue Router] --> ViewList[ListaView.vue]
    Router --> ViewEdit[FormView.vue]
    ViewList --> Store[Pinia Store]
    ViewEdit --> Store
    Store <--> Axios[Axios API]

📝 O Formulário Inteligente

• Um único componente para Criar e Editar
• Se a URL tiver id -> Modo Edição (busca dados)
• Se não -> Modo Criação (campos vazios)

🛡️ Validação de Dados

• Não envie lixo para o banco!
• Verificar campos obrigatórios
• Formatar valores (preço, data)
• Exibir mensagens de erro em vermelho

🔄 UX: Feedback Visual

• Desabilitar botão de salvar enquanto carrega
• Mostrar "Skeleton Screens" ou Spinners na lista
• Notificações "Toast" no canto da tela

💾 Otimizando a Store

• Não recarregue a API toda vez que mudar de rota se os dados já estiverem no Pinia (Cache simples)
• Adicione uma função refresh para forçar a atualização

🛑 Confirmação de Ações Críticas

• Nunca delete um item sem perguntar "Tem certeza?"
• Use um componente de Modal reutilizável

🚀 Boas Práticas de Código

• Services: Isolar as chamadas de API num arquivo separado
• Tipagem: Documentar o que o objeto "Produto" deve ter
• Erros: Tratar 404 (Não encontrado) e 500 (Erro de servidor)

🏗️ Passo a Passo Sugerido

1. Configurar Rotas e Store
2. Implementar a Listagem (GET)
3. Implementar a Exclusão (DELETE)
4. Criar o Formulário (POST/PUT)
5. Testar o fluxo completo

🚀 Desafios Extras

• Adicionar paginação (exibir 5 por página)
• Ordenar por nome ou preço
• Exportar lista para PDF ou Excel

🏁 Conclusão do Módulo 3

• Agora você sabe construir o "feijão com arroz" de qualquer sistema corporativo
• O poder está na integração das ferramentas

🏁 Dúvidas?

Mãos à obra no CRUD! Falta pouco para o final! Próxima aula: Módulo 4 - Profissionalização.