ABANDONEI O CURSOR! Meu novo jeito de programar com IA (CLAUDE CODE)

Eu parei literalmente de usar o Curso Como Meu Agente de Código e agora eu tô usando somente o Cloud Code. E nesse vídeo eu vou te mostrar em detalhes por que que eu migrei pro Cloud Code e como que eu tô usando ele na prática. E se você gosta desse tipo de conteúdo, já deixa o seu like aqui, se inscreve no canal que eu vou te mostrar com detalhes, eu vou te convencer a usar o Cloud Code, beleza? Primeiro de tudo, o que que é o Cloud Code? Aqui no, no site deles, né? Ele é um agente de código no terminal. Então, pra você instalar, cê só vai precisar de ter o Node.js instalado e E você vai rodar esse comando: npm install Anthropic AI Cloud Code. Ele é da Anthropic, ele tem um plano gratuito e ele tem um plano pago também. O plano pago dele tem $17, tem esse max aqui de $100 e tem esse max de $200. Você olha e parece realmente caro, mas vale cada centavo. Então, cara, você tendo ele instalado no seu código aqui, eu vou abrir o meu terminal. Aqui eu tô com um projeto do ZardUI que eu vou mostrar pra vocês como que a gente tá usando o Cloud Code pra criar componentes no ZardUI. E pra você que não sabe o que é o ZardUI, a gente tá trazendo o ShadCN pro Angular através do ZardUI. Então a gente tá criando alguns componentes, eu vou mostrar pra vocês aqui na prática, mas eu tô com o terminal aqui do ZardUI aberto e a única coisa que eu preciso fazer é digitar cloud e aí ele vai iniciar o cloud aqui. Provavelmente ele vai pedir pra você logar na primeira vez, tá bom? Então você vai criar sua conta no cloud, vai fazer tudo lá certinho, vai criar sua conta vai entrar aqui e aí ele já te dá algumas coisas aqui para você fazer. Então aqui você já tem um terminal, a mesma coisa que você fazia, que a gente fazia, né, no curso, aqui a gente faz aqui no próprio terminal. Então normalmente ele tem vários comandos, então comando de commit, esse que foi o que criei, é de agente, consegue criar agentes customizados, consegue limpar a conversa, vou dar um clear na conversa aqui, já não tem nenhum conteúdo, você consegue dar um doctor ele tem um comando de init que é bem legal, que ele cria um arquivo cloud.md. Então aqui no projeto a gente já tem aqui nos args esse cloud.md. Eu só dei esse /init, então ele leu todo o repositório, viu todos os comandos e criou um arquivo para ele mesmo ler e entender como é que funciona. Então ele já demonstrou aqui, né, como que funciona a pasta. Cada componente tem o componente, tem as variantes, tem a pasta de demo para a gente criar as demos, tem a pasta de doc. Estilos da documentação, ele criou como que a gente usa os componentes, né, o template, estilo de texto, que que a gente tá usando. Cara, ele fez tudo isso aqui sozinho, eu só dei um /init para ele. Então, voltando aqui, você consegue também referenciar arquivos colocando um nele aqui, ó, @cloud.md, o que esse arquivo fala. E aí ele vai trabalhar aqui e fazer o que ele precisa fazer e te dá uma resposta. É um agente, cara. Aqui ele vai conseguir ler os arquivos, ele vai conseguir modificar arquivos, ele vai conseguir fazer commits, ele vai conseguir, cara, mexer no seu projeto inteiro. Aliás, eu criei um projeto do zero em um final de semana com ele que eu tô para lançar. Eu tô para lançar esse com o Micro SaaS, eu não posso falar nada, eu tô finalizando algumas, alguns detalhes, alguns ajustes deles. É um projeto completamente React, eu não tenho noção nenhuma de código, então eu fiz ele completamente do zero, não mexi nenhuma linha de código, foi só pedindo as coisas para ele. E daqui uns dias vai sair aqui no canal um vídeo sobre isso, beleza? Mas deixa eu mostrar para vocês o poder desse carinha aqui, cara. O que que eu vou fazer? Deixa eu apagar isso aqui. Eu vou tentar criar um componente do zero aqui com vocês para vocês verem como que isso aqui funciona. Então eu vou vir aqui, ó, nos RDI para quem não sabe, né, para você que ainda não sabe, a gente tá trazendo o ChatGPT para o Angular. A gente já tem vários componentes, por exemplo, esse command aqui, ó, o componente de command, foi ele que criou do zero esse componente de command. Então a gente tem aqui, ó, a gente consegue pesquisar várias coisas, a gente consegue criar nos arquivos. O Cloud Code criou o componente de command do zero, ele criou também o select, ele fez esse select aqui, ó, igualzinho do ChatGPT, cara. Ele fez isso aqui muito rápido. Ele também criou esse popover aqui, tudo com Cloud Code, só mandando contexto para ele, pedindo para ele fazer as coisas, e ele foi criando todos esses componentes. Aqui no código, para você ver, o command, por exemplo, olha o tanto de componente que o Cloud Code criou. Ele não criou somente o componente com código fake, cara, ele tá criando com código, ele entende o seu projeto, ele tá criando com código legal, cara, um código muito, muito bom. Então ele cria não só o componente, mas ele cria o teste unitário também. Olha os testes unitários que ele tá criando, cara. Isso aqui é bizarro, bizarro, bizarro, bizarro. A gente tá impressionado, ó. Componente de option, eu pedi ele também, né. A gente, quando eu tava fazendo o prompt para ele, eu pedi para ele criar uma forma de a gente usar esse componente de command com JSON. Então não só usar ele dessa forma, né, com várias coisas aqui, eu consegui passar um JSON para ele. Então ele criou esse componente dessa forma, passando um JSON. Então, um command config, a gente passa um JSON para ele e ele gera esse componente inteiro aqui. Só que o que que eu quero fazer? Eu quero tentar mostrar para vocês na prática como que a gente tá criando, como que a gente tá fazendo coisa aqui, como que eu tô usando esse Cloud Code. Então, aqui, ó, nos arduino, no projeto do GitHub, se você puder já entra aqui, dá uma estrelinha aqui para gente. Então, aqui a gente tem algumas issues de alguns componentes e olha o que que eu tô fazendo, eu tô literalmente vindo aqui no GitHub copiando a descrição desse componente e aí o que que eu faço, eu venho aqui em issues, eu crio, qual que é o componente? ToggleGroup. Então eu venho aqui, crio um novo arquivo, togglegroup.md e aqui eu vou colar. Colei, salvei, e aí eu vou virar para o Cloud Code e falar: @isho, @tugogroup, crie esse componente. Só isso que eu vou fazer. E aí aqui ele vai começar a entender o que que é, ele vai ler esse arquivo e olha o que que ele faz: ele cria uma lista de todo para ele. Então ele vai analisar o componente existente para entender os padrões, ele vai criar o componente do grupo principal criar as variantes, exportar o componente no components, criar o componente de demo, criar a documentação, overview e API, e criar os testes unitários. A única coisa que eu falei para esse cara fazer, não sei se eu posso chamar de cara, é cria esse componente. E eu passei o meu arquivo aqui da nossa issue, né, que a gente tem o exemplo que ele tem para fazer. Foi só isso que eu passei. Então aqui, ó, analisar componentes existentes Eu vou dar um Shift+Tab aqui, aqui ele tá perguntando se ele pode fazer essa alteração, eu vou falar yes e não pergunte novamente, porque aqui ele já tá com o Auto Accept Edits, se eu der um Shift+Tab, ele tem um Plane Mode, ele tem o normal e ele tem o Auto Accept Edits. Isso aqui é porque ele vai começar a criar as coisas, então aqui ele já criou o Toggle Group Variants, então se eu vier aqui no código, no meu libs/zard lib/components, eu venho aqui, ó, ToggleGroup. Ele já criou as variantes. Eu posso só vir aqui, dar um save para ele formatar direitinho. Que ele tá pedindo para fazer algumas outras coisas, eu vou continuar aceitando aqui. Mas aqui, ó, o meu componente de ToggleGroup já tá praticamente criado. Olha aqui que loucura, cara! Olha o tanto de coisa que ele já fez. E aqui, ó, que ele tá fazendo, ó, que ele já tá criando as demonstrações dos componentes de demonstração, porque a gente tem uma pasta demo, já tá criando o basic, o default, o sizes, acabou de criar outro, e aqui ele vai criando meu componente, ó lá, criou os componentes demo, agora ele vai criar documentação overview e o api.md, depois ele vai criar os testes unitários, e aí eu só vou pedir para ele, adiciona na nossa documentação e na sidebar, E aí a gente vai ver o que que vai acontecer aqui. E ele tá criando um código realmente bom, cara. É difícil entender isso. Por exemplo, eu tava criando um componente e aí ele fez um código já usando os signals, os signals que é de versões novas do Angular. E ele usou um effect e um signal dentro do effect setando alguma outra coisa. E isso na documentação do Angular fala que não é legal de você fazer com effect. E aí o que que eu falei para ele? Eu parei ele. Então aqui você consegue dar um ask aqui, você aperta ask, você para e pede ele outra coisa. Então eu dei um ask enquanto ele tava criando, peguei o link da documentação de Angular do Signals, colei e falei: leia essa documentação e veja se você tá fazendo alguma coisa errada. Ele fez um comando para ler a documentação do Angular, entendeu pela documentação que ele tava fazendo aquilo que não pode fazer com Effect. Isso foi bizarro, cara. Ele foi, corrigiu no código e seguiu a vida, mas é loucura. Então aqui, ó, e ele tá aqui, cria aqui as coisas, ó, ele pega os erros. Então ele deu um npx testes-art aqui, ó, para rodar os testes unitários. Aqui, ó, ele terminou de criar os testes unitários. Agora ele quer rodar o lint. A gente não tem um lint no projeto, então eu vou falar só para ele não. Ele vai parar aqui, eu vou ver aqui o que que tá acontecendo. Ele tá com erro, eu vou só fazer isso aqui, ó, Copia, cola e manda para ele. Ele vai entender o que que tá acontecendo. Preciso corrigir o erro de visibilidade da propriedade disabled, vou torná-la protected. Olha que loucura, cara, isso aqui é bizarro, bizarro, bizarro, bizarro. Olha lá, ele já atualizou a lista de tarefas dele, o projeto agora tá funcionando. Eu vou só vir aqui, dá um espaço e salvar. Para ele formatar, dá um espaço e salvar. Formatou direitinho, tá tudo certo. É que ele tá dando algumas coisas de S-Lint, mas aqui agora ele já falou, ó, componente do Google criado com sucesso. Agora adicione na documentação e na sidebar. E aí, o que que ele fez? Mais um todo, encontrar onde adicionar o componente na sidebar da documentação, adicionar o Google Groupo à sidebar de navegação e registrar o componente no sistema de documentação. Olha o que ele está fazendo, ele está procurando por padrões onde que está a sidebar. Aí ele vai, ó, primeiro vou ver como os outros componentes estruturam seus demos e depois criar o to-go group. E olha o que ele fez, criou como a gente estrutura os componentes. Então aqui, ó, no demo a gente tem um to-go group que tem uns exemplos. Agora ele está verificando se tem algum arquivo de configuração de sidebar. Para garantir que o componente apareça na navegação. Ele descobriu e agora ele criou lá o Tugo Group, criou até debaixo do Tugo. Perfeito, agora vou testar se tá tudo funcionando. Aqui ele tá querendo rodar um npm start, eu vou dar um não aqui e falar: o servidor já está rodando. E pronto, perfeito, Tugo Group foi criado e adicionado. Agora vamos testar para ver se tá funcionando mesmo, realmente ele adicionou. Então eu venho aqui no meu projeto Eu vou dar um F5, provavelmente já foi. Aqui, ó, já tem o Toggle Group aqui. Quando eu clico, ó, tá mais ou menos aqui, ó, tá mais ou menos. Não tá igual o toggle que a gente tem aqui, ó. Então o que que eu vou fazer? Eu vou falar com ele que não tá no padrão. Então não tá igual o toggle que já temos. Tá diferente. Eu tô conversando com ele e eu só tô falando, cara, não tá igual. Você tem razão, vou verificar como tá o componente Toggle atual para fazer o Toggle Group seguir o mesmo padrão visual. Beleza, ele leu o Toggle Variants. Agora eu vou corrigir. Já fez uma porrada de alteração aqui. Agora eu vou atualizar o componente para usar as novas variantes. Agora eu vou pedir, consegue atualizar os exemplos para ficar parecido com E ele vai pegar os exemplos, ele vai ver como que é os exemplos do Toggle que a gente tem. E agora vai atualizar o do Toggle Group. Por quê? Porque eu quero que ele fique parecido. A gente usa um B aqui, esse negocinho aqui, ó. E eu quero que ele faça a mesma coisa com Toggle Group. Show! Ele fez uma porrada de alteração. Agora eu vou vir aqui, olha lá, o nosso Toggle Group e Olha que loucura, guys! Olha que loucura isso aqui, velho! O To Go Group tá feito. Se eu venho aqui, ó lá, usei To Go Group e a gente tem o nosso To Go Group. Agora olha uma outra coisa que ele consegue fazer. A gente adicionou aqui alguns MCPs, servers. Então eu adicionei um MCP do Playwright, que é o concorrente do Cypress para fazer teste end-to-end, e um do ESLint. Mas olha o que que eu consigo pedir para ele fazer: use o Playwright para testar e corrigir bugs se você encontrar. Agora olha isso, meus amigos, olha o que que ele vai fazer. Ele vai usar o Playwright para ele abrir uma sessão, ele vai literalmente abrir o navegador e começar a navegar. Olha aqui, ó, ele acabou de abrir o navegador e ele vai começar a navegar. Agora ele quer tirar um snapshot, ele quer tirar um print no sistema. E aqui ele tá querendo clicar, então eu só tô dando um OK aqui para ele, para ele clicar. Olha lá, ele tá testando para mim, cara. Ele já criou no botão aqui, clicou no primeiro botão para ver se tá funcionando. Aqui eu não tô mexendo em nada, não tô mexendo em nada. Beleza, deixa eu voltar aqui no terminal para ver se ele tá mexendo. Botão bold no demo basic, já desceu um pouquinho também, provavelmente já tá testando sizes. Olha lá, botão no demo large size, e aí que ele vem, testa, tira print, vê se tem alguma coisa funcionando ou não funcionando. E olha lá, ele quer usar um mouse hover. Olha isso, velho, eu só tô dando aqui, ó, hover mouse no elemento, ele tá mexendo na tela, que ele tá literalmente usando o Playwright fazendo um teste end-to-end como se fosse um usuário. Close browser, acabou. Notei que o efeito hover não deve estar gerando logs visíveis no console, o que é normal. Agora eu vou fechar o navegador e fazer um resumo dos testes. Isso aqui é loucura! Agora ele tá compactando a conversa, que eu já conversei bastante com ele. Mas olha a loucura que a gente acabou de ver aqui, velho! Olha isso, mano, ele acabou de criar um componente para gente. Eu posso vir aqui no Tugo Group, eu posso vir aqui, a gente tem nossa API. Olha lá, ele criou várias coisas que eu posso apagar. A gente normalmente deixa só a tabelinha aqui mesmo. Isso aqui eu também posso apagar. No momento a gente deixa só isso aqui. No overview também a gente não deixa muita coisa, a gente deixa só o nome aqui para ficar mais simples. Mas ele já criou tudo aqui para mim, ó. E a gente acabou de criar um componente completamente novo para usar com código, já tá funcionando. Ele já entendeu o que aconteceu, ele fez um teste end-to-end para verificar como que tava funcionando, como é que tava acontecendo as coisas. Ele me dá um resultado aqui, ó, o componente na implementação já tá tudo funcionando, as principais funcionalidades, a documentação como que tá. E agora a gente tem um ToggleGroup completamente funcional aqui no nosso sistema, cara. E é dessa forma que eu tô usando o Cloud Code, meus amigos. Ele já tá mudando a forma que eu tô desenvolvendo as coisas. Componentes, dúvidas que eu tenho, eu pergunto para ele também, eu posso perguntar. Mas cara, ele realmente tá impressionando a forma da gente criar as coisas aqui também. Então cara, isso aqui é código Angular. A gente sabe que normalmente as IAs, as outras IAs, elas não estavam entendendo muito bem, não tem tanta coisa assim de Angular, né, parece, não sei, mas não criava código legal. Mas cara, tá criando código legal de React, o negócio tá muito mais avançado muito, o código tá muito melhor, ele consegue entender muito mais coisa, muito mais contexto. A integração dele com ChatGPT, cara, tá bem, bem, bem legal. E eu tô usando isso aqui agora todo dia, o tempo inteiro, e tá mudando a forma que eu desenvolvo as coisas, cara. Então faça também, use, teste, entenda como que tá funcionando isso aqui. E se você não tá usando, cara, começa a usar, faz os seus testes, Vale a pena, cara, pagar o plano dele maior para você ter mais acesso às coisas, porque realmente tá adiantando bastante a vida da gente, tá bom? Então é isso que eu tenho para trazer para vocês. É por isso que eu parei de usar o CursoGo. Agora eu tô voltando, eu voltei para o meu VS Code lindo que eu gosto. Já tá tudo configurado, já tem tudo certinho. Eu só uso meu VS Code, abro um terminal. Eu posso abrir o terminal direto do VS Code também. Então, por exemplo, eu tô aqui no VS Code, assim, instala a extensão do Cloud Code. Cê clica aqui, ó, ele já abre o Cloud Code aqui. Outra coisa pra vocês ficarem ligados é que eu consigo fazer um print aqui, ó, vou fazer um print aqui no terminal, eu não consigo colar essa imagem que eu tô dando Ctrl+V, não vai, mas aqui pelo VS Code eu consigo colar a imagem, eu consigo falar, vê se tá legal e ele vai literalmente ver se tá legal. Então a gente consegue mandar imagem aqui também pra ele falar eu fiz com ele. E cara, é literalmente um agente, um desenvolvedor que consegue modificar o código e fazer bastante coisa pra gente. Fechou? Se você gostou desse vídeo, deixa o seu like, se inscreve no canal, e eu te vejo no próximo vídeo. Valeu!