DS & II

🚀 Capítulo 20: Projeto Final - Millenium Falcon

Leitura de 3 min

🚀 Capítulo 20: Projeto Final - Millenium Falcon

🎯 Objetivo da Aula

Chegou a hora de colocar à prova todo o seu conhecimento da Força! Neste capítulo final, você não terá um exemplo guiado. O seu desafio será construir uma aplicação completa integrando todos os conceitos vistos ao longo do curso de Vue.js.

🏢 O Cenário Prático (Seu Desafio)

A Aliança Rebelde precisa de um sistema completo de gestão para a frota. Você foi encarregado de construir o Sistema de Comando da Millenium Falcon. Este sistema deve integrar tudo o que vimos!

🛠️ Requisitos do Projeto

Sua aplicação deve conter, no mínimo, as seguintes funcionalidades:

1. Sistema de Rotas (Capítulos 14 e 15)

  • Crie pelo menos 3 páginas (rotas) usando o vue-router:
    • /painel: A tela principal com os status da nave.
    • /alistamento: O formulário para cadastrar novos tripulantes.
    • /galaxia: Uma lista de planetas reais.
  • Proteja a rota do /painel ou /galaxia usando o conceito de Navigation Guards (Capítulo 15).

2. Estado Global com Pinia (Capítulo 16)

  • Crie uma store para o Tema (Modo Escuro / Modo Claro) da nave.
  • Todas as páginas devem mudar de cor de fundo quando o tema for alterado na store.

3. Conexão com API (Capítulo 13)

  • Na rota /galaxia, use o onMounted e o fetch para buscar a lista de planetas da API https://swapi.dev/api/planets/ e exiba-os em uma lista na tela com v-for.

4. Formulários com v-model (Capítulo 10)

  • Na rota /alistamento, use o v-model para capturar o nome e a função do voluntário.

5. Composables (Capítulo 17)

  • Use o composable useContador (ou crie um novo) para simular o cronômetro de tempo de missão no painel.

🕹️ Como Executar e Validar seu Projeto

  1. Certifique-se de que não há erros no console do navegador.
  2. Teste a navegação e a proteção de rotas.
  3. Teste se o tema muda a cor de fundo de todas as telas.

📤 Instruções de Entrega Final

  1. Garanta que todos os arquivos estão salvos.
  2. Faça o commit final no GitHub Desktop com a mensagem Projeto Final Vue Concluído.
  3. Dê o Push origin para enviar tudo para o seu GitHub público.
  4. Envie o link do repositório na tarefa do Microsoft Teams correspondente ao Projeto Final.

💡 Mensagem Final

Parabéns, Mestre Jedi do Vue! Você dominou a Força e agora está pronto para construir interfaces incríveis, reativas e profissionais no mercado de trabalho. Que a Força esteja com você em seus próximos projetos! 🌌

← Capitulo Anterior

Visão de gráfico

Backlinks