IA para Dev: Lidando com projetos prontos com Cursor 2.0

Comandos, regras e automações - Introdução

Apresentando o instrutor e o curso

Olá! Seja bem-vindo a mais este conteúdo de inteligência artificial para pessoas desenvolvedoras aqui na Alura. Meu nome é Júnior e serei o instrutor deste curso.

Audiodescrição: Júnior é um homem de pele clara, com cabelos loiros e escuros compridos até a altura dos ombros. Ele usa óculos com armação escura, veste uma camiseta azul-marinho e está posicionado em frente a um fundo degradê que vai do azul para o rosa.

Explorando o uso do Cursor 2.0 em projetos existentes

Durante todo este material, vamos ensinar como utilizar o Cursor 2.0 para auxiliar no fluxo de trabalho em projetos já existentes. Abordaremos tópicos mais avançados, compreendendo como o Cursor lida com projetos maiores, que já possuem uma base de arquivos e dados para exploração. Vamos discutir como é feita a indexação, como ele entende a semântica e como podemos alterar esse funcionamento.

Além disso, aprenderemos a lidar com múltiplos agentes, cada um capaz de realizar tarefas de formas diferentes com modelos específicos. Vamos explorar como certas automações podem interagir com o código existente para automatizar e resolver tarefas que, de outra forma, precisaríamos realizar manualmente, mas que exigem uma certa inteligência.

Utilizando o modo de planejamento no projeto Loucadura

Vamos utilizar extensivamente o modo de planejamento. Vamos entender como ele funciona, como interagir com ele e como pode ser útil em algumas situações. Para isso, utilizaremos o projeto da Loucadura, que está aberto aqui. O projeto inclui tanto o front-end quanto o back-end, e já está em execução. Trata-se de um site para aluguel de veículos, com uma série de informações que podem ser selecionadas e introduzidas, apresentando um fluxo bastante completo.

Na guia inicial, implementaremos algumas funcionalidades com a ajuda do cursor, que nos guiará através do método de discovery (descoberta) para realizar o que esperamos. Existem seções onde podemos, por exemplo, reservar um carro, mas, para isso, é necessário corrigir algumas etapas previamente, e o cursor nos auxiliará nesse processo.

Interagindo com informações dentro e fora do projeto

Além disso, veremos como interagir com informações dentro e fora do nosso projeto. Isso inclui o gerenciamento de chats, a criação de arquivos para exportação e importação em outras aplicações, além de várias outras dicas que forneceremos ao longo deste conteúdo. Esperamos que todos estejam animados para começar. Vamos lá!

Comandos, regras e automações - Apresentação do projeto

Introduzindo o projeto Louca Dura

Como tarefa inicial do nosso projeto, vamos entender como a estrutura de arquivos está organizada e também como fazer esse projeto rodar em nossa máquina. Um pequeno aviso: pode ser que essa stack que escolhemos não seja a sua, e talvez você não esteja familiarizado com a linguagem ou com algumas tecnologias. No entanto, nosso objetivo durante todo este material será focar no aprendizado da ferramenta em si, no editor do Cursor. Portanto, mesmo que você domine ou não as tecnologias, recomendamos que explore um pouco do projeto e mexa em alguns pontos. O objetivo principal não é o projeto em si, mas sim as técnicas. Reservamos este momento para fazer uma introdução à Louca Dura, que é o projeto que vamos utilizar.

Escolhemos este projeto porque ele já possui, dentro do repositório que você terá disponível, um back-end implementado. Temos uma API que você pode conferir, com muitos arquivos, embora não passemos por todos. Ela já possui um banco de dados configurado com o SQLite, fornecendo várias informações de texto, imagens e rotas que vamos utilizar. Você pode explorar caso queira. Há também uma parte de autenticação implementada. Dentro da plataforma, temos vários conteúdos sobre como implementar essa API, que foi feita utilizando Node, Express e algumas outras tecnologias. Escolhemos o banco de dados SQLite por ser mais fácil de ter contato, caso você não saiba muito bem como começar. Também escolhemos esse banco por ser muito portátil, para que você não precise fazer grandes configurações. É fácil fazer a troca, e há vídeos na plataforma que abordam e se aprofundam mais nesse assunto.

Explorando a estrutura do front-end

