Engenharia de software na era da IA: planejamento, automações e entrega em escala com agentes de IA

Conhecendo setup do projeto e das ferramentas - Apresentação

Apresentando o instrutor e o curso

Olá! Meu nome é Vinicios Neves, conhecido como Careca Barbudo, e serei um grande companheiro nesta jornada. Estou aqui para que possamos colocar a mão na massa e praticar tudo o que vimos até agora.

Audiodescrição: Vinicios é um homem branco, careca, com barba cheia e escura. Ele veste uma camiseta casual e está em um ambiente de estúdio, com uma parede clara ao fundo.

Explicando o objetivo do curso

Qual é o objetivo deste curso? Vamos começar com um Figma e um sonho. Já mencionei isso antes, então temos o Air Max, que é um produto que precisa ser desenvolvido. Vamos nos concentrar nos fundamentos deste projeto.

O que queremos dizer com fundação? Primeiro, preparamos tudo do zero, sem começar com nada pré-existente. Vamos configurar o back-end, o front-end, conectar APIs e, desta vez, utilizaremos algumas ferramentas diferentes das que usamos no passado. Vamos configurar algumas automações, gerenciar o backlog e discutir um pouco sobre a redação técnica das tarefas a serem realizadas. Utilizaremos um conjunto de ferramentas com automação para isso, com API para tal finalidade.

Detalhando as ferramentas e processos

Em linhas gerais, o que faremos? Teremos o Cloud Code local se conectando com o Figma, o GitHub e o Linear, que será nossa ferramenta de gestão de projetos. Basicamente, faremos muitas coisas juntas: a configuração, o back-end, o front-end. Se seguirmos a recomendação de stack, haverá um GraphQL disponível para experimentação, e o front-end será documentado com o Storybook. Assim, com os fundamentos estabelecidos, poderemos pegar o projeto e levá-lo até o final.

Concluindo com expectativas e conselhos

O objetivo deste curso é montar os fundamentos de Air Max para que possamos praticar tudo o que fizemos até agora. Há um pequeno detalhe: na última aula, compartilharemos alguns conselhos sobre como extrapolar o que vimos neste curso para nossa vida, seja para nossa equipe ou para nossa rotina de estudos. Alguns conselhos e insights que podem ajudar a tirar esse conhecimento da tela e levá-lo para nossa vida cotidiana.

Esperamos que estejam tão entusiasmados quanto nós; será um imenso prazer acompanhá-los neste curso. Nos vemos no próximo vídeo, até então!

Conhecendo setup do projeto e das ferramentas - Criando o repo e o monorepo com pnpm workspaces

Apresentando o projeto AirMax

Missão dada, missão cumprida. Precisamos desenvolver o AirMax, uma empresa de aluguel de carros, e temos um projeto no Figma que servirá como fonte verdadeira do design.

Qual é o nosso objetivo neste curso de projeto integrador? Vamos utilizar várias ferramentas, realizar muitas configurações e, obviamente, haverá um ou dois prompts (sugestões) para que desenvolvamos algo. O que queremos é que foquemos e prestemos atenção em nosso caminho, conectando todos os pontos para alcançar nosso objetivo, utilizando nossas palavras mágicas. Queremos ver como tudo funciona na prática, conectando GitHub, um sistema de gestão de projetos para lidar com as tarefas, Figma e Cloud Code, tudo integrado e funcionando bem.

Iniciando o projeto no VS Code

Vamos criar o repositório para iniciar nosso projeto. Antes de pensar no GitHub, vamos pensar nos projetos. No terminal, já estamos em uma pasta chamada "AirMax", que está na raiz do nosso desktop, na área de trabalho. Vamos abrir o VS Code nessa pasta vazia.

Para isso, utilizamos o seguinte comando no terminal:

code .

Fechamos o Copilot, que não é o que queremos, e abrimos o Cloud Code. Vamos fazer um pouco de zoom e definir as técnicas necessárias. Precisamos de algo para o back-end e algo para o front-end. Não temos muitas informações sobre requisitos não funcionais; o único elemento que temos é a tela.

