IA cursora: web design com programação de IA para iniciantes | criar sites sem programação

1. Apresentação: Essa é uma das melhores coisas que você pode aprender para o seu futuro. Esta é sua chance de subir de nível para aprender algo que vai melhorar significativamente sua vida. E isso é codificação Vibe. Codificar no Vibe significa simplesmente criar sites e aplicativos usando IA e inteligência artificial Você imagina , descreve em termos simples e depois entende. A plataforma cria todo o código automaticamente, para que você não precise aprender Python, Javascript ou qualquer outra coisa Vamos usar o cursor, que é uma das melhores plataformas de codificação de vibrações que O Cursor é como ter uma equipe de desenvolvedores seniores com todo o conhecimento do mundo ao seu alcance 24 horas Sem folga, pronto para construir com o que você quiser. E tudo isso em uma assinatura bastante acessível. Você não precisa de nenhuma experiência anterior nem de saber programar. Este curso é adequado para iniciantes e vamos segui-lo passo a passo No passado, criar qualquer tipo de site ou aplicativo significava milhares, talvez dezenas de milhares de dólares, semanas e meses de desenvolvimento e toda uma equipe de pessoas. Agora, está tudo dentro de uma plataforma. codificação Vbe é a melhor chance para maioria das pessoas criar uma renda sólida e confiável Você pode usar o vibe coding para conseguir um emprego melhor como freelancer ou para iniciar o negócio E repito sem ser técnico, sem saber escrever código, esse é o futuro agora. Neste curso, criaremos um site do zero e o lançaremos em nosso próprio domínio, passo a passo, com a ajuda da IA. Mas isso não vai ser fácil. Eu não vou te prometer o mundo. Às vezes vai ser frustrante, e isso é porque é muito cedo Mas chegar cedo é a sua principal vantagem. Imagine investir na Apple há 20 anos ou comprar Bitcoin quando ela começou. Claro, haverá incertezas, problemas, bugs, mas não espere até que isso se torne popular Essa é sua chance agora. Neste curso, vou explicar o que você precisa saber, basta começar e lançar o primeiro site em pouco tempo. Vou te ensinar em inglês simples o que tudo significa, IA, LLMs, modelos, MCPs, tudo isso Sou designer e, se você já assistiu aos meus cursos de design, sabe que me concentro em obter resultados rápidos, sem nenhuma teoria chata Não vou encher sua cabeça com toneladas de termos e conceitos complicados. Não, em vez disso, eu me concentro em exemplos e exercícios divertidos. Invista no seu futuro. Comece hoje mesmo. Não espere, agora é onde você tem a maior vantagem. 2. O que é codificação de cursor e vibe: Bem-vindo de volta. Neste curso, vamos usar o cursor para vibrar o código Mas o que é cursor e o que é codificação Vibe, certo? Então, primeiro de tudo, o cursor é uma plataforma. É um programa que ajuda você a criar software com o poder da IA, sem saber codificar. A empresa por trás do cursor, a AI Sphere, acaba de levantar $900 milhões em uma avaliação de $9.000.000.000 Esses são números malucos. É uma das coisas mais quentes do momento. São 20 dólares por mês no momento desta gravação, de qualquer forma E o que você recebe em troca é um divisor de águas completo. Com o Cursor, você trabalha lado a lado com inteligência artificial que entende seu projeto, segue suas instruções e constrói seu projeto quase como mágica Você escreve o que quiser. Isso é chamado de prompt. Talvez você descreva o que o projeto deve fazer. E então a IA assume o controle e faz a maior parte do trabalho pesado. Mas vamos simplificar isso. O que você pode realmente construir no cursor? Bem, antes de tudo, aplicativos móveis, tanto para IOS quanto para Android, assim como os aplicativos que você vê na loja de aplicativos ou no Google Play. Você pode criar qualquer coisa, desde um check-up de condicionamento físico até um aplicativo de bate-papo e uma ferramenta de finanças pessoais, mas, para ser justo, neste momento, você deve optar por aplicativos menores A próxima coisa em que você pode criar sites, qualquer tipo de apresentação, sites, páginas de destino, portfólios, blogs pessoais, páginas de destino, por exemplo, são absolutamente fantásticos para produtos, startups, eventos, tudo responsivo, tudo limpo Então essa é uma boa maneira de fazer isso. A próxima coisa que você pode fazer é criar produtos SAS. CAS significa software como serviço. O cursor pode ajudá-lo a criar tudo sobre ele. O front-end, o back-end, o banco de dados, tudo e as plataformas CAS estão em toda parte. Temos alguns exemplos na tela. As plataformas CAS são fantásticas porque são uma das melhores maneiras de ganhar dinheiro. A próxima coisa que você pode fazer é criar plug-ins, ferramentas como extensões do Chrome, bots do Discord ou talvez algumas ferramentas específicas para sua equipe ou empresa ou, por outro lado, você pode optar por plug-ins do WordPress, Se ele estiver em um navegador ou for executado on-line, há uma boa chance de você criá-lo com o cursor. E aqui está a grande ideia. Assim, o cursor se conecta diretamente aos modelos de IA mais inteligentes do mundo. Isso significa que ele sabe como escrever Python, JavaScript, react, next JS, tailwind, typescript, note É como ter uma equipe de desenvolvedores seniores disponível 24 horas por dia, 7 dias por semana, com infinitos pacientes prontos para codificar o que você quiser no local Você diz o que quer e ele começa a codificar. Você analisa os resultados, dá uma olhada e depois dá feedback, e eles melhoram constantemente. Sem que você saiba programar, fale com ele em inglês simples. Essa é a parte essencial. Então imagine isso. Você tem uma ideia para um produto, certo, um plugin, um aplicativo, uma plataforma, um site, certo, algo que resolve um problema que talvez você tenha tido há alguns anos Normalmente, você precisaria de meses de desenvolvimento. Você precisaria de uma equipe, um orçamento, reuniões intermináveis, certo? Mas com o cursor, você apenas descreve a ideia. E em minutos, você tem algo real, algo funcional, algo que você pode testar, melhorar e talvez até mesmo lançar depois algum trabalho. Isso é codificação Vibe Então, a codificação vibe consiste em dizer ao Cursor o que você quer que seja feito em uma linguagem simples e simples, inglês puro, e então a plataforma o executa E é isso que torna o cursor tão poderoso. Isso não ajuda você a escrever código. Ele ajuda você a criar produtos, resolver problemas e levar você da ideia à execução com mais rapidez do que nunca. Ok, baixe o anexo e use o link para se inscrever no Cursor. Então, por favor, cadastre-se , faça o download e nos vemos em um segundo. Vamos instalá-lo juntos. Mas agora vamos fazer uma pausa rápida. 3. Instale o cursor e defina suas expectativas: Bem-vindo de volta. Instalar o cursor é muito fácil porque é apenas um programa simples. Não há nada de especial acontecendo. Portanto, siga as mesmas etapas e marque as mesmas caixas. Enquanto trabalho em segundo plano, deixe-me definir suas expectativas. Chegamos cedo. As coisas estão mudando rapidamente. cada semana, mais ou menos, há grandes novidades, melhorias, e isso é um pouco desconfortável. Novos recursos estão sendo lançados e tenho certeza de que este curso ficará desatualizado, embora eu faça o possível para mantê-lo atualizado. Agora, meu objetivo é ensinar a você como aprender e usar essas ferramentas. Eu vou te ensinar princípios, e esse é o valor real deste curso. Mas vamos voltar às constantes mudanças e melhorias. Esse é o preço que você tem que pagar por chegar cedo. Você precisa de muita paciência. Você precisa deixar a frustração se afastar de você. E isso é porque você vai ficar preso. Eu te prometo isso. E não se trata do meu curso, meu estilo de ensino ou do meu conhecimento. Sabe, eu pessoalmente tive inúmeros casos em que o guia oficial disse para clicar no botão azul, mas eram apenas botões vermelhos. Ou o guia disse para clicar no botão Salvar, mas não havia nenhum botão Salvar É muito frustrante. Tive problemas em que não consegui mais trabalhar devido a problemas com minha VPN. Mas eu não uso uma VPN. Eu segui todas as etapas oficiais e ainda estava preso a um problema que ninguém mais tinha. Usei três computadores diferentes, tive três problemas diferentes e pude continuar por muito tempo. Isso está prestes a acontecer com você também. Agora, meu conselho, use o guia do anexo para obter ajuda. Na maioria das vezes, a resposta curta é esta você terá que pesquisar e corrigir muitas coisas sozinho. Estou aqui para ajudar. Você pode contar comigo, mas alguns problemas serão específicos da sua situação, do seu computador e do seu projeto, e você precisará de paciência. Mas qual é a vantagem? Qual é a vantagem de chegar tão cedo? Nós entendemos as desvantagens. Qual é a vantagem? Bem, você tem uma grande vantagem na corrida, seja para trabalhar freelancer ou construir um negócio Isso é enorme. Você aprende com seus erros. Você vê problemas comuns e progride. Como eu disse, é como investir na Apple há 20 anos. Ninguém sabia que seria um sucesso tão grande. Mas aqui, eu prometo, há nada maior do que codificar vibrações E está tudo em suas mãos. Você pode criar coisas incríveis ou adiar Você pode esperar até que as coisas estejam super claras, super fáceis para todos. Não há mais problemas, não há mais bugs, não há mais frustrações. Mas então você terá 100 vezes mais competição porque todo mundo vai fazer isso. Então, é tão simples quanto isso. Se você investir agora na Apple ou no Bitcoin, certeza, você pode se sair bem. Mas se você estivesse lá no início, as recompensas teriam sido infinitamente maiores Então, por favor, entenda por que você vai sofrer e terá dores de cabeça e muita frustração. É para o seu futuro. E se você conseguir lidar com isso, se puder continuar avançando, a recompensa será enorme. Se você continuar trabalhando até o limite, as recompensas serão enormes. É por isso que eu amo tanto a codificação Vibe. É exatamente a dificuldade certa. Se fosse muito difícil, seria codificação clássica, certo, quatro a seis anos estudando, trabalhando, sendo aprendiz, sendo júnior, subindo de nível, lentamente super difícil, lentamente Mas se fosse muito fácil, todo mundo faria isso. Portanto, a recompensa seria quase nada. Então, isso está bem no meio. É um negócio fantástico. É o nível certo de dificuldade. De volta à inteligência. Novamente, você não vai realmente codificar. Você não precisa conhecer nenhum tipo de programação. Você precisará pensar de forma lógica e explicar claramente o que está em sua mente, o que você quer fazer E essa é uma habilidade que você terá que desenvolver ao longo deste curso e por meio da prática. Mas você não codificará, na verdade não lerá o código. Você não deveria entender tudo o que está acontecendo no cursor. Não. Um dos princípios fundamentais que quero ensinar é o seguinte: você pode passar o dia todo, por exemplo, criando memes, criando imagens engraçadas para compartilhar com seus amigos ou, por outro lado, criar uma plataforma que permita que as pessoas criem criar uma plataforma que permita que as pessoas criem E então, com base nisso, você pode criar uma fonte de receita. Tudo gira em torno de seu foco, onde você coloca seu foco e como você cria ideias. Eu vou dar uma palestra sobre isso, então fique ligado. Mas sim, o foco em que você se concentra é uma das coisas mais importantes. Você tem que definir as metas certas e as ambições certas. Sim, por enquanto, temos o cursor instalado. Temos uma interface escura e estamos prestes a criar nosso primeiro projeto. Agora, uma última coisa. Vou simplificar muitas coisas, para que seja fácil de entender. Se por acaso você é um programador com muito conhecimento, com muita experiência, com muita experiência, entenda que quando você diz que cursor é uma bifurcação do código VS, isso realmente não ajuda muitas pessoas ou quando você diz algo como abrir seu terminal e executar este script rápido em Python Novamente, isso é um pouco opressor para maioria das pessoas. Eu não vou fazer isso. Agora, eu posso simplificar demais algumas coisas, mas este é um curso para pessoas que não são técnicas, e acho que essa é a melhor maneira de fazer isso Ok, eu vou te ver em um segundo. 4. Nosso primeiro site no Cursor: Bem vindo de volta. Vamos criar nosso primeiro site no Cursor. Antes de começar, assista a esta palestra duas vezes. Na primeira vez, basta assistir e ver o que está acontecendo. Em seguida, retroceda desde o início e faça uma pausa para continuar trabalhando. Você terá que fazer uma pausa com bastante frequência. Por favor, não tente colaborar na sua primeira visualização. Você não conseguirá acompanhar. Então, novamente, assista duas vezes e, na segunda vez, faça uma pausa quantas vezes precisar Ok, vamos lançar o cursor e esperar alguns segundos até que ele carregue. A próxima etapa é o que você fará toda vez que quiser iniciar um novo projeto, seja, criar uma nova pasta. Todos os nossos projetos devem ser organizados em pastas, um site, uma pasta. Então, vamos abrir nosso computador e criar um novo. Se você não usa o Windows, tente evitar a partição C, a unidade C, pois isso pode criar alguns problemas. Ok, chame, o que quiser. Vou usar portfólio, mas o nome realmente não importa. Claro, a pasta vai ficar totalmente vazia, certo? Em seguida, volte ao cursor, maximize-o, para que ele ocupe a tela inteira, e agora vamos abrir essa pasta. Então, nada de especial até agora, mas é assim que você inicia um novo projeto no cursor. E, em seguida, anexado ao curso, você terá um arquivo de texto com um prompt, com uma tarefa. É o que queremos construir, e é algo bem básico. Então é isso que vamos colar aqui no lado direito desse campo. Agora, depois de colar, Control V, não pressione Enter. Em primeiro lugar, estamos no modo agente. Isso significa que a IA criará todo o código para nós. Não vamos usar mais nada, então tudo é automático. Em seguida, a partir deste trabalho, vou usar o Gemini 2.5 P. Por favor, use o mesmo ou, se não estiver disponível por qualquer motivo, qualquer uma se não estiver disponível por qualquer motivo, dessas outras opções listadas na tela Vou explicar tudo em detalhes mais tarde. Então, por enquanto, continue. Ok, aqui está a tarefa. É o seguinte. Crie uma landing page de portfólio de modelos para mim, Chris Barron 36 de Bucareste Tem 14 anos de experiência em design. Sou instrutor certificado pela Adobe e me especializo em web e design de aplicativos Eu prefiro um esquema de cores vermelho e preto, boas animações e uma seção de portfólio com cinco categorias Use imagens de espaço reservado por enquanto. Será uma única página com um menu principal na parte superior que o levará até a seção específica em que você clica. O endereço do meu escritório é o seguinte. E, por favor, adicione os meus comentários. Adicione um formulário de contato para que as pessoas me enviem mensagens e mostrem meu número de telefone, bem como meus perfis de mídia social. Use as melhores práticas para criar essa landing page. Ok, coisas boas. Use a mesma tarefa, mas esteja ciente de que é totalmente normal seu design tenha uma aparência diferente. Isso não é um problema. É assim que a IA funciona. Agora, caso isso não funcione, continue até a próxima palestra onde vamos configurar tudo, e então você pode voltar e tentar novamente. Ok, agora, uma vez que pressionamos Enter, partimos para as corridas. Observe essa área aqui. Isso diz que está gerando. Isso significa que está funcionando. Aqui, caso queira pará-lo, você pode usar esse botão, mas na verdade não fará isso. Dentro desse painel, você pode ver como o modelo pensa, e alguns modelos são muito descritivos Eles explicam tudo em detalhes. A propósito, modelo com IA, é a mesma coisa. Aqui, esse cinza muito desbotado nos diz o que a modelo está pensando. E depois de um tempo, um tom diferente de texto aparece. Este é mais fácil de ler. Então, vamos fazer uma pausa Então, basicamente, temos um texto desbotado que é difícil de ler. Esses são os pensamentos do modelo. E então esse texto, essa é a resposta real. Então, é como ser capaz de ler a mente de alguém, e isso é fascinante. Ok, agora, a IA diz que vai começar com um arquivo de índice. E a partir daqui, podemos garantir que a IA entendeu a tarefa. Ok, ótimas coisas. Agora, depois de mais alguns segundos, o arquivo de índice aparece em dois lugares. No lado esquerdo, podemos ver onde estão listados todos os arquivos daquela pasta que criamos anteriormente. Estava vazio. Agora ele tem um novo arquivo, um arquivo de índice dentro dele. Ok. E na parte central da tela, podemos ver o conteúdo desse arquivo. Mas o problema é o seguinte. 99% das vezes, você vai se concentrar no lado direito. Ok. Agora, a próxima tarefa é o CSS. Isso estilizará o código. Isso fará com que pareça melhor, por assim dizer. Agora, isso vai levar alguns segundos, mas observe que vou acelerar a gravação pois às vezes isso demora um pouco. Alguns minutos. Ok, agora vamos ver o que vem a seguir. Arquivo JavaScript. Ok, coisas do petróleo. Não precisamos acompanhar. Poderíamos simplesmente tomar uma xícara de chá, mas é uma boa ideia ver como o AA pensa e como funciona. Ok, certo. Podemos ver que temos algumas instruções. São para nós. Essas são coisas que devemos fazer para terminar o projeto. É como adicionar algumas imagens. Como não fornecemos nenhum, o site estará bem vazio, certo? E o formulário de contato realmente não funcionará porque não está conectado a nada. Mas está tudo bem, para o primeiro exercício. Vamos seguir em frente. E aqui estamos. A IA finalmente parou. Você pode ver que não está mais dizendo gerar, e temos um novo botão aqui que diz aceitar tudo. Então, vamos clicar nele. É assim que nos comprometemos. É assim que podemos salvar nosso progresso. Obviamente, poderíamos potencialmente ler esse resumo, mas, em resumo, ele diz que uma versão básica do site está pronta e que podemos iniciá-la usando o arquivo de índice. Ok, vamos voltar para a pasta e abrir esse arquivo. Vou usar o Firefox para abri-lo, mas você pode usar qualquer navegador. E vamos dar uma olhada. Aqui está nosso adorável site. Agora, é absolutamente lindo, lindo? Não, claro que não, mas demoramos alguns minutos e temos algo com que trabalhar. Como não fornecemos nenhuma imagem, a IA não baixará nada da web. Então, obviamente, o site parece um pouco vazio. Mas ele seguiu todas as instruções do arquivo de texto, e a IA disse que otimizou o design para uso móvel. Então, vamos clicar com o botão direito do mouse e escolher Inspec. No Firefox, o botão que estou procurando é esse aqui. Caso você simplesmente não consiga encontrá-lo, basta redimensionar seu navegador para o tamanho de um telefone celular Mas sim, isso também fica bem em um telefone . Sem surpresas aqui. Esse é o poder da codificação Vibe. Você pensa em algo, digita e, depois de pressionar Enter, em alguns minutos, você entende. Pode não ser perfeito, mas podemos construir sobre isso. Então, vamos realmente dar outro passo. Vamos mudar o esquema de cores. Digamos que esteja muito escuro para o meu gosto, certo? Então, vamos mudar para azul e branco. Vou dizer à IA que faça exatamente isso. Você tem que ser natural em seu idioma. Você não precisa usar nenhum termo técnico. A IA entende isso e começa a editar o arquivo CSS. Agora, pausa rápida. Quando você vê linhas vermelhas, isso significa que essas peças serão removidas. E nesse caso , são as cores antigas. E essas linhas esverdeadas, elas não são exatamente verdes, elas são esverdeadas, essas são as novas Então, tudo faz sentido. Quando terminar, vou clicar em Aceitar mais uma vez. A propósito, você vai ter que fazer isso constantemente. Agora, poderíamos potencialmente ler o resumo, mas vamos voltar ao navegador e atualizar. E, sim, agora é branco e azul. Ainda estamos no modo móvel, mas tudo bem. Podemos acessar o site e clicar com o botão direito do mouse. Escolha inspecionar novamente e, em seguida, teremos que clicar no mesmo botão de antes para voltar ao modo desktop Ou poderíamos simplesmente fechá-lo e abri-lo novamente. Mas sim, estamos bem. A IA nos deu um novo esquema de cores claras. Tudo é bom e limpo, nada muito especial. Mas sim, isso é muito legal. Vamos fazer uma etapa final. Vamos adicionar um mapa em vez de um endereço. Então, vamos ver como a IA gerencia isso. Como você está prestes a ver nessas lições, existem algumas limitações. A IA não pode implementar absolutamente tudo o que você possa imaginar. Mas um mapa, ele deveria ser capaz de fazer. Então, vamos dar uma olhada. Lembre-se de sempre clicar em Aceitar. E então, quando estiver dentro do navegador, você pode usar o ícone de atualização Você pode usar o atalho F cinco, ou o controle de teclas de atalho ou depende de você E sim, esse é um mapa totalmente funcional que você pode usar. Você pode ampliar, você pode diminuir o zoom. E isso é incrível. Isso é codificação Vibe. Você imagina, descreve, entende. E então tudo se resume a refiná-lo. Então, é mais como você imaginou. O que eu quero que você faça agora é criar sua própria versão, começando com meu arquivo de texto. Então, crie uma nova pasta no seu computador. Em seguida, vá para o cursor no menu superior e use Abrir pasta. É tão fácil quanto isso começar um novo projeto. Substitua meu nome no arquivo de texto, altere alguns detalhes e, em seguida, crie-o. Quando terminar, faça uma captura de tela de todo o design e publique-a para que eu possa ver Agora, antes de terminarmos, para algumas pessoas, isso pode não funcionar. O cursor pode apresentar vários erros e problemas. Pode parar de funcionar. Ele pode pedir que você instale coisas, e tudo bem. Faremos toda essa configuração em breve, e então você poderá voltar para esta palestra. Então, se você não tem um site, deixe um comentário para que eu saiba qual problema você está enfrentando e depois vá para a próxima palestra Não fique desapontado. Lembre-se, divirta-se com isso. 5. O que você pode construir com a codificação de vibração no Cursor: Chris, o que devo construir? Eu entendi. Eu sei que você pode não ser um empreendedor com talento, mas deixe-me ajudá-lo com algumas ideias rápidas Agora, antes disso, eu tenho que te dizer uma coisa importante. A execução é essencial. Ideias não valem nada. Eu vou dizer isso de novo. Tudo gira em torno da execução. Não é a qualidade da ideia. Vou expandir no, então vamos começar com este site. Em lovemg.com, certo? Este site reduz suas imagens. Se você já trabalhou com o Photoshop, por exemplo, sabe que às vezes ele oferece tamanhos de arquivo enormes, como dois, três, 5 megabytes, Agora, com essa plataforma, você arrasta e solta as imagens e pronto. Você reduz o tamanho deles em 80% sem perder a qualidade. E também pode ajudá-lo a redimensionar imagens rapidamente. Novamente, arraste, solte e pronto, certo? E você tem alguns outros recursos aqui. Mas o preço é de quatro a sete dólares por mês. Não é nada. Até eu me inscrevi. Então essa é uma ideia. E aqui está uma plataforma que transforma seu PDF em um arquivo Excel, para que seu contador tenha mais facilidade com ele É um super nicho, certo? É apenas para um grupo seleto de pessoas, mas isso rende 38.000 dólares por mês, $38.000 por mês Coisas malucas. E essa é outra que está indo muito bem. Isso renomeia todas as suas fotos e pronto. A coisa toda. Essa é toda a plataforma. Então, em vez de chamá-los de IMG 010203, ele lhes dá um nome próprio, o que é incrível para aqueles casos em que você sai férias e tem milhares de fotos espalhadas Novamente, esse é um serviço muito específico. Em seguida, vamos usar esse poly.com, que ajuda você a publicar e programar seu conteúdo em todos os seus canais de mídia social Essa plataforma tem uma única pessoa, um único cara por trás dela que está ganhando mais de $1 milhão por ano, dólares australianos, mas ainda assim, e agora ele é o Channel Se , vamos fazer uma pausa. Essas não são ideias incríveis. Eles não vêm de gênios dos negócios, certo? São pessoas comuns que tiveram uma ideia. Eles tinham um problema e resolveram esse problema. Eles executaram essa ideia e a fizeram bem. Talvez existam outras 50 plataformas como a Poly, por exemplo Então, mais caros, outros mais baratos. É por isso que eu disse que tudo gira em torno da execução. E meu conselho, concentre-se no lado do design. Pegue algo que já foi feito 100 vezes antes, adicione um design bonito, um pequeno toque e você terá um negócio Claro, você ainda precisa promovê-lo. Você precisa anunciar, mas essa é uma história diferente Agora, deixe-me continuar com alguns outros exemplos, algo um pouco mais acima. Então, aqui está a câmera básica, uma plataforma aparentemente complicada que se concentra em mensagens de uma coisa Basicamente, permite criar uma lista de tarefas de uma forma muito semelhante à noção. Obviamente, há muito mais nessas plataformas, muito mais recursos. Mas então você começa com uma ideia simples e depois expande, faz com que ela cresça. Por exemplo, crie um aplicativo que lembre você de se levantar da cadeira a cada hora, certo? Isso é um negócio. Isso é um serviço. Isso é um aplicativo, isso é uma plataforma. E essa pequena ideia pode lhe dar outra fonte de renda, como você monetiza, como você constrói uma audiência Isso é uma coisa diferente novamente. Isso além das pontuações. Mas prometo que existem inúmeras plataformas construídas em torno de uma ideia muito simples. Aqui está uma extensão do WordPress que simplesmente permite você insira postagens de mídia social em seu site. Super fáceis e eles ganham muito dinheiro, principalmente passivos, certo? Agora eu vi extensões pagas do WordPress que permitem adicionar uma barra com uma mensagem personalizada na parte superior ou inferior do seu site. É isso mesmo. Essa é a coisa toda. Essa é a conexão completa de toda a empresa. Então, o fato é que o céu é o limite. É tudo uma questão de resolver problemas, problemas que você sabe que lhe interessam, que você quer resolver por si mesmo. Ainda no WordPress, há um aplicativo que ajuda você a inserir o código do Google Analytics ou o rastreamento de anúncios do Facebook. E é tão fácil quanto isso. Não é nada muito complicado. Agora, um cara programou uma plataforma de horóscopo ao vivo no TikTok, e está indo muito, muito bem Hodoscópio, seja o que for. Isso não faz nenhum sentido. Não é para mim, mas talvez seja para você. Agora, outro cara criou um aplicativo de papel de parede, mas apenas para o tipo específico de anime. Você não precisa pegar o próximo Uber ou bater na porta. Você chega a um, cinco, dez mil por mês. Na verdade, você precisa resolver um problema para um pequeno nicho de pessoas. Mas digamos que você não tenha nenhuma dessas ideias, certo? Bem, fizemos o site do portfólio, certo? Por que não oferecer esse serviço a algumas empresas locais? Encontre 100 deles na sua região, na sua cidade, no seu país e peça $1.000 ou 80 dólares por mês E você acabou de fazer uma boa mudança. Existem outras plataformas que oferecem listas de todos os dentistas da sua cidade ou país de York Agora, o que importa é que você encontre a abordagem correta. Você envia um e-mail para eles? Você liga para eles? Você aparece na empresa? Você cobra $1.000 ou 800? E, claro, você não precisa fazer isso apenas com dentistas Pense em todas as outras empresas em sua área que ganham um bom dinheiro, mas elas têm sites horríveis Na minha parte do mundo, são restaurantes, advogados, lojas de serviços, veterinários. A lista é infinita. Eu tenho inúmeras agências de web design, é claro. Mas o seu pode ser diferente porque você pode se especializar em uma determinada área que talvez conheça muito bem Ou que você está prestes a aprender muito bem. Você oferece um bom site já codificado com pouca ou nenhuma manutenção É por isso que é uma corrida, porque mais e mais pessoas começarão a oferecer a mesma coisa, certo? Porque se você pode fazer um site em cinco, dez, 15, 20 minutos, claro, qual é o valor, certo? Você vai cobrar talvez 600 dólares? O próximo cara vai cobrar 400 e, de repente, a partir de $1.000, você começa a oferecê-lo por centavos Então, o tempo é essencial. É por isso que eu disse que vale a pena chegar cedo. Mas é claro que não há necessidade de entrar em pânico. Há mais do que o suficiente para que todos saiam por aí. Portanto, meu conselho, antes de criar qualquer coisa que queira vender, comece com alguns pequenos projetos divertidos. Agora, vamos fazer uma pausa Espero que agora você possa ver há um mundo de oportunidades, mas não precisa mirar em um negócio de $100.000.000 Basta resolver pequenos problemas, como transformar cantos quadrados de uma imagem em arredondados, certo? E que talvez você pague 100 dólares por mês. Parece bobagem, eu sei, mas as mídias sociais estão cheias de histórias como essa É chamado de construir em público e é uma ótima maneira de anunciar. Você publica constantemente sobre sua jornada. Esse edifício em movimento público é fantástico porque você pode realmente se inspirar em seus projetos e também pode aprender seus erros para evitá-los. Você vê os perfis, você pode ver que são apenas pessoas normais. Então é assim que você pode se inspirar. O cara que codificou o ply.com documentou cada etapa de sua jornada e como ele a desenvolveu ao longo de muitos Ele estava totalmente sozinho. Ele programou tudo, à moda antiga. Ele foi o único desenvolvedor. Mas agora talvez você esteja sozinho, mas tenha o conhecimento e o poder de 100, 1.000 desenvolvedores qualificados, à sua disposição por 15, 20, 25 dólares por mês, certo? Portanto, você não levará anos para construir seu projeto. Você pode falhar em marketing, mas pode fazer isso outra vez outra vez e outra vez. Você pode tentar novamente. Você pode falhar rápido, você pode aprender. E então, em um ponto, você terá sucesso. Seja grande ou pequeno, depende de você. Está em suas mãos. Mas sim, agora a questão é: o que você quer construir? Pode ser bobagem. Pode ser pequeno. Mas se você continuar tentando e aprendendo, eu prometo que você vai ter resultados. 6. Navegando no cursor: Bem vindo de volta. Vamos acionar o cursor para que possamos explorar a interface. Isso pode mudar do seu lado, mas o básico sempre estará aqui Como não temos nenhum projeto aberto, a interface é bem básica. Podemos abrir um projeto existente ou lançar um novo abrindo uma pasta totalmente nova, uma pasta vazia, ou podemos usar o Github para iniciar um Mas vamos manter as coisas simples e vamos criar uma nova pasta em qualquer lugar do nosso computador e, em seguida, vamos abri-la no cursor. Agora, mesmo com um projeto vazio, a interface, para ser justo, não muda muito, mas vemos algumas áreas importantes. No lado esquerdo, podemos ver todos os arquivos dessa pasta específica. No momento, está totalmente vazio. Acabamos de fazer isso. Mas vamos fazer isso. Vamos adicionar um arquivo de texto aleatório dentro dessa pasta. Agora, poderíamos fazer isso diretamente do cursor, mas vamos fazer isso à moda antiga Portanto, qualquer arquivo de texto aleatório deve aparecer aqui. Se você não o vê, você tem um ícone de atualização se mover o mouse nessa área E depois de clicar nele, você pode usar a parte perfumada da tela para editar esse arquivo Mas a chave para a codificação Vibe está aqui neste painel. É aqui que você fala com a IA. Caso você não consiga ver, use a tecla de atalho Control L, mas, por padrão, você deve vê-la. Mas sim, Controle L. Vamos voltar a este painel em um momento. Por enquanto, vamos ao menu superior do terminal. Nessa lista, escolha um novo terminal, e isso abrirá um painel na parte inferior. Aqui vamos ver várias guias, mas com interesse apenas no terminal Agora, de tempos em tempos, essa área pode nos mostrar vários problemas, erros. Isso nos mostrará algum progresso, e talvez tenhamos que pagar alguns comandos ou simplesmente pressionar Enter. Mas sim, para resumir, para recapitular, 90% das vezes, você vai olhar aqui neste painel direito, e talvez 10% das vezes, você vai dar uma olhada no terminal na parte inferior Porém, na maioria dos casos, até mesmo o terminal aparecerá aqui no lado direito. Agora, o resto realmente não importa muito. Caso a interface seja muito pequena, você pode usar o controle de hóquei plus para torná-la maior Isso deve ajudá-lo a ver tudo sem nenhum esforço. Então isso é Control plus. Se você quiser diminuí-lo, use o oposto, Controle menos Ok, ótimas coisas. Mesmo assim, essa interface escura pode incomodá-lo Então, veja como você pode mudar isso. Vá para o menu superior para arquivar. A partir daqui, vá até as preferências. Em seguida, procure por Team. E, finalmente, aqui, clique em Equipe de cores. Agora, depois de clicar em qualquer uma dessas opções, a janela será fechada, que não é o ideal, mas abra-a novamente, arquive a equipe de referências, pinte-as e escolha qualquer uma delas. Depende de você, mas eu realmente gosto dos mais escuros. Ok, agora vamos nos concentrar na interface da interface de bate-papo. A primeira coisa que você precisa saber é que, para a codificação do Vibe, sempre queremos configurá-la como agente Os outros modos são para desenvolvedores com muita experiência que desejam usar a IA para melhorar a escrita do código, torná-la melhor ajudá-los a escrever código. Mas não queremos fazer isso. É por isso que vamos configurá-lo como agente, o que significa simplesmente que a IA fará maior parte do trabalho. Em seguida, no topo Você pode referenciar um arquivo de dentro do projeto, basicamente direcionando a IA para ele. Agora, só para ficar claro, a IA mudará todos os arquivos que estão dentro da pasta do projeto. Pode funcionar em qualquer um deles. É assim que você basicamente mantém as coisas separadas. Se você quiser iniciar um novo projeto, crie outra pasta vazia em um local diferente no seu computador e acesse o menu superior para abrir a pasta. Então é assim que você mantém as coisas separadas. É como tudo. Quando você instala jogos, programas, quando copia imagens de férias, tudo deve estar bem organizado em pastas apropriadas Então é assim que você muda de um projeto para outro. Você basicamente vai para a pasta File Open, certo? Ou outra abordagem que é basicamente a mesma coisa. Você pode ir ao menu superior para arquivar e, a partir daqui, escolher uma nova janela. E, basicamente, você pode abrir uma pasta, e é basicamente a mesma coisa. Agora você pode arrastar imagens para o bate-papo. É por isso que você tem esse ícone aqui. Você pode clicar nele ou arrastar e soltar. Mas vamos fazer isso mais tarde. Como eu já disse, você também pode referenciar determinados arquivos se quiser que a IA se concentre neles. No momento, você pode ver que o documento de texto é mostrado aqui, e isso está dizendo à IA que você queria prestar mais atenção a ele. Você pode passar por cima e clicar no símbolo X para removê-lo. Vamos conversar sobre isso mais tarde. A configuração final importante aqui é a parte em que você escolhe seu modelo. Isso mudará drasticamente seus resultados. Vamos falar sobre modelos na próxima palestra. Por enquanto, altere a interface para uma nova equipe, aumente o tamanho usando Control plus e crie uma nova foto no seu computador e abra-a no cursor para se acostumar com esse fluxo. Ok, eu vou te ver em um segundo. 7. Obter melhores resultados com essas ferramentas: Volte. Desenvolva algumas ferramentas que você possa instalar no seu computador, para que o cursor possa fazer um trabalho melhor, especialmente se você quiser fazer o mínimo de trabalho possível, e é isso que queremos fazer. Agora, não vamos dar controle total à IA. Em vez disso, vamos instalar um software muito conhecido que ajudará o cursor a funcionar melhor. Então, primeiro de tudo, temos que instalar o Python. A propósito, você tem um arquivo anexado ao curso, então não se preocupe com isso. Você tem todos os links, não precisa anotá-los. Por favor, trabalhe junto em sua segunda visualização. Ok, este é o site oficial e, no meu caso, clicaremos na versão mais recente do Python para Windows Nesta nova página, teremos que rolar para baixo e, na seção de arquivos, encontraremos o link para download. Claro. Faça algumas escolhas, mas é o seguinte. Procure o rótulo recomendado. Isso facilita as coisas. Então, vamos baixá-lo e instalá-lo. Agora, há uma coisa importante aqui, essa segunda caixa de seleção aqui Agora, não vou entrar em detalhes porque isso realmente nos desviaria Então, basta marcar essas duas caixas e estaremos prontos para começar. Demora um pouco, mas não há nada de especial acontecendo. Às vezes, o Python não é instalado corretamente, e eu tenho uma palestra sobre Agora, para verificar se sua instalação está boa, clique no menu Iniciar e digite CND CMD é a abreviação de comando. Novamente, você tem tudo isso anexado e também tem algo para usuários de Mac. Agora, isso é o que eu quero que você digite aqui no prompt de comando. E se você ver algo assim, você está pronto para ir. Provavelmente, você terá uma versão mais recente, mas tudo bem Enquanto não houver avisos, você ficará bem Agora, caso você não consiga gerenciar, você pode fazer o seguinte. Você pode ir até o cursor no menu superior do terminal. Aqui, pare o novo, e você poderá vê-lo aqui mesmo. Digite a mesma coisa, P e Y, e você verá se funciona. Do meu lado, está tudo bem. Agora, antes de continuarmos, devo dizer que não vou explicar cada peça de software porque é contraproducente Em vez disso, vou anexar um arquivo com alguns detalhes sobre cada programa, mas eles são muito conhecidos e não há nada com que se preocupar . Eles vão ficar bem. Então, novamente, vou me concentrar em coisas práticas. Para mim, o objetivo é bem simples. Crie sites o mais rápido possível. Aprender sobre Python agora não vai ajudar muito. Isso vai fazer sua cabeça girar. Então, vamos manter isso curto. Então, o Python é retirado da lista. Idealmente, você reiniciaria o computador, mas aqui vou continuar, mesmo que isso possa causar alguns problemas. Em seguida na minha lista, a versão Node JS LTS. Isso é essencial e realmente vai nos ajudar. Agora, durante o processo de instalação, ele pode perguntar se você deseja instalar algumas outras ferramentas. Queremos ter certeza de que marcamos essa opção. Nós queremos isso. Então, isso vai te mostrar outra janela com muito texto, e eu quero dizer muito. Ele não nos pede nada, mas talvez você precise esperar alguns minutos enquanto ele faz seu trabalho. Vou acelerar a gravação, mas, por favor , tenha paciência. Uma coisa engraçada, porém, do meu lado, diz que não consegue realmente encontrar o Python, mesmo estando 100% instalado Agora, uma reinicialização poderia ter resolvido esse problema. Mas sim, eu sei que está instalado, então não é grande coisa. O fato é que, depois de um tempo, esse processo de instalação simplesmente pára. Mas o problema é o seguinte. Abra outro prompt de comando, CMD, e digite o seguinte nó e, em seguida, a versão Lembre-se de que você não precisa memorizar esses comandos. Eles estão todos conectados. Ok, sim, você pode ver minha versão aqui, estamos prontos para ir. O próximo na minha lista, Power Shell 7. Estamos na Microsoft Store oficial e isso nos diz que há muitas maneiras de instalá-la. Pode parecer um pouco avassalador, mas na verdade é bem simples Vamos usar esse método quando este for o método recomendado, então é por isso que vamos usá-lo. Aqui, existem apenas duas etapas. Esse é o primeiro. Você abre o prompt de comando, clica aqui para copiar esse texto e depois cola. Você receberá uma pergunta aqui, digite Y como em sim e, em seguida, pressione Enter e verá que há duas versões disponíveis. Agora, pré-visualizar significa simplesmente que é como uma versão beta, algo que geralmente é menos estável, experimental. Então, não vamos fazer isso. Nós vamos escolher aquele, o primeiro. OK. Agora, para instalá-lo, copie esse comando. Novamente, não a versão prévia que está um pouco mais abaixo, esta aqui, e depois cole no prompt de comando e pressione Enter. E, claro, depois de alguns segundos, isso vai ser instalado. Ok, teste rápido o FDwardt, abra o menu Iniciar e digite É rápido, mas com W, e você deve ver o Power Shell sete disponível. Ok, estamos indo muito bem. Vamos continuar com o GitHub. Precisamos criar uma conta. Mas, como com todo o resto, é totalmente gratuito. Então você tem que inserir seu endereço de e-mail, e então você tem que verificá-lo. Mas sim, depois disso, você está muito pronto para ir. Github é muito necessário, embora possa ser bastante intimidante Como você está prestes a ver, vamos nos concentrar no essencial e, em breve, você se sentirá confortável com isso Ok, ótimas coisas. Em seguida, vamos instalar o Docker. Isso pode ser opcional. Pode ser considerado opcional, mas tive alguns problemas porque não o instalamos, então prefiro instalá-lo e terminar com ele. Este é um dos programas mais lentos que existem. É totalmente gratuito. Não há muita coisa que você precise fazer, mas é bem lento. Então você tem que ser paciente com isso. Depois de pronto, e novamente, por favor, seja paciente. Você precisará criar uma conta. Mas o fato é que já temos uma conta no GitHub, certo? Então, em vez de enviar um e-mail e se registrar à moda antiga, por que não usar a conta do GitHub É muito mais rápido. Então clique no ícone. Esse é o ícone do GitHub, e então você vai ficar dourado OK. Há algumas outras coisas aqui. Mas enquanto trabalho em segundo plano, deixe-me explicar o que está acontecendo. Então, estamos prestes a cozinhar muitos pratos na cozinha. Vamos preparar café da manhã, almoço e jantar. Vamos fazer sobremesas. Vamos fazer lanches. Vamos fazer refeições completas, muitas variações, certo? Então, isso significa que precisamos ter uma geladeira e utensílios totalmente abastecidos Precisamos de ingredientes. Precisamos de facas, garfos, colheres, tudo bem Isso é o que estamos fazendo agora. Agora, vamos usar absolutamente tudo em cada prato? Não, algumas ferramentas são específicas apenas para determinados projetos, mas é muito mais fácil preparar tudo agora do que tentar encontrá-las enquanto você cozinha. Isso vai ser horrível. Essa é uma experiência ruim. Veja, quando você tem um problema após o outro no cursor, porque está faltando isso ou aquilo, você vai perder tempo. Você vai desperdiçar energia e, claro, créditos, o que basicamente significa dinheiro. É por isso que eu sugiro fortemente que você instale tudo agora. Você faz uma pausa com frequência, chega à largura e depois vai voar Ok, coisas boas. Em seguida, vamos instalar algo chamado Git para Windows Agora, esse programa terá muitas configurações, muitas caixas de seleção Mas o que vamos fazer é usar os valores padrão em cada etapa. Agora, você poderia fazer uma pausa, mas simplesmente aceitar tudo como está configurado , pois o cursor gerenciará tudo Então, basta clicar em Avançar e estará pronto. Agora eu percebo que isso não é muito confortável, mas isso vai fazer com que a IA funcione muito melhor, muito mais rápido, e não vai nos incomodar a cada passo Não vai pedir que confirmemos as coisas. Não vai pedir que façamos coisas. Agora, quando criarmos vários projetos no cursor, todos esses programas e contas serão úteis. É por isso que os instalamos agora. Fique comigo, estamos quase terminando. Ok, Fast Food web e temos apenas algumas contas para fazer. Mas isso é um instante. É só mais ou menos um clique. O VerSL é o primeiro. Vamos usá-lo para hospedar nossos sites para que todos possam vê-los. Novamente, isso é totalmente gratuito por enquanto, então não se preocupe com isso. Inscreva-se usando o Github para simplificar o processo. Obviamente, faça uma pausa quantas vezes precisar e revise o arquivo anexado Então isso é VerSL. Em seguida, usaremos uma plataforma chamada resend.com para enviar e-mails Isso é totalmente gratuito para até 3.000 e-mails por mês. Então, isso é incrível para começar. Lembre-se de que criamos nosso site de portfólio, mas a IA nos disse que o formulário não funcionaria porque não está conectado a nada. Bem, reenviar corrige isso. Coisas boas. E uma conta final é a Super Base, que é fantástica para bancos de dados, para projetos complexos que podemos fazer mais tarde no curso. Isso é muito necessário, mas, novamente, mais tarde. No entanto, basta um clique, então por que não tirá-lo do caminho Mas, sim, acredite ou não, acabamos com essas ferramentas. Existem algumas outras configurações no cursor, mas faremos isso depois que você se atualizar. Por enquanto, faça uma pausa, instale tudo, revise o anexo e só continue depois de ler a lista de verificação Lembre-se, seja paciente e instale tudo. Obrigado. 8. Configure MCPs e regras no Cursor: a maneira fácil: Volte. Instalamos algumas coisas, como Python, sem JS e Power Shell, mas também podemos fazer algumas coisas com o cursor A primeira são as regras. E você pode acessar essa seção focando no lado superior direito do cursor. Clique aqui neste ícone de engrenagem para abrir as configurações do cursor. Você o verá aberto aqui e há algumas coisas para escolher. Vamos começar com as regras. Então, aqui, há duas opções principais. São as regras do usuário e as regras do projeto. Estamos interessados no primeiro. Você tem um arquivo anexado chamado exatamente assim. Tudo o que você precisa fazer é espaçar o conteúdo dentro do Cursor. Resumindo, isso diz ao cursor como ele deve agir. É como dizer a alguém o quanto gostamos do nosso café, e são coisas bem básicas. Queremos que o cursor seja eficiente. Queríamos usar as melhores práticas. Queremos que seja seguro e oculte informações confidenciais, e assim por diante. Você pode encontrar modelos de regras na web ou simplesmente usar os meus. Eu também o comprei na web. Escolhemos as regras do usuário porque queremos que o cursor as aplique a cada projeto. Agora, por outro lado, as regras do projeto seriam específicas para esse único projeto Por exemplo, vamos imaginar que mudamos para um projeto de aplicativo móvel no IOS, certo. Podemos ter requisitos diferentes, certo, regras diferentes. Mas como vamos nos concentrar no trabalho de web design neste curso, queremos simplificar , então é muito fácil colar essas regras e pronto. Queremos que eles sejam aplicados em todos os lugares. No próximo cursor, clicaremos em MCPs. Não vou me debruçar sobre as coisas técnicas. É bem simples. Isso vai nos ajudar bastante. Agora, o problema é o seguinte. Resumindo, isso dará à IA mais controle. Se não usarmos esses MCPs, teríamos que trabalhar mais Teríamos que escrever mais código. Teríamos que digitar mais comandos e mover coisas. Isso não é ótimo. Por exemplo, teremos um MCP do Github. Isso permitirá que a IA crie um novo projeto sozinha. Isso permitirá que ele envie tudo automaticamente. Basicamente, faça tudo sozinho sem que precisemos seguir certas instruções. Eu odeio quando a IA me diz o que eu tenho que fazer. Então, os MCPs são fantásticos. E uma vez configurados, a IA os usará conforme necessário. Essas são basicamente ferramentas para a IA, caso ela precise delas. Agora, no momento, essa interface não é amigável para iniciantes, mas eu vou ajudá-lo. Você tem um arquivo anexado que você simplesmente precisa copiar e colar e depois substituir algumas chaves. Este é o arquivo, e aqui estão as coisas que você precisa substituir. Em primeiro lugar, deixe-me mostrar como remover ou adicionar um, caso você queira adicionar um MCP ou remover um MCP Você seleciona o arquivo inteiro, Controle A, depois o copia, Controle C. Em seguida, você abre chagpt.com Você não precisa de uma conta, você pode usá-la totalmente de graça. Em seguida, você diz algo como remover o Super Base MCP desse código e simplesmente colá-lo Você tinha entrado, e isso vai ser isso. O Chad GPT fornecerá o código atualizado, para que você não precise se preocupar abrir e fechar colchetes ou qualquer E é a mesma coisa se você quiser adicionar algo. Então, sim, é assim que você faz. Vou manter minha lista original, e é isso que eu recomendo que você faça também. Então, com o arquivo de texto original que você anexou, volte para Cursor, para MCP e clique em Adicionar Tenho certeza de que essa interface mudará no futuro. Vai ser mais amigável para iniciantes. Mas, por enquanto, é o que é. Ok, depois de colar, você precisa trocar de guia. Você precisa voltar às configurações do cursor. Aqui, você encontrará uma lista de todos os MCPs que estão configurados Verde significa que eles estão prontos para ir. Qualquer outra coisa não é ideal. Caso você tenha problemas com alguns deles, continue assistindo. Eu vou te mostrar como você pode consertá-los. Agora, há um limite para quantos MCPs você pode instalar. Há um limite para quantas ferramentas eles podem usar. Agora, eles são tão bons que você pode querer adicionar toneladas deles, mas mais de 40 ferramentas no total não são suficientes, pelo menos por enquanto Agora, você pode dizer: Ei, Chris, mas são apenas algumas entradas aqui. Temos o Github. Temos memória, pensamento sequencial Não são 40 itens. Você está correto, mas são ferramentas, não itens. Veja, todo MCP tem todas essas ferramentas. Esse é o limite real. 40 ferramentas no total. Só o Github tem mais de 20, mas é tão útil que vamos mantê-lo Apenas algumas palavras sobre eles, porém, só para ficar um pouco claro. Pensamento sequencial, isso ajudará a IA a dividir a tarefa em partes menores Isso ajudará a rastreá-los, aqueles pedaços menores , e nos dará um resultado muito melhor. Basicamente, está ajudando a IA a não perder o foco. Ele vai acompanhar tudo. É basicamente uma lista de verificação. Ou o sistema de arquivos MCP. Isso permitirá que a IA crie pastas, mova arquivos, recorte, exclua e assim por diante. Isso é fundamental porque alguns projetos terão muitos e muitos arquivos e pastas, e você realmente não quer vasculhá-los. Você não quer movê-los sozinho. Deixar a IA fazer isso por você é totalmente incrível. Mas vamos inserir suas chaves porque, novamente, você precisa conectar algumas delas às suas chaves pessoais. Então, deixe-me mostrar como isso funciona, começando com o GitHub. Agora, você pode usar o Google e procurar token de acesso pessoal do GitHub Ou você pode fazer isso. Você pode voltar ao seu navegador para github.com A partir daí, você pode acessar as configurações da conta e, a partir daqui, no lado esquerdo, na parte inferior, você verá as configurações do desenvolvedor. E nessa nova janela, você verá exatamente o token de acesso pessoal que queremos . Queremos o clássico. Muito criativo, mas esteja ciente que você precisará configurar um nome, uma data de validade. 90 dias é o que eu recomendo. E então você terá que marcar absolutamente tudo. É um monte de cliques. Eu sei que você está cansado dessas configurações, mas eu prometo que isso vai tornar nossas vidas muito mais fáceis. Mas sim, quando estiver pronto, você terá a chave, colará e pronto. Certifique-se de sempre escondê-lo. Ele só será exibido uma vez para fins de segurança. Pense nisso como o número do seu cartão de crédito. Agora, para a super Base, é muito mais fácil, nada muito complicado. Mas deixe-me dizer isso para que fique super claro. Nunca vou te mostrar as chaves para ninguém. É como mostrar o número do seu cartão de crédito na Internet. Não é uma boa ideia. Você tem que mantê-lo seguro. Você não tem que mostrar isso para mais ninguém. É por isso que a maioria das plataformas só mostra sua chave uma vez. Se você perder, você vai ter que fazer outro. Não custa nada criar uma nova chave, mas não é uma boa ideia ter 15 chaves aleatoriamente em sua conta, sem saber qual é qual Então, mantenha-o seguro , cole e pronto. Agora, basicamente terminamos. Você pode fazer uma pausa Você pode configurar tudo sozinho e se certificar de que está atualizado. Se você tiver algum problema, não se preocupe. No próximo vídeo, mostrarei como podemos consertá-los. Portanto, tenha isso em mente. Por enquanto, vá em frente e comece a trabalhar. Obrigada. 9. Como corrigir problemas: Volte. Os problemas estão prestes a surgir e, o mais frustrante , pode ser qualquer coisa Você terá problemas específicos do seu computador, seu sistema operacional e do seu projeto. Por exemplo, se você tem um antivírus, pode ter dificuldades por dias e nenhum tutorial pode ajudar. É por isso que quero mostrar como aprendi a lidar com esses casos, como fiz isso sozinho. Por exemplo, digamos que o servidor Git MCP não funcione e diga que é devido ao Python Agora, instalamos o Python e parecia bom, certo Então, copiei o erro e usei o Google Encontrei algumas coisas no stack overflow, que é uma plataforma para desenvolvedores Eu tentei soluções diferentes, mas nenhuma delas funcionou. Agora, para ficar claro, eu não sou um desenvolvedor. Não tenho ideia de qual é o problema. Agora, a forma como você lida com essas situações, esses problemas, determinará seu nível de sucesso. Então, repito, você seguirá as instruções, seja deste curso ou da web, mas as coisas não funcionarão. E a forma como você consegue lidar com isso determinará seu sucesso. Aqui, tentei algumas coisas e depois mudei para chatgpt.com Você pode usá-lo gratuitamente ou se inscrever. Eu recomendo que você se inscreva, mesmo que seja outra assinatura. Usei esse modelo, que é muito bom para raciocinar, e contei exatamente o que está acontecendo Ei, estou usando o cursor AI e estou tendo esse problema. A primeira solução que ele me deu parecia um pouco complicada demais para o meu gosto, então eu simplesmente a pulei Acabei de passar para o segundo. Aqui, eu não tinha ideia do que isso significava, mas acabei de começar a colar no CMD, e foi isso, sabe A primeira linha não pareceu ajudar. Então eu passei para o próximo. E aqui está a coisa. Depois de alguns segundos, ele instalou algo e tive a sensação de que funcionou. Então eu voltei para o programa. Eu me refresquei e, no entanto, estava tudo bem. Não tenho ideia do porquê, mas essa foi a solução. Agora, essa foi uma única situação. Aqui está um caso diferente em um computador diferente, o G MCP não funciona, mas por um motivo diferente Não sei por que, e quero ser totalmente transparente. Não pretendo aprender essas coisas. Em vez disso, vou usar o mesmo método de antes. Vou perguntar ao GPT sobre isso. De preferência OT, porque OT é o modelo de raciocínio mais avançado, por isso é muito bom em lógica e codificação Mas se você não tiver acesso ao GPT para conversar com o GPT, poderá usar a janela de bate-papo no cursor e provavelmente obterá um resultado semelhante Agora, aqui no Chat GPT, eu contei o que está acontecendo e, após cerca de 90 segundos, ele me deu um plano passo a passo Então, primeiro de tudo, eu tenho que instalar algo usando o PowerShell, e aqui está o comando exato Ok, acho que é bastante simples. Vou usar o menu Iniciar. Vou digitar push, mas com W ou simplesmente Power Shell. E então, dentro do Power Shell, vou copiar, colar esse comando e pressionar Enter. E, novamente, parece que está instalando algo. Eu realmente não tenho certeza do que. Está fazendo várias coisas. Mas, sim, acho que é bom ir. Agora, para a próxima etapa, ele me deu um comando diferente, mas insiste que eu abra um novo terminal Ok, vou digitar push novamente e depois vou colar isso. Claro, isso levanta um problema. Eu copiei duas linhas diferentes, o que não é o ideal. Deve ser um por um, mas não importa, vou colá-lo de qualquer maneira. E sim, eu acho que isso é realmente bom. Ok, agora temos que reiniciar o programa. Não vamos pular isso. Estou feliz por não precisar reiniciar o computador. Agora, teremos que esperar pelo segundo. Mas sim, depois de carregado, você pode apertar o botão de atualização do lado direito e, basicamente, essa é a vitória, sem mais erros Isso é ótimo. Agora, para ser justo, este é um programa diferente do cursor. É por isso que parece um pouco diferente. Mas a questão ainda permanece. Do seu lado, você terá outros problemas. Mas lembre-se de uma coisa. Depois de resolvê-los, você estará pronto para que eles não apareçam novamente. O crucial é que você tenha que manter a calma. Essa é a essência da codificação Vibe. Você não precisa saber programar, mas precisa A, ter paciência. B, faça as perguntas certas e veja a coisa mais importante, experimente as coisas até que funcionem. Agora, o problema é o seguinte. Temos chat GPT, mas também temos cursor que usa chat GPT, certo Bem, GPT 4.1. Por que não usar o cursor, certo? Porque, basicamente, estou tentando proteger meus créditos. Em vez de usar um crédito, prefiro usar chagpt.com, onde tenho uma assinatura separada e posso fazer quantas perguntas quiser, sem limitações É por isso que eu prefiro usar chgpt.com e tenho uma assinatura porque são basicamente perguntas ilimitadas, enquanto no cursor, cada conversa, vez que você clica, um crédito cai É por isso que estou fazendo assim. Mas sim, isso encerra tudo. Você está fadado a ter dores de cabeça. Isso acontece. Nos tutoriais, é sempre A, B, C e sucesso, certo Mas, no seu caso, você pode passar horas na etapa B da segunda etapa, ficar preso e não conseguir continuar. Contanto que você mantenha meu conselho em mente, os pacientes façam as perguntas certas e tentem coisas até que funcionem, você ficará bem. Lembre-se de que esse é o preço a pagar por chegar tão cedo, mas temos tantas vantagens que, no geral, é um negócio fantástico. E com isso, vamos continuar. 10. Claude x Gemini x GPT: Volte. LLMs são grandes modelos de linguagem e são a principal coisa que o cursor usa Então, toda a inteligência vem por meio desses LLMs, que a maioria das pessoas chama de modelos Isso é o que usaremos também. Os modelos AI LLMs fizeram a mesma coisa. Então, só para ficar claro, o cursor é o programa principal, mas a maior parte de sua inteligência vem desses modelos que vêm de empresas diferentes. O cursor é um tubo onde os modelos são a água. Agora, a água poderia fluir sem nenhum cano? Claro, mas a água estaria espalhada por todo o lado, certo? O cursor garante que você obtenha mais do que deseja, é por isso que o estamos usando. Caso contrário, poderíamos simplesmente nos inscrever uma empresa específica e usar seus modelos, mas isso seria muito mais limitante e substancialmente mais caro, especialmente se você quiser usar várias empresas e vários Agora, é por isso que o cursor é uma escolha muito melhor. Ao fazer o cursor, você tem acesso à maioria das empresas e à maioria dos modelos disponíveis. É por isso que, ao clicar aqui, você pode escolher entre vários deles. Na verdade, há muito mais. Você precisa carregá-los, esses são os principais e, em resumo, esses são os recomendados. Agora, a pergunta chave, a pergunta de um milhão de dólares, qual delas você deve usar, certo? A resposta curta é: realmente depende. Então, aqui está o que vamos fazer. Vamos compará-los. Vou dar aos melhores a mesma tarefa para que possamos comparar os resultados. Você tem a tarefa anexada, então você fará a mesma coisa em sua segunda visualização. Por enquanto, basta olhar e ver o que está acontecendo. Agora, uma coisa: os modelos mudam com frequência. Então, o que é lento hoje pode ser bem rápido amanhã. Então, isso é algo que você deve conhecer. As coisas mudam constantemente. Agora, vou usar um plano Pro, então terei acesso ao modelo Cloud Four mais recente. Mas se você estiver usando o plano gratuito, precisará usar o modelo 3.5. Mas, como você está prestes a ver, isso não é realmente um problema, porque nosso objetivo é ter uma ideia desses modelos testando-os. Então, realmente não importa o que você usa agora. Agora, para resumir, eu já fiz três pastas vazias no meu computador. Os nomes realmente não importam, mas eu queria rotulá-los claramente para que você soubesse o que é o quê. Para torná-lo um pouco mais interessante, anexei algumas imagens ao curso. Agora, espero que os modelos possam usá-los. Para que isso aconteça, vou copiar essa pasta dentro do local do projeto Cloud four. Essa é a primeira. Então, isso deve ajudar a modelo a criar um site mais bonito, certo? Agora vou te mostrar a tarefa em um segundo. Mas primeiro, temos que ajudar o modelo apontando as imagens para dizer ao modelo que elas estão lá. Gosto de dar instruções claras. Use as imagens dessa pasta e, em seguida, adicione o caminho, a localização exata das imagens. Agora, para obter o caminho, entre nessa pasta e clique nessa área, e você verá algo parecido com isso. É isso que precisamos colar dentro do arquivo de texto. Ok, novamente, certifique-se de trabalhar junto com sua segunda visualização e faça uma pausa quantas vezes precisar Ok, o prompt está pronto e agora podemos copiá-lo. De volta ao cursor, não há nenhum projeto carregado, então vamos escolher a pasta aberta. Agora teremos que navegar pelo nosso computador e encontrar esse local, mas isso não é nada especial. Depois que a interface estiver carregada, receba um prompt e cole-o no bate-papo. Certifique-se de selecionar Cloud four ou Cloud 3.5 se você estiver no modo de teste. Ok, agora vou tornar minha interface um pouco maior para facilitar o acompanhamento. Ok, vamos. Agora, imediatamente, o coágulo 4 está planejando muitos movimentos. Eu pausei a gravação porque, como você pode ver, existem algumas etapas aqui Agora, lembre-se de que texto apagado significa ver o que a modelo está pensando, mas ela ainda não respondeu. Depois do segundo, ele reconhece a tarefa. Ele entende isso e diz que vai criar um lindo site. Em seguida, diz que vai usar HTML cinco, CSS três e JavaScript Vanilla. Ok, isso é bastante importante porque, se soubermos o que o modelo usa, podemos potencialmente corrigir qualquer problema com muito mais facilidade. Sabemos o que procurar no Google, certo? E agora ele começou a criar o arquivo de índice. Agora, o que eu quero dizer mais uma vez é que você tem que ser paciente. Vou alterar a velocidade da gravação de tempos em tempos para que não esperemos muito. Na verdade, acho que ter um cronômetro em algum canto pode ser uma boa ideia Então, deixe-me acrescentar isso. Essa é uma forma de comparar esses modelos. Ok, o arquivo de índice é carregado e o arquivo CSS é o próximo. Agora, o arquivo CSS determina o estilo do projeto, a aparência. Parece que Claude quer usar o esquema de cores vermelho, rosa e azul escuro, junto com uma fonte específica chamada Fredoca Então, surgiu esse tipo de letra específico. Interessante Bem, isso está demorando um pouco. Se você verificar os arquivos, na verdade verá centenas de linhas de código. Então eu acho que o peso é garantido. Não se apresse, certo? Claude não hesita, mas leva um pouco de tempo para escrever todo o código. Uma característica de codorna Claude está criando um arquivo leia-me. Isso é útil, e eu agradeço que o modelo faça isso. Obviamente, temos que compará-lo com outros modelos para ver o que é o quê. Mas, sim, no geral, até agora, coisas boas. E sim, finalmente está pronto. Então, vamos aceitar tudo e dar uma olhada. Então, cerca de 3,5 minutos ou mais no total. E o site, o site parece bom. Na verdade, isso é melhor do que bom. Gosto do gradiente no menu principal, da fonte volumosa. Isso é muito lindo. Todo o esquema de cores está realmente correto, mas devo dizer que estou um pouco decepcionado com o mapa Não adicionou um funcional. Temos que nos inscrever e dar uma chave para que funcione. OK. Mas, além disso, a área do boletim informativo é sólida, o rodapé parece incrível Esse é um ótimo resultado em apenas alguns minutos. Dê uma olhada também na versão móvel. É uma boa coisa para verificar. Em alguns casos, pode haver problemas de alinhamento de vários problemas E aqui, surpreendentemente, veja alguns desses problemas. Nossa, isso é chocante. Portanto, a navegação superior é fixa, o que é uma ótima ideia, certeza, mas na verdade está cobrindo o título principal Isso é muito surpreendente. E na parte central da área do herói, eu realmente não posso dizer que estou apaixonada por esse layout. Texto à esquerda, foto à direita e, em seguida, esse botão está bem separado na parte inferior. Está muito longe. Porém, para ser justo, a manchete também está bem distante. Uh, essa é a área mais importante, e eu não acho que seja boa o suficiente. E também há algo a ser dito sobre o feed do Instagram. Não está correto. Claro, é uma tarefa um pouco complicada É um desafio, mas o problema é o seguinte. Para o mapa, dizia que precisávamos de uma chave e nos deu algumas instruções. Ok, legal. Mas para o feed do Instagram, ele acabou de criar um baseado nas minhas fotos. Isso não é ótimo porque pode nos confundir. É um pouco enganador. Se não conseguir fazer funcionar, se não conseguir implementá-lo, ok, basta dizer isso, certo? Isso é muito perigoso para a codificação do Vibe , porque podemos observar algo e supor: Ok, está funcionando quando, na verdade, não está Então, isso é meio que uma bandeira vermelha. Temos que continuar com nossa comparação, e então poderemos ter uma ideia melhor sobre o coágulo quatro. Mas, sim, isso é bem interessante. Mas agora, por favor, não trabalhe, continue com a próxima lição, e então será a sua vez. Eu vou te ver em um segundo. 11. Claude x Gemini x GPT — parte 2: Volte. Vimos como Claude Four fez altos e baixos, mas temos que compará-lo com alguma coisa, para termos uma melhor noção desses Então, vamos trabalhar com o Gemini do Google. Então, comece colando as imagens dentro dessa pasta e adicione esse local ao arquivo de texto. Isso é muito importante. Agora, você logo se acostumará com essa abordagem em que constantemente cria novos projetos, cria uma nova pasta, depois a abre, se as configurações estão corretas e depois parte para as corridas. Ok, então o Gemini é um produto do Google, e muitas pessoas têm grandes esperanças nele Vamos ver como isso funciona no nosso caso. Agora, a linha de pensamento é super rápida e contém muitos detalhes. Mas vamos ver qual é a resposta real, e podemos ver que a Gemini quer usar uma tecnologia diferente da nuvem Ok, ele quer usar react e VT, o que pode não nos dizer muito porque não somos programadores, mas é uma diferença interessante . Isso é sem nada. Outra coisa aqui. Agora, para os ativos de imagem, Gemini está dizendo que primeiro precisa saber quais imagens estão dentro dessa pasta e se podemos listá-las nós mesmos Então, temos que listar as fotos. Ok, isso é chocante, na verdade. Isso é muito inesperado. Claude viu imediatamente as fotos. Agora, para ser justo, poderíamos ter fornecido menos fotos ou nomeado elas no mesmo formato da mesma forma, como IMG 01 com qualquer outra coisa Mas sim, no geral, essa é uma comparação entre modelos. Estamos dando a esses modelos o mesmo computador, a mesma tarefa exatamente por esse motivo: compará-los. Ok, de qualquer forma, continuando com essa abordagem tecnológica, o modelo criará alguns arquivos diferentes, começando com o pacote dot JSON Ok. Novamente, nós realmente não nos importamos, mas é bom notar essas coisas. À medida que você se familiariza cada vez mais com esses modelos, deve se acostumar com essas abordagens. E ok, na marca de dois minutos, acho que talvez já tenhamos terminado. Está bem? Legal. Podemos ver um grande resumo aqui. Eu só vou pular isso para o propósito desta gravação Na vida real, sugiro que você leia tudo o que o modelo diz, pois pode haver informações importantes lá. Mas sim, aqui, vou aceitar tudo e ver como posso lançar o projeto. Como usamos uma abordagem tecnológica diferente, o arquivo de índice pode não ser a chave para abrir o projeto. E se focarmos no chat, podemos ver na terceira etapa que precisamos executar um servidor de desenvolvimento. Ok. Isso é interessante. Mas aqui está a questão no número quatro : diz que o feed é apenas um espaço reservado e que precisamos de uma chave se quisermos usar uma real Ok, então eu agradeço isso. Você pode ver como a personalidade desse modelo se manifesta. Agora, não estou dizendo que é melhor do que nuvens, mas é algo a ser observado. Dizia que eu não posso fazer isso. Você tem que fornecer a chave. Ok, coisas boas. Agora vamos tentar abrir o link do host local, mas tenho certeza de que não funcionará porque Gemini está solicitando que executemos um servidor Eu não quero fazer isso sozinho. Então, aqui está o que eu vou fazer. Você faz a etapa número um e imediatamente vê aqui que o modelo diz: Ok, eu vou fazer isso, o que é um pouco engraçado, considerando que poderia ter feito isso antes, certo? Lembre-se de que cada comando, toda vez que pressionamos Enter, isso está nos custando algum dinheiro Portanto, algumas pessoas podem estar um pouco insatisfeitas com essa abordagem. Se você sabe o que fazer e como fazer, então faça, certo? Então, algo está acontecendo no console. Instalação do NPM. E depois de um tempo, isso nos diz novamente que temos que fazer duas coisas. Temos que adicionar imagens, renomeá-las. Mas o mais importante, passo número três, temos que executar o servidor. Não quero executar o servidor sozinho, mas, para ser justo, é muito fácil de fazer, mas esse não é o ponto. Então, vou dizer isso: pule as imagens continue com a etapa três E deveria ser isso. Acho que deveríamos poder dar uma olhada em nosso site em mais de 3,5 minutos, e a experiência tem sido boa, muito diferente. Mas vamos ver o que está acontecendo. Ok, então, à primeira vista, podemos ver que as imagens estão faltando Não é surpresa. O menu principal é agradável e limpo. É interessante ver que o mapa já está funcionando em comparação com o Cloude Não temos um feed do Instagram e isso nos disse por que esse é o caso. Então, isso não nos confundiu como Claude. Então, se um boletim informativo Q, no geral, muito bom. uma coisa que realmente me incomoda são as fotos do produto Então, vamos dar uma olhada no prompt e ver se podemos ajustá-lo. Acho que não dei o caminho exato. Acho que apontei para a pasta geral do Gemini, mas não para as fotos reais O problema é que o modelo deve ser capaz de fazer qualquer coisa dentro dessa pasta. Então, eu realmente não acho que esse seja o problema. Ainda assim, vamos tentar isso de novo. Vamos dizer à modelo as fotos estão lá dentro do projeto. Basta adicioná-los ao projeto. Use-os, certo? Vamos ver se isso resolve o problema, embora eu realmente duvide. Ok, avance rápido e não. Diz que não pode acessá-los, o que é mentira. E que eu tenho que fornecer os nomes exatos dos arquivos para as oito imagens do produto. Eu odiaria renomeá-los sozinho. Curiosamente, o modelo criou uma nova pasta chamada Publxlash Images, que me diz que o modelo tem acesso a tem acesso Ele pode criar coisas. Eu posso deletar coisas, eu posso mover coisas. Mas, sim, vamos seguir em frente e dar uma olhada rápida na versão móvel. Ok, no geral, foi uma experiência decente, mas pedir que eu renomeie esses arquivos não é o ideal A versão móvel parece boa. Na verdade, acho que é melhor do que nuvens. Mas sim, no geral, vamos encerrar isso. Vamos passar para o GPT 4.1. Vou pular a configuração para que possamos economizar um pouco de tempo. Agora, imediatamente, 4.1 nos dá um plano. Ele nos diz que vai usar um projeto baseado em reação com VT. Ok, tudo bem para nós, e isso nos dá uma abordagem passo a passo. Ok, quo. Agora, aqui está a primeira grande diferença. Está pedindo que revisemos o plano e digamos se queremos ajustá-lo, se queremos mudar alguma coisa. Ok, agora, por um lado, isso consome outro crédito, mais dinheiro outro lado, isso nos dá a chance de garantir que o modelo entendeu a tarefa, o projeto Agora, no geral, estou mais inclinado para que isso seja uma coisa ruim para o meu gosto, e é uma preferência pessoal Veja, eu não quero segurar sua mão. Eu não sei o que eu não sei, certo? Estou procurando por ele para obter orientação. Não tenho ideia se Vt é uma boa ideia, se o react é bom, certo? Então, eu preciso ser capaz de confiar nele se ele me disser que o feed do Instagram está pronto, quando não é falso, isso não é uma boa ideia. Se está me pedindo orientação, novamente, isso não é o ideal. Mas tudo bem, vamos continuar. E aqui está a coisa. Depois de alguns segundos, ele está me pedindo para confirmar que queremos instalar o VT. Ok, é aqui que você deve ter cuidado Na verdade, você precisa digitar Y nesta parte aqui e pressionar enter. Caso contrário, você ficará preso. Então, isso não é realmente óbvio, mas é por isso que essas lições são tão essenciais, mas agora aqui está o grande problema. Depois de aceitar, você deve escolher uma estrutura. E, cara, existem muitos. Como não sou desenvolvedor, não tenho certeza do que devo selecionar. O modelo mencionou algo sobre react, mas, honestamente, não tenho certeza de qual deles devo escolher E é aqui que o GPT 4.1 é muito diferente dos outros dois De qualquer forma, vou escolher o react e espero que continue Mas depois do segundo, aqui está outro grande golpe. Está pedindo a variante e muitas para escolher. Isso é extremamente irritante porque, obviamente, não sabemos Com os códigos Vibe, não temos certeza. Poderíamos potencialmente lançar o chatgpt.com e perguntar sobre isso. Poderíamos até começar uma nova conversa aqui dentro do cursor e perguntar ao modelo sobre a melhor abordagem. Vou escolher um aleatoriamente, o primeiro, datilografado, e Isso está longe de ser ideal para a atmosfera que você faz. Desenvolvedores experientes , com certeza, não terão problemas, mas para nós, não parece bom. Anteriormente, estávamos chateados com Gemini por não conseguirmos encontrar algumas fotos, mas acho que isso é muito pior Foi aqui que fiquei um pouco preocupada. Eu estava pensando que isso está preso. Achei que esse arquivo TSX do app dot simplesmente congelou tudo. Mas acho que na verdade é apenas um arquivo muito grande. Então, dê uma olhada no tempo limite para ver quando eu acelero a gravação. Como isso está funcionando, deixe-me dizer que esses resultados não são definitivos Do seu lado, você pode ter uma experiência muito diferente. Se eu tentar esse experimento exato, mais uma vez, posso ter resultados completamente diferentes. Há muitas pessoas fazendo essas comparações diretas, mas uma coisa é certa é que os resultados variam Um modelo pode ser lento hoje, mas rápido amanhã. Portanto, essas empresas têm a capacidade de atualizar esses modelos de forma que eles simplesmente funcionem melhor. E algumas pessoas argumentam que, em diferentes partes do dia, alguns modelos se degradam Então, algo como um horário de pico às 17h , onde todo mundo sai do trabalho ao mesmo tempo. Então, se você trabalha de manhã, o modelo é mais rápido, mas se você trabalha até tarde da noite, é horrível, coisas assim Agora, não posso dizer com certeza se isso acontece, mas tenho que deixar claro que os resultados variam, não importa o motivo, eles variam. Mas sim, vamos ver o que está acontecendo. Então, estou recebendo uma mensagem de sucesso aqui no lado direito. Diz que agora está configurado. Mas no lado esquerdo, podemos ver que o terminal está claramente com alguns problemas. Isso pode ser bastante confuso. Vou parar o tempo com Doug e ver o que está acontecendo. Deixe-me encontrar o arquivo de índice e ver a aparência do site. Mas, para ser sincero, sou bastante cético. E sim, aqui , não está funcionando. Quando isso acontecer, fale com a modelo. Diga exatamente o que está acontecendo. O arquivo de índice está em branco e espero que o modelo verifique tudo e veja o problema É por isso que estamos fazendo essa comparação, certo? Mas não é isso que está acontecendo aqui. Podemos ver um resumo em que, bem, não há nada realmente tão claro. Então, precisamos de outra mensagem. Ajude-me a ver o site e meu navegador. O objetivo é fazer com que o modelo faça alterações e correções, certo? Poderíamos copiar e colar esse erro no Google e ver o que está acontecendo. Mas primeiro, quero dar ao modelo a chance de consertá-lo sozinho. Mas não, não está funcionando. Podemos tentar novamente, mas obviamente falhará. Portanto, a melhor resposta é dar ao modelo o erro. Então, basta copiar e colar. Na maioria dos casos, você verá o modelo dizer algo como: Ah, sim, você está totalmente certo. E sim, aqui parece que ele executou um comando em uma pasta diferente, um erro tolo De qualquer forma, isso realmente não importa. Está pronto, e eu diria que demorou cerca de 10 minutos apenas para este modelo. Muito mais lento do que os outros. Mas vamos dar uma olhada. Não posso dizer que estou impressionado. Todo o site está deslocado para a esquerda. Não tenho ideia do porquê, para ser honesto. Podemos ver as imagens da falta, e as resenhas são mostradas em um cinza feio Temos um mapa funcional, e esse é o único modelo que me deu um feed real do Instagram, e é real, não falso. Não há rodapé e, pelo que parece, acho que a versão móvel vai ser horrível Sim. Então, no geral, qual é o veredicto Claramente, são vantagens e desvantagens. Para mim, eu pessoalmente prefiro o clot four, um modelo que está disponível atualmente se você tiver o plano de $20 Se você quiser seguir o plano gratuito, precisará mudar para o clot 3.5, o que também é muito bom Mas isso é uma questão de preferência. É Pepsi versus Coca-Cola, iPhone Android Witz. U D. Esses modelos vêm de empresas gigantes que investem bilhões de dólares nesses problemas. Não existe um telefone melhor. E, do mesmo jeito, não existe o melhor modelo. As coisas mudam constantemente. Por enquanto, eu gosto do Cloud four. Amanhã, eu posso mudar para um diferente. O importante é que você teste tudo do seu lado com exatamente a mesma solicitação. Faça exatamente como eu fiz aqui e me conte sua experiência. Diga-me o bom, o ruim, o horrível. Deixe-me saber na seção de comentários, o que é o quê e, por favor, poste algumas capturas Eu quero ver o que está acontecendo. Divirta-se com isso. 12. Custos explicados de uma maneira simples: Bem vindo de volta. Quero abordar algo que é muito importante, que é a ansiedade de alcance. E aqui está a coisa. Seu plano mensal vem com uma certa quantidade de créditos, 500 créditos no momento, certo? Você paga uma certa quantia e pode usar esses 500 créditos. São 20 dólares no momento. Agora, veja como isso funciona, a versão simples. No plano gratuito, você começa com um teste de duas semanas do plano P. Isso significa que, no momento, você recebe 150 créditos ou solicitações. Para ver quanto você gastou, acesse seu painel em cursor.com Este é o meu uso atual nesta nova conta. Você pode ver que tenho um total de 150 solicitações porque, novamente, estou no teste de duas semanas. Agora, no site deles, você pode ver um número diferente ou pode haver uma promoção, mas a partir de agora, essa é a situação. Ok, agora, isso significa que você abre o cursor, escolhe um dos modelos, digamos, Gemini 2.5, e toda vez que pressiona Enter, você gasta uma solicitação É daí que vem a ansiedade de alcance. Você começa com 150, depois 149, depois 140 E depois desse curso, talvez você fique com 20, certo? É aí que o pânico começa a surgir. É fácil se fixar nesse número. Agora, se você assinar o plano P, que eu recomendo, 20 dólares Agora você vai receber 500 por mês. Você já viu como criamos uma landing page decente com duas, três, cinco solicitações. E se você quiser aprimorá-lo, talvez leve de 20 a 50 solicitações a qualquer lugar Realmente importa o que você quer, quão boas são suas instruções e qual modelo você está usando. Antes de continuarmos essa discussão sobre preços, precisamos abordar o elefante na sala O custo varia. Portanto, alguns modelos são incrivelmente caros, enquanto outros podem ser totalmente gratuitos de tempos em tempos, sem várias promoções. Por exemplo, a Open AI nos deu GPT 4.1 e 04 gratuitamente. Sim, de graça, por cerca de dez dias. Agora, no momento, o GPT 4.1 consome uma solicitação, enquanto o Cloud four Sonnet, a versão inteligente, exige duas toda vez que você pressiona Enter, então é duas vezes mais caro, que complica bastante as coisas, sabe E aqui está o problema. Às vezes, você solicita uma tarefa a um modelo, quer que ele faça alguma coisa, e então esse modelo faz 20 coisas uma após a outra, certo? Ele executa tudo sozinho e você é apenas um passageiro Então, com uma solicitação, você progride muito. O modelo divide uma tarefa enorme em tarefas menores e, pouco a pouco , as verifica. Funciona sozinho. Fabuloso. Mas outros modelos são diferentes. Você dá um prompt e ele executa uma única etapa. Às vezes, na verdade, diz o que você deve fazer. Então, isso é muito frustrante. É por isso que o custo é relativo. Você pode dizer: Ok, 4.1 é mais barato, mas se ele tem amnésia e precisa que você segure sua mão a cada passo e dê quatro, cinco, dez solicitações, enquanto o Club pede apenas uma única solicitação , o custo mais baixo realmente o deixa Não, na verdade não. Novamente, esses são apenas exemplos aleatórios. Não estou dizendo que Claude esteja milhas à frente da Open AI com GPT, 4.2, Então, tenha isso em mente. Agora, por outro lado, alguns modelos são muito caros, até dez vezes mais caros, 03, por exemplo Agora, isso significa que eles são dez vezes melhores? Não, esse não é o caso. Novamente, as coisas mudam muito rápido e esses modelos vão ficar cada vez melhores. Então, aqui está o que eu realmente quero que você anote. A coisa mais importante desta lição que ficar sem créditos não é grande coisa. Mesmo que você passe por todos os 500 e não tenha um projeto concluído, o que é quase impossível para ser honesto. Você sempre pode comprar mais. E o preço agora é de dez dólares por 250 créditos. Isso é 0,04 USD por solicitação por tarefa. Novamente, às vezes, um único aviso pode levar você muito longe, dependendo do modelo escolhido e clareza com as instruções. Mas mesmo que você tenha resultados médios, certo, $0,04, dez tarefas, $0,40, 100 tarefas , quatro dólares, E você provavelmente usará menos de 50 por dia, especialmente se usar alguns dos modelos mais baratos ou que estão em promoção. Agora, é aqui que isso se encaixa. O objetivo, nosso objetivo, é criar sites que nos façam ganhar dinheiro ou criar projetos que nos contratem como freelancers ou consigamos um emprego estável, certo? Esse é o objetivo. Ok, agora, se você quisesse contratar um programador, um desenvolvedor, confie em mim, você não pagaria dois, três, quatro dólares por dia Não, e estou falando de um programador comum. Mas aqui no cursor, você tem acesso a alguns dos melhores programadores do mundo por alguns centavos Uma página de destino média deve levar você de digamos, 30 a 100 solicitações para ser super generosa, certo? Usamos cinco exemplos. Mas digamos que sejam 50 solicitações. Confie em mim, isso não é nada. Quando você vende esse site por, digamos, 500 dólares no preço mais baixo, realmente importa que você gastou $2 fazendo Portanto, essa ansiedade de que você está ficando sem créditos, na verdade, não é lógica. Não é racional. A maioria dos programadores pede de 25 a 100 dólares por hora em O cursor é mais barato, mais rápido , melhor e está sob seu controle. Você não usará centenas de créditos por dia, especialmente nos primeiros meses. Tenha em mente outra coisa. Inicialmente, você não saberá o que está fazendo. Você pode gastar créditos, certo? Mas isso é normal. É assim que você aprende. À medida que você ficar cada vez melhor, você usará os créditos com mais sabedoria Mas, por enquanto, por favor, faça alarde, use-os. Não se preocupe com eles. Isso é um investimento em seu futuro. Você tem que comprar um curso. Você precisa comprar algumas assinaturas, mas o custo geral não é nada comparado ao lado positivo Eu construí negócios reais no setor de alimentos. Eu construí negócios no setor de tecnologia. Eu tive equipes de dezenas de pessoas. Os custos são imensos de aluguel, serviços públicos, salários, equipamentos caros As palavras no outro lado, com o cursor, você está pagando centavos Não há melhor negócio do que a codificação Vibe no momento. Com alguns dólares, com alguns dólares, você pode conseguir muito Então, para resumir até agora, se você estiver na fase de teste, com certeza, use o Gemini 2.5, GPT 4.1 e o Cloud Esses são os modelos atualmente incluídos no teste que podem, é claro, mudar. Teste todos os três e veja qual deles você prefere. Veja de qual personalidade você gosta. Eu, por exemplo, às vezes realmente não gosto do 4.1, mas lembre-se de que as coisas mudam constantemente Meu conselho provavelmente Gêmeos é uma escolha melhor, mas você Agora, se você quiser usar o Cloud four, precisará se inscrever no plano de 20 dólares, o que eu recomendo fortemente E depois de fazer isso, é muito provável que você trabalhe apenas com o Cloud four na maioria dos seus projetos. Agora, se você tiver o plano profissional, nunca use o modo automático nem o modo máximo. Portanto, para simplificar, modo Max não é para iniciantes. É uma forma pela qual o modelo é muito mais inteligente, mas há um preço associado a ele Agora, não vou entrar em detalhes técnicos sobre contatos, janelas e tokens. Em vez disso, vou te dizer isso. Você não deve tocar no Modo Máximo por pelo menos alguns meses. Mesmo que você tenha muitos problemas e o modelo o irrite loucamente, não mude para o Modo Máximo. Essa é uma etapa que você deve seguir somente depois de lançar alguns projetos e se sentir muito mais confortável com essa coisa de codificação vibratória Quando você está confortável com o Github, com o Versll com o Super Base, com todo esse ecossistema Então, com isso em mente, você pode tirar completamente o modo Max da sua mente. E embora, novamente, não seja uma boa ideia, você deve escolher um modelo e segui-lo. Agora, embrulhe. Não proteja seus créditos. Não os valorize. Eles são um investimento em sua educação e em seu futuro. Ok, vamos continuar. 13. 80% a 20%: Volte. Deixe-me ser claro. Você não criará uma empresa de $1.000.000.000 sozinho com o Vibe Coding, mas poderá lançar produtos, sites e aplicativos que possam sites e aplicativos Um dos principais problemas é conseguir os últimos dez a 20% da maneira que você deseja. Isso pode levar uma quantidade incrível de tempo, além de muita frustração. Então, vamos fazer isso. Em anexo, você tem essa pasta. É um dos nossos sites anteriores e há um cartão de produto que parece decente. Ok, muito bom. Mas talvez queiramos fazer com que pareça ainda melhor. Esse é o objetivo, certo? Melhore isso. Esse é o tipo de coisa que pode dar muito bem ou terrivelmente errado. Então, vamos testar a sorte. Acesse o menu principal para arquivar e abrir esta pasta. Você tem um arquivo anexado ao curso que primeiro precisa extrair. Ok, usaremos o Cloud no momento, embora você tenha uma experiência semelhante com a maioria dos modelos. Se você estiver no modo de teste, poderá usar o Cloud 3.5 ou o Gemini Isso realmente não mudará a parte importante desta palestra. Ok, agora, é o seguinte. Talvez você queira abrir este site para ver a aparência do meu cartão existente. Este é o meu site e eu quero usá-lo como referência, ok? Agora, poderíamos potencialmente escrever todas as alterações que quisermos, e isso nos economizaria alguns créditos, mas eu quero fazer isso passo a passo. Isso geralmente oferece melhores resultados. Então, uma única tarefa por vez. Então, digamos isso. Para as avaliações nos cartões de produtos, adicione a pontuação do produto com dois dígitos Coloque a pontuação em negrito. E isso porque se você simplesmente vê cinco estrelas em todo o quadro, não há uma boa maneira de separá-las e tomar uma decisão, certo? Se um produto tem uma pontuação de 4,51 versus outro que é 488, é claro, você escolherá o segundo, certo Isso faz sentido. Então, sim, vamos às corridas. Ok, é preciso um pouco de análise, mas isso é típico quando você importa o projeto. Ele pesquisará todo o código e tentará entender o que está acontecendo. Isso levará alguns minutos. Devo dizer que a nuvem quatro parece ser um pouco mais lenta do que a 3,7, mas isso é apenas uma impressão aproximada, e isso realmente não diz muito porque, novamente, existem muitas variáveis Afinal, o que importa é que, se você terminar o projeto e atingir seus objetivos, é como chegar a algum lugar. Não importa se você pegou um Uber, seu próprio carro, metrô ou ônibus Todas essas opções são muito diferentes com preços e experiências diferentes, mas, no final das contas, a decisão é sua Você vai chegar lá de várias maneiras. Se você estiver disposto a pagar por mais conforto, o ônibus provavelmente não é uma boa ideia. Mas se você está tentando ser econômico, o ônibus pode ser a melhor escolha Então, o contexto, seu próprio contexto, realmente importa. Ok, avance rápido, e isso deve ser feito. E aqui está exatamente o que quero dizer. Isso se parece com o que eu tenho ao vivo no meu site? Na verdade, não. Parece horrível Não, claro que não. Mas não é o que eu quero. A pontuação não faz muito sentido quando você a combina com o sistema estelar. Se fosse 92 de 127 avaliações, a pontuação faria sentido, mas as estrelas me confundem. E se você é perfeccionista, esses tipos de coisas podem deixá-lo louco Se você quiser que as coisas sejam de uma forma muito específica, isso exigirá muito mais instruções e muito mais esforço Você pode escrever o prompt de uma forma muito mais detalhada. Mas vamos continuar com isso. Vamos escrever o seguinte. Adicione um texto de detalhes da exibição com estilo laranja e negrito, sem fundo, e adicione um botão Adicionar ao cartão com fundo laranja e texto branco Esses dois botões devem estar lado a lado abaixo da classificação. OK. Agora, novamente, você poderia descrevê-lo de uma maneira melhor? Essa é uma grande discussão. Claro. Você tem uma ideia em sua mente. Nesse caso, temos uma grande vantagem porque podemos ver a versão ao vivo. Mas, sim, você tem que fazer o seu melhor e descrever o que você quer. Isso exigirá muita paciência e tentativa e erro. Você tem que praticar para ficar melhor nisso. Não há outro jeito. Você precisa aprender a descrever as coisas de forma que o modelo entenda seus objetivos. O modelo não leva tudo em consideração. Por exemplo, a existência do sistema estelar. Não, você pediu a pontuação de dois dígitos. Bem, você entendeu, certo? É como aquele ditado engraçado: você diz à IA para erradicar todas as doenças na Terra Então, isso simplesmente mata todas as pessoas. Agora, claro, tecnicamente, não há mais doenças, certo? Tecnicamente, funcionou, mas obviamente não era isso que queríamos Portanto, você precisa ter muito cuidado com suas instruções. Ok, vamos voltar ao assunto. Vamos ver no que vai dar. Ok, depois de um tempo, está feito. Lembre-se de sempre aceitar todas as edições. Agora podemos atualizá-lo. E sim, novamente, é muito bom. É exatamente do jeito que eu queria? Não, na verdade não. Isso é tudo que você precisa perceber. Não importa qual modelo você usa. Claro. Há uma pergunta sobre a qualidade do meu aviso. Eu poderia descrevê-lo com mais detalhes, certo? Talvez forneça uma imagem, talvez mostre um design feito pela Figma Claro, mas isso é um pouco mais no trabalho. E eu não sou contra o trabalho de modificação. Não é isso que estou tentando dizer. Estou dizendo que você deve estar preparado para esse fluxo de trabalho. Você tem 80 a 90% do que você quer. O resto é muito, muito complicado. Então, deixe-me tentar um prompt final. Mova o peso do produto para o lado direito do preço, alinhe o peso com o botão Adicionar ao cartão, deixe o botão Adicionar ao cartão azul, altere o peso dos detalhes de negrito para normal Ok, e vamos ver como isso acontece. A propósito, embora você pudesse criar 100% uma loja com o cursor, eu ainda usaria Woo Comers com base no WordPress, ou talvez até comprasse um projeto desse tipo, simplesmente porque eles estão super estabelecidos, meus A única exceção seria uma loja muito simples baseada em poucos produtos, ou talvez algumas páginas de destino de um produto. Mas sim, voltando, isso é, novamente, decente. Simplesmente não é perfeito. Não é o que eu quero. Poderíamos gastar mais dez, 15, 20 solicitações ou tentar várias abordagens para chegar mais perto do que eu quero Mas eu prefiro te dizer isso, ficar feliz com isso. Isso não vai melhorar nem arruinar seu projeto. Por favor, não seja perfeccionista. Inicie-o o mais rápido possível, veja como funciona, descubra o que as pessoas estão dizendo sobre ele e só então aprimore. É muito fácil se fixar nos detalhes, mas eu prometo que você vai perder E estou falando por experiência própria. Inicie-o e depois polir. E com isso, vamos continuar. 14. Do Figma ao Cursor?: Volte. O sonho de codificar um design feito no Figma em apenas alguns segundos ainda não existe Pelo menos não no cursor. Temos um Figma MCP por meio do qual podemos dar acesso ao cursor aos meus designs feitos no Você precisa configurar um token nas configurações do Figma. Não é muito complicado, mas você precisa ser um pouco paciente. A propósito, não trabalhe junto. Basta assistir e ver o que é o agora, aqui está a coisa. Parece incrível, certo? A IA pode analisar todas as suas decisões tomadas no Figma e depois implementá-las de uma forma perfeita em pixels Afinal, é aí que estamos lutando. Os últimos dez ou 20% desses detalhes. Mas mesmo que isso pareça incrível, não funciona. Na data desta gravação, ele está realmente fazendo um trabalho ruim, não importa o modelo que você usa. Eu tentei com Claude, com Gemini, com GPT, e os resultados variam de ruins a não conseguir terminar a tarefa O fluxo é simples. Você cria uma boa página no figma e, em seguida, copia essa página específica usando o link de cópia para a seleção Esse é basicamente o endereço dessa página específica. Em seguida, você pode iniciar um novo projeto e uma nova janela, criar uma nova pasta, como sempre, e depois informar o modelo de sua escolha, implementar esse design e adicionar o link. Deveria ser tão fácil, certo, tão simples. Mas por alguma razão, isso não funciona. Quando as coisas mudarem no cursor, eu vou te avisar. Mas, por enquanto, não acho que sejam créditos bem gastos. Por outro lado, eu recomendo fortemente meus cursos de web design, e isso não é porque você deva aprender Figma por si só, mas por causa dos princípios de design desse curso, eles fazem a diferença Coisas como contraste, garantir que as pessoas vejam o que importa, hierarquia, guia o olhar, títulos grandes, botões limpos e assim por diante, espaço em branco Mais é melhor. Deixe as coisas respirarem. Não junte as coisas, simetria e alinhamento, mantenha-as arrumadas, mantenha-as limpas Tipografia, não apenas fontes bonitas, mas tamanhos, peso e espaçamento apropriados Agora, como você está prestes a descobrir, essas plataformas de codificação nos ajudam com todo o código complicado, com certeza Mas se você quer um design polido, algo que pareça bom, você precisa conhecer esses princípios para poder guiar o modelo Você tem que saber o que você quer pedir. Coisas como aumentar o preenchimento do cartão ou tornar esse texto H dois, este H três ou como alguns botões precisam ser preenchidos Enquanto outros precisam ser texto puro. Essas são as coisas que eu ensino em meus cursos de design, e eu prometo, isso não é um anúncio Não sou eu tentando te vender outro curso. Não, é o que você precisa para levar suas instruções para o próximo nível e obter melhores resultados. É o que você precisa para descrever melhor suas ideias. E, curiosamente, a modelo alucina e diz que o site O problema é que não há arquivos neste projeto. Você pode ver isso no lado esquerdo. Nada aconteceu. Isso é muito engraçado. E aqui está o acordo. Você pode dizer ao modelo que precisa de ajuda para ver o site. Mas sim, os resultados serão igualmente horríveis. Na verdade, deixe-me avançar e te mostrar uma coisa. O modelo percebeu que a pasta estava vazia, então tentou criar o site. Mas o que ele realmente fez, bem, você pode ser o juiz disso. Agora, novamente, tenho certeza de que isso vai ficar cada vez melhor e, em alguns meses, é muito provável que isso seja possível. Se isso será feito no cursor ou diretamente no figma, não tenho certeza, mas tenho certeza isso acontecerá desde o Figma até o código funcional No momento, você pode ver claramente como o modelo inventa algo que, você sabe, não faz nenhum sentido, mas faz isso, então não falha completamente. Não faz nenhum sentido. Mas sim, qualquer forma, isso é inútil Não use o Figma MCP no momento. Com isso dito, vamos continuar. 15. Da ideia ao Cursor ao Vercel para o site real: Volte. Deixe-me explicar o processo de criação de um site ativo com seu próprio nome de domínio em um período muito curto de tempo. Vamos começar com um cursor de projeto totalmente vazio, uma pasta vazia, certo? Crie uma versão funcional desse site que seja executada localmente em nosso próprio computador. Então, quando estivermos satisfeitos com isso, vamos enviá-lo para o Github. Você pode pensar no Github como o Drawbox ou o Google Drive. É um lugar na web onde você pode armazenar todos os seus arquivos. Você pode mantê-los lá. Você tem acesso a eles de qualquer dispositivo e, se quiser compartilhá-los, isso é muito fácil de fazer. Agora, quando o site estiver no Gid Hub, vamos enviá-lo para a Versll Versll é uma plataforma que nos ajudará a publicar o site para que todos possam vê-lo Resumindo, o VerSL substitui uma empresa de hospedagem. Depois de importá-lo com sucesso do GitHub, ele funciona bem, então você terá um link bem feio. Essa é a última coisa. Então, algo assim. Mas isso ainda está disponível para todos. Assim, você poderia compartilhá-lo com seus amigos e familiares. Você pode mostrá-lo ao cliente. Ele faz o trabalho, certo? Mas se você quiser ir para a próxima, você pode comprar um nome de domínio diretamente no Versll cresbarn.com com alguma coisa, esperar algumas horas e então você terá seu próprio endereço, como eu disse, cresbarn.com Quando tudo estiver configurado e funcionando bem, aqui está o problema. Você pode voltar ao Cursor e continuar fazendo melhorias. O melhor de tudo é que você pode pedir ao Cursor que atualize o Github, e ele fará isso automaticamente E aqui está a coisa engraçada. Em seguida, o Versll também será atualizado automaticamente. Então, isso é muito fácil de fazer. A parte difícil foi configurar tudo no início do curso. Agora é só uma questão de seguir os passos, depurar, consertar coisas, várias coisas, certo? Agora, esses problemas podem levar cinco ou seis solicitações ou 15 minutos, ou podemos não ter sorte e talvez precisemos de 15, 20 solicitações, talvez algumas horas, talvez um pouco Mas, sim, isso faz parte do jogo. Então, para recapitular, vamos começar com um bom aviso, algo com uma quantidade razoável de detalhes Em seguida, começaremos a construir o cursor. Quando terminarmos, publicaremos Github e depois no Versll, para que fique ativo e possa ser compartilhado Agora, você pode perguntar, Chris, por que nos inscrevemos no Superbse Bem, o Superbse é ótimo para oferecer aos usuários a opção de registrar uma conta Ele vai lidar com as coisas complicadas do banco de dados e, com a forma como configuramos as coisas, funcionará automaticamente. Por enquanto, não vamos usar o Super Base. Por enquanto, vamos criar um site sólido do início ao fim, publicá-lo e talvez mais tarde façamos algo um pouco mais complicado. E, claro, vamos usar o reenvio para enviar e-mails. Estou muito animada. Vamos ao que interessa. Vamos começar a trabalhar. 16. Vamos entender a proposta: Bem vindo de volta. Aqui está o prompt que nós dois vamos usar. Você o anexou e, em termos de detalhes, é seis em dez. Se você pegar esse baile de formatura que soa natural e tentar melhorá-lo no chat GPT, receberá um aviso muito mais técnico Normalmente, isso ajuda, mas uma solicitação complicada pode ser um pouco cansativa, então decidi me limitar a algo que parece natural Caminhamos, depois corremos. Um dos principais problemas é esse. Eu digo azul e branco, mas geralmente eu forneço códigos coloridos. Você tem que ser específico. Azul pode significar qualquer coisa, desde um azul bebê superclaro até um azul marinho escuro e intenso. Portanto, tenha isso em mente. Quanto mais detalhes você incluir, melhor será o resultado. Quero lembrá-lo de que, mesmo que você faça tudo exatamente como eu, seu site terá uma aparência diferente do meu. É assim que esses modelos funcionam. Mas posso prometer que você terá problemas diferentes dos que eu vou ter. Eu não tenho uma bola de cristal, mas estou nisso há tempo suficiente para saber que isso é inevitável. Os problemas surgirão e serão de todos os tipos. Ok, configure uma nova pasta e um novo projeto e cursor, o básico. Certifique-se de ter tudo configurado como fizemos na primeira parte do curso. Github, Python , sem JS, tudo bem. Falando sobre tecnologia, decidi dizer ao modelo algumas coisas que ele deveria usar next JS e tailwind, reenviar para o formulário e depois Github e Versll E aqui está o porquê de eu ter feito isso. No início, você começa com um prompt vago muito básico, como Make me a website, certo? E então você vê o que os modelos SMOT recomendam, o que eles usam Já vimos como alguns deles escolheram HTML, CSS e JavaScript básicos, enquanto outros recomendaram algo um pouco mais robusto, um pouco mais técnico, exatamente o que eu escrevi aqui, next JS e assim por diante. Se o modelo que você preferir quiser usar essa tag de texto, se você ver um padrão, anote-o E da próxima vez, sugira isso. Isso é exatamente o que eu fiz aqui. E eu também fiz o seguinte. Falei com alguns programadores e perguntei: Ok, por que o tailwind Por que não esse ou aquele? Por que reagir? Por que não isso ou aquilo? E, em resumo, todo mundo parece ter sua própria preferência. Algumas pessoas gostam da BMW Pepsi e do Android, outras pessoas gostam da Mercedes, doutora Peppa, do IOS, quem está Obviamente, ninguém. É o que você prefere. E é mais ou menos a mesma coisa aqui. Agora, a próxima coisa sobre o aviso que pedi algo chamado PRD, um documento de requisitos do produto Isso é para que o modelo possa nos dizer claramente o que está prestes a acontecer. O PRD parece sofisticado, mas é uma espécie de lista de verificação Então você sabe onde estamos. Então esse é o PRD. Não dói, então sempre inclua. Em seguida, quero adicionar algumas imagens. Embora pudéssemos usar um MCP para baixar alguns automaticamente, acho que é um exagero. Isso é demais. Em vez disso, eu fiz isso unsplash.com. Selecionei algumas fotos que funcionariam para um veterinário. Então eu mudei para as pessoas para as avaliações, muito básicas, muito padronizadas Então, depois de configurar seu projeto em seu drive, você deve copiar o endereço dessas fotos e colá-lo no prompt principal. Temos dois lugares aqui e aqui. Gotaf. Agora, só para ficar claro, você baixa fotos do Unsplash Você os coloca dentro da pasta em qualquer lugar. E então teremos que mover essa pasta da minha área de trabalho para o local onde o cursor está configurado onde esse projeto específico está configurado. Agora, no meu caso, eu abri essa pasta, e é aí que temos que colar as imagens. Agora, para obter um endereço de qualquer local, você precisa usar essa área. Isso é muito fácil de conseguir. Para as avaliações, é exatamente a mesma coisa. Você pega o caminho e depois o copia dentro do baile. Ok, o resto do prompt é, na verdade, bem básico. A única coisa importante que estou pedindo é um formulário para marcar consultas. Mas o formulário não tem nenhuma funcionalidade avançada. Não incluí uma lista suspensa para os serviços que o cliente talvez queira. Eu não incluí a hora. A hora exigiria que conhecêssemos as consultas médicas, toda a sua agenda Então eu escolhi a versão mais simples. Além disso, adicionei um número de telefone para que eles também possam atender chamadas dessa forma. A ideia é essa: você poderia potencialmente vender este site. Contanto que tenham alguém atendendo seus telefones e e-mails, um formulário de contato básico fará o trabalho O site estará funcional. O gabinete pode ligar de volta para o cliente e pedir muito mais informações e marcar uma consulta dessa forma. Então, eu quero ser claro. Este site pode funcionar até mesmo em sua versão básica mais simples, mas, para ser justo, você sempre pode adicionar mais recursos e funcionalidades. E você pode usar essa base e adaptá-la a qualquer outro tipo de nicho para restaurantes, advogados, qualquer coisa que você possa imaginar. Então, sim, esse é o aviso. É hora de começar a trabalhar. 17. Comece o projeto: Bem vindo de volta. Para este projeto, vou usar o Cloud four porque gosto bastante de sua personalidade. Não importa o que você escolha, você terá muitos problemas que podem não aparecer do meu lado. Então, por favor, seja paciente. Tente depurar e peça ajuda. Você verá que sua paciência é uma das principais chaves do seu sucesso. Agora, vamos começar. Vamos para as corridas. A modelo diz que vai criar uma landing page de clínica veterinária profissional, ok? E agora está verificando os ativos. Ativos simplesmente significam recursos ou, mais especificamente, no nosso caso, imagens. Em seguida, ele criará o PRD, o documento em que veremos todos os elementos essenciais sobre o projeto. Sim, vamos lá Ele varia da visão geral aos objetivos e ao conjunto de tecnologias. E aqui vemos os próximos trabalhos de JS, tailwind, reend, erslGitHub E não é como se soubéssemos essas coisas, certo? Mas isso é a confirmação de que estamos no caminho certo e que o modelo nos entendeu. E se precisarmos usar o Google para corrigir algum problema, esses detalhes podem ajudar. Agora, vou acelerar bastante a gravação tempos, porque o coágulo quatro é bastante completo e inteligente, mas o problema é o seguinte Às vezes, é muito lento. Uma coisa engraçada é que, no PRD, notei algo que é meio que uma bandeira vermelha Ele colocou a marcha errada. Dizia que isso foi criado em 2024, o que obviamente não faz nenhum sentido De qualquer forma, o modelo está trabalhando duro. Se você olhar no painel esquerdo, verá que essa área está começando a crescer para se expandir, cada vez mais arquivos. Uma coisa engraçada é que você pode ver vários vasos, vários problemas, mas a modelo parece conhecê-los. Agora, você esperaria que a inteligência artificial escrevesse um código perfeito. Mas não, até mesmo a IA está errada. Pelo menos nesta fase, tenho certeza de que, com o passar do tempo, isso vai ficar cada vez melhor. Se você tem idade suficiente para usar o Windows 95 ou 98 e agora o compara versão mais recente do Windows ou mais do que isso, uma versão recente do macOS, é noite e dia, certo? Vai ser exatamente a mesma coisa aqui do WinM ao Spotify. Mas o problema é o seguinte. Desde que o modelo conheça esses problemas e os resolva sozinho , nós realmente não nos importamos com isso, certo? Não é um problema para nós simplesmente tomar uma xícara de café e esperar que ela termine Então, no geral, está tudo bem, mesmo com esses erros. Agora, alguns arquivos demoram um pouco mais do que o esperado, mas acho que é porque eles são muito grandes. Com esse modelo e tag de texto, isso era de se esperar, na verdade E é uma boa ideia dar uma olhada neles e ver o que há dentro deles. Você pode fazer isso com um único clique no painel esquerdo, clicar em qualquer arquivo e ele será aberto aqui. A parte central funciona com guias exatamente como seu navegador Portanto, é agradável e fácil de se movimentar. Um dos maiores problemas que você enfrentará em projetos maiores e mais sérios é o tamanho do arquivo. Resumindo, em termos simples, quanto maiores os arquivos, mais difícil é mantê-los e atualizá-los. Agora, melhor dizendo, é muito melhor editar três arquivos 300 linhas de código do que um único arquivo com 900 linhas de código. Por alguma razão, isso realmente confunde o modelo. Em nossas regras de cursor, mencionamos algo sobre isso sobre ter arquivos curtos, mas o modelo nem sempre leva isso em consideração. E por outro lado, em alguns casos, realmente não é possível concentrar tudo em 300 linhas Então, isso é algo com o qual você pode ter dificuldades mais tarde em sua carreira como programador de vibrações Agora, meu conselho, comece com projetos menores e mais simples e, novamente, tenha paciência E isso porque estamos recebendo atualizações sérias a cada duas semanas. Então, é só uma questão de tempo até que eles se tornem cada vez mais inteligentes, e essa experiência será mágica Não vai ser com tantas dores de cabeça. Uma coisa a ter em mente quando o modelo terminar seu trabalho, porque usamos essa tag de texto, essa tecnologia, teremos um servidor local significa que não teremos um único arquivo de índice por meio do qual possamos testar o site Portanto, não há nenhum arquivo de índice que vamos usar. Agora, em vez disso, obteremos um endereço que começará com o host local. Agora, eu não vou entrar em detalhes técnicos. Realmente não importa muito. O que você precisa saber é que a versão inicial do site só funcionará no seu computador. Você não poderá compartilhá-lo com mais ninguém. Agora, se você ficar comigo até o fim, é claro, vamos usar o Versll e, com isso, publicaremos o site na web para que todos possam vê-lo Então fique comigo até o fim. Agora, aqui estão alguns problemas. O modelo está tentando iniciar um servidor local, mas parece que não está funcionando. Não está nos pedindo nada, então estamos bem. Nove em cada dez vezes, Claude descobrirá. Ele tentará novamente ou tentará uma abordagem diferente. E eu adoro isso. Agora, eu usei essa combinação de tecnologia no passado e sei que o reenvio precisará de uma chave Só para lembrar, quando alguém preenche um formulário de contato e o envia, um e-mail precisa ser enviado para a clínica, certo? Para que isso aconteça, precisamos de um serviço, um provedor que possa nos ajudar a enviar esse e-mail. E no nosso caso, escolhemos reenviar. O Resend vai nos ajudar. Criamos uma conta lá, mas precisamos conectar o reenvio a esse projeto específico, e isso é feito por meio de uma única chave Agora, o modelo vai nos pedir essa chave. Vamos lidar com isso, mas em um momento posterior, eu só queria explicar o processo. Adoro o fato de esse modelo ser falatório, me dizer como a construção é mais bem-sucedida e de conter alguns avisos que devem ser observados Isso é fantástico. E isso é porque esse é um modelo de pensamento, então é um pouco mais expressivo Agora, eu só posso imaginar o quão difícil é ser um desenvolvedor, você sabe, ter que saber tudo de cor, ter que se lembrar de tudo, ter que usar bastante o Google. Eu acho que é incrivelmente difícil. Então, estou muito feliz que tenhamos o cursor do nosso lado. Até agora, demos uma única solicitação, uma única extremidade da chave, uma única solicitação, um único crédito. E até agora, fez muitos progressos. Basta verificar no lado esquerdo para ver quantos arquivos ele criou. São milhares de linhas de código. Estou mais do que feliz em pagar $0,04 por uma quantidade tão louca de trabalho. É fantástico. Mas é claro que, após cerca de 25 ações, o modelo é instruído a parar Agora, alguns dizem que é porque o cursor quer que você consuma mais créditos. Portanto, é uma decisão motivada financeiramente. Eu não acho que seja esse o caso. Outras pessoas dizem que é uma boa ideia que o modelo pare de vez em quando, para que você possa realmente revisar o trabalho e colocá-lo de volta no caminho certo se ele der errado Portanto, não importa o que aconteça, em todos os casos, como códigos do Vibe sem nenhum conhecimento técnico, clicaremos no botão de retomar a conversa porque queremos que ela continue Mas vamos fazer isso depois de uma pausa rápida. Eu vou te ver em um segundo. 18. Como lidar com insetos: Volte. Fizemos muitos progressos, mas é normal que o modelo pare após 25 etapas ou mais. Temos que retomar a conversa, que basicamente significa que confirmamos que estamos no caminho certo e que o modelo pode continuar, mas o problema é o seguinte Imediatamente após clicarmos, aqui está um dos maiores problemas com o cursor no momento. Diz: Falha na conexão. Verifique sua conexão com a Internet ou VPN. Isso é muito frustrante. Não há nenhum problema com minha Internet e eu não uso uma VPN. Esse é um problema muito conhecido. O cursor está trabalhando nisso, mas, no momento, isso ainda acontece de tempos em tempos. Os quatro quartos estão cheios de muitas pessoas reclamando disso Agora, isso não está confirmado, mas acho que isso pode afetar nosso projeto. Quando o modelo para no meio da frase, quando a IA é forçada a parar quando planejou cinco, dez, 15 outras etapas, não é o ideal. Infelizmente, o botão de tentar novamente não funcionará , não importa o quanto você clique nele Você pode tentar, mas não vai funcionar. Agora, o problema é o seguinte. Eu prefiro tentar clicar em Aceitar, que está escondido atrás dele. Isso é para que possamos salvar todo o progresso até agora. Você precisa fazer uma pausa por um momento, esperar alguns segundos e, finalmente, se clicar rápido o suficiente, poderá aceitar todas as alterações Isso é o que eu recomendo que você faça também, embora eu saiba que pode ser bastante complicado , isso é o que eu quis dizer ao dizer que chegamos cedo Esses são os problemas que surgem e podem incomodá-lo. O fato é que você tem que ficar calmo e tentar continuar. Nesse caso, para corrigi-lo, você tem duas opções fazer uma nova conversa ou reiniciar o programa. Vou escolher a segunda opção, então feche o programa, espere alguns segundos e reinicie-o. Então, é claro, espere mais alguns segundos até que ele carregue e você verá a conversa anterior e o problema. A única coisa que podemos fazer agora é digitar continue, e isso funcionará. O modelo analisará o projeto, o progresso feito até agora e tentará continuar. Agora, isso é horrível? Não, claro que não, mas também não é o ideal, porque o modelo continua. Ele ainda tem muitas coisas que ainda precisa fazer. Mas, sim, eu realmente espero que, do seu lado, você possa tentar evitar esse problema. Espero que você tenha sorte pelo menos em seu primeiro grande projeto. Mas você precisa saber que , à medida que trabalha cada vez mais no cursor, isso será inevitável. Vou acelerar as coisas até chegarmos a um ponto de salvamento, por assim dizer. Agora, uma coisa que eu adoro é ter um arquivo chamado status do projeto, em que o modelo nos diz o que está acontecendo. Isso é muito útil e é uma boa ideia dar uma olhada nele de tempos em tempos e ver o que o modelo fez, o que alcançou Agora, não estou sugerindo que você leia o código real, mas é uma ótima ideia se acostumar com a forma como esses modelos operam, como eles funcionam. Somente com a codificação Vibe, é improvável que você se torne um programador real, mas esse não é o objetivo No entanto, podemos criar coisas legais e lançar produtos, lançar sites. Esse é o objetivo. Ok, vamos seguir em frente. Ok, aqui está o resumo, e é enorme. Há muita coisa pela qual passar. O modelo nos diz muito sobre o progresso que ele fez, mas vou apenas encontrar o endereço do site. Hospedeiro local 3.000, copie-o e cole-o em seu navegador Então, vamos dar uma olhada no site. Isso levou apenas alguns minutos e algumas instruções. Claro. Então, problemas, mas sim, acho que está tudo bem. E sim, estou muito feliz com isso. A primeira impressão é incrível. Para ser justo, a solicitação estava em inglês, mas por alguma razão, a modelo tornou o site em meu próprio idioma local engraçado o suficiente. Agora, acho que é por causa do endereço que coloquei, engraçado como isso funciona. Agora, podemos traduzi-lo mais tarde, mas, sim, isso é algo a ser observado. O site parece profissional e bastante moderno. Mas não sei por que as fotos não aparecem. Isso também é algo que temos que corrigir. Agora, o problema é o seguinte. O objetivo é aprender com cada erro. A menos que você passe por vários projetos, não poderá realmente adquirir essa experiência valiosa. Então, eu agradeço todos os problemas, todos os bugs. Por exemplo, todas as imagens do Unsplash são enormes, tanto em tamanho quanto em peso Agora, idealmente, nós os teríamos otimizado. Poderíamos usar o Tiny PNG. Poderíamos usar ilovemg.com. Mas como ignoramos isso, talvez isso tenha causado esse problema Talvez seja por isso que não está funcionando. Meu conselho para o futuro é que você tome precauções. Por exemplo, aqui com o idioma, presumi que ele usaria inglês porque o prompt estava em inglês. Mas, como você pode ver claramente, isso não está correto. Esse não é o caso. Então essa é a abordagem que você precisa adotar. Você aprende com esses pequenos erros e ajusta sua abordagem. Idealmente, com certeza, o modelo seria inteligente o suficiente, mas não consegue ler nossas mentes. Então, na próxima vez, você deve mencionar que deseja que o site esteja em inglês e deve otimizar as imagens com antecedência Porém, para a versão móvel, você pode realmente redimensionar seu navegador ou usar uma tecla de atalho Isso é para o Firefox. Você pode até escolher diferentes tamanhos de telefone. Mas o importante é que você procure problemas importantes, problemas espaçamento, problemas de alinhamento, coisas dessa natureza Mas sim, o Cloud four normalmente faz um bom trabalho. E sim, no geral, estou feliz. Não é um design fantástico, mas é muito sólido, e acho que a maioria das empresas teria mais clientes para fazer com ele. Ok, vamos fazer uma pausa rápida. 19. Faça o formulário funcionar: Bem-vindo de volta. O site parece muito bom, mas tenho certeza de que podemos traduzi-lo e melhorá-lo de várias maneiras. Mas a parte essencial é a funcionalidade. Temos um grande recurso aqui, que é o formulário de contato. No momento, ele não está conectado a nada, então não funcionará. Agora, o problema é o seguinte. Se preenchermos e tentarmos enviar uma mensagem , dirá que funciona que a solicitação foi enviada. Mas isso não é possível porque não está conectado a nada. Então, esse é outro ponto em que você precisa ser cético. Caso você não tenha certeza disso, basta perguntar ao modelo. Ei, para onde os e-mails estão sendo enviados? E deve dizer que, na verdade , não está funcionando. Agora, no passado, eu vi o Cloud 3.7 mostrar um erro aqui, um problema, um problema, e essa é uma abordagem muito melhor porque, como programadores do Vibe, podemos ser enganados É por isso que eu prefiro apontar essas situações. Se você não sabe, você pode ser um tolo. Mas sim, voltando ao assunto, temos uma conta de reenvio e preciso criar uma chave para que o formulário funcione O que eu adoro no reenvio é que, depois de fazer o login, o primeiro botão que você vê é adicionar uma chave de API, e é exatamente isso que queremos. E aqui está a coisa. Você clica nele uma vez e verá esses pontos, e pronto Eu disse antes, as chaves de API precisam ser protegidas exatamente como o número do seu cartão de crédito. E deixe-me explicar o porquê. Digamos que esta é minha conta real e eu me inscrevo no plano pago. Para fazer isso, vou ter que adicionar meu cartão de crédito, é claro, mas é a mesma coisa com o cursor. você precisa de um plano pago Depois de algum tempo, você precisa de um plano pago para tirar o máximo proveito dele. Ok, agora, digamos que eu mostre minhas chaves para dezenas de milhares de estudantes. Eles copiam e colam em seus próprios projetos e começam a usá-lo, certo? E depois de um tempo, recebo centenas de dólares em cobranças, talvez milhares. Por quê? Porque todos os projetos deles usaram minha chave. Então minha conta, então meu cartão de crédito. Eles começam a enviar e-mails e, claro, o reenvio vai me cobrar E é assim que essas chaves funcionam. É por isso que a maioria das plataformas mostra sua chave apenas uma vez e você precisa colá-la em um arquivo separado. Você não poderá vê-lo novamente na plataforma ao reenviar Claro, você sempre pode criar uma nova chave, e isso não lhe custará nada, mas não é ideal ter muitas e muitas chaves e não saber qual é qual. É por isso que vou desfocar minhas chaves privadas. Ok, voltando ao projeto, você pode criar um arquivo que armazenará todas as suas informações confidenciais. Mas minha primeira abordagem, minha abordagem preferida, é pedir ajuda ao modelo. Então, vamos escrever isso. Eu tenho uma chave de API do Resend Por favor, adicione-o ao projeto e eu vou colá-lo em um minuto. E então eu também vou enviar dois e-mails específicos, que você também precisa fazer. Temos um e-mail, que é um endereço padrão que deve ser o seguinte entregue em resend dot dev Isso é para fins de teste. Se você quiser enviar endereços de e-mail reais, precisará de um nome de domínio verificado, algo como resbarn.com ou qualquer outra coisa. Agora, por que isso? Bem, tenho certeza que você já viu e-mails como esses. Então, envie e-mails de spam dizendo que são da Netflix, da Amazon ou do seu banco. Mas, é claro, são falsos. Eles querem roubar as informações. E se você verificar o endereço, verá que não é o e-mail comercial oficial dessa empresa em particular. Então é isso que o RSnd está tentando evitar. Você não pode adicionar um endereço de e-mail falso aqui. Claro, não temos um real porque este é apenas um projeto de teste, certo? É por isso que você precisa usar esse endereço específico para fins de teste, entregar no ponto de reenvio Agora, o segundo e-mail, é aqui que o e-mail vai chegar. Então, depois de preencher o formulário, quem vai receber essa mensagem? Agora, esse deve ser o endereço de e-mail que você usou para se inscrever para reenviar Portanto, você não pode usar nenhum outro e-mail. Tem que ser aquele específico que você usou para reenviar quando se inscreveu. Novamente, tudo isso é para fins de teste. Se não tiver certeza, você pode voltar para reenviar, verificar sua conta e ver qual e-mail você usou Se você não seguir essas instruções, o formulário não funcionará e você ficará bravo com cursor por não fazer seu trabalho. Mas o modelo, ele pode revisar todo o código. Ele pode tentar consertar as coisas, mas obviamente não funcionará menos que você siga as instruções de reenvio Mas o problema é o seguinte. Depois de descobrir como usar essa plataforma, você está pronto. Você estará pronto para todos os seus projetos. É por isso que isso não é grande coisa. Ok, vamos ver o que o modelo faz. O arquivo que armazena todas as suas chaves e senhas é chamado env dot local Por qualquer motivo, isso está bloqueado. Portanto, o modelo precisa criar outro arquivo chamado exemplo. Isso é muito interessante. Vamos ver se o modelo resolve isso. Adoro o fato de Claude resiliente e não desistir imediatamente Ele tenta soluções diferentes, comandos diferentes. Nem sempre funciona, mas é bom ver que está tentando. É se esforçar. Quando você está programando Vibe, você pode ficar tentado a olhar para o telefone ou se afastar, mas eu o encorajo a manter o foco, mesmo que às vezes seja chato Depois de um tempo, o modelo realmente diz que resolverá o problema da imagem. E, curiosamente, eu não mencionei isso. Esta é uma bandeira verde. Isso é positivo. A questão é: isso realmente resolverá o problema? Nós vamos ver. Ok, vamos seguir em frente e ver o resumo Curiosamente, às vezes, no resumo, ele pode mostrar sua chave de API. Eu vou desfocar isso, é claro. Mas sim, aqui temos alguns detalhes, e as etapas dois e três são exatamente o que estou planejando. Visite o site e teste o formulário. OK. Mas o primeiro passo diz que eu tenho que iniciar o servidor sozinho. E se tentarmos atualizar o site, veremos que não vai funcionar Ok, então não podemos realmente pular essa etapa. Agora, o problema é que ele poderia ter feito isso sozinho, mas vamos lidar com isso sozinhos. Há um pequeno botão de execução na lateral. Clique nele e você verá, na parte inferior do terminal, como o servidor está reiniciando. Um pouco frustrante, mas não é grande coisa. Depois de alguns segundos, podemos voltar ao navegador e atualizar. A primeira coisa que quero verificar são as imagens. Eu ficaria extremamente impressionado se resolvesse isso sem que eu dissesse para fazer isso Mas não, na verdade não os consertou. Ok, vamos nos concentrar no formulário. Essa é a parte essencial. Tenho certeza de que receberemos uma mensagem de sucesso como antes. Garantiremos que os e-mails sejam enviados verificando o painel de reenvio e, em seguida, meu próprio e-mail pessoal Mas sim, aqui não está funcionando. Agora, o problema é o seguinte. Claude diz que precisamos criar o arquivo EMV de pontos nós mesmos, então ele não conseguiu fazer isso sozinho Novamente, não é o ideal. Ele nos dá o código exato. Então, vamos copiá-lo usando esse ícone super pequeno aqui. Lembre-se de ampliar sua interface se você não conseguir vê-la bem, Control plus Ok, eu não estou muito feliz, mas vamos fazer isso. Então, clique com o botão direito no painel esquerdo. Nessa lista, escolha novo arquivo. Em seguida, chame-o exatamente como o cursor diz dot nv dot Local. Ok, então dentro dele, vamos colar o que copiamos anteriormente Serão a chave e os dois endereços de e-mail. Para ser sincero, não sei se o servidor precisa ser reiniciado, mas vou atualizar o site e usar o formulário novamente Então vamos começar a partir daí. Enquanto isso, vou dizer ao Cursor que as imagens não estão carregando e que eu criei o arquivo EMV de pontos Acho que ele deveria saber que fizemos o arquivo manualmente. Mas o problema é o seguinte. Na verdade, o e-mail chegou. Então, vitória, coisa boa. Fantástico. Não há necessidade de contar ao Cursor sobre isso. Simplesmente funciona. Muito interessante. Você também pode verificar isso no painel recente. Você verá que um e-mail foi enviado há alguns segundos. Coisas tão incríveis. Fizemos nosso formulário funcionar. Parabéns. Sinta-se à vontade para testá-lo novamente. Mas sim, estou muito feliz que tenhamos conseguido e sem muita dor de cabeça. Vamos fazer uma pausa rápida. 20. Corrija as imagens que não estão carregando: Bem vindo de volta. O site parece muito bom e fizemos um grande progresso, mas o problema é o seguinte. As imagens não carregam. A abordagem é bem simples. Diga exatamente isso ao modelo. Não há necessidade de fornecer nenhum contexto adicional. Claude deve revisar o código e descobrir qual é o problema Agora, está pensando por quase meio minuto. Uau. Ok, até que ele descubra. Mas depois disso, diz que identificou o problema. Agora, enquanto funciona em segundo plano, você notará que às vezes mente. Sim, eu disse isso. Pode dizer que descobriu, mas na verdade pode não ser o caso Há muitas imagens engraçadas no reedit sobre essa situação Então, muitas pessoas já experimentaram a mesma coisa. Ou, da mesma forma, diz: Oh, você está certo, minhas desculpas quando você aponta algo que claramente não aconteceu Agora, na primeira vez que você vê essas mensagens, você pode ter uma reação positiva. Mas depois de vê-los pela 20ª vez, fica um pouco chato Aqui, podemos ver que ele está fazendo um monte de coisas. E depois de um tempo, ele até verifica o arquivo DOT ENV que criamos anteriormente Fizemos isso de acordo com suas instruções. É interessante que esteja dando uma olhada. Ele não tem conexão com as imagens, mas tudo bem, a propósito, observe no painel esquerdo, toneladas de arquivos feitos em apenas alguns minutos com apenas alguns prompts. Isso é uma coisa fantástica. Porém, para ser justo, ninguém realmente se importa com essas coisas. Tudo o que importa é o resultado final. E se o projeto realmente cumprir suas metas, obter mais leads para gerar receita, para expandir o negócio real, não estamos tentando gerar milhares de linhas de código, estamos aqui para resolver problemas e ajudar as empresas a acessar um site bem otimizado, ajudar as empresas a acessar um site bem otimizado entregue em apenas alguns dias Ok, interessante. Ele verificará a funcionalidade do e-mail, que eu não solicitei. Agora, isso é uma coisa boa ou ruim? Por um lado, estou feliz que esteja cuidando de nós e verificando se o projeto está bem construído. Ok, bom. Mas, por outro lado, pedimos que ele consertasse as imagens, não olhasse a chave de reenvio ou verificasse o formulário, certo Então isso pode ser um mau sinal. Isso pode mostrar que o modelo não se concentra na tarefa em questão. É por isso que sempre digo que você teste, crie alguns projetos com modelos diferentes do início ao fim e veja de qual personalidade você mais gosta. Uma coisa eu poderia mudar para um modelo diferente agora ou a qualquer momento, mas pela minha experiência, eu não o recomendo. A menos que você esteja realmente preso e o modelo esteja girando em círculos, não acho uma boa ideia trocar . Agora, o problema é o seguinte. Quando eu troquei durante algo que era muito importante, o novo modelo ficou realmente chateado com o modelo antigo. Não concordava com a estrutura do projeto, com a forma como o código foi escrito. Foi muito engraçado ver. É como se estivesse muito decepcionado por alguém não ter feito um trabalho bom o suficiente Então isso foi fantástico. E em vez de continuar com o modelo antigo deixado de lado, ele realmente começou a reescrever diferentes partes do código, mesmo que eu não tenha pedido isso É por isso que eu continuo dizendo que pode ser uma coisa boa o que está acontecendo aqui ou pode ser uma coisa ruim. Mas vamos pular para o resumo. Na maioria dos casos, ele dirá que está corrigido, mas você deve sempre ser cético e verificar três vezes. Então, vamos dar uma olhada e ver. E, sim, é exatamente isso que quero dizer, questões à esquerda e à direita O problema, no entanto. Isso é algo com o qual você precisa se acostumar. Tudo o que precisamos fazer é copiar tudo isso e colá-lo de volta no cursor. A propósito, às vezes você verá alguns arquivos referenciados acima do bate-papo Você pode deixá-los ou fechá-los. Isso realmente depende da situação. Aqui, eu não acho que eles precisem disso, então eu vou fechá-los. Agora, outra coisa, poderíamos potencialmente conectar esse navegador ao Cursor, mas eu prefiro copiar e colar alguns problemas. A maioria das pessoas diz que tem uma experiência melhor usando o navegador brave em combinação com o cursor Mas eu prefiro usar o Firefox e copiar e colar qualquer problema. Ok, só como observação lateral, parece que o problema tinha algo a ver com o cache Ok, tudo bem para nós. Isso é bom. Vamos esperar até que o modelo conserte isso. Pode demorar um pouco, mas vou acelerar as coisas. Ok, agora, vamos dar uma olhada no resumo. Novamente, o modelo diz que está corrigido. Ok, vamos testá-lo. Agora, um dos maiores problemas com a codificação do Vibe é confiar no modelo, confiar na inteligência artificial Veja, se se trata de coisas pequenas, o que acontece quando você tem um projeto real ou um cliente real e milhares de dólares estão em jogo? Esse é o maior problema. Problemas, bugs estão bem. Nós podemos consertá-los. Está tudo bem. Mas, novamente, não está funcionando aqui. As instruções não nos dizem que precisamos fazer mais nada. Basta visitar o site e as imagens devem carregar perfeitamente, mas isso não acontece. Estou apontando isso porque às vezes podemos pular alguma coisa Você sabe, talvez tenhamos que fazer algo manualmente, e se não lermos o resumo corretamente, obviamente, podemos perdê-lo, e a culpa será nossa, como foi o caso do arquivo EMV de pontos, tivemos que fazê-lo Mas aqui, não, deveria funcionar, mas não vamos dizer ao modelo que apenas algumas fotos são carregadas e que ele deve revisar o código inteiro e corrigir o problema. Ok, isso vai demorar um pouco porque eu queria revisar tudo, toda a base de código de forma abrangente Isso significa que estamos vendo alguns minutos sólidos de espera. Felizmente, esta é uma gravação para que eu possa acelerar as coisas Mas sim, no seu caso, você vai ter que esperar um pouco. Vou pular para o resumo, mas aqui está a pergunta Nós realmente nos importamos com qual era o problema real? Agora, por um lado, sim, porque talvez possamos evitar que isso aconteça novamente em nosso próximo projeto. Então, isso é uma coisa em que você deve prestar atenção a cada coisa que está acontecendo no chat. Por outro lado, não, na verdade não porque o resumo deve nos dizer o que foi corrigido, você sabe, qual foi o problema e como o corrigiu Isso significa que realmente depende de você revisar cada etapa, lê-la, tentar entendê-la e ver se você pode ajustar sua abordagem no futuro, se você pode fazer algo diferente. Ok, então o resumo, na verdade, não diz o que fez, coisas como o tamanho adequado da imagem, o que não me diz muita coisa Ele diz que desativou algo sobre a otimização de imagens para fins de depuração Portanto, esta parte me diz que o problema possivelmente está relacionado ao tamanho da imagem. Ok. De qualquer forma, vamos dar uma olhada e ver se todos aparecem. E sim, vitória. Tudo bem. Finalmente, uma coisa é uma nota lateral. Devo dizer que a imagem principal não me deixa feliz. A posição não faz muito sentido. Mas, no geral, está tudo bem e estou bem com o fato de as imagens estarem carregando. Nós consertamos isso. O formulário funciona. Agora é hora de continuar. Vamos fazer uma pausa rápida. 21. Faça o upload do site no GitHub: Bem vindo de volta. O site está instalado e funcionando, mas está somente em nosso computador local. Queremos poder compartilhá-lo com o mundo, então teremos que enviá-lo para o GitHub. Então, vamos dizer ao modelo que faça exatamente isso. Também gosto de mencionar o fato de que ele deve usar o Github MCP, que deve evitar que o modelo peça que façamos as coisas manualmente. Idealmente, eu gostaria de nem mesmo tocar no GitHub. O modelo deve fazer tudo. Por favor, esteja ciente de uma coisa. Você precisa adicionar seu token pessoal dentro do Github MCP dentro do cursor. Sem essa chave, isso não funcionará. Ok, ele vai dar uma olhada na minha conta, ver o que está acontecendo e criar um novo projeto. Isso é chamado de repositório. Esse é o termo correto, mas você pode se lembrar dele assim. Repositório do projeto. mesma coisa. Podemos ver que está usando a ferramenta MCP, o que é um bom sinal Um problema potencial que vejo é a grande quantidade de código que criamos, há muitos e muitos arquivos, mas veremos como isso acontece Ah, parece que há um problema. Diz que o MCP do Github realmente não funciona. Ok, vamos dar uma olhada. Clique no ícone de configurações no canto superior direito e isso abrirá as configurações do cursor. E sim, por qualquer motivo, nada realmente funciona. Todos eles são vermelhos, o que significa que há um problema. Para ser justo, muitos deles estão ativados. Ultrapassamos o limite, mas mesmo assim nem todos deveriam ser vermelhos. Isso é um pouco estranho. Agora, o problema é o seguinte. Na verdade, o modelo ainda está funcionando em segundo plano, bem, no lado direito, mas não será capaz de fazer nada. Talvez seja por isso que também tivemos alguns problemas com as fotos. Uma coisa que podemos fazer é tentar editar um deles e depois voltar às ferramentas do MCP Isso deve iniciar uma espécie de atualização. E no passado, isso resolveu alguns dos meus problemas. Mas agora, aqui, ainda não está funcionando. Eu acho que é melhor pararmos o modelo. É um daqueles poucos casos em que isso faz sentido, porque se você deixá-lo funcionando, pode fazer mais mal do que bem. A única coisa em que consigo pensar é em um reinício clássico. O bom e velho, você já tentou desconectá-lo e depois conectá-lo Ok, vamos dar uma olhada. Então espere alguns segundos. E agora, sim, um por um, o sinal verde, o que é igualmente engraçado e irritante O que posso dizer sobre isso? O que podemos aprender com esse problema? Não tenho ideia do que causou isso e não tenho ideia de como consertá-lo. Reiniciar não faz nenhum sentido. Mesmo se eu fosse um desenvolvedor sênior com 20 anos de experiência, acho que isso não faria sentido. A única coisa potencial é essa talvez tente desativar alguns MCPs que você normalmente não usa Obviamente, o Github precisa permanecer ativo. Ok, quando tivermos o sinal verde, vamos voltar ao bate-papo e enviar a mesma mensagem, mas também vou dizer que pretendo usar o Versll, que pode ajudar o modelo a preparar tudo, para que possamos ter menos problemas com o VerSL no futuro Ok, isso vai demorar um pouco. Não tenho certeza se é devido ao fato de termos muitos arquivos ou ao tamanho deles ou, por outro lado, pode ser devido ao fato de que, a essa hora do dia, muitas pessoas estão usando o cursor Cloud O fato é que diminuiu bastante. Enquanto isso, deixe-me contar algumas coisas sobre o Github Agora, o legal é que você não precisa fazer nada no github.com, mas como isso ajuda Bem, o GitHub se torna mais do que apenas um intermediário entre o cursor Quando seu projeto está no GitHub, você cria um backup de controle de versão que é público ou privado, dependendo do que você escolher Agora, o que é controle de versão? Então, digamos que essa será a primeira versão com uma forma muito básica, muito simples, certo? Então você pode criar um formulário muito mais avançado onde talvez o visitante possa escolher uma hora, serviços e outras coisas, certo? Você o traz para o cliente. Você faz isso ao vivo. Mas depois de um tempo, você recebe um telefonema. Ei, Chris, estou tendo menos compromissos. As pessoas não estão gostando do novo formulário. Você pode, por favor, trazer de volta o antigo? Oh, isso seria doloroso. Você teria que voltar ao cursor e remover todo aquele código extra que pode causar bugs. O formulário pode quebrar, o site inteiro pode quebrar. Mas é aqui que o controle de versão entra em ação. Com o GitHub, é como salvar jogos carregando jogos. Você simplesmente volta para a versão anterior ou para qualquer versão, para ser honesto. Desde que esteja no GitHub, você pode ter vários. Você pode ter versões separadas com base em esquemas de cores, funcionalidades, layouts, etc Então, o GitHub ajuda você a organizar tudo isso. Controle de versão. Agora, é super simples? Não, na verdade não. Demora um pouco para se acostumar com isso. Mas como temos o cursor, simplesmente dizemos ao modelo o que queremos e ele o fará. Vamos apenas dizer: Ei, traga de volta a versão vermelha do esquema ou traga volta o formulário de contato que tinha apenas três campos. Isso é controle de versão. Esse é o poder do Github. Em seguida, público ou privado. Público significa que outras pessoas podem ver você no trabalho, e isso é muito útil caso você queira conseguir um emprego ou colaborar com outras pessoas Se você quiser se exibir no trabalho, o que você pode fazer, com certeza, é torná-lo público. Provavelmente você o manterá privado caso queira vender este site a um cliente. Então isso é controle de versão, público ou privado. Mas o mais importante essa é a ponte perfeita entre o código local e o cursor e a implantação on-line e a publicação Veja, plataformas como a Versll estão profundamente integradas ao Github Então, quando seu site estiver pronto para ser lançado, Versll poderá examinar seu projeto do Github e dizer: Ok, vejo seus arquivos, vejo suas configurações, vejo suas últimas alterações Eu tenho isso, e vai ser publicado. Isso significa que você não precisa fazer nada manualmente. Você não precisa fazer upload de arquivos nem fazer configurações. Você não precisa de uma empresa de hospedagem, nada. Você acabou de conectar o Versll ao seu repositório do GitHub, o que faremos em um E então bum, é isso. Seu site está ativo. E isso é extremamente poderoso porque mantém tudo automatizado e limpo Se você fizer alterações em seu projeto posteriormente no cursor, solicitará que o modelo atualize o Github e pronto Automaticamente, o Versll recebe um sinal para atualizar a versão ao vivo do site Sem etapas extras. É tudo automático. Está tudo conectado. Fantástico. Então, em termos simples, o cursor é onde você constrói o site. Github é onde você o armazena e, em seguida, o Versll é onde você faz viver para que o mundo o veja Ok, voltando ao projeto, parece que o modelo parou. Por qualquer motivo, analisou as regras que estabelecemos. E então parou. Isso é muito estranho. A melhor maneira de fazer isso é perguntar. Você fez o upload do site para o Github? Posso enviá-lo para Versll e ver o que diz? Fale com ele como você falaria com um desenvolvedor, faça perguntas quando não tiver certeza. E parece que está reiniciando do zero. Não sei por que esse é o caso. Então, vamos ver. Depois de um tempo, recebemos um resumo que não faz sentido. Tenho certeza de que é alucinante, que está imaginando coisas Então, eu vou fazer isso. Vou fazer um novo bate-papo. Mas vamos fazer uma pausa e continuaremos em um segundo 22. Quando começar um novo bate-papo: Bem vindo de volta. Dentro do novo chat, vamos dizer ao modelo que o site foi parcialmente carregado e que ele deve usar o MCP do Github para concluir o trabalho, para que possamos continuar vendendo. Ok, vimos como a modelo teve dificuldades para fazer o upload do site para o Github Agora, no passado, esse era sempre um trabalho de dois minutos para mim. Mas aqui, o modelo está realmente passando por momentos difíceis. Claro, inicialmente, o GID Hub MCP não funcionou, é claro, mas corrigimos isso para reiniciar Agora, não há razão para que funcione tão lentamente. Quando você vê algum tipo de degradação, quando vê que o modelo não está respondendo corretamente, é hora de iniciar um novo bate-papo Você pode fazer isso do lado superior direito. O cursor também informará quando for esse o caso, mostrando uma mensagem no canto inferior direito. Porém, para ser justo, isso aparece bem cedo e com bastante frequência. Agora, em resumo, se a conversa for muito longa, a IA também não funcionará. Vai ficar sobrecarregado. É por isso que é melhor dividir seu projeto em vários bate-papos Por exemplo, a tradução do site deve ser feita em um novo chat Se quisermos melhorar o formulário, adicione algumas coisas a ele, novamente, um novo bate-papo. Se você quiser alterar o esquema de cores, novamente, novo bate-papo, e isso lhe dará os melhores resultados possíveis. outro lado, quando tivemos dificuldades com o fato de as imagens não carregarem, é melhor continuar com essa conversa até chegar a uma conclusão Ou está fixo ou o modelo não faz absolutamente nenhum sentido, e está claro que você não pode continuar com ele. Aqui, eu tenho que te dizer que isso, bem, foi um pesadelo Isso levou muito tempo, algo em torno de 45 minutos no total. Cada arquivo demorava muito tempo e, mais do que isso, era incrivelmente irritante A modelo disse a certa altura que não via nenhum projeto no Github e decidiu criar um novo Obviamente, isso é muito frustrante porque acabamos de dizer que o upload foi parcialmente feito Eu teria gostado que a modelo parasse e me perguntasse sobre isso. Em vez disso, continuou. Agora, para ser justo, estou feliz em continuar progredindo, mas agora vou ter que limpar o projeto anterior no Github Eu vou ter que removê-lo. São apenas alguns cliques. Não é difícil removê-lo. Mas não gosto do fato ele não ter conseguido ver o que acabamos alguns momentos atrás e do fato de eu ter dito claramente no aviso que o enviamos parcialmente. Para ser justo, iniciamos uma nova conversa, mas mesmo assim eu esperava um pouco mais dela Depois de muita espera, o site finalmente foi carregado no Github. Podemos ver todos os arquivos quando eles foram enviados, bem como uma descrição. O que eu adoro nesses modelos é que eles escrevem muitos detalhes. Tudo está claramente explicado. Isso vai ajudar a todos. Isso vai ajudar a si mesmo, a qualquer potencial empregador, qualquer programador com quem você possa trabalhar, mas também a qualquer outro modelo de IA que você possa usar no futuro Porque esse é o problema. Talvez você continue com este projeto com outro modelo, mas talvez lance uma versão. Está funcionando bem, mas você quer contratar um programador para corrigir alguns problemas que você não consegue gerenciar sozinho Com tudo organizado tão bem, as coisas vão ficar mais fáceis e rápidas E com isso, podemos fazer uma pausa e em breve iremos para Versll, o que significa que poderemos compartilhar o site com qualquer pessoa Te vejo em um segundo. 23. Publique o site e compartilhe-o com qualquer pessoa: Volte. Nosso site está no Github, e isso é ótimo porque o Versll está integrado a ele. E aqui está como isso acontece. Eu já tenho um projeto aqui, mas você vai pular para a próxima tela Você verá esse aqui. Então é isso que você verá ao iniciar o VSL pela primeira vez e conceder acesso à sua conta do Github. Aqui, podemos ver que o projeto VDClinic é o primeiro da lista Precisamos clicar em Importar. Então, isso iniciará o processo. Para garantir que as coisas funcionem bem, precisamos fazer um pouco de configuração, mas é só um pouco, e isso é feito clicando aqui nas variáveis de ambiente, que parece muito sofisticado Mas, na verdade, só precisamos colar a chave recente e esses dois endereços de e-mail. É isso mesmo. Nada mais. Agora, depois de fazer isso uma vez, você verá como isso é fácil. Ok, de volta ao cursor, você precisa abrir o arquivo ENV que criamos anteriormente A partir daqui, copie o lado esquerdo, a chave de API de reenvio Em seguida, volte para Versll e cole no campo esquerdo. Oito. Agora, repita para o lado direito. É exatamente tão fácil, nada tão especial. Obviamente, você precisará usar o botão adicionar mais porque temos três coisas no total. Então, a chave para o e-mail. E, finalmente, por e-mail. Vou acelerar até a largura, mas sim, estou feliz que isso seja tão simples. Agora, este é um podcast em que o fundador do VerSL diz que toda a abordagem é poder lançar um site em pouco tempo Essa velocidade para eles é crucial, essencial. E você sabe o que? Depois de usar este serviço por um tempo, tenho que concordar. Eu criei várias contas e é sempre fácil Oh, por favor, certifique-se de copiar e colar com precisão. Não omita nenhum caractere e não inclua espaços extras. Isso pode causar grandes problemas , pois é provável que você não receba um erro sobre isso. A propósito, os desenvolvedores não dizem: Vamos publicar um site. Eles dizem que implante o site. E isso vai demorar um pouco, geralmente um ou dois minutos. Porém, na maioria dos casos, na primeira vez, a implantação provavelmente falhará. Não é difícil de corrigir, mas precisamos esperar até que o processo seja concluído. Você já deve notar o ícone de cópia no canto superior direito. É isso que vamos usar para pegar os problemas, os erros e depois colá-los de volta no cursor, porque tenho certeza de que isso será inevitável para a maioria dos projetos. Temos alguns problemas aqui. Vamos transferi-los para que o cursor possa corrigi-los. Vou fornecer um pouco de contexto. Vou dizer ao modelo que estou usando o Versll e que estou recebendo esses erros Então eu vou colar a coisa toda. OK. Sim, então parece que há um problema com o NextGS, que é totalmente normal para nós. Nós realmente não nos importamos. Desde que o modelo seja capaz identificar e resolver o problema sozinho, fico feliz. Agora, isso pode levar algum tempo porque a IA precisa revisar vários arquivos, mas também precisa publicá-los no Github. Lembra disso? O Versll pega todos esses arquivos automaticamente do Github. Se tivermos sorte o suficiente, isso não deve demorar muito, mas veremos se é esse o caso. E, infelizmente, neste caso, nesta noite, as coisas estão bem lentas Na verdade, isso levou cerca de 40 minutos e 40, mesmo que isso não seja nada tão complicado. Só posso imaginar o quão irritante isso deve ser se for sua primeira experiência com um projeto mais sério Mas estou bastante confiante de que as coisas vão ficar cada vez melhores. O pessoal da Cursor está constantemente melhorando as coisas e, na verdade, eles acabaram de anunciar uma instalação do Winclick para os MCPs, então você não precisa mais lidar com esses trechos Até agora, não temos muitas ferramentas, mas ainda há progresso. Outra coisa que vale a pena notar Versll tentará constantemente publicar para implantar o site Portanto, caso você dê uma olhada e veja muito vermelho, não se preocupe, não é grande coisa Você também pode receber muitos e-mails sobre as falhas. Poderíamos potencialmente pausar o Versll até que o modelo termine seu trabalho com o GitHub, mas vou mantê-lo funcionando, mesmo que recebamos algumas Ok, parece que o modelo está pronto. Ótimo, mas teremos que esperar para ver se vamos receber luz verde. Em alguns casos, talvez seja necessário copiar e colar várias vezes, então o cursor precisa corrigir vários problemas. Isso realmente depende do tipo de projeto e do desempenho do modelo naquele dia específico. Uma coisa, porém, lembre-se de que há um pequeno atraso entre a atualização do um pequeno atraso entre Github e a Versll perceber isso Não demora muito, talvez alguns minutos, mas não entre em pânico caso não veja uma nova implantação aqui. Uma nova implantação significa simplesmente que Versll está tentando publicar o site novamente. E podemos dizer isso neste edifício pela luz amarela. Na verdade, podemos clicar nele e obter mais alguns detalhes. Lá dentro, recebemos várias informações, mas na verdade estamos interessados apenas no status. É verde ou não? Caso esteja vermelho, faremos mais algumas ações de copiar e colar. Mas espero que, com os dedos cruzados, fique verde. Por volta dos dois minutos, estou um pouco ansioso, mas vou esperar um pouco mais. Mas aqui está o problema. Talvez você queira atualizar por precaução. E sim, vitória. Está pronto. É verde. Estamos prontos. Vamos dar uma olhada no nosso site. É claro que o link vai ficar muito feio e complicado, e as imagens parecem não carregar Mas sim, o site está ativo e agora podemos compartilhá-lo com todos. Isso é uma vitória? Sim, ainda é um grande progresso. Podemos consertar qualquer coisa agora que a cadeia está estabelecida. Cursor Github Versel. Deixe-me fazer uma pausa rápida e voltaremos para corrigir quaisquer problemas. 24. Traduzir o site: Bem-vindo de volta. Fizemos um progresso sólido até agora, mas vamos continuar. Inicie uma nova conversa e peça à modelo que mude o idioma para inglês. Agora, caso você não tenha esse problema, você pode trabalhar em qualquer outra parte e há muito o que aperfeiçoar. Agora, aqui, o modelo começa a funcionar bem rápido e parece entender o que precisa fazer. Do meu lado, espero que isso leve alguns minutos, na verdade, bastante curtos Mas lembre-se de que é bem tarde da noite, e muitas pessoas no Redi especulam que esse é o erro urgente, que isso não é Mas aqui, o modelo está avançando pouco a pouco. Eu quero mencionar uma coisa. Em meus projetos anteriores, tive alguns problemas ao atualizá-los. Adicionando coisas simples, adicionando várias atualizações, vários pequenos pedaços. Qualquer mudança simples fez que o modelo revisasse todo o projeto, o que é totalmente bom, com certeza. Mas, às vezes, também está refazendo coisas, refazendo coisas que não deveria Por exemplo, você pede que ele corrija o estilo de um botão, digamos, certo? Mas então ele implementa todo um sistema de design. Basicamente, matar demais, usando uma marreta para matar uma mosca, E aqui está outro exemplo. Eu atualizei um dos meus aplicativos Android e queria usar o Material Design 3 Acabou de ser lançado, certo? E isso levou mais de 45 minutos. E então muitos problemas, toneladas de avisos. E depois de tudo dito e feito, após 45 minutos, o aplicativo parecia idêntico. Nenhuma alteração, mas toneladas de arquivos, toneladas de código. É por isso que desenvolvedores experientes não levam a sério a codificação Vibe Claro, você pode lançar um projeto, mas depois atualizá-lo constantemente, mantendo-o. Isso é muito difícil de fazer. Até agora, consegui fazer isso, mas acho que você precisa ajustar suas expectativas. Se você fizer isso, você vai ficar bem. E aqui está como eu vejo isso. Depois de validar, depois de ver que o projeto está ganhando força, você pode aumentar o nível de suas assinaturas para poder fazer um Você pode usar modelos mais inteligentes ou, por outro lado, contratar um desenvolvedor, e os custos podem ser bem menores porque você fez a maior parte do trabalho pesado e tudo está bem Mas, novamente, por outro lado, isso realmente depende da natureza do projeto, porque eu trabalhei com muitos programadores que abordam um projeto de uma forma muito, muito específica Eles usam apenas certas tecnologias, e é algo como dizer que você nunca bebe nada além de coca, por exemplo, que você sempre usa um iPhone, nada mais, você sabe, o Code tem uma abordagem semelhante Eles são um pouco rígidos porque sabem qual abordagem lhes dá o melhor resultado É por isso que, por exemplo, certos desenvolvedores não gostam do Wordpress, ou nunca usariam o Magento e assim por diante Portanto, há uma pequena chance que qualquer coisa que você possa usar no próximo JS, certo, talvez alguns desenvolvedores não gostem disso e, nesse caso, isso pode ser mais caro. As coisas são muito fluidas e estão sempre mudando. O fato é que a taxa de melhoria é fantástica. Oh, três acabaram de ser cortados. Agora é 80% mais barato. E sim, as coisas estão ficando cada vez melhores. Mas mesmo nesse momento, você ainda pode entregar projetos funcionais que façam o trabalho. Eles podem não ser os projetos mais complexos, certeza, mas você pode fazer isso. E depois de alguns meses, quando os modelos ficam ainda melhores, você está no banco do motorista. Você está aí e tem experiência. Você sabe como trabalhar com modelos e várias plataformas, como Github, Versll e assim por diante Então, no geral, você vai ser dourado. Certo. Neste ponto, isso é um pouco ridículo O progresso está no ritmo de um caracol. A nuvem quatro está se arrastando. É por isso que estou lhe dizendo, você tem que ser paciente, como um zen, e deixar toda a frustração passar. A tarefa é muito, muito básica, mas Claude está agindo como se estivesse movendo montanhas, sabe? Então, o que vou fazer é aumentar drasticamente a velocidade do vídeo para que não fiquemos aqui o dia todo. Mas eu realmente queria incluir todas essas partes, mesmo que eu pudesse facilmente excluí-las do curso. Para mim, é essencial que você saiba que esperar é, na verdade, uma grande parte da codificação do Vibe Ficar entediado, claro, não é o ideal, mas esse é o preço que às vezes temos que pagar Lembre-se de que sua experiência pode ser muito diferente, mesmo com o mesmo modelo Mas, novamente, do outro lado disso, você realmente deve tentar a mesma abordagem com exatamente a mesma solicitação com um modelo diferente. Por exemplo, digamos Gêmeos. O fato é que essas empresas estão em uma guerra massiva. Google e Tropic Open AI, só para citar alguns. Twitter com XAI As empresas chinesas estão fazendo um trabalho fantástico. Claro, meta, Facebook. Eles também são importantes nesse espaço de IA. Então, isso está mais empolgante do que nunca. E nós, como consumidores, vamos nos beneficiar. Imagine as principais empresas de automóveis ou telefonia travando essa batalha. Mas o problema é o seguinte. O ciclo leva semanas, não anos. Então, com carros e telefones melhores, mais rápidos e mais inteligentes, também mais baratos. Mas isso está acontecendo super rápido, como se a cada duas semanas, você tivesse um projeto totalmente novo, muito à frente dos anteriores Isso é fantástico para nós. Ok, parece que temos que retomar a conversa. Ok, não se preocupe. Mas é claro que estamos tendo o mesmo problema de antes, problemas de conexão. Ok, a propósito, minha velocidade aqui, a velocidade da Internet é fantástica no meu país. Um dos mais rápidos da Europa. Mas tudo bem, vamos consertar isso. O problema é o seguinte. Em vez de reiniciar o cursor, também podemos fazer isso, iniciar uma nova conversa usando o ícone superior direito Em seguida, olhe para baixo e abra o bate-papo anterior. Você verá o mesmo problema, mas aqui está a diferença. Agora podemos digitar e continuar, e espero que possamos retomar o processo a partir desse ponto, ou menos. Esse é o plano. De qualquer forma, não há garantia. Então, vamos ver o que diz o modelo. E sim, está realmente pensando nisso. Então eu acho que tenho que acelerar isso. Ok, diz que a tradução está concluída e isso vai enviar tudo para o Github. Ok, tudo bem para mim. Vou deixar que funcione em segundo plano. E depois de muito tempo, ainda não superei o processo de pensamento desse modelo, como ele se confunde, como ele vê uma situação e tenta consertá-la. Mas sim, vamos seguir em frente porque é bem provável que seu design já esteja em inglês Eu realmente acho que a localização da clínica determina o idioma. Deixe-me saber na seção de comentários, se na sua versão, você tem seu próprio idioma com base no endereço da clínica. Eu, claro, uso o falso, claro, mas uso o aleatório da minha cidade, do meu país, daí o idioma. Oh, uau, algo está errado aqui. Por alguma razão, o modelo está me pedindo para ir ao Github e criar um novo projeto E isso não faz nenhum sentido. Claramente, deu errado, e isso é um sinal de que precisamos mudar para um novo chat. Se isso continuar por mais três, quatro, cinco solicitações, provavelmente trocarei de modelo A propósito, sempre verifique se o Github MCP está funcionando Se estiver vermelho novamente, se estiver quebrado, isso faria sentido. Mas, do meu lado, está tudo bem, que significa que o modelo simplesmente não seguiu minhas instruções por qualquer motivo. Para evitar isso, vou pegar o link do repositório diretamente do GitHub para não ter dúvidas sobre isso Se apontarmos o modelo diretamente para o projeto no GitHub, ele poderá atualizá-lo sem problemas E, a propósito, essa é a situação em que você pode usar um modelo diferente. A tarefa é super simples. Não precisa de nenhum outro contexto. É só fazer o upload de alguns arquivos para a web. É isso mesmo. Então, nesses casos, há pouco ou nenhum risco. Não estamos pedindo ao novo modelo que entenda completamente o código ou o aprimore. Não, então essa seria uma boa chance, mas eu quero continuar com o Cloud four. Quero usá-lo do início ao fim porque acredito que é assim que você também deve trabalhar. Use isso, fique frustrado. Anote todos os problemas que estão causando e compare-os com outra coisa. Essa é a melhor maneira de aprender. Aqui, temos um novo problema na primeira vez que o vejo, um limite de taxa com vértice, não faço ideia E está pedindo que usemos o modelo Auto Select, o que não é ideal nesse caso porque queremos aprender. Ele diz que podemos esperar alguns minutos e tentar novamente. Isso é o que eu vou fazer. E agora vou clicar em retomar e ver como funciona. Agora, enquanto isso está funcionando, deixe-me dizer por que a seleção automática não é uma boa ideia para nós. Queremos aprender sobre esses modelos. Queremos ver coisas como eu não sei, por exemplo, eu não sei, Chat GPT 4.1 não é capaz de mover imagens, ok? Como Claude se esforça para traduzir um site? Como imini é horrível em espaçamento, qual alinhamento? você só pode chegar a essas conclusões propósito, você só pode chegar a essas conclusões que são falsas. Se você usar esses modelos por horas a fio, talvez dezenas de horas, eu ainda mantenho a afirmação. Os modelos mudam o tempo todo. Eles evoluem, embora tenham o mesmo nome de usar o Cloud four aqui, mas o Cloud four você pode usar em uma semana, em um mês, que pode agir de uma maneira completamente diferente Por que esse é o caso é um pouco mais complicado. Talvez antrópico, a empresa por trás disso o ajustou um pouco Talvez o Cursor tenha feito algumas mudanças. Talvez haja menos pessoas usando o modelo naquele momento, ou talvez os servidores tenham sido atualizados, para que mais pessoas possam usar o modelo ao mesmo tempo, mas sem qualquer degradação, é complicado, é complicado Mas, claro, aqui está outra falha de conexão, o que é fantástico. Isso é muito bom para uma tarefa tão pequena. Mais uma vez, acalme-se. Vamos fazer um novo bate-papo e depois voltar. Quero continuar essa conversa porque sinto que estamos perto de um resultado. Então, vamos ver o que é o quê. O modelo menciona algo que está quase pronto. Para ser justo, não acredite. Sempre verifique. Acho que nada foi atualizado. Você pode dar uma olhada no Github e ver quando o último push aconteceu Push significa simplesmente atualizar. Mas sim, muitos problemas. Super buggy Essa é uma experiência horrível e, como você pode ver, não tem nada a ver com o site real ou com a codificação do Vibe É apenas o processo de usar um modelo que está sobrecarregado, pelo menos neste momento GitHub, podemos ver que o último push aconteceu há 5 minutos. Isso significa que Versll provavelmente atualizou algo nesse meio tempo Então, vamos verificar a implantação mais recente e ver se esse é o caso. Vamos dar uma olhada. E, sim, isso está em inglês. No entanto, temos que verificar tudo, do início ao fim, e ver se está completamente pronto. Acho que está cerca de 95% traduzido. Pode haver algumas partes aqui e ali, mas, no geral, está tudo bem. Mas o que está acontecendo no Cursor, porém, eu não tenho ideia. Parece que o modelo quer fazer um novo projeto, um novo repositório no Github Não tenho ideia de por que tem uma amnésia tão horrível. Acho que pode ter sido uma espécie de interrupção. Normalmente, o Cloud four funciona muito melhor do que isso. Podemos tentar ver um processo de pensamento, mas, para ser honesto, eu realmente não sou tão curioso. O fato é que estamos ao vivo. O site está traduzido e, embora isso não pareça uma vitória, ainda assim progredimos. Então, vamos fazer uma pausa rápida, reagrupar e ver o que podemos fazer a seguir Obrigado por ficar comigo, e espero que isso não o desencoraje de programar vibrações Chegamos cedo e isso aparece, mas estou bastante confiante de que esses problemas mas estou bastante confiante de que esses problemas são pequenos que serão corrigidos em breve. Então, no geral, vamos continuar. Eu vou te ver em um momento. 25. Como comprar nosso próprio nome de domínio: Bem vindo de volta. A estrada estava acidentada, mas, no geral, conseguimos ter um site bonito Isso está em inglês com um formulário funcional e já está hospedado no Versll Isso significa que poderíamos compartilhá-lo com o mundo, mas o problema é o seguinte. O link é muito feio. Para fins de teste, isso é ótimo. Se você quiser apresentar seu trabalho ao cliente antes que o projeto seja lançado, novamente, tudo bem. Mas e se você quiser um bom link, um bom endereço? Isso significa que você precisa comprar um nome de domínio. Você pode fazer isso diretamente do VSL. Esta é minha conta no canto superior esquerdo. E aqui podemos ver o interior do projeto. Ok, a partir da navegação, podemos ir para as configurações. Nesta nova página à esquerda, podemos encontrar a caixa lateral com algumas opções, mas estamos interessados em domínios. E aqui estamos. Esse é o link existente, que é o caminho do ideal. Então, vamos fazer isso. Vamos usar o botão Por domínios e ver o que está disponível Agora, domínios curtos e elegantes quase sempre estão indisponíveis. Toneladas de empresas compraram milhares de domínios e transformaram seu negócio revendendo-os Meu conselho é ficar longe disso. Use seu nome ou uma palavra que signifique algo para você. E é por isso que, há muitos anos, seu nome de domínio realmente importava Então, ter algo como tutoriais do Photoshop, isso teria sido uma vantagem Mas hoje em dia, esse não é o caso. Isso é irrelevante Então, vou usar meu próprio nome, mas a versão.com não está disponível porque eu já a comprei O que eu adoro no Versll é o fato de obter o máximo de transparência aqui Podemos ver todas as opções disponíveis. Alguns deles são incrivelmente caros. Por exemplo, res barn.ai custa 149 dólares, e isso não faz nenhum sentido Eu vejo uma versão.net aqui, e custa apenas 12 dólares, e acho que isso faz sentido Versll já tem meu cartão de crédito registrado porque eu fiz a compra anterior Então, tudo o que preciso fazer é confirmar que quero comprá-lo. Claro, vou ter que confirmar a transação com meu banco, mas isso não é um problema. É o mesmo que acontece com qualquer transação na web. Mas, sim, isso é tudo o que é preciso para acumular um nome de domínio simples assim Agora vamos ver isso neste painel. Mas vamos voltar ao projeto para que possamos vinculá-lo. Então, na página inicial, clique no projeto VT. Agora, dentro dele, podemos ver os domínios no canto superior direito. Não é exatamente óbvio, mas em breve você se acostumará com a interface do Vasels Ok, vamos clicar nele e agora estamos de volta a esse ponto. Só que desta vez, vamos clicar em Addmain E, claro, vamos selecionar chrisbarn.net que Por favor, marque esta caixa. É um cenário importante. Agora, Vasl vai nos perguntar se queremos fazer o upload da versão de produção e, claro, esse seria o caso E isso porque poderíamos potencialmente ter uma versão diferente, e aqui está o porquê. Podemos lançar este site como está, mas depois podemos continuar trabalhando nele. Talvez tenhamos um teste para apenas alguns amigos, uma nova versão um pouco diferente. Então é aí que várias implantações entram em uso. Mas esse não é o caso aqui, então vamos simplificar, você sabe, clique em salvar, e então teremos que esperar um pouco. Há muitos detalhes nos quais poderíamos nos aprofundar, mas quero manter o foco em definir esse processo, desde a ideia até o lançamento do site o mais rápido possível O certificado SSL é algo que a maioria dos sites deveria ter, mas leva alguns minutos para ser gerado e configurado Vou seguir em frente e, sim, aqui estamos. Agora podemos visitar chrisbarn.net. Este é um site adorável. Não precisamos mais desse link feio. Ainda funciona, mas agora podemos usar este. Então, tudo pronto, o site não está polido. Precisa funcionar, mas a primeira coisa é consertar as imagens. Eles não estão carregando. Então, vamos voltar ao Cursor, abrir um novo chat e dizer exatamente isso à modelo. Na verdade, você sabe o que? Talvez seja uma ideia melhor reiniciar o programa, considerando quantos problemas tivemos. Honestamente, não sei se uma reinicialização realmente ajuda, mas vi que o modelo está com problemas, até mesmo ao escrever palavras Portanto, não é um código real, mas frases, o que significa que o desempenho é muito lento. É como se eu estivesse usando um computador de vídeo, o que não é o caso. Mas sim, vamos ver o que é o quê. Portanto, o prompt é bem simples. As imagens, que não estou carregando, consertam isso e atualizam o site. Agora, isso é um pouco vago, para ser honesto. Eu deveria ter mencionado o link do GitHub. Então, sim, vamos ver se isso vai acontecer. De qualquer forma, fora das corridas, veremos o que vai acontecer. Então, o modelo vê as imagens e começa a investigar o problema. Ok, a velocidade parece um pouco melhor. Parece que o reinício pode ter ajudado um pouco, mas ainda é cedo. Então, vamos ver o projeto funcionando e depois decidiremos, mas pelo que estou vendo, não, na verdade ele ainda está com dificuldades. Bem, talvez essa não seja a palavra correta, mas eu esperava que o problema fosse algo bem simples de corrigir, como algumas linhas de código em algum lugar, mas talvez os arquivos não o enviassem para Github por causa desses problemas, sabe Mas o modelo, coágulo quatro, na verdade é demais. Está realmente demorando. E pelo que vejo, está inicializando servidores. É criar uma página de teste, um servidor de teste. E isso é realmente muito impressionante. Esta é uma bandeira verde, embora seja um pouco chata, para ser sincero. Então, dê uma olhada aqui. Ele cria um servidor no qual podemos testar e ver se as imagens estão realmente funcionando, se estão carregadas. E isso é fascinante. E sim, podemos ver que 11 das 11 imagens estão realmente sendo exibidas. Porém, para ser justo, dê uma olhada nos tamanhos. Eles são absolutamente enormes. Então, esse é um problema que definitivamente poderíamos resolver para projetos futuros. Mas, para ser sincero, eu realmente sabia que isso provavelmente causaria um problema. Agora, o problema é o seguinte. Portanto, os modelos podem otimizar as imagens para nós, quer você pergunte diretamente ou o que o modelo sugere. Essa foi a parte que eu estava tentando capturar na gravação. Aqui, porém, isso causou muitos danos, mas ainda assim é uma boa experiência de aprendizado. Então, agora você pode evitar isso. Então, vamos ampliar e ver o que o modelo está fazendo. Então, avance rápido, e acho que está feito. O resumo é enorme. Impressionante. Muitas e muitas linhas. Isso é muito útil porque podemos ler algo em inglês simples. No entanto, a questão é: o modelo resolveu o problema? Primeiro, precisamos verificar o Github. Se não houver nenhuma atualização recente no Github, não há chance de que a versão funcional do site nos mostre imagens Lembre-se de que ainda contamos com o Github como intermediário entre o cursor E não, eu não vejo uma atualização recente. O modelo esqueceu ou não entendeu minha solicitação porque, para ser justo, eu fui um pouco vago Mas não se preocupe. Vamos fazer isso. O projeto está aqui e eu vou dar a ele o link real. Isso deve evitar possíveis problemas. Ok, vamos ver o que é o quê. Ok, o modelo parece entender. Está abrindo um terminal e provavelmente vai dar uma olhada. Isso às vezes leva um bom tempo. E às vezes ele realmente congela. Isso é um grande problema porque não há barra de progresso. Não há uma boa maneira de verificar se ainda está funcionando ou não, com pelo menos nenhuma que eu conheça. O que eu gosto de fazer é clicar aqui em Mover para o plano de fundo. Isso é muito, muito pequeno, mas espero que você possa ver. E isso funciona como uma pequena atualização. Agora, depois de alguns segundos, parece que ainda está funcionando, então estamos de volta aos trilhos. Agora, a tarefa é simples. Faça o upload de alguns arquivos para o Github. Isso deve ser fácil, certo? A propósito, poderíamos potencialmente usar o terminal e fazer o upload dos arquivos nós mesmos. Na verdade, não é tão difícil. Os comandos não são complicados, mas o problema é o seguinte. Eu quero que o modelo faça isso. Ele pode fazer isso. Então, é claro, deveria fazer isso. E por outro lado, eu prefiro descobrir suas limitações, você sabe, encontrar sua personalidade, explorá-la, ver o que é o quê. É claro que poderíamos trabalhar mais sozinhos , mas esse não é o ponto. Claro, se algo é impossível, o modelo não pode realmente fazer isso. É claro que vamos fazer isso. Mas quando eu sei que o modelo pode fazer isso sozinho , não vou sair da minha cadeira para ajudá-lo. Se for mais do que capaz , deve fazê-lo. Mas sim, isso está demorando muito. Todo esse processo levou cerca de 25 minutos. Incrivelmente frustrante. E aqui está a coisa. Depois de um tempo, parece ter reiniciado o processo de pensamento, que não é normal É pensar novamente e planejar os próximos movimentos. É só fazer o upload de arquivos. É isso mesmo. Então, é como se alguém tivesse desconectado o modelo e depois o conectasse Amnésia, eu esqueci. Claro, não falhou. Não nos pediu ajuda. Mas está escondendo um pouco o fato de que falhou, o que é uma grande bandeira vermelha. Esses modelos são treinados para não deixar de encobrir seus erros. Combine isso com o tempo limite de 25 etapas e os falsos problemas de conexão E eu posso ver por que muitas pessoas não estão apaixonadas por isso, especialmente desenvolvedores seniores. Agora, quero ser aberto e transparente sobre esses problemas, para que você saiba o que pode esperar. Alguns programadores do Vibe acham que podem realmente substituir os códigos Senior desse jeito Mas ser arrogante não ajuda, especialmente quando o desempenho simplesmente não está presente Mas vou seguir em frente e aqui está o resumo. Parece que conseguiu terminar, mas temos que verificar. Eu não confio nisso. Diz que precisamos de uma chave para reenviar e outras coisas que não façam nenhum sentido Então, eu sou bastante cético. Então, vamos dar uma olhada no Github, Control R ou F five para atualizar E essa é uma atualização que acabou de ser feita. A propósito, 45 commits, 45 atualizações. Isso é demais. Isso é ridículo. Isso é um sinal. O modelo tentou muitas vezes. Algo estava claramente errado. Agora, vamos verificar Versll. Eles estão cientes de que há um atraso. A versão mais recente é a existente, então provavelmente nada mudou. Não há imagens para ver nessa versão. Mas sim, depois de alguns segundos, um novo vai aparecer e entrar nele. Sim, temos nossas imagens. Não foi fácil, mas conseguimos sobreviver. Agora, espero que você tenha conseguido chegar a esse ponto em que tenha um site funcional sem grandes bugs. Agora, vamos fazer uma pausa e ver o que podemos melhorar. Eu vou te ver em um segundo. 26. Melhore o site: Bem vindo de volta. Neste ponto, com tudo pronto, há uma conexão entre o cursor, o Github e o Versll, o que significa que podemos continuar trabalhando no cursor, e o site atualizará automaticamente coisas fantásticas Claro, existem muitas maneiras de trabalhar. Por exemplo, podemos testar algo depois voltar para uma versão anterior. Afinal, é por isso que temos controle de versão no Gid Hub. Mas presumo que enviaremos atualizações constantemente, continuaremos, então vamos ver como isso acontece Então, vamos nos concentrar no cursor. Vamos pedir ao modelo que atualize o esquema de cores. Eu quero uma mudança dramática, e acho que deveria ser bastante óbvio, sabe? Então, vamos fazer isso. Vamos mudar o esquema de cores de azul para vermelho e, em seguida, enviar a atualização para o Github. Aqui, para ser sincero, considerando nossa experiência, eu poderia ter fornecido o link. Mas, no passado, isso não era necessário em meus projetos anteriores. Então, dedos cruzados, vamos ver como isso acontece. Lembre-se de que todos esses vídeos são gravados um após o outro. Portanto, se houver um engarrafamento, há uma boa chance de o desempenho não ser ótimo. Vai ser tão ruim quanto os vídeos anteriores. Mas o problema é o seguinte. Se o modelo cometer um erro, eu prefiro mostrar em vez de, você sabe, mostrar uma versão editada em que tudo corra perfeitamente, porque aqui está o problema. Quando eu estava aprendendo a vibe code, assisti a muitos cursos, tutoriais, onde, você sabe, dizia: etapas A, B, C e, em seguida, sucesso Pareceu incrível. Mas, do meu lado, passei horas na etapa B, ou nem consegui descobrir como iniciar a etapa A. Coisas como criar um script Python rápido e executá-lo em seu terminal Essas coisas me irritaram. Eu não tinha ideia, nenhum contexto, nenhuma pista. Ou quando eu estava tentando resolver um problema, me perguntaram, você sabe, coisas como: Ok, qual terminal você está usando? É aí que você tem que ser paciente. Você tem que ser zen. Você tem que experimentar várias coisas até que funcione. Faça a pergunta de maneiras diferentes e continue procurando a solução. Então essa foi a minha experiência, e é isso que estou tentando ensinar a você também. Agora, de volta ao projeto. Isso está demorando uma eternidade. Mas deixe-me ampliar. Ok, aqui está a mensagem de sucesso. Deixe-me verificar no GitHub se realmente temos uma atualização. E aqui está a coisa. Na verdade, o modelo criou uma nova filial. Nossa, isso não é o ideal. Vou explicar o que isso significa em um segundo. Ainda assim, vamos ver se funcionou. Temos que verificar Versldoh. Aqui, temos que esperar alguns segundos porque a atualização mais recente do Github demora um pouco até chegar ao Versll Mas avance rapidamente e, sim, temos nosso esquema de cores vermelhas. O modelo fez o trabalho. A atualização não foi enviada corretamente, mas essa é uma boa experiência de aprendizado, algo a ser observado. Em primeiro lugar, podemos fazer isso. Como a versão vermelha não é a principal, podemos clicar nela e depois optar por colocá-la em produção. Isso significa que cresbarn.net finalmente ficará vermelho. Então, isso é uma coisa que temos que fazer. No entanto, teremos que esperar até que ele se desenvolva, mas vou acelerar as coisas Agora, veja como você deve abordar essas situações. Então, no Github, temos uma espécie de mensagem de aviso. Mas digamos que não temos ideia do que fazer. Não tem problema. Basta fazer uma captura de dessa área específica e arrastá-la para o bate-papo Arraste-o para o cursor. A propósito, se você tentar capturar a tela inteira, ela pode não funcionar tão bem, e o nome do arquivo também pode ser um problema. Se você estiver no Windows F, é necessário renomeá-lo. Agora, as capturas de tela geralmente têm nomes muito longos. Encurte-o apenas por segurança. Eu uso SS a partir da captura de tela. Ok, agora, confira e veja se você vê uma pequena prévia aqui. Mas sim, depois de arrastar a imagem para dentro, basta perguntar: o que está acontecendo com essa mensagem? Qual é a situação no Github? E mesmo que o modelo falhado de muitas maneiras diferentes, ainda acho que essa é a melhor abordagem. Basta perguntar, sabe? E depois de alguns segundos, está realmente explicando o que aconteceu. E, pelo que parece, está propondo duas opções Mas aqui estão as coisas divertidas. Ele já está executando a opção dois, então não precisamos tomar nenhuma decisão aqui Agora, deixe-me explicar o que aconteceu, embora eu tenha certeza de que, no resumo, o modelo também explicará . Então, digamos que estamos trabalhando para o cliente, certo? E o cliente está um pouco inseguro sobre a aparência do site Por isso, queremos apresentar duas opções, certo, uma vermelha e uma azul. Ok, agora, uma maneira de conseguir isso é criar uma nova ramificação no hub Gid Basicamente, é uma alternativa. Trabalhar com ramificações ajuda você a experimentar diferentes aparências, layouts diferentes, funcionalidades diferentes, mas sem ter que voltar atrás sem precisar desfazer agora, desfazer, voltar, reverter, essa Você sabe, salve uma versão azul e depois salve uma versão vermelha. Mas isso é uma única linha, sabe? E nesse final, você pode mostrar o vermelho. E caso o cliente não goste, você pode pedir ao modelo que volte para um modelo anterior. Ok, isso não é tão bom. Em vez de ter uma única linha, linha imaginária, você cria uma ramificação separada, uma linha separada, se quiser Agora, é um método preferido, mas a maioria dos desenvolvedores prefere usar uma ramificação diferente para coisas assim. E sim, é isso que o modelo também está nos dizendo no resumo. Mas basicamente corrigiu o problema, e essa mensagem não está mais no Github. Então isso significa que terminamos. Todos nós nos preparamos. Agora depende de você. Comece do início, use o mesmo prompt e crie um site veterinário. Por favor, fique calmo e divirta-se com isso. Conte-me sua experiência. Publique uma captura de tela e me diga como o modelo funcionou do seu lado Diga-me o que é bom, o ruim e o medíocre. Você pode substituir algumas coisas no prompt. Você pode reduzir as imagens se quiser ficar do lado seguro Mas o objetivo é refazer esse projeto de forma semelhante Caso não queira compartilhar uma captura de tela, você pode compartilhar o link VSL Eu não recomendo que você compre um nome de domínio por uma questão de discurso Um VersLink vai ficar bem. Então vá em frente e divirta-se com isso. Explorar. É como aprender a nadar ou andar de bicicleta. Você vai cair. Você pode engolir um pouco de água, pouco de água salgada nojenta Mas, no geral, será uma experiência positiva e você ficará feliz por ter feito isso. Com a codificação Vibe, essa é a situação. Ok, vamos continuar. 27. Não tem certeza? Assista a este vídeo: Bem-vindo de volta. Eu quero apontar uma coisa. Quando eu estava aprendendo a vibe code, tentei usar projetos criados pela minha forma de desenvolvedores Esses caras eram desenvolvedores habilidosos com muito conhecimento, mas cometeram um grande erro. Eles não deixaram nenhuma nota. Agora, no GitHub, no meu próprio GitHub, posso acessar 30, 40 projetos que eles fizeram, mas aqui está o problema Eu não sei nada sobre eles. Então, quando comecei, tentei atualizá-los e fazê-los funcionar. Eles foram feitos em 2018, 2019, então obviamente são muito antigos. E aqui está a coisa. Resumindo, eu falhei. Passei muito tempo, muitos créditos, e foi muito chato E então eu tentei dar meu primeiro toque. Então mudei minha abordagem e disse: Ok, vamos dar meu primeiro toque sozinho Mas vou usar um código existente, certo? Então, vou usar algo do Github. Lembre-se de que alguns projetos são públicos. Isso significa que você pode copiá-los e construir em cima deles, certo? E achei que isso me economizaria muito tempo e problemas e, claro, créditos desperdiçados. Mas o problema é o seguinte. Eu falhei mais uma vez. E não é a falha que é o problema, é como eu me senti, e é isso que eu quero compartilhar. O problema é o seguinte. Eu estava trabalhando com modelos abertos de IA, modelos que eram gratuitos na época, quatro e 4.1. E eu estava constantemente esmagando insetos, consertando peças, depois de peças, depois de peças Agora, o problema era que eu não tinha ideia se estava no BG cinco em 50 ou cinco em 50.000 Eu não tinha nenhum ponto de referência. Foi como nadar no oceano com muita neblina ao meu redor. Eu não conseguia ver a costa. Eu não conseguia ver a praia. Eu não sabia se estava nadando na direção certa. Talvez eu estivesse a alguns remos da praia. Talvez eu estivesse a milhas de distância. E foi muito cansativo usar prompt após prompt, experimentando várias coisas E esse é o problema. Eu não sabia se estava mais perto, se estava mais perto do objetivo final de realmente fazer o projeto funcionar. Eu não tinha ideia. E aqui está a coisa. Se você ficar preso e não tiver certeza disso, sempre poderá iniciar uma nova conversa. Você pode simplesmente clicar aqui. Um novo modelo será muito mais útil. Por exemplo, se eu adicionasse a seção da galeria ao site do dentista, iniciaria uma nova conversa clicando aqui Esse é o método recomendado. Você divide o projeto em partes. Agora temos uma base. Nós o publicamos. Legal. Então, talvez queiramos adicionar qualquer coisa, uma galeria, depois o rastreamento do Google Analytics talvez um formulário mais complicado. Ok, bem, essas coisas podem ser três conversas diferentes. Lembre-se de que você está usando a mesma quantidade de créditos. Não há desvantagens, mas uma nova conversa significa um novo modelo Não está cansado das instruções anteriores. Mas, voltando ao meu ponto de vista, se você sente que está nadando em um oceano e não tem ideia de onde está, precisa fazer uma pausa e reavaliar Você precisa mudar de modelo ou iniciar uma nova conversa. Eu, até agora, costumo pensar que começar do zero é muito melhor. Tenha o modelo, crie tudo do zero sozinho. Mas é claro que você pode referenciar um projeto. Novamente, para se inspirar, use-a como inspiração, e o modelo tomará nota disso. Mas não importe um código e espero que ele seja executado Espero que você possa construir em cima disso. Normalmente, isso não vai funcionar, especialmente no início de sua carreira. Então, meu conselho é começar com pequenos projetos divertidos e depois progredir. Não se canse de nadar demais no desconhecido . Sim, tenha paciência. Mas se você sentir que não está progredindo bem, faça uma pausa e procure outra maneira 28. Meu conselho honesto: Bem vindo de volta. Parabéns. Você chegou ao fim, e isso é muito importante. Você não criou apenas alguns sites. Você realmente desenvolveu as habilidades por trás deles. Você aprendeu como orientar a IA com instruções claras, como estilizar com propósito, como fazer com que as coisas pareçam melhores e se sintam melhor E isso sem mergulhar em códigos complexos, sem qualquer tipo de codificação Mais importante ainda, você pratica um pouco toda vez, algumas instruções aqui e ali, alguns ajustes aqui e ali E é assim que você fica bom. Não assistindo , mas praticando. Então, e agora? Bem, você tem que continuar. Você tem que escolher uma ideia totalmente nova. Você pode criar uma marca, um projeto pessoal. Você inicia uma nova pasta e simplesmente trabalha. Você experimenta o prompt, cola, aperfeiçoa, publica e o torna seu. Basicamente, você está pronto para criar coisas reais para si mesmo, depois para clientes, talvez apenas por diversão. Mas o que quer que você faça, lembre-se disso, você tem que ter fé. Você tem que ter paciência. E sim, você realmente não precisa de um desenvolvedor para criar coisas bonitas. Você só precisa saber como falar com essas ferramentas. Obrigado por passar esse tempo comigo. Crie algo do qual você se orgulhe. À medida que as coisas mudarem, continuarei atualizando o curso. Vou adicionar novos projetos, vou adicionar novos recursos, mais exercícios. Mas, sim, por enquanto, você tem que continuar praticando. Você tem isso. Aqui é Chris Barron saindo. Muito obrigado