Temos também a pasta de front-end. Este projeto, que originalmente tinha outro nome, foi desenvolvido em outro conteúdo da plataforma. Caso você queira entender mais sobre a estrutura dele, a parte do React e até uma migração para uma tecnologia mais moderna como o Next, há muito conteúdo na plataforma. Caso queira dar uma olhada em todos os arquivos, nos assets e nas páginas principais, todo esse material está disponível no repositório.

Preparando o ambiente de desenvolvimento

Como mencionado, este projeto utiliza Node. Caso você não o tenha instalado em sua máquina, será necessário fazer essa instalação para rodar o projeto. Vamos deixar alguns materiais extras, mas, de maneira geral, você pode utilizar sua IDE, que pode ser o Cursor ou até mesmo um terminal, caso já tenha instalado, para instalar o projeto. Ao abrir o Cursor, nas versões mais recentes, ele inicia diretamente no modo de agente. No canto superior esquerdo, há a opção "agentes", e você pode clicar em "editor". Este será o modo em que vamos trabalhar mais neste início. Independentemente dos modos, você pode abrir o terminal, por exemplo, com o atalho Ctrl + J, ou no canto superior direito, em "toggle panel", para abrir o painel.

O comando principal que vamos utilizar para rodar o projeto será npm rundev, mas precisamos fazer a instalação de algumas coisas antes com npm install. Vamos deixar esses comandos dentro do nosso readme.md. Nele, há toda a estrutura do projeto, caso você queira consultar. Já tem o comando completo para instalar as dependências do projeto e também para rodar o projeto em si. Porém, se tentarmos executar esse comando, aparecerá um erro, pois ainda não temos o Node instalado.

Instalando o Node.js

Se já tivermos o Node.js instalado, podemos seguir para a próxima etapa. Caso contrário, vamos deixar o link do site oficial do Node.js para que possamos fazer o download. A instalação é razoavelmente simples, e vale a pena consultar os links fornecidos caso haja alguma dúvida. No ambiente Windows, baixamos o windowsinstaller.msi e o abrimos. Durante a instalação, aceitamos as permissões necessárias, clicando em "next" repetidamente, e depois em "instalar". Após a instalação, uma tela simples indicará que o processo foi concluído. Caso demore mais ou menos tempo, não há problema. Se o comando não funcionar, podemos reiniciar a máquina para garantir que a instalação foi concluída.

Executando o projeto e explorando funcionalidades

Durante o processo, o download de todas as dependências do projeto será realizado, criando a pasta node_modules. O comando npm install, que é um gerenciador de pacotes, baixará tudo o que precisamos para rodar o projeto inicialmente. Para executar o projeto, utilizamos o comando npm run dev. Podemos executar esse comando no terminal de nossa preferência. Ao fazer isso, uma série de endpoints será servida, incluindo imagens de carros, pois estamos trabalhando em um projeto de locadora. O localhost 5173 estará disponível, e podemos acessá-lo copiando e colando o endereço ou clicando com o Ctrl pressionado.

No projeto, a ideia é exibir carros aleatórios na página inicial, com uma seção de categorias na parte superior e um sistema de autenticação que exploraremos ao longo do curso. As categorias incluem cultura pop, minivan, SUV, hatch, sedã, entre outras. Após o login, podemos escolher o carro, o local de retirada, a data inicial e final, e fazer a reserva. É um projeto completo, próximo ao dia a dia de uma pessoa desenvolvedora, e recomendamos que se explore o projeto.

Concluindo a introdução ao Cursor

A partir de agora, vamos entender como o Cursor pode acelerar e melhorar nosso fluxo de programação em projetos mais completos. Esperamos que todos estejam animados para começar.

Comandos, regras e automações - Conhecendo Comandos

Explorando o funcionamento atual do site

Atualmente, nosso site está rodando na porta que já mostramos, que é o localhost 5173. A porta pode variar um pouco, mas o site está disponível. Podemos deslizar e visualizar que há vários carros aparecendo. Ao clicar em selecionar um local, também há várias localizações. Vamos mexer tanto na parte visual quanto, principalmente, na parte de trás, no back-end da nossa aplicação. Muitas dessas mudanças vão requerer que paremos o servidor como ele está agora e o reiniciemos para que possam ser aplicadas.

Para fazer isso manualmente, podemos voltar ao nosso cursor ou terminal e utilizar o atalho "Ctrl+C" ou "Command+C" se estivermos no Mac, encerrando o servidor. Podemos voltar ao site mais uma vez, atualizar, e talvez ele nem carregue mais. Se continuar carregando, perceberemos que os carros disponíveis não aparecem mais. Ele mostra que não conseguiu carregar os carros. No local de retirada, só aparece "selecione um local", mas não as localizações. Precisamos utilizar o comando npm rundev novamente para que tudo volte a aparecer.

Utilizando comandos inteligentes para automação

Essa demanda de parar o servidor e reiniciar nem sempre será igual. Pode ser que o servidor esteja em uma porta diferente, e configurar um atalho normalmente, como faríamos no CMD, pode não resolver. Pensando nessas situações repetitivas, mas que têm algo diferente, que requerem atenção e inteligência, o cursor disponibiliza para os usuários a opção de commands, que são como atalhos inteligentes para esses fluxos de trabalho. Há uma pequena explicação caso queiramos nos aprofundar mais, e até alguns exemplos de uso, como colocar comentários em um PR, criar um PR, ou fazer o deploy da aplicação em produção, que às vezes requer rodar várias coisas e verificar se uma determinada ação já foi tomada. É basicamente como configurar um prompt que pode ser chamado de maneira mais rápida. O cursor será responsável por executar as ações que temos ali.

Vamos copiar o link dessa documentação. Caso queiramos, podemos nos aprofundar mais, pois eles explicam como isso pode ser criado, armazenado, entre outras informações. Vamos voltar ao nosso cursor e minimizar o chat com "Ctrl+J". Esta versão do cursor que estamos utilizando tem pequenas mudanças visuais em relação à versão do curso anterior. No geral, os atalhos e funcionalidades ainda são os mesmos. Podemos localizar no canto superior direito o toggle Ipanel, acessado com "Ctrl+Alt+B", que abrirá o nosso chat.

Criando comandos personalizados no cursor

No chat, ao colocar uma barra, aparecem algumas opções, entre elas o create command. Podemos selecionar essa opção e dar um nome ao comando, como "restart server". Podemos especificar o que precisa ser feito, seja um prompt como digitaríamos normalmente no chat, ou algo mais próximo dos comandos na documentação. Podemos pedir ao cursor para criar o comando para nós. Para isso, colocamos um arroba e marcamos o arquivo restart server.md. O .md indica que é um arquivo markdown, permitindo alterações em nível de hierarquia e versionamento. Podemos querer mudar ou voltar atrás no comando, e podemos especificar o que esperamos que seja feito. Vamos criar um comando para parar o servidor e reiniciar a aplicação com npm run dev. Podemos adicionar mais informações, mas faremos isso com base na documentação. Vamos colar o link.

Ao colar o link no chat, estamos dizendo ao cursor que ele pode consultar e ler essa página. Vamos dar "Enter" e deixar tudo no automático. O cursor pedirá permissão para ler a página, e clicaremos em "continue". Vamos deixar o auto search web marcado para que ele leia automaticamente quando necessário. É importante visualizar o que o cursor está pedindo para ler, pois pode ser um conteúdo grande e não queremos gastar essa informação toda. O cursor está lendo as informações, incluindo o nosso pack de JSON, onde estão configurados os comandos para lidar com o servidor, e está criando o comando dentro do restart server. Ele mostra tudo o que foi feito para parar no Windows e adaptações para outros sistemas. Vamos minimizar o painel do canto esquerdo, mas antes, mostramos que o restart server ficou dentro da pasta "cursor commands". A documentação explica como colocar esse tipo de comando disponível para outros projetos, bastando mudar o local da pasta.

Revisando e testando o comando de reinício do servidor

Vamos minimizar o painel do canto esquerdo com o atalho "Ctrl+B". Observamos que ele criou utilizando markdown, colocando na primeira linha com um asterisco o título do comando, que é para reiniciar o servidor, a descrição e tudo que precisa ser feito. Ele especifica parar alguns processos, comandos a serem executados no terminal ou PowerShell, aguardar um momento e iniciar. É como qualquer outro código. É interessante revisar o que a IA fez, pois pode haver algo danoso para o projeto. Lendo, percebemos que, aparentemente, está tudo correto.

Para criar o comando de reinício do servidor, utilizamos o seguinte código:

# Reiniciar Servidor

## Descrição
Este comando para o servidor atual e reinicia a aplicação
usando `npm run dev`.

## Instruções

1. **Parar os processos Node.js em execução**:
   - No Windows, use `taskkill /F /IM node.exe` para encerrar
     todos os processos Node.js.
   - Ou use `Get-Process node | Stop-Process -Force` no
     PowerShell

2. **Aguardar um momento** para garantir que os processos
   foram completamente encerrados

3. **Reiniciar a aplicação**:
   - Execute `npm run dev` na raiz do projeto para iniciar
     tanto o backend quanto o frontend em modo de desenvolvimento

## Comandos a executar
```powershell
# Parar processos Node.js
taskkill /F /IM node.exe 2>$null; Start-Sleep -Seconds 2

# Reiniciar a aplicação
npm run dev

Ressaltamos mais um ponto: estamos lidando com um modelo de inteligência artificial generativa. Isso significa que, mesmo que solicitemos a mesma coisa duas vezes, ele não nos dará a mesma resposta. Quando executarmos os mesmos passos, os resultados não serão idênticos, mas devem atender às nossas expectativas. É claro que o modelo está sujeito a erros, e talvez precisemos fazer adaptações. No entanto, aparentemente, ele atende ao que esperamos. Vamos clicar no botão de "keep" na parte inferior e realizar as ações dentro deste chat. Recomendamos abrir um novo chat, clicar no botão de mais e inserir a barra que colocamos anteriormente. Desta vez, aparecerá o "restart server", que é o comando configurado. Podemos ter vários desses comandos configurados. Nesse caso, ele já mostra o título, a descrição e algumas instruções. Basta selecionarmos e pressionar "Enter". Podemos adicionar mais parâmetros, se necessário. O modelo já está procurando qual porta precisa encerrar.

Automatizando o fluxo de commit e push no Git

Neste primeiro momento, estamos com o terminal sempre com a allow list, pedindo permissão para tudo. Vamos explorar isso mais adiante. Clicamos em "run", e ele informa que já finalizou alguns processos do Node e algumas portas. Achamos que encerrou até portas demais, mas já pediu permissão para selecionar o npm rundev e informar que o servidor está reiniciado. Podemos verificar se o servidor realmente foi reiniciado. Para garantir que tudo ocorreu como esperado, clicamos no botão "open in terminal". Ao clicar, vemos exatamente a mesma tela que vimos anteriormente no terminal. Todas as APIs parecem estar disponíveis: imagens, categoria, carros, todos os endpoints. Voltamos ao navegador e atualizamos. Agora, tudo está funcionando, incluindo o carregamento de carros e categorias. Precisaremos fazer várias alterações nessa funcionalidade, não uma específica, mas várias. É interessante que possamos dar um comando e fazer o restart.

Queremos mostrar que, além disso, utilizaremos outra ação durante todo o conteúdo gravado. Voltamos ao projeto no cursor e abrimos um novo chat. Desta vez, criamos um prompt mais direto no chat. Criamos um arquivo de comando para adicionar todos os arquivos modificados ao nosso git e gerar uma mensagem automática. Muitas ferramentas, como o cursor, já têm a capacidade de ler tudo que foi feito e gerar uma mensagem. Queremos que isso seja feito, além do commit e do push, para automatizar tudo. Vamos fazer isso dentro do mesmo contexto do comando que criou o servidor. Selecionamos o comando para iniciar o servidor, que foi o chat original, inserimos o prompt e enviamos. O modelo já sabe o que precisa ser feito e que precisará criar um arquivo. Como já temos a pasta do "restart server", ele gerará um novo arquivo e já deu um nome a ele. Podemos pedir isso de maneira direta, sem criar o arquivo em si, pois todos os arquivos são .md. Selecionamos o arquivo, minimizamos a guia no canto esquerdo com "Ctrl+B" e lemos a descrição. Tudo parece estar em ordem, e ele ainda está fazendo algumas alterações. Vamos aguardar.

Ele terminou de criar o comando para nós. Como podemos perceber, ele já colocou a mesma estrutura de descrição e instruções. Não precisamos marcar a documentação, pois ela já estava no mesmo chat. No geral, ele fará o fluxo que faríamos manualmente: git add, commit, push, e colocará uma mensagem, se necessário. Se passarmos uma mensagem, ele não a colocará. Isso é um uso real do que essa automação pode fornecer no dia a dia, pegando todo o histórico do que foi alterado. Essa informação será diferente para cada pessoa, permitindo um trabalho mais inteligente com a automação.

Implementando o comando de commit e push

Para o comando de commit e push, utilizamos o seguinte código:

# Commit e Push

## Descrição
Este comando adiciona todos os arquivos ao stage do Git, gera
uma mensagem de commit automática baseada nos arquivos
modificados (ou usa uma mensagem fornecida pelo usuário), faz
o commit e depois o push.

## Instruções

1. **Adicionar todos os arquivos ao stage**:
   - Execute `git add .` para adicionar todos os arquivos
     modificados, novos e deletados ao stage

2. **Verificar arquivos modificados e gerar mensagem de
   commit**:
   - Execute `git status --short` para ver quais arquivos
     foram modificados
   - Se o usuário forneceu uma mensagem de commit, use-a
     diretamente
   - Caso contrário, analise os arquivos modificados e gere
     uma mensagem automática descritiva:
       - Identifique os tipos de mudanças (frontend, backend,
         componentes, controllers, etc.)
       - Use o padrão conventional commits quando possível
         (feat:, fix:, chore:, etc.)
       - Crie uma mensagem clara e concisa que descreva as
         mudanças principais
       - Exemplos: "feat: adiciona novos componentes no
         frontend", "fix: corrige bug no carController", "chore:
         atualiza dependências"

3. **Fazer o commit**:
   - Execute `git commit -m "mensagem"` com a mensagem gerada
     ou fornecida pelo usuário

4. **Fazer o push**:
   - Execute `git push` para enviar as alterações para o
     repositório remoto

## Comandos a executar
```bash
# Adicionar todos os arquivos ao stage
git add .

# Verificar arquivos modificados (para gerar mensagem
# automática se necessário)
git status --short

# Fazer commit (usar mensagem fornecida ou gerada
# automaticamente)
git commit -m "mensagem_do_commit"

# Fazer push
git push

Observações

• Se o usuário fornecer uma mensagem de commit, use-a
  diretamente
• Se não houver mensagem, analise os arquivos modificados e
  gere uma mensagem descritiva automaticamente
• Sempre verifique se há arquivos para commitar antes de
  executar o commit

Vamos selecionar o nosso commit and push. Podemos adicionar informações extras, como "aula 1.3" ou "1.4". Não lembramos exatamente, mas achamos que é "1.3". Ao pressionar "Enter", ele começará a verificar todo o projeto e pedir permissões. Diferente do curso anterior, neste primeiro momento, faremos com que essa permissão seja adicionada à nossa allow list, a lista de permissões. Clicamos em "allow list git add", e ele provavelmente pedirá outras permissões depois. Está planejando os próximos movimentos e já pediu para adicionar o git allow list ao git e ao allow list. Faremos o mesmo com o git commit e, em seguida, com o git push. Ele já deve ter enviado, e já colocou o caminho esperado do repositório.

Concluindo a automação do fluxo de trabalho

Temos um fluxo automatizado. Todos os commits durante este curso serão feitos com esse método. Geralmente, gastamos tempo lembrando de fazer o commit. Isso é um pouco dos bastidores, mas agora teremos isso automatizado. No dia a dia, provavelmente não passaremos uma mensagem como "aula 1", mas sim algo como "lembre-se de adicionar o número de demanda tal" ou relacionado a uma conversa específica. Isso pode agregar informação para quem ler no futuro ou para alguma automação que ocorra após o commit ou ao fazer o PR. De qualquer forma, tudo isso está feito, e a partir de agora, vamos mexer no projeto em si.

Sobre o curso IA para Dev: Lidando com projetos prontos com Cursor 2.0

O curso IA para Dev: Lidando com projetos prontos com Cursor 2.0 possui 131 minutos de vídeos, em um total de 38 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:

• capitulo