IA para Dev: Usando o Windsurf para projetos prontos

Cascade: Como pensa a IA do Windsurf - Introdução

Apresentando o instrutor e o projeto

Olá! Sejam muito bem-vindos a este conteúdo de IA para desenvolvedores 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, que estão amarrados. Ele usa óculos com armação escura, uma camiseta xadrez preta e cinza, e está à frente de um fundo degradê que vai do azul para o rosa.

Durante todo este material, utilizaremos o projeto da locadora, que é uma locadora de carros que permite que possamos alugar tanto carros mais comuns quanto alguns veículos da cultura pop. Este projeto, no momento, possui algumas áreas que podem ser melhoradas, e aplicaremos correções daqui para frente, além de adicionar novas funcionalidades.

Explorando o uso do Windsurf

Para isso, exploraremos ao máximo a nossa ferramenta, que é o Windsurf. O Windsurf é uma dessas ferramentas de IA integradas que nos auxiliam na programação. Vamos entender como ele pode funcionar, começando por um contexto mais simples, explorando o projeto e utilizando-o para a parte de discovery (descoberta), como um determinado endpoint (ponto de extremidade) funciona e como uma determinada parte visual do projeto está implementada.

Este é um projeto mais robusto, que possui tanto o back-end quanto o front-end integrados.

Abordando funcionalidades e segurança

Vamos explorar recursos específicos para cada um deles com o auxílio do Windsurf, utilizando não apenas a ferramenta de chat disponível para codificação dos agentes. Vamos entender a parte de modelos, como podemos enviar instruções mais simples e instruções mais complexas, que demandam um cuidado maior, e como isso pode interferir em nossos limites. O Windsurf entenderá o contexto do projeto, permitindo que criemos pequenos pontos no tempo para retroceder, se necessário.

Vamos abordar questões de segurança, regras, memórias, fluxos de trabalho e automações que podemos aplicar. Além disso, discutiremos aspectos que, à primeira vista, não aparecem no editor, mas onde a IA nos auxilia a criar um projeto melhor, adicionar funcionalidades e realizar o processo de debug. Faremos isso tanto via texto quanto explorando a multimodalidade, incluindo arquivos, criando código a partir de imagens e aproveitando ao máximo o Windsurf.

Acelerando o fluxo de desenvolvimento

Também trabalharemos com questões que podem tornar o fluxo de desenvolvimento mais rápido, mas que exigem certo controle. Vamos explorar bastante, adicionar novas funções e fazer correções. Há espaço para muito conteúdo, então esperamos que todos estejam animados para começar. Vamos lá!

Cascade: Como pensa a IA do Windsurf - Apresentação do projeto

Instalando a ferramenta Windsurf

Para prosseguirmos com nossos estudos, primeiramente, vamos instalar a ferramenta de IA chamada Windsurf. Já estamos com o site oficial da nossa IDE aberto, que é o windsurf.com. Assim que acessamos o site, há a possibilidade de fazer o download conforme o sistema operacional. No nosso caso, apareceu a opção "Download for Windows", um botão em tom de verde azulado. Vamos clicar nele. Existem versões disponíveis para outros sistemas, como o Mac, e a recomendação será feita de acordo com a identificação que o site faz da máquina. No nosso caso, clicaremos na próxima página em "Download for x64", que é o nosso sistema. Você pode selecionar a variante do seu.

Enquanto o download é realizado, vamos para a seção de pricing, que possui um menu no canto superior. Ao clicarmos em pricing, acessamos a página de "Plans and Prices", ou seja, planos e preços. Uma das grandes vantagens do Windsurf em relação aos concorrentes, pelo menos no momento em que estamos gravando este conteúdo, é o preço. Existe uma versão gratuita, como ocorre com outras ferramentas, que é o plano free. Você pode baixar, testar e instalar gratuitamente, mas há várias limitações. O plano PRO, que é popular e utilizado por muitas pessoas, não só nesta ferramenta, mas também em outras, é mais barato. No momento da gravação, ele custa 15 dólares, enquanto um plano similar tende a custar 20 dólares em outras ferramentas. O plano PRO possui algumas restrições, mas oferece muitas vantagens, especialmente em comparação com a versão gratuita. Este plano inclui 500 prompts mensais.

Explorando os planos e funcionalidades do Windsurf

Vamos entender melhor como isso funciona. Não é necessário se assustar agora. Atualmente, há um modelo especial do Windsurf com limites de contexto rápido maiores. Quando o plano estiver assinado, se a cota ou o limite de tokens for excedido, é possível comprar mais por um valor mais acessível do que se fosse adquirido separadamente. O plano também permite 5 deploys de aplicativos por dia. Existem outros planos, mas utilizaremos o plano popular. Recomendamos este plano, seja para investimento em estudos ou para uso diário. Há também planos superiores, como o de Teams ou o Enterprise, caso esteja sendo utilizado para uma empresa.

