Aula 25 – Vibe Coding: Implementando um sistema de Gestão de Mudancas

O desafio de codificação ao vivo com Angular

Esta aula faz parte da série Vibe Coding, que explora desenvolvimento real com todos os seus desafios, acertos e erros inesperados. O episódio em questão apresenta um desafio prático: construir um dashboard do zero utilizando Angular como framework principal, integrando visualizações de dados com Chart.js e explorando o papel da inteligência artificial (especificamente DeepSeek) na geração de código. O format é ao vivo, capturando os momentos de debugging, frustração e descoberta que fazem parte do dia a dia de um desenvolvedor experiente. A proposta vai além de um tutorial convencional: é um laboratório onde o código generativo encontra a realidade das dependências, conflitos arquiteturais e boas práticas.

Integração de gráficos e componentes Angular

A construção de dashboards modernos exige mais que conhecimento teórico de frameworks. O vídeo demonstra na prática como integrar Chart.js em um projeto Angular, passando pelos detalhes de instalação de dependências, configuração de módulos e criação de componentes reutilizáveis. Durante o processo ao vivo, questões comuns surgem: como estruturar dados para o Chart.js, como atualizar gráficos dinamicamente, como evitar memory leaks ao destruir componentes com listeners ativos. O apresentador não apenas mostra a solução, mas explica o raciocínio por trás de cada decisão arquitetural, permitindo que o espectador compreenda por que certas práticas são recomendadas e por que atalhos costumam gerar problemas maiores adiante.

O papel ambíguo da IA na geração de código

Um dos pilares da discussão é a relação crítica com código gerado por IA. O apresentador testa sugestões do DeepSeek para dashboards e componentes, analisando tanto o que funciona quanto o que não funciona. Isso abre espaço para reflexões importantes: código gerado por IA nem sempre segue as convenções do projeto, pode introduzir dependências desnecessárias, e muitas vezes carece de contexto sobre o estado real da aplicação. O vídeo não condenam o uso de IA, mas demonstram que confiança cega em automação leva a "code hell", um estado onde o projeto fica tão desorganizado e técnico debt tão alto que novas funcionalidades se tornam um calvário. A mensagem é clara: IA é uma ferramenta, não um substituto para o entendimento profundo da arquitetura.

Debugging em tempo real de erros clássicos

Durante a sessão ao vivo, diversos erros típicos de Angular emergem: dependências não resolvidas, ciclos de change detection problemáticos, imports faltando, conflitos de versão. Cada erro é uma oportunidade de aprendizado. O desenvolvedor experimenta diferentes abordagens, mostra como interpretar mensagens de erro do Angular CLI, como usar o DevTools do navegador para diagnosticar problemas de binding, e como estruturar console.logs estratégicos para rastrear o fluxo de dados. Esses momentos de debugging real são pedagogicamenté valiosos porque mostram o pensamento crítico de um dev experiente: não é sobre memorizar soluções prontas, mas desenvolver a capacidade de investigação sistemática.

Drag-and-drop com CDK e componentização dinâmica

A série Vibe Coding éxplora técnicas avançadas de frontend, incluindo o Angular CDK (Component Dev Kit) para implementar drag-and-drop. A dinâmica proposta no vídeo envolve criar componentes que podem ser reorganizados dentro do dashboard, oferecendo flexibilidade ao usuário final. Isso exige entendimento de como gerenciar estado em Angular, como sincronizar a interface com a estrutura de dados subjacente, e como garantir que a experiência do usuário seja fluida mesmo durante operações complexas. A componentização dinâmica adiciona outra camada: renderizar componentes programaticamente, passar dados através de diferentes canais de comunicação (Input, Output, ViewChild) e garantir que tudo funcione harmoniosamente.

Contexto de desenvolvimento versus código perfeito

A série Vibe Coding questiona a obsessão por "código perfeito". Na realidade, o desenvolvimento é marcado por trade-offs: velocidade versus qualidade, flexibilidade versus simplicidade, escalabilidade versus pragmatismo. O apresentador reflete sobre quando é aceitável ter um "código ruim" (rápido, funcional, mas sem polimento) versus quando a arquitetura limpa é não-negociável. Projetos diferentes têm diferentes contextos: um MVP para um cliente novo pode permitir mais desvios técnicos do que um sistema em produção há cinco anos. Esse pensamento crítico é essencial para crescer como desenvolvedor, pois equilibra o idealismo técnico com as realidades comerciais.

Dicas práticas para evitar problemas em larga escala

Ao longo da sessão, várias recomendações emergem naturalmente: estruturar pastas e arquivos de forma consistente desde o início economiza refatorações futuras; usar linters e formatadores automáticos reduz discussões estéreis sobre estilo; documentar as decisões arquiteturais em ADRs (Architecture Decision Records) facilita o onboarding de novos membros; estabelecer conventions dentro da equipe sobre como lidar com IA generativa evita caos. O vídeo também enfatiza a importância do teste: um dashboard com dados mocados é diferente de um dashboard consumindo uma API real, e erros podem aparecer apenas em produção se não houver testes adequados.

Próximos passos e evolução do projeto

O repositório GitHub do projeto (morpho-board) está disponível publicamente para contribuições, testes e evolução colaborativa. Isso significa que o vídeo não é apenas uma demonstração isolada, mas um ponto de partida para um projeto que pode crescer e melhorar com feedback da comunidade. O apresentador encoraja forks, issues e sugestões, transformando a aula em um espaço de aprendizado coletivo. Essa abordagem alinha-se com a cultura de código aberto e reflete como projetos reais evoluem na indústria: feedback contínuo, iteração rápida, e disposição de reconhecer e corrigir erros.