Projeto Prático I: Task Manager 📝

Aula 08 - Construindo uma aplicação do zero

🎯 Objetivo do Projeto

• Aplicar tudo o que aprendemos no Módulo 1 e 2
• Criar um Gerenciador de Tarefas funcional e organizado
• Focar na componentização e comunicação

📋 Requisitos do App

• Adicionar novas tarefas
• Listar tarefas existentes
• Marcar tarefa como concluída (visual)
• Remover tarefas
• Persistir dados no LocalStorage

🏗️ Arquitetura de Componentes

• App.vue: Orquestrador e dono do estado (lista)
• Header.vue: Título e branding
• TaskForm.vue: Input e botão de cadastro
• TaskItem.vue: Card individual de cada tarefa

📊 Fluxo de Dados do Projeto

graph TD
    App[App.vue - state: tasks] --> Form[TaskForm.vue]
    App --> List[Lista de Itens]
    Form -- Emit: create --> App
    List -- v-for --> Item[TaskItem.vue]
    Item -- Emit: delete --> App
    Item -- Emit: toggle --> App

🧬 Definição da "Tarefa"

Cada item do array deve ser um objeto:

{
  id: Date.now(),
  texto: 'Lavar louça',
  concluida: false
}

🛠️ Funcionalidade: Adicionar

1. v-model no input do TaskForm
2. Botão dispara emit('criar', nota)
3. App faz um .push() no array reativo

🛠️ Funcionalidade: Remover

1. TaskItem tem botão com @click="emit('x', id)"
2. App recebe ID e faz um .filter() para excluir o item

💾 Persistência com Watcher

• Como salvar SEMPRE que a lista mudar?
• Hook watch do Vue 3:

  watch(tasks, (novaLista) => {
    localStorage.setItem('tasks', JSON.stringify(novaLista))
  }, { deep: true })
  

🔄 Carregando ao Abrir

• No onMounted:

  const salvo = localStorage.getItem('tasks')
  if (salvo) tasks.value = JSON.parse(salvo)
  

🎨 Estilização Dinâmica

• Como riscar o texto da tarefa concluída?

  <span :class="{ 'riscado': task.concluida }">
    {{ task.texto }}
  </span>
  

• A classe CSS .riscado aplica o text-decoration: line-through

🚀 Desafios Extras

• Adicionar contador de "Tarefas restantes"
• Botão para Limpar todas as tarefas concluídas
• Animações simples na entrada/saída de itens

🏛️ Boas Práticas

• Nomes de props claros
• Validação no defineProps
• Nomes de funções descritivos (handleRemove, handleCreate)

🏁 Vamos Construir!

• Abram o VS Code
• Iniciem o servidor Vite
• Mãos à obra na estrutura de pastas

🏁 Dúvidas?

Bom projeto a todos! Este é o fim do Módulo 2. Parabéns!