Transcription
Hoje, estamos analisando o editor de código com IA, Wind Surf. Este é um editor relativamente novo; ele foi lançado no final de 2024. Estou usando-o nos últimos meses. Na verdade, fui uma das primeiras pessoas a começar a usá-lo, o que é engraçado. E ele lentamente se tornou um dos meus editores de código com IA favoritos.
Neste vídeo, darei um tutorial, mostrando todos os recursos que você precisa conhecer e compartilharei algumas dicas e truques de alguém que usa isso quase todos os dias. Assim, você poderá entender como usá-lo melhor, especialmente se você é um programador mais iniciante.
Primeiro, obviamente, temos que baixar e instalar o Wind Surf. Vou assumir que você já fez isso, mas quero falar rapidamente sobre os preços. Para o Wind Surf, eles têm um plano gratuito. No entanto, pelo menos no momento em que estou gravando este vídeo, não permite que você modifique arquivos. Você pode conversar com a IA, ela pode gerar código, mas não colocará o código nos arquivos para você, o que para mim é a razão principal para usar isso. Então, pessoalmente, pago pelo plano Pro Ultimate porque uso isso quase todos os dias. Para a maioria das pessoas, você provavelmente vai querer o plano Pro, que custa apenas US$ 10 por mês. E se você comparar isso com o Cursor, que acredito que atualmente custa US$ 20 por mês, então este é um ótimo negócio. Mas lembre-se, se você for usar apenas o plano gratuito, provavelmente nem me daria o trabalho. Você pode brincar com o editor, mas não é realmente útil a menos que você tenha um desses planos pagos. Na minha opinião, vale a pena. Isso não é patrocinado; você pode usar o que quiser e pode usar o Cursor gratuitamente se quiser apenas gerar código.
Dito isso, vamos começar o tutorial, porque este é definitivamente um editor legal e algo que você vai querer conferir, conferir. Então, eu acabei de abrir o Wind Surf aqui, e você vai notar que o meu provavelmente parece um pouco diferente do seu. Isso porque, quando você baixa o Wind Surf, como é um fork do VS Code, ele perguntará se você deseja importar suas configurações existentes do VS Code. Foi o que eu fiz. Eu tenho um tema, tenho algumas extensões, então tudo isso foi importado. Então, é muito bom se você já é um desenvolvedor trabalhando em algo como o VS Code. Independentemente disso, a primeira coisa que você vai querer fazer ao começar a escrever qualquer código é abrir algum tipo de pasta. Então, o que vou fazer é ir em "Abrir pasta", vou para a minha área de trabalho, vou criar uma pasta chamada "test", ou claro, eu já tenho uma chamada "test", vamos chamá-la de algo como "tutorial" ou "test tutorial", e colocar isso em um lugar onde você consiga localizá-la mais tarde. Porque muitos iniciantes cometem o erro de não lembrar onde salvaram o código e depois desligam o computador, abrem novamente e não conseguem encontrar onde está o projeto. Então, certifique-se de colocar isso em um local que você consiga encontrar mais tarde.
Agora, a partir daqui, você verá imediatamente que esta janela Cascade aparecerá. Esta é a versão do Wind Surf do Copilot ou qualquer nome que você queira dar a ele. Cascade, eu realmente não sei o significado deste nome, mas o ponto é que isso é o que você vai usar para realmente fazer alterações na sua base de código. Esta é a principal função, é o que uso provavelmente 90% do tempo, então vou me concentrar principalmente nisso.
Antes de começar a solicitar isso e fazê-lo gerar um monte de código, eu recomendo fortemente que você reserve alguns minutos e crie um pequeno plano. Pense consigo mesmo exatamente o que você quer alcançar, o que você quer construir, talvez desenhe uma pequena imagem de como você espera que a interface do usuário pareça. Digo isso porque esses modelos de IA podem realmente seguir caminhos loucos, e se você não sabe exatamente o que quer que ele faça, será muito difícil produzir a saída que você está procurando. Portanto, por favor, apenas crie um pequeno plano, tenha uma ideia de como você quer que o produto final pareça, e dessa forma será muito mais eficaz para você do que se você simplesmente entrar aqui e começar a mexer em um monte de coisas aleatórias. Isso o levará a todos os tipos de caminhos diferentes que você realmente não quer seguir.
Ok, então estamos dentro aqui, e podemos simplesmente escrever algum tipo de prompt aqui, e ele pode começar a gerar código imediatamente. Mas você notará que você tem este pequeno seletor de modo aqui para "escrever" e para "conversar". Certifique-se de que esteja no modo "escrever". Mas novamente, acredito que na versão gratuita, isso não lhe dá acesso a isso. Se você tiver o modo "escrever" ativado, isso, por padrão, irá modificar vários arquivos para você, talvez criar novos arquivos para você, ele pode fazer muitas coisas. Então, se você quiser ter cuidado, altere para o modo "conversar". Ele ainda pode escrever o código, mas simplesmente não o aplicará aos seus arquivos. Então você tem os dois modos diferentes. Se você estiver conversando com a base de código, use "conversar". Se você quiser apenas uma saída da IU que não esteja relacionada ao código ou não quiser que ela modifique seus arquivos, use "conversar". E se você quiser escrever em seus arquivos, obviamente, use o modo "escrever".
Pausa super rápida aqui, pessoal. Prometo que continuaremos em um segundo, mas só quero deixar vocês saberem que, se vocês estão assistindo a este canal há algum tempo e estão realmente procurando subir de nível como engenheiro de software, estou reabrindo meu programa de mentoria. Ele se chama Dev Launch, dá a você acesso direto individual a mim, onde eu ajudo você a subir de nível como engenheiro de software, seja o que você precisa aprender a seguir, como conseguir um emprego. Tivemos pessoas que ingressaram no programa que querem aprender como se tornar um empreendedor ou um freelancer, como precificar projetos corretamente, realmente qualquer coisa que você precisa na indústria de desenvolvimento de software, posso ajudá-lo. Se você for uma boa pessoa, então, se estiver interessado, clique no link abaixo ou acesse training.techwithtim.dom.net. Você pode se inscrever lá, ver do que se trata e, se você for uma boa pessoa, alguém da minha equipe entrará em contato com você com as próximas etapas. De qualquer forma, vamos continuar e passar para o resto do tutorial.
Então, eu apenas coloquei um prompt aqui, e estou simplesmente pedindo para ele criar um aplicativo React para mim, gerar um jogo de perguntas divertido e salvar as pontuações em algum tipo de arquivo. Observe que o que eu fiz aqui é que eu disse a ele a estrutura e as linguagens exatas que eu queria que ele usasse. Neste caso, React, é implícito que você vai usar JavaScript, mas o ponto é que você não quer simplesmente pedir a ele para criar algum tipo de aplicativo, porque então ele simplesmente escolherá aleatoriamente as linguagens ou tecnologias. Então você quer, no mínimo, decidir que tipo de estruturas e pilha de texto você quer usar aqui: o banco de dados, o back-end, o front-end, o que você quer usar para uma estrutura de front-end, se você quer usar uma biblioteca de estilo CSS, sua biblioteca de componentes. Se você sabe algo sobre codificação, você quer pelo menos tomar essas decisões primeiro antes de começar a ir para a IA. Então, no meu caso, estou usando React, e se você não sabe o que usar, você pode mudar isso para o modo "conversar" e pode pedir a ele para sugerir uma pilha de texto com base no que você quer construir. Mas de qualquer forma, dê a ele a pilha de texto, caso contrário, você ficará um pouco surpreso com o que ele lhe der. Então, vou pressionar Enter, e você verá que isso começa a funcionar aqui, e o que ele vai começar a fazer é gerar vários arquivos diferentes.
Isso é muito interessante, e a primeira coisa que apareceu foi o que eu esperava que acontecesse aqui. Observe que o Wind Surf realmente tem a capacidade de executar comandos de terminal para você. Agora, porque eu pedi a ele para criar um projeto Vite + React, ele sabe que este é o comando que ele deve usar, e ele pergunta se eu quero permitir que ele execute o comando. Então, vou pressionar "aceitar", e isso realmente o executará no terminal para mim. Qualquer que seja a saída desse comando, ele pode analisá-lo, o que é algo um pouco diferente de um editor como o Cursor. Então, vou pressionar "aceitar", e se você está curioso sobre onde essa saída está sendo executada, se você abrir a guia inferior aqui, onde diz "terminal", você pode realmente mudar para os diferentes terminais que estão sendo executados. Então você pode ver que eu tenho este terminal Cascade, e se eu olhar neste terminal Cascade, que é o padrão aqui, ele mostra o comando que o Cascade acabou de executar e, em seguida, qual foi a saída desse comando. Então, apenas algo para notar, se você estiver procurando onde isso está sendo executado, ele estará sendo executado neste terminal chamado Cascade, que você pode abrir na parte inferior da página.
Ok, então agora ele está dizendo: "Ok, nós queremos fazer isso, nós queremos CD e nós queremos npm e instalar". Ele está dizendo que isso não funciona porque estamos no PowerShell, então vamos executar este comando, e agora ele vai instalar os pacotes diferentes. Esses comandos terminaram agora, e você verá que o Cascade está passando por aqui e está criando alguns arquivos diferentes. Às vezes, isso pode levar alguns minutos, dependendo de quantas edições ele está fazendo, mas quero apontar para esta mensagem de saída que acabamos de receber aqui. Diz: "Cascade não criará arquivos que já existam". Isso é bom, significa que não vai substituir nenhum código que você já tenha, em vez disso, ele editará esses arquivos, mas você deve ter cuidado, porque o Cascade não editará nenhum arquivo que tenha alterações não salvas. Então, se você fizer uma alteração manualmente, certifique-se de salvar esse arquivo para que na próxima vez que você pedir ao Cascade para fazer algo, ele tenha a capacidade de entrar e editar isso. De qualquer forma, ele agora criou alguns desses arquivos diferentes, app.jsx, app.css, e ele está perguntando se eu quero executar o comando de back-end para realmente executar este projeto. Então, vou pressionar "aceitar" e vamos ver o que acontece aqui. Você pode ver que isso está sendo executado, e novamente, se você está procurando onde esse processo está sendo executado, você verá que ele está sendo executado no terminal aqui, neste terminal Cascade. Muitas vezes, você terá outro terminal, então certifique-se de clicar no Cascade para ver este processo e afetar o que está acontecendo aqui. Você também notou que aqui em cima ele dirá os processos em segundo plano que estão sendo executados e dará os comandos que estão sendo executados atualmente. Isso porque ele pode executar vários comandos ao mesmo tempo, e às vezes você quer rastreá-los aqui ou potencialmente interromper o processo, o que você pode fazer com este botão "x".
Ok, ótimo. Então, agora ele fez tudo isso, e o que ele vai fazer quando terminar toda essa etapa de execução é me dar uma lista de arquivos que ele modificou. Então, o que posso fazer é clicar nesses arquivos aqui, e posso ver todas as alterações que ele fez, como algo como um pull request do GitHub, certo? Ele me dá todas as diferenças, e na parte inferior aqui, posso percorrer as alterações se eu quiser fazer isso nos vários arquivos, mas para mim, pessoalmente, eu geralmente apenas clico nos arquivos aqui e vejo o que foi feito. Então, você pode percorrer, obviamente, você pode ser muito específico com as alterações, você pode rejeitar ou aceitar arquivos individuais, ou se você quiser ser ousado, você pode simplesmente pressionar "aceitar tudo". No nosso caso, vamos apenas pressionar "aceitar tudo", e agora tudo isso vai ser adicionado à base de código, e podemos verificar e ver o que o Cascade fez. No meu caso, eu sei como abrir isso, então o que eu vou fazer é ir aqui, e deixe-me encontrar isso, e vamos abrir isso, e você pode ver que ele está me dando este aplicativo Trivia Challenge. Vamos pressionar "iniciar jogo", e então ele está me fazendo essas perguntas. Ok, e então podemos ver "fim de jogo", você marcou 1 de 5, "jogar novamente", e ele armazena a pontuação mais alta. Já isso é bastante decente, considerando que foi um único prompt, mas obviamente um projeto relativamente simples.
Ok, então eu quero falar sobre algumas coisas que muitas pessoas se confundem aqui neste editor. Primeiro de tudo, vou simplesmente pedir a ele para fazer uma mudança muito pequena. Vou dizer: "Você pode fazer isso parecer melhor?" Ok, muito vago, não sugeria perguntar isso, mas estou apenas dando um exemplo rápido para vocês aqui. Agora, o que vai acontecer é que o Cascade vai começar a editar esses arquivos, e muitas pessoas não percebem que o que está sendo editado pelo Cascade está realmente dentro do arquivo enquanto o Cascade está escrevendo. O que quero dizer com isso é que, embora você não tenha pressionado "aceitar todas as alterações", é isso que está atualmente dentro do arquivo, o que significa que, se você simplesmente fechasse o Cascade, esse conteúdo ainda estará lá, e também significa que você pode testar o que o Cascade fez antes de pressionar o botão "aceitar". Então, a maneira como você deve pensar nisso é que quando o Cascade faz uma edição, isso já está na base de código. Se você quiser remover isso da base de código, você precisaria pressionar "rejeitar todas as alterações", e então isso irá desfazer o que o Cascade fez. Espero que faça sentido, mas muitas pessoas se confundem sobre quando ele realmente está escrito no código, porque ele funciona um pouco diferente em alguns outros editores de código de IA. Então, neste caso, ele editou app.css, certo? E agora todas as alterações que você vê aqui, elas estão realmente neste arquivo, como se estivesse salvo neste arquivo, e se eu for agora para meu front-end e olhar para ele, você vê que ele realmente foi alterado, mesmo que eu não tenha pressionado "aceitar todas as alterações" ainda. Então, se eu quiser voltar, eu vou rejeitar todas as alterações. Se eu só quiser manter o que está aqui atualmente, então eu vou aceitar todas as alterações. Então, certifique-se de ter isso em mente, porque desfazer alterações do Cascade pode ser um pouco difícil, especialmente à medida que você passa por várias edições. Então, vou aceitar tudo aqui, porque tenho certeza de que está tudo bem, e você pode ver agora que, obviamente, isso parece um pouco melhor.
Tudo bem, então essa é a funcionalidade principal coberta. Agora, vamos passar rapidamente por muitos outros recursos que você vai querer conhecer. Primeiro, esta é sua janela de bate-papo, certo? Se você quiser abri-la e fechá-la, você pode usar Ctrl+L ou Cmd+L, dependendo do sistema operacional que você está usando. Você também pode pressionar este botão aqui em cima, a coisa que parece o logotipo do Cascade, e então isso abrirá ou fechará a janela de bate-papo para você. Agora, na janela de bate-papo, se você quiser iniciar uma nova sessão, como uma nova cadeia de conversas, você pode pressionar este botão de mais, e então você pode criar uma nova. Se você vai pedir algo completamente diferente que não esteja relacionado ao que você estava fazendo anteriormente, eu recomendo que você abra uma nova sessão, porque o Cascade usará todo o contexto anterior, e às vezes ele pode ficar confuso se você estava trabalhando em algo completamente diferente e então começa a perguntar outra coisa. Agora, claro, nesta janela de bate-papo, você tem a capacidade de adicionar contexto. O que você pode fazer é usar esta menção. Você pode usar o símbolo "@" e pode marcar arquivos, diretórios, documentação, links de sites, qualquer coisa que você queira referenciar ao dar o prompt. No entanto, a coisa boa com o Cascade aqui, ou com o Wind Surf em geral, é que ele é muito bom em pegar o contexto automaticamente sem você ter que marcá-lo. Por exemplo, se eu for para o modo "conversar" e eu disser: "Você pode explicar meu projeto?", você notará que a primeira etapa aqui é que ele vai começar a escanear os diferentes arquivos. Veja, ele diz: "Primeiro, vou verificar o conteúdo do seu diretório de projeto", e você pode ver exatamente o que ele está procurando para encontrar o que está acontecendo no código. Geralmente, eu acho que, a menos que você esteja em um projeto maior, você não precisa adicionar o contexto manualmente. Ele será capaz de pegá-lo, desde que seu prompt seja específico o suficiente. Mas, obviamente, se você quiser marcar uma parte específica do código, você pode dizer "@" e, em seguida, você pode escolher um arquivo ou diretório e pode dizer a ele: "Ei, edite este arquivo" ou "faça uma pergunta sobre este arquivo" ou qualquer coisa que você queira fazer.
Bem como apenas marcar arquivos individuais, você também pode referenciar certas seções de código. Por exemplo, digamos que eu quero falar sobre todo o meu estado aqui, certo? O que eu vou fazer é destacar isso e pressionar Ctrl+L. Agora, quando você pressiona Ctrl+L em uma seção de código destacada, ele adicionará essa seção específica de código como contexto na janela de bate-papo. Então você pode ver aqui embaixo, agora está destacado app.jsx e aquelas linhas que eu mencionei. Agora eu posso referenciar essas linhas e posso dizer: "Explique o que essas fazem", certo? E agora ele sabe que deve olhar para aquela área específica. A mesma coisa se você quiser fazer uma modificação direcionada, você pode fazer isso também com essas linhas de código, e você pode realmente adicionar várias seções marcadas, e isso é algo que eu faço com bastante frequência. Eu destaco uma linha, dou para o Tas Gade, digo: "Ei, talvez haja um erro aqui ou um problema", e então ele pode corrigir isso.
Ok, então vamos voltar para o modo "escrever" para Task, sinto que disse Cascade algumas vezes, que é outra ferramenta que eu uso, de qualquer forma, vocês sabem o que eu quero dizer, Cascade, e vamos falar sobre mais algumas coisas que você pode fazer. Essa é a janela de bate-papo, obviamente, você pode mudar o modelo aqui também, dependendo do plano que você tem, GPT-4, Claude 3.5. Eu geralmente uso apenas o Claude 3.5, e agora temos a capacidade de editar diretamente na linha. Digamos que você queira se livrar dessa janela de bate-papo. Eu apenas removi isso com Ctrl+L. O que eu posso fazer é destacar estes, por exemplo, e posso pressionar Ctrl+I. Agora, se você pressionar Ctrl+I ou Cmd+I no seu teclado, você pode ver que ele lhe dará os diferentes modelos. Primeiro, vou mudar isso para Claude 3.5, e então você pode dar uma instrução muito rápida para modificar apenas uma seção de código muito direcionada. Então, se você quiser fazer algo pequeno, você só quer refatorar algo, mudar as convenções de nomenclatura, faça isso. Use a edição em linha aqui com Ctrl+I. Poderíamos pedir algo como: "Você pode fazer isso em Pascal Case, não em Camel Case?" Ok, apenas uma coisa simples. Novamente, eu não sei por que faríamos isso, estou apenas dando alguns exemplos aleatórios, e você pode ver agora que ele faz as mudanças, podemos ver a diferença e, em seguida, podemos adicionar uma continuação aqui. Então eu posso pedir a ele novamente para fazer outra coisa, ou eu posso simplesmente aceitar todas essas mudanças ou rejeitá-las, como você acabou de ver. Se eu quiser voltar, posso usar Ctrl+Z, e você vê que ele realmente me mostra a diferença quando eu volto. Então, o que vou fazer agora é simplesmente ir para minha janela de bate-papo e vou pedir a ele para fazer algo como: "Você pode adicionar um temporizador ao meu quiz de perguntas?" Ok, um recurso que provavelmente queremos adicionar, e depois disso quero mostrar algo muito interessante que o Wind Surf pode fazer que muitos editores não podem.
Tudo bem, então ele foi em frente aqui e adicionou este temporizador, e vemos que ele adicionou um pouco de CSS e adicionou alguma lógica aqui em app.jsx. Então, vou pressionar "aceitar tudo", e o que vou fazer a seguir é um pouco interessante. Vou simplesmente digitar "continuar". Agora, quando eu faço isso, o que o Wind Surf vai fazer é continuar na mesma cadeia de execução com base no que eu estava fazendo anteriormente. Ele essencialmente vai adivinhar o que eu...
Quero fazer o próximo passo baseado em todo o histórico de conversas que tenho e então simplesmente prosseguir e fazer isso. Nesse caso, diz que vai adicionar um indicador visual quando o tempo estiver acabando e garantir que esteja corretamente integrado à lógica de jogo existente. Obviamente, nós apenas pedimos uma coisa, ele não tem muito contexto, mas é algo razoável para fazer a seguir.
Então, o que você pode fazer é: quando estiver trabalhando em um recurso, seja codificando você mesmo ou pedindo na janela de bate-papo, você pode simplesmente parar e digitar "continue". Com base no que você tem feito, ele fará uma suposição lógica sobre o que fazer a seguir e continuará por esse caminho. Obviamente, se você não gostar do que ele faz, pode simplesmente rejeitar, mas no meu caso, parece um recurso bom, então vou pressionar "aceitar". Vamos voltar para nossa interface do usuário e vamos tentar isso. Vamos lá, Tim. Ok, e não vejo nenhum temporizador aparecendo, então presumo que ele cometeu um erro, mas já parece muito melhor do que o que tínhamos antes. O que estamos fazendo aqui? Estou apenas chutando aleatoriamente, e pronto. Ok, então o temporizador não parece estar aparecendo, mas novamente, a IA nem sempre acerta tudo, e também meu front-end não está funcionando, então provavelmente devo executar isso novamente, e isso pode resolver para mim. Tudo bem, então, seja lá o que for, alguns erros aconteceram, isso é IA.
Também mencionarei aqui que você pode ver que, quando selecionou algo, ele mostrará aqui em cima e você tem a capacidade de explicar, refatorar ou adicionar uma string de documentação. Apenas alguns botões interessantes para lidar com algo que você pode querer fazer repetidamente, para ser honesto, não uso esses com muita frequência, mas eles existem. Agora, existem alguns outros recursos com o Windsurf aqui, mas geralmente esses são os principais que você usará 99% do tempo. Você pode fazer coisas como adicionar imagens, pode referenciar vários arquivos, pode percorrer, pode mexer nos recursos você mesmo e ver como eles funcionam, mas geralmente descobri que isso funciona muito melhor que o cursor, especialmente quando você tem muitos arquivos diferentes.
Com isso em mente, apenas para finalizar rapidamente o vídeo, vou compartilhar algumas dicas a serem lembradas ao usar isso para obter os melhores resultados possíveis. Primeira dica: apenas diga a ele qual arquivo você deseja editar. Então, se você só deseja editar um ou dois arquivos, diga exatamente quais, marcando o arquivo, porque muitas vezes ele comete erros e cria um novo arquivo ou edita um arquivo que você não queria que ele alterasse. Dica número dois: quanto mais trabalho você faz sozinho e mais contexto você fornece, melhor ele funciona. Quanto mais tempo você trabalha em uma cadeia de conversas, quanto mais código você realmente escreve fisicamente no editor de código, melhor isso funciona. Se você usar puramente a IA para gerar tudo, pode começar a se perder um pouco e fazer coisas realmente malucas.
Próxima coisa: certifique-se de entender o que ele está fazendo. Leia o código, veja o que foi editado. Se a edição for muito grande, peça para torná-la menor e revise isso como você revisaria o código de qualquer outra pessoa. Obviamente, se você é um programador iniciante, isso é um pouco mais difícil, mas o ponto é que você quer ter algum conhecimento do que está acontecendo, porque quando ele eventualmente cometer um erro, pode ser muito difícil desfazer essa bagunça se você não tiver acompanhado todas as mudanças que foram feitas até aquele ponto. Último ponto a acrescentar: tente ter boas estruturas de diretórios, bons nomes de variáveis, bons nomes de arquivos. Quanto melhor você nomear as coisas, mais fácil é rastrear o contexto automaticamente. Então, tente não ter arquivos nomeados como a, b, c, main 1, 2, 3. Tente nomeá-los com coisas razoáveis e lógicas que a IA possa então inferir o que há dentro deles.
Tudo bem, então aí está, pessoal, este é meu tutorial sobre o Windsurf. Espero que isso tenha ensinado você a usá-lo, passou por alguns dos principais recursos e que você esteja animado para experimentá-lo. Novamente, realmente depende se você está disposto a pagar o preço ou não por mês. Na minha opinião, vale a pena, mas se você só quiser usar um modelo gratuito, eu recomendaria usar o Cursor, porque este é muito limitado, a menos que você esteja pagando. De qualquer forma, se vocês gostaram, certifique-se de deixar um like, inscreva-se no canal e nos vemos no próximo vídeo. [Música]