Após o download da ferramenta, podemos proceder com a instalação. Vamos clicar no arquivo para abrir o instalador e, em geral, apenas aceitaremos os termos. Recomendamos, é claro, que leiam os termos. No nosso caso, utilizando o Windows, deixaremos selecionada a opção para registrar o Windsurf como editor de arquivos e adicionar ao path. Se necessário, reiniciaremos o computador. Clicaremos em instalar e aguardaremos a conclusão da instalação. Com a instalação finalizada, deixaremos marcada a caixa para iniciar o Windsurf e clicaremos em concluir.

Configurando o ambiente de desenvolvimento

O primeiro painel que veremos é muito similar ao famoso editor VS Code, o Visual Studio Code, que talvez conheçam. Ele é bastante inspirado nessa ferramenta, pois deriva dela. O painel, caso já tenham lidado com o VS Code, é muito similar. O que precisamos entender para este curso, que vamos orientar, é como adicionar o projeto que utilizaremos. Já temos algumas configurações para facilitar a visualização, com um zoom maior. O projeto está organizado, mas, em geral, podemos clicar em "Open Folder" ou no canto superior em "File" e, por exemplo, em "Add Folder to Workspace". Basta procurar o repositório baixado, que contém nosso projeto.

Ao abrir o projeto, veremos a estrutura. Lembrando que utilizaremos a locadora, um projeto que possui tanto a pasta do back-end, com nossa API, vários endpoints e muita lógica, quanto o front-end. É um projeto mais robusto, desenvolvido ao longo de alguns cursos anteriores, inicialmente com uma versão em React. Há materiais na plataforma que ensinam como este projeto, que tinha outro nome originalmente, pode ser evoluído para utilizar o Next.

Explorando a estrutura do projeto

Temos a API com nossos controllers, banco de dados, que está utilizando um SQLite, toda a parte do middleware, as rotas e diversos arquivos, como o spec.json, com as bibliotecas que vamos utilizar. No front-end, temos alguns ícones, a parte lógica, a parte visual, todos os nossos assets, nossos contextos, a parte de autenticação e as páginas em si, que estão separadas. Temos algumas páginas aqui, algo bem próximo de um projeto real. Não vamos explorar todos os arquivos, pois seria bastante conteúdo, mas no painel, no canto direito, é possível fazer essa exploração.

Utilizando o atalho Ctrl-J, podemos abrir o terminal e nos preparar para rodar o projeto. Junto do nosso back-end e front-end, temos um arquivo de readme, que podemos clicar para pré-visualizar. Ele contém toda a estrutura do projeto e uma seção sobre como executar. Para isso, recomenda-se a instalação do Node. Se já tivermos o Node instalado, basta executar o comando npm run install:all no terminal.

npm run install:all

Instalando dependências e configurando o projeto

Ao fazer isso, pode aparecer um erro se não tivermos o Node e, consequentemente, o npm instalado. Para instalar o Node e ter acesso ao npm, podemos acessar o site oficial do Node. Vamos deixar o link oficial, abrir o site, ir em download e selecionar a versão do sistema. No caso do Windows, clicamos para fazer o download do windows-installer.msc, aguardamos o download, clicamos em abrir, aceitamos os termos, clicamos em next e instalamos. Após a instalação, talvez seja necessário reiniciar a máquina.

Podemos testar voltando à nossa ferramenta, que é o Windsurf. Abrimos mais um terminal, minimizamos a janela no canto esquerdo e rodamos o mesmo comando. Ao apertar a seta para cima e dar Enter, o projeto começa a ser configurado. Todos os pacotes são baixados, e a pasta node_modules é criada, consumindo mais memória. Pode demorar um pouco para baixar tudo o que for necessário. Se nada der errado, veremos algumas mensagens, talvez em amarelo com um alerta ou outro, mas mensagens em branco indicam que o projeto pode ser executado todo de uma vez.

Executando o projeto e verificando o funcionamento

Agora, para executar o projeto, utilizamos o comando npm run dev no terminal.

npm run dev

As instruções estão no arquivo readme.md para executar partes separadas, mas nosso objetivo é rodar o projeto de uma única vez com npm run dev no terminal e dar Enter. Ele começará a enviar uma série de informações no terminal. Se o servidor estiver funcionando e o site já estiver no ar, aparecerá uma mensagem indicando o localhost e a porta, que pode variar.