Explorando o design no Figma

No Figma, temos basicamente um modal de início de sessão, então precisaremos de alguma autenticação. Temos uma página que lista os carros por categoria, uma página que mostra os detalhes de um veículo, e o ato de fazer a reserva em si, confirmando a reserva. Temos uma agência de aluguel de veículos e uma rota protegida; queremos que a reserva seja feita apenas por usuários logados no sistema. Há consultas de local de retirada e devolução na tela do veículo que podemos reservar, e no final, algumas opções de reserva.

Definindo a arquitetura do sistema

Precisamos desenvolver este sistema. Podemos, por exemplo, optar por um Next Fullstack e resolver tudo lá. Poderíamos fazer uma combinação de React com qualquer back-end. No entanto, nosso insight é separar a parte lógica de generalização do back-end. Vamos usar um workspace e ter uma aplicação para o back-end e outra para o front-end. O back-end será o que chamamos de BFF, um back-end for front-end, específico para o que queremos desenvolver. São duas camadas distintas. Como temos uma camada de segurança importante, que provavelmente envolverá dados de pagamento, não usaremos React puro, mas faremos uma combinação com Next.js para que seja nosso front-end com o server-side disponível para as operações seguras que precisamos executar. Para servir os dados ao Next.js, criaremos um BFF com GraphQL, pois essa parte de consulta e busca será bem resolvida com GraphQL.

Escolhendo a stack tecnológica

Isso é o que precisamos fazer por agora.

Podemos nos perguntar: "Será que precisamos usar a mesma stack que está sendo utilizada?" Não é necessário; podemos usar a stack que desejarmos. Ao final, quando terminarmos, podemos mostrar nosso projeto e qual foi a solução adotada.

No momento, o que faremos? Vamos utilizar Next.js com uma camada de back-end para garantir segurança. Essa camada não terá acesso direto ao banco de dados; vamos criar um BFF (Backend for Frontend) para fornecer esses dados. As responsabilidades estarão bem separadas.

Criando o arquivo PRD.md

Com isso em mente, queremos iniciar nosso projeto. Podemos iniciar o monorepo com pnpm ou criar tudo manualmente. No entanto, se tivermos um Cloud Code disponível, podemos utilizá-lo. Em vez de criar um prompt manualmente, vamos criar um novo arquivo na raiz do projeto chamado PRD.md.

Para isso, criamos o arquivo:

PRD.md

Esse arquivo conterá os requisitos do produto, as restrições e tudo o que queremos fazer.

Estruturando o projeto no PRD.md

No PRD.md, vamos estruturar o projeto. Primeiro, falaremos sobre o front-end. Utilizaremos markdown para organizar as informações.

## Front-end

No front-end, queremos uma aplicação Next.js, criada via npx.

App Next.js (criado via NPX)

Para estilização, usaremos Tailwind.

Estilos com Tailwind

E organizaremos os componentes seguindo o Atomic Design.

Organização de componentes: Atomic Design

Também haverá a parte de autenticação, que estará preparada.

Preparado para autenticação

Detalhando o back-end e monorepo

Para o back-end, utilizaremos NestJS. Pode ser qualquer tecnologia que desejarmos. Vamos criar usando a CLI do próprio Nest.

## Back-end
Nest.js (criado usando CLI do próprio Nest)

Queremos integrar com GraphQL.

Com GraphQL

Para o banco de dados, utilizaremos um ORM chamado Prisma para o mapeamento de entidades.

ORM: Prisma

O banco de dados será Postgres, e utilizaremos docker-compose.yaml para levantar a base de dados, montando um volume para garantir a persistência dos dados.

Banco de dados: Postgres (docker-compose.yaml para levantar o banco, com volume montado)

No topo, teremos um monorepo para o back-end e o front-end, utilizando PNPM Workspaces. Isso resolverá nosso caso.

## Monorepo
PNPM Workspaces

Vamos configurar atalhos no package.json, usando filter para evitar navegar entre pastas antes de executar comandos. Isso faz parte do ecossistema Node.

