Programação de Vibe com o Windsurf: web design sem código para iniciantes | Programação com IA

1. Apresentação: Bem-vindo ao futuro. Esta é sua chance de subir de nível para aprender algo que vai melhorar significativamente sua vida. E isso é codificação Vibe. E isso porque você não precisa mais ser um desenvolvedor com muitos anos de experiência para criar um site, um aplicativo, uma empresa. Usaremos uma plataforma chamada windsurf AI e o poder da inteligência artificial para nos ajudar a criar sites Você imagina, descreve, entende. Você o ajusta, o lança, aprende e, finalmente, ganha. Pode levar algumas tentativas e talvez alguns meses, mas o vibe coding oferece uma chance incrível de criar um negócio fantástico sozinho Acredito que essa é a melhor chance para a maioria das pessoas criar uma renda sólida e confiável. E repito sem ser técnico, sem saber codificar, esse é o futuro. Neste curso, vamos criar um site do zero. Vamos lançá-lo em nosso próprio domínio, passo a passo , com a ajuda da IA. Isso não vai ser muito fácil. Às vezes vai ser frustrante, e isso é porque chegamos cedo Mas chegar cedo é a nossa principal vantagem. Imagine ter investido na Apple há 20 anos ou comprado Bitcoin quando ela foi lançada. Claro, haverá incerteza no começo, certo? Problemas, todos os tipos de problemas, mas não espere até que se torne popular Esta é a sua loja. E neste curso, vou explicar tudo o que você precisa saber. Você acabou de começar e lançar primeiro site em pouco tempo. Vou te ensinar em inglês simples o que significam IA, LLMs, MCPs e tudo isso Sou designer e, se você já assistiu aos meus cursos de design, sabe que me concentro em obter resultados rápidos sem teorias entediantes Não vou encher sua cabeça com termos e conceitos complicados. Não, novamente, eu não sou um desenvolvedor, e isso é uma grande vantagem. Em vez disso, eu me concentro em exemplos e exercícios divertidos. Invista no seu futuro. Essa é uma das melhores coisas que você pode aprender agora. Para garantir seu futuro e ter uma renda fantástica. Comece hoje mesmo. Não espere. Essa é a sua chance. 2. O que é codificação de Windsurf e vibe: Bem vindo de volta. Nesta citação, vamos usar o windsurf para vibe code, mas o que é windsurf e o que é vibe Então, primeiro de tudo, o windsurf é uma plataforma que ajuda você a criar software com o poder da IA, sem saber codificar Acabou de ser comprado pela Open AI, a pessoa por trás do Chat GPT, por 3 bilhões de dólares Sim, isso é um B bilhão. São 15 dólares por mês, e o que você recebe em troca é uma virada de jogo completa Com o Winserf, você está trabalhando lado a lado com a inteligência artificial Isso entende seu projeto, segue suas instruções e cria seu aplicativo para você, quase como mágica Você escreve o que quiser. Isso é chamado de prompt. Talvez você descreva quais são os aplicativos que você faz. E então a IA assume controle e faz a maior parte do trabalho pesado. Então, em resumo, o que o Windserf pode realmente construir? Bem, podemos criar aplicativos móveis, tanto para IOS quanto para Android, assim como os aplicativos que você pode obter na loja de aplicativos ou no Google Play. Você pode criar qualquer coisa, desde um monitor de fitness até um aplicativo de bate-papo e até mesmo uma ferramenta financeira profissional Tudo o que você pode imaginar , você pode construir. Obviamente, você pode criar sites como faremos neste curso, como sites de apresentação, portfólios, blogs pessoais e trabalhos Ele pode lidar com páginas de destino de produtos, startups, eventos, qualquer coisa. É tudo rápido, tudo responsivo, tudo limpo. Não há nenhuma desvantagem. Obviamente, você pode criar produtos SAS. Isso significa software como serviço. E o windsurf pode ajudá-lo a construir isso. Ele pode ajudá-lo com o front-end, com o back-end, com o banco de dados, tudo, que você não precise saber essas coisas. Basta dizer o que ele deve fazer e ele descobrirá as coisas complicadas. E uma última coisa. Você pode criar plug-ins e várias ferramentas. Você pode criar extensões do Chrome. Você pode criar bots de discórdia. Você pode criar ferramentas internas para sua equipe ou empresa. Caramba, você pode até mesmo criar plug-ins de imprensa na web. Se ele reside em um navegador ou roda em um computador, há uma boa chance de que o Winserf possa construir Agora, aqui está a grande ideia. O Winserf se conecta diretamente a alguns dos modelos de IA mais inteligentes do mundo Isso significa que ele sabe como escrever Python, Javascript, react, next JS, node, qualquer coisa É como ter uma equipe sênior de desenvolvedores 24 horas por dia, 7 dias por semana, com paciência infinita, pronta para codificar o que você quiser na hora Você diz o que você quer, e então ele começa a codificar. Você analisa os resultados, dá feedback e isso melhora instantaneamente. Novamente, isso ocorre sem que você saiba codificar sem todas essas coisas que mencionei anteriormente. Então essa é a parte essencial. Então imagine isso. Você tem uma ideia para o produto, certo, para o plug-in, um aplicativo, uma ferramenta que resolve um problema que talvez você tenha tido há anos Agora, normalmente, você precisaria de meses de desenvolvimento. Você precisaria de uma equipe, certo, um orçamento, reuniões intermináveis. E o fato é que isso não é mais necessário com Windsor Você acabou de descrever a ideia e, em alguns minutos, você tem algo real, algo funcional, algo que você pode testar, melhorar e talvez finalmente lançar depois de algum trabalho. Então isso é codificação Vibe. Então, a codificação vibe consiste em dizer ao programa o que você quer que seja feito em inglês simples e, em seguida, a plataforma o executa É isso que torna o windsurf tão poderoso. Isso não ajuda você a escrever código. Não, isso ajuda você a criar produtos. Ele resolve problemas e ajuda você a passar da ideia à execução com mais rapidez do que nunca Faça o download do anexo e inscreva-se no windsurf Então vá em frente e se inscreva, e na próxima palestra, vamos instalar o windsurf juntos e na próxima palestra, vamos instalar o windsurf juntos . Vamos em frente. 3. Instale o Windsurf e defina suas expectativas: Bem vindo de volta. Instalar o windsurf é muito fácil porque é apenas um programa simples Não há nada de especial acontecendo, mas enquanto eu lido com isso em segundo plano, deixe-me definir suas expectativas, certo? Chegamos cedo. As coisas estão mudando rapidamente. ou menos a cada semana, talvez a cada duas semanas, há grandes novidades, melhorias. E isso é um pouco desconfortável, certo? 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. Vou te ensinar princípios que não ficarão desatualizados, e esse é o valor real deste curso. Vamos voltar a essa mudança constante de melhorias, certo? Agora, esse é o preço que você tem que pagar por chegar cedo. Você precisa de muita paciência. Você precisa deixar sua frustração se afastar de você. E isso é porque eu prometo que você vai ficar preso. Eu te prometo isso. E não se trata desse curso, do meu estilo de ensino ou do meu conhecimento. Não, já tive inúmeros casos em que o guia oficial disse: clique no botão azul. Mas havia apenas os vermelhos. Ou o guia disse para clicar no botão Salvar, mas não havia nenhum botão Salvar. É muito irritante quando isso acontece. Tive problemas em que não consegui mais trabalhar devido a problemas com minha VPN. Mas, na verdade, eu não uso uma VPN. Dizia que eu não tinha Internet, mas tudo estava funcionando bem. Eu segui todas as etapas de cada guia oficial e me deparei com um problema obscuro Eu uso três computadores diferentes e tenho três problemas diferentes. Agora, eu poderia continuar por muito tempo. Isso está prestes a acontecer. E meu conselho, use o guia do anexo para obter ajuda. Agora, na maioria das vezes, você terá que pesquisar e corrigir muitas coisas sozinho. Estou aqui para ajudar. Você pode contar comigo. Mas alguns problemas serão muito específicos do seu computador. E você precisa ter paciência para resolvê-los. Então essa é a desvantagem, certo, de estar tão cedo no jogo Agora, qual é a vantagem de chegar tão cedo? Bem, você tem uma 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. Você fica à frente de todo mundo que não quer passar por toda aquela dor de chegar cedo, de as coisas não darem certo. Você fica à frente deles. E, como eu disse, é como investir na Apple há 20 anos. Ninguém sabia que seria uma empresa tão grande, certo, um grande sucesso. Mas aqui, eu prometo, não há nada maior. E está tudo em suas mãos. Essa é a questão. Você pode criar coisas incríveis. Ou você pode simplesmente adiar. Você pode esperar até que as coisas estejam super claras e fáceis para todos. Sem mais bugs, sem mais problemas. E depois o que? Bem, você vai ter 100 vezes a concorrência, certo? É tão simples quanto isso. Se você investir agora em Apple ou Bitcoin ou qualquer outra coisa, certeza, você pode se sair bem, é claro. Mas se você estivesse lá no início, as recompensas teriam sido infinitamente maiores Então, por favor, entenda por que você vai sofrer. Você terá dores de cabeça e muita frustração. Mas é para o seu futuro. E se você conseguir lidar com isso, se puder continuar avançando, a recompensa será enorme. É por isso que eu realmente amo tanto a codificação Vibe. É exatamente o nível de dificuldade certo, certo? Se fosse muito difícil, seria apenas uma codificação clássica A maneira clássica de estudar por quatro, talvez seis anos, estudar, trabalhar constantemente, ser júnior, subir de nível lentamente, mas com segurança Então, quatro a seis anos. Então, essa seria a maneira mais difícil. Mas se fosse muito fácil, todo mundo estaria aqui. Todo mundo faria isso. Portanto, a recompensa seria quase nada. Esse, esse nível de dificuldade, é fantástico. É exatamente o nível certo de dificuldade. Então, voltando ao assunto. Você não vai realmente codificar, certo? Você não precisa conhecer nenhuma linguagem de programação de nenhum tipo. Você precisará ser paciente e ser capaz de explicar claramente a ideia da sua mente para o computador. E essa é uma habilidade que você desenvolverá ao longo deste curso e por meio da prática. Mas, novamente, você não codificará e não lerá o código. Você não deve entender tudo o que está acontecendo enquanto o windsurf está funcionando em segundo plano em seu projeto Não, um dos princípios fundamentais que quero ensinar é que você pode passar o dia todo criando memes para compartilhar com seus amigos e rir ou, por outro lado, criar uma plataforma windsurf que permita que as pessoas criem memes, e então você pode gerar receita com Então, essa é uma das coisas mais importantes do curso. Tudo gira em torno de onde está seu foco e de como você pode criar ideias e executá-las. Eu vou dar uma palestra sobre isso, então fique ligado. Mas agora você precisa ter o windsurf instalado. Eu configurei nossa interface para o esquema de cores escuras e estamos prestes a criar nosso primeiro projeto. Sim, logo faremos um. Agora, uma nota final. Vou simplificar muitas coisas, que seja fácil de entender para todos, certo? Mas caso você seja um programador com vasto conhecimento, entenda que quando você diz que windsurf é uma bifurcação do código VS, isso realmente não diz muito para a Ou quando você diz algo como abrir seu terminal e executar esse script rápido em Python Novamente, isso é um pouco opressor para a maioria das pessoas. Eu não vou fazer isso. Eu posso simplificar demais as coisas, mas este é um curso para iniciantes que não são técnicos, então vamos com calma e passo a passo Ok, com isso, eu vou te ver em um segundo. 4. Nosso primeiro site em Windsurf: Bem vindo de volta. Vamos criar nosso primeiro site no Windserf Agora, antes de começarmos, 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ê precisará clicar em 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, agora, todos os nossos projetos precisam ser organizados em pastas. Então, vamos abrir nosso computador e criar uma nova pasta. Se você estiver no Windows, tente evitar a partição principal em que o Windows está instalado pois às vezes, para algumas pessoas, isso pode criar problemas. Ok, chame, o que você quiser. Vou usar wind one, mas o nome realmente não importa. Em seguida, vamos iniciar o windsurf e abriremos essa pasta Nada de especial até agora, certo? Aguarde um segundo até que a interface seja carregada. Mas sim, é isso. Agora temos nosso primeiro projeto. Anexado ao curso, você terá esse arquivo de texto com uma tarefa. É algo super simples, bastante básico. Isso é o que colamos aqui no lado direito em cascata. Isso é cascata no lado direito. Agora, estamos no modo de gravação e, a partir dessa lista suspensa, vou usar esse modelo. Use o mesmo ou, se não estiver disponível, você pode usar qualquer um desses na tela. Ok, vou explicar tudo em detalhes mais tarde. Então, por favor, vamos continuar. Agora, a mensagem, a tarefa é a seguinte. Crie uma landing page de portfólio moderna para mim, Chris Barron 36 de Bucareste Tenho 14 anos de experiência em design. Vou ser instrutor certificado pela Dobe e me especializo em web e 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é essa seção específica. endereço do meu escritório é este, e por favor, adicione avaliações fictícias Adicione um formulário de contato para que as pessoas me enviem mensagens e mostrem meu número de telefone. Mostre também meus perfis de mídia social. Use as melhores práticas para criar essa landing page. Ok, então essa é a tarefa. Você deve usar o mesmo, mas esteja ciente de que é totalmente normal que seu design tenha uma aparência diferente do meu. É exatamente assim que a IA funciona. Não é um erro. É assim que funciona. Agora, caso algo não funcione, ele simplesmente fica preso. Não se preocupe com isso. Continue com a próxima palestra, onde vamos configurar tudo e depois voltaremos e tentaremos novamente. Então, novamente, se você não conseguir executar isso, continue com a próxima lição e depois volte. Ok, assim que clicarmos em Enter, partiremos para as corridas. Observe essa área aqui. Isso diz que está funcionando. E você também pode observar esse círculo verde embaixo. Caso queira parar com isso, você quer parar com a IA. Você pode usar esse botão vermelho, mas na verdade não fará isso. Agora, dentro desse painel, você pode ver como a modelo pensa. Alguns modelos são bastante descritivos. Eles explicam tudo em detalhes. Aqui, esse modelo diz que vai criar um site bem básico usando HTML e CSS, além de um pouco de JavaScript. Ok. E os arquivos estão aparecendo, começando com o arquivo de índice, que é basicamente a página inicial Você pode ver os arquivos no lado esquerdo da tela e potencialmente abri-los aqui na frente e no centro. Mas 99% das vezes, você realmente vai se concentrar no lado direito. Agora, vou acelerar essa gravação pois às vezes pode demorar um pouco, especialmente com certos modelos. Agora, não se surpreenda ao ver que o modelo pode cometer um erro, certo? A propósito, o modelo significa simplesmente a IA. Agora, por exemplo, aqui, ele tentou gerar muito código de uma vez e o tiro saiu pela culatra. Não poderia fazer isso. Mas percebeu seu erro, então procurou a solução diferente e depois já a aplicou. E isso sem a nossa intervenção, sem que façamos coisas. Então, isso é muito bom. Agora, em seguida, ele tentou iniciar o Python, pudéssemos realmente ver o site Você não precisa conhecer o Python, mas precisamos instalá-lo Agora, você pode ver que é aqui que temos que decidir. Agora, instalamos o Python ou devemos tentar de uma maneira diferente Isso é o que a IA está nos perguntando. E eu quero te mostrar uma coisa. Vamos pedir para ele instalar o Python sozinho, certo? Isso seria incrível, certo? Mas não, na verdade não vai funcionar. E falaremos sobre isso em uma palestra separada. Resumindo, isso facilitaria nossa vida, mas isso seria uma grande preocupação de segurança. Não seria seguro. Agora, voltando ao assunto, vamos dizer para continuar. Mas o problema é o seguinte. Fui muito vago com minha mensagem Continuar. Então, ele não sabe o que fazer, certo? Então, eu verifiquei o Python. Mais uma vez, eu realmente queria a outra opção. Então, a culpa é minha. Agora, você sempre precisa ser preciso com suas instruções. Diga exatamente o que você quer. Não fale mal disso. Mas, na verdade, isso também não vai funcionar. Então, vamos instalar o Python porque, na verdade, é bem simples Só faremos isso uma vez e, em seguida, o modelo cuidará de tudo. Ok, então role para cima e clique neste link. Não se preocupe com a mensagem de aviso. Aqui estamos no site oficial, então está tudo bem e seguro. Role para baixo e procure seu sistema operacional. Como você pode ver, esse é o recomendado. Então, vamos baixá-lo e instalá-lo. Agora, antes de escolhermos qualquer coisa, o modelo disse que precisamos habilitar um recurso específico, e essa é a segunda caixa de seleção aqui Mas é melhor você conferir os dois. Ok, agora, por favor, seja paciente e faça uma pausa quantas vezes precisar para trabalhar junto Ok, agora, vamos instalá-lo, e isso só levará mais ou menos um minuto. Agora, às vezes isso não funciona corretamente, e eu tenho uma palestra para esse caso específico Mas sim, aqui está feito. De volta ao windsurf Vamos dizer ao modelo que o Python está instalado e que ele continue Imediatamente, recebo um comando aqui informando que Winserf não está configurado para ser executado sozinho Mas isso não é um problema. Clicaremos nesse botão, exceto nós mesmos. E depois da segunda, aqui está outra. Clique em Aceitar novamente. E assim, devemos estar prontos com o Python e estamos prontos para Agora, meu computador Windows está pedindo permissão e, claro, vamos dizer que sim. Agora podemos conferir nosso site usando este endereço. Vamos copiá-lo e colá-lo em qualquer navegador. Mas você também pode usar o navegador aberto e externo. Agora vou usar o Microsoft Edge neste computador, mas você pode usar o que quiser. Sim, este é um site adorável. É preto e vermelho porque foi isso que eu pedi. Agora, olhando para isso, é espetacular? Não, claro que não, mas nós executamos com apenas alguns cliques. Observe que não tenho fotos porque não fornecemos nenhuma. Novamente, o modelo não baixaria nada sozinho. Mas vamos dar um passo adiante. Vamos trocar o preto por um belo tom de azul e talvez adicionemos o mapa em vez de simplesmente mostrar o endereço, certo? Agora, novamente, digite isso, e pode demorar um pouco, mas vou acelerar. Agora, quando todas as alterações estiverem concluídas, use o botão aceitar tudo a partir daqui. Não use o da parte central da tela. Não, sempre foque no painel direito e aceite todas as alterações quando o modelo estiver pronto. Observe que não há um círculo verde e não há um botão vermelho para pará-lo. Então isso significa que parou, e podemos aceitar. Ok, vamos dar uma olhada e ver. Sim, isso é sólido. Agora é azul e temos um mapa. Temos algo com que trabalhar e ele deve ser responsivo Podemos clicar com o botão direito do mouse e, a partir dessa lista, podemos escolher inspecionar. Neste novo painel, estamos procurando esse ícone, que mudará nosso navegador para o modo móvel. Sim, isso é incrível. Parabéns. Novamente , não é perfeito. Eu sei que tenho coisas para melhorar. Mas essa é a rapidez com que você pode começar a praticar windsurf em um piscar de olhos O que eu quero que você faça é criar sua própria versão, começando com meu TextFile Crie uma nova pasta no seu computador , acesse o menu superior e use Abrir pasta. É tão fácil quanto isso começar um novo projeto. Substitua o nome no arquivo de texto, altere seus 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 Se você não conseguir fazer uma captura de tela, não se preocupe. Basta tirar uma foto com seu telefone. Caso você tenha problemas e não consiga gerenciá-los, use o PDF anexado para obter ajuda. Agora, antes de terminarmos, para algumas pessoas, Python não será instalado corretamente e isso pode não Se é você, por favor, não se decepcione. Temos uma palestra em que configuramos tudo. Então, se você não tem um site no momento, deixe um comentário para que eu saiba qual problema você está enfrentando e, em seguida, passe para a próxima palestra Ok, eu vou te ver em um segundo. 5. O que você pode construir com a codificação de vibração no Windsurf: Bem vindo de volta. Antes de continuarmos com o windsurf, você pode perguntar: Chris, o que devo construir? Eu entendi. Eu sei que você pode não ser um empreendedor com um pouco de 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. Eu vou expandir isso então. 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ê 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. Agora, 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 eu prometo que existem toneladas de 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. Eles têm 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 é a palavra, 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 que 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 isso talvez seja um fundo de 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. Ao ver seus perfis, você pode ver que são apenas pessoas comuns. 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 rapidamente. 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. Vamos continuar com Windsor. 6. Como navegar pelo windsurf: Bem-vindo de volta. Vamos ativar o Windserf para que possamos explorar sua interface Isso pode mudar do seu lado, mas o básico sempre estará aqui Temos um menu principal na parte superior que na verdade não vamos usar, um painel de toalhas no lado esquerdo e no lado direito, temos nosso glorioso painel em cascata, que é onde conversaremos com o programa e faremos com que ele construa o programa e faremos com que ele construa Ao iniciar um projeto, você deve criar uma pasta em algum lugar do seu computador usar o botão Abrir pasta. Agora, caso você tenha trabalhado em um projeto diferente no passado, você pode vê-los aqui. E neste painel à direita chamado cascata, posso começar a dar instruções pouco pouco usando este campo aqui, ou posso retomar uma conversa anterior clicando nela aqui Agora, não trabalhe junto, apenas observe o que está acontecendo. Então, entrando em um projeto ativo, há muito o que analisar, certo? Mas vamos mudar a equipe porque talvez você queira mudar a interface, certo? Então 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. No momento, depois de clicar em qualquer um deles, a janela será fechada, que não é o ideal, mas a abrirá novamente. Preferências de arquivo, equipe de cores da equipe e escolha qualquer uma delas. Ok, ótimo. Em seguida, para ver melhor a interface, você pode usar o Control plus para aumentar o tamanho do texto. Agora, você não precisa fazer isso, mas se o texto for difícil de ler, essa é uma opção. Então, Control plus. Para reduzi-lo, use Control minus. Agora, voltando a um projeto real, você não precisa realmente ler nenhum código. A interface é bastante impressionante, mas na verdade 90% das vezes, se não mais, você vai se concentrar aqui no lado direito em cascata Então, aqui é onde você verá como a inteligência artificial pensa e no que está trabalhando. Ele vai te dizer quando há erros e, basicamente, o que foi feito. Agora, o resto da interface, bem, você tem um arquivo explodido aqui através do qual você pode ver todos os arquivos do projeto, e eles são realmente abertos aqui na parte principal da tela Então, quando você clica nos arquivos à esquerda, eles se abrirão aqui no centro da tela. Observe as abas de abertura, muito parecidas com as do seu navegador Assim, você pode percorrê-los rapidamente. Agora, você vai fazer isso? Não, 99% das vezes, não. Novamente, nosso foco estará aqui no lado direito da cascata Ok, é quase o mesmo com o painel inferior. Problemas, saídas, terminal e assim por diante. Na verdade, não vamos usar muito essa parte. O terminal pode ser útil, mas sim, vamos fazer isso passo a passo Portanto, embora tudo pareça tão intimidante para uma pessoa comum que codificou, isso é realmente muito simples porque você retira a maior parte Você fala com a IA aqui à direita e pronto. Agora, há uma configuração importante aqui: escrever e conversar. Sempre usaremos a escrita, o que significa simplesmente que teremos a IA criando tudo. Agora, programadores experientes podem simplesmente querer falar com a IA para obter conselhos e assim por diante Esse não é o nosso caso. Queremos que a IA faça tudo. Isso é codificação. Então, para nós, não, obrigado. Vamos continuar com o modo de escrita. Ok, uma coisa a ter em mente é a IA só funcionará nos arquivos dessa pasta específica. Portanto, cada site, cada projeto precisa de sua própria pasta. É assim que você mantém as coisas claramente separadas. Você abre essa pasta e faz windsurf. Você tem sua conversa no lado direito e ela criará ou editará arquivos dessa pasta específica, nada mais. Agora, a configuração final importante aqui é a parte em que você escolhe seu modelo. Isso mudará drasticamente os resultados. Então, vamos falar sobre modelos na próxima palestra. Por enquanto, altere a interface para uma nova equipe e crie uma nova pasta em seu computador e , em seguida, abra-a e windsurf apenas para se acostumar com esse fluxo É assim que você cria novos projetos, e é isso que também faremos. 7. Como navegar pelo windsurf: Bem vindo de volta. certas ferramentas que você pode instalar no seu computador, para que o windsurf possa fazer um trabalho melhor, especialmente se você quiser fazer o mínimo de trabalho possível Agora, não vamos abrir mão controle total de nenhuma IA. Em vez disso, vamos instalar ferramentas de software muito conhecidas que ajudarão o Winserf a funcionar Agora, nós já instalamos o Python, mas se você não instalou, por favor, faça isso No final, mostrarei um possível problema e efeitos. Agora, para verificar se sua instalação está boa, abra o menu Iniciar e digite CMD. CMD é a abreviação de comando. Isso é o que você quer. Prompt de comando. Aqui, digite esse comando. E se você ver algo assim, você está pronto para ir. Agora, provavelmente, você terá uma versão mais recente, mas tudo bem Desde que não haja avisos ou problemas, você está pronto para começar Agora, caso você não consiga, você pode ir ao windsurf no menu superior do terminal Aqui começa um novo. Vai estar aqui na parte inferior. Digite a mesma coisa e veja se funciona. Está tudo bem do meu lado. 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. Agora, o que eu quero fazer é focar em coisas práticas. Para mim, o objetivo é simples. Crie sites o mais rápido possível. Aprender sobre Python agora não vai ajudar. Isso vai fazer sua cabeça girar. Então, vou manter isso o mais curto possível. Sim, Python está fora da minha lista. Idealmente, você reiniciaria o computador apenas para ficar seguro após cada etapa. Aqui vou continuar, mesmo que isso possa causar alguns problemas. Mas sim, vamos. A próxima coisa na minha lista é essa. Agora, nenhuma versão JS LTS. Este é outro item indispensável. E durante o processo de instalação, ele perguntará se você deseja instalar alguns outros duais. Agora, uma coisa, certifique-se de marcar essa opção. Isso vai mostrar outra janela com muitos textos, e eu quero dizer muitos. Agora, do meu lado, diz que não consegue encontrar o Python, embora eu tenha acabado de instalá-lo Reiniciar meu computador poderia ter resolvido esse problema. Eu sei que está instalado. Eu vou continuar. Mas o fato é que, depois de um tempo, isso simplesmente para. Mas o problema é o seguinte. Abra uma nota do prompt de comando e digite o nó V. A propósito, você não precisa memorizar nenhum desses comandos Eles estão todos vinculados ao curso. E sim, eu vejo minha versão aqui, então estou pronto para ir. Então, dois programas que eu verifiquei. O próximo na minha lista, Power Shell 7. Estamos na loja oficial da Microsoft, e isso nos diz que existem muitas maneiras de instalar o Power Shell sete. Agora, parece opressor, mas na verdade é bem simples Usaremos esse método, Win Get, que é o método recomendado? Aqui, na verdade, há apenas duas etapas. Parece complicado, mas na verdade é bem simples. Esse é o primeiro. Então você abre o prompt de comando. Você clica aqui para copiar esse texto e, em seguida, simplesmente cola com Control V. Você receberá uma pergunta aqui, digite Y como em sim e, em seguida, pressione Enter. Parece que há duas versões disponíveis. Pré-visualização significa algo como Beta. Portanto, é uma versão um pouco experimental, geralmente menos estável. Nós não queremos isso. Então, queremos o outro. Então esse é o segundo passo, para instalá-lo, copie esse comando. Novamente, não é a versão prévia, está um pouco mais abaixo, e depois cole no prompt de comando. E depois de alguns segundos, isso vai ser instalado. Agora, teste, abra seu menu de estrelas novamente e digite push. Mas em vez de um U, use um W e você verá o Powershell sete disponível Agora estamos indo muito bem. Vamos continuar com o GitHub. Precisamos de uma conta, mas, como tudo mais, ela é totalmente gratuita. Insira seu endereço de e-mail e, depois de um tempo, você precisará verificá-lo e pronto, estamos prontos para começar. Github é muito necessário, embora possa ser muito 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 é considerado opcional, mas tive alguns problemas porque não o instalei, então prefiro que você o instale também. Esse é um dos programas mais lentos de instalar, mas na verdade não há muita coisa que você precise fazer A instalação é muito lenta. Mas sim, depois que finalmente estiver pronto e demorar alguns minutos, você precisa ser paciente. Você vai ter que criar uma conta. O fato é que, inicialmente, eu queria criar uma conta, mas aqui está a questão do Qull Algumas dessas ferramentas permitem que você se inscreva usando o Guild Então, como acabamos de criar uma conta no GID Hub, por que não usá-la, certo? É muito mais rápido. E 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, certo? Vai ser café da manhã, almoço e jantar. Serão sobremesas. Serão lanches. Serão refeições completas, certo? Agora, isso significa que precisamos ter uma geladeira e utensílios totalmente abastecidos Precisamos dos ingredientes e precisamos de facas, garfos , colheres, coisas, certo Isso é o que estamos fazendo agora. Vamos usar absolutamente cada um deles em cada prato? Não, claro que não, mas é muito mais fácil preparar tudo agora do que tentar encontrá-los enquanto cozinha. Veja se você receber um erro após o erro no windsurf porque está perdendo isso ou aquilo, você vai perder tempo Você vai usar créditos, que são basicamente dinheiro. Você perde energia e impulso. É por isso que eu sugiro fortemente que você instale tudo agora. Você faz uma pausa, é claro, você começa a pensar. Mas depois que isso for feito, você estará voando. Então é isso que estamos fazendo agora. Ok, agora vamos instalar algo chamado Git para Windows Isso terá muitas configurações, mas, na verdade, só usaremos os valores padrão em cada etapa do processo. Agora, fique à vontade para fazer uma pausa, mas eu vou aceitar tudo porque o windsurf realmente vai gerenciar Agora, percebo que essa lista não é muito confortável, mas isso permitirá que a IA faça muito mais com menos solicitações, com menos intervenção nossa Então, vai ser um pouco mais independente. Ok, avance rápido, e só temos mais três contas para criar. Mas isso é feito em um instante. Versll é o primeiro. Usaremos isso para hospedar nossos sites para que todos possam vê-los, certo? Agora, novamente, é grátis, então não se preocupe. Inscreva-se usando o Github para simplificar o processo. Ok, ótimo. Em seguida, usaremos o reenvio para enviar e-mails Isso é totalmente gratuito para até 3.000 e-mails por mês. É incrível começar. E, finalmente, vamos criar uma conta no Super base, que é fantástico para nossos bancos de dados para projetos mais complexos, o que podemos fazer mais tarde. Mas ei, é só um clique, então vamos tirar isso do caminho. E sim, no geral, acredite ou não, acabamos com essas ferramentas. Agora, há algumas outras configurações que abordaremos na próxima aula. Por enquanto, faça uma pausa, instale tudo e só continue depois passar por essa lista de verificação Eu vou te ver em um momento, quando você terminar. Pause o curso agora mesmo e instale tudo. 8. Configure MCPs e regras no Windsurf — a maneira fácil: Bem-vindo de volta. Instalamos muitas coisas, como Python, NoJS, Power Shell Mas também há algumas coisas que podemos configurar no WinSerf A primeira são as regras. Você pode acessar esta seção focando neste canto e no WinSerf E dentro da personalização, temos algumas guias, regras, fluxos de trabalho Agora, vou mantê-lo o mais simples possível. Estamos interessados em regras globais. Então clique aqui e você obterá um documento vazio nesta parte central. Aqui, use o arquivo anexado para simplesmente copiar e colar essas regras. Agora, em resumo, estamos dizendo a Winsorf como ela deve agir. É como dizer a alguém como você gosta que seu café seja feito, certo? E dentro das regras, temos coisas básicas, como queremos ser eficientes, queremos usar as melhores práticas. Queremos que seja seguro e oculte informações confidenciais e assim por diante. Você pode encontrar muitos modelos para as regras na web ou simplesmente usar o meu. Eu também comprei na web. Agora, com o uso de regras globais, porque queremos que o windsurf as aplique a cada projeto As regras do espaço de trabalho seriam específicas para esse único projeto, e não queremos isso Por exemplo, se mudarmos para um projeto de aplicativo móvel no IOS, por exemplo, podemos ter regras diferentes. Então, sim, nesse caso, isso faria sentido. Mas sim, no geral, o que está escrito aqui é uma coisa global. Então, basta copiar e colar, clicar em Controles e usar esse ícone para atualizar as coisas Depois de alguns segundos, você deve vê-lo aqui. Ok, agora vamos clicar em plugins. É esse ícone aqui. Esses são os MCPs e, meio que resumindo, somos nós dando mais controle à IA Se não quisermos usá-los, teríamos que trabalhar muito mais, escrever código nós mesmos, escrever mais comandos. Basicamente, é mais trabalhoso para nós e, em vez disso, queremos que a IA faça a maior parte, certo? Agora, o melhor é que essa é uma lista oficial. É seguro. É bom ir. Agora, do seu lado, você pode ter mais disponíveis porque eles são absolutamente fantásticos, e o Winsurf está adicionando mais e mais deles. Mas sim, vamos começar. A primeira memória. Clique nele. E embora você possa usar esse ícone de download, prefiro usar a parte central aqui e clicar em Instalar. E, basicamente, é isso. Não há outras configurações para essa. A mesma coisa para o pensamento sequencial. Isso ajudará a IA a dividir a tarefa em partes menores , monitorá-las e nos dará resultados muito melhores. Ok, vamos continuar. Vamos habilitar o Git, aqui está algo que pode acontecer e vai ser muito chato Embora eu tenha instalado o Git para Windows corretamente na sessão anterior, ele está dizendo que não está funcionando Então, vamos voltar a isso no final. Isso também é algo que está prestes a acontecer do seu lado. Nos tutoriais, parece muito simples . Você faz tudo certo. Mas o problema é que, do seu lado, não funciona. Você segue todas as etapas do vídeo, mas, do seu lado, não funciona. Sei que é frustrante, mas não se preocupe. Faremos o nosso melhor para consertá-lo. Em seguida, o sistema de arquivos MCP. Isso permite que a IA crie pastas, mova arquivos, faça cópias e assim por diante, porque quer que você se sinta seguro, perguntando onde exatamente você queria ter permissão. Agora, meu conselho é configurá-lo para toda a unidade. Caso esteja nervoso, você pode potencialmente dar a ele uma pasta, talvez dentro de uma pasta, mas isso pode criar alguns problemas no futuro. Agora, sempre configurarei meu Drive inteiro, não apenas uma única pasta porque me sinto muito confiante nisso. Em seguida, vamos ativar o Suba Base, que na verdade é bastante útil para projetos sérios Agora, isso está nos pedindo o token, e isso é realmente muito comum. Nada muito complicado. Clique aqui e você será direcionado para a página exata. Uma coisa, nunca, nunca mostre suas chaves para ninguém. É como mostrar o número do seu cartão de crédito na web. Todo tipo de coisa ruim pode acontecer. É por isso que você não poderá vê-lo depois de sair desta página. Você vai ver isso uma vez. Então diga isso em algum lugar seguro. Vou apenas colá-lo dentro do windsurf. Ok, vamos continuar assim, mas por favor, faça uma pausa quantas vezes você precisar em sua segunda visualização Vamos para o GitHub. Anteriormente, era o Git, o que é uma coisa. Agora isso é o Github, o que é uma coisa diferente Isso está nos pedindo o token. Você pode usar o Google para pesquisar o Github, token de acesso pessoal Ou você pode fazer isso. Acesse seu navegador, acesse github.com e depois as configurações da conta Agora, daqui no lado esquerdo, na parte inferior, você encontrará as configurações do desenvolvedor. E nessa nova janela, você verá exatamente o token de acesso pessoal que queremos. Queremos o clássico. Criado, mas esteja ciente de que você precisará configurar um nome, uma data de validade. 90 dias é o que eu recomendo, mas você terá que marcar absolutamente tudo sozinho. Eu sei que você está cansado de configurar as coisas, mas eu prometo, isso vai tornar nossas vidas muito mais fáceis. Não pule nenhuma etapa. É muito importante. Mas sim, no geral, agora pronto para o rock and roll. Tudo está configurado. A lista inteira está marcada do meu lado. Uma coisa, porém, parece que o Github não está funcionando. O problema tem algo a ver com o Docker, o que é um pouco estranho De qualquer forma, é o seguinte. Quando você reinicia o computador, Docker pode não iniciar sozinho. Nesse caso, vou lançá-lo e esperar minuto até que ele carregue. Em seguida, vou atualizar usando o ícone no canto superior direito Uma coisa, porém, seja paciente com o Docker. Não importa o seu computador, ele carrega muito lentamente. Ok, começou, então vamos atualizar. E sim, aí está. Estamos bem. Está tudo bem. Você pode dizer: E alguns outros aqui em Windsor, alguns outros MCPs Bem, no momento, se você tentar habilitar mais deles, receberá um erro. Tenho certeza de que, em um futuro próximo poderemos adicionar mais e mais. Mas, neste momento, é isso. Uma lista bem curta, uma chatice. Mas sim, agora você pode fazer uma pausa, configurar tudo do seu lado, para ficar atualizado Mas caso algo esteja errado do seu lado, você pode pular para o próximo vídeo 9. Como corrigir problemas: Tudo funciona, você pode pular para o próximo vídeo. Mas caso algo esteja errado, continue assistindo. É meu caso. Por alguma razão, o servidor Git MCP não funciona e diz que é devido ao Python Instalamos o Python e parecia bom, certo? Então, copiei o erro e usei o Google. Encontrei algumas coisas no stack overflow. Eu tentei muitas soluções, mas elas não funcionaram. Para ser claro, eu não sou um desenvolvedor. Não tenho ideia de qual é o problema. forma como você lida com esses problemas quando eles surgirem determinará seu nível de sucesso. Então eu repito. Você segue todas as instruções, seja do curso ou da web, mas as coisas não funcionarão. É assim que acontece agora. Então, a forma como você gerencia essa situação determinará seu sucesso. Aqui, tentei algumas coisas e depois mudei para o chat GPT Você pode usá-lo totalmente de graça ou se inscrever. Eu recomendo que você se inscreva, mesmo que seja outra assinatura, mais 20 dólares por mês ou o que quer que seja, do seu lado Mas eu o uso com bastante frequência, então posso recomendá-lo honestamente você não vai precisar dele para o propósito deste curso. É apenas algo bom de se ter. Ok, eu usei esse modelo, que é muito bom para pensar no raciocínio. Eu disse isso exatamente o que está acontecendo. Ei, estou usando a IA de windsurf e estou recebendo esse erro A solução divertida que ele me deu, bem, foi bem complicada. Para o meu gosto, eu disse: Não, obrigado. É um pouco complicado. Então eu pulei para o segundo Aqui, eu não tinha ideia do que isso significava, mas comecei a colá-los na minha janela do CMD. Então, a primeira linha não pareceu ajudar. Então eu tentei o segundo, o outro. E sim, depois de alguns segundos, ele instalou algo e tive a sensação de que funcionou. Eu voltei para Windsor. Eu me refresquei E sim, está tudo bem. Mas aqui está outro caso em um computador diferente. O Git NCP não funciona, mas por um motivo diferente, sinceramente não sei o que isso significa e, para ser totalmente transparente, não pretendo aprendê-lo Em vez disso, vou usar o mesmo método. Vou perguntar ao Chat GPT OT sobre. Vou usar o 03 porque é o modelo de raciocínio mais avançado no momento e, para mim, é gratuito Eu pago 20 dólares por mês, então eu tenho discussões ilimitadas Agora, se você não tiver acesso ao CHA GPT por qualquer motivo, use cascade, e é muito provável que você receba a mesma resposta Agora, aqui no CHA GPT, eu disse que estava acontecendo E depois de cerca de 90 segundos, ele me deu um plano passo a passo. Então, primeiro de tudo, eu tenho que instalar algo usando o Power Shell. E aqui está o comando exato. Ok, então isso é bastante simples. Vou usar o menu Iniciar e, em seguida, vou digitar push, mas com W. Agora, dentro do Power Shell, vou copiar, colar esse comando e pressionar Enter. Ok, agora, isso é instalar alguma coisa. Está fazendo várias coisas. E ok, sim, parece que é bom ir. Ok, muito legal. Agora, para a próxima etapa, ele me deu um comando diferente, mas insiste em que eu abra um novo terminal. Ok, muito bom. Vou digitar push mais uma vez e colar esse comando. Mas é claro que isso levanta um problema. Eu copiei duas linhas diferentes, o que não está correto Mas vou colar de qualquer maneira, e parece que estamos bem. Agora, o segundo passo é reiniciar o windsurf. Não vamos pular isso. Estou feliz por não precisar reiniciar meu computador agora, vou ter que esperar um segundo até que ele aqueça Vou apertar o botão de atualização no canto superior direito e vencer. Ótimo material. Agora, do seu lado, tenho certeza de que você terá problemas diferentes, problemas diferentes. Mas lembre-se de uma coisa. Depois de resolvê-los, você estará pronto para começar. Você vai voar. Essa é a essência da codificação Vibe Você não precisa saber programar. Você tem que ter pacientes A, B, fazer as perguntas certas, e C, o mais importante, tentar coisas até que funcionem. Agora, o problema é o seguinte. Eu poderia ter feito minha pergunta em cascata e windsurf. Mas como eu já tenho o chat GPT, por que não usá-lo, certo? Eu preferiria receber uma resposta gratuita em vez de desperdiçar créditos e praticar windsurf Agora, para finalizar, é assim que as dores de cabeça acontecem. Resumindo, é simples ABC e sucesso, certo? No seu caso, você pode passar horas na etapa B, ficar preso e não conseguir continuar. Contanto que você mantenha meus conselhos em mente, paciência, faça as perguntas certas e experimente coisas até que funcionem, você ficará bem. Lembre-se de que esse é o preço a pagar por chegar tão cedo. Chegar cedo significa estar sem bugs, com outros problemas, mas é um pequeno preço a pagar pelo seu futuro. E com isso, vamos continuar. 10. Claude x GPT: Volte. Os LLMs são grandes modelos de linguagem e são a principal coisa que o windsurf usa Então, toda a inteligência vem por meio desses LLMs, que a maioria das pessoas chama de modelos. Então isso é um modelo. Agora, para ficar claro, o windsurf é o programa principal, mas a maior parte de sua inteligência vem desses modelos de diferentes empresas Então, o windsurf é como um cachimbo. Os modelos são a água. Agora, a água poderia fluir sem o cano? Claro, mas pode estar em todo lugar. Portanto, o windsurf garante você obtenha mais do que deseja, e é por isso que estamos usando Caso contrário, poderíamos simplesmente nos inscrever em uma empresa específica e usar esse modelo específico, certo? Mas isso seria muito mais limitante e substancialmente mais caro É por isso que o windsurf é uma escolha muito melhor. Então, por meio do Winsurf, você tem acesso à maioria das empresas e à maioria dos modelos disponíveis É por isso que, ao clicar aqui no painel em cascata, você pode escolher entre várias E agora a questão é: se isso é tão importante, qual deles você deve escolher, certo? E a resposta curta é: realmente depende. Vou dar aos melhores a mesma tarefa para que possamos comparar os resultados e decidir juntos. Mas, novamente, você verá que isso realmente depende. Agora, você tem a tarefa anexada, então você deve fazer o mesmo. Em sua segunda visualização, você deve tentar isso em seu próprio computador apenas para verificar se tem a mesma experiência. Agora, aqui está o motivo pelo qual pode ser diferente do seu lado. Os modelos mudam com frequência. Então, o que é lento hoje pode ser bem rápido amanhã. Portanto, tenha isso em mente. Ok, vamos começar do zero. Ao iniciar o windsurf, você receberá o projeto anterior Mas você pode ir ao menu superior para arquivar. A partir daqui, clique em Nova janela. Ótimo. Agora podemos usar o recurso de pasta aberta e eu vou procurar um local Direto dessa janela, vou criar uma nova pasta e vou chamá-la pelo nome do modelo. Isso é opcional. O nome realmente não importa. É para nos organizarmos. Nuvem 37. Ok, ótimo. Selecione essa pasta e vamos carregar nosso novo projeto em Windsor A propósito, se você não conseguir, acesse sua unidade no computador e crie uma pasta da maneira básica. Também adicionarei algumas imagens a essa pasta. Agora, a maneira mais rápida é clicar nesse painel e selecionar Reveal Explorer. Depois, vou simplesmente copiar e colar a pasta com algumas imagens. Para garantir que o modelo saiba que eles estão lá, vou clicar com o botão direito do mouse e escolher Copiar como caminho. Temos que colar esse endereço no arquivo de texto. Se você não tiver uma cópia de um caminho, não há problema. Basta clicar aqui e copiar o endereço. É exatamente a mesma coisa. pausa quantas vezes precisar, mas faremos isso várias vezes nesta palestra, então não Ok, as imagens estão, é claro, anexadas. O modelo está configurado para a nuvem. Agora, vou colar a tarefa e iniciar o cronômetro. Ok, bem, isso está funcionando. Deixa eu te dizer isso. Winserf é como um carro Quais pneus você deve calçar bem, isso realmente depende de você. Existe uma marca e modelo de pneus em particular que seja absolutamente melhor do mercado? Não, claro que não. Existem marcas premium, existem marcas médias e, claro, existem marcas baratas. Portanto, não é uma coisa clara. Não há um vencedor muito claro. É o mesmo no futebol com telefones, com Coca-Cola e Pepsi, com quase Há uma batalha entre duas, três, cinco empresas muito bem estabelecidas. Portanto, é sempre algo em que há muita concorrência e você pode escolher entre várias opções. E é a mesma coisa aqui com esses modelos de IA. E aqui está uma tabela que mostra quais modelos estão disponíveis no momento. A Anthropic é uma empresa. A IA aberta, é claro, é outra. O Google está no jogo, mas também há o Twitter , chamado X AI. E isso é Deep Sky. Existem empresas chinesas e é provável que mais algumas apareçam aqui. Agora, isso pode fazer com que sua cabeça gire muitas opções, certo? E mais do que isso, todos eles têm custos e capacidades diferentes. E o que vemos aqui é que alguns modelos são muito inteligentes, mas são bem lentos. Alguns são inteligentes, mas são muito caros. É exatamente como comprar um carro ou comprar um telefone. Claro, todos eles fazem mais ou menos a mesma coisa, certo? Algumas pessoas juram pela BMW. Outras pessoas não dirigiriam nada além de um Mercedes Algumas pessoas peculiares podem preferir o Lexus. É a mesma coisa com esses modelos. Cada um deles tem fãs obstinados . Mas aqui está o problema. Novas versões sempre são lançadas e bem rápidas. Então, o que eu recomendo? Eu digo, fique com os melhores. Experimente e veja as personalidades. Porque, sim, eles têm personalidades. Agora, o que eu usei muito foi o seguinte. É Cloud 3.7, GPT 4.1 em quatro Mini high e Gemini Isso está fadado a mudar nas próximas semanas ou meses, mas aqui está o que você precisa lembrar. Você tem que testá-los, que é o que estamos fazendo nesta palestra. Ah, a propósito, vamos dar uma olhada. Portanto, isso está em um computador novo com uma configuração muito básica, que fizemos anteriormente no início do curso. Portanto, não temos nenhuma ferramenta instalada. Então Claude começou imediatamente. Ele está propondo uma abordagem muito sólida com uma boa pilha de texto, react e next Você não precisa saber o que isso significa, mas é um sinal muito saudável de que o modelo está aplicando as melhores práticas em tecnologia moderna. Agora, aqui está a primeira coisa no terminal, temos que pressionar Enter, caso contrário, não continuará. Isso pode não ser muito óbvio para a maioria das pessoas. Esse é um daqueles casos em que você não deve se concentrar apenas no painel certo. Na parte inferior, o terminal também é muito importante de tempos em tempos. Agora ele está instalando um monte de coisas. Mas eu estou esperando aqui, e parece que ficou preso. Está congelado. Não tenho certeza do que está acontecendo. Então, aqui está a coisa. Vamos parar com isso. E agora, para retomá-lo, temos que dizer continue. Ok, quando um botão de aceitação aparecer no painel direito, vou clicar em Aceitar bem rápido. Agora, você notará vários s, embora o modelo tenha feito absolutamente tudo e pareça que parou de funcionar novamente. Então, vou usar um terceiro prompt e dizer continue mais uma vez. Desta vez, porém, Claude abandonou os padrões. Não está mais tentando usar essa tag de texto desde o início. Não, foi rebaixado para algo muito mais simples. Ainda vai funcionar, mas não é uma boa prática. Está passando de um carro novo para um carro de 1999. Ele meio que faz a mesma coisa, certeza, mas perderá alguns recursos. E devo dizer que, aos cinco minutos, estou bastante decepcionado Está se movendo muito mais devagar do que eu esperava. Vou aumentar o zoom e, após cerca de 7,5 minutos, está pronto. Poderíamos usar esse botão chamado Abrir e navegador externo, mas desta vez, vou entrar em sua pasta e procurar o arquivo de índice, da maneira clássica. E é assim que o site se parece. Nada louco, mas parece muito bom. Esse é um estado flutuante. A fonte é bonita e robusta. Ele seguiu nossas instruções. Sim, no geral, estou muito feliz com isso. E eu acho que a versão móvel também é bastante sólida. Nada para gritar além de sólido. Agora, vamos compará-lo com alguma coisa. Vamos mudar para o GPT 4.1. Vou adicionar todas as minhas etapas de configuração em um arquivo anexado. Ok, por favor, revise-o. Então, eu vou acelerar. 4.1 também propõe algo bastante forte para reagir e examinar e, em seguida, ajustar CSS. Novamente, está tudo bem se você não sabe o que isso significa, mas é sólido. É um ótimo sinal. 4.1 está verificando as imagens e criando arquivos muito rápido. Menos de um minuto e estou muito feliz. Mas o problema é o seguinte. Aqui está o que está acontecendo. Ela desce em espiral Erro após erro após erro. E isso continua por um tempo. E então fiquei bastante surpreso. Ele parou de funcionar sem dizer nada. Procurei um arquivo de índice, mas não havia nenhum. Então é isso que eu quero dizer com personalidade. Normalmente, Claude sempre me diz o que está acontecendo? Qual é a situação. E, muitas vezes, ele dá vários passos sem parar e me pedir coisas. Mas ouvi dizer que esse modelo, 4.1 da Open AI, é muito mais nervoso. Ele faz uma pausa com frequência e tende a consumir muito mais créditos porque quer que confirmemos se queremos continuar É claro que queremos continuar. Mais sobre os custos mais tarde. Mas sim, isso é mais caro. Isso vai custar mais dinheiro. Mas sim, voltando ao assunto, tive que dar uma segunda solicitação para que pudéssemos continuar. Aceite tudo e, em seguida, uma solicitação final, a terceira, continue. Mas, sim, acho que já está feito. Muito interessante. Ok, só agora, porém, ele me deu o endereço do site, seu host local. Como usou um texto diferente, uma abordagem diferente, na verdade não criou um arquivo de índice. Interessante. Ok, agora vamos simplificar. Vamos abri-lo, mas ele não carrega. Agora, aqui está a luz amarela nesta área. Agora, isso significa que algo está tentando funcionar. Então, vamos abrir o terminal. E aqui, parece que ele está me pedindo para executar um comando, digitá-lo e executá-lo sozinho, que é um pouco frustrante Eu gostaria que ele fizesse isso sozinho ou pelo menos o digitasse. Mas é o que é. Ok, deixe-me digitar isso. Ok, execute-o, e depois alguns problemas, e ele está me dizendo o que eu tenho que fazer para corrigi-lo. Novamente, é uma simples cópia e colagem. Não é nada importante. Mas, inicialmente, eu não tinha ideia de que tinha que fazer isso sozinho. Então, ok, vamos para a quarta solicitação para continuar. E agora eu acho que o servidor está funcionando, e podemos dar uma olhada. Ok, sim, vamos dar uma olhada. O design parece muito bom. É muito mais escuro, e aqui está uma coisa divertida Eu queria um feed do Instagram, embora soubesse que seria muito difícil de implementar. Ele adicionou um, mas é aleatório, não o que eu mencionei. Então isso é uma vitória? Não, não tenho certeza. No geral, é um design decente feito com uma boa tag tex, e a versão móvel também é decente o suficiente. Então, esses são os prompts do GPT 4.14 no total, resultados decentes, mas já vemos uma grande diferença entre ele Vamos continuar depois da pausa rápida. Não trabalhe junto ainda. Deixe-me fazer os outros também. 11. GPT x Gemini x Grok: Bem vindo de volta. Vamos continuar comparando esses modelos. Então, vamos com o GPT 04. Agora, enquanto eu configuro isso, deixe-me explicar rapidamente 4.1 versus 04. Resumindo, cada modelo é construído de acordo com o caso de uso. É um carro esportivo versus um SUV de sete lugares. Eles se destacam em coisas diferentes. Eles são feitos para usos diferentes, certo? 04 é muito focado na codificação. Ele não suporta imagens. Ele se concentra no raciocínio, lógica, o que basicamente significa que é ótimo em codificação, certo Agora, por outro lado, 4.1 é universal. É um sedã típico que maioria das pessoas pode usar para quase tudo Agora, isso significa que ele se destaca em tudo? Não, claro que não. Por estar bem com tudo, não é bom em nada, certo? Obviamente, essa não é uma comparação abrangente entre os dois, mas espero que você entenda por que uma empresa lançaria modelos diferentes, exatamente como as marcas de automóveis. Eles oferecem dois assentos de carro esportivo, um sedã, um SUV, uma caminhonete e assim por diante, diferentes casos de uso com necessidades diferentes Mas sim, voltando ao assunto, 04 é muito, muito pensante. Agora, onde os outros modelos começaram imediatamente, este hesita Depois de 2 minutos, não fez nada produtivo. Acabei de ver minhas imagens dentro da pasta e pronto. Então, isso é um pouco decepcionante. E essa lentidão continua e, na verdade, é muito irritante Lembre-se de que, no momento, o preço é um pouco menor do que o resto deles. Na verdade, é 25% do custo versus a nuvem, por exemplo. Mas o problema é o seguinte. Na verdade, é bem lento. Mas, surpreendentemente, após cerca de 4 minutos , o site está realmente pronto. O projeto está concluído. Agora, vamos dar uma olhada e, você sabe, o site não é muito bom. A propósito, o modelo não nos disse o que usava. Qual estrutura ele usou? Não disse que não conseguiu usar o que os anteriores faziam, como next JS ou VT, seja o que for Mas, sim, na verdade não pensou nisso. Não nos disse nada e não nos perguntou nada. Agora, porque com os codificadores Knot, isso é realmente um mau sinal porque não temos contexto Na verdade, não podemos pedir ajuda. Nós realmente não sabemos o que está acontecendo com nosso projeto. Ele o construiu, mas não temos nenhum contexto, nenhuma pista. E quanto ao design. Na versão móvel, podemos ver como o texto toca nas laterais, também nas cartas Eles não têm espaço para respirar nas laterais. Então, sim, funcionou. Fez isso em um único prompt, seja o que for. Mas eu não acho que isso seja incrível. Mas sim, no geral, isso é 04. E aqui está a coisa. Quando você procura em um gráfico, parece ser um dos melhores. Mas acho que, nesse caso , está bem abaixo da lista. É lento. Não nos disse nada. Então, no geral, não posso dizer que estou feliz. Na verdade, eu tentei por alguns dias. Na verdade, acho que foi cerca de uma semana, sem parar, apenas 04. E, cara, muito lento. Mesmo sendo inteligente, não compensa. Claro, estou feliz que não cometa muitos erros, mas sim, no geral, é muito lento. Ok, vamos passar para o X AI, também conhecido como Twitter. Eles têm um modelo chamado Glock. Então, vou seguir exatamente a mesma tarefa, os mesmos passos. Ok, a Glock 3 diz que quer usar o script react e digitar, e explica o porquê. Isso é muito bom. Começa forte criando vários arquivos, mas algo suspeito está acontecendo. Então, como você pode ver aqui, os evos estão surgindo, e há muitos deles um após o outro Ah, então isso não é ótimo. Então, algo aconteceu aqui. Prazo excedido. Eu não tenho ideia do que é. Mas você não nos perguntou nada, então continua. Então, acho que se lembrou do objetivo, o que é muito bom E sim, está refazendo os arquivos de cima, que tinham versus , novamente, mais do que aqui Então isso não é um bom sinal, mas enquanto estiver funcionando, você sabe, eu posso lidar com isso. E o problema é que, embora meu computador não esteja configurado, repito que não está configurado, é o mesmo para todos os modelos, certo? Portanto, essa é uma comparação justa porque todos os modelos receberam exatamente a mesma tarefa no mesmo computador. Agora, o grog parece achar que há um problema com criação de arquivos e está procurando opções Por isso, decidiu usar uma estrutura mais simples com apenas os arquivos essenciais Então, rebaixar, não é o ideal, mas vamos ver. Então, depois de um único aviso, ele nos deu nosso resultado. Ok, vamos dar uma olhada. É um design básico. Não está usando a tag de texto que inicialmente disse que usaria. E quanto ao design real, bem, é o único que conseguiu implementar os feeds corretos do Instagram, então esse é o único que realmente funciona Mas, dito isso, faltam as respectivas fotos nos produtos. Então, no geral, pelo que estou vendo aqui, a árvore Glock, é um pouco errada. Não posso dizer que seja meu favorito, mas não é pior do que 04. Gosto de sua personalidade, mas, novamente, você terá que decidir por si mesmo. Agora, um teste final. Vamos mudar do Google para o Gemini, no qual a maioria das pessoas aposta Mesmos passos de antes, nada mudou. Então, vamos dar uma olhada. Então, imediatamente, ele diz que vai criar um site básico, sem tag de texto. Não é ótimo. No entanto, ele fala conosco de uma maneira excelente. Ele explica que vê oito imagens e está feliz poder criar uma grade perfeita de quatro por dois. Essa é uma visão adorável. É muito interessante. Não está nos pedindo nada. Ele continua funcionando. E está funcionando bem rápido, no momento em que mostra isso. Depois de um minuto e meio no ponto, está realmente pronto. Uau. Ok, bem rápido. E vamos dar uma olhada. Ok, sim, isso é sólido. Nada para gritar , é claro, mas a tarefa era bastante vaga Então, estou feliz com o resultado. No entanto, o feed do Instagram não é real. Isso é muito interessante. Então, o que ele fez foi usar minhas fotos para criar uma falsa, o que é uma abordagem muito interessante. Mas não tenho certeza se confio nisso. Eu teria preferido dizer: Ei, eu não posso fazer isso com alguma coisa. Mas sim, acabei de inventar um. Ok. O cartão não é tão bonito quanto o de Claude, e as imagens são um pouco modestas Eles são bem pequenos e não se encaixam bem. Além disso, todo o site é super amplo. Ok. O Google acaba de lançar um novo modelo, um novo modelo Gemini, mas ele ainda não está disponível Mas sim, no geral, isso é o que o atual pode fazer muito rápido. Então, no geral, qual é o vencedor? Bem, está em debate. Você tem que testar você mesmo. Mas posso dizer claramente que 04 é muito lento. E Grock esqueceu uma das coisas mais importantes: as fotos do produto Acho que o GPT 4.1 é o único que realmente usou o servidor local e usou a ótima textag com react VT e tailwind CSS Eu gostaria de dizer que, como não programador, como pessoa que não é técnica, acho que isso é uma grande vantagem porque não sei o que quero pedir, certo? Quando o modelo está me guiando, acho que é melhor porque, novamente, não sei o que pedir Então, na verdade, isso é muito bom. Além disso, no lado em destaque, ele se integrou ao feed do Instagram, embora fosse o errado de uma empresa aleatória. Mas sim, no geral, esse é o teste. Não é definitivo. Não é abrangente. Se você estiver dando instruções melhores aos modelos, se tiver configurado seu sistema de uma maneira melhor, poderá obter resultados totalmente diferentes. Além disso, toda vez que você o executa, há uma boa chance de conseguir outra coisa. Portanto, não tome esses resultados como definitivos. Não, tive muitas dificuldades com o GPT 4.1 com meus aplicativos Android. Estava esquecendo o que eu tentei há dois, 3 minutos, e estava correndo em círculos Em seguida, mudei para o Cloud e funcionou imediatamente desde o início Portanto, não há respostas definitivas. Às vezes, troco constantemente durante um projeto quando fico preso, mas, na maioria das vezes, começo com um objetivo claro. Ei, eu vou construir esse projeto com o Model X, com Claude, com Gemini, E isso porque quando você muda de modelo durante um projeto, o novo pode não gostar do que o anterior fez. Sim, isso acontece. Na verdade, é muito engraçado. Faça críticas. Ah, cara. Há uma bagunça aqui. Eu tenho que consertar tudo isso. Deixe-me lidar com isso, cara. Quem trabalhou aqui fez um trabalho terrível. Então, quando você vê a IA dizer coisas assim, é realmente muito engraçado. Mas sim, para finalizar, espero que agora você tenha uma ideia de como esses modelos se comparam. E agora você tem uma perspectiva diferente, não apenas o gráfico que eu mostrei. A propósito, existem muitos gráficos. Esse é apenas um deles. Então, meu conselho, experimente você mesmo. Use meu prompt. Você o anexou e vê o que é o quê. Então me conte seus resultados na área de comentários. Eu adoraria ouvir sobre sua experiência. Dê-me seu melhor modelo, você é o pior, e você é o médio. Lembre-se, divirta-se com isso. Os problemas estão prestes a surgir. Fique calmo, relaxe e aproveite o processo. Você terá seus próprios favoritos. O que importa é que você alcance seu objetivo, não importa o que você use. Boa sorte 12. Custos explicados de uma maneira simples: Bem vindo de volta. Quero abordar algo que é muito importante, que é ansiedade de alcance, ansiedade de crédito. E aqui está a coisa. Seu plano mensal vem com uma certa quantidade de créditos, 500 créditos no momento. Você paga uma certa quantia e pode usar esses créditos. São 15 dólares no momento, então 15 dólares por 500 créditos Agora, veja como isso acontece. Clique aqui e dê uma olhada. Você pode ver, o custo varia. Alguns deles são muito caros e ninguém os usa. De tempos em tempos, também há promoções. Por exemplo, a Open AI deu 4.1 e 04 de graça, totalmente grátis por cerca de dez dias. No momento, eles são mais baratos que a nuvem. Claude também tem duas versões no momento. Então, parece bastante complicado, certo? E isso porque às vezes você dá a um modelo um aviso, uma tarefa. E então o modelo faz 20 coisas uma após a outra, certo, completamente sozinho, e você é apenas um passageiro, e é um crédito, certo? Ele divide uma tarefa enorme em tarefas menores e, pouco a pouco , as verifica. Funciona sozinho. Ótimo. Mas outros modelos são diferentes. Você avisa e ele executa uma única etapa. Então, um crédito, mas na verdade é apenas uma etapa. Às vezes, na verdade, diz o que você deve fazer, o que é muito frustrante É por isso que o custo é relativo. Você pode dizer: Ok, digamos que 4.1 é super barato, certo? Mas se ele tem amnésia e precisa que você segure sua mão a cada passo do caminho, e você precisa dar quatro ou cinco instruções, enquanto para Claude, você só precisa dar uma única Bem, então, o custo realmente faz algum sentido? Você pode realmente comparar os dois? Não, na verdade não. Por outro lado, alguns modelos são incrivelmente caros, até dez vezes mais caros Agora, isso significa que eles são dez vezes melhores? Não, esse não é o caso. Novamente, acho que as coisas estão mudando em um ritmo rápido, e esses modelos vão ficar melhores e mais baratos. Agora, aqui está o que eu realmente quero que você anote. Ficar sem créditos não é grande coisa. Você tem aquele belo número redondo 500. Mas na primeira vez que você o usa, ele cai para 499 e depois 498 E depois de alguns dias neste curso, você terá 450 e depois 390 E então o pânico começa a se instalar. E se eu estragar todo o plano, 500 créditos? O que acontece então? Eu tive o mesmo pensamento, mas depois percebi o jogo. Mesmo que você passe por todos os 500 créditos e não tenha um projeto concluído, o que é quase impossível, aliás, você sempre pode comprar mais. E o preço agora é de dez dólares por 250 créditos. Isso é $0,04 por baile de formatura que você faria. Então, $0,04, certo? Novamente, às vezes, um único crédito pode lhe dar muito progresso. Embora, outras vezes, não. Realmente depende de quão claro você está com suas instruções, quão detalhadas elas são. Mas mesmo que você tenha resultados médios, certo, vamos colocar desta forma. É $0,04, certo? Então, dez solicitações, dez tarefas, custarão $0,40 100 significa quatro dólares. E meu palpite é que, no início, você gastará menos de 50 por dia, especialmente se usar alguns dos modelos mais baratos que estão em modo de promoção. Agora, é aqui que isso finalmente funciona e onde, para mim, fez muito sentido Nosso objetivo é criar sites e depois ganhar dinheiro, certo? Crie projetos que nos contratem como freelancers, consigam um emprego estável, lancem um negócio Esse é o objetivo, certo? Ok, se você quisesse contratar um programador, confie em mim, você não pagaria dois, três, quatro dólares por dia Não. Estou falando de um programador comum, certo? Mas aqui, você tem acesso a alguns dos melhores programadores do mundo por centavos, literalmente centavos. Agora, uma página de destino média deve levar você de 2030 solicitações a talvez 100 no máximo Em nosso exemplo, usamos menos de cinco, certo? Mas mesmo se você usar 50, certo? Confie em mim, isso não é nada no grande esquema das coisas. Quando você vende esse site por qualquer coisa, digamos que seja 500 dólares no preço mais baixo, certo? Realmente importa que você gastou dois dólares fazendo com que não, claro que não Portanto, essa ansiedade de que você vai ficar sem créditos, na verdade, não é racional. A maioria dos programadores pede de 25 a 100 dólares por hora em Winsurf é 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. Agora, tenha em mente outra coisa. Inicialmente, você não sabe o que está fazendo, certo? Está tudo bem. Você pode gastar alguns créditos. Os primeiros 20 ou 30. Isso é totalmente bom. Isso é normal. É assim que você aprende, certo? Mas à medida que você ficar cada vez melhor nisso, você usará os créditos com mais sabedoria Mas, por enquanto, faça alarde. Use-os. Não se preocupe com eles. Isso é um investimento em seu futuro. Você compra um curso, compra várias 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 com dezenas de pessoas. Os custos são imensos. Aluguel, serviços públicos, salários, equipamentos caros, o outro lado do windsurf com o windsurf Isso não é melhor negócio do que codificar no Vibe no momento. Com alguns dólares, você pode conseguir muito. Agora, para finalizar, não proteja seus créditos. Não os valorize. É um investimento em sua educação. Use-os. Ok, vamos continuar. 13. Os perigos ocultos da programação no Vibe e acesso completo à IA: Bem-vindo de volta. Vamos falar sobre algo que não é muito divertido, mas é uma segurança super importante. Especificamente, o que acontece quando vibramos o código? Sabe, quando estamos na zona, animados para experimentar nossos novos agentes de IA, podemos instalar uma tonelada de coisas à esquerda e à direita sem pensar duas vezes, certo? Mas aqui está o problema. Toda vez que você executa um script encontrado neste cabo, lê ou em algum outro lugar, toda vez que dá acesso total a um agente, a um modelo, a uma empresa, você está entregando as chaves do seu computador E deixe-me explicar o que isso significa. Imagine que seu computador é seu apartamento, certo? E lá dentro, você tem coisas particulares. login bancário, seus planos de negócios, você tem arquivos criativos, dinheiro criptográfico, cartões de crédito , fotos privadas, seu passaporte, identidade, tudo mais. Agora, imagine isso. Você sai para almoçar e deixa a porta do seu apartamento aberta. Pior, você cola sua chave na porta da frente para que qualquer um possa usá-la para qualquer um pegar, certo? Agora, isso é exatamente o que acontece quando deixamos alguém ou alguma coisa controlar nosso computador sem questionar. Isso acontece muito com a codificação do Vibe, porque às vezes a IA não considera esses Às vezes, ele salva senhas, todas as senhas de projetos em um arquivo de texto chamado senhas. Não estou exagerando. Bem, eu sou um pouco, mas não muito. Os bandidos sabem essas coisas. Esses modelos não têm segurança em mente, a menos que você peça. E quando você deixa um programa fazer o que quiser com seu computador, novamente, é como dizer: Ei, fique à vontade para dar uma olhada na minha casa e pegar o que quiser. Agora, o problema é o seguinte. Não queríamos instalar o Python Não queríamos consertar a instalação quando ela não funcionava, certo? Não queríamos ler sobre quatro salas enviar tickets de suporte e pedir ajuda às pessoas, certo? Não queríamos fazer isso. Nós preferiríamos que a IA simplesmente consertasse isso, fizesse isso sozinha. Mas é assim que tem que ser, mesmo que seja frustrante Eu sei que todos nós queremos um robô pessoal que faça as coisas automaticamente de uma maneira perfeita, um clone do GPT, Talvez ele digite para você, talvez instale programas Parece muito legal, certo? Mas o problema é o seguinte. Dar controle total à IA não é como contratar um assistente pessoal. Não, é como dar a um estranho seu cartão de crédito, suas chaves de casa, seu passaporte e dizer: Ei, faça o que achar melhor. O problema é o seguinte. Ainda não chegamos lá. E embora essa tecnologia seja impressionante, a tecnologia é fantástica. A parte de segurança ainda é muito frágil. Então, sim, sou totalmente a favor da IA. Adoro usá-lo para acelerar meu trabalho. Estou bem cedendo algum controle, mas não vou dar controle a nenhum tipo de MCP, a nenhum tipo de agente ou qualquer outra coisa, certo? Um pouco mais de trabalho para minhas mãos. Claro, está tudo bem. Instalar ferramentas manualmente, verificar permissões, ler algumas instruções não é o fim do mundo. Claro que leva mais tempo, mas também pode lhe dar controle. E quando se trata de lançar um projeto sério, seja um aplicativo, um site ou uma startup, qualquer que seja, segurança nunca deve ser uma reflexão tardia Falaremos mais sobre isso mais tarde. Mas, por enquanto, queria dizer que trabalharemos um pouco sozinhos, mas queria contar todas essas coisas porque acho que é muito importante. Tudo o que instalamos é de primeira qualidade. É material oficial. São programas muito conhecidos. Mas você encontrará na web outras coisas que não são oficiais, por assim dizer. Você encontrará um software feito por quem sabe quem em uma parte diferente do mundo que afirma poder operar seu computador automaticamente. Ok, quem é essa pessoa? Quais são esses desenvolvedores? Quem é essa empresa? Você não pode lhe dar chaves com um salário como esse. Então, novamente, tudo o que instalamos até agora e tudo o que estamos prestes a fazer, novamente, foi examinado É algo seguro e você não deve ter nenhum problema Mas não caia nessa armadilha em que você vê algo no TikTok e, olha, ele opera meu Não instale isso ainda. Use algo que seja muito conhecido. Use as melhores práticas. Ok, vamos continuar. 14. 80% a 20%: Bem vindo de volta. Deixe-me ser claro. Você não criará uma empresa de $1.000.000.000 sozinho com o Vibe Coding, mas pode lançar produtos, mas pode lançar produtos, sites Um dos principais problemas é conseguir os últimos dez a 20% que você pode querer. E essa última parte 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á esse cartão de produto que parece decente, mas talvez queiramos que pareça um pouco melhor, certo? Então esse é o objetivo. Faça com que pareça melhor. Agora, esse é o tipo de coisa que pode dar muito certo ou muito errado no windsurf Então, vamos testar a sorte. Acesse o menu principal para arquivar e abra esta pasta. Você tem um arquivo anexado que primeiro precisa extrair. Ok, agora, o problema é o seguinte. No momento, usaremos o Cloud 3.7, mas você terá uma experiência semelhante com a maioria dos modelos, mesmo com os mais novos Agora, talvez você queira abrir este site para ver a aparência do meu cartão existente, e eu quero usá-lo como ponto de referência, certo? Algo assim me faria feliz. Ok, agora poderíamos potencialmente escrever todas as alterações que quisermos, e isso nos economizaria alguns créditos. Mas eu vou fazer isso passo a passo. Isso normalmente oferece melhores resultados. Então, digamos que, 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. Ok, vamos às corridas. É preciso muita análise, mas isso é típico quando você importa um projeto. Examinará todo o código e tentará entender o que está acontecendo. Ok, avance rápido. E tudo bem, está feito. E aqui está exatamente o que quero dizer. Esse é o meu ponto principal. Isso não parece o que eu tenho no meu site ao vivo. Agora, parece horrível? Não, claro que não, mas não é o que eu quero. 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 pode exigir muitos bailes de formatura e muito esforço Ok, vamos continuar. Vamos escrever isso. Adicione um texto de detalhes da exibição 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 isso é uma pergunta. Você poderia descrevê-lo de uma maneira melhor? Essa é outra discussão. Mas sim, você tem uma ideia em sua mente. Nesse caso, temos a vantagem de realmente ver a versão ao vivo. Mas, sim, você só precisa fazer o seu melhor e descrever o que você quer. E vamos ver como isso acontece. Ok, depois de um tempo, está feito. Lembre-se de sempre clicar em aceitar todas as edições. Agora podemos atualizá-lo. Sim. Novamente, é muito bom. É exatamente o que eu quero? Não, na verdade não. Isso é tudo que você precisa perceber. Claro, essa é uma pergunta sobre a qualidade das instruções do meu prompt. Eu poderia descrever o que eu quero com muito mais detalhes, certo? Talvez forneça uma imagem como referência, talvez mostre um design que eu fiz Figma Claro. Isso poderia funcionar potencialmente. E não sou contra mais trabalho, mas não é isso que estou tentando dizer. Estou tentando dizer que você deve estar preparado para essa carga de trabalho Você obtém 80% a 90% lá, mas o resto é muito complicado Deixe-me tentar um prompt final. Mova o peso do produto, o lado direito do preço, alinhe o peso com o botão Adicionar ao cartão, torne o botão Adicionar ao cartão completamente arredondado, altere o peso dos detalhes de visualização de negrito para normal Então, como você pode ver, estou empilhando instruções, certo? Um único crédito, mas estou tentando consertar várias coisas. Você pode, é claro, fazer isso, vamos ver como isso acontece. A propósito, embora você possa criar 100% uma loja com o Winserf, acho que ainda usaria o WooCommers baseado no WordPress, mas talvez o ShopII para esse projeto, simplesmente porque eles simplesmente porque Obviamente, se for apenas uma loja simples com apenas um ou dois produtos, algo bem pequeno, você também pode trabalhar no WinSerf, meus $0,02 A única exceção seria uma loja muito simples baseada em poucos produtos. Mas sim, voltando, isso é, novamente, decente. Não é exatamente o que eu quero. Poderíamos gastar mais dez, 15, 20 créditos, ou poderíamos tentar várias abordagens para chegar mais perto do que eu quero, mas eu prefiro terminar com isso. Seja feliz com isso. Isso não vai melhorar nem arruinar seu projeto. Não seja perfeccionista. Inicie o projeto o mais rápido possível, veja como funciona, descubra o que as pessoas estão dizendo sobre ele e, em seguida, aprimore-o. Novamente, depois disso, você deve polir. É muito fácil se fixar nesses detalhes, mas prometo que você perderá a longo prazo E estou falando por experiência própria porque também sou perfeccionista É difícil, mas temos que aceitar isso. Inicie e depois dê um polimento. E com isso, vamos continuar. 15. Do Figma ao Windsurf?: Bem vindo de volta. O sonho de codificar um design feito no Figma em apenas alguns segundos ainda não existe Pelo menos não o windsurf. Temos um Figma MCP através do qual você pode dar acesso ao windsurf aos seus projetos. Parece ótimo. Você precisa configurar um token e ter as configurações do Figma. Não é muito complicado, mas você precisa ser um pouco paciente. A propósito, por favor, não trabalhe junto. Agora, o problema é o seguinte. Parece incrível. Agora, a IA pode analisar todas as nossas decisões de design e implementá-las de forma perfeita. Afinal, é com isso que estamos lutando, certo? Isso dura dez ou 20%, os detalhes, mas não funciona. Na data desta gravação, ele está realmente fazendo um trabalho horrível, não importa o modelo que você usa Eu tentei com Claude, com Gemini, com GPT, e os resultados variam de ruins a impossibilidade de terminar a tarefa, e eu realmente quero dizer O fluxo é simples. Você cria uma boa página no Figma, certo? Você seleciona o quadro inteiro. Em seguida, você copia essa página específica clicando com o botão direito do mouse e escolhendo copiar link para seleção. OK. Depois, você pode iniciar um novo projeto e uma nova janela, criar uma pasta, como sempre, e depois dizer ao modelo de sua escolha que implemente esse design usando CSS, HTML e JavaScript. Então, coisas muito básicas para não complicar as coisas, certo? Em seguida, você adiciona o link. Deveria ser tão simples quanto isso. Mas por alguma razão, isso não funciona. Novamente, é tão ruim que nem vale a pena mostrá-lo. É simplesmente horrível. Isso não funciona. Agora, o problema é o seguinte. Quando as coisas mudarem e surfarem windsurf, 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 a usar o figma, mas porque os princípios de design fazem toda a diferença, coisas como contraste Assim, as pessoas veem o que realmente importa, hierarquia para guiar os olhos, títulos grandes, limpar os botões, espaço amplo Obviamente, mais é melhor. Não junte as coisas. Simetria, alinhamento, mantenha-o arrumado, mantenha-o limpo. Tipografia, não apenas fontes bonitas, mas tamanhos, peso e espaçamento apropriados Esses são os princípios que ensino. E, como você está descobrindo, essas plataformas de codificação nos ajudam com todo o código complicado Mas se você quer um design sofisticado, precisa conhecer esses princípios poder orientar o modelo Você tem que saber o que pedir. Coisas como aumentar o preenchimento no cartão ou fazer com que esse texto H dois e, em seguida, esse texto H três, seja o que for, use esse código colorido ou como alguns botões precisam ser preenchidos enquanto outros devem ser texto puro Essas são as coisas que eu ensino em meus cursos de design, e prometo que isso não é propaganda. É o que você precisa. Leve seus designs para o próximo nível para melhorar suas instruções, suas instruções, para obter melhores resultados É o que você precisa para descrever melhor suas ideias. E com isso dito, Figma e windsurf não funcionam, então vamos continuar 16. Visão geral: Bem-vindo de volta. Até agora, aprendemos que a codificação vibe basicamente matou o web design em termos da forma clássica de trabalhar Wireframes, designs de alta fidelidade e figma, preparando o arquivo para a codificação e, finalmente, um código entra e realmente implementa o projeto em realmente implementa o Agora, todo esse fluxo levaria de alguns dias a alguns meses, e esse não é mais o caso. E, na verdade, me dói dizer isso porque sou ativo nessa área há muitos e muitos anos. Mas o problema é o seguinte. Como designer, tenho muita experiência em mover ideias da minha mente para uma página em branco. Normalmente sei o que quero. Eu sei o que parece bom e o que os clientes geralmente querem. Eu vou ficar bem. Não estou 100% confortável com essa onda de IA, mas porque estou nela, estou aprendendo, estou crescendo. Acho que, na verdade, há mais oportunidades do que antes. Acho que estou aproveitando essa onda, e apesar de perder muitos projetos. Acho que vou ter um grande sucesso com a codificação Vibe. Agora, o que realmente me preocupa é como meus amigos que gostam de programação vão se adaptar Veja, pelo menos no meu país, ninguém está mais contratando desenvolvedores. Os únicos empregos disponíveis são para cargos de alto escalão e outros cargos em que escalão e outros cargos alguém normalmente receberia, digamos, $3.000 por mês, agora estão recebendo apenas É uma grande mudança porque maioria das empresas não consegue se adaptar tão rápido. Eles veem como empresas multibilionárias estão se concentrando em IA, por exemplo, linguagem dupla, ok Mas a maioria das empresas não pode realmente fazer isso. Sem muitos fundos, sem muitos desenvolvedores seniores na equipe que supervisionam de perto a IA, as coisas estão fadadas a dar errado, e a maioria das empresas não pode pagar isso, não pode se dar ao luxo de mexer com a A reputação deles é tudo, certo? Isso significa que a maioria das empresas está basicamente presa. Eles realmente não podem contratar pessoas da maneira clássica, desenvolvedores porque isso parece desatualizado. Investidores, acionistas de todos os tipos, bancos poderiam olhar para eles como se estivessem comprando aparelhos de fax Agora, obviamente, isso faria sentido, mas por outro lado, eles também não podem realmente mudar para a IA, porque, novamente, é muito sensível. É cedo e erros estão fadados a acontecer. Então, isso significa que o mercado de trabalho para desenvolvedores está basicamente em pausa, pelo menos na minha parte do mundo E é por isso que me preocupo com Again, designers, acho que eles podem mudar. Eles geralmente são engenhosos e ágeis. Espero que os desenvolvedores consigam fazer a mesma coisa. Mas sim, no geral, é assim que eu vejo as coisas. Algumas oportunidades são perdidas, mas as novas são muito mais interessantes. Então, no geral, acho que vamos ficar bem. E com isso, vamos continuar. 17. Da ideia ao Windsurf, ao Vercel e ao site ao vivo: Bem vindo de volta. 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. Então, começaremos com um projeto totalmente vazio e com o windsurf. Crie uma versão funcional desse site que seja executada localmente em nosso próprio computador, nada mais. Quando estivermos satisfeitos com isso, enviaremos para a nuvem, para o Github, para a Internet Você pode pensar no GitHub como o Drawbox ou o Google Drive. É um lugar na Internet onde você armazena seus arquivos. Isso significa que você tem acesso a eles de qualquer dispositivo e, se quiser, pode compartilhá-los com todos. É muito fácil de fazer. Então, quando o site estiver no Github, nós o enviaremos para a Versll, que é uma plataforma que nos ajudará a publicá-lo para que todos possam vê-lo Resumindo, a Versll substitui uma empresa de hospedagem. Essa é a essência disso. O problema é o seguinte. Depois de importar o site do Github para o Versll, ele funcionará muito bem, mas você terá um link feio, algo assim, algo assim Mas ainda assim, no geral, ele ainda está disponível para todos. Assim, você pode compartilhá-lo com amigos, familiares, pode mostrá-lo ao seu cliente, que ele faça o trabalho. Mas se você quiser dar o próximo passo, você pode comprar um nome de domínio diretamente no Versll, esperar alguns minutos, talvez algumas horas, e então você terá seu próprio endereço, como cresbarn.com Isso já foi tirado, então eu comprei cresbarndt Então, uma vez que tudo isso esteja configurado e funcionando, é claro, você pode voltar ao Winserf e continuar fazendo melhorias A melhor coisa sobre isso é que você pode pedir ao Winserf que atualize o Github, e ele fará isso automaticamente E então o Verslls também funcionará automaticamente. Então, na verdade, é bem fácil. A parte difícil foi configurar tudo no início do curso. Agora, é um método de seguir os passos e depurar, corrigindo pequenos problemas que Agora, esses problemas podem levar cinco, seis, dez solicitações, talvez dez, 15, 20 minutos, ou você pode não ter sorte Talvez você precise de 20 avisos, talvez de algumas horas. Mas em qualquer caso, você chegará lá. Isso é o que vamos fazer nesta parte do curso. Então, para recapitular, começaremos com um bom prompt, algo com uma quantidade razoável de detalhes, e depois começaremos a construir em Windsor Então, quando terminarmos, publicaremos no Github. Em seguida, para Versll. Então, será ao vivo e compartilhável com todos. Etapa opcional no final, podemos comprar nosso próprio nome de domínio. Mas, novamente, isso é opcional. Uma coisa rápida. Por que nos inscrevemos no Superbse ou reenviamos? Bem, o reenvio será útil neste projeto porque teremos um formulário de contato, e o reenvio é necessário para Quando alguém usa o formulário de contato no site, queremos que o cliente receba essa mensagem, certo? Então é para isso que serve o reenvio. O SupaBse é ótimo para oferecer aos usuários a opção de registrar uma conta Ele lidará com todas as coisas complicadas do banco de dados e, da forma como configuramos tudo, ele fará isso automaticamente. Supabse é para mais tarde. Por enquanto, concluiremos um site sólido do início ao fim e, em seguida, poderemos conversar mais sobre coisas complicadas, como bancos de dados, pagamentos, registros e outros enfeites Por enquanto, vamos trabalhar. Vamos publicar nosso primeiro site. 18. Vamos entender a proposta: Bem vindo de volta. Aqui está o prompt que nós dois vamos usar. Você o tem anexado. E em termos de detalhes, eu diria que é seis em dez. Se você pegar esse aviso de som natural e tentar melhorá-lo no chat GBT, por exemplo, receberá um aviso muito mais detalhado do que Normalmente, isso ajuda, mas uma solicitação complicada seria um pouco complicada, então decidi usar algo que soasse natural Caminhamos, depois corremos passo a passo, certo? Agora, um dos problemas é que, em termos simples, eu digo azul, direito, azul e branco. Esse é o esquema de cores. Mas, geralmente, você deve fornecer códigos de cores. Azul pode significar absolutamente qualquer coisa desde um azul bebê superclaro até um azul marinho escuro e intenso. Portanto, tenha isso em mente. Quanto mais detalhes você fornecer, melhor será o resultado. Quero lembrá-lo de que, mesmo que você faça tudo perfeitamente, mesmo que copie e cole meu prompt, seu site terá uma aparência diferente do meu. E é assim que esses modelos funcionam. E outra coisa, é muito provável que você tenha problemas diferentes dos que eu vou ter. E isso é totalmente normal. Novamente, eu não tenho uma bola de cristal, mas trabalho em Windsor há muito tempo, então sei que isso é inevitável Ok, então configure uma nova pasta e o novo projeto de windsurf, o básico Certifique-se de ter feito toda a configuração da primeira parte do curso. GitHub, Python, sem JS , as obras, Power Shell, Docker , etc Falando sobre tecnologia, escrevi algumas coisas no prompt, usei next JS e tailwind, usei next JS e tailwind, reenviei para o formulário e depois GitHub e Versll Então, eu mencionei claramente essas coisas, e aqui está o porquê. Então, quando você começa, você escreve um prompt básico, faz de mim um site, certo? E você vê como certos modelos, pelo menos os mais inteligentes, conversam com você Já vimos como alguns escolheram HTML, CSS e JavaScript básicos, enquanto outros mais inteligentes recomendaram exatamente o que eu escrevi aqui Então, aqui está a coisa. Se um modelo preferir usar essa tag de texto, anote-a E então, da próxima vez, sugira. E foi exatamente isso que eu fiz. Falei com alguns programadores, seniores, e perguntei a eles: por que o tailwind? Por que não isso? Por que não isso? Por que reagir? Por que não isso? Por que não isso? Resumindo, esses programadores me disseram o seguinte. Todo mundo tem sua própria preferência. Assim como BMW Pepsi e Android, outras pessoas gostam de Mercedes, doctor Pepper e IOS. Quem está certo? Ninguém, é claro. É o que você prefere. É a mesma coisa aqui. Então, se esse modelo preferir usar essas tags de texto específicas, ok, vamos fazer isso Agora, a próxima coisa sobre o aviso que pedi um 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 é como uma espécie de lista de verificação, se você quiser, para saber onde está Então esse é o PRD. Não dói, então sempre o tenha lá dentro. Em seguida, eu queria adicionar imagens. Embora pudéssemos usar um MCP para baixar alguns automaticamente. Na verdade, eu fiz esse splash.com. Selecionei algumas fotos que funcionariam para um dentista. A propósito, lembre-se de que é um filtro. Algumas fotos são gratuitas, outras são pagas, então certifique-se de usar o filtro. Ok. E então eu mudo para as pessoas para tirar algumas fotos de todas as avaliações. Então, depois de configurar seu projeto em seu drive, você deve copiar o endereço e colá-lo aqui no prompt. Então isso é algo que você tem que fazer. Você tem que substituí-lo. Este é o primeiro aqui, e aqui está o segundo, o que eu fiz foi colocar uma pasta dentro da pasta principal. Só para ficar claro, você baixa fotos do Osplash. Você os coloca dentro da pasta em qualquer lugar. Liguei para o TMG e coloquei no meu desktop aqui Em seguida, temos que mover essa pasta da área de trabalho para onde o projeto no WinSerf está configurado No meu caso, o projeto no Winserf está configurado no D Dentist Então é aí que temos que colar essa pasta. Agora, para obter um endereço de qualquer local, use essa área. No meu caso, é D Dentist IMG. Então, copie-o com o Control C, depois mude para o arquivo promocional e cole-o Aqui já está configurado, mas vou colá-lo embaixo para que você possa vê-lo, para que funcione É assim que você consegue o endereço. E lembre-se, em Winserf abrimos dentista. É por isso que estamos adicionando as fotos lá. É por isso que não os estamos deixando no desktop. E para as críticas, a mesma coisa. Entre na pasta e clique aqui para ver o caminho. Copie e cole no arquivo de texto. Ok, vamos continuar. Ok, o resto do prompt são apenas informações básicas. A única coisa importante que estou pedindo é um formulário para marcar consultas, mas ele não tem nenhuma funcionalidade avançada Portanto, não incluí uma lista suspensa para os serviços que o cliente talvez queira. Não incluí a hora que exigiria que tivéssemos a agenda do médico quando ele estivesse ocupado, quando estivesse disponível. Então, o que eu fiz foi escolher a versão mais simples, um formulário de contato simples. Além disso, adicionei o número de telefone para que eles pudessem atender as chamadas dessa forma. A ideia é essa, você poderia vender este site. Desde que tenham alguém atendendo seus telefones e e-mails, um formulário de contato básico funcionará. Eu te prometo isso. Agora, o gabinete pode ligar de volta para o cliente pedir mais informações e marcar uma consulta. Então, repito, mesmo que essa seja a forma básica, a mais simples, a versão mais simples, você ainda pode vendê-la. Mas, é claro, você também pode adicionar mais recursos e funcionalidades. Você pode usar isso como base e provavelmente adaptá-lo, vendê-lo para veterinários, restaurantes, advogados, qualquer coisa que você possa imaginar Novamente, essa página de destino é versátil e você pode fazê-la funcionar. Vamos ao que interessa. 19. Comece o projeto o: Volte. Para este projeto, vou usar esse modelo porque gosto bastante de sua personalidade. Se um muito mais novo não estiver disponível, use o mesmo Não importa o que aconteça, você encontrará problemas que podem não aparecer da minha parte. Então, por favor, seja paciente e peça ajuda. Ok, vamos começar. Vamos às corridas. É fascinante ver como o modelo pensa e como ele frequentemente comete erros. Tipo, ele está tentando criar uma lista de verificação, mas não criou a pasta primeiro, o que é uma bobagem, mas isso é o pior que já existiu. Tenha isso em mente. Em alguns meses, isso decolará e esse modelo se parecerá com o Windows 95, se você for tão antigo. Ok, temos o PRD, e isso é realmente bem detalhado Eu posso ver nos requisitos técnicos que ele entendeu corretamente o que eu queria usar. Então, próximo JS, tailwind e assim por diante. Novamente, eu não sou um desenvolvedor, mas se esse modelo gosta de trabalhar com essas tecnologias, com certeza, por que não? Ok, eu os verifiquei. Eles são modernos e têm muitos benefícios em relação ao simples site básico de CSS e HTML. Então, sim, no geral, tudo bem. Ok, temos um primeiro comando para o terminal. Você poderia potencialmente configurar o windsurf, para que todos funcionassem sozinhos Mas eu gosto de analisá-los e aceitá-los individualmente, um de cada vez. É uma boa maneira de aprender. Uma coisa. Se você ver amarelo aqui, significa que você deve esperar. Mas, até agora, vi inúmeros casos em que o terminal simplesmente parou. E, você sabe, nós apenas esperamos. Nada está realmente acontecendo. Ok, o modelo está funcionando, mas não há nada acontecendo no terminal. Não está instalando coisas, não está movendo coisas. Está preso. Então, nesses casos em que estou preso, o que eu gosto de fazer é digitar uma única letra no terminal e pressionar Enter. Normalmente, eu uso Z. Agora, isso obviamente não é um comando correto, mas parece acordar o modelo Se você verificar agora a cor, é verde, o que significa que está pronto, e agora pode continuar. Portanto, isso sem parar o modelo e reiniciá-lo. Para ser honesto, não tenho ideia se essa é uma abordagem válida. Tentei ver se consigo evitar isso, se consigo impedir que o terminal congele, mas não consegui encontrar nada. Então, o que eu fiz foi inventar algo sozinho, digitar qualquer letra e pressionar Enter. Mas aqui é onde você tem que ter cuidado. Na verdade, você precisa pressionar Enter no terminal. O modelo escreveu o comando, mas está esperando que pressionemos Enter. Isso não é muito óbvio , pois outras vezes não precisamos fazer nada. Então, isso é algo que você precisa estar ciente. Se nada estiver acontecendo, mas o modelo ainda estiver em execução, ele pode estar esperando por você. Ok, então verifique o terminal e veja se há alguma instrução ou se você deve pressionar Enter. Agora, depois de um tempo, a mesma coisa acontece novamente. Está preso. Então eu saio com meu Ziki, digito, Enter e, sem mais nem menos, o modelo continua Voltando a isso, eu gosto bastante desse modelo porque é bastante independente. Um prompt pode fornecer dezenas de ações consecutivas. Ele sabe o que eu quero. Ele tem o PRD, então ele apenas executa as coisas passo a passo Mas, curiosamente, depois de 20 etapas, você precisa dizer para continuar. Seria ruim para os negócios se um único crédito resultasse em um site completo, certo? Então, ao clicar em Continuar, você usará outro crédito. Agora, para ser honesto, não devemos nos atolar no uso do crédito. Realmente não importa. Basta usá-los. Não aja como se fossem preciosos. Eles foram feitos para serem usados. Agora, a única vez que fiquei realmente chateada foi com um modelo aberto de IA que estava constantemente dizendo que faria coisas, mas depois não funcionou. Ou continuou me dizendo para fazer isso sozinho, mesmo sendo mais do que capaz de fazer isso sozinho. Então, isso é algo em você sente que escaneou, sabe? Mas esse modelo, basta ver quantas etapas esse modelo percorreu sem parar. Imagine se mudássemos para uma em que precisássemos segurar sua mão a cada passo do caminho, digamos, continuar após cada etapa, isso seria desagradável. Mas sim, aqui está um problema. Eu elogiei esse modelo, você sabe, mas agora ele está instalando o Super Base, eu acho E isso é estranho porque eu não mandei ele fazer isso. E aqui está outra parada automática. Então, depois de cerca de 20 etapas, você terá que clicar em Continuar sozinho. Eu também vou aceitar todas as mudanças até agora. Isso é o que eu recomendo que você faça também . Agora, o problema é o seguinte. Decidi esperar pela pausa natural e depois perguntar sobre o Superbse, que não está nos requisitos Agora, eu poderia parar com isso agora, mas há uma chance de que isso produza mais bugs, mais problemas. E acho que fiz a coisa certa porque o modelo parece realmente ter muito mais trabalho a fazer. É uma linha de pensamento, e pará-la para remover a superbase pode, na verdade, interferir nela. Obviamente, mesmo que você reinicie o computador ou qualquer outra coisa, você tem seu histórico de conversas e qualquer modelo pode revisar toda a base de código e continuar funcionando. Mas achei que é ideal. Você o deixou terminar sua linha de pensamento. Parece que tem cerca de 15 outras etapas, então vou deixar isso para lá. Ok, agora aqui está a parte interessante. Na verdade, fiz um projeto maior para um dentista e usei o mesmo modelo e o mesmo programa Wser. Acho que usei um nome semelhante para a pasta Agora, o windsurf tem essa capacidade de criar memórias. Então, depois de funcionar por um tempo e atingir certos resultados, ele criará uma memória Isso ajuda a consumir menos recursos. Então pense assim. Digamos que ele só consegue se lembrar de 100 mensagens em nossa conversa, certo? Esse é apenas um exemplo para que você possa entender como funciona. Então, à medida que você adiciona mais cinco mensagens, as cinco primeiras, as cinco iniciais, se perdem. É como uma névoa de guerra se você gosta de jogos de estratégia. Mas e se essas cinco mensagens iniciais contiverem algo importante? Bem, é aí que a memória entra em jogo. Você armazena essas informações-chave separadamente, independente dessas 100 mensagens, e isso torna tudo mais inteligente De certa forma, é como se você dissesse ao seu médico que você é realmente alérgico a mariscos, Agora, o médico pode esquecer outras coisas que você está dizendo, mas quando o médico verificar suas anotações, ele verá que você é alérgico e agirá de acordo. Agora, é claro, essa é uma explicação simplificada demais, mas espero que faça sentido É isso que as memórias fazem. Eles ajudam o windsurf a lembrar informações importantes. Agora, aqui, quando eu uso o SupaBse, tive muitos problemas com Não estava funcionando bem. A modelo me viu lutando com isso. Continuou tentando fazer com que funcionasse e não estava indo bem. A Super Base não estava funcionando bem. E depois de tentar por um tempo, ficou na memória. E agora essa memória entrou em ação. Na verdade, é super empolgante e fascinante, embora não seja ideal para o nosso projeto. Vamos fazer uma pausa e depois vou continuar em um momento 20. Como lidar com insetos: Bem-vindo de volta. Os insetos são inevitáveis. Você pode dizer que, se inteligência artificial vai escrever isso, 100%, ela vai fazer isso corretamente, certo? Mas esse não é o caso. Não neste estado atual. Os bugs são inevitáveis, mas a boa notícia é que eles são bastante fáceis de corrigir. Então, voltando ao projeto, nosso modelo fez um trabalho muito bom. Ele criou o site inteiro com poucos bailes de formatura. Portanto, sem gastar muito dinheiro, você pode dizer que está pronto quando tem uma visão geral do que ele conseguiu fazer. Agora, alguns modelos não oferecem essa visão, mas este sim. Você também pode ver esses dois botões importantes, abrir a visualização ou abrir em um navegador externo. Agora, eu gosto de usar um navegador externo porque é assim que a maioria das pessoas vai ver o site. Então, eu prefiro aquela aparência limpa sem distrações. Ok, isso é um erro, mas vamos corrigi-lo em um segundo. Então, de volta a Windsor por enquanto. Agora, na visão geral, você pode ver que o modelo nos diz as próximas etapas dois e três estão corretas. Github e versel. Está bem? Em seguida, teste o formulário para que ele funcione corretamente. Legal. Mas o passo número um não faz nenhum sentido. Superbse não deveria estar aqui, mesmo que você não seja técnico Você pode ver claramente que isso é um problema porque não foi mencionado em nenhum lugar. Mas digamos que você não tenha ideia, certo? Da mesma forma que você não sabe sobre react next JS, tailwind, qualquer outra coisa Se o modelo os escolher, talvez ele saiba melhor, certo? Bem, o problema é o seguinte. Fale com ele como você falaria com um desenvolvedor. Basta perguntar exatamente isso. Por que você usou o Super Base? Para o formulário, eu disse, devemos usar reenviar E então veja o que diz, certo? A propósito, foi assim que eu aprendi. Eu perguntei sobre react, next JS, VT, tailwind, todas essas coisas Eu perguntei ao modelo sobre isso. Por que você o usou? E o modelo disse: É uma ótima escolha. É a melhor prática, e assim por diante. Tem muitas vantagens. Ok, então a modelo pode dizer: Ei, eu tomei a decisão certa. Eu fiz a escolha certa se isso faz sentido, certo? Bem, aqui, na verdade, é muito engraçado. Diz que estou absolutamente certo. E peço desculpas pela confusão. Ele implementou o Super Base por causa de suas memórias. E aqui está a coisa. Ele vai corrigir o código sozinho. Observe que nem mesmo está pedindo que o validemos. Ele sabe o que fez de errado. Ele sabe o que tem que fazer, e simplesmente faz. E agora muitos e muitos arquivos estão sendo editados. Agora, tenho certeza de que você não terá esse tipo de problema, mas eu realmente queria te mostrar esse caso. Eu queria te mostrar que alguns problemas são totalmente inesperados. Mas, sim. Ok, vamos continuar. Avance rápido e pronto. Então, substituiu muitas coisas. Ele atualizou a documentação, muitas coisas. Agora eu vou aceitar, é claro, mas é o seguinte. Aposto que o erro no meu navegador ainda está lá. Então, vamos dar uma olhada. A propósito, sempre atualize Mas, sim, ainda está aqui. Então, aqui está o que você precisa fazer. Então selecione todo esse texto e simplesmente cole no windsurf Com ou sem contexto, realmente não faz muita diferença nesse caso Agora, o problema é o seguinte. Imediatamente, o modelo entende o problema e começa a resolvê-lo. Enquanto isso, vamos falar sobre reenviar. Agora, para resumir, precisamos conectar nosso projeto para reenviar É como conectá-lo. Agora, para que isso aconteça para conectá-lo, precisamos da chave. Portanto, nosso site usará essa chave para obter acesso e reenviar Isso significa que ele poderá falar para reenviar e isso permitirá que os e-mails sejam enviados e Agora, para obter a chave recente, é tão fácil quanto clicar em um botão. Como eu disse antes, normalmente, você só consegue vê-lo uma vez. Se você perder, você vai ter que fazer outro. Agora, não se preocupe. Não tem custo, mas não é uma boa ideia voltar para reenviar e encontrar 15 chaves, e você não sabe qual é qual, certo? Qual é para esse projeto específico. Ok, agora, outra coisa, vou desfocar minhas chaves porque é semelhante ao número do meu cartão de crédito Sim, uma vez que você o tenha, você tem que adicioná-lo aqui e você tem um projeto. Na verdade, você pode pedir ao Winserf que o adicione para você, ou você mesmo pode encontrar esse arquivo e colá-lo Normalmente, todas as informações confidenciais são armazenadas em um arquivo chamado dot ENV É aqui que vou colar minha chave. Agora, há dois outros campos aqui. Eles são específicos para reenvio. Do e-mail está nosso site. Você pode ver que, na verdade o modelo criou um e-mail falso para ele, mas obviamente isso não é real. Não vai funcionar. E o e-mail é onde o formulário vai enviar a mensagem, basicamente o dentista, a recepcionista, Então, neste segundo, vou colocar meu endereço de e-mail para que possamos testá-lo. E no primeiro, teremos que usar um endereço especial chamado delivery at resend dot V. Quando você decidir usar Super Base, Firebase, Recent ou qualquer outra coisa, você mesmo terá que aprender um pouco sobre essa plataforma Ok, vamos voltar ao nosso site. Então, agora está ao vivo. Mas é isso que queremos? Vamos dar uma olhada em um segundo. Vamos fazer uma pausa rápida. Y y 21. Faça o formulário funcionar corretamente: Bem vindo de volta. Nosso site parece bom à primeira vista, certo? Então, o que vemos aqui é profissional, bastante limpo, muito adequado para o dentista. Há alguns problemas com o texto. Isso é um pouco leve demais e você não consegue lê-lo. E as fotos parecem não carregar corretamente. O site está em inglês, mas os preços e nomes estão no meu idioma local. Acho que fez isso porque viu o endereço do gabinete. Uma mudança de negócios, algo a ser corrigido , mas interessante mesmo assim A barra adesiva na parte inferior é legal. O mapa funciona bem. Então, no geral, isso me deixa feliz. Esse é um ótimo começo. Agora, a primeira coisa que quero fazer é garantir que as imagens sejam carregadas e garantir que o formulário esteja funcionando corretamente. Então, vamos digitar isso. Agora, aqui está o acordo. Você pode fornecer uma lista de alterações em um único prompt. Você pode até escrever dez, 20 coisas que você quer mudar, e há uma boa chance de que ele as execute corretamente, cada uma delas, certo? Mas se você quiser estar seguro, siga passo a passo, pouco a pouco. Normalmente, o modelo se concentra um pouco melhor e você obtém resultados mais previsíveis Ok, meu aviso está pronto. Vamos ver o que acontece. , certifique-se de acompanhar propósito, certifique-se de acompanhar sua segunda visualização. OK. A propósito, uma coisa é que você pode ter visto algo que pode falar com um microfone e, em seguida, o windsurf entende Assim, você pode falar diretamente com a IA. Mas, na verdade, eu não recomendo. Para a codificação do Vibe, é uma boa ideia escrever suas ideias, revisá-las, fazer alterações, adicionar mais detalhes, recortar coisas e enviar sua solicitação Falar pode ser ótimo para os outros casos, mas eu não gosto de usá-lo para codificar o Vibe Ok, agora para as fotos, acho que isso vai corrigi-las bem rápido. Mas depois de um tempo, acho que teremos o mesmo problema de enforcamento. Sim, aqui está. O terminal parou. Podemos ver que ele copiou todos os arquivos. Ok, tudo bem. Então, o que estamos esperando? Então, novamente, digite qualquer letra Z ou qualquer outra coisa, pressione Enter. E agora, sim, está de volta aos trilhos. Parece que isso foi um pouco mais complicado do que eu pensava. Há muitos arquivos que precisam ser ajustados. Mas sim, no geral, nós realmente não nos importamos muito, certo? Não é nem meia hora e já temos algo super sólido. Então, vamos continuar. Vamos avançar rapidamente. Então o modelo está pronto, certo? Isso fez muitas mudanças. Ele adicionou minha chave para reenviar e assim por diante. Eu desfoquei tudo. Mas, como está pronto, estou realmente tentado a voltar ao meu navegador e atualizar minha página. Isso é instintivo, certo? Mas o problema é o seguinte: não vai funcionar. Esse é um ótimo momento de ensino. Se você não está prestando atenção, você pode discutir com Windserf Ei, não está funcionando. É uma página em branco. E aí? Mas o problema é o seguinte. Na verdade, ele reiniciou o servidor local e alterou um pouco o link É por isso que você deve usar o Open External Browser, caso isso aconteça. Ok, vamos testar rapidamente o formulário e ver se funciona. As imagens, tenho certeza que vão ficar bem, isso não deve ser um problema. Vou desfocar meus detalhes porque o navegador salvou meus detalhes reais. Ok, mas o problema é o seguinte. Na verdade, não está funcionando. Há um problema. Você pode ver isso no canto inferior esquerdo. Um problema. Então clique nele e veremos que há uma mensagem aqui. A mensagem não faz muito sentido, mas vamos copiar e colar no windsurf. E aqui está a coisa. Mesmo que a mensagem não seja tão útil, o modelo pode revisar todo o código. Ele pode revisar vários arquivos. E sim, é exatamente isso que está acontecendo aqui, passo a passo, verificando quaisquer possíveis problemas. E, na verdade, adoro essa abordagem. Eu acho que é fantástico. E sim, ele viu que há um problema, e é sobre o nome do domínio. Não foi verificado e o reenvio não permite isso, o que, novamente, é incrível porque essa é uma solução muito rápida Na parte central, você pode ver como a linha original com smile care.com, que não existe, é destacada em vermelho Isso significa que ele será removido. A próxima é com esse endereço de e-mail de embarque em resend dot DV Ótimo material. Só para ficar claro, eu não prestei atenção e deixei aquele nome de domínio que não existe, smileca.com Esse é um domínio falso que não existe, que o modelo criou sozinho. Obviamente, o reenvio não permitirá isso porque não foi verificado É um domínio falso, certo? Mas tivemos a sorte porque o Winserf substituiu o domínio falso pelo correto pelo da documentação pelo oficial É por isso que não estava funcionando por causa desse endereço falso, smilecare.com Para ser honesto, foi aqui que eu cometi um pequeno erro. Eu estava discutindo com Winserf que ainda não está funcionando, mas aqui está Eu tenho muitos endereços de e-mail. Esqueci qual deles usei para esta conta de reenvio. Portanto, para fins de teste, você pode enviar e-mails para o seu próprio endereço que usou para se inscrever. Agora, como me confundi, tentei mais algumas vezes e recebi o mesmo erro. No final, fiz essa alteração. Para enviar um e-mail, no segundo campo, eu configurei o e-mail correto. Eu usei o que usei quando me inscrevi para reenviar. Então esse era o problema. Então esse é um dos perigos de que eu estava falando. Você erra. Depende totalmente de você. O problema é seu, mas você continua falando com Winserf. Você continua falando com a modelo, certo? E o modelo não tem ideia. Ele está tentando revisar o código, está tentando ver possíveis correções, soluções alternativas, está tentando várias coisas Mas, obviamente, vai falhar. Não vai dar certo. Está do seu lado. O problema é seu. Agora, a boa notícia é que você pode ver a mensagem aqui mesmo no terminal. Ei, você só pode enviar e-mails de teste para esse endereço, e ele realmente informa o endereço de e-mail. Portanto, desde que você mantenha mente aberta e não deixe a frustração tomar conta, você deve ficar bem. Eu estava bem tranquilo. Eu estava olhando para o terminal do lado direito. Eu estava explorando possíveis soluções. Mas o fato é que, se você ficar chateado e começar a ver vermelho, pode ficar preso aqui por horas ou até dias. Mas fico feliz em dizer que você só cometerá esse erro uma vez. Agora você pode usar o reenvio para todos os seus projetos sem se preocupar E só para confirmar que está funcionando, abri meu e-mail pessoal e, sim, o e-mail chegou , você também pode reenviar e confirmar isso Então, por que fizemos tudo isso? Porque se fosse um cliente real, um dentista de verdade, é claro, ele preferiria receber todas as suas mensagens por e-mail, certo? Então, parabéns. O formulário está funcionando. O reenvio está funcionando. Lembre-se de adicionar a chave ao projeto e mantê-la privada. Use seu e-mail especial no primeiro campo. E para o segundo campo, use seu endereço de e-mail, aquele que você usou para se inscrever para reenviar Ok, ótimas coisas. Vamos continuar depois da pausa rápida. 22. Faça upload do seu site no GitHub: Bem vindo de volta. O site parece muito bom e está funcionando bem. Testamos o formulário e está tudo bem. Agora, poderíamos potencialmente melhorar o design, mas isso é bem simples Você volta ao windsurf e diz o que quer mudar, e pronto Agora vamos fazer isso no final. Mas, por enquanto, quero mostrar como podemos fazer isso ao vivo em apenas algumas etapas. Então, o primeiro é o GitHub. Lembre-se de que este site está funcionando, mas só está disponível em nosso computador local. Para publicá-lo, usaremos o Versll, mas uma etapa intermediária é Mais sobre isso em um segundo. Por enquanto, vamos dizer ao modelo que estamos prontos para seguir em frente. Eu vou dizer exatamente isso. Vamos passar para as próximas etapas. Por favor, faça o upload para o Github. Vou fazer uma pausa. Aqui, eu quero fazer o mínimo de trabalho possível, certo? Então, eu prefiro dizer ao modelo que use o Github MCP. Isso é menos trabalho em nossas mãos e menos problemas em potencial. Caso contrário, pode nos dizer que devemos ir até lá, fazer um novo projeto, fazer algumas configurações e outros enfeites Eu não quero fazer isso. OK. Em seguida, vou dizer ao modelo que vou usar o Versll para publicá-lo, ele possa me guiar caso eu fique preso Agora, compartilhar demais não é um problema. Não, longe disso. Quanto mais detalhes, melhor. Ok, e vamos às corridas. Ele examinará minha conta, minha conta do Github, verá o que está acontecendo e criará um novo projeto sozinho Isso é chamado de repositório. Esse é o termo correto repositório ou repositório. Ok, mas você pode se lembrar disso como um projeto. Projeto, repo é a mesma coisa. Agora, infelizmente, como sempre, o modelo fica preso. Mas vamos trazê-lo de volta com um comando aleatório na seção do terminal. Ok, assim mesmo com o BO Track. Então, aqui está o que está acontecendo. Estamos fazendo o upload de todos os nossos arquivos do nosso computador, do nosso computador local para a nuvem para o Github, basicamente clonando o projeto Agora, você pode não estar familiarizado com o Github. Eu também não sou. Eu não sou programador. Mas aqui está a coisa legal. Você não precisa saber nada sobre o Github. Você só vai usar o modelo no Winserf. Agora, caso esteja curioso, você pode acessar seus repositórios e procurar esse projeto, que deve ser o único no seu caso Na verdade, tenho muita coisa carregada porque uso bastante o Github Mas sim, depois de vê-lo, você pode ver todos os arquivos, além algumas instruções que o modelo escreveu para você com outras pessoas. Agora, isso é fantástico. Agora, por que o Github ajuda? Bem, é aqui que o GitHub se torna mais do que um simples intermediário 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 Então, passo a passo, o que é controle de versão? Digamos que seja a Virgin O. Com um formulário o mais simples possível. Nada tão sofisticado, certo? Agora, podemos criar um formulário muito mais avançado em que o visitante, eu não sei, ele pode escolher os serviços, ele pode escolher a hora e a data e assim por diante, certo? Algo um pouco mais avançado. E aqui está a coisa. Nós fazemos isso. Em seguida, o trazemos para o cliente. Você faz isso ao vivo. Mas depois de um tempo, você recebe aquele telefonema temido. Ei, Chris, você sabe o que? O novo formulário não está funcionando. Na verdade, estou tendo menos compromissos. As pessoas não o estão usando por nenhum motivo. Então, vamos voltar ao antigo porque as pessoas simplesmente não estão gostando dele Você pode perguntar: Está quebrado? Não está funcionando? Não, não, está tudo bem, mas as pessoas preferem o antigo. Você pode trazer de volta o antigo? Ah. Ok, isso seria doloroso. Você teria que voltar ao windsurf, tirar todo aquele código extra Isso pode produzir bugs. O formulário pode quebrar. O site inteiro pode falhar , mas isso na verdade não é um problema. É aqui que o controle de versão entra em ação. Com o GitHub, você simplesmente volta para a versão anterior ou para qualquer versão, para ser honesto, porque você pode ter várias. Você também pode ter versões separadas, com base em um esquema de cores, com base na funcionalidade e nos layouts Você pode fazer o que quiser. Seu nome. Então, o Github ajuda você a organizar tudo isso Você pode voltar para uma versão que foi ontem, uma semana antes, um mês antes, cinco anos atrás, é realmente muito fácil. E é exatamente assim. Agora, é incrivelmente simples? Não, mas não é difícil, porque é o seguinte. Você tem windsurf Você tem a IA do seu lado. Simplesmente diga a ele para fazer o que você quiser fazer. Volte para o vento vermelho, volte para a Virgem com o formulário de contato básico. Então é assim que funciona. Isso é controle de versão. O GitHub nos dá controle de versão. Agora, público ou privado. Ok, público significa que outras pessoas podem ver você no trabalho, podem ver este projeto. E isso é muito útil se você quiser conseguir um emprego ou se quiser colaborar com outras pessoas, talvez com uma equipe, algo assim, certo? Mas se você quiser vendê-lo, se quiser conseguir clientes por conta própria, se quiser ter uma agência ou algo assim, se quiser ser freelancer , provavelmente vai mantê-lo privado. Então, sim, essa é a escolha, pública ou privada. OK. Controle de versão, público ou privado. Isso é o GitHub. Ele tem muito mais recursos, mas, em resumo, esse é o problema. Mas agora, voltando à nossa história de IA, aqui está o segredo, aqui está a coisa mais importante GitHub é a ponte perfeita entre seu código local no windsurf e sua implantação on-line no Versll . Aqui está a situação. Plataformas como a Versll estão profundamente integradas ao Github. Então, quando seu site estiver pronto para ser lançado, Versll simplesmente olha para o Github e vê : Ah, ok, aqui estão todos os seus arquivos Aqui estão todas as suas configurações. Eu vejo as últimas mudanças. Deixe-me colocá-lo ao vivo. Isso significa que você não precisa fazer upload de nenhum arquivo. Você não precisa alterar nenhuma configuração. Você não precisa fazer nada. Você simplesmente conecta o Versll ao seu repositório Github e pronto A propósito, faremos isso em apenas alguns minutos. Vamos conectá-los. Mas, sim, é assim que seu site será lançado. Isso é poderoso porque mantém tudo automatizado e limpo. Se você fizer alterações em seu projeto posteriormente no windsurf em seu computador, basta pedir ao modelo que atualize o projeto Github E quando você faz isso, automaticamente, um sinal é enviado à Versll para atualizar a versão ao vivo do seu site Com esse código extra. É fantástico. Não há etapas extras. Você digita algo no windsurf e, no geral , em apenas alguns segundos, talvez alguns minutos, está ao vivo e você não precisa se preocupar com isso Está tudo conectado. Então, em termos simples, windsurf é onde você constrói o site Github é onde você o armazena na web e, em seguida, o Versll é onde você faz viver para que o mundo o veja Pense nisso como uma empresa de hospedagem. A propósito, você tem instruções passo a passo na cascata, para que você possa ler e ir devagar Ok, ótimo trabalho até agora. Estou muito feliz que você tenha chegado até aqui. Vamos fazer uma pausa rápida, e eu vou te ver em um segundo. Lembre-se de trabalhar junto em sua segunda visualização. 23. Publique seu site com o Vercel e corrija erros: Bem-vindo de volta. Vamos recapitular Por isso, criamos um site usando tecnologia moderna. Garantimos que funcionasse bem. Em seguida, o enviamos para o Github e agora estamos prontos para publicá-lo para que possamos compartilhá-lo com o mundo Agora, os desenvolvedores realmente não dizem publicar. Eles dizem implantar. Então, vamos implantar com Versll Já deve ter uma conta se você estiver acompanhando Agora, no Versll, você pode ser solicitado a conectar o Github, mas isso é muito fácil São apenas alguns cliques. Nada importante, nenhuma chave, nada disso. Contanto que você permaneça logado, você vale a pena. Ok, é aqui que o fundo começa. Queremos importar o projeto porque conectamos o Versll ao Github, vemos todos os nossos projetos. Esse é o meu nome aqui. Bem, o nome que eu coloquei no Github, então eu o reconheço. E mais do que isso, posso ver que há um novo projeto que acabei de enviar. Então, o que vou fazer é clicar em Importar. Aqui temos apenas algumas coisas para cuidar. Portanto, o Versll fornece um nome de projeto por si só, e está tudo bem Ele reconhece a estrutura. Próximo JS. Ok, coisas boas. Nós realmente não nos importamos. A única coisa que precisamos adicionar são essas variáveis de ambiente. E isso parece complicado, mas na verdade é o que o windsurf está nos dizendo para fazer Então, volte e você verá que precisa adicionar a chave da API e dois campos do e-mail e do e-mail. Então, na verdade, isso é bem simples. É uma questão de copiar e colar, e a IA diz exatamente o que você precisa colar Então, a primeira parte no campo esquerdo, o nome da coisa, e no lado direito, o valor, também conhecido como chave. Então, deixe-me fazer exatamente isso. Novamente, vou desfocar minha chave por motivos de segurança. Ah, certifique-se de usar os valores recomendados. Então, no campo do e-mail, é o endereço padrão. Entregue no resend dot Dev aqui, na verdade fiquei confuso com Windsurf e usei outro endereço, mas acho que também funciona OK. E nos dois e-mails, é o e-mail que você usa para se inscrever e reenviar E agora estamos prontos para a implantação. Use este botão grande para publicar nosso site. Mas o problema é o seguinte. Esteja ciente de que leva alguns minutos. Às vezes, dois, três, quatro, isso realmente depende. Agora, se você rolar para baixo, poderá realmente ver um cronômetro e o estado atual Se tivermos sorte, talvez recebamos uma mensagem de sucesso em cerca de 40 a talvez 50 segundos. Mas na maioria dos casos, para ser justo, vai falhar nos alimentos algumas vezes. Agora, vamos ver se temos sorte. Ok, não, na verdade falhou. Podemos ver que há alguns problemas com isso. Mas o problema é o seguinte. um ícone de cópia no canto superior direito, então vamos usá-lo. Curiosamente, posso ver que está relacionado aos depoimentos. Eu tive algo parecido no passado. Aqui estão as coisas engraçadas. Então, quando você adiciona depoimentos, normalmente adiciona uma citação para mostrar o que as pessoas estão dizendo sobre a empresa normalmente adiciona uma citação para mostrar o que as pessoas estão dizendo sobre a empresa, certo? Uma citação, certo? Bem, essas aspas, esse caractere, bem, se não estiver formatado corretamente, esses caracteres quebram o código Então, na verdade, é muito tolo, mas, sim, tive que usar de cinco a dez instruções apenas para revisar todo o projeto e limpá-lo Embora alguns desses modelos sejam incrivelmente inteligentes, às vezes eles cometem erros bobos Mas sim, voltando ao assunto. Aqui está o que está acontecendo. Então, o windsurf está verificando os arquivos e consertando quase tudo Depois que estiver satisfeito, ele será enviado para o Github, que significa que atualizará o GitHub com o código mais recente com todas as correções Obviamente, o terminal pode parar, mas digite qualquer coisa, pressione Enter e ele deverá continuar. Ok, pronto para ir. Mas sim, depois que o código for carregado do nosso computador para o Github , o Versll também receberá o novo código automaticamente Ok, o modelo diz que está pronto e diz que devemos tentar novamente no Versll Ok, vou clicar aqui no GoTo Project. Aqui, eu sei que é sua primeira vez, mas na verdade é bem simples. Se você notar essa parte, ela é amarela, o que significa que ela está tentando construir o projeto novamente. Portanto, é um processo ativo. Mas sim, depois de alguns segundos, ele falha novamente, então é vermelho. Novamente, isso é típico. Então, vamos clicar e ver o registro. Parece ser muito parecido. Sim, provavelmente é o mesmo problema, mas o problema é o seguinte. Não se preocupe em ler muito o registro. Basta copiar e colar de volta no Winserf e veremos o que é o quê. Não se apresse com isso. E agora, você deve estar acostumado com esse fluxo em que o Winserf está consertando coisas, o terminal fica preso, você o retoma e, em seguida, tudo é enviado de volta para Ok, agora, vamos voltar para Versll e aqui é onde você deve se concentrar Esta é minha conta, esse é o projeto atual, e essa é a implantação atual, que falhou. Então, voltamos ao projeto clicando aqui no nome do projeto. Lembre-se de pausar sempre que precisar na segunda vez que assistir ao vídeo OK. Agora, depois de clicar, você pode ver que a nova versão está tentando ser compilada. Como atualizamos o GitHub, Versel viu isso e o está publicando automaticamente Agora, é claro, você pode parar com isso, mas sim, isso geralmente é o que você quer fazer. Agora, vamos ver se temos sorte. Podemos esperar aqui ou clicar nele. Vamos ver o que está dentro. Então, o status aqui está em amarelo, então temos que esperar um pouco mais. Mas sim, depois de cerca de um minuto, ok, mais alguns problemas. Novamente, clássico. Agora, engraçado, é sobre a Super Base. Ok, achei que o tínhamos removido, mas parece que alguns arquivos ainda têm algo sobre ele. Agora, isso é um pouco frustrante, certo? A IA fez muitas coisas ruins em nosso projeto. Agora, do seu lado, tenho certeza de que você não terá esse problema específico. Talvez você tenha tido sorte e talvez tenha funcionado na primeira vez. Mas, por outro lado, acho que isso é útil. Você pode ver a depuração em ação. Agora, eu não queria remover esses problemas da gravação do curso porque acho essencial que você entenda que isso é normal. Isso está totalmente bem. É esperado. À medida que você se sentir mais confortável com esse fluxo, estará pronto para qualquer coisa. Mas você tem que estar relaxado. Você não precisa ficar nervoso. Você não precisa ver vermelho. Você não precisa ficar com raiva. Você não precisa se preocupar com os créditos e com a forma como está consumindo dinheiro. Isso não vai ajudar. Mas sim, avanço rápido e outra falha, mas não vou me desesperar Vou continuar trabalhando nisso e continuarei atualizando. Vou continuar consertando isso. Mesmo que esteja me custando alguns créditos e alguns minutos, estou bem com isso Tente trabalhar com um freelancer de uma parte diferente do mundo por, digamos, 50 dólares por hora e você verá rapidamente como isso é infinitamente melhor Não é incrível. Não é um passeio no parque, mas a alternativa é muito pior. Mas sim, depois de tanto trabalho, finalmente temos luz verde O site está pronto. É ao vivo. Agora você pode clicar nele aqui e vê-lo em ação. E aqui está em toda a sua glória. Agora você pode compartilhá-lo com seus amigos e familiares. Mas o problema é o seguinte. Antes de fazer qualquer coisa, vamos ver se o e-mail chega. Então Wserf sugeriu isso, lembre-se que usamos um e-mail diferente que não usamos Usamos a integração. Então, vamos dar uma olhada rápida e ver se isso funciona. E sim, vitória. O formulário ainda funciona. O site está ativo. O formulário funciona. Parabéns. Ok, vamos continuar depois da pausa rápida. 24. Publique o site em seu próprio nome de domínio: Bem vindo de volta. Conseguimos fazer o upload do nosso site para o GitHub e depois implantá-lo com Se você voltar para Versll, poderá ver um endereço temporário aqui Não é bonito de se ver, é claro, mas é ao vivo. Funciona. Você pode compartilhá-lo com as pessoas. Agora você pode parar, voltar ao Winserf e fazer algumas outras alterações para melhorar o site, adicionar mais páginas, mais recursos, melhorar o design, traduzi-lo para o seu próprio idioma, o que funciona, certo Mas caso você esteja curioso, quero mostrar como você pode mudar de um endereço temporário, um link feio para algo como cresbarn.com Então, seu próprio nome de domínio. Volte para Versll para seu projeto e você terá algo chamado domínio Clique nele. Isso é exatamente o que estamos procurando. Aqui, posso ver o que a Versll fez para mim sozinha. Agora, novamente, isso não é ruim, mas eu quero algo que seja meu. Então, vamos clicar em Por domínio. E depois de alguns segundos, você poderá pesquisar algo, seu próprio nome de domínio. Agora, os melhores, é claro, já estão escolhidos, mas você pode usar seu próprio nome. Então, vou escrever Chris Barn, mas sei que o.com já está em uso porque eu o comprei anteriormente Agora, o que eu adoro no Versll é que ele mostra muitas opções possíveis de from.ai para algo um pouco mais clássico como.net Esses são todos os que estão disponíveis, e você pode tomar uma decisão informada porque os preços são claros como o dia. Obviamente, Chris Barry and.ai 149 dólares é um pouco Então, eu vou escolher outra coisa. Vamos usar FYI, o que na verdade significa, para sua informação, FYI Isso não faz muito sentido, mas ei, são $6, seis dólares Então, vamos clicar nele e comprar. Como você pode ver, são seis dólares e alguns trocados. Ok, isso é por ano. Ok, coisas legais. Vou clicar aqui para comprá-lo e agora preciso confirmar clicando novamente. Ok, não se preocupe. Agora vou ter que adicionar meu cartão de crédito e minhas informações de cobrança Isso vai demorar um pouco. Mas sim, não se preocupe. É simples. Eu também tenho que verificar com meu banco, é claro, confirmar a transação, as obras. Nada muito importante. É como qualquer outra compra online. Agora, o problema é o seguinte. Na verdade, me deu essa mensagem, o que não é bom. Mas o problema é o seguinte. Eu vi que o dinheiro foi levado, mas sim, Versll me deu esse erro Agora, nesses casos, você tem que ficar calmo. Esses são negócios sérios e você não deve se preocupar. Então, vamos voltar aos domínios. Então sim, aqui está o meu. Chris Barron para sua informação. Tudo bem. Gostaria de lembrar que a Versll substitui sua empresa de hospedagem Portanto, não há necessidade de comprar um plano de hospedagem, um VPS, um servidor compartilhado ou qualquer outra coisa. Ok, agora vamos voltar ao assunto. Vamos voltar ao nosso projeto clicando aqui no canto superior esquerdo. Eu só tenho um projeto de dentista, então vamos clicar nele. Ok, estamos prontos para ir. Agora, vamos clicar em Domínios e estamos de volta onde começamos Mas desta vez, não compraremos um. Vamos adicionar um. Então clique aqui e escolha o que você acabou de comprar. Para mim, isso é Chris Barron FYI. Há uma configuração aqui que é recomendada. Deixe marcada. Ok, agora eu não vou entrar no que isso significa porque isso vai nos desviar. Deixe marcada. Ok, clique em Adicionar domínio e você terá que escolher a versão do projeto que deseja publicar. Obviamente, vamos simplificar a versão atual que está em produção. Fique seguro e agora temos algumas instruções para nós. Nada importante, mas teremos que fazer algo sozinhos. Até agora, tem sido fácil, mas agora cabe a nós adicionar esse registro de nome C. Novamente, você não precisa saber o que é isso. Deixe-me guiá-lo passo a passo. Então, o que você precisa fazer é anotar esses três bits, esses três itens. Você pode copiá-los em um bloco de notas ou qualquer outra coisa. Agora, a primeira linha já está definida, então não se preocupe com isso Só temos que fazer o segundo. Agora, caso você esteja curioso e queira verificar o status sem fazer nada, obviamente, não vai funcionar. Configuração inválida, é claro. Claramente, não está funcionando porque não o configuramos. Então, aqui está o que você precisa fazer. Volte para a página de domínios. Veja a navegação aqui. Você deve encontrá-lo sem muitos problemas. Em seguida, use os pontos no lado direito do seu nome de domínio. Aqui, queremos configurá-lo. Queremos configurá-lo. Role um pouco para baixo e, em DNS DNS, temos esses campos para fazer os quais podemos adicionar os detalhes anteriores Para ser honesto, Verl poderia ter feito isso sozinho, mas, ei, tudo bem Então, coloque WWW no primeiro campo. Em seguida, no menu suspenso, selecione o nome C. E, finalmente, para o valor, adicione esse texto, mas certifique-se de adicionar o ponto no final. O ponto realmente é necessário. Ok, não mude mais nada. Em vez disso, clique em adicionar e acredite ou não, é isso. Você receberá uma mensagem de sucesso no canto inferior direito e poderá ver que a entrada agora está salva. Agora, o problema é o seguinte. Você pode estar animado para visitar seu próprio nome de domínio, certo? Mas não está pronto. Está no forno. Isso demora um pouco. Normalmente, de 4 horas a 24 horas. Esse é o guia oficial. Portanto, não fique desapontado se não estiver funcionando imediatamente. Para mim, demorou cerca de dez a 15 minutos. Mas lembre-se, você tem que ser paciente. Não vá trocar coisas. Não reclame com Windsor por um navio que não está funcionando. se apresse com isso. Fique calmo. Mas sim, aqui está. Deixe-me avançar rapidamente. Chris Barron agora está ao vivo. O site parece bom. Somos dourados. Parabéns. Agora você tem seu próprio site do início ao fim sem saber programar. Ah, um. Você pode se refrescar como um louco, certo, nos primeiros segundos ou minutos. Demora alguns minutos para que o SSL seja instalado. Portanto, seu antivírus pode mostrar alguns avisos novamente no início, ou você pode ter um site quebrado se acertar constantemente um cinco ao atualizar Mas depois de alguns minutos ou talvez algumas horas, ele funcionará perfeitamente sem nenhum aviso ou qualquer outra coisa Isso é totalmente normal. Qualquer programador clássico ou qualquer empresa de hospedagem clássica funcionaria exatamente da mesma maneira Portanto, não há desvantagens. Ok, vamos parar um momento e comemorar 25. Como fazer alterações em nosso site ativo: Volte. Não importa se você comprou seu próprio nome de domínio ou se está usando o que a Versll criou para você, você ainda pode continuar melhorando o site Para mim, há uma área com texto em raios superleves que é difícil de ler, então eu tenho que corrigir isso. Então, deixe-me mostrar como é fácil quando tudo está configurado. Novamente, isso funcionará com um domínio personalizado ou básico fornecido pela Versll. Então, primeiro de tudo, vou fazer uma captura de tela do Firefox Você pode usar qualquer tipo de plug-in do navegador. Depende realmente de você. Sei que algumas pessoas usam Safari, Chrome, brave Edge e muito mais, então não vou entrar em plug-ins que fazem uma Basta fazer uma captura de tela e pronto. Em seguida, arraste-o para o windsurf neste campo. Vai ficar assim. Mas, para não ser desanimador, vamos fazer uma grande mudança, algo que será realmente dramático Então, vamos pedir ao modelo que mude o esquema de cores de azul para vermelho. Isso deve fazer uma grande diferença. Isso vai ser bastante óbvio. Ok, vamos apertar Enter e partimos para as corridas. Então, o modelo analisa todo o site e prepara tudo Na verdade, não é tão simples quanto eu pensei que seria. Portanto, o modelo está mudando alguns arquivos. Agora, para ser honesto, nós realmente nos importamos? Não, na verdade não. Ele está fazendo tudo sozinho com um único prompt. Porém, para ser justo, depois de um tempo, teremos que gastar outro crédito porque, nesse ritmo, ele vai realmente gastar muitos arquivos. E sim, aqui está. Como lembrete, após cerca de 20 etapas, Wind Surf pergunta se você deseja continuar Isso lhe custará outro crédito. E sim, vai continuar e, sim, está fazendo muita coisa. Mas, sim, espero que você consiga perceber como você poderia potencialmente quebrar seu site alterando tantos arquivos. Quando você está trabalhando com tantos arquivos e alterando coisas, isso pode ser um pouco perigoso. E aqui está a coisa. Em um determinado momento, o modelo leva algum tempo. Você pode ver isso aqui. Então, eu estava realmente preocupado que estivesse preso agora. Mas sim, anteriormente, o terminal era o problema, e nós apenas digitávamos qualquer letra, e estava tudo bem Mas, nesse caso, parece que o modelo está pensando por um tempo. Mas não, temos sorte, temos sorte. Está tudo bem. Acho que o arquivo era muito grande com alguma coisa, e é por isso que demorou algum tempo. Novamente, você precisa estar relaxado. Não fique nervoso com isso. Não fique nervoso Mais uma vez, estou sinceramente surpreso com quantidade de arquivos que ele está mudando para o código de cores simples Isso provavelmente está relacionado à estrutura de texto que usamos. É aqui que alguma experiência de codificação seria útil. É por isso que os desenvolvedores pagam seis dígitos por ano ou costumavam pagar, pelo menos. Eles sabem como otimizar as coisas. Eles podem construir coisas mais rapidamente com menos recursos. Mas, mais importante ainda, eles podem criar projetos fáceis de gerenciar. Então, eu tive projetos em que eu poderia editar um único código colorido em uma linha e todo o site seria atualizado. Aqui, parece que estamos lidando com mais de 15 arquivos, talvez até mais. Agora, novamente, nós realmente nos importamos? Isso nos afeta? Não, na verdade não. O cliente se importaria? Não, claro que não, na verdade não. São alguns minutos extras para nós. Talvez algumas instruções extras, mas não é um trabalho real, você sabe, não estamos realmente trabalhando Só estamos esperando. Ok, parece que temos que continuar mais uma vez. Mas acho que estamos bem perto do fim, eu acho. Sim, uma palavra rápida. E sim, vamos enviar tudo para o GitHub. Claro, ele faz isso automaticamente, então isso é muito legal. Esse é o poder de configurar as coisas corretamente. Não consigo enfatizar isso o suficiente. Tenho certeza de que você não estava muito empolgado em instalar todas essas ferramentas para configurar todos esses MCPs e tudo Mas, sim, está valendo a pena. E parece que está pronto. Você pode acessar o site e atualizar, mas obviamente a alteração não será instantânea porque está ativa em um servidor Está ao vivo na Internet. Então, vamos voltar para Versll e ver o status da fatura. Agora, em geral, depois de conseguir implantá-lo corretamente, há uma boa chance de que ele não falhe. É muito provável que ele sempre funcione , desde que você não faça grandes mudanças sérias. Agora, leva aproximadamente o mesmo tempo para construir de 30 a 50 segundos. Mas sim, no geral, acho que vai receber luz verde. E sim, aqui está. Vamos conferir o site. E sim, é vermelho. Para ser justo, não é só vermelho. São tons de vermelho. Então, eu pude ver por que demorou tanto tempo. Mas, sim, uma dica, algumas continuam sendo justas e fizemos uma mudança significativa nosso design. E está tudo ao vivo. Para ser justo, o ótimo texto parece que ainda está lá. Não sei por que o modelo se esqueceu disso. Mas sim, vamos fazer outra captura de tela. Mas desta vez, vou ser mais direto. Eu vou dizer o seguinte. Faça este texto 22, dois, e esse é um código de cores muito escuro que eu conheço de cor. Isso garante um resultado sólido. É claro. Mesmo que seja uma pequena mudança, o problema é o seguinte. Ainda temos que enviar para o Github. O Versil precisa fazer outra implantação. Então, idealmente, você faria muito mais alterações e depois enviaria para o GitHub. Mas sim, no momento, para fins de teste, tudo bem. Portanto, não se preocupe. No geral, estamos voando. Nós terminamos. O texto agora está cinza escuro. É fácil de ler e temos um site sólido do início ao fim. E, claro, você pode continuar a atualizá-lo dessa forma. Quando estiver satisfeito com isso, envie-o para o Github e pronto Você não precisa insistir cada mudança, a decisão é sua. Sim, vamos fazer uma pausa rápida. Parabéns novamente. Essa é uma vitória sólida. 26. Nadando em um oceano: 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 nenhum bilhete. Agora, no GitHub, no meu próprio GitHub, posso acessar 30, 40 projetos que eles fizeram, mas é o seguinte 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 27. E agora? : 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. 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.