Programação com IA no Vibe para iniciantes usando o Bolt. NOVO

1. Apresentação: todos bem-vindos. Meu nome é Greg Kang Bem-vindo à codificação de IA para iniciantes. Este curso é para qualquer pessoa que queira começar a programar, usando o poder da EI, usando sua criatividade Você não precisa de nenhum conhecimento de codificação. E, na verdade, sou um criador de conteúdo canadense há mais de dez anos. Tenho experiência em tecnologia, mas não sou programador. Mas um amigo me apresentou esse aplicativo. Comecei a brincar com isso. Comecei a criar aplicativos diferentes como este site aqui, que tem um bate-papo comunitário. Ele faz classificações, um diretório das melhores localizações da digionmad E neste curso, mostrarei passo a passo como começar nessa plataforma, criando seus próprios aplicativos, usando sua criatividade. É muito divertido, então vamos começar. 2. Definindo expectativas: Oi. Antes de começarmos o curso, eu só quero definir suas expectativas sobre como o curso é estruturado, o que você pode esperar aprender e obter do curso. Portanto, a codificação de IA é um campo muito novo. Na verdade, Bolt acabou de ser lançado em dezembro de 2024. Estamos em janeiro de 2025 agora. Portanto, você pode esperar muita experimentação para ver o que você pode obter do aplicativo, o que você pode criar E eu vou continuar nas aulas, você vai me ver criando uma variedade de aplicativos, e eu tenho uma lista aqui porque criei alguns aqui. Então, você verá sites diferentes que fazem classificações. Por exemplo, as pessoas mais ricas do mundo. Você também tem uma sobre como fazer classificações no Instagram e, ao criar esses aplicativos, vou mostrar como implementar recursos diferentes, como filtros, como adicionar fotos de perfil para apimentar seu aplicativo e torná-lo visualmente mais agradável Também tenho um jogo que vou mostrar como criar Pong, o verdadeiro jogo TD Pong usando codificação de IA Também vamos criar aplicativos funcionais como calculadoras de conversão de moeda Vamos usar APIs, interfaces de programação de aplicativos para adicionar potência ao nosso aplicativo Na verdade, vamos chamar diferentes APIs do Google. Eles chamarão uma API que nos permitirá realmente transcrever um arquivo de áudio e E as APIs são um recurso bastante poderoso do conjunto de habilidades de codificação de IA que realmente abrirá um novo mundo para Também demonstraremos como você pode usar o PayPal ou Stripe para implementar um paywall na frente do seu aplicativo, caso queira monetizá-lo Por fim, vou mostrar um exemplo realmente avançado, um chatbot LLM com várias IA que usa diferentes bots de bate-papo de IA da Open AI e do Google, e também vou usar uma API para Então, procure essa lição, e também temos uma divertida, um aplicativo básico de compartilhamento de caronas, que não fornecerá o aplicativo completo, mas dará uma ideia do que é possível Então, ao criar esses aplicativos, você chegará a um ponto em que cria algo, implementa e obtém esse URL que não será fácil de usar. Então, eu vou te dar algumas ideias sobre como você pode mudar isso. Acho que a maneira mais fácil é comprar um site de domínio da Netafe, que é o provedor incorporado De parafusos. Mas você também pode simplesmente alterar o nome da configuração do site para que seja mais fácil de usar, por exemplo, pong dotnetlofy.com E você também usa o encaminhamento de URL. Então, vou mostrar alguns exemplos de como fazer isso. Ao mesmo tempo, o aplicativo em si está evoluindo a cada semana. Por exemplo, eles introduzem banco de dados Super Base integrado ao bolt. Você o verá no canto superior direito, e isso permite criar um banco de dados, que criará usuários para você. Também vou apresentar outra plataforma chamada lovable, que facilita um pouco a conexão com o banco de dados e a adição de autenticação do Google Na minha opinião, também facilita integração das APIs de pagamento do Stripe É por isso que vou apresentar a você o adorável dot Dev no final do curso Então você tem uma ideia de outras alternativas apenas para o BlaneU. Bol ensinou a Nu não o único aplicativo do jogo, nem o único programador de IA do jogo Mas este curso foi realmente projetado para iniciantes. Porque eu não sou programador e quero te mostrar as possibilidades do que é possível se você não for um programador Mas se você é programador, então, você sabe, espere que exista Será um curso bastante amigável para iniciantes Não vamos nos aprofundar. Não vamos entrar nos repositórios do GitHub, esse tipo de Não vamos transferir nossos projetos para um programa como o cursor ou o GitHub e entrar no código Então, não é disso que trata este curso, e é por isso que o título é codificação de IA para iniciantes Então, com isso resolvido, vamos começar o curso. 3. Inscreva-se: Então, estamos analisando os parafusos agora, e vou dar um passo atrás e mostrar como você pode começar Então, primeiro, você quer ir para o parafuso RL dot Nu. Isso é Bolt dot nu. E o que você precisa fazer é se inscrever em uma conta. Agora, depois de criar a conta, você poderá fazer login no painel e criar alguns aplicativos gratuitamente e ter uma ideia do que esse aplicativo pode fazer. Agora, depois de um tempo, ele dirá que você precisará de alguns créditos para se inscrever, e é aí que eu recomendo que você se inscreva em e é aí que eu recomendo que você se inscreva um plano pessoal. Então, eu vou te mostrar o plano que eu tenho. Então, eu me inscrevi no plano P, que custa $20, e isso dá a você 10 milhões de tokens, e isso é válido por um mês E ainda tenho 8,2 milhões de tokens, e vou dar uma ideia da quantidade de aplicativos que criei Assim, você pode acessar seus bate-papos ao lado aqui. Então você pode ver que eu criei um aplicativo de pontuação de golfe, painel de moedas, painel de investimento, aplicativo de pontuação de golfe, classificação de campos de golfe, Bitcoin, painel de blockchain Então, eu criei bastante com os tokens que tenho. Portanto, esse ícone no canto inferior esquerdo permitirá que você acesse o menu. E o menu é onde você pode acessar seus bate-papos, as configurações. A Central de Ajuda. E você pode realmente ver seus tokens lá. Então, eu usei quase 1,8 milhão. Você pode comprar mais fichas. E em assinatura, minha assinatura, você pode ver qual plano de assinatura você tem. Se você quiser acessar seu bate-papo e iniciar um novo prompt, você sempre tem isso e, a partir desse menu aqui, você sempre pode iniciar um novo bate-papo. Tudo bem, com isso, vamos começar a partir daqui e criar nosso primeiro aplicativo 4. Como economizar tempo e tokens: Tudo bem. Quero fazer uma atualização sobre parafusos para economizar tokens e algum tempo Há uma nova configuração se você acessar as configurações no canto inferior esquerdo e, se acessar as visualizações de recursos, há um recurso chamado DIFS que você pode ativar E o que isso fará é que, em vez de reescrever o arquivo inteiro, ele se concentrará apenas nas novas alterações, economizando tempo e dinheiro. Então, originalmente, quando eu olhei para isso, não muito tempo atrás, na semana passada, era uma fase experimental, mas agora esse rótulo desapareceu. Então, eu diria que é seguro tentar. Eu o experimentei por uma semana e parece que o processo é um pouco mais rápido. Então, novamente, está em configurações, visualizações de recursos e recursos chamados DIFs Vou te poupar dinheiro e tempo. 5. Dicas de engenharia de improviso de IA: Quando se trata de IA generativa, esteja você gerando imagens, vídeos ou códigos, acho que o segredo é, na verdade, a entrada, a engenharia rápida Portanto, as instruções que você fornece determinarão o que você obterá desses modelos de IA Eu testei geradores de imagens como o Adobe Firefly, difusão, Microsoft Bangs copilot, ChaGBT Existem tantos sistemas de IA diferentes agora. Mas, na verdade, a habilidade comum exigida em todas as plataformas é a engenharia rápida. Então, quais são algumas dicas aqui? Portanto, ao gerar vídeos no Opening Eye Sa ou no gerador de imagens Adobe Fireflies, eles fornecem algumas imagens de referência para mostrar o que o modelo pode fazer Também dê alguns exemplos de diferentes estilos de imagens e vídeos. Então você pode usá-los como pontos de referência. Você pode clicar na imagem que você gosta. Você pode obter o aviso que eles usam para criar essa imagem, o estilo e, em seguida, personalizá-lo de acordo com sua preferência Outra habilidade fundamental, seja a geração de imagens ou mesmo a geração de código, é o que eu chamo de iteração, reiteração Então, é basicamente uma palavra chique para fazer isso de novo. Então, depois de receber o primeiro prompt de referência, você o personalizará. Digamos que você receba uma solicitação para uma imagem hiperrealista de Vancouver no cenário montanhoso Assim, você gerará sua primeira imagem e provavelmente perceberá que não é bem o que você deseja. Então, você deve reiterar a alteração do tom da cor, tornar o céu mais claro, mais quente e Você também pode fazer variações. Portanto, algumas plataformas como o Adobe Firefly permitem que você escolha entre quatro versões diferentes da imagem E, a partir daí, você pode continuar iterando e iterando. Então é isso que eu quero dizer com iteração. E, claro, às vezes você pode salvar seu progresso. Você pode preferi-lo para poder relembrar seu estilo de criação mais tarde Então, tive uma experiência recente com codificação com IA, e é uma coisa muito parecida Você pode começar com uma solicitação semelhante reiterar e criar algo incrível E se você quiser criar se quiser criar outro aplicativo, você pode usar o mesmo estilo. Por exemplo, criei um painel de criptomoedas que era personalizável, tinha menus suspensos e alertas por e-mail Bem, eu poderia usar esses mesmos recursos para outro tipo de painel personalizável Digamos que para resultados esportivos. Assim, você pode pegar o mesmo design e inspiração e trazê-los para um aplicativo diferente ou para uma imagem de IA diferente. Então, sim, como eu chamaria isso? Vou chamar isso apenas de marcar, marcar seu trabalho como favorito para o futuro Quanto mais específico você for em suas solicitações, mais detalhada será sua saída Portanto, a engenharia rápida é essencial, e acho que algumas habilidades para se tornar bom nisso. É só uma prática. E então, se você receber essas imagens de referência, veja as instruções e aprenderá fazendo mais Mas, definitivamente, posso ver mais cursos treinando pessoas em engenharia rápida com a popularidade de todos esses modelos de IA. Mais uma coisa que eu gostaria de compartilhar com vocês é o recurso aprimorado de prompt. Alguns aplicativos, como o Bol, pensaram no New. Acho que existem outros como o WIX. Eles permitem que você crie seu prompt primeiro, e você pode ver um ícone mágico ou de IA que detalhará seu prompt inicial Então veja isso em ação aqui. Acabei de receber uma solicitação de duas frases para criar um painel do Instagram. Quando clico no prompt aprimorado, você pode ver que ele está elaborando, mesmo fazendo uma suposição fundamentada sobre exatamente o que eu quero, e você resolve o Bild para editá-lo e depois o coloca em seu Muito poderoso. Divirta-se com isso e boa sorte. 6. Criando nosso primeiro ranking de aplicativos no Instagram: Pessoal, aqui é o Greg. Vamos criar nosso primeiro aplicativo hoje usando o Boldoc New Assim, você receberá várias solicitações gratuitas sobre o plano de pagamento, mas pense um pouco antes de prosseguir e pressione Enter pois as primeiras são as mais importantes E sim, você pode começar com uma primeira solicitação e, em seguida, ver aqui, eu tenho uma ideia para criar um painel de classificação dos principais influenciadores do Instagram com uma escolha de perfil e número de Agora, depois de inserir sua solicitação, você tem esse ícone, que é uma solicitação aprimorada. E se você clicar nele, a IA ajudará a aprimorar sua solicitação com requisitos muito mais específicos. Então, eu vou apenas ler aqui. Crie um painel visualmente atraente exibindo as 20 principais influências do Iscram em todo o mundo, classificadas por contagem de seguidores, incluindo os seguintes elementos para cada influenciador, as 20 principais influências do Iscram em todo o mundo, classificadas por contagem de seguidores, incluindo os seguintes elementos para cada influenciador, escolha de perfil e alta resolução. Use o nome com status de selo verificado, se aplicável, nome de exibição completo, número total seguidores e país de origem Isso parece ótimo. Então, vamos clicar em Go. Ele está bem. Assim, podemos ver o código sendo gerado no lado direito. Agora, não se preocupe se você não sabe o que isso significa. Tudo bem porque você só precisa seguir no lado esquerdo. Vou te dar uma ideia do que está fazendo. Você está aguardando sua primeira prévia ou seu primeiro rascunho e, em seguida, pode revisar ou iterar assim que tiver sua primeira prévia ou Ok, então você pode ver o meu aqui. E está me mostrando dois nomes aqui. Ok, e então está mostrando um problema à esquerda, o que é normal. É normal. Então, vamos clicar em Tentativa de Correção para começar, e então eu poderia pedir que incluísse mais perfis. Eu só vou sair do caminho até aqui. Tudo bem. E é normal ter esses problemas em potencial. Corrija o perfil, escolha imagens e mostre pelo menos o perfil superior. Tudo bem. Então, ele vai reiterar. E você pode ver no lado direito que está escolhendo Selena Gomez para o número três, Kylie Jenner para o número quatro, a pedra para o número cinco que está escolhendo Selena Gomez para o número três, Kylie Jenner para o número quatro, a pedra para o número cinco. Então, ele está pegando os dados do código. Agora, no que diz respeito à sintaxe, quero dizer, eu realmente não entendo isso e todo esse código aqui Mas, como eu disse, você realmente não precisa. Está apenas correndo e fazendo seu trabalho. Seu principal objetivo é fazer com que ele use essa tecnologia para conseguir o que deseja. Tudo bem, ótimo. Então, os melhores influenciadores do Instagram Christiana Ronaldo, Lionel Messi, Selena E sim, embora essas escolhas de perfil não sejam, elas definitivamente não estão corretas Está mostrando os dados corretos e mostrando outras informações, como crescimento, número de seguidores, então essa é uma boa segunda versão. Agora, se você cometer um erro na segunda ou terceira solicitação, poderá voltar aqui. Então, eu vou te mostrar onde. Eles continuam mudando as coisas porque estão fazendo atualizações nesse aplicativo. Mas você pode ver aqui, na parte inferior do seu último prompt, há um botão Desfazer aqui Assim, você pode clicar em Desfazer se alguma coisa quebrar. Então, vou adicionar mais recursos aqui. Vou adicionar um filtro. E peça que ela corrija a escolha do perfil e adicione um filtro. Assim, você pode ver o processo de criação de um aplicativo. Você cria seu primeiro prompt, aprimora e, em seguida, cria sua primeira versão, uma olhada no que o bolt cria para você e, em seguida, pode revisá-lo e desfazer E é uma jornada, certo? É um processo. A qualidade do seu aplicativo ou da sua saída depende da sua entrada. Ok, então está adicionando um vacilo. Agradável. Por isso, continuamos tendo problemas com as escolhas. Pode ser apenas uma questão de direitos autorais. Mas tudo bem, acertei na Nike. Pelo menos temos os dados aqui e temos diferentes categorias de filtro. Eu posso ver que eles estão trabalhando. Vamos clicar em Música, Beyonce, Ariana Grande, Justin Bieber, Então, esse será um bom rascunho, certo? Então, digamos que estamos prontos para implantar isso para compartilhá-lo. E mais tarde, mostrarei como podemos criar URLs diferentes para nosso aplicativo Um recurso mais avançado é a capacidade de baixá-lo e abrir divisões de estoque ou conectá-lo a um banco de dados Isso é mais avançado. Neste momento, vou clicar em Implantar. E ele criará um URL com o Net LIFE, que é outra plataforma, e você obterá esse URL para que possa ver aqui quando eu clicar nele, ele abrirá o aplicativo e você poderá compartilhá-lo com seus amigos. Isso está ao vivo na Internet. Então aí está. Então, vá em frente e crie seu primeiro aplicativo e pense na sua ideia. Coloque sua ideia na primeira solicitação. Talvez você queira aprimorá-lo usando a IA e , em seguida, analisar o primeiro rascunho e depois reiterar e depois implantar Boa sorte 7. Construindo nosso segundo aplicativo — pessoas mais ricas: Ok, aqui está a inscrição para indivíduos mais ricos do mundo inscrição para indivíduos mais ricos Você pode ver algumas das pessoas mais ricas, qual a fonte de sua riqueza, qual país e empresa E você pode filtrar por país aqui. Tudo bem Então, aqui estava o aviso crie uma lista detalhada das dez pessoas mais ricas E eu provavelmente uso o prompt de IA aprimorado. Então criei isso. E então, no início, o aplicativo não estava funcionando. Então, basicamente, basta começar a consertar as coisas E então ele consertou isso. Pedi que adicionasse fotos de perfil além do nome em um filtro. Eu fiz isso. E então, sim, eu implantei o aplicativo. Então, eu só quero mostrar um exemplo de uma iteração. Digamos que eu já o lancei, mas quero aprimorar esse aplicativo. Então, acho que uma boa maneira de aprimorar isso é expandir a lista. Expanda a lista para incluir as 50 pessoas mais ricas Vamos ver o que diz o prompt aprimorado. Tudo bem, nome completo, patrimônio líquido do carro. Claro. Agora, ele solicitará idade, país de cidadania e um pouco mais de informações. Eu posso ver que está usando a linguagem Rat. Tudo bem Mas ainda assim, apenas dez. Mas eu começo aos poucos, incluo os 20 melhores. Acho que pedi muita informação. Então eu posso ver isso adicionando a lista aqui, três, quatro, cinco, seis. Então, está obtendo a imagem da Wikipedia. Ok, agora está adicionando mais pessoas, nove, dez, 11, 12. Ok, isso está parecendo bom. Número 16, Jensen Huang. Então, quando você observa o código por tempo suficiente, você meio que entende o que ele está realmente fazendo aqui. Então, vamos lá. Agora temos uma lista mais longa, de até 20 pessoas. E temos um filtro, patrimônio líquido mínimo, país. E agora eu posso realmente baixar isso e implantá-lo. Lá vamos nós. 8. Criando uma calculadora de múltiplas moedas: Ok, aqui está um aplicativo prático que permite converter uma moeda em outra. Por exemplo, vamos ver que $100 USD equivalem a 94 euros. Em seguida, você pode enviar o resultado por e-mail para si mesmo. E então você também pode ver seu histórico de conversões. E também há uma calculadora aqui se você quiser fazer alguns cálculos em tempo real. Lá vamos nós. Então, isso é inspirado em outro aplicativo chamado moeda X. Mas, sim, eu só quero te mostrar outro tipo de aplicativo para estimular suas ideias Então, vamos dar uma olhada nas instruções que eu uso para criar isso Então, originalmente, eu criei um aplicativo de calculadora de várias moedas Mas então eu uso os prompts de IA, conversor de várias moedas E então, se você clicar no prompt de IA no canto inferior esquerdo, ele aprimorará seu prompt basicamente para cobrir todos os cenários ou a maioria dos cenários. Então, eu não vou fazer isso porque eu já fiz. Mas sim, vamos mover esse prompt. Foi assim que eu comecei esse aplicativo, certo? E então foi em frente e fez seu trabalho. Então, criei um aplicativo conversor de moeda abrangente. E então, minha próxima solicitação foi adicionar uma função de calculadora que usaria a moeda selecionada no menu suspenso . Ela não correspondia exatamente a ela. O que eu queria fazer era poder usar uma calculadora em euros ou EUA. Mas então eu percebi que isso realmente não importa porque $1 é $1. Então eu deixei essa pra lá. E então eu coloquei, você pode adicionar uma calculadora embaixo porque ela não estava adicionando a Mas acabou colocando-o de lado, o que é bom. E então eu adicionei outro problema, adicionei uma função de e-mail e permiti que a calculadora calculasse em dólares, adicionei um título de cabeçalho, uma global chique de viagem E então eu implantei o aplicativo. Eu tenho meu link. Então, um toque final é que eu quero adicionar um link para o site. Então, se eu quiser vincular este título aqui, vincule o cabeçalho hqvoyage a E sim, acho que é basicamente isso. Adicione um indicador de voo abaixo. Agora não vamos fazer isso. Vamos ver um dos meus, vamos ver. Eu tento ser muito ambicioso, então tentei adicionar várias funções a um aplicativo, mesmo que não esteja relacionado Eu deveria me concentrar em uma função principal e mantê-la firme. Ok, então vamos clicar aqui. Isso abre o site? Sim. Incrível. Então, vamos lá. Foi assim que criei o aplicativo de calculadora de várias moedas 9. Criando um painel de criptomoedas usando APIs: Esse é um exemplo de como podemos usar uma API ou uma interface de programação de aplicativos para nos conectarmos a um banco de dados de dados para usar em seu aplicativo. Então, vou compartilhar minha solicitação aqui para que você possa ver o que eu fiz. Tudo bem. Então, inicialmente, eu apenas pedi um painel de criptomoedas. Eu usei o ícone de IA para aprimorá-lo. E inicialmente eu estava usando um site chamado coin Market Cap para obter sua API. Então, minha solicitação foi criar um painel de criptomoedas e, quando a IA o aprimorei, criei todos esses recursos diferentes, o que é incrível. E fui em frente e o criei, mas teve alguns problemas. E eu pensei que era por causa da API. Então, o que quero dizer com isso é que, se formos até a fonte real dos dados, então, capitalização de mercado da moeda. Na verdade, eles têm documentação para sua API. Acabei de me inscrever em uma conta gratuita de desenvolvedor, que dá acesso para obter uma chave de API, mas é muito limitada. Então, o que importa, eu tento pedir que ele use a chave de API. E eu basicamente pedi que ele dissesse use essa chave de API, mas teve problemas ao usá-la Então, o que ele fez foi usar outro site chamado Coin Gecko Eles têm uma chave de API gratuita e ela até a explicou aqui. Ele disse que não requer autenticação, oferece melhores limites de taxa para uso gratuito. E agora temos dados em tempo real do nosso painel de criptomoedas no canto superior direito. Então, na verdade, vou apenas verificar se esses dados são atuais acessando o aplicativo real. Então, se eu digitar Coin Gecko, posso ver que os preços são 100.000 O Arium está um pouco abaixo de 4.000. XRP 259. Sim, então esses dados são bastante atuais. Então esse é um painel básico, e eu gosto de personalizá-lo, certo? Portanto, adicione a capacidade de clicar em uma criptomoeda e exibir a variação percentual ao longo do tempo. Um show do maior ganhador. Vamos ver quantos estão aqui. Um, dois, três, seis, nove, dez. E uma explicação para o aumento. Tudo bem. Então, outro exemplo de como reiterar seu aplicativo. Na verdade, estou muito impressionado com o que é mostrado aqui. E você pode se inspirar no site original e ver que tipo de melhorias eu quero mostrar? Porque esse é um aplicativo muito bom do jeito que está. Tudo bem. Aqui vamos nós. Ok, então mostrando o maior ganhador, XRP e o motivo pelo qual ele E temos a capacidade de clicar em selecionar quando selecionamos uma criptomoeda, que está mostrando este painel abaixo. Está nos dando algumas informações mais detalhadas. Agora, o gráfico não está funcionando, mas está tudo bem. Tenho certeza de que podemos consertar isso. Portanto, essa é uma boa melhoria. Então, vou pedir que ele melhore os gráficos e, em seguida, uma opção para definir alertas por e-mail Tudo bem. Vamos voltar ao nosso prompt. Vamos voltar ao bate-papo. Ok, então aqui está nosso último aviso. Deixe-me mostrar um gráfico melhor, mostre os dados do gráfico na parte inferior. E um alerta de e-mail personalizável com base no aumento percentual ou no preço-alvo Oh, desculpe, estou bloqueando isso. Vamos adiar isso. Então, aqui está meu novo aviso. Mostre a data do gráfico na parte inferior e um alerta de e-mail personalizável na parte inferior Oh, agora está mostrando o gráfico. OK. Um ao longo do tempo, incluindo até um ano e todos os tempos. E um alerta de e-mail personalizável. Tudo bem, vamos ver o que podemos fazer com isso. E acho que se isso funcionar, seria uma boa chance de realmente implantá-la como uma versão de lançamento para compartilhar com o mundo e obter algum feedback. Portanto, os principais aprendizados da criação desse aplicativo são o uso de uma API para aprimorar a funcionalidade do seu aplicativo E começamos com um aviso muito básico: aprimore-o com IA. E então nós reiteramos. Então, vamos lá. Onde está a opção de enviar alertas por e-mail aqui para que possamos ver o Bitcoin em mais de um ano? Então, há um ano , estava em 41.000. Vamos verificar isso novamente. Portanto, os dados devem ser os mesmos porque estão usando a mesma chave de API. E eu deveria ser capaz de definir um alerta aqui no endereço de e-mail. Se o preço-alvo for OK, há algo errado aqui. Veja, as paradas ainda estão funcionando, apesar de eu ter clicado no pop-up. Ok, então o que eu faria é corrigir o recurso de alerta por e-mail e colocar o botão acima dos gráficos. Bem, tudo parece bom. É só que o recurso de alerta por e-mail não estava funcionando. Então você tem que testar suas operações, testar, testar, testar. Então, algo que eu aprendi nos últimos dois anos é o teste de aceitação do usuário. Portanto, sempre que você cria uma versão, definitivamente deseja testar todos os recursos principais do aplicativo para garantir que algo não quebre sempre que você fizer uma alteração Ok, está bem. Ok, veja se o botão está colocado em uma área diferente. Configure para Dogecoin. Definiremos um alerta por e-mail quando o Dogecoin estiver em $0,60, ultrapassando Tudo bem, não tenho certeza do que aconteceu lá, talvez por engano, mas sim, acho que você entendeu, e é apenas uma reiteração constante depois disso Então, acho que realmente conquistamos muita coisa neste vídeo de 15 minutos, criamos um painel de criptomoedas muito bom e definimos alguns alertas por e-mail mostrando os dados ao longo do tempo E sim, espero que você possa se inspirar nisso. 10. Criando um aplicativo que possa transcrever áudio: Ei, nesta lição, neste vídeo, vou demonstrar um novo tipo de aplicativo que pode realmente transcrever textos de um arquivo de áudio Então, esse arquivo de áudio que vou usar foi na verdade, gerado pelo Notebook LM do Google, que é um podcast de áudio Então, aqui está o aplicativo. É chamado de transcritor de áudio e vídeo. Estamos nos concentrando apenas no áudio no momento. E embora tenha o campo para um URL de vídeo que ainda não está disponível, eu gostaria de seguir essa etapa. Mas o que eu pedi foi incluir essa capacidade de enviar vídeos ou áudio para que eu pudesse clicar aqui e realmente encontrar o WayFle Então, estamos começando do zero aqui, e eu vou encontrar um Wayfle Old Coin Summer Oh, eu acho que esse é o único aqui. Então, aqui está um wayfle. Você pode ver que está sendo processado. Então, estou usando outra API de plataformas. É chamado de Assembly AI. Eu vou te mostrar rapidamente o site aqui. Então, assembly ai.com. momento, estou usando o plano gratuito, fornece a funcionalidade de conversão de fala em texto e permite distinguir entre o alto-falante. Então, vamos lá. Assim, podemos distinguir entre o locutor A e B, e podemos realmente copiar a transcrição para que possamos usar esse texto gerado em outro lugar Então, digamos que vamos abrir um bloco de notas. E vamos colar aqui. Então essa é a transcrição. Tudo bem, então vou fazer engenharia reversa. Tudo bem, então vou examinar alguns dos destaques deste aplicativo e desfocar algumas das partes que são confidenciais, ou seja, as chaves de API Então, comecei com um baile de formatura muito simples, criei um aplicativo que pode pegar URLs do YouTube transcrevê-los e fornecer legendas E como eu te disse, ainda não estou lá. Mas sim, me disse que não é uma boa ideia colar chaves de API nessa janela como uma prática recomendada. Você pode fazer isso no arquivo ENV se for até código e, em seguida, na área ENV, é aqui que você pode realmente colar chave da API apenas como um Então eu criei a interface inicial aqui com o campo URL, o botão. E sim, esse foi o rascunho. E então demorei um pouco para encontrar uma chave de API, uma chave de API que pudesse realmente digerir arquivos de vídeo ou áudio Então eu fui e voltei um pouco. E, na verdade, não foi até eu encontrar a IA de montagem. Pedi que ele fosse atualizado inicialmente, tento usar algumas APIs do Google, e esse é um processo contínuo Mas, apenas na primeira versão, eu uso o Assembly AI e, portanto, eles oferecem a API gratuita para pegar arquivos de áudio e transcrevê-los, permitindo que você copie e cole o Então, eu basicamente disse a ele que atualizasse para usar a API Assembly AIs, e na verdade ele fez isso perfeitamente Mas o que não tinha era essa área para arrastar e soltar vídeos de áudio. Então eu disse para permitir que o usuário fizesse upload de arquivos de áudio ou vídeo. Então eu entendi isso muito bem. E a partir daí, tive que fazer mais uma iteração. E isso é o aplicativo deve permitir distinguir entre o alto-falante A e o alto-falante B, além de copiar o texto. E veja aqui está o aviso aqui. E sim, isso nos leva até onde estamos hoje. Então, quais são alguns dos aprendizados aqui? Portanto, ambos são muito poderosos. Quero dizer, a capacidade de gravar um vídeo ou áudio e transcrevê-lo, mas também de criar a interface do usuário Bolt entendeu isso muito bem. E estou muito impressionado com a funcionalidade de arrastar e soltar de áudio e vídeo e com a capacidade de usar a API de outra plataforma Eu entendi isso muito bem e a capacidade de distinguir entre o alto-falante A e B na transcrição Isso vem da API, mas tive que dizer explicitamente ao Bolt que fizesse isso e nos permitisse copiá-lo Portanto, esta é uma boa versão funcional deste aplicativo. Espero que, no futuro, eu consiga fazer que a transcrição da funcionalidade de vídeo funcione e possa compartilhar isso com E sim, então esse é um caso de uso diferente de usar bolt dot u para criar aplicativos úteis Espero que isso lhe dê algumas ideias. 11. Como configurar a autenticação de e-mail: Ok, nesta videoaula, vou abordar como podemos criar autenticação de e-mail usando o Firebase Então, eu tenho um aplicativo existente aqui que está aberto agora. É um bot de bate-papo com vários LLM para Cloe and Chat GBT. E você pode, você pode simplesmente usá-lo abertamente agora, mas eu quero colocar um e-mail de opt-in Quero que as pessoas se inscrevam antes de poderem usá-lo. Então, o que vamos fazer é acessar um programa chamado Firebase Isso é de propriedade do Google. Então você pode simplesmente se inscrever aqui. Vou criar um novo projeto. Vou chamá-lo de chatbot. Vou clicar em Continuar. E eu estou apenas usando a versão gratuita agora. Vou ativar o Google Analytics por padrão. Você precisa selecionar uma conta do Google Analytics. Vou apenas selecionar um dos meus existentes. Ok, o projeto está pronto. Vamos clicar em Continuar. Ok. Então, a primeira coisa que queremos fazer é começar e usar um aplicativo web. E vamos ligar para esse chatbot, e eu vou me registrar. Ok, então temos alguns códigos aqui que podemos usar. Copiamos isso, mas ainda não configuramos nossa autenticação. Quero dizer, nossa autenticação de e-mail. Então, vamos clicar em Nick continuar no console. Tudo bem. Então, agora que criamos nosso projeto, vamos clicar em autenticação. Tudo bem Vamos clicar em Começar. Vamos selecionar e-mail e senha. Vamos ativá-lo e permitir que o link de e-mail sem senha faça login. Ok, então isso permite que você simplesmente clique em um link em seu e-mail sem usar uma senha. É um pouco mais de configuração, então vou desativá-la por enquanto. Clique em Salvar. Ok, então isso agora está habilitado. Tudo bem Então, sim, habilitamos a autenticação por e-mail. Então, se clicarmos em Usuários, ainda não veremos nenhum. Ok, então para implementar isso, vamos clicar em Visão geral do projeto. Vamos clicar em Configurações do projeto. E vamos clicar no projeto aqui. Tudo bem, então temos essa chave de API da web. Então, estou em Configurações gerais do projeto. Vou copiar esse código aqui. Você volta para Bolt. Configure a autenticação por e-mail e senha usando o Firebase e esse código Tudo bem Sim. Tudo bem Portanto, há um problema em potencial. Não tenho certeza se isso é um obstáculo. Só precisaremos testar isso para ver se é works@gmail.com. Tudo bem, então vamos nos inscrever. E você pode ver que temos esse botão de logout aqui. Então isso é um bom sinal. Vamos tentar assinar. E agora vamos tentar fazer o login. Vou digitar uma senha errada só para testar. Ok. Ok. Diz erro do Firebase Então, provavelmente, isso é um bom sinal porque a senha não corresponde ao que está no banco de dados. Vamos tentar a senha correta agora. Ok, isso funciona. Então, vamos ao Firebase para ver se temos nosso usuário aqui. Então, vamos à visão geral do projeto. Vamos à autenticação e podemos ver os usuários. Há aquele novo usuário que acabamos de criar. Ok. Então, a partir daqui, podemos realmente redefinir, desativar e excluir a conta. E sim, é assim que implementamos registro de autenticação de e-mail em seu aplicativo. Então, só para resumir, você acessou o Firebase Criamos um novo projeto e eu criei um novo projeto chamado Chatbot e configurei o método de login de autenticação Eu selecionei o e-mail, mas você tem outras opções aqui. Usamos o e-mail apenas para facilitar as coisas, e você tem mais opções de configuração aqui, por exemplo, verificação de endereço de e-mail, que não configuramos, mas você pode passar seu modelo de redefinição, alteração de endereço de e-mail etc As coisas ficam um pouco mais complexas E o que fizemos foi acessar a visão geral do nosso projeto. E, na verdade, temos o código em Geral e usamos esse código aqui. Copiamos esse código. Fomos até o Bolt e pedimos que ele implementasse a autenticação por e-mail e a colamos no código Você pode ver aqui. Configure autenticação por e-mail e senha usando o Firebase e esse código, e eu praticamente o colo Eu testei e funcionou, como podemos ver, dois usuários neste banco de dados. Então, sim, é assim que você pode configurar a autenticação por e-mail. Muito legal. 12. Como configurar a autenticação do Gmail: Vamos tentar configurar a autenticação do Gmail para nosso aplicativo Assista ao vídeo anterior sobre como configurar o projeto no Firebase, caso ainda não tenha feito isso Vamos continuar usando o mesmo projeto que criamos no Firebase para o bot de bate-papo, exceto que eu vou para o projeto Vou clicar em Método de login. Vamos adicionar um novo provedor e selecionar o Google. Vamos clicar em AB Ok. Queremos selecionar um endereço de e-mail que será apresentado aos usuários. Ok, vou selecionar meu endereço do Gmail OK. Eu clico em Salvar tudo corretamente, então isso está ativado. Agora vamos voltar ao projeto. Tudo bem. Vamos pegar nosso código. Vamos voltar para Bolt. Implemente a autenticação do Google usando o Firebase e este código E eu apenas colo os códigos. Vamos tentar isso. OK. Então, vamos testar isso. Então, temos esse novo botão aqui, faça login com o Google. Mas está dizendo que essa ação de solicitação é inválida. Vamos pedir que ele conserte isso. Eu posso ver que nos erros, há algum tipo de bloco pop-up. Talvez eu precise. Sim. Cookies de terceiros da Allile. Tudo bem, vamos tentar novamente. Erro do Firebase. Deixe-me cantar em blocos pop-up. Talvez o que eu possa fazer seja tentar outro navegador depois de implantar Mas vamos ver o que a bola diz. Vamos prosseguir e implantar isso. Vejamos os erros que existiam dois erros antes. Parece que o erro do bloco pop-up desapareceu agora. Vamos implantar Tudo bem, vamos experimentar este aplicativo agora Ok, vamos tentar a autenticação do Google. Não funciona. Vamos experimentá-lo no navegador corajoso. Domínio não autorizado. Ainda estou recebendo autorização não autorizada Ok. Diga-me como consertar isso. Preciso adicionar esse domínio ao Firebase. Acesse o Firebase, selecione o projeto, selecione as configurações de autenticação, domínios autorizados. Vamos tentar isso. OK. Clique em configurações de autenticação, domínios autorizados Só quero ter certeza de que estou capturando isso. Clique em adicionar domínio e coloque-nos. Tudo bem, vamos voltar para Bolt. Talvez você também queira adicionar um host local. Nenhuma alteração de código é necessária. Ok, vamos para Vamos adicionar esse endereço IP. Assim, você pode realmente fazer perguntas sobre parafusos durante o processo de solução de problemas Aqui vamos nós. Agora, vamos tentar isso de novo. Vamos apenas atualizar. Continue com o Google. Walla. Vamos tentar fazer login em nosso aplicativo usando o Firebase. E incrível. Acabamos de adicionar autenticação do Google ao nosso aplicativo usando o Firebase E você pode ver aqui que temos esse provedor de autenticação do Google em vez do e-mail. Então, o que fizemos apenas para recapitular foi que, para o método de assinatura, adicionamos um novo provedor, que é o Google Tivemos que acessar as configurações e autorizar domínios, implantamos e adicionamos esse domínio implantado Também adicionei um endereço IP adicional. Pedimos que ambos implementassem a autenticação do Google. Eu só vou encontrar esse aviso. Ok, aqui está um aviso. Implemente a autenticação do Google usando o Firebase e esse código Então, recebi o código do projeto, o projeto no Firebase E então eu realmente tive que solucionar o problema usando os erros que recebemos, e o Bolt realmente ajudou. Vamos até o último prompt aqui. E eu disse, ainda estou recebendo um erro dizendo domínio não autorizado. Como faço para corrigir isso? Na verdade, me deu uma resposta muito boa. Na verdade, isso me deu a resposta. Fui ao Firebase, acessei as configurações do projeto, domínios autorizados e funciona Então vamos lá. É assim que adicionamos a Autenticação do Google. 13. Criando a caixa de diálogo do PayPal: Tudo bem, então aqui está um aplicativo de amostra com um paywall do Pay Pal. Portanto, ele descreve os recursos que você obterá se pagar e pode ver o conteúdo por trás deles E se clicarmos no PayPal, isso abrirá a caixa de diálogo familiar na qual você precisa inserir as informações. Então, vamos dar um passo atrás aqui, e eu vou te levar de volta para Boldt New Então, pedi que criasse uma galeria de miniaturas de vídeos stock no meu Google Drive Cada miniatura deve ser uma moldura representativa. Então, eu só queria criar um aplicativo básico para testar o paywall do PayPal Para realmente implementar minha ideia, preciso acessar a API do Google Drive. Então, acabou de criar uma versão mais simples da minha pergunta original. Então, o que acabei fazendo foi pedir que ele usasse o PayPal. Então, vou levá-lo de volta a esse prompt. Na verdade, fiz algumas tentativas aqui. Portanto, esse é o painel do desenvolvedor do PA PL. Então, depois de entrar na sua conta, você deve ir para o modo de desenvolvedor e o que você precisa fazer é obter seu ID de cliente. Então, depois de configurar isso, eles permitirão que você experimente um pagamento de teste usando credenciais falsas E você pode ver aqui que estamos no modo Sandbox. Este é o modo ao vivo, mas eu quero estar no modo Sandbox, e você verá aqui Agora, as informações que você precisa estão aqui. Você precisa de suas credenciais de API e pode criar um aplicativo e chamá-lo de qualquer coisa E o que acontece depois de fazer isso, você receberá um ID de cliente que pode ser colado no Bolt dot N para abrir o botão de pagamento do PayPal que chegará ao seu painel do PayPal Resumindo, é assim que você pode implementar um botão de pagamento usando o PayPal e, essencialmente, como você pode monetizar seu aplicativo colocando-o atrás de um paywall para ter acesso a algumas funcionalidades 14. Criando o aplicativo Deep Search API: Tudo bem, estou no site Deep Seeks. Este é o concorrente chinês de IA do Open EI. E só para conferir, quais são as capacidades dos modelos cruzados aqui. Então, eu só quero que você saiba que esta página existe em deepsk.com, então temos deepsk V três E, honestamente, eu não sei o que todas essas estatísticas significam, mas elas estão basicamente mostrando em termos de parâmetros totais, os volumes mais do que Lama Eles não listam HGBTs, vamos tentar usar isso. Na verdade, você pode baixá-lo no seu telefone, eu tentei e é muito bom. Às vezes é bem lento. E acho que há muito tráfego no momento. Então, vamos entrar no bate-papo. Então, eu já perguntei como faço para usar essa API no meu aplicativo? Ok, cadastre-se em uma conta, navegue até a seção API, gere uma chave e parece que eles nos deram o código. Vamos tentar. Vamos tentar. Vamos ao site. Vamos recarregar aqui. $2. Vou usar meu PayPal. Tudo bem. Pagamento bem-sucedido. Ok, então eu ganhei $2. Vamos criar uma nova chave de API. Vamos ligar para um vídeo. Então, vou excluir essa chave de API quando você estiver assistindo a este vídeo, apenas por segurança. E, hum, vamos começar com um novo prompt aqui. Eu quero te mostrar como isso funciona. Cria um chat de IA OG Deep busca API usando Well, usando esse código. Posteriormente, inserirei a chave da API para práticas de segurança. OK. Usando código Python E eu vou inserir a chave da API mais tarde. Ok, vamos ver o que ganhamos com isso. Tudo bem, então está dizendo que crie um arquivo ENV e adicione sua chave de API aqui Ok, então deixe-me adicionar minha chave de API. Vou precisar criar um novo porque eu esqueci . Só para pessoas. OK. Vamos ao Código. Vamos para IV. Bem, eu tenho que criar uma caixa. Tudo bem. Deixe-me ter certeza de que eu criei. OK. Sim. Então é aqui que você o colocaria. Ok, vamos testá-lo. Bem, algo não está funcionando. O que é uma previsão de Bitcoin? Ok, isso parece promissor. Qual modelo você é? Bom. Qual é a melhor linguagem de codificação Então, vou verificar minha conta de uso. Ok, desenvolvimento web em Python. Solidez. Ótimo. Então, deixe-me atualizar isso. OK. Os dados podem ser atrasados em 5 minutos. Ok, agora que está funcionando, vamos criar mais uma página visualmente amigável ao redor do assistente de bate-papo. Mãe, ele. Então, o que estamos fazendo aqui é criar um aplicativo de codificação de IA, mas estamos explorando a API do Deepsek para que, sim, possamos criar nosso próprio software Ok, diga o nome. OK. Vamos apenas testá-lo. Explique a física quântica. Vamos expandir. Pensando bem, muito bom. Eu vou prosseguir e publicar isso. E sim, para resumir, para fazer isso funcionar, eu realmente tive que dizer que não estava funcionando, então consertou o assistente de bate-papo Ele fez várias correções importantes na integração da API. E foi isso que o fez funcionar, porque precisei de algumas tentativas. Então, o que isso realmente mostra é que, se você está recebendo um erro, forneça esse erro exato ao Bolt e, às vezes, é inteligente o suficiente para solucioná-lo Ok, então eu vou guardar isso. Abra em stockblts crie um repositório que é só para mais tarde. Mãe, ele. Então, o que isso faz é que, ao criar esse repositório, você pode usá-lo fora do bolt posteriormente. Então, estou começando a criar repositórios de aplicativos importantes Então, mais tarde, eu poderia reutilizá-lo no futuro. Ok, agora eu quero implantar isso. Qual é o melhor país nômade digital do mundo? Tudo bem, Colômbia. Interessante. México. Ok, eu vou parar aí. Então, espero que você tenha achado este vídeo útil. 15. Como criar um aplicativo de bate-papo LLM com multi IA: Olá. Eu criei um bate-papo com vários bots que pode usar vários modelos de IA aqui Podemos ver que temos uma longa lista, e isso ainda é experimental. Mas sim, eu acho que isso tem muito potencial, e eu queria compartilhar isso porque eu acho que é muito impressionante, na verdade Você vê todos esses modelos da Microsoft Anthropic, Medama Google, Google Então, vamos começar com o Google Gemini e começar com o Hello Quais são suas capacidades completas? Ok, vamos ver. Aprendizagem e adaptação da geração de texto Aprendizagem e adaptação da geração de Traduza idiomas. Ok, então vamos perguntar: Você pode traduzir sua última resposta para o espanhol? Oh, tudo bem. Achei que ele saberia disso. D. Traduza isso para o espanhol. Então eu vou fazer uma pergunta de matemática aqui. OK. Vamos fazer uma pergunta simples de matemática aqui. Se eu estiver alugando um carro de 21 a 27 de dezembro Minhas ligações diárias. Isso é um bom negócio? Tudo bem. Vamos mudar para CHAT EBT Versão quatro. Faça a mesma pergunta. Quanto tempo demorou para treinar o Open Esa? Tudo bem. Então, como você pode ver, eu tenho um modelo de bot de bate-papo em vários idiomas em funcionamento e vou mostrar alguns dos prompts que eu uso para criar Sim, pedi que projetasse um multi-chatbot escalável que usasse os principais modelos de linguagem de IA, dei alguns exemplos e depois usei o E então eu usei uma plataforma chamada Open Router. Eu tenho uma chave de API. Eu paguei $5 em créditos. Fui até keys e ele me deu uma chave de API que usei como chave de API no meu aplicativo bolt. E eu também uso outro programa de IA chamado Perplexity. Então, pedi que implementasse uma API externa aberta. E me deu o código aqui. Então, copiei esse código no meu prompt. E o que eu disse foi configuração básica, e colei o código aqui Deixe-me adiar isso. Sim, então a parte destacada, eu coloquei ali mesmo, e depois a implementação completa. Eu copiei a parte final. Passo quatro, eu apenas copio de lá para aqui e lá vamos nós. E então eu colei minha chave de API. Eu disse para ele configurá-lo, e agora eu tenho um bot de bate-papo com vários bots Então, a última etapa é eu só quero implantar isso e salvar meu progresso para mais tarde, porque estou muito feliz com isso para alguém que não codifica. Tudo bem, então, depois de implantá-lo, terei uma URL e posso realmente compartilhá-la com outras pessoas e melhorá-la a partir daí 16. Criando um aplicativo de compartilhamento de carona com a integração do Stripe: Tudo bem. Este é um aplicativo interessante aqui. Este é um aplicativo de compartilhamento de viagens bastante básico que usa a API do Google Maps. Ele também tem integração com faixas. Então, o que você pode fazer aqui é digitar o endereço, o local de partida, o destino. Ele mostrará os motoristas disponíveis e a quantidade, a quantidade de tempo e, em seguida, você poderá confirmar sua viagem. Então, vou apenas demonstrar isso, vou colocar Gramble Islands. E então eu vou escolher os aeroportos. Na verdade, precisamos atualizá-lo, então começamos do zero Ok, então começa em Nova York, mas vou colocar Granville Islands Vou escolher um destino distante, Stestono, $25. Ele nos mostra os drivers disponíveis. Essa é apenas uma versão básica. Há muitas melhorias que eu posso fazer. Mas acabei de configurar a viagem confirmada para que ela vá para o Stripe Então, para o Stripe, deixe-me desfocar isso. Estou apenas no modo de teste aqui e usei minha chave publicável para testar Isso é para testar essa viagem de confirmação. Então, ele vai aparecer com esse pagamento agora, e ele não está ativo, mas você pode ver aqui que o pagamento foi bem-sucedido. Sua viagem está confirmada. Portanto, este é um aplicativo básico de compartilhamento de viagens. Vou apenas mostrar algumas instruções importantes aqui. Então, criei um aplicativo completo de compartilhamento de viagens semelhante ao Uber, usei o prompt aprimorado e ele adicionou muitos recursos adicionais que ainda não estão aqui. Portanto, autenticação do usuário, rastreamento de localização em tempo real, reserva de viagens e sistema de correspondência, processamento do InAppPayment Como requisitos técnicos, há essas APIs aqui, então eu uso a API do Google Maps Design responsivo. Sim. Então, tudo isso é extra, e Bolt voltou e disse: “ Há algumas limitações aqui Você nos quer? Sugeriu duas alternativas. Você quer apenas o front-end ou uma versão simplificada? Então, pedi para criar uma versão básica, e também disse que eles precisam de uma API do Google Maps. E é aqui que vou para a parte em que realmente precisei inserir a chave da API. Então eu fui ao Google Maps e, sim, o que você precisa fazer é realmente pegar as chaves do Google Maps. E isso é meio que um labirinto, mas você vai até a chave e as credenciais e obtém sua chave de API, que não vou mostrar Mas é aqui que você obtém a chave da API. Então, isso deu a funcionalidade de mapeamento aqui. Caso contrário, não funcionaria. E então, a partir daí, pedi que trocasse o botão de confirmação de gravação como um link de pagamento para o Stripe E foi aí que obtive a chave de API publicável da Stripe Então, vou te mostrar o prompt aqui. Então eu disse: Faça o botão de confirmação de gravação, vá para o botão de pagamento do Stripe Na verdade, eu escrevi isso errado. Mais tarde, porém , ele me pediu a chave de API real, que forneci posteriormente. E é aí que acessamos o aplicativo hoje. Portanto, é um aplicativo simples, mas requer o uso de duas APIs, a API do Google Map e a chave de API publicável do Stripe no E como eu disse, esta é apenas uma versão muito antiga. É uma maquete e muitos aprimoramentos podem ser feitos Mas, na verdade, li que os aplicativos de compartilhamento de caronas também usam a API do Google Map. Então foi daí que eu tirei a ideia. Então, espero que isso possa estimular um pouco de criatividade, algumas ideias suas para criar um aplicativo de compartilhamento de caronas ou qualquer tipo de aplicativo que exija alguma funcionalidade matemática Talvez isso dê início a algumas ideias suas. 17. Como criar pong usando codificação de IA: Tudo bem, vou fazer uma demonstração de um jogo muito simples, como Pong Então, são dois tênis D. Mas eu adicionei uma pequena reviravolta. Você pode adicionar os nomes dos jogadores e escolher uma escolha de perfil. Então, vamos começar por aqui. Greg, e eu vou adicionar uma escolha de perfil. E vamos colocar Kasey Choose a pick, escolha esta E então iniciaremos o jogo e a barra de espaço para começar. Portanto, os controles estão abaixo. Então W e S são para o jogador um. Subir e descer é para Casey, jogador dois. Então, eu vou jogar contra mim mesmo aqui. Mas, como você pode ver, temos um jogo de pong muito simples aqui e temos as opções de perfil Então, isso meio que adiciona um pouco de personalização e temos um efeito sonoro E o jogo subirá para algo como 11. Então esse é o jogo Pong. Então, vou fechá-lo. Eu provavelmente deveria adicionar um recurso para interromper o jogo. Mas vou ver os bastidores e mostrar minhas instruções. Tudo bem, então eu comecei com um prompt: criar um jogo de tênis em dois D, como Pong E então usei o prompt aprimorado para criar algo mais detalhado. Então, vamos até o prompt e eu vou te mostrar o que quero dizer. Crie dois e crie um jogo semelhante ao Pong. E a IA é inteligente o suficiente para reconhecer um jogo como Pong, e então você pode clicar no ícone aqui para obter um aviso aprimorado Então, você pode ver que ela realmente expande aquela solicitação de uma linha, e esse é o molho mágico ali mesmo Então esse foi meu primeiro aviso. Então, fui em frente e criei dados para focar na esquerda. E então eu vi a primeira versão, e é aí que eu tenho meu segundo aviso. Permita a capacidade de adicionar nomes de um e dois jogadores e adicionar uma escolha de perfil. Portanto, essa caixa de diálogo que você vê aqui é o que veio desse segundo prompt e fez um trabalho muito bom, exatamente o que eu precisava. E sim, é isso. Eu implantei o aplicativo nesse URL, e esse é um jogo simples que temos Quero dizer, você pode usar sua imaginação para tornar isso mais complexo. Você provavelmente poderia pedir que ele mudasse algumas das cores. Talvez você queira tornar a raquete mais longa ou permitir que você personalize o tamanho dela Então você pode usar sua criatividade para torná-lo mais interessante, mas este é apenas um exemplo básico de como você pode criar um jogo de pong, um jogo de dois D pong usando Bolt Talvez você queira usar isso como inspiração para criar um jogo semelhante ou até mesmo outro usando algumas das ideias aqui. Então, espero que esta videoaula ajude você e inspire você a criar alguns de seus próprios jogos usando a codificação de IA 18. Como criar invasores espaciais usando Grok 3: Tudo bem, aqui está como eu fiz o jogo Space Invaders usando Grock and Não é perfeito. Há alguns insetos. Fora. Eu tenho um controle deslizante de música. Tudo bem Deixe-me mostrar o código do jogo BoltoTu Okay, Space Invaders Então, este é um jogo HTML cinco, e eu recebi o código do Grock Então eu pedi para criar código HTML para um tipo de jogo do tipo Space Invaders E então me deu esse código aqui. E então eu simplesmente trouxe esse jogo para Bolt. Basta ligar o volume aqui. Então eu pedi que ele criasse um jogo do tipo HML Space Invaders usando esse código, e eu praticamente colei o E então eu coloquei algumas instruções adicionais. Pedi que ele criasse alguns sons. Então eu fui ao site opengamear.org, e então Encontrei sons para disparar. E quando você bate quando atinge um alienígena. Então eu coloquei essa poltrona. Use o som da música. Use o som para disparar. E então eu pedi para colocar um controle deslizante de música. Faça um controle de volume da música e, em seguida, use o som que atinge os alienígenas E então eu implantei o aplicativo. Vamos torná-lo maior. Lá vamos nós. Agora está funcionando. Está um pouco cheio de bugs. Aí está. Você entendeu a ideia. Acho que há algum potencial aqui. Então é assim que usamos o Grock em conjunto com Bolton U para criar um HTML cinco no jogo Space 19. URL fácil de usar: Ok, agora que você implantou seu aplicativo, quero lhe dar algumas orientações sobre implantá-lo com uma URL amigável Então, neste exemplo, eu implantei um clone de um aplicativo AirBME e estou usando o Go Daddy Então, vou mostrar como eu o direciono usando meu próprio subdomínio para o URL que fornece o NetLFi Então, vamos ao NetFig para o site do AirBnB. Então, no índice, se você for para o código , está na linha sete. Você deseja alterar esse título para o que você deseja exibir. Caso contrário, ele exibirá VIT mais React, certo? Você provavelmente não quer isso, então você quer mudar o código. Depois de descobrir a manobra, você vai querer acessar o site do Net Loofy você vai querer acessar o site do Net Loofy E a partir daí, você pode acessar seus sites. Então eu vou para o BNB . Basta clicar lá. Então você está se concentrando na etapa dois. Então, você precisará de um domínio existente. Caso contrário, você pode simplesmente comprá-lo diretamente daqui. Mas eu tenho um existente, então vamos para a configuração do site. Então é aqui que você pode realmente alterar o nome do site para o que quiser. Então essa é a maneira mais fácil de fazer isso. Você obterá algo como, por exemplo, o aplicativo B&B six oh four dot netloofy dot, e isso revelará aplicativo B&B six oh four dot netloofy dot, um fato imediatamente Então, imediatamente, você terá uma URL melhor que eles forneceram originalmente. Ok, então, quando você tiver esse URL, basta marcar e salvá-lo em algum lugar Eu vou para Go Daddy, Gerenciamento de Domínios. Então esse é o domínio que vou usar. Eu criei um subdomínio de encaminhamento. Então você pode adicionar fording, e eu poderia digitar qualquer B&B. E é aqui que eu colocaria a URL da rede Lafe Então, se voltarmos ao site, eu colaria esse nome aqui. Bem ali dentro. E então clicaríamos em Salvar. Então, isso significaria efetivamente airbnb, uma academy.com criativa , encaminharia para Então você pode ver que eu fiz isso com B&B. Então, se eu digitar BNB creative academy.com OK. Em seguida, deve nos levar direto ao nosso site. Oh, lá vamos nós. Então, o BnB dot em creative academy.com e, em seguida, encaminha para o B&B six oh fourntloofe dot dot seguida, encaminha para o B&B six oh fourntloofe Portanto, esse é o primeiro passo para usar seu próprio domínio, que encaminha para um Neto L automaticamente. E acho que essa é a melhor maneira de implantar e compartilhar seu aplicativo. 20. Encaminhe o nome de domínio para netlify: Mas sim, então deixe-me levá-lo para Net Lafe. Então, depois de implantá-lo, por padrão, ele vai para esse provedor, que você pode ver, e esses são meus sites diferentes Então eu clico aqui. A coisa mais fácil é clicar na configuração do site. Você pode alterar o nome do site. Então eu mudei para Trump e Melanin. Então, eu não quero mudar isso porque você verá que eu comprei um nome de domínio da GoDaddy, que aponta para este site Tudo bem, então eu vou te mostrar o domínio que eu tenho. Então Trump e Milania coin.com. Na verdade, essa é a grafia correta. Então eu comprei esse domínio da GoDaddy, e eu simplesmente uso o link de domínio da Ford e encaminho para qualquer lado na parte inferior Foi aí que eu colei o URL do Netfy. 21. A página inicial do Trumpcoin: Olá, bem-vindo a um tutorial que mostrará como criei esta página inicial Trump, uma moeda milenar que tem uma opção de e-mail na parte superior, usando uma plataforma de marketing por e-mail chamada Kit E temos uma imagem aqui, que eu criei com IA. E temos um botão de compra que serve digamos, para o encaminhamento para uma bolsa de criptomoedas. Temos o preço ao vivo do token, também a variação percentual e a capitalização de mercado. E também temos preços para o token da esposa de Trump, a moeda Milania Então, sim, vou mostrar os bastidores de como isso foi criado. Então, vamos começar com o topo. Eu uso o software da ConvertKit, também conhecido como kit agora Portanto, eles têm a capacidade de criar um formulário opcional. E se você quiser aumentar as páginas de revestimento, poderá criar uma página de revestimento. Você pode escolher estilos diferentes. Então, este é apenas um que fica no topo. Não é muito intrusivo. Mas eu posso obter relatórios aqui. Acabei de configurar isso ontem à noite, então é muito novo. E sim, isso me permitirá capturar endereços de e-mail de pessoas que preenchem este aqui. Então, por exemplo, eu me inscreveria aqui. Eu receberia um e-mail na minha caixa de entrada para confirmar. Ok, e então esse botão de compra realmente acessará o site aqui para comprar a criptomoeda. E agora, esse preço vem por meio uma API da Coin Gecko, Portanto, eles oferecem uma API gratuita que permite que você obtenha preços. Se você ver aqui, $50,56, o preço deve ser bem Tudo bem? Então é daí que vêm as informações de preços, todos os números. E agora, deixe-me explicar a verdadeira codificação de IA. Então eu comecei com esse prompt, construí uma página de revestimento, e ela está escrita incorretamente, Mostre o preço do Tromcin usando este URL com opções de alerta por e-mail Então, na verdade, pego esse URL e o enviei para ambos. Eu entendi, mesmo com o erro de ortografia. Então, ele criou a página de revestimento. Tudo bem, então a próxima solicitação foi integrar o formulário aqui Então eu tentei o JavaScript. Então, isso é da minha plataforma de email marketing. Então, eles fornecem esse código aqui para copiá-lo e colocá-lo em um site. Mas para bolt, acabei de dizer, integre essa opção no formulário e colei o código Disse que realmente o executou. Eu o implementei, mas não trabalhei inicialmente. Então eu tentei usar o HTML, basicamente dei o mesmo prompt e colei basicamente dei o no HTML Então, isso mostra que às vezes você precisa ser persistente e experimentar algumas opções diferentes. Então, eventualmente, o formulário funcionou e está no topo. E então eu dei uma imagem. Então eu criei essa imagem usando o Wix. O Wix tem um criador de imagens de IA. Então, eu consegui criar uma postagem no blog, na verdade. Tudo bem, então este é o meu blog, e eu realmente dei o endereço de cópia da imagem do link direto porque se você acabou de fazer o upload de uma imagem, ambos não parecem gostar, então foi assim que eu adicionei a imagem do cabeçalho. Então eu dei o aviso, adicionei essa imagem ao cabeçalho e colei a URL, o endereço da imagem Ok, então isso começou a dar forma ao nosso projeto. Tive que ir e voltar um pouco e, por fim, entrei em outro projeto E você pode ver que aqui na página inicial do rastreador de preços de moedas do projeto Trump foi bifurcada Tudo bem, então o que eu fiz foi apenas implantá-lo. Eu o implantei no Netfi UL. E mesmo depois de implantá-lo, você ainda pode fazer alterações. Mas às vezes você precisa implantá-lo para realmente testá-lo. Então, eu queria fazer coisas como adicionar um vídeo. Eu queria testar a aceitação por e-mail. A propósito, o que ainda é um trabalho em andamento. E então eu queria adicionar uma segunda ficha, a moeda Milania E não tenho certeza se o prompt está sendo exibido aqui. Mas eu dei a mesma URL do site. Então eu disse, mostre os preços ao vivo da moeda Milania e, em seguida, forneci a URL Então, isso não está aparecendo aqui. Então foi assim que obtivemos os preços aqui. Este tutorial em vídeo está em andamento, mas como ainda não implantei essa versão bifurcada, ela não está sendo exibida no aplicativo publicado Portanto, o aplicativo publicado está em NetFiEste é o site subjacente Trump and ManicInntLaf Na verdade, percebo que o URL do domínio está escrito incorretamente. Mas sim, então deixe-me levá-lo para Net Lafe. Então, depois de implantá-lo, por padrão, ele vai para esse provedor, que você pode ver, e esses são meus sites diferentes Então eu clico aqui. A coisa mais fácil é clicar na configuração do site. Você pode alterar o nome do site. Então eu mudei para Trump e Melancin. Então, eu não quero mudar isso porque você verá que eu comprei um nome de domínio da GoDaddy, que aponta para este site Tudo bem, então eu vou te mostrar o domínio que eu tenho. Então Trump e Milania coin.com. Na verdade, essa é a grafia correta. Então, comprei esse domínio da GoDaddy e simplesmente uso o link de domínio da Ford E avance para qualquer lado na parte inferior. Foi aí que eu colei o URL do Net Life. Então, sim, em poucas palavras, esse é o fluxo de trabalho completo deste site aqui Por isso, implementamos uma opção de inscrição por e-mail. Adicionamos uma imagem personalizada. Temos um botão de call to action. Então, na verdade, foi um aviso. Eu não fui até lá. Então, eu basicamente disse, adicione um botão de compra com esse URL e dê a ele esse texto, compre em crypto.com Então é por isso que eu escolhi o botão. E o preço que obtive no site da coin Gecko usando o URL desse ativo específico, que mostrei para moedas de bonde e moedas milenares E então eu mostro como podemos fazer uma apresentação melhor com uma URL adequada que é encaminhada do Netlify, que é a plataforma padrão que a Portanto, isso deve abranger um fluxo de trabalho completo. Essa é uma página de alinhamento destinada a fornecer informações sobre preços, informações sobre compras e também reunir alguns endereços de e-mail 22. Recapitulação das lições aprendidas: Tudo bem, então eu mostrei alguns exemplos de como criamos aplicativos diferentes Criamos um aplicativo mostrando as pessoas mais ricas. Criamos um aplicativo de pontuação de golfe. Assim, você pode ver como é importante garantir que sua solicitação ou sua opinião seja a mais específica possível, ou você pode simplesmente começar pedir que ele crie um aplicativo simples. E reitere, o que significa basicamente aprimorar seu aplicativo quando você realmente o vê Mostrei como podemos anexar um PDF com uma espécie de referência para começar. Se você quiser copiar um aplicativo existente ou mostrar algo para ele. Também mostrei como você pode usar o ícone de IA para aprimorar seu prompt, que é super poderoso. Você pode ver como isso tornou minhas instruções simples muito mais detalhadas E também demonstrei como você pode conectar seu aplicativo aos bancos de dados existentes usando APIs Também mostrei como, na solicitação, você pode reiterar simplesmente vendo o que ele cria e, em seguida vendo quaisquer possíveis aprimoramentos e, em seguida, usando o inglês simples para solicitar a adição de recursos adicionais Também mostrei como você pode desfazer sua solicitação se alguma forma, conseguir quebrar coisa e quiser voltar para a versão anterior Por fim, mostrei que, se você está satisfeito com seu aplicativo e deseja criar uma versão, como implantá-la clicando no botão Implantar, que criará um link público que você poderá compartilhar com amigos ou colegas para obter feedback 23. Resumo da codificação de AI hd: Então, isso conclui nosso curso intensivo sobre codificação de IA para iniciantes Isso é só o começo, e eu também estou continuando minha jornada. Aprendemos como podemos usar Bol Dog New para usar nossas instruções, nossas ideias, nossa criatividade, para criar diferentes tipos de aplicativos E eu recomendo que você jogue e compartilhe seus aplicativos com seus amigos, obtenha alguns comentários e veja que tipo de aplicativos você pode criar. Quando dei uma olhada nisso, fiquei surpreso ao poder criar um aplicativo de pontuação de golfe e um aplicativo que cria um painel com diferentes moedas estrangeiras, tornando-o personalizável Assim, qualquer pessoa que use isso pode personalizar seu painel das dez principais cidades habitáveis, por exemplo, podendo personalizá-lo para cidades diferentes ou, para um aplicativo de pontuação de golfe, jogadores diferentes E eu acho que o limite é realmente sua criatividade. No entanto, este aplicativo é apenas um ponto de partida. Se você quiser criar aplicativos complexos, pode usar plataformas diferentes, como o Cursor. E lembre-se, isso é só o começo, prevejo que haverá mais aprimoramentos, plataformas diferentes, mais concorrência Mas as principais habilidades serão suas instruções, a reiterar sua criatividade e referenciar usando aplicativos diferentes para começar com ideias existentes e poder se conectar a diferentes bancos Então, espero que você tenha gostado deste curso e dê uma olhada em algumas das minhas outras ofertas e agradeço por fazer o curso. Espero que você tenha aprendido muito.