Projeto Final: Dashboard de Gestão Enterprise
2. O Grande Desafio
Parabéns! Chegaste ao fim da jornada Angular. Agora não vamos apenas ler ou aprender conceitos. Vamos construir uma aplicação profissional completa: um **Dashboard Administrativo** para gestão de uma frota de naves espaciais (ou qualquer inventário que prefiras).
3. Requisitos do Projeto
- ✅ **Autenticação**: Página de Login com validação reativa.
- ✅ **Navegação**: Menu lateral (Sidebar) com Routing e Guards.
- ✅ **API Real**: Consumo de dados via HttpClient (Listagem de Naves).
- ✅ **Gestão de Dados**: Operações de adicionar, editar e apagar.
- ✅ **Performance**: Uso de **Signals** para o estado do inventário e carregamento **Lazy Loading**.
4. Estrutura do Projeto
1 Setup da Arquitetura
Configura o teu app.routes.ts para ter uma área pública (Login) e uma área privada (Dashboard) protegida por um Guard.
2 O Motor de Dados (Serviço)
Cria um NaveService que usa um Signal para guardar a lista de naves. Implementa os métodos GET, POST e DELETE para falar com uma API (podes usar o JSONPlaceholder).
3 Interface Inteligente
No componente da dashboard, usa um computed para mostrar estatísticas em tempo real (ex: Total de Naves, Naves em Voo, etc).
4 Formulários Dinâmicos
Constrói o formulário para adicionar novas naves usando ReactiveFormsModule e valida se o nome da nave é válido.
5. Dica Pro: O Estado Global
Usa um serviço com Signals para partilhar dados entre ecrãs de forma simples.
@Injectable({ providedIn: 'root' })
export class AppStateService {
// Estado global da App
private _naves = signal([]);
naves = this._naves.asReadonly();
// Valor calculado automaticamente
totalCritico = computed(() => this.naves().filter(n => n.dano > 80).length);
addNave(nova: Nave) {
this._naves.update(atuais => [...atuais, nova]);
}
} 6. Exame Final de Certificação
Antes de terminares, vamos ver se estás pronto para o mercado de trabalho!
7. O Início do Teu Futuro
🏆 **Parabéns, Web Developer Elite!**
Concluíste toda a trilha: **HTML5**, **CSS3**, **JavaScript** e **Angular**. Tens agora as ferramentas para construir qualquer aplicação moderna e escalar na tua carreira.
O próximo passo é meteres as mãos na massa, construíres o teu portfólio e continuares a aprender, pois a Web nunca para!