Aula 20 - Projeto Capstone: Aplicação Vue 3 Autônoma Reativa 🏆

📑 1. Fundamentos Teóricos & Análise Técnica

O Projeto Capstone de Especialização em Vue 3 consolida as competências práticas do estudante através da construção de um Dashboard de Métricas e Análise Operacional. O projeto desafia o estudante a unir todos os conceitos avançados estudados em um sistema integrado, limpo e testável.

A aplicação construída integra os seguintes pilares de engenharia: 1. Ecossistema Vue 3 Moderno: Utilização de Vite para compilação instantânea em desenvolvimento e empacotamento otimizado com Rollup. 2. Pinia para Estado Global: Stores dedicadas para autenticação e gestão de dados, com persistência e getters calculados. 3. Vue Router com Guards: Roteamento cliente com proteção de rotas (beforeEach), lazy loading de views e manipulação de parâmetros de consulta (query params). 4. Composables Reutilizáveis: Extração de comportamentos transversais (comunicação com API, exportação de relatórios e tema visual) em funções composables dedicadas.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    Vite["Vite Build Tool"] --> Main["main.ts (Pinia + Router)"]
    Main --> Router["Vue Router (Guards de Autenticação)"]
    Router --> Layout["AppLayout.vue (<router-view>)"]
    Layout --> Views["Views Lazy Loaded (Dashboard, Gestão)"]
    Views --> Stores["Pinia Stores (Auth, Metrics)"]
    Views --> Composables["Composables Especializados (useApi)"]
    style Vite fill:#e3f2fd,stroke:#1565c0
    style Main fill:#fff3e0,stroke:#e65100
    style Views fill:#e8f5e9,stroke:#2e7d32
    style Stores fill:#f3e5f5,stroke:#7b1fa2

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Arquitetura Modular: Organização lógica clara entre views, componentes, stores, composables e serviços. - Navegação Protegida: Garantia de que rotas privadas redirecionem usuários não autenticados para a tela de login. - Feedback em Tempo Real: Uso de loaders e notificações reativas coordenadas pela store global. - Código Limpo com Script Setup: Código conciso e elegante com <script setup lang='ts'> em 100% dos componentes.

🛠️ 2. Implementação Prática em Vue 3, Vite, Pinia e Vue Router

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// DashboardView.vue (Exemplo Integrado da Arquitetura Capstone)
<script setup lang="ts">
import { onMounted } from 'vue';
import { useCounterStore } from '../stores/counterStore';

const store = useCounterStore();

onMounted(() => {
  console.log('Dashboard montado com sucesso!');
});
</script>

<template>
  <div class="dashboard-container">
    <h2>Painel de Métricas Operacionais</h2>
    <div class="metric-card">
      <p>Total de Operações: <strong>{{ store.count }}</strong></p>
      <p>Índice Multiplicador: <strong>{{ store.doubleCount }}</strong></p>
      <button @click="store.increment">Registrar Operação (+1)</button>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container { padding: 24px; }
.metric-card { background: #ffffff; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; }
</style>

💡 Análise Passo a Passo do Código

1. Script Setup Conciso: Dispensa exportações manuais; todas as importações ficam disponíveis imediatamente no template.
2. Integração Pinia Direta: O acesso a store.count e store.increment ocorre de forma transparente e totalmente tipada.
3. Estilos com Escopo Isolado: O atributo scoped evita vazamento acidental de regras CSS para outras telas da aplicação.

🎯 3. Próximos Passos & Sequência Didática