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

O desafio prático do desenvolvimento com IA

Esta aula apresenta um exercício de live coding onde um desenvolvedor experiente enfrenta o desafio de construir um dashboard completo do zero usando Angular, Chart.js e assistência de IA. O objetivo não é apenas demonstrar a implementação técnica, mas questionar criticamente como a inteligência artificial se comporta no contexto real de desenvolvimento, onde nem sempre as soluções prontas funcionam perfeitamente. A transmissão ao vivo captura momentos autênticos de debugging, refatoração e tomadas de decisão arquiteturais, oferecendo aos espectadores uma visão honesta sobre o processo de desenvolvimento moderno.

Tecnologias e ferramentas do projeto

O projeto base utiliza Angular como framework principal para construção da interface, complementado pelo Chart.js para visualização de dados em gráficos interativos. A gestão de mudanças e estados é executada através de padrões estabelecidos no Angular, enquanto o CDK (Component Dev Kit) do Angular fornece recursos avançados como drag-and-drop para criar interfaces mais dinâmicas. O código-fonte do projeto está disponível no GitHub sob o nome morpho-board, permitindo que interessados possam explorar a implementação completa, contribuir com melhorias ou reportar problemas encontrados.

Integração de gráficos com Chart.js

Um dos focos principais da sessão é demonstrar como integrar corretamente a biblioteca Chart.js em um projeto Angular. Isso envolve não apenas instalar as dependências corretas, mas também configurar os componentes Angular para renderizar gráficos de forma reativa. O Chart.js oferece uma abordagem declarativa para criar visualizações de dados, desde gráficos de linhas até gráficos de pizza, e a integração com Angular requer atenção especial à detecção de mudanças e ao ciclo de vida dos componentes. A sessão demonstra erros comuns nessa integração e como corrigi-los de forma prática.

Usando IA para sugestões de código

Um aspecto central da aula é a reflexão crítica sobre como usar IA (no caso, DeepSeek) para gerar sugestões de componentes e dashboards. Enquanto ferramentas de IA podem acelerar o desenvolvimento gerando código boilerplate, elas frequentemente não éntendem o contexto específico do projeto ou as decisões arquiteturais já estabelecidas. A sessão mostra momentos onde o código gerado pela IA funcionou bem, mas também onde precisou de ajustes significativos. Esse contraste ilustra a importância de manter o pensamento crítico ao usar automação: IA é uma ferramenta produtiva, mas não substitui julgamento humano sobre qualidade e adequação do código.

Debugging real e resolução de erros

A transmissão captura o processo autêntico de debugging em um projeto Angular, incluindo erros de dependências, problemas de tipagem TypeScript e questões de configuração do build. Esses erros clássicos são instrutivos porque mostram padrões comuns que desenvolvedores enfrentam, além de demonstrar técnicas eficientes para identificar e resolver problemas. A abordagem sistemática de leitura de mensagens de erro, verificação de versões de pacotes e testes incrementais oferece um modelo mental valioso para lidar com situações semelhantes em outros projetos.

Arquitetura, boas práticas e qualidade de código

Além de funcionalidade, a sessão inclui discussões profundas sobre arquitetura front-end, padrões de componentização e quando confiar ou desconfiar de soluções automáticas. A ideia de "code hell" é explorada: situações onde código funcional, mas de baixa qualidade, se acumula e cria débito técnico. Componentes bem desenhados, separação de responsabilidades e testes adequados são apresentados não como dogmas, mas como decisões contextualizadas. O desenvolvimento profissional equilibra velocidade de entrega com manutenibilidade de longo prazo, e essa aula ilustra como navegar esse equilíbrio.

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

A implementação de drag-and-drop usando o CDK do Angular é um recurso avançado que permite criar interfaces mais intuitivas e interativas. Isso envolve não apenas os eventos de mouse e touch, mas também a atualização do estado da aplicação quando elementos são movidos. A componentização dinâmica refere-se à capacidade de criar e destruir componentes programaticamente, o que é útil em dashboards personalizáveis onde o usuário pode adicionar, remover ou reorganizar widgets.

Por que essa aula importa para desenvolvedores

Esta aula é valiosa não porque oferece soluções prontas para copiar, mas porque mostra o processo de pensamento e as decisões de um desenvolvedor experiente enfrentando problemas reais. Aprender com erros, entender trade-offs e questionar quando usar IA são habilidades críticas na indústria. A série Vibe Coding como um todo propõe uma abordagem diferente do ensino técnico: focada em contexto, honestidade sobre dificuldades e reflexão sobre o que significa escrever bom código em um mundo onde a automatização é cada vez mais prevalente.