Com atalhos no package.json usando o --filter para evitar navegar entre pastas antes de executar comandos

Iniciando o projeto com Claudinho

Agora, vamos ao Claudinho e pediremos para iniciar nosso projeto descrito em PRD.md.

Vamos iniciar nosso projeto descrito em PRD.md

Nosso projeto está vazio, mas temos as instruções para começar.

O nosso projeto está vazio, mas você tem as instruções para começar.

Devemos perguntar se há alguma lacuna, em vez de assumir informações.

Pergunte se tiver alguma lacuna ao invés de assumir informações.

Finalizando o planejamento do projeto

Este é nosso prompt inicial, uma combinação do PRD. Podemos incluir uma descrição do projeto, como uma agência de aluguel de veículos, para que fique bem descrito.

Uma locadora de veículos.

Com tudo combinado, entraremos em modo play para preparar e executar nosso comando. Isso estabelecerá a fundação do nosso projeto. Podemos deixar o processo ocorrer e, quando terminar, nos encontraremos novamente no próximo vídeo com o resultado do que foi desenvolvido. Até então!

Conhecendo setup do projeto e das ferramentas - CLAUDE.md do Hermex

Respondendo perguntas sobre configuração inicial

Começamos bem e com os detalhes prontos. Enquanto estava nos bastidores, respondi algumas perguntas. Claudio me perguntou se eu queria usar CodeFirst em GraphQL ou se preferia fazer Schema First. Ele também questionou se eu gostaria de separar entre apps, web e API ou usar a nomenclatura front-end e back-end. Além disso, perguntou se eu queria usar AppRouter ou PageRouter e qual biblioteca de autenticação eu gostaria de utilizar. Ele me deu algumas opções e eu escolhi usar NextAuth.js, que agora está sendo renomeado para Auth.js.

Após isso, precisei fazer algumas correções. Primeiro, houve alguns problemas com Apollo no Next.js. Tive que explicar como proceder e fornecer documentação atualizada. Além disso, no Next.js, por padrão, é criado um arquivo chamado middleware.js, mas essa convenção mudou de middleware para proxy. Portanto, precisei dar algumas instruções adicionais além do que foi gerado inicialmente.

Iniciando servidores de desenvolvimento

Atualmente, temos dois comandos. Temos um pnpm-api-dev para iniciar o Nest. Na outra terminal, vou cancelar, limpar a terminal e executar novamente. Tenho o web-dev para iniciar o Next.js. O Next.js está na porta 3000 e o Nest está na 3001. Se formos ao navegador, podemos verificar. Na porta 3000, temos a aplicação padrão do Next.js. E na 3001, temos o playground do GraphQL. A base já está funcionando agora.

Para iniciar os servidores de desenvolvimento, utilizamos os seguintes comandos:

pnpm web:dev    # Next.js dev server (http://localhost:3000)
pnpm api:dev    # NestJS watch mode (http://localhost:3001/graphql)

Gerando e ajustando o Cloud Code

Antes de continuar adicionando mais funcionalidades e até mesmo antes de começar a fazer commit dos arquivos modificados, vou gerar o Cloud Code inicial e ajustá-lo conforme nossas necessidades e preferências. Vamos fazer isso a partir da terminal. Estou na pasta correta e vou executar um //init, que cria um Cloud Code baseado em tudo que está presente. Isso gerará um esboço inicial.

Quais precauções devemos tomar? Esse Cloud Code deve ser bastante conciso. Lembre-se de que cada vez que iniciamos um novo prompt, uma nova janela de contexto ou uma terminal do cloud, tudo isso é carregado; em cada prompt será carregado. E para prompts muito grandes, como já vimos em cursos anteriores, existe a situação do "lost in the middle". Ele priorizará mais o início e o fim, e o meio pode perder prioridade. O Cloud MD provavelmente estará no meio. Portanto, vale a pena ter esse cuidado.

Explorando o arquivo Cloud MD