Podemos copiar essa informação e testar. Ao abrir o navegador e colar o endpoint, o site será aberto. No momento, a locadora está funcionando, com alguns veículos disponíveis para alugar. Podemos selecionar um veículo, ver detalhes, escolher uma localização para retirada e devolução, definir uma data inicial e final, e fazer login. O fluxo principal parece estar funcionando. Podemos voltar à página inicial, onde há uma função implementada para sempre ver novos carros disponíveis. O projeto está funcionando corretamente, e podemos seguir com o desenvolvimento.

Cascade: Como pensa a IA do Windsurf - Conhecendo o Cascade

Configurando o ambiente e identificando problemas de layout

Agora que o Insurf já está baixado, configurado e pronto para uso, podemos começar a adicionar funções e também fazer correções no nosso projeto. Por exemplo, na página inicial do nosso site, se acabamos de entrar e ainda não fizemos login, e quisermos favoritar algum dos carros, como o Batmóvel, ao clicar no botão de coração, aparece uma mensagem solicitando que façamos login para favoritar os carros. No entanto, essa mensagem está com um layout não tão agradável, sendo o alerta padrão do navegador. Isso difere, por exemplo, do que ocorre ao clicar em "ver detalhes" de um veículo, selecionar o local de retirada, devolução e as datas. Nesse caso, ao clicar no botão dentro da página de detalhes para fazer login e reservar, aparece uma modal com a identidade visual do nosso site, incluindo um botão laranja, destacando-se como parte do site.

Foi solicitado que realizemos essa troca. Na página inicial do aplicativo, quando um carro precisar ser favoritado e a pessoa ainda não tiver feito login ou criado uma conta, queremos mostrar uma mensagem com uma modal mais bem trabalhada. Para isso, utilizaremos o windsurf. Vamos minimizar o terminal com CTRL+J e fechar o README.md, ficando apenas com o painel do windsurf. Como já mencionamos, ele é similar ao VS Code, mas com algumas mudanças, especialmente voltadas à parte de IA. No canto superior direito, há o símbolo do windsurf, e ao passar o mouse sobre ele, aparece a opção cascade, com o atalho CTRL+L. Tanto ao clicar quanto ao utilizar o atalho, surge o cascade chat, que é como interagimos com a IA dentro do windsurf. Na primeira vez que abrir essa opção, podem aparecer sugestões de prompts, como criar um aplicativo, um jogo, ou fazer o deploy de um aplicativo, o que pode ser interessante explorar.

Explorando a interação com a IA e ajustando o projeto

No geral, a forma de interação é essa. No canto superior, há a palavra "agentes", onde podemos visualizar todos os agentes já acionados. Sempre que digitarmos um prompt e enviarmos, e algo começar a ser trabalhado, podemos acessar o histórico a partir dali. É similar a ferramentas de LLM, como o chat GPT, Gemini ou Clouder, mas com variações. Podemos expandir o painel do canto esquerdo, digitar algo, e a grande diferença é que podemos clicar no botão de chat e trocar entre o Clouder e o chat em si. No chat, podemos enviar informações, como pedir para criar um código específico, e ele será devolvido diretamente. Por exemplo, podemos solicitar: "CRIE UM LOOP EM JS DE 0 A 100", e ele pode criar um loop em JavaScript, oferecendo várias opções.

Se deixarmos em "code", ao invés de chat, o Cascade pode escrever e editar código. O Cascade, que é o agente responsável, pode fazer isso para nós. Um ponto interessante é que, ao fazer uma implementação específica, iniciamos um novo chat. Podemos clicar no botão "start a new conversation" no canto superior. Ao fazer isso, em "agentes", podemos ver o histórico anterior, mas deixaremos na nova janela. Podemos marcar arquivos, e ele sempre considerará o que está aberto em tela. Podemos ir em "front-end", e ao rodar o comando para algumas instalações, ele pode ter alterado o nosso package.json, mas não é o foco agora. Podemos ir em "source", "src", procurar por "pages", e sabemos que provavelmente precisaremos mexer na home, onde está o problema. Podemos deixar a home selecionada e minimizar o painel esquerdo com "Ctrl+B".

Criando e integrando o componente LoginPromptModal

Dentro, temos o arquivo principal, onde o comportamento de favoritar está sendo feito, e o Cascade considerará os arquivos abertos ou marcados. Podemos deixar isso aberto ou marcar explicitamente o arquivo home.tsx. Durante o material, utilizaremos alguns prompts previamente escritos para agilizar o tempo, e você pode replicá-los como desejar. Vamos marcar o arquivo home.tsx e corrigir o comportamento. O prompt que já colocamos é: "A mensagem 'faça login para favoritar carros' está aparecendo com o alerta padrão do navegador. Crie uma modal customizada com o layout baseado nos modais já existentes."

