Programação no Vibe para criar aplicativos reais com IA: uma jornada sem usar código usando o Bolt.

1. Introdução ao curso: Neste curso, falaremos sobre como você pode criar aplicativos de nível de produção com a ajuda da IA sem escrever uma única linha de código. Bem, você nem precisa saber codificação. Isso é o que vamos aprender e vamos aprender de uma forma prática. Sou fácil e estou entusiasmado por ser seu guia neste curso prático e amigável, no qual exploramos como a inteligência artificial pode ajudar você a dar vida às suas ideias de aplicativos sem escrever uma única linha de código Neste curso em particular, mergulhamos em um incrível software chamado bolt dot N. Essa é uma ferramenta de ponta que permite criar aplicativos totalmente funcionais apenas descrevendo o que você deseja Agora, seja você um iniciante curioso, fundador não técnico ou simplesmente alguém que está procurando prototipar suas ideias rapidamente para prototipar suas ideias rapidamente que você possa validar Este curso ajudará você a entender como fazer isso com mais facilidade, rapidez e como está mais acessível do que nunca. É assim que o curso flui. Então, primeiro entenderemos o que é bolt dot Nu. O que é essa ferramenta de EI e como ela funciona. Configuraremos o espaço de trabalho da nossa conta e, em seguida, começaremos a escrever um aplicativo Então, usaremos o bolt dot neu no software para gerar um aplicativo para Entenderemos sua interface e todos os detalhes necessários para criarmos um aplicativo de nível de produção totalmente funcional E então construiremos nosso segundo projeto, que será um projeto ainda mais complexo do que o primeiro, e é aqui que entenderemos o verdadeiro poder dessas ferramentas de IA. Não só vou criar produtos de forma prática e mostrá-los para você, mas também vou destacar como você pode refinar seu produto, como você pode fazer melhorias, como você pode fazer melhorias, como você pode iterar nos designs e como você pode corrigir bugs em Tudo isso de uma forma totalmente prática, na qual, na verdade, consertaremos malas, melhoraremos os layouts e adicionaremos novos recursos ao nosso aplicativo Sempre que você cria algo novo, é muito importante implantá-lo em algum lugar na Internet para que o mundo possa acessá-lo, certo? Portanto, isso também é abordado no curso em que usaremos a ajuda do bolt dot new e adicionaremos um banco de dados ao nosso aplicativo, e também o implantaremos em um servidor ativo para que o mundo possa acessá-lo um servidor ativo para que o mundo possa Ao final do curso, você não só terá vários aplicativos funcionando, mas também terá a confiança necessária para continuar criando, testando e lançando suas ideias na velocidade da luz E este curso é perfeito para iniciantes sem experiência em programação Mesmo se você tiver experiência em programação, você é bem-vindo. Você aprenderá como a codificação é muito mais rápida atualmente com a ajuda dessas ferramentas de IA Mas iniciantes sem experiência em programação também são bem-vindos empreendedores e criadores que desejam prototipar suas ideias Este curso também é para eles. Além disso, este curso é para qualquer pessoa curiosa sobre como a IA pode ser usada para criar aplicativos de nível de produção. Sem habilidades técnicas, sem problemas. Tudo o que você precisa é de uma ideia e desse incrível software, que é novo em negrito, que o ajudará a fazer o resto. Então, vamos começar e ver suas ideias ganharem vida com a ajuda da IA. 2. O que é o Bolt.new?: Então, vamos começar a falar sobre parafuso. O que é parafuso Portanto, o bolt EI é uma plataforma inovadora de desenvolvimento web baseada em EI que permite aos usuários criar, executar, editar e até mesmo implantar aplicativos web completos diretamente no Web ou por meio do navegador da Web Em vez de escrever código linha por linha, você apenas descreve o que deseja criar usando linguagem natural e essa ferramenta, que é o bolt AI, gerará o código correspondente Ok. Então, aqui está o resumo do seu mecanismo de pesquisa favorito. Então eu abri o Google. Você pode abrir qualquer mecanismo de pesquisa de sua escolha e simplesmente pesquisar por bolt aqui Agora, quando você pesquisa por bolt, o primeiro site que você verá aqui provavelmente será bold dot new. Está bem? Então você pode clicar aqui e acessar este site específico aqui. Portanto, este é o site oficial. Ou se, por algum motivo, você não ver isso como o primeiro resultado, sinta-se à vontade para rolar um pouco para baixo. Está bem? Pode ser o segundo ou terceiro resultado para você. Ou você pode, alternativamente, digitar o mesmo diretamente. Até aí tudo bem, ok? Agora, aqui, você pode ver essa piada aqui. O que você quer construir? Crie aplicativos e sites incríveis conversando com a IA. Sim, então é isso que essa ferramenta faz. Ele usa inteligência artificial e algoritmo de aprendizado de máquina em vários estágios de desenvolvimento e cria um produto completo para você E esse produto, você pode até mesmo se conectar ao banco de dados. Você pode implantá-lo na Internet e torná-lo acessível para qualquer pessoa. Então, aqui, se você estiver neste site específico, você pode simplesmente dar esse aviso aqui. Você pode ver, você pode clicar aqui. Crie um aplicativo financeiro. Agora, no momento em que você vê isso, ok, ele o levará por esta página de bate-papo aqui. Portanto, ainda não nos inscrevemos nem fizemos nada. Acabamos de clicar em, criar um novo aplicativo financeiro, e você pode ver que ele começou a importar o projeto em negrito e disse que criará um momento, e você pode ver aqui está importando esta instalação do NPM do aplicativo financeiro, está Ok, então ele configurou esse aplicativo para nós sem que falássemos muito sobre o aplicativo. E você pode ver que este é um aplicativo básico que já foi construído com parafuso. Está bem? Portanto, esse aplicativo já deve ter sido construído com o Bolt, e é isso que você está vendo aqui Agora, se você for à página inicial novamente, há algumas opções aqui, você pode dar uma olhada Você pode até mesmo importar coisas do Figma ou Github, se desejar, e construí-las aqui Está bem? E aqui na parte superior, você verá a opção de empresa comunitária aqui e, em seguida, você terá uma opção de preços. Agora, quando falarmos sobre preços, é claro que usaremos a versão gratuita, ok? Eu não acho que você vai precisar de uma versão paga, mas se você está construindo isso seriamente ou trabalhando seriamente com essa ferramenta, então você pode atualizar para o Pro no futuro e comparar os benefícios aqui, ok? Mas para aprender, experimentar, construir projetos, tudo bem, desde que estejamos dentro de minutos, desculpe, não minutos. Enquanto estivermos dentro dos limites aqui, tudo bem, você precisa fazer um upgrade. Portanto, uma versão gratuita deve funcionar aqui. Agora aqui você pode ver aqui na versão gratuita, você tem projetos públicos e privados, ok, que significa que seus projetos podem ser privados para você e não serem compartilhados com ninguém ou não serem vistos com ninguém. Você ganha 1 milhão de tokens por mês, ok? Então, aqui você pode ver que na versão pro, como no plano de $20 por mês, você recebe 10 milhões de tokens por mês Aqui você está recebendo 1 milhão de tokens por mês. O que são tokens? Chegaremos a isso em breve, e você está recebendo isso como um acordo limitado. Ok, esse é o limite diário para os tokens. Então, vamos falar sobre tokens. Agora, o que são tokens? Você pode pensar no token como uma moeda, basicamente, ok? Ou deixe-me ir aqui para ver os recursos. Eu vou ao Docs and Health Center. Ok. E aqui no lado esquerdo, então esta é a documentação oficial em negrito. Aqui no lado esquerdo, se você rolar para baixo, verá algo chamado de tokens. Então selecione isso, e você pode ver aqui. Ok, tokens são pequenos pedaços de texto, ok? Agora, eu amo gatos, e depois exclamação. Ok, essas são todas as fichas aqui. Então, se você contar isso, um, dois, três e quatro. Ok, isso se torna quatro fichas. Então, modelos de aprendizado de idiomas, como LLMs, processam texto como tokens, e isso é basicamente a unidade aqui ou a moeda, usando a qual você é cobrado Está bem? Portanto, se você está fornecendo muitas informações, se está desenvolvendo muito, se está iterando muito no código e seu uso é alto , é claro que você usará um , é claro que você usará grande número de tokens Se você estiver produzindo um grande número de tokens, se estiver usando um grande número de tokens, precisará da provocação. Está bem? É para isso que estou chegando. Está bem? Portanto, desde que seu uso esteja dentro de 1 milhão de tokens por mês, você pode optar pelo plano gratuito. Ok. Então, isso é algo que você precisa entender. Você pode ver aqui que uma função simples fará uso de 5.200 tokens O script Medium usará essa quantidade de token. Um aplicativo completo fará uso dessa quantidade de token. E aqui você pode ver se está usando um LLM por meio de um serviço pago como bold Os custos geralmente são calculados com base no número de tokens processados Ok. Menos tokens significam menor custo. Então, basicamente, é uma unidade , é como sua moeda, você pode pensar nisso. Então aqui, isso é o que o Token é, e esta é a documentação oficial aqui. Portanto, eu recomendo que você brinque com esta documentação se precisar algum tipo de ajuda no futuro. Mas sim, por enquanto, é importante que você entenda o que são tokens. Tudo bem Então, isso é sobre Bolt aqui. Esse é o produto, ok? Você pode clicar nessas várias opções. Ele pode até mesmo ajudar você a criar um aplicativo móvel. Assim, você pode clicar nessas várias opções e explorar este produto apet. Espero que isso tenha sido útil até agora. 3. Seu primeiro aplicativo construído pela IA usando o Bolt.new: Então, agora é a hora de trabalharmos um pouco, configurarmos nosso espaço de trabalho e até mesmo criarmos um primeiro aplicativo que nos dê a sensação de EI Está bem? Então, vou clicar em Começar. Se você já tem uma conta, pode clicar em entrar e será direcionado para a página de login, ok. Mas vou seguir todas essas etapas para novos usuários, para que, se você for novo nessa configuração, acompanhe. Então, eu vou dizer para começar. Você vê esta página. Então você tem login com o Google Github, e-mail e senha, para que você possa escolher a opção apropriada com base na sua preferência, ok, e criar uma conta Agora lembre-se de que, se você fizer login com e-mail e senha, precisará verificar seu e-mail também precisará verificar seu e-mail. Então, esse é um passo. Então, vou clicar rapidamente em entrar com o Google aqui. Então você pode ver aqui, eu me autentiquei usando o Google, e fui levado para esta mesma página da web, que nada mais é do que a página inicial aqui, ok? E você pode ver aqui na parte inferior, ok, eu tenho esse painel lateral, OK, que podemos explorar mais tarde Então, para criar o aplicativo web, vou dar minhas informações aqui, ok? E o aplicativo que eu vou construir, pode ser qualquer aplicativo, em primeiro lugar, mas o aplicativo que eu escolhi é um gerador de código inspirador aleatório, certo? E vou descrever minha inscrição aqui, ok? Então, estou dizendo ao modelo de IA ou ao boulg dot new aqui. Estou lhe dizendo que crie uma página da web com um botão central que diz gerar um novo código. Quando clicado, exiba um código inspirador aleatório abaixo do botão. É isso mesmo. É um aplicativo muito simples. Ele apenas exibe códigos aleatórios. Está bem? Agora, eu posso dizer rapidamente, vá até aqui, ok? Ou se você não tiver certeza e quiser aprimorar um pouco esse prompt específico , existe esse botão. Ok, você pode ver este botão, aprimorar o prompt, e há uma opção para fazer o upload dos arquivos como. Então, se você quiser dar um contexto adicional, você também pode fazer upload de arquivos. Mas vou dizer que melhore o prompt, ok? E no momento em que você clica em aprimorar o prompt, ele aprimorará esse prompt, tornando-o mais detalhado. Então você pode ver aqui ou pode lê-lo. OK. Você pode lê-lo. Crie uma página da web responsiva usando o seguinte design: um layout limpo e centralizado com um botão proeminente Ele contém esse texto, usa um esquema de cores atraente e estilo moderno tem efeitos de clique e clique A interação é facilmente clicável em desktops e dispositivos móveis Quando clicado, para que você possa ver aqui, posso buscar o código de uma matriz predefinida em um EPI, exibir o código abaixo do botão e, você pode ver aqui, que mais algumas dicas e requisitos de estilo foram adicionados Então, acabei de adicionar duas linhas e, aqui, esse prompt foi aprimorado para adicionar informações mais detalhadas. Agora você está livre para ajustar essas informações da maneira que quiser, se não quiser nenhum tipo de coisa, por exemplo, se não quiser essas animações, para poder se livrar dessa linha Se você quiser adicionar outra coisa, você pode adicioná-la aqui. Assim, você pode aprimorar a solicitação e, quanto melhor a entrada fornecida, o texto escrito ou a descrição do aplicativo que deseja fornecer ao modelo de IA, melhor será a resposta. Então, isso é muito elaborado. Ok, ele descreve tudo e cada um, e essa é a vantagem de usar essa opção de prompt aprimorada aqui Está bem? Você pode ver que o prompt de conformação foi aprimorado. Então eu vou dizer, vá até aqui. E você pode ver que será direcionado para esse tipo de página, que basicamente começará a trabalhar nela. E aqui no lado direito, você verá a prévia do seu aplicativo, certo? Então você pode ver que está pensando, eu penso por 8 segundos. Está bem? E se você quiser ver o processo de pensamento, clique aqui. OK. Então, aqui está o processo de pensamento. Então ele criou isso e agora está gerando todo esse código. Assim, você pode ver que está configurando todo o projeto para você. Ele está atualizando esse arquivo para você. Essencialmente, é escrever código para você. Então, vamos esperar um pouco. Até que todo o processo de geração de código esteja concluído. Está bem? Agora, se você quiser ver o código também, aqui está uma opção na parte superior, que é o botão de código, e você verá todo o código sendo gerado e atualizado aqui. Mas eu vou simplesmente pular isso. Vou selecionar a visualização prévia porque vou deixar a IA fazer o trabalho por mim. Ok, vamos esperar um pouco até que todo esse processo seja concluído. Isso levará alguns segundos ou minutos. Então isso foi rápido. Ele gerou esse tipo de aplicativo. Você pode ver aqui. Inspiração diária, descubra a sabedoria que desperta motivação e aumenta seu potencial a cada clique Interessante Clique no botão acima para revelar seu primeiro código inspirador Ótimo. Então aqui você pode ver esse botão. Tem uma boa animação e um bom efeito de foco. Você pode ver. Nós projetamos isso? Nós desenvolvemos isso? Absolutamente, não. Está bem? Tudo é gerado por. Se você clicar nele, ele gerará um novo código para você. Você pode ver se está trabalhando em algo que realmente lhe interessa, sem precisar ser pressionado. A visão atrai você. Este é um código de Steve Jobs. Interessante OK. Então eu nem precisei dar a lista de códigos e tudo mais. Acabou de fazer o trabalho para mim. Você pode ver. Este é um aplicativo muito simples muito apresentável É como se fosse um aplicativo apresentável. Você pode implantá-lo na produção e tê-lo como seu aplicativo simples que você criou em apenas 10 minutos usando IA ou 5 minutos usando IA. Espero que isso lhe dê uma ideia de quão poderosa a EI pode ser. Então, essa plataforma, que você pode ver aqui, pensou assim, com base em sua opinião, primeiro lugar, não fornecemos essa entrada elaborada Acabamos de dar duas linhas. Pedimos à Air que aprimorasse o prompt. Ele o aprimorou dessa forma, ok? E então ele pensou por 8 segundos aqui. Você pode passar pelo processo de pensamento, bem como pelo que ele pensou aqui. Ao clicar aqui, vou simplesmente fechar isso. Em seguida, basicamente reiterou o que entendeu. Então, reiterou isso, ok? E criou um plano e foi publicado aqui. E então começou a desenvolver o aplicativo, e você pode ver a resposta aqui. Está bem? Então, sim, este é seu primeiro aplicativo gerado usando IA. Espero que tenha sido incrível e espero que você consiga acompanhar. 4. Entendendo a interface e os recursos: Agora é hora de examinarmos a interface e entendermos as diferentes opções que vemos aqui. Então, aqui, no lado esquerdo, é claro, é bastante evidente que você vê o bate-papo e tudo o que você está adicionando aqui, quaisquer iterações que você faça, o que quer que o bolt esteja lhe dizendo, você vê tudo aqui e todo o progresso Agora, imediatamente no lado direito. Então esse era o lado esquerdo, ok? E esse é o lado direito. No lado direito, você verá a janela em que a visualização está ativada. E tudo o que está sendo desenvolvido pela EI, isso é algo que você está vendo aqui na janela, a vida. Agora, se você quiser ver o código-fonte, você tem esse botão de código na parte superior no qual pode clicar e, clicando nele, você será direcionado para a janela do código-fonte, onde poderá ver todo o código-fonte do aplicativo. Agora, isso é exatamente como o código-fonte que você veria em sua máquina local. Agora, se você entende de tecnologia, entenderia todo o código-fonte que está escrito aqui. Está bem? Portanto, se houver alguma necessidade de acessar o código-fonte, você pode verificar o código-fonte aqui Tudo bem Então, isso é sobre isso. Você pode até mesmo ir para a tela cheia clicando nesta opção aqui. Você também pode pesquisar arquivos . Tudo bem Então, isso é sobre a janela de código. Aqui você também tem acesso ao terminal. Então você pode ver aqui, você tem acesso ao seu terminal. Então, basicamente, se quiser construir, implantar qualquer coisa manualmente, você também pode fazer todas essas coisas no terminal Mas vamos passar para a janela de visualização. E aqui você tem algumas opções no lado direito, para que você possa ver essa visualização aberta em uma guia separada. Então você pode clicar aqui e ele perguntará que, para ver sua prévia, você precisa conectar essa guia ao projeto, ok? Então, você pode dizer conecte-se ao projeto, e ele mostrará a prévia de todo o projeto aqui. Ok, então o que você está vendo lá, você vai ver aqui. Você pode ver algo assim. Você continua refrescando o casaco, desse jeito. Tudo bem Portanto, esta é a guia de visualização e, em seguida, você tem esse modo responsivo Então, isso é basicamente uma alternância que ajuda você a alternar entre a visualização móvel e a visualização para desktop Então, aqui você pode ver que isso está no iPhone 16. Então é assim que vai ficar no iPhone 16. Tudo bem, iPhone 16, Pixel nove, Galaxy 24. Ok, você pode ampliar um buraco se quiser. Então, iPhone 16, vou ampliar 200%. Ok. E é assim que você o verá no seu telefone, como no iPhone. Então, vou voltar para o desktop aqui. Aqui, você tem o inspetor. Então você pode clicar aqui e basicamente ver aqui. Eu selecionei isso e você pode ver que isso foi selecionado aqui no chat. Está bem? E você pode conversar sobre esse elemento aqui. Isso é algo que você pode fazer. Então, vou esclarecer isso. Ok. Você também pode usar a tela cheia com isso. Portanto, essas são algumas opções que você deve conhecer. Na parte superior, você tem opções para exportar. Você pode baixar o código-fonte e abrir em placas de pilha Está bem? Mas se você quiser fazer algum desenvolvimento local, pode fazer o download. Há uma guia de integração, então o Bolt oferece suporte a essas integrações agora Stripe, super base, levante-se. Talvez você veja mais integrações no futuro. Eles continuam adicionando integração, então você pode ver mais. Mas, no momento em que estou gravando isso, estou vendo umas três integrações. Tudo bem? Agora, aqui no lado esquerdo, você verá essa opção. Então, se você continuar com isso, isso vai se abrir, certo? Então você tem seus bate-papos. Então, esse é o bate-papo que estamos fazendo hoje ou o aplicativo de bate-papo, desculpe, não o aplicativo de bate-papo, mas o aplicativo gerador de código que criamos. Existe a opção de obter tokens gratuitos, para que você possa indicar usuários e ganhar tokens. Essa é uma maneira incrível de adicionar tokens à sua conta sem fazer o upgrade para o Pro, certo? Então você pode conferir isso. Você também tem configurações. Então, se você quiser modificar qualquer tipo de configuração, apareça nas configurações, agora, estou no modo escuro. Você também pode alternar para o modo de luz . Ok, você pode fazer isso. Configurações relacionadas ao editor, relacionadas à equipe, você tem tokens. Então, quais são todos os tokens que você usou. Todas essas informações virão aqui, informações do seu plano e tudo mais, basicamente, certo? Agora, chegando aos aplicativos por aqui, você viu aquela guia de integração, certo? E aqui também, você verá uma lista semelhante de aplicativos que você pode conectar aqui. Assim, você pode se conectar ao Netlife O Net Life basicamente permite que o Net life seja um servidor ou uma plataforma baseada em nuvem que pode ajudá-lo a hospedar seu aplicativo pela Internet Super Base é um serviço que ajuda você a hospedar um banco de dados SQL. E então você tem o Figma, de onde você pode inserir os desenhos e o parafuso analisará esses designs e os converterá em frio E então você também tem o GitHub. Se você quiser fazer o backup desse código-fonte ou armazená-lo no GitHub, você pode fazer isso conectando o GitHub Em primeiro lugar, o que é visualização prévia de recursos? A visualização prévia de recursos é uma opção na qual você pode ver todos os recursos futuros do Bolt. Ok, você pode acessar. Não, o primeiro recurso aqui é o DIFS. Então, o que você pode fazer é habilitar essa abordagem DIF aqui Usando essa abordagem DIF, ele editará os arquivos existentes em vez reescrever o arquivo inteiro para cada alteração, o que significa que usará menos tokens se você ativar esse modo aqui Está bem? Agora, isso só está disponível para planos pagos, então eu não tenho essa opção porque estou no plano gratuito. Razão dinâmica, então se você quiser aumentar a capacidade de raciocínio, você pode alternar isso. Está bem? Então você tem acesso à base de conhecimento. Então, aqui, você pode definir qualquer instrução específica do projeto ou qualquer tipo de instrução global que você possa definir aqui. E sim, você tem backups e rede. Então, essas são algumas dessas configurações que existem e, em seguida, você tem sua assinatura, como o tipo de assinatura que você está tendo. Então, estou no plano gratuito. Ok, se você fizer o upgrade para algo , verá seu plano atual aqui e terá a opção de sair. Está bem? Então essa é toda a interface. Na parte superior, você tem o nome do projeto, e esse projeto é privado. Você pode renomear o projeto se desejar duplicá-lo e alterar sua visibilidade aqui Então, se eu quiser renomear isso para outra coisa, lindo gerador de código, ou posso dizer aleatório ou posso dizer inspirador Gerador de código, eu posso fazer isso, certo? Então, espero que isso esteja fazendo sentido e espero que você tenha clareza na interface. 5. Criando um projeto um pouco complexo — um aplicativo de lista de tarefas!: Agora é a hora de começarmos a trabalhar em nosso segundo aplicativo, que será um pouco complexo, e esse aplicativo será o aplicativo da lista de tarefas. Portanto, é um pouco mais complexo do que o que já desenvolvemos. Está bem? Isso vai ter algumas partes móveis por aqui. E eu estou aqui nesta página principal. Você pode acessar esta página principal acessando este URL bool dot Nu ou pode ir até aqui e dizer, comece um novo bate-papo Você diz iniciar um novo bate-papo, por padrão, você será redirecionado para esta página específica aqui Então você também pode ver os históricos de bate-papo anteriores aqui , certo? Então esse é o primeiro aplicativo que criamos. Ok. Então, aqui, o que vamos fazer é adicionar um prompt que eu já escrevi. Então, estou dizendo que este aplicativo aqui ou o Boltea aqui é criar um aplicativo de lista simples de fazer O aplicativo deve ter um campo de entrada para a nova tarefa e adicionar o botão Tarefa. A tarefa adicionada deve ser exibida conforme a lista abaixo. Está bem? Agora, essa coisa em particular é uma descrição dos pensamentos que tenho sobre a aplicação em minha mente. E eu estou apenas dando essas ideias para a fuga aqui ou para qualquer tipo de inteligência artificial aqui, certo? Agora, se eu disser vá, ok, ele começará a trabalhar nisso, mas antes de fazer isso, vou aprimorar um pouco esse prompt, certo? Então, vamos aprimorar isso para que possamos obter melhores resultados. Então, ele vai improvisar e elaborar tudo o que precisamos aqui Se você quiser, você pode passar por tudo isso. Assim, você pode ver os elementos da interface do usuário. Está definindo a interface do usuário. Adicione o botão Adicionar à Tarefa claramente visível ao lado do campo de entrada. Exiba a lista de tarefas abaixo da área de entrada. Em termos de funcionalidade, ele solicita que os usuários insiram a descrição da tarefa no campo de entrada quando clicar em Adicionar tarefa Ok, cada tarefa, ao clicar em adicionar tarefa, ela é adicionada à lista Em seguida, cada tarefa é exibida como um item de lista separado. Por aqui, não permita que tarefas vazias sejam adicionadas. Portanto, esse é um tipo de validação que foi adicionada. Limpe a entrada depois de adicionar a tarefa. Assim, você pode ver como está descrevendo e como aprimorou a solicitação para nós. Em termos de design visual, ele adicionou algumas dicas aqui, e aqui você pode ver alguns aprimoramentos opcionais que ele mencionou aqui. Tudo bem Se você quiser modificar o aprimoramento opcional, você pode fazer isso aqui, mas eu não vou fazer isso Tudo bem Ou podemos manter o foco aqui. Focado. Então, deixe-nos ou vamos continuar assim. Vamos ver qual é a saída que obtemos. Eu vou dizer, vá em frente. Ok. Então, aqui eu recebi um aviso assim que eu disse, vá em frente. Então, está me dizendo que, ei, conte-nos um pouco sobre você, e você será recompensado em 1 milhão após a conclusão Então, parece que geralmente não vejo isso, mas é uma espécie de oferta ou algum tipo de trabalho de pesquisa em andamento nas fezes Então, eu posso apenas dar algumas informações sobre mim. Sou educador. Aqui e eu sou freelancer sozinho ou trabalhando para uma grande empresa. O que quer que você seja, você pode escolher aqui, e eu sou uma pessoa de nível avançado. Então, vou dizer a seguir, e estou criando produtos para mim. Vou apenas dizer a seguir. Está bem? E o que você deseja alcançar com ousadia? Então, inicie o aplicativo ou site, completo. Tudo bem E depois de fazer isso, 1 milhão de tokens serão adicionados gratuitamente à sua conta. Então, isso é incrível. Basta fornecer algumas informações sobre você e você receberá algo de graça. Ok, voltando aqui, você pode ver que ele está criando arquivos iniciais, então você pode ver todas as etapas que ele adicionou. E se você rolar para cima, ele recuou nos requisitos que você forneceu e está criando todos os arquivos Você pode ver todos os arquivos que estão sendo gerados aqui. Se você acessar o app dot TSX, ele está escrevendo todo o código que você pode ver É escrever o aplicativo dot TSX. Certo? Agora, se você for dar uma prévia aqui, ele iniciou o aplicativo e é revelador de que eu criei um aplicativo de fluxo abrangente para fazer. Então você pode ver o aplicativo aqui em cima, aqui. E aqui você pode ver que é um aplicativo de aparência decente. Para fluir, mantenha-se organizado e produtivo com seu lindo gerenciador de tarefas. Bom slogan. Eu diria, o que precisa ser feito? Portanto, tem um limite de 500 caracteres, como você pode ver, e esse limite deve mudar Quando você digita, isso é bom. Você tem esse botão de adição. Ainda não há tarefas, então você precisa adicionar todas as tarefas. Então eu acredito que uma vez que você adiciona a tarefa, a tarefa aparecerá aqui. Incrível. E aqui você vê algumas dicas como pressionar Enter para adicionar ou Escape para limpar. Incrível. Vamos testar isso. Eu vou ver trazer mantimentos. Assim, deixe-me dizer Enter. Tudo bem E eu estou recebendo esse tipo de interface de usuário aqui, onde está me dizendo para trazer mantimentos junto com essa marca de seleção E também está me dando a hora e a data de quando adicionei essa tarefa, e está categorizando isso como tarefa ativa, insana Então, está me dizendo que o total de uma tarefa que eu adicionei, ativa é uma e concluída é zero. Ok, posso dizer que preciso dizer fazer ou ir à academia. Vá para a academia, algo assim. E deixe-me marcar uma tarefa aqui. Ah, então você pode ver que bifurcou lindamente as tarefas ativas e concluídas Se isso foi fornecido em algum lugar da lista de requisitos aqui, aprimoramentos opcionais ou, aprimoramentos opcionais Implementar categorias de tarefas ou níveis de prioridade Então, isso estava lá no aprimoramento opcional. Como você pode ver aqui, ele também concluiu todos os aprimoramentos opcionais Ele adicionou uma caixa de seleção ao lado tarefa para tornar o mercado mais completo Também incluiu o botão de exclusão. Incluiu o botão de exclusão? Sim, ele tem um botão de exclusão. Incrível. Ele adicionou animações básicas ao adicionar e remover tarefas concluídas e implementou categorias de tarefas ou níveis de prioridade Portanto, essas não são nada além de categorias de tarefas, como você pode ver. E também está me mostrando o progresso por aqui. A coisa do progresso foi adicionada aqui, ok, não consigo encontrá-la, mas ela foi adicionada sozinha, eu acredito, o que é incrível. Está bem? Não acho que a questão do progresso seja adicionada aos requisitos. Então, isso é insano, ok, apenas dando algumas coisas, ele basicamente criou um aplicativo inteiro para Uma dica que eu gostaria de mencionar aqui: quando esse prompt foi gerado e você viu um aprimoramento opcional, eu não o removi Eu estava prestes a removê-lo, mas não o removi. Então, se você não está obtendo uma boa saída, se você adicionar um prompt aprimorado e houver alguns aprimoramentos opcionais adicionados, ok E a resposta ou a saída que você obteve não era desejável e não era algo que você queria. O que você pode fazer é reduzir a carga aqui, livrando-se do aprimoramento opcional e mantendo sua tarefa realmente focada Se você fizer isso, poderá esperar uma melhor saída da IA. Mas aqui no meu caso, mesmo com aprimoramentos opcionais, pude ver que a saída é realmente ótima Não vejo nenhum problema aqui, certo? Portanto, a saída é ótima, mas essa é apenas uma dica que eu quero destacar. Se você acha que o resultado não é muito bom, então você pode manter seu prompt realmente focado. Você pode manter sua opinião realmente focada no núcleo da funcionalidade que está criando e ver o resultado. Sua produção sempre será melhor. Então, podemos tentar testar isso de forma clara e completa. Está bem? Os itens concluídos foram apagados Funciona bem. Eu também posso esclarecer isso. Ok, então isso também foi esclarecido. Eu posso dizer bem ou estudar hoje. Apresentador. Ok, tarefas ativas. Acho que não sobrou mais nada para testar. Está bem? Testando. E vou ver se vou decidir. Ok, está funcionando bem, é o que eu posso ver aqui. O aplicativo está funcionando bem. E se você quiser adicionar isso na primeira versão em si, devo dizer que adicionamos uma quantidade razoável de recursos. Por exemplo, adicionar uma tarefa de remoção é o que adicionamos. A funcionalidade para realizar a tarefa é o que adicionamos. Categorização é o que foi adicionado. Há também um painel aqui, o painel de progresso, que também é adicionado em um único prompt. Então, isso é impressionante. Também há uma dica que foi adicionada. Agora, algo que eu posso acrescentar aqui é um rodapé. Então, eu posso dizer, adicione um rodapé profissional na parte inferior que fala sobre a empresa Então, posso acrescentar isso sobre a empresa e ela pode mencionar informações de direitos autorais. Algo parecido com isso. Portanto, posso dar esse tipo de solicitação aqui e você pode modificá-la com base em seus requisitos. Não vou aprimorar esse prompt, certo, porque é apenas um rodapé, e vou apenas enviar isso ou fornecer isso como uma entrada Então, vamos ver que é revelador, está adicionando o rodapé profissional aqui e está criando esse componente Então, você pode ver que, se clicar nisso, ele está criando esse componente. Está escrevendo esse código. Se você clicar aqui, verá que ele está escrevendo completamente esse código e você pode vê-lo ao vivo. Então, uma vez escrito isso, ele atualizará o aplicativo dot TSX Você pode ver que o arquivo inteiro está sendo atualizado aqui. Então, vamos esperar até que isso aconteça. Então isso está feito. Tudo bem E aqui você pode ver todas as coisas que foram feitas aqui. Por isso, adicionou informações da empresa, links rápidos, contatos por e-mail e links de mídia social. Então, deixe-me rolar para baixo e ver: Ok, informações da empresa aqui são adicionadas e links de mídia social como este. Então, deixe-me ver essa tela inteira. Opa, não essa parte. Então, é melhor eu ficar bem, a prévia acabou. Então, vou abrir isso em uma nova guia e me conectar ao projeto. Ok. E aqui. Tudo bem, então é assim que parece ou aparece aqui Então, está vindo verticalmente aqui. Está vindo verticalmente para cá porque esse espaço a área ou o tamanho dessa janela são muito menores É por isso que eu o abri em uma aba diferente para ter uma ideia. Parece decente. Você pode iterar aqui se quiser E aqui, o que você pode fazer é tentar trabalhar nisso, ok, você pode ver, eu sou. Ok, então você pode ver que isso parece bom. É um aplicativo decente, eu diria, certo? E se você verificar a capacidade de resposta disso no iPhone 16. Então, vamos verificar os dispositivos móveis. Eu vou fazer com que isso seja 100%. Então, em dispositivos móveis, ok, deixe-me diminuir um pouco. Então, se estiver em 90%, você pode ver que é assim que parece, certo? É decente o suficiente. Ok. Portanto, a saída que obtivemos é bastante decente para a versão 1.2, e estou feliz com isso, certo? Sem escrever uma única linha de código, você pode ver o poder das ferramentas de IA agrupadas Espero que isso tenha sido útil. 6. Desenvolvimento iterativo com o Bolt.new: Agora é hora de começarmos a falar sobre desenvolvimento iterativo Então, aqui temos essa versão 1.2 ou qualquer versão que você chame esse aplicativo específico. Haverá situações em que você desejará melhorar certas coisas, adicionar novos recursos ou remover determinados recursos Então, isso é algo que você pode absolutamente fazer aqui com a ajuda do chat. Agora, aqui, você pode ver esse botão de adição. Digamos que eu não goste desse botão de adição e eu possa identificar o modelo de IA aqui, para que eu possa melhorar ou aprimorar o botão de adição para dizer adicionar texto. Ok, algo assim e dê uma cor melhor. Então, eu posso dizer algo assim. Posso aprimorar a solicitação aqui para torná-la muito mais elaborada, para que eu obtenha uma resposta melhor Então você pode ver aqui, ele elaborou isso e deixe-me enviar isso Vamos ver o que acontece. Tudo bem. A saída definitivamente será a melhor. Então você pode ver que ele está atualizando esse arquivo específico aqui. Vamos esperar um pouco. Assim, você pode ver que a atualização foi concluída. Ele descreveu a atualização e aqui adicionou esse texto do anúncio, certo? E agora, se eu disser, vá para a academia, você pode ver o botão se abrir. Então, definitivamente é uma melhoria em relação ao que tínhamos no início. Obviamente, não descrevemos muito nas mudanças, mas se você tiver algum tipo de requisito específico ou esquema de cores específico a ser usado, você pode definitivamente mencionar isso aqui ao fornecer a opinião. Tudo bem? Agora, qualquer tipo de problema que você encontrar, haverá cenários em que você também encontrará problemas Por exemplo, se eu for até aqui no modo responsivo, e se eu for para o iPhone 16 e se eu ampliar um pouco, você pode ver que há essa sobreposição de texto aqui, certo? Portanto, há uma sobreposição de texto no campo de entrada se você entrar no modo responsivo Então, o que vou fazer é comunicar melhor esse problema, vou apenas tirar uma captura de tela e colar aqui Assim, você pode simplesmente fazer uma captura de tela, salvá-la no seu dispositivo e publicá-la aqui usando essa opção de upload, ou você pode fazer essa captura de tela diretamente e colá-la aqui Isso é algo que você também pode fazer. E você pode ver, então eu descrevi meu problema. Eu já disse que, ei, dê uma olhada na dica na caixa de saída Desculpe, dica na caixa de entrada. Não é legível no modo responsivo e funciona bem no desktop, mas não em dispositivos móveis como o iPhone 16 Então, quanto mais você puder elaborar, melhor será o resultado , certo? Então, acho que elaborei bem, vou apenas dizer envie e vamos ver se é possível resolver isso para nós Vamos esperar um pouco até que ele termine o processamento para nós. Então você pode ver aqui, ele atualizou o aplicativo, e aqui está a descrição de qual atualização ele fez. E agora você pode ver que essa caixa de texto tem largura total. Ok, então se você ler as mudanças que ele fez, ele adicionou melhor espaçamento, fácil toque e separação clara Então, se você digitar alguma coisa aqui, isso é melhor. Vá para a equipe. Você pode ver em dispositivos móveis, vai ficar legal. E se você adicioná-lo, ficará bem. Sem problemas como tal. Então, em dispositivos móveis, também está funcionando bem. Vamos verificar também no desktop. Nada está quebrado, então nada está quebrado. Está parecendo bom. Então, sim, as mudanças foram boas, e é assim que você pode repeti-las Agora você pode, mesmo sabendo o que vimos aqui, corrigimos problemas. Fizemos algumas melhorias. Agora, se você quiser adicionar qualquer tipo de recurso aqui, você pode adicionar mais recursos. Então, por exemplo, se eu quiser editar a lista de duas coisas, eu definitivamente posso fazer isso também. Então, aqui posso dizer, por favor, adicione funcionalidade para eu editar 22 que foram adicionadas. OK. E eu posso aprimorar isso e nos deixar ver como é o aprimoramento Assim, você pode ver, acessá-lo ID ou pelo identificador exclusivo como entrada. Permita que os usuários modifiquem os dois, faça descrição do título e a data de vencimento Portanto, não há data de vencimento aqui, nem descrição, e nível de prioridade também não está lá. Então, vou me livrar disso. Valide as informações editadas antes de salvá-las e salve-as aqui, mensagem de confirmação, resolva quaisquer erros retorne o item de tarefa atualizado após a conclusão da edição Vamos ver se isso vai bem. Então, eu dei isso como entrada, vamos esperar um pouco. Então, as atualizações foram feitas. Você pode ver o que foi atualizado aqui. Ele adicionou o ícone Editar. Há uma validação, botões de cancelamento de salvamento e feedback visual. Ok, então vamos testar isso. Então, vou adicionar um Tulu, ir para três. Tudo bem Agora vamos até aqui e há um ícone de edição. Incrível. Vou clicar em Editar. Você pode ver que já está no modo de edição, vá para a academia hoje e veja salvar aqui. No momento em que você diz Salvar, você pode ver se a leitura foi concluída com sucesso. É ótimo. E você pode melhorar isso. Eu posso editar isso novamente. Você pode ver. Isso é decente. Agora, se você não quiser que a mensagem apareça aqui ou que a mensagem apareça na parte inferior, você pode fornecer todo esse tipo de entrada aqui e corrigir isso Mas eu estou bem com isso. Isso está parecendo incrível. E eu acho que é bom. É uma boa saída que obtivemos até agora com base nas entradas que fornecemos. Tudo bem, então espero que você tenha entendido todo o processo. Espero que você também entenda o quão poderosas essas ferramentas podem ser. 7. Como integrar o banco de dados no Bolt.new: Então. Agora é hora de começarmos a falar sobre dados em nosso aplicativo. Portanto, esse é o aplicativo que criamos até agora. Está aberto aqui na nova guia. Também está aberto aqui como uma prévia. Mas aqui em nosso aplicativo, estamos gerando dados. Dados, o que significa que há alguns dados gerados pelo usuário , como tarefas, as tarefas concluídas. Os dados também estão sendo atualizados, porque uma vez que os dados estão sendo gerados, há uma provisão em nosso aplicativo para permitir que os usuários atualizem os dados, ele pode marcar os dados como concluídos ou marcar a tarefa como concluída. Portanto, os dados também estão sendo atualizados, criados e excluídos. Tudo isso está acontecendo. No momento, esses dados estão sendo armazenados localmente em nosso navegador, certo? E você pode conferir isso, ok? Se você rolar até aqui logo no primeiro prompt. Esse é o primeiro prompt que eu dei para criar o aplicativo de lista de tarefas. E uma vez que demos o aviso, você pode ver aqui, depois entender todos os recursos, própria IA ou Bolt AI mencionou que usará a persistência de armazenamento local, que significa que todos os dados, a lista de tarefas, tudo o que você está gerando aqui sendo armazenados no próprio navegador Então, se você fizer uma atualização, deixe-nos fazer uma atualização. Vou ter que me conectar ao projeto. Estamos conectados ao projeto e você pode ver que os dados não persistem aqui Agora, se eu adicionar alguma tarefa , deixe-me primeiro mostrar onde os dados estão sendo armazenados. Então, vou mostrar uma maneira rápida de como você pode ver os dados na janela do Chrome. Então você precisa clicar com o botão direito do mouse para inspecionar. Então, isso pode parecer um pouco opressor para o público não técnico, mas espere aí. Você não precisa experimentar isso. Só estou tentando explicar um conceito. Aqui você precisa clicar nas setas e aqui ir para o aplicativo Agora, aqui no aplicativo, você tem todas as informações de armazenamento que estão acontecendo no navegador. Clique no armazenamento local e selecione sua URL. Portanto, esta é a URL do seu aplicativo, selecione essa opção. Agora, aqui, você verá todas as informações sobre todas as informações que estão sendo armazenadas para esse aplicativo no navegador. Agora, isso não está visível claramente, então vou clicar nisso e levar isso para o final. Então, isso está muito melhor agora. Então você pode ver aqui. Ok, e eu vou fechar isso. Eu também vou fechar isso. Eu também vou me livrar do console a partir daqui. Ok, então isso é justo. Agora você pode ver as tarefas aqui. Então, se você expandir isso um pouco, você pode ver todos que estão vazios. Certo? Então você pode ver que é assim Todos estão sendo gerenciados em nosso aplicativo. Ele está sendo armazenado no navegador. Agora, se eu tentar adicionar alguma tarefa, eu digo, vá até Jim, se eu disser Enter, você pode ver há um ID exclusivo aqui. A mensagem é vá para Jim. Está marcado como concluído? Não, então isso está marcado como falso aqui. Você pode ver. Portanto, está bem claro que é assim que os dados estão sendo gerenciados em nosso aplicativo. Então, eu apenas diminuí o zoom para que você possa ver isso bem e deixe-me expandir isso para que você possa ver aqui Concluído, criado em, ID e texto. Tudo isso está lá por aqui. Agora, no momento em que eu marcar como concluído, se eu marcar como concluído, você verá que a atualização concluída está definida como verdadeira. Agora, essa não é a maneira ociosa pela qual os aplicativos de nível de produção gerenciam dados Você não pode gerenciar dados no navegador, certo? E se amanhã, digamos que você feche esta sessão e tente acessar esse aplicativo do seu celular. Os dados estão localizados no navegador, então esses dados não aparecerão no navegador móvel. Agora, como você conserta isso? Então, para corrigir isso, aplicativos de nível de produção usam um banco de dados hospedado em algum lugar na nuvem. Agora, aqui, se você vier, aqui temos essa guia de integração, e há uma integração que o Bolt nos permite fazer com o Super Base Então, Super Base, podemos usar o banco de dados Super Base em nosso aplicativo e configurá-lo aqui. Agora a pergunta é: o que é Superbase? Então, o que eu recomendaria é que você acesse seu mecanismo de pesquisa favorito e pesquise por Super Base, ou acesse superbs.com diretamente Então, se você abrir essa aba aqui, você pode ver que este é o site oficial do Super Base, e o Super Base é a plataforma de desenvolvimento do PosCRS. O que é PosCRS O PosGRS é um fornecedor de banco de dados. Tudo bem, existem vários fornecedores de banco de dados disponíveis no mercado, como Pascris SQL, então você tem o MySQL, você tem o SQLLit Portanto, a Posgris é uma das fornecedoras de banco de dados. Então, o Superbs faz uso do Poscris e está hospedado na nuvem, e você pode iniciar seu projeto com o banco de dados Poscris, autenticação, APIs instantâneas, função H, tudo e você pode iniciar seu projeto com o banco de dados Poscris, autenticação, isso Poscris e está hospedado na nuvem, e você pode iniciar seu projeto com o banco de dados Poscris, autenticação, APIs instantâneas, função H, tudo isso que ele oferece. Agora, a melhor parte é que você pode rolar para baixo e explorar todos os recursos, certo? Espero que você esteja claro sobre o que é Super Base. Isso nos permitirá armazenar nosso banco de dados. Into the Cloud, que está hospedado, ok? E esse banco de dados será um banco de dados remoto. Ele persistirá nos dados estelares. Então, amanhã, se você adicionar uma tarefa aqui neste navegador e tentar acessar o mesmo aplicativo do seu celular, os dados que você adicionou serão mostrados, desde que estejam vinculados à sua conta. Está bem? Então, espero que isso esteja fazendo sentido. E a partir de agora, o que está acontecendo é que o estamos armazenando localmente, como eu demonstrei isso para você. Se você não conseguir fazer isso em sua máquina ou se estiver usando outro navegador, não se preocupe. Essa foi apenas minha maneira de mostrar como os dados estão sendo armazenados localmente. Então, eu queria provar e mostrar como os dados estão sendo armazenados no próprio navegador. Então é isso que está sendo usado aqui. Então isso está feito. Vou fechar essa aba. Pode parecer avassalador se você não for programador. Então, vindo aqui, vamos integrar o Super Bs em nosso aplicativo e todos os dados que estão em nosso aplicativo e sendo armazenados, todas as tarefas, tudo está sendo armazenado, tudo será armazenado em um banco de dados em nuvem que será criado para nós e não será armazenado no navegador. Agora, para fazer isso, teremos que falar com bolt e, aqui, vou dizer que persista todos os dados em nosso aplicativo em um banco de dados, e vou aprimorar esse prompt Portanto, ele elaborará esse requisito e o tornará melhor Assim, você pode ver aqui, identificar e mapear todos os dados, implementar tabelas de banco de dados apropriadas com relacionamentos, usar as melhores práticas e incluir tudo isso A solução deve ser escalável e tudo isso. Foi elaborado. Sua elaboração pode ser diferente da minha, mas vou enviar isso Não vou modificar isso e nos deixar ver como isso funciona. Agora, o problema aqui é que ainda não integramos uma super Base em nossa conta. Também não temos uma conta que criamos com o Super Base. Então, vamos ver como esse processo funciona se você for um novo usuário do Super Base. Não tenho uma conta no momento e vou te ajudar. Então, vamos ver. Então, aqui, o que ele está fazendo é criar um script de migração na pasta de migração, superbs Migrations, e nomeou esse arquivo, algo assim Vou esperar um pouco até que todas essas etapas sejam concluídas. Então, depois de um tempo, ele criou alguns arquivos. Demorou algum tempo e criou muitos arquivos que executam certos comandos e iniciou o aplicativo. Mas no lado direito, estou vendo algum erro, o que é bom. Agora aqui, se você rolar para baixo, está me dizendo que está solicitando uma conexão com o Superbase Então, está me avisando e o que vou fazer é precisar uma nova conexão com o Superbase . Sim, eu preciso. Então, o que eu vou fazer é vir aqui, vou dizer no data Bese Então, clicarei nessa opção aqui e serei imediatamente direcionado para este site chamado subbase.com, o site que acabamos Agora, aqui, se você tiver uma conta, você pode entrar. Se você não tiver uma conta, você pode se inscrever. Você não será cobrado nada. Você não precisa de nenhum tipo ou não precisa gastar nenhum tipo de dinheiro, é o que quero dizer. Se considerarmos os preços, eles têm um nível gratuito generoso, o que deve ser suficiente para lançarmos e validarmos nossas ideias, certo? Portanto, esse é um plano gratuito. Isso é o que vamos usar. E o que vou fazer é inserir minhas informações, tudo aqui, e criar a conta. Depois de inserir o e-mail e a senha, você será solicitado a verificar o e-mail. Então faça essa verificação e nos vemos lá. Agora, quando cliquei no link de confirmação no e-mail de confirmação, fui solicitado a autorizar o acesso à API para o bolt Então, Bolt aqui está tentando se conectar à minha conta Superbse e está solicitando todas Eu só vou dizer criar uma organização. Então, vou continuar com as permissões. E para isso, criaremos uma organização. Agora você pode inserir o nome da organização aqui. Ok, então eu vou dizer FaslSog aqui. Você pode inserir o nome que quiser, selecionar o tipo, o plano. Estamos em um plano gratuito. Não precisamos gastar nada. Eu direi para criar uma organização. E vamos esperar um pouco. Então, ele está pedindo isso de novo, e eu direi autorize. Então, ele está se conectando ao parafuso e você pode ver que a conexão foi estabelecida com sucesso Agora, se você vier aqui, ele me mostrou um pop-up informando que você precisa selecionar seu projeto Super Bs Data Bs ou Super Bees Portanto, o SuperBSPject deve estar conectado ou criado, basicamente, se você não Então, vou criá-lo porque ainda não tenho nenhum projeto. Então, eu vou dizer que o nome do meu projeto é fazer app, algo assim. Você pode inserir a senha. Vou apenas inserir ou gerar algum tipo de senha. Ok. Portanto, certifique-se de que sua senha seja forte o suficiente aqui, e aqui você também pode ver a opção de gerar senha. Então, acabei de clicar nisso. Está bem? Então, no momento em que você clicar nele, ele gerará uma senha de banco de dados para você e você poderá selecionar a região. Vou apenas mantê-lo padrão e você poderá ver como criar um projeto. Agora, o projeto será criado automaticamente, e não tínhamos , não fizemos muitos esforços aqui. Então você pode ver aqui que a integração está concluída. Você pode ver que o Supervase está instalado. E aqui você pode ver, ele está conectado ao banco de dados. Está conectado ao Superbase, está conectado ao projeto, configurou a autenticação Ele criou o banco de dados e finalizou essa configuração. Tudo isso está feito e agora ele está me pedindo para criar o esquema do banco de dados, então vou dizer aplique e vamos esperar Então, ele está aplicando a migração do banco de dados, ok, a migração do banco de dados não foi aplicada corretamente, e aqui ele também me mostrou esse pop-up. Portanto, ele identificou algum problema e está me dando a opção de tentar corrigi-lo. Então, é claro, vou dizer tente consertar, e vou deixar que conserte. E também chegaremos a esse erro no lado direito, mas espere aí. Então, está consertando isso. Está fazendo isso sozinho. Vamos esperar um pouco até que essas correções sejam aplicadas. Então, ele aplicou algumas mudanças aqui, e meu aplicativo foi recarregado Ainda não vejo o aplicativo funcionando. Ainda vejo um erro, mas ele está solicitando que eu conclua a migração, então vou dizer aplicar, e ele está me mostrando alguns problemas aqui, então vou tentar corrigi-lo. Então, ele identificou o problema que eu estava vendo no lado direito e está tentando corrigi-lo. Então você pode ver todos esses erros que ele está me mostrando. Então esse foi o erro que estávamos vendo no navegador. Então, uma vez que o problema anterior foi corrigido, ok, a correção anterior foi clicada aqui como tentativa de correção Estou vendo outro problema novamente, então estou clicando novamente nessa tentativa de correção. Então, vamos ver quantas iterações existem para resolver todos os O que está acontecendo aqui é que ele está detectando os problemas em si e está me pedindo para corrigi-los Então, vou fazer isso e repetir para obter o produto final Então, depois de algumas iterações e clicar em tentar corrigir algumas vezes, pude ver o problema no lado direito corrigido, e agora estou vendo outro problema, que é esse problema Então, vou apenas dizer que tente consertar. Então, agora todos os problemas foram corrigidos. Eu recebi alguns pop-ups aqui me perguntando se, ei, esse problema foi identificado e corrigido. Então eu fiz isso algumas vezes, e agora todos os problemas identificados, para que você possa ver aqui. Todos esses problemas já foram corrigidos, se você der uma olhada no chat. Está bem? E vemos essa página de login. Tudo bem Portanto, não pedimos ao Bowl que adicionasse autenticação. Mas como você está adicionando o banco de dados, ele adicionou a autenticação por si só. Além disso, se você rolar os bate-papos para cima e ver a partir do ponto em que solicitou que ele adicionasse o banco de dados ao aplicativo, perceberia que havia uma menção, como Bolt mencionou, que também está adicionando autenticação porque, você sabe, aqui estão todas as funcionalidades que estão sendo Gerenciamento da sessão do usuário, pesquisa de senhas. E isso está sendo adicionado pelo próprio Bolt sem que saibamos, porque estamos adicionando um banco de dados, e cada tarefa deve ser associada ao usuário no final do dia, certo? Porque você quer gerenciar a sessão. Portanto, se você estiver fazendo login pelo navegador deverá ver suas tarefas no navegador e, se estiver fazendo login pelo telefone, deverá ver suas tarefas ali. E isso só pode ser feito se suas tarefas estiverem associadas a uma conta. Tudo bem Então, isso foi resolvido pelo próprio parafuso. Agora, o que eu vou fazer é dar uma olhada no discurso. Ainda não tenho uma conta. Então, o que vou fazer é dizer inscreva-se aqui e vou inserir meu e-mail aqui. Vou inserir a senha também. Ok. E eu vou dizer que se inscreva no 123, e eu vou apenas dizer criar uma conta. Então, a conta é criada, voltei para a página de login e , na página de login, digitei meu e-mail e a senha, e vou ver o login aqui. Tudo bem Então, o login está concluído. Agora, esse e-mail que estou usando é um e-mail fictício e não meu e-mail real aqui Está bem? Acabei de criar isso com o propósito deste curso. Então aqui, eu me inscrevi com este e-mail fictício, e agora você pode ver aqui, esta é a nossa página principal do aplicativo que você vê, certo? E se você vier para a Super Base agora, vamos ver se as informações da nossa conta estão sendo armazenadas na conta Super Base. Então, aqui, eu vou para a barra lateral e aqui no banco de dados Vamos ao banco de dados. Então, no banco de dados, se você for às tabelas. Ok, então você pode ver por cima do seu visualizador de esquemas, que lhe dará uma visualização de quais esquemas quais Então, aqui você pode ver as preferências do usuário em que você tem ID de usuário e tudo Isso armazena a preferência do usuário. Então você tem que fazer tags, então você tem que fazer, e depois fazer categorias. Então, todas essas informações estão sendo armazenadas no banco de dados. Se você for às mesas, você vai ver as mesas aqui. Você pode ver todas essas tabelas. Agora, onde está a tabela de usuários? Portanto, a tabela de usuários que você não encontrará aqui no banco de dados. Você precisa ir para a autenticação. Então, na autenticação, você verá esta tabela. Você verá os usuários aqui no lado esquerdo. No lado direito, você pode ver os usuários que estão sendo criados em seu aplicativo. Então, este é um usuário, que é um usuário usando o qual acabei de me inscrever, e você pode ver que isso acabou de ser criado. Esse é meu ID de usuário, certo? Então você está vendo algumas informações aqui. Agora, vamos ao banco de dados. Vamos para as mesas. E aqui você está vendo algumas mesas por aqui. Ok. E se você for para todos, ok? Então, se você for ver no Editor de tabelas, então vamos para o Editor de tabelas. Então, aqui você pode ver agora todos os dados que residem nessas tabelas Está bem? Isso está lá no editor de tabelas. Agora, vamos adicionar um tu do e ver se o Todo está sendo adicionado aqui. Então eu vou vir aqui. E aqui, eu vou dizer, digamos, vá até ele. Algo parecido. Você pode adicionar qualquer tarefa. Eu vou dizer Enter. Ok, então estamos vendo Todo sendo adicionado. E se você vier aqui, tudo bem, ainda não vemos nenhuma atividade Temos uma maneira de nos refrescar aqui? Então eu vejo o Todo em cima. Acabei de clicar nessa tarefa e ela recarregou os dados aqui Você pode ver. Vá para a academia conforme apareceu. Então você tem que vir aqui. Vamos adicionar mais uma tarefa. Vou dizer para ir ao Market, algo assim. Venha até aqui. Você não verá Gudo MakeTueo aqui. Clique em Todos. Ok, ou troque assim. Ok, eu não vejo os dados aqui em cima. Talvez esteja demorando um pouco para carregar os dados, ou deixe-me atualizar aqui Ok, então eu deveria ver o Goodomrket, então você terá que fazer uma atualização completa se os dados não Então, sim, isso está chegando aqui, e você pode ver que está vinculado ao meu ID de usuário. Esse é o Todo ID. Tudo está sendo armazenado no banco de dados, certo, criado e atualizado e, todas as informações que estão sendo armazenadas e preenchidas estão marcadas como falsas. Portanto, ainda não está completo. E se você completar qualquer um dos Too, por exemplo, se eu concluir o GoodoGym aqui Então essa é a tarefa concluída. E se você vier aqui e eu atualizar isso, vou ver se o GoodoGym está concluído, marcado como verdadeiro . Você pode ver. Portanto, ele também está sendo atualizado no banco de dados e o banco de dados foi adicionado. Tudo bem E você pode ver o esforço que fizemos agora para adicionar o banco de dados. Esse banco de dados existe na nuvem na nuvem, ou seja, na Internet. Não está localmente em nosso sistema. Está lá na Internet. E se você implantar seu aplicativo pela Internet amanhã, esse banco de dados será seu banco de dados de produção. Está bem? Então, espero que isso esteja fazendo sentido e espero que você possa acompanhar tudo o que fizemos. Agora, qualquer tipo de iteração ou qualquer coisa que você queira fazer aqui, você pode absolutamente mandar Bol fazer aqui Mas isso tem sido incrível até agora, e você também tem um botão Sinnot aqui Você pode ver as informações do seu sinal com o botão Sinnot. Deixe-me abrir isso em uma guia separada aqui. Vou conectar o projeto. E você pode ver como isso aparece. Ok, então eu só tenho que entrar novamente, ok? Ok, então você pode ver aqui ou você pode ver aqui. Tudo bem, então está me dizendo para migrar suas tarefas. Descobrimos que suas tarefas estão salvas localmente. Você gostaria de migrá-los para a conta? Ok, então migrar a migração também é uma funcionalidade que foi adicionada aqui Portanto, se o usuário não tivesse a conta, isso permitiria que o usuário migrasse Então, basicamente, depois de atualizar o aplicativo, se esse aplicativo foi implantado, basta clicar em Migrar e todas as tarefas serão adicionadas à conta Então, vamos ver. Tudo bem, boa academia. Então, provavelmente antes, eu tinha adicionado o GoTo Jim. É por isso que está sendo adicionado duas vezes. E deixe-me deletar isso, então eu vou deletar este GoTo Jim. Ok. Então você pode ver que está tudo funcionando bem. Então, espero que você tenha conseguido acompanhar e espero que tenha achado isso muito útil. 8. Como implantar seu aplicativo para produção: Fizemos um progresso decente em nosso aplicativo, e o que agora gostaríamos de fazer é implantar esse aplicativo pela Internet, e eu gostaria de dizer que gostaria de compartilhar esse aplicativo, a URL, com todos os meus amigos. Mas posso compartilhar o URL e tudo mais com meus usuários, amigos ou com quem eu quiser compartilhar Qualquer pessoa pela Internet pode acessar esse aplicativo? A resposta é não. Ele reside na sua conta aqui e não é um URL público Então, aqui, se eu copiar esse URL, esse é o URL do nosso aplicativo. E se eu abrir um novo modo de navegação anônima ou uma sessão de navegador convidado, vamos tentar acessar Então, você verá que está me perguntando que, para ver sua prévia, você precisa conectar essa guia ao projeto, que significa que você precisa estar autenticado e fazer login em sua nova conta ousada Então, se eu disser conectar o projeto, você verá que não foi possível encontrar o projeto. Então, precisamos fazer login. Portanto, meus amigos não terão ou meus usuários ou qualquer pessoa na Internet não terão acesso à minha conta. Não vou compartilhar credenciais com todo mundo, certo? Então, como resolvemos isso? Então, a resposta para isso é teremos que implantar esse aplicativo publicamente ou eu não deveria dizer publicamente. Temos que implantar esse aplicativo pela Internet. Temos que fazer uso de um provedor de hospedagem. Então, vou dizer ao Bolt New que faça isso. Então, vou dizer aqui, implante esse aplicativo para mim. Você pode simplesmente inserir esse prompt. Acabei de mandar isso para implantar. Instruções de implantação limpas. Vamos ver o que isso faz. Tudo bem, eu não aprimorei esse prompt. Vamos ver qual é a saída que ele me dá. Eu vou te dizer, bold faz uso do Netify. Como você pode ver, vou implantar seu aplicativo no Netlify para você. Agora, o que é o Netlify Vou apenas selecionar isso. pesquisar o Netlify aqui . O que é Net leaf? Se você for ao Netefy, vou apenas lhe dar uma introdução. Ele permite que você hospede seus aplicativos da web e é muito simples. É uma plataforma muito fácil de usar , é o que devo dizer aqui. E você pode ver que muitas implantações foram feitas, mais de 35 milhões Ele está sendo usado por 7 milhões de desenvolvedores. Portanto, é definitivamente uma das soluções mais populares disponíveis, e você não precisa pagar por isso. Ele oferece um plano generoso gratuito. Então, aqui você pode ver que há um site decente Como eu tenho muitos, eu uso muito o Netliee e tenho alguns sites hospedados lá gratuitamente. Se você está fazendo alguma coisa aqui, você pode usar o Netlifee gratuitamente você pode usar o Netlifee gratuitamente . Você não precisa pagar nada. Você só pode pagar depois escalar e precisar de recursos profissionais. Então, precisaremos do Netlify aqui. Você pode ver aqui que está nos solicitando a implantação de nosso aplicativo no Netlife Então, se você rolar até aqui, você pode ver que estou construindo e implantando Então, ele executou alguns comandos aqui. Ele construiu nosso site usando alguns comandos e disse: Estou criando e implantando seu aplicativo no Netlify, e isso criará uma versão pronta para produção de seu lindo aplicativo para fazer com todos os recursos e tudo O site foi implantado com sucesso. Portanto, ele já implantou o site aqui nesta URL Então, deixe-me acessar esse URL. Sim, ele foi implantado. Você pode ver aqui, esta é uma URL pública. Então, se você tentar abrir esse aplicativo aqui em outra guia, você verá isso. Portanto, essa é uma URL pública. É um URL do Netlify. E deixe-me dizer uma coisa: não temos um nome de domínio mapeado aqui Certo? Não temos um nome de domínio mapeado aqui porque não fizemos isso, certo? Portanto, esse é um URL público, que nos é fornecido pela Ntlefy e, com a ajuda do bolt, temos esse O ND implantou esse aplicativo no Netlify e está nos dizendo para transferir esse projeto do Netlify para esse projeto do Netlify Você pode usar esse URL para reivindicar este aplicativo. Então, vou clicar nesse URL aqui, e ele vai me levar até aqui. Então, esse aplicativo foi implantado, ele disse, e você precisa reivindicá-lo para movê-lo para sua conta, certo? Então, se você clicar no botão de reclamação, curta o URL da reclamação aqui , fornecido pela Bolt Você verá esta página de login porque precisa se autenticar aqui Agora, se você não tem uma conta Netlify, tudo bem. Você pode clicar em se inscrever e criar sua conta. Mas eu tenho uma conta aqui. Sou usuário do Netlify, então vou fazer login. Se você não tiver uma conta, sinta-se à vontade para se inscrever. processo de inscrição é muito fácil e não custará nada. Então você pode ver aqui, eu entrei na minha conta Netlify Se você se inscreveu, verá algo assim aqui, reivindicará seus aplicativos ousados no Netlify ou, se você se perder aqui após o processo de inscrição, o que você pode fazer é clicar nesse URL novamente Certo? Então eu vejo esse mapa de reivindicações, e eu vou ver mapas de argila Então, está dizendo que está reivindicando aplicativos e o aplicativo foi reivindicado e transferido para minha conta aqui. Você pode ver. Ele é implantado a partir do Bolt aqui, e esta é uma época em que foi publicado, e a partir daqui, você pode até mesmo abri-lo em pool Assim, você pode ver o tipo de integração que eles estão tendo com Netefy e essa é a URL que você capturou E se você quiser mapear qualquer domínio, digamos que eu comprei um domínio, todo list dot app, por exemplo, ou todo app.com. Este é um domínio que eu comprei. Você pode acessar o Gerenciamento de domínio. E você pode adicionar o domínio aqui, e você terá que ler os documentos aqui, como você pode adicionar um domínio personalizado ou seu próprio Domínio personalizado, o que significa que você pode adicionar seu próprio domínio, seu aplicativo. Você terá que seguir estas etapas se clicar aqui. Nós lhe daremos as etapas, e você poderá segui-las e adicionar seu domínio aqui. Está bem? Então é isso que é, e você está recebendo isso aqui. Então, se você tentar acessá-lo aqui, verá que vai funcionar. Se eu abrir isso em uma guia diferente aqui, você pode ver que está funcionando aqui, deixe-me fazer login usando a conta que eu criei aqui. Algo assim, você pode ver, eu entrei e posso ver minhas tarefas aqui também Esta era uma nova seção do navegador Se você se lembra, eu a abri no modo de adivinhação. Eu me autentiquei usando minha conta e os todos que adicionei junto com as ruas Tudo está sendo salvo no navegador, ou desculpe, não no navegador, mas no aplicativo, usando o banco de dados. E onde quer que eu faça login, vou ver a mesma coisa. Mesmo se eu fizer login do meu celular usando esse URL, ele funcionará para mim. Portanto, nosso aplicativo agora está disponível em produção, é o que quero dizer aqui. E tanques especiais para ousar, certo? Bold executou o trabalho com muita facilidade. Então, aqui você pode ver que essas também são todas as integrações que você pode fazer Então, eu não vejo o Netlify aqui, mas na verdade não conectamos conta bolt com o Netlify, mas o implantamos no Netlify e reivindicamos mas na verdade não conectamos a conta bolt com o Netlify, mas o implantamos no Netlify e reivindicamos o projeto aqui. Foi isso que fizemos. Espero que isso tenha sido útil e espero que você tenha sido capaz de entender o poder da IA e como ferramentas como o PLT podem, você sabe, facilitar sua vida e como você pode testar suas ideias ou fazer muitas coisas com todo esse conhecimento Espero que isso tenha sido útil. 9. Conclusão do curso: E agora chegamos à conclusão de nossa jornada, onde aprendemos como criar aplicativos de nível de produção com a ajuda da inteligência artificial e de ferramentas como o bolt dot Nu Ao longo dessa jornada, exploramos como essas ferramentas permitem que você crie aplicativos reais prontos para produção sem escrever em uma única linha de código Começamos entendendo o que é bool dot new e nos familiarizamos com sua interface e seus recursos intuitivos A partir daí, você criou seu primeiro aplicativo gerado por IA, experimentando em primeira mão como o desenvolvimento orientado por bailes pode ser simples Em seguida, subimos de nível para criar um aplicativo de lista de tarefas no qual começamos a mergulhar no desenvolvimento iterativo com IA, aprendendo como refinar e expandir seus projetos Em seguida, você viu como integrar o banco de dados ao seu aplicativo e desbloqueou o armazenamento e a recuperação de dados com isso Você também aprendeu como implantar seu aplicativo na produção, e isso permitiu que seu aplicativo fosse acessível pela Internet. E se você tem algum tipo de ideia que deseja levar para o mundo, essa é a melhor maneira de criar seu protótipo de aplicativo e implantá-lo junto com um banco de dados completo e compartilhá-lo com Lembre-se de uma coisa: esse é apenas o começo O desenvolvimento novo e orientado pela IA está evoluindo a cada dia, e há mais para explorar Eu encorajo você a continuar experimentando os conceitos de aplicação, novas ideias de produtos, refinando seu fluxo e compartilhando suas criações com Obrigado por se juntar a mim nessa jornada sem código e baseada em IA. Espero que este curso tenha inspirado você e deixado você confiante para continuar criando, iterando e lançando ideias inovadoras de aplicativos mais rapidez e consistência do que nunca Com essa aula, você também encontrará um projeto de classe na seção de projetos. Vocês podem ir e conferir, e eu recomendo que todos concluam o projeto e o compartilhem com toda a turma. Até lá, Happy Building e eu mal posso esperar para ver o que você criará a seguir.