Crie software mais rápido com IA: programação prática de IA usando IDEs modernas

1. Introdução 2: Todos, e bem-vindos a este curso. Vamos abordar como os desenvolvedores devem realmente usar a IA para acelerar seu fluxo de trabalho e continuar criando código de alta qualidade. Então, com este curso, o que realmente abordaremos é o básico da IA e algumas dicas e truques que um desenvolvedor pode usar para utilizá-la de maneira rápida e eficiente. Muitas vezes, quando você usa IA, ela cria um código ruim ou correto. E isso pode criar um problema, porque se estamos pedindo que ele faça algo e ele está fazendo isso de uma forma que nos obriga a verificar cada etapa, bem, isso não está realmente nos economizando tempo no final do dia. O que queremos fazer com este curso é mostrar como você pode usar a IA, como solicitá-la, como configurá-la, criar um fluxo de trabalho que agilize a maneira como você se desenvolve, em vez de ser apenas mais um obstáculo que você precisa superar Não podemos ignorar o fato de que a IA, especialmente em programação, é extremamente importante porque pode nos ajudar a resolver bugs que costumavam levar semanas em apenas uma hora ou menos. Ele pode nos ajudar a criar recursos completos do zero em apenas alguns minutos que também pode ter levado semanas. Isso pode nos ajudar a refatorar códigos antigos e pode nos ajudar a realizar muitas tarefas domésticas com muito Por causa disso, as pessoas que sabem como utilizar a IA serão as próximas empresas com melhor desempenho no campo do desenvolvimento de software Então, se você quer ser um desenvolvedor de ponta , precisa conhecer a IA. Todas as empresas estão lentamente migrando para ele. Alguns são mais lentos do que outros, mas, eventualmente, eu diria que nos próximos dois a três anos, maioria das empresas precisará utilizá-los se quiserem permanecer à frente Por isso, precisamos garantir que nossas habilidades estejam de acordo com o que essas empresas esperam. Portanto, neste curso, abordaremos os conceitos básicos de um IDE de IA, mostrando como podemos utilizá-lo para criar um novo projeto, criar um novo recurso, refatorar código antigo e, em geral, apenas utilizá-lo em nosso fluxo de trabalho diário Então, esses serão os objetivos deste curso e, ao final, você poderá criar seu próprio projeto e estimular a IA de uma forma que agilize seu fluxo de trabalho de desenvolvimento. É uma tecnologia realmente incrível, e há muito o que aprender aqui, mas não é tão ruim até o final. Então, estou animado para começar. Então, vamos começar a aprender como usar a IA para acelerar nosso fluxo de trabalho como desenvolvedor. 2. IDE de IA: Então, precisamos começar e realmente descobrir como usamos a IA em nosso código. Existem algumas maneiras diferentes de utilizar a IA. O que todos nós provavelmente conhecemos neste momento é o primeiro a entrar em cena, e esse é o HagiBT Podemos copiar e colar algum código aqui, fazer uma pergunta, pedir que ele o refatore, e isso fará um ótimo trabalho O problema, porém, é que esse é um fluxo de trabalho muito lento. Você olha seu código, encontra um problema, copia e coloca no ChaChiBT Você precisa dar todo o contexto ele saiba o que você está tentando realizar. Clique em Enter. Parece bom. Você não conseguiu testá-lo. Você precisa copiá-lo e colá-lo novamente no seu ID. E é esse ciclo que pode ser muito lento. Isso acelera algumas coisas, como encontrar bugs e tudo mais, mas não acelera a forma mais eficiente de usar seu tempo. Então é aí que entramos com os IDEs de IA. Essencialmente, eles são apenas IDs com IA implementada neles. Normalmente, você também pode simplesmente encontrar um plug-in e colocá-lo em seu IDE favorito. Então, neste caso, vamos falar sobre Cursor. Esse é o que vamos usar para toda a série aqui. No entanto, você pode utilizar o que quiser. Todos eles funcionam basicamente da mesma maneira. Eles podem ter um conjunto diferente de modelos que você possa usar. Com o Cursor, basicamente, o que vamos fazer é começar do zero e construir algo. Você pode ver se basta acessar o site deles, cursor.com, baixá-lo agora mesmo no Mac ou Windows e realmente começar Há um nível gratuito, então você pode fazer algumas perguntas, pode ser um pouco mais lento, pode ser um pouco mais idiota, mas ele tem um nível gratuito muito bom Se você quiser pagar os $20 por mês, pode ter acesso a alguns modelos melhores, e pode valer a pena para fins de aprendizado, mas você pode continuar gratuitamente Aqui. Eu também queria falar sobre outros dois grandes players do mercado. Claude Claude é algo que você também pode baixar e usar. Na verdade, estamos usando alguns de seus modelos no Cursor. Então, isso é algo que vamos resolver aqui: só porque estamos usando o cursor não significa que estamos presos a qualquer modelo que o cursor crie. Na verdade, eles acabaram de criar um chamado compositor. Mas podemos usar o GPT. Podemos usar Claude. Podemos usar a Microsoft. Podemos usar todos esses outros modelos de IA por meio do cursor. Com Claude, você pode praticamente fazer o mesmo, mas é mais adequado ao conjunto específico de modelos diferentes, mas você pode entrar em contato E o copiloto também é diferente. Você pode ver que é uma espécie de híbrido, onde você pode fazer perguntas aqui ou implementá-lo em sua base de código também. Existem muitos e muitos desses produtos por aqui. Portanto, encontre aquele com o qual você se sente mais confortável. Mas para este curso, vamos nos concentrar no cursor. Então, uma vez que realmente abrimos nosso IDE aqui, nós o instalamos. Podemos seguir em frente e abrir um projeto. Você verá essa visão. Suas cores serão um pouco diferentes porque eu as mudei para caber apenas em algo que eu gosto neste segundo momento. Parece muito com o código do VS porque foi praticamente bifurcado do repositório de código do VS Portanto, ele terá muitas das mesmas habilidades de utilizar os plug-ins se você usar VS Code e também utilizar todos os temas O que queremos fazer é que, quando começarmos aqui no lado direito, veremos o painel de alternância de IA Em qualquer outro documento de identidade, você também terá algo relacionado a isso. Pode estar na parte inferior, pode estar no lado esquerdo, pode estar no meio, mas haverá uma maneira de você se comunicar com sua base de código e com seus diferentes agentes. Com isso, podemos realmente começar a nos comunicar com a IA Aqui, podemos ir em frente e digitar coisas, e isso criará coisas em nosso projeto. Será apenas um complemento. Será algo com o qual poderemos nos comunicar enquanto construímos. Muitos IDs diferentes também terão esses recursos diferentes. Essa taxa de recurso aqui é para alternar entre os modos de sua IA. Então, agora está no Agente. Essa é a mais poderosa porque Agente lhe dá permissão para fazer coisas. Em vez de você apenas fazer uma pergunta e dar uma resposta, ele pode procurar a resposta. Ele pode examinar sua base de código ou até mesmo examinar toda a sua área de trabalho se você der permissão para fazer isso. Então, o Agente é o mais poderoso, e é o que eu uso como padrão. se você não quiser que ele toque no código, No entanto, se você não quiser que ele toque no código, você pode alterná-lo para solicitar alguns problemas. Às vezes, ele toca no código quando você não quer. Então essa é a sua linha de base. Você clica em Perguntar, ele não tocará no seu código. Eu não vou mudar nada. planejamento e a depuração são específicos do cursor, mas outros IDs diferentes estão sendo lançados com eles, e eles são bem simples Se você está tentando planejar um grande recurso estendido, talvez queira usar o prompt de planejamento. Isso vai te ajudar com isso. Se você está tentando depurar um determinado bug aqui, você pode acessar essa depuração e será mais inteligente nesse aspecto E o próximo lado, o que temos aqui são nossos modelos. Então, esses são os modelos que eu configurei atualmente no meu. Existem mais modelos. E se você clicar nesse botão, ele listará todos eles, você poderá adicionar quem quiser. E depois há o modo Max, que permite que a janela de contexto seja maior para projetos realmente grandes. Custa mais se você fizer isso. Então compositor é aquele que Cursor criou. Você pode ver que diz aqui, o primeiro modelo de codificação agente do cursor primeiro modelo de codificação agente do Então, este é o mais barato para cursor porque está utilizando o próprio código do Cursor Então, temos o Opus aqui. Este é o modelo AnthropicTing. É muito, muito bom, um pouco caro, mas muito bom. Sone também é um modelo de pensamento Anthropico muito bom. Temos a série GPT aqui, então GBT 5.1, GBT 5.2 Nós temos Gêmeos. Este é o modelo mais recente do Google no momento. E depois temos alguns outros como este mini. Temos um Grock. E se você clicar em Adicionar aqui, poderá clicar em Exibir todos os modelos, e há todos esses modelos que você pode tentar implementar e utilizar. Para este curso em particular, vou ficar com nossa música antrópica, provavelmente por cinco. Para a maior parte disso, talvez eu use um pouco de compositor, mas os modelos mudarão à medida que avançarmos. Alguns vão melhorar. Você vai, você sabe, meio se sentir confortável com alguns, não se sentir confortável com alguns outros. Portanto, precisamos ter certeza de que os estamos utilizando da melhor maneira possível Outra área para isso também, e essa é totalmente nova, então eu quero ensiná-la. Você vê esses pequenos pensamentos, esses pequenos cérebros ao lado disso, isso é pensar Então, essencialmente, pensar significa realmente analisar a pergunta antes de responder. Isso é, novamente, um pouco mais caro, mas geralmente oferece melhores situações e melhores respostas No entanto, vou ativar esses dois modelos aqui sem pensar. Isso vai me permitir escolher se quero que vá um pouco mais fundo ou se não quero que vá um pouco mais fundo. Podemos então ver que eles foram adicionados aqui. Temos Opus 45 e agora 45 pensando e Sont 45 e Sont 45 pensando. Então, esse é o básico da nossa taxa de IDE aqui. Nós o instalamos. Nós já analisamos isso. Temos alguns agentes aqui. Podemos fazer perguntas e, na verdade, começar a programar. Então, vamos continuar e começar a fazer isso. 3. Pense como um diretor: o contexto é rei: Então, precisamos começar e realmente descobrir como usamos a IA em nosso código. Existem algumas maneiras diferentes de utilizar a IA. O que todos nós provavelmente conhecemos neste momento é o primeiro a entrar em cena, e esse é o HGBT Podemos copiar e colar algum código aqui, fazer uma pergunta, pedir que ele o refatore, e isso fará um ótimo trabalho O problema, porém, é que esse é um fluxo de trabalho muito lento. Você olha seu código, encontra um problema, copia e coloca no ChaChiBT Você precisa dar todo o contexto ele saiba o que você está tentando realizar. Clique em Enter. Parece bom. Você não conseguiu testá-lo. Você precisa copiá-lo e colá-lo de volta no seu IDE, e esse ciclo pode ser muito lento. Isso acelera algumas coisas , como encontrar bugs e tudo mais, mas não acelera a forma eficiente de usar seu tempo. Então é aí que entramos com os IDEs de IA. Essencialmente, eles são apenas IDEs com IA implementada neles. Normalmente, você também pode simplesmente encontrar um plug-in e colocá-lo em seu IDE favorito. Então, neste caso, vamos falar sobre Cursor. Esse é o que vamos usar para toda a série aqui. No entanto, você pode utilizar o que quiser. Todos eles funcionam basicamente da mesma maneira. Eles podem ter um conjunto diferente de modelos que você possa usar. Com o Cursor, basicamente, o que vamos fazer é começar do zero e criar algo. Você pode ver que, se você simplesmente acessar o site cursor.com, poderá baixá-lo agora mesmo no Mac ou Windows e realmente começar É um nível gratuito, então você pode fazer algumas perguntas, pode ser um pouco mais lento, pode ser um pouco mais idiota, mas tem um nível gratuito muito bom Se você quiser pagar os $20 por mês, pode ter acesso a alguns modelos melhores, e pode valer a pena para fins de aprendizado, mas você pode continuar gratuitamente com Kurt Então, eu queria falar sobre outros dois grandes players do mercado. Claude Claude é algo que você também pode baixar e usar. Na verdade, estamos usando alguns de seus modelos no Cursor. Então, isso é algo que vamos resolver aqui: só porque estamos usando o Cursor não significa que estamos presos a qualquer modelo que o Cursor crie. Na verdade, eles acabaram de criar um chamado Composer. Mas podemos usar GPT, Wiki News Claude, Wiki News Microsoft Podemos usar todos esses outros modelos de IA por meio do Cursor. Com Claude, você pode praticamente fazer o mesmo, mas é mais adequado ao conjunto específico de modelos diferentes, mas você pode entrar em contato E o Copilot também é diferente. Você pode ver que é uma espécie de híbrido em que você pode fazer perguntas aqui ou implementá-las em sua base de código também Existem muitos e muitos desses produtos por aqui. Portanto, encontre aquele com o qual você se sente mais confortável. Mas para este curso, vamos nos concentrar no Cursor. Então, uma vez que realmente abrimos nosso IDE aqui, nós o instalamos. Podemos seguir em frente e abrir um projeto. Você será presenteado com essa visão. Suas cores serão um pouco diferentes porque eu as mudei para caber apenas em algo que eu gosto neste segundo momento. Parece muito com o código do VS porque foi praticamente bifurcado do repositório do VS Code Portanto, ele terá muitas das mesmas habilidades de utilizar os plug-ins se você usar o VS Code e também utilizar todos os temas O que queremos fazer é que, quando começarmos aqui, neste lado direito, veremos o painel de alternância de IA Em qualquer outro IDE, você também terá algo relacionado a isso. Pode estar na parte inferior, pode estar no lado esquerdo, pode estar no meio, mas haverá uma maneira de você se comunicar com sua base de código e com seus diferentes agentes Com isso, podemos realmente começar a nos comunicar com a IA Aqui, podemos ir em frente e digitar coisas, e isso criará coisas em nosso projeto. Será apenas um complemento. Será algo com o qual poderemos nos comunicar enquanto construímos. Muitos IDEs diferentes também terão esses recursos diferentes. Essa taxa de recurso aqui é para alternar entre os modos de sua IA. Então, agora está no Agente. Essa é a mais poderosa porque Agente lhe dá permissão para fazer coisas. Em vez de você apenas fazer uma pergunta e dar uma resposta, ele pode procurar a resposta. Ele pode examinar sua base de código ou até mesmo examinar toda a sua área de trabalho se você der permissão para fazer isso Então, o Agent é o mais poderoso e é o que eu uso como padrão. se você não quiser que ele toque no código, No entanto, se você não quiser que ele toque no código, você pode alterná-lo para solicitar alguns problemas. Às vezes, ele toca no código quando você não quer. Então essa é a sua linha de base. Você clica em Perguntar. Não vou tocar no seu código. Isso não mudará nada. O planejamento e a depuração são específicos do Cursor, mas outros IDs diferentes estão sendo lançados com eles, e eles são bem simples Se você está tentando planejar um grande recurso estendido, talvez queira usar o prompt de planejamento. Eu vou te ajudar com isso. Se você está tentando depurar um determinado bug aqui, você pode acessar essa depuração e será mais inteligente nesse aspecto E o próximo lado, o que temos aqui são nossos modelos. Então, esses são os modelos que eu configurei atualmente no meu. Existem mais modelos. E se você clicar nesse botão, ele listará todos eles, você poderá adicionar quem quiser. E depois há o modo Max, que permite que a janela de contexto seja maior para projetos realmente grandes. Custa mais se você fizer isso. Então compositor é aquele que Cursor criou. Você pode ver que diz aqui, o primeiro modelo de codificação agente do cursor primeiro modelo de codificação agente do Então, este é o mais barato para Cursor porque está utilizando o próprio código do Cursor Então, temos o Opus aqui. Este é o modelo AnthropicTing. É muito, muito bom, um pouco caro, mas muito bom. Sone também é um modelo de pensamento Anthropico muito bom. Temos a série GPT aqui, então GBT 5.1, GBT 5.2. Nós temos Gêmeos Este é o modelo mais recente do Google no momento. E depois temos alguns outros como este mini. Nós temos um Grock. E se você clicar em Adicionar aqui, você pode clicar em Exibir todos os modelos, e há todos esses modelos que você pode tentar implementar e utilizar. Para este curso em particular, vou continuar com nosso provavelmente antrópico Soneto Para a maior parte disso, talvez eu use um pouco de compositor, mas os modelos mudarão à medida que avançarmos. Alguns vão melhorar. Você vai, você sabe, meio se sentir confortável com alguns, não se sentir confortável com alguns outros. Portanto, precisamos ter certeza de que os estamos utilizando da melhor maneira possível Outra área para isso também, e essa é totalmente nova, então eu quero ensiná-la. Você vê esses pequenos pensamentos, esses pequenos cérebros ao lado disso, isso é pensar Então, essencialmente, pensar significa realmente analisar a pergunta antes de responder. Isso é, novamente, um pouco mais caro, mas geralmente oferece melhores situações e melhores respostas Eu, no entanto, vou ativar esses dois modelos aqui sem pensar. Isso vai me permitir escolher se quero que vá um pouco mais fundo ou se não quero que vá um pouco mais fundo. Podemos então ver que eles foram adicionados aqui. Temos Opus 45 e agora 45 pensando e Sonnet 45 e Sonnet 45 Então, esse é o básico da nossa taxa de IDE aqui. Nós o instalamos. Nós já analisamos isso. Temos alguns agentes aqui. Podemos fazer perguntas e , na verdade, começar a programar. Então, vamos continuar e começar a fazer isso. 4. Desenvolva recursos mais rápidos: Nós. Então, vamos falar sobre desenvolvimento de recursos. Os recursos são a forma essencial de adicionar coisas novas a um aplicativo ou a um determinado produto. E com isso, muitas vezes, queremos implementar esses recursos de maneira rápida, limpa e eficiente. Bem, uma maneira muito fácil de fazer isso é a maioria desses recursos, eles vêm como um cartão ou bilhete de algum tipo. Então, outra pessoa já refinou esse recurso. Se for algo em um projeto pessoal e você não tiver cartões, você sempre pode simplesmente conversar com a IA para criar um cartão ou expandi-lo, você sabe, fazer perguntas, etc., etc., para obter uma descrição realmente boa Mas se você tiver um recurso, encontre. Por exemplo, eu copiei isso do Jira. É um grande conjunto de recursos para adicionar os modos claro e escuro. Então, basicamente, o que estamos fazendo é criar luz e escuridão alternados pelo usuário Configuramos os critérios de aceitação que possamos alterná-los manualmente Começa por padrão, classificando estrelas, etc Portanto, esse é um cartão muito bom, podemos copiá-lo e colá-lo e, basicamente, clicar em Enter, e, basicamente, clicar em Enter, e provavelmente funcionará muito bem. Mas para ter certeza de que estamos criando um código de qualidade, sempre que fizermos algo assim, no final, queremos dizer, antes de tocar em qualquer código, diga-me seu plano para implementar isso ou algo parecido Então, agora, quando você realmente enviar isso, ele fornecerá seu plano para executar esse código Então, prosseguirá e analisará a base de código muito rapidamente, entenderá como ela funciona E então nos dará os passos que serão necessários para atingir esse objetivo. E é aqui que, sendo um programador ou alguém com conhecimento na área como desenvolvedor, sua experiência pode entrar, pois nos dirá como executá-la Então, se olharmos aqui, podemos ver que isso nos dá um bom resumo aqui em cima. Então, diz que, basicamente, tudo bem, o que já temos em vigor é tailwind com suporte ao Modo Escuro, variável CSS, preferência do sistema e classes do Modo escuro Então, eles já estão em nossa base de código. O que falta é um tema manual, a preferência do usuário, sistema de três estados e um script para evitar o flash de conteúdo sem estilo Então, essencialmente, o que ele vai fazer é fazer isso. Ele criará uma infraestrutura de temas, criará utilitários de armazenamento de temas, reduzirá o tema, adicionará funções, suporte, armazenará preferências e retornará o tema efetivo, criará o contexto e, em seguida, criará um script de prevenção no cabeçalho para ser executado antes, para que ele não pisque do branco para o escuro sempre que for carregado Hum, e então o componente de alternância de tema. Será um sistema claro, escuro ou ciclo de três botões que gira em todos os três B. E aqui é onde podemos realmente começar a colocar nossos comentários. Então, eu vou dizer que no 2.1, eu quero que haja apenas um menu suspenso com essas três opções. Então, estamos definindo o que ele vai fazer . Na verdade, estava pensando em talvez ter um ciclo em que você pudesse continuar clicando nele repetidamente, e essa não é uma interface de usuário muito boa, pelo menos algo que eu não encontrei. Então, eu quero ter certeza de defini-lo. Estado ativo visual para a seleção atual, guia Área acessível, sim, posição no canto superior direito. Se acabássemos colocando-o no canto superior esquerdo ou em uma guia de configurações, seria aqui que corrigiríamos isso. Podemos seguir em frente e, apenas para argumentar, dizer também a posição no canto superior esquerdo. 200 milissegundos quando o botão de alternância funciona tanto na luz quanto no escuro, feedback visual claro no Hover Então, novamente, só por isso , vou dizer que vamos fazer com que seja menos de 100 milissegundos para alternar Então, vai ser como vai fazer isso. Ele atualizará o elemento raiz, criará um provedor de temas. Tudo isso parece bastante normal. Coloque o tema toddle no cabeçalho, verifique se ele está visível e, em seguida ele passará por uma lista de verificação Então, agora, em vez de apenas deixar a IA fazer isso, demos a ela o cartão que queremos implementar e fizemos algumas notas sobre como ela vai implementá-la. E agora o que podemos fazer é clicar no botão Executar. E agora implementará essa tarefa para nós. Então, agora que fornecemos todo o feedback de que ele precisa, ele começará a construí-lo. Dessa forma, estamos muito mais perto nosso objetivo final desde o primeiro prompt do que estaríamos se simplesmente o deixássemos rodar , e depois tivéssemos que dar material a ele, porque muitas vezes, se ele não foi criado, é muito bom para gerar essas coisas novas e integrá-las essas coisas novas e integrá-las Se você for muito longe na direção errada e depois pedir que ele se refatore completamente e retroceda, poderá passar muito mais tempo fazendo isso, exatamente como na programação normal, do que gastaria se dedicasse apenas alguns segundos aqui À medida que avança, ela continuará recarregando esta página, então voltarei quando terminar Então, agora ele implementou o código, e podemos vê-lo aqui. Tem esse tema em que podemos acessar o modo claro, modo escuro e o sistema. E você notará que nada mudou. Então, agora precisamos realmente entrar e fazer alguma depuração. Portanto, podemos ser muito simples nesse tipo de instrução. Podemos dizer que o menu suspenso está funcionando, mas nenhuma das cores muda quando você muda do sistema para o modo claro ou escuro Agora, ele vai avançar e passar por lá, e diz que eles verão o problema. Ele não foi configurado corretamente. Isso é muito importante, é que esse processo, como eu disse, será uma colaboração. Muitas vezes, você precisa testar o trabalho que ele constrói porque parece que funcionou . Nós poderíamos ter simplesmente passado isso. Mas se não fizermos um teste para ver se ele fez o que disse que faria, muitas vezes essas coisas vão passar despercebidas. Então, agora vamos continuar e realmente atualizar a embalagem do tema. Espere que tudo seja reconfigurado e pronto. Agora temos o modo de luz operando e ele funciona no ambiente do cursor, então é bom saber também. Agora podemos ver se saímos do escuro. Nosso sistema está no escuro ou de volta à luz. Ele alterna entre eles. Então, agora criamos um recurso. Está parecendo bom. Nossa última etapa, porém, é que precisamos revisar esse código. Então, devemos fazer isso manualmente. Podemos fazer isso por meio de um processo de revisão de código. Podemos fazer isso com IA ou podemos fazer isso de forma completa e totalmente manual. Eu acho que fazer todos os três é importante. Então, como programador, o que devemos fazer é clicar nesta guia de revisão E agora vai nos mostrar todas as mudanças que foram feitas. Há muita coisa aqui, mas é isso que é o Code View. Então, agora podemos dar olhada rápida e ter certeza de que ele foi criado da uma olhada rápida e ter certeza de que ele foi criado da maneira que queríamos que fosse criado, sem usar nenhum atalho, porque às vezes ele cria atalhos porque às vezes ele cria atalhos Uma coisa que notei sobre isso é que, em seu tema, se chegarmos até onde ele realmente criou muitos de seus temas, aqui mesmo, é que ele colocou a duração de 75 como elemento de tema em cima de cada instância em que havia uma duração necessária Isso para mim é um código ruim, porque e se quiséssemos alterar essa duração para 100 ou 50 ou qualquer uma dessas coisas? Como podemos fazer com que não faça isso? E é nisso que vamos trabalhar na próxima palestra: como podemos fazer com que a IA realmente nos ajude a refatorar nosso código Posteriormente, nos aprofundaremos um pouco mais no processo de revisão. Mas agora precisamos descobrir, criamos isso, mas precisamos refatorar Se dissermos que somos bons, gostamos, tudo funciona, mas queríamos fazer algo um pouco diferente em termos de código, o que fazemos para esse processo de refatoração E é isso que vamos fazer a seguir. 5. Como refatorar o código rapidamente: Então, vamos falar sobre a refatoração do código. Então, ficamos aqui com algo que notei no último, que é que parece estar colocando esses temas de uma forma que, se quiséssemos fazer uma alteração no uma forma que, se quiséssemos fazer modo escuro ou claro, essa duração teria que ser alterada em 12.20.100 arquivos à medida que o projeto cresce. Então, queremos seguir em frente e mitigar isso. Para fazer isso, vou começar com a criação de um novo bate-papo. O motivo pelo qual eu quero criar um novo bate-papo é que há muito contexto estranho que fará com que algumas de nossas decisões passadas se baseiem em algumas de nossas decisões em algumas de nossas Queremos começar do zero. É um novo objetivo, então queremos começar do zero com esse novo objetivo. É um novo objetivo, então queremos começar do zero com esse novo objetivo. Então, quando chegarmos a esse novo bate-papo, o que queremos fazer é primeiro fazer uma pergunta. Talvez saibamos com certeza que esse é um antipadrão, mas podemos perguntar. Podemos dizer que notei que, no modo de luz escura, definimos a duração 75 em vários elementos diferentes. Isso é um antipadrão? Podemos consertá-lo? Então, novamente, estamos nos comunicando com a IA Não temos 100% de certeza. Achamos que parece muito errado e provavelmente gostaríamos de mudá-lo. Mas também podemos perguntar por que isso aconteceu. Então, se prosseguirmos e perguntarmos isso, ele pensará sobre isso, encontrará todos esses casos de uso e, em seguida, verá o problema. E então ele nos dará sua resposta sobre isso. Então, diz: “Isso significa ótima captura”. Sim, isso é um antipadrão. Veja seu CSS global. Você já tem uma regra de transição global. Isso significa que você adicionou redundantemente a duração 75. Você foi adicionado de forma redundante. Bem, a IA fez isso, mas para a transição de cores , tudo para ims individuais já foi aplicado Isso torna seu código mais robusto e mais difícil de manter. Vamos remover as classes de transição redundantes do seu código Então, ele vai fazer essa refatoração para nós removendo esse código, e então podemos testá-lo aqui em um segundo Então, isso surge com um ponto muito importante. Como sabemos se o código gerado é de alta qualidade? Como podemos evitar que ele crie um código de baixa qualidade? Bem, o primeiro passo é nossa experiência. Fui eu quem pegou isso, não a IA. Assim, podemos ler o código como qualquer outro processo de revisão de código. Precisamos ler e ter certeza de que está codificando de uma forma que tenha bons padrões de qualidade, por ter certeza de que está codificando de uma forma exemplo, se um de seus colegas criar um código e eles criarem uma revisão de código, precisaremos fazer o mesmo com a IA Não podemos simplesmente confiar cegamente porque há 1 milhão de maneiras diferentes de fazer as coisas, e ela precisa seguir a maneira que queremos fazer as coisas e que se encaixe em nosso projeto, nossa empresa, nossas políticas, etc Então, o primeiro passo somos nós. A segunda etapa é quando fazemos algo assim, podemos dizer: Você pode escanear o código em busca outros antipadrões em potencial e listá-los? Podemos fazer algumas verificações de sanidade aqui. Podemos dizer: Ei, eu quero que você escaneie o código e dê olhada rápida para ver se há algum outro antipadrão na base de código que possamos ajudar a corrigir. Assim, podemos perguntar sobre certos problemas ou possíveis problemas e ver como ele nos fornece uma lista, e então podemos decidir quais deles achamos que podem ser antipadrões. Então, à medida que avança, ele procurará todos os antipadrões que puder encontrar. Também podemos pedir que ele verifique se há erros de digitação, possíveis bugs ou qualquer uma dessas coisas, e isso resultará em algumas coisas boas. E o engraçado é que ele já encontrou muitos problemas com seu próprio código. O primeiro é o risco de loop infinito. Se o usuário classificou todos os gatos disponíveis da ABI, isso se torna um loop infinito Adicione um limite máximo de repetição ou mostre uma mensagem, você classificou todas as mensagens CAT Não sei quantos são da API de IA, mas pode haver 100 milhões. Então, talvez isso não seja um grande problema, mas provavelmente é bom corrigi-lo. Vazamento de memória. Essa é boa. Desmontado antes que o tempo limite termine. Vou tentar atualizar o desmontado, limpar o tempo limite e a função de limpeza, a mutação da matriz, mutação da matriz problema que meio que altera o Embora funcione aqui, é uma má prática. Isso pode causar bugs. Essa é uma boa explicação, afirmação de tipo inseguro, lógica de tema duplicada, sem validação de JSON, etc Então, tudo isso é só para te mostrar que 6. Pare de gastar horas depurando: depuração é outra área essencial que podemos usar IA para ajudar a corrigir, mitigar e acelerar Se notarmos, parece que não há erros neste site. Nós o testamos bastante e parece muito bom. No entanto, quando chegamos ao navegador, temos algo interessante acontecendo. Quando clicamos no histórico aqui, temos todas essas datas inválidas, objetos, alguns gatos que não avaliamos antes e todos esses links inativos Então, o que aconteceu? Bem, eu já sei o que aconteceu, mas vou partir de uma perspectiva de não saber o que e vamos ver se a IA pode nos ajudar a resolver esse bug estranho Então, o que eu posso fazer é definir o problema muito bem. Então, posso dizer que, no navegador de cursor local, não parece haver nenhum problema. No entanto, quando abro uma sessão no meu navegador Chrome, na seção de histórico, parece que há gatos que eu não avaliei e todos eles têm links de imagens quebrados. Portanto, definimos esse problema de maneira decente. Precisamos ter certeza de incluir todos os detalhes adicionais que pudermos. Um desses detalhes que eu poderia colocar é eu já fiz esse projeto antes, mas este é um projeto totalmente novo. Dê a ele essa informação . Não tenho certeza se isso é um problema de cache ou se está fazendo algo errado. Então, nós lhe demos uma quantia decente. Agora podemos clicar na tecla Enter e ver o que ela pensa. Então, ele está examinando e faz toda essa fase de pensamento , como sempre faz. Mas diz que posso ajudá-lo a diagnosticar. Parece que você pode estar enfrentando a persistência do armazenamento local em relação a projetos anteriores Isso parece muito preciso. Por exemplo, presumo que a IA sempre cria o mesmo armazenamento local Deixe-me analisar a implementação do armazenamento. Perfect encontrou o problema: seu novo projeto está lendo o armazenamento local de avaliadores Cat anteriores Como os dois produtos usam a mesma chave de armazenamento, classificam e executam o mesmo domínio, provavelmente 3.000, isso funcionará Então, ele vai continuar e atualizar a chave de armazenamento para mim para V dois. E agora podemos seguir em frente e executar isso novamente. Portanto, se verificarmos nosso navegador, atualize-o. Temos um cache vazio aqui, e agora podemos verificar, e isso ajudou a corrigir nosso bug. Então, esse é um bug muito simples de corrigir, mas poderia ser complexo se não juntássemos essas duas informações . Agora, quando chegamos a outros bugs, muitos deles podem ser resolvidos simplesmente copiando e colando e pedindo que ele resolva o bug Mas às vezes isso pode criar alguns problemas sem ele. Ele pode criar mais problemas do que resolver. Para corrigir isso, precisamos garantir que sempre peçamos que ele se explore antes de corrigir um bug Então, se entrarmos em nosso código aleatoriamente, podemos acessar nossa API CAT, excluir isso e salvá-lo Isso não vai mais funcionar. E então eu posso ir até aqui e, digamos, criar alguma incompatibilidade de variáveis aqui Haverá muitos problemas, e agora posso dizer, então abrimos uma nova guia aqui e dizemos: estou tendo alguns problemas. Veja, atualize isso. Não vai funcionar. Se eu estiver recebendo uma falha ao carregar o cat, tente novamente. Descreva suas etapas para depurar isso antes de prosseguir Então, podemos, novamente, pedir que ele se descreva, e acabamos de colocar o básico do que está acontecendo Está ocorrendo um erro e dirá: descreva suas etapas para depurar isso e nos dirá. Meu plano de depuração Ele localizará a mensagem de erro, descobrirá onde a falha no carregamento é exibida no código e a entenderá. Então, vai começar com a mensagem de erro e voltar a funcionar. Isso é algo que eu também faço. Se isso está chegando ao front-end, este é um lugar onde eu posso começar e começar a me aprofundar Ele examinará a camada da API verá quais endpoints estão sendo usados Ele revisará o componente, os dados ou o próprio componente e verificará problemas comuns de API Inspecione o console do navegador e teste o endpoint da API ver se ele está funcionando do outro lado Todas essas são ótimas etapas de solução de problemas. Então, depois de fazer isso, ele foi em frente e encontrou o problema em si. Diz que depois de examinar, eu identifiquei o código, o bug está aqui O ERL não tinha o T no início, então ele o encontrou Então, agora podemos prosseguir e tentar novamente esta atualização desta página. E isso ainda é um problema. Então eu vou para Bem, ok, eu realmente não mudei o código. Atualize o código para corrigi-lo. Então, agora damos permissão para realmente atualizar o código. Vai em frente e corrige, atualize. Agora está parecendo bom. Agora vamos para a história. alguns problemas aqui. A loja não está definida. Então, novamente, estou caindo. Essa é a outra coisa que eu fiz. Posso simplesmente copiar e colar isso e dizer: recebo esse erro ao carregar a página principal. Ele passará por seu processo e provavelmente descobrirá que deve ser armazenado com um E no final. Sim, há um erro de digitação aí, corrige o erro de digitação e agora resolvo Alguns bugs, como eu disse, serão mais complexos. E para corrigir esses bugs realmente complexos, muitos deles agora têm esse recurso de depuração O que a depuração fará é que, se não conseguir encontrar o problema logo de cara, como essas correções simples, ela mesma começará a adicionar registros E a partir desses registros, ele poderá ler o que o código está fazendo na execução. E, a partir disso, ele também poderá depurar problemas muito mais complexos Então, isso é algo em que você tem uma base de código muito grande com muitos problemas ou um problema muito profundo. Você pode usar esse recurso de depuração, e ele será muito bom nisso Mas, no geral, a conclusão dessa palestra é que a IA pode ser muito, muito útil na depuração Ele pode explicar não apenas as etapas que serão tomadas, mas também fornecer informações sobre as etapas que talvez você deva seguir. Isso ajudará a resolver alguns erros realmente básicos quase imediatamente e praticamente até erros intermediários imediatamente. E há maneiras de fazer com que ele vá ainda mais longe e resolva muitos desses bugs mundanos sozinho, para que possamos encontrar esses erros mais rapidamente e corrigi-los 7. Use IA para corrigir a IA: Como podemos usar a IA para nos ajudar no processo de revisão? Bem, há muitas maneiras diferentes fazer isso. A primeira é fazer uma pergunta manualmente. Então, se examinarmos nosso código e encontrarmos algo que parece um pouco incompleto, podemos fazer o que fizemos na última aula e perguntar: isso é um antipadrão? Você mudaria isso? E precisamos ser os árbitros dessas decisões porque, no final das contas, a IA muitas vezes tende a ser positiva e a realizar algo em cada solicitação Significa que se você disser : Ei, isso é um antipadrão, conserte-o , ele funcionará, Sim, isso é um antipadrão, e ele o mudará, mesmo que esteja na direção errada Então, o que precisamos fazer é fazer essa colaboração constante em que estamos fazendo perguntas e vendo se isso pode nos dar algumas boas respostas. Também existem ferramentas como essa. Eu implementei um botão de pular rápido, e você pode ver que eu cliquei no botão Revisar aqui Isso me leva a essa guia e, aqui em cima, há um botão que diz: Revise este código em busca de problemas. Vai passar por algumas mudanças. Eles podem dizer que haverá muitas mudanças ou esse único arquivo, e isso nos dará um monte de comentários sobre o que ele considera bom ou ruim com essa mudança de código. Agora, a parte interessante sobre isso é que pedi que ele fizesse uma coisa muito simples, que é basicamente adicionar um botão de pular a isso e alterar um pouco a altura da página principal Então, se surgir, tipo, 13 coisas que estão erradas com isso, então você sabe que precisamos ser os árbitros, como eu disse, e realmente escolher quais estão lá Agora, esse, funcionou bem. Dizia que não encontrei problemas com essa alteração de código. E isso é positivo porque às vezes queremos que ele não encontre problemas. Então, com esse código, ele diz que é um bom código e está pronto para confirmá-lo. Às vezes, surgem coisas assim em que os diferentes níveis de problemas que podem estar com o código, e só precisamos dar uma olhada em cada um deles e ver se isso é algo que queremos corrigir, se é algo que queremos abordar, se é algo que queremos comentar. Se acessarmos as avaliações de relações públicas no github.com, elas também serão integradas a uma IA, e você também poderá fazer perguntas sobre a revisão do código Então, no geral, só precisamos saber que IA pode nos ajudar no processo de revisão de código. Portanto, isso pode nos ajudar a escrever o código. Mas então precisamos revisá-lo manualmente nós mesmos. Precisamos fazer perguntas durante esse processo aqui e fazer com que ele analise. E então, quando chegamos à análise real de relações públicas, precisamos que outras pessoas a examinem manualmente e usem a IA para analisá-la. E isso criará um código de alta qualidade que costumava ser muito, muito cansativo e demorado de criar Podemos meio que criar usando a assistência de IA. 8. Entenda bases de código complexas rapidamente: Se você não obtiver mais nada deste curso, obtenha isso deste curso, e isso é que a IA pode nos ajudar a entender códigos complexos. Não precisamos mais entrar em um repositório com 100.000 linhas de código diferentes espalhadas por 1.000 arquivos diferentes e tentar entender um fluxo complexo de como uma determinada variável passa A IA é muito, muito boa nisso e é praticamente 100% precisa. Assim, podemos entrar em qualquer tipo de repositório e fazer uma pergunta complexa e fazer com que ele analise essa questão complexa para nós Por exemplo, aqui, eu realmente não sei como o armazenamento funciona. Só sei que ele usa armazenamento local. Então, posso dizer, diga-me, apreensão, como o armazenamento funciona, me dê os prós e os contras disso me dê os prós e os contras Apenas enviando esse aviso muito simples, podemos obter um relatório muito bom sobre como o armazenamento em todo o sistema está dividido. As variáveis também são ótimas para isso. Você pode copiar e colar uma variável lá e dizer, neste documento, eu tenho essa variável, me dê o geral, você sabe, no geral, me diga como essa variável é usada em todo o código e como ela afeta diferentes partes do código. Então, o que temos aqui é que ele nos diz exatamente como ele é armazenado. O sistema de armazenamento está aqui, ele fornece uma camada simples de persistência do lado do cliente As principais operações que você pode salvar foram classificadas e claras. Essas são as quatro operações que vêm com ele. A estrutura de dados é a seguinte e, em seguida, tem vantagens aqui. Ele tem infraestrutura zero, desempenho rápido, implementação, SSR seguro, tratamento de erros e bom para o aprendizado É contras, não é escalável porque há um limite, nenhuma persistência de dados em todo o dispositivo, nenhuma conta de usuário, problemas de desempenho com condições de corrida de escala são possíveis, sem análises, verificação de duplicatas, compatibilidade de navegadores, perda de dados, segurança Então, a partir disso, obtemos essa abordagem em que ela nos diz que, para MVPs, protótipos, aplicativos de usuário único, é bom Mas se estamos tentando realmente implantar isso, é uma coisa ruim. E temos apenas algumas sugestões para ajudar a melhorá-lo. Então, no geral, em vez de termos que ler o código e pesquisar muito no Google, o que isso significa? O que essa biblioteca faz? Podemos fazer perguntas e fazer com que ela realmente defina diferentes partes do nosso código para nós de maneiras que sejam realmente acessíveis. Também podemos fazer com que ele refine isso. E digamos que defina isso de uma forma que as partes interessadas entendam. Então, basta simplificar um pouco, o que basta simplificar um pouco, significa que removerá alguns detalhes técnicos para que uma pessoa que não seja muito técnica possa entendê-los um pouco Então, em inglês simples, diz que o aplicativo salva as avaliações dos usuários diretamente no navegador da web, mesma forma que os sites lembram sua preferência de login ou itens do carrinho de compras. Pense nisso como um notebook que fica dentro do navegador do usuário. Quando eles escrevem um gato, nós o escrevemos em seu caderno pessoal. Nenhum servidor, banco de dados ou armazenamento em nuvem está envolvido. Então, basicamente, podemos dividi-lo em termos leigos muito pequenos que podemos usar para descrevê-lo para outras pessoas ou, às vezes, até mesmo como pessoas técnicas, precisamos de uma descrição não técnica para que possamos realmente processar essas informações Portanto, utilizar a IA para definir e explicar como os projetos funcionam pode realmente ajudar desenvolvedores juniores ou intermediários ou até mesmo um desenvolvedor sênior entrando em um novo 9. Ajuste sua IA para seguir suas regras: A última coisa que quero abordar no cursor IDE e qualquer outro IDE de IA é que sempre há um lugar onde você pode colocar suas próprias regras. Então, se entrarmos em nossas configurações e descermos até as configurações do cursor, podemos realmente deslizar para as regras e comandos. Então, com isso, eu realmente criei um conjunto de regras aqui, uma regra de usuário em que ele cria um banco de memória que ajuda a entender o que foi feito no passado. Essencialmente, ele apenas cria um arquivo markdown que meio que acompanha algumas das tarefas criadas Mas podemos utilizar muitas áreas diferentes aqui. Temos comandos de projeto, temos regras de projeto e regras gerais de usuário que serão usadas em cada um deles. Portanto, para esse projeto específico, podemos criar uma regra personalizada ou remota. E você pode dar um nome como, por exemplo , poderíamos dizer que este será sobre um esquema de cores. E podemos dizer que, para isso, a regra é todo o projeto sempre que uma cor for necessária, consulte esta cartela de cores E você pode dar apenas cores. Como a cor X, a cor Y, a cor Z. O que isso vai fazer é antes de executar cada prompt, garantir que isso esteja no contexto. Isso é importante porque agora ele nunca vai adivinhar as cores. Você dá a ele seu esquema de cores e, se você criar um novo componente, uma nova área ou uma página completamente nova , será como: “Bem, ele me disse que precisamos examinar esse esquema de cores. Esse é um exemplo muito, muito simples, mas um exemplo mais complexo pode ser a maneira como você usa ganchos em seu projeto, a maneira como você usa contextos em seu Da mesma forma que você deseja armazenar coisas ou sua preferência por letras maiúsculas ou minúsculas, IDs, UUIDs, sementes aleatórias, qualquer uma dessas coisas que são específicas da política da empresa ou até mesmo de preferência pessoal, você pode seguir em frente e definir essas regras desde o início E agora, toda vez que você solicitar uma solicitação, essas regras serão incluídas na solicitação, e isso fará com que você não persiga constantemente a IA em um círculo onde fixa uma área, peça para ela criar uma nova área e ela esqueça todas as instruções no lado esquerdo que você acabou de mandar fazer As regras são uma ótima maneira de manter contextos contínuos e garantir que elas realmente eliminem algumas dessas pequenas inconsistências Uma área importante aqui é que há algo na IA chamado basicamente de quebra de contexto ou resumo de contexto O que isso significa é que, eventualmente, chegamos à nossa janela de contexto. Você pode destacar aqui embaixo e ver. Usamos 23.000 de 200.000 da nossa janela de contextos. Agora, ele não entra em contato com Smash em 200.000. Normalmente, ele fará isso antes disso, talvez em torno de 100 a 150.000 O que isso significa é pegar todo o contexto obtido e executar uma função que ajuda a resumir tudo em uma janela de contexto menor Isso economiza dinheiro do cursor e, no final das contas, também economizará dinheiro. No entanto, às vezes o contexto pode destruir algumas de suas regras Isso os colocará de uma forma que não combina mais com o que você estava tentando realizar. Então, se você já viu esse tipo de chegar à faixa de 60, 70%, provavelmente é hora de começar um novo bate-papo. Redefina essa janela de contexto para zero. E inicie um novo bate-papo com o contexto necessário para o problema em questão. Não tenha apenas uma corrente continuamente longa com a qual você entra em contato constantemente Continue criando novos bate-papos com novos objetivos e mantenha-os realmente focados, e você não terá esses problemas no futuro Mas entenda que há uma grande variedade de regras que você pode aplicar à IA, e isso pode realmente ajudar a remover algumas dessas inconsistências 10. É sua vez: descrição do projeto: Então, chegamos à parte do projeto deste curso, e eu criei um muito divertido em que você cria um pequeno ranker para gatos Eu quero que você faça algo parecido. Crie uma ideia muito simples, comece do zero e use o AI IDE para criar um produto para você. Faça perguntas, obtenha seus requisitos, suas especificações e realmente crie algo forte e robusto para começar. Certifique-se de visualizar o código e criar um produto que não seja apenas muito divertido, mas também um código de qualidade. Vá em frente e envie esse projeto, faça uma captura de tela do que você criou e dê uma pequena descrição sobre o que você criou, alguns dos benefícios de usar a IA e talvez algumas das desvantagens que você experimentou ao usar Isso deveria ser muito divertido, algo que você pode fazer dentro 30 minutos a uma hora e algo que você pode ver, você sabe, nesses 30 minutos a uma hora e rir ter acabado de criar esse pequeno projeto. Então, obrigado a todos, e estou animado para ver seus projetos. 11. Conclusão: Este curso é uma introdução rápida sobre como você pode utilizar a IA para acelerar seu fluxo de trabalho. O fluxo de trabalho é muito simples. É o fato de que queremos utilizar a IA em cada etapa do fluxo de trabalho. Mas a chave aqui, a parte mais importante é que não queremos que ela simplesmente faça todo o trabalho, se esforce e siga em frente com nossas vidas. Isso criará problemas de segurança, bugs posteriores, código mal configurado e débito tecnológico, porque criará sempre algo um pouco diferente Não vai seguir essas regras. Não seguirá certos padrões que queremos que siga. Portanto, precisamos garantir manualmente que ele esteja fazendo isso criando as regras nós mesmos, revisando o código e fornecendo o máximo de contexto possível ao interagir com ele máximo de contexto possível ao interagir com Quando fazemos isso, podemos criar projetos como o site do CAT em minutos. Imagine um dia inteiro interagindo com a IA. Você pode levar isso a um estado quase implantável onde costumava levar uma equipe de duas ou três pessoas, talvez uma semana para se desenvolver totalmente Portanto, há muito poder por trás dessas ferramentas. Se os usarmos corretamente, podemos acelerar nosso fluxo de trabalho e não precisamos reduzir nossa qualidade. Não precisamos ficar frustrados. Isso pode realmente tornar o desenvolvimento um processo rápido nas mãos de um desenvolvedor sênior e experiente. Portanto, utilize experiências de IA com ele, melhore suas instruções, forneça o máximo de contexto possível e veja realmente o que ela pode fazer por você Continue experimentando, continue aprendendo porque essa é a próxima etapa da programação e, portanto, todos nós precisamos manter essas habilidades atualizadas para que possamos continuar inovando todos os dias Obrigado a todos por se juntarem a mim para isso, e estou animado para ver todos vocês no meu próximo curso.