Para começar, vamos criar o componente LoginPromptModal que será responsável por exibir a mensagem de login de forma mais estilizada. Aqui está o código para esse componente:

import { MdClose, MdFavorite, MdPerson } from 'react-icons/md';
import logo from '../assets/logo-dark.png';

interface LoginPromptModalProps {
  isOpen: boolean;
  onClose: () => void;
  onOpenLogin: () => void;
}

export function LoginPromptModal({ isOpen, onClose, onOpenLogin }: LoginPromptModalProps) {
  if (!isOpen) return null;

  const handleLoginClick = () => {
    onClose();
    onOpenLogin();
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
      <div className="bg-white rounded-lg w-full max-w-md p-6 relative">
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-neutral-text"
          aria-label="Fechar"
        >
          <MdClose className="w-6 h-6" />
        </button>

        <div className="p-8">
          {/* Logo */}
          <div className="text-center mb-6">
            <img src={logo} alt="Loucadora" className="h-12 mx-auto" />
          </div>

          {/* Icon and Message */}
          <div className="text-center mb-6">
            <div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4">
              <MdFavorite className="w-8 h-8 text-primary-pure" />
            </div>
            <h2 className="font-heading text-heading-md text-neutral-text">
              Faça login para favoritar carros
            </h2>
            <p className="text-body-md text-neutral-text">
              Para adicionar carros aos seus favoritos, você precisa estar logado na sua conta.
            </p>
          </div>

          {/* Action Buttons */}
          <div className="space-y-3">
            <button
              onClick={handleLoginClick}
              className="w-full bg-primary-pure text-white rounded-lg py-3 font-bold flex items-center justify-center"
            >
              <MdPerson className="w-5 h-5 mr-2" />
              Fazer login
            </button>
            <button
              onClick={onClose}
              className="w-full bg-neutral-divisor text-neutral-text rounded-lg py-3 font-bold"
            >
              Continuar sem login
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Esse componente LoginPromptModal utiliza ícones e um logo para criar uma interface mais amigável e consistente com o restante do site. Agora, precisamos integrá-lo ao nosso arquivo home.tsx.

Integrando o LoginPromptModal ao arquivo home.tsx

Vamos importar o LoginPromptModal e outros modais que podem ser necessários:

import { LoginPromptModal, LoginModal, RegisterModal } from '../';

Em seguida, definimos os estados que controlarão a abertura e fechamento dos modais:

const [isLoginPromptModalOpen, setIsLoginPromptModalOpen] = useState(false);
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);

Agora, vamos criar as funções que irão abrir e fechar os modais conforme necessário:

const openLoginModal = () => {
  setIsLoginModalOpen(true);
  setIsLoginPromptModalOpen(false);
  setIsRegisterModalOpen(false);
};

const closeLoginModal = () => {
  setIsLoginModalOpen(false);
};

const openRegisterModal = () => {
  setIsRegisterModalOpen(true);
  setIsLoginModalOpen(false);
};

const closeRegisterModal = () => {
  setIsRegisterModalOpen(false);
};

Com essas funções, podemos controlar a navegação entre os diferentes modais. Agora, vamos adicionar a lógica para abrir o LoginPromptModal caso o usuário não esteja autenticado:

if (!isAuthenticated) {
  setIsLoginPromptModalOpen(true);
  return;
}

Finalmente, vamos renderizar os modais no JSX do nosso componente:

<LoginPromptModal
  isOpen={isLoginPromptModalOpen}
  onClose={() => setIsLoginPromptModalOpen(false)}
  onOpenLogin={openLoginModal}
/>
<LoginModal
  isOpen={isLoginModalOpen}
  onClose={closeLoginModal}
  onOpenRegister={openRegisterModal}
/>
<RegisterModal
  isOpen={isRegisterModalOpen}
  onClose={closeRegisterModal}
  onOpenLogin={openLoginModal}
/>

Com isso, integramos o novo modal ao nosso projeto, substituindo o alerta padrão do navegador por uma interface mais amigável e consistente com o design do site. A IA nos ajudou a criar e integrar esse modal, garantindo que o fluxo de autenticação seja mantido e que a experiência do usuário seja aprimorada.

Sobre o curso IA para Dev: Usando o Windsurf para projetos prontos

O curso IA para Dev: Usando o Windsurf para projetos prontos possui 143 minutos de vídeos, em um total de 31 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