O Cloud MD já foi gerado. Vamos dar uma olhada nesse arquivo no VS Code. Agora, vou colapsar tudo aqui para focarmos apenas nesse arquivo. Fechei a parte de perguntas e agora posso abrir o Cloud MD novamente. Vou aumentar o zoom. Perfeito. Ele está explicando aqui o que faz para fornecer orientação, uma guia para o Cloud Code.

Explicamos o que é o Wermax, um sistema de alocação de veículos. Discutimos o que temos na API e na web. Executamos alguns comandos a partir da raiz do monorepo. Também aplicamos o linting (ferramenta de análise de código) e realizamos testes, além de configurar a parte de banco de dados.

Garantindo a qualidade do código

Para garantir a qualidade do código, utilizamos os seguintes comandos de linting e testes:

# API
pnpm --filter @hermex/api lint

# Web
pnpm --filter @hermex/web lint

pnpm --filter @hermex/api test         # run all tests
pnpm --filter @hermex/api test:watch   # watch mode
pnpm --filter @hermex/api test:e2e     # e2e tests
# Run a single test file:
pnpm --filter @hermex/api exec jest src/vehicles/vehicles.resolver.spec.ts

Discutindo arquitetura e estrutura de módulos

Falamos um pouco sobre a arquitetura com GraphQL, Prisma e a estrutura de módulos. Discutimos o que está presente na parte web e no banco de dados. Quando adicionamos um novo domínio no back-end, seguimos uma estrutura predefinida.

Para adicionar um novo domínio na API, seguimos o padrão vehicles:

1. Add model to `prisma/schema.prisma`
2. Run `pnpm db:migrate` and `pnpm db:generate`
3. Use `nest generate` (from `apps/api`) to scaffold module, resolver, and service instead of creating files manually
4. Wire up `PrismaService` in the generated resolver and import the module in `AppModule`

Editando e refinando o Cloud Code

Podemos começar a interagir e editar manualmente o Cloud Code. Preferimos usar o próprio Cloud para editar e, em seguida, revisar. Existem prós e contras nessa abordagem, dependendo do que desejamos fazer.

Primeiro, verificamos se estamos usando o modelo mais potente. Já estamos no Opus, pois queremos que seja adequado para essa tarefa. Vamos atualizar o CloudMD na raiz. Na API, para criar novos módulos, utilizamos o comando nest-generate em vez de fazê-lo manualmente.

Conectando com o GitHub e finalizando

Uma regra geral importante é, ao instalar bibliotecas Node.js, sempre usar pnpm install e nunca editar o package.json manualmente. Assim, garantimos que instalamos a última versão, em vez de escolher e instalar uma versão que já conhecemos.

Este é o momento de refinar, ajustar e eliminar o que não é necessário, além de adicionar o que falta, para que tudo fique bem ajustado ao mais importante para o projeto. Esse era o perfil que queríamos ver.

Para o próximo curso, vamos começar a conectar com o GitHub. Voltamos à terminal para mostrar os MCPs configurados. Queremos mostrar o GitHub, pois temos o MCP de GitHub conectado para realizar commits, push e outras operações. Se ainda não o fez, conecte-o.

Podemos consultar a documentação do GitHub para configurar isso no Cloud Code. Se não usar o Cloud Code, há opções para todos, como Antigravity, C-Line, Copilot, Codex, Cursor, Gemini, Wingsurf, entre outros. Escolha seu favorito e instale seu MCP para que possamos pedir ao Cloud Code que execute tarefas.

Por enquanto, isso é tudo. Tudo está bem encaminhado. Agora precisamos configurar, juntar tudo isso e enviar para o Git. Nos vemos na próxima. Até logo.

Sobre o curso Engenharia de software na era da IA: planejamento, automações e entrega em escala com agentes de IA

O curso Engenharia de software na era da IA: planejamento, automações e entrega em escala com agentes de IA possui 109 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de IA para Programação em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo setup do projeto e das ferramentas
• Planejando spec-driven com Linear
• Definidino automações, skills e fluxo do time
• Conectando os pontos do projeto
• O que fica pra você