IA para Dev: Automação de código e integração com Cursor

Conhecendo o Cursor - Apresentação

Apresentando o instrutor e o curso

Olá, sejam todos bem-vindos a mais este conteúdo de IA para Devs 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 escuros e compridos, que vão até a altura dos ombros. Ele usa óculos com armação escura e veste uma camiseta azul-marinho. Está à frente de um fundo degradê que vai do azul para o rosa.

Explorando o uso do cursor na programação

Durante todo o nosso material, vamos explorar como utilizar o cursor, que é uma das melhores ferramentas atualmente para auxiliar na carreira como pessoa desenvolvedora. O objetivo é desenvolver códigos mais rapidamente, acelerar o fluxo de trabalho e ter mais tempo para se dedicar às tarefas que realmente importam para as pessoas programadoras. Além disso, é essencial não ficar para trás nesse mercado tão dinâmico.

Para isso, vamos construir um pequeno projeto. O foco não será o projeto em si, nem a ferramenta, mas sim como podemos, enquanto pessoas que lidam diariamente com programação, utilizar esse tipo de recurso para auxiliar no trabalho. O projeto será um pequeno site de portfólio, com uma guia "Sobre Mim", que construiremos do zero, praticamente utilizando 100% do cursor.

Detalhando o projeto do site de portfólio

Teremos uma guia "Meus Trabalhos", com uma galeria de fotos e um carrossel para navegação. Além disso, haverá uma seção inicial, a home, que é a parte mais importante, contendo algumas redes sociais.

Ao longo de todo o nosso material, utilizaremos a ferramenta cursor, que já estará totalmente integrada ao nosso ambiente, sugerindo mudanças, melhorias e inserindo informações. Vamos abordar passo a passo desde o problema que ela resolve até como podemos fazer um uso mais casual, começando por adições, sugestões e adição de contexto. Trabalharemos cada vez mais com diferentes tipos de chat e ferramentas para realizar modificações simples ou utilizar vários tipos de arquivos junto com nosso código e ideias. Assim, entenderemos como esse tipo de ferramenta pode nos ajudar no dia a dia e agilizar nosso trabalho.

Discutindo aspectos conceituais e requisitos do curso

Além disso, exploraremos a parte mais conceitual e filosófica, discutindo situações em que pedimos demais e a ferramenta não consegue entregar, ou quando precisamos lapidar o que ela nos sugere. Para realizar este curso, não é necessário nenhum pré-requisito específico, mas é recomendável ter noções de lógica de programação. Vamos tentar fazer um conteúdo o mais didático possível, mesmo que não tenhamos familiaridade com o projeto, que será desenvolvido com HTML, CSS e JavaScript puro. Em alguns momentos, pontuaremos algo necessário, mas não se preocupe, pois uma explicação será dada.

Dito isso, esperamos que estejam animados para começar. Vamos lá!

Conhecendo o Cursor - Configurando o ambiente

Explorando ferramentas de inteligência artificial para programação

Algumas ferramentas de inteligência artificial para programação incluem, por exemplo, o Chat GPT ou o Google Gemini. Com essas ferramentas, podemos solicitar um código para exibir um loop de 0 até 42, como fizemos. O resultado é devolvido pela ferramenta, e podemos copiar essa resposta e inseri-la em nossa base de código para testar.

Existem também ferramentas como o GitHub Copilot ou o Tab9, que são projetadas para auxiliar no preenchimento automático de código. Quando começamos a escrever um código, essas ferramentas oferecem sugestões de preenchimento. Geralmente, pressionamos "Tab" para aceitar a sugestão, e o código é completado se a sugestão for adequada.

Introduzindo o Cursor e suas funcionalidades

O Cursor, que será nosso foco de estudo neste material, trabalha com a parte de agentes, misturando os conceitos anteriores. Podemos fazer uma solicitação, e o código será escrito automaticamente, sem a necessidade de pressionar "Tab", se atender ao que solicitamos. O código já será inserido em nossa base de código.

Existe uma página inicial que deixaremos disponível para acesso. Algumas das empresas mais conhecidas que já utilizam o Cursor atualmente, conforme descrito no site deles, incluem Samsung, Shopify e MercadoLivre, entre outras. Ao abrir o site, há a opção de fazer o download, e a plataforma será identificada automaticamente. Se não for identificada corretamente, como no caso de um download para Windows não estar na plataforma correta, podemos clicar em outras opções de download. Estão disponíveis versões para Mac, Windows e Linux. Vamos baixar para Windows, que é o nosso caso.

Realizando o download e instalação do Cursor

Enquanto o download é realizado, há uma guia na parte superior chamada "Pricing", que trata da precificação dessa ferramenta. Dentro dessa guia, encontramos as opções de uso, incluindo a gratuita, denominada "free", para hobbies, que permite uso com algumas limitações durante duas semanas. Existe também a opção "pro", que requer o pagamento de uma taxa, atualmente de 20 dólares. Utilizaremos essa opção durante todo o material que será gravado.

Após o download, é necessário fazer login com a conta, especialmente se tivermos algum dos planos empresariais que a empresa pode ter disponibilizado. Esses planos oferecem vantagens, principalmente em relação à privacidade, que abordaremos em outro momento. Após o download, clicamos para iniciar a instalação. Esse processo pode variar de plataforma para plataforma, mas, em geral, basta aceitar os termos e clicar em "avançar".

Configurando e iniciando o Cursor

No nosso caso, já temos a pasta do programa criada, então seguimos clicando em "avançar". As opções que ele solicita para seleção podem ser deixadas como estão. É importante destacar duas opções: registrar o cursor para abrir arquivos, como um .py de Python, e adicionar ao path se disponível. Esta última opção só será efetivada após reiniciarmos o computador. Após selecionar essas opções, clicamos em "instalar" e aguardamos a conclusão da instalação.

Após a instalação, podemos iniciar o programa. Realizamos o login e configuramos a interface para melhor visualização. A interface apresenta duas diferenças: um zoom maior para facilitar a visualização dos exemplos e um botão de settings abaixo da palavra "cursor", que no nosso caso é de login ou sign-in. Ao clicar, o navegador é aberto para realizar o login com contas mencionadas, como Google ou GitHub, facilitando o fluxo.

Explorando a interface do Cursor

Agora que o programa está instalado, ele apresenta uma interface familiar para quem já utilizou outras IDEs. Vamos continuar nossos estudos com ele a partir de agora.

Conhecendo o Cursor - Gerando os primeiros códigos

Explorando a interface do editor

Para começarmos a trabalhar com o cursor, podemos explorar um pouco da interface, que lembra bastante outros editores, como o VSCode. Antes de iniciar, faremos um pequeno ajuste para garantir que nossos arquivos não se percam. Na parte superior esquerda, onde está escrito "File", clicamos nessa opção e procuramos por "Add Folder to Workspace".

Ao abrir essa opção, localizamos uma pasta no computador que já deixamos separada para adicionar todos os arquivos que formos gravar. Isso é importante para evitar que o projeto se perca e para manter os arquivos organizados. Assim que clicamos no botão para adicionar, um novo chat é aberto por padrão, podendo ter diferentes configurações. Ele pode aparecer no canto direito ou no meio da tela.

Configurando o ambiente de trabalho

Se, por algum motivo, o chat não aparecer, no canto superior direito há alguns botões. Ao passar o mouse sobre eles, encontramos o "Toggle Primary Sidebar", "Toggle Panel" e o "Toggle IE Panel". Ao clicar nesse último botão, habilitamos ou desabilitamos o chat principal. Este chat será onde interagiremos na maior parte do tempo.

Com a ferramenta, podemos selecionar onde está escrito "Agente" e alguns modos de funcionamento. Vamos manter o "Agente" por padrão, mas saibam que também há a possibilidade de utilizar o "Background" e o "ASCII", que são mais próximos do que estamos acostumados com algumas IAs, como o ChatGPT. Ao fazer um pedido, a resposta virá em forma de texto.

Solicitando a criação de uma landing page

Para explorarmos a parte de "Agentes" que mencionamos, vamos deixar selecionado o "Agente" em si e fazer um pedido: "CRIE UMA PÁGINA SIMPLES DE LANDING PAGE". Sabemos que essas são páginas que as pessoas acessam para conferir algum lançamento, como uma "LANDING PAGE PARA O LANÇAMENTO DO MEU NOVO LIVRO". Vamos apenas dar esse comando e pressionar "Enter".

O que ocorre agora é que o cursor começa a pensar no passo a passo para construir o que foi solicitado. Ele já elaborou um To-do, que inclui criar uma estrutura de HTML, implementar estilo CSS, adicionar algumas seções e implementar a interatividade com JavaScript. Podemos perceber que ele começou a fazer algumas criações, e vamos explorar alguns desses detalhes mais adiante. Ele já indicou que criou um arquivo index.html.

Acompanhando o progresso da criação

Durante todo este conteúdo, dependeremos do cursor para criar, editar e modificar alguns arquivos. Isso pode demorar um pouco, então faremos alguns cortes pontuais na edição quando estiver demorando demais ou quando não estivermos falando para passar o tempo. Nesse caso, ele já está criando os arquivos, e podemos mostrar o progresso.

Vamos clicar no botão de "Toggle Primary Sidebar" ou usar o atalho "Ctrl+B" no Windows ou Linux. Ao clicar nesse botão no canto esquerdo do projeto, ele já mostra que criou alguns arquivos. Lembre-se de que na pasta que adicionamos não havia nada, e agora já temos um arquivo index.html, um script.js e também um style. Ele já organizou para nós a estrutura HTML e os scripts.

Visualizando o resultado final

Optamos por um ponto mais simples, mas que seja em HTML, para podermos visualizar o resultado na tela. Vamos clicar com o botão direito no index.html e procurar pela opção "Review in File Explorer" ou "Review in Finder", dependendo do sistema operacional. Ao fazer isso, ele abre a pasta que selecionamos. Ao dar dois cliques no index.html, ele abre a página inteira criada com aquele único prompt.

Podemos perceber que há um "Descubra, uma nova história", o meu livro, uma animação ao passar o mouse, e um botão que desliza com animação. Há também uma seção sobre o livro com informações aleatórias e sobre o autor. Como mencionamos, será uma landing page, uma página para as pessoas conhecerem melhor o trabalho e se cadastrarem. Há um campo para inserir o e-mail e um botão para notificação. Ao clicar, aparece um botão de "enviando" e "obrigado, você será notificado".

Concluindo o exemplo introdutório

Este foi um exemplo introdutório, com páginas de autor e contato, para percebermos como o cursor age. Podemos fazer solicitações, e ele realizará criações, edições e, se necessário, criará arquivos. A partir deste exemplo, queremos desenvolver um projeto real com vocês, utilizando essas ferramentas e aprofundando nosso conhecimento. Vamos começar agora.

Sobre o curso IA para Dev: Automação de código e integração com Cursor

O curso IA para Dev: Automação de código e integração com Cursor possui 154 minutos de vídeos, em um total de 43 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