Como criar aplicativos e sites com IA | Um guia prático de programação no Vibe

1. Boas-vindas ao curso: Vivemos em uma época em que o lançamento de produtos lucrativos está mais acessível do que nunca. Você não precisa de um orçamento enorme. Você não precisa contratar ninguém e, definitivamente, não precisa saber programar. Isso significa que você é freelancer, administra uma agência, cria uma startup ou apenas alguém com uma ideia de produto, mas não tem ideia de como criá-la Este curso é para você. Oi, todo mundo. Eu sou Adi. Neste curso, mostrarei como criar um aplicativo web funcional real, que você possa realmente usar ou até mesmo vender sem escrever uma única linha de código. Agora, eu não sou um desenvolvedor de back-end, e criar algo assim com autenticação de usuário, bancos de dados reais e uma interface de usuário limpa normalmente exigiria uma equipe ou meses de aprendizado Mas hoje, vamos fazer isso em menos de uma hora simplesmente conversando com a IA, e existem muitas plataformas baseadas em IA, e eu testei algumas. Para este curso, estamos usando o HostingerHizons, e o que o destaca é que ele foi construído pela HostingerHizons e está no mercado de hospedagem há mais de 20 anos, atendendo a quase 4 milhões de pessoas em todo atendendo Então, quando eles prometem lidar com domínios de hospedagem e escalabilidade, eles realmente têm a infraestrutura para respaldar isso Criaremos o aplicativo passo a passo orientando a IA com instruções, criando a estrutura básica, refinando a funcionalidade, ajustando layouts e aprimorando os recursos à medida criando a estrutura básica, refinando a funcionalidade, ajustando layouts e aprimorando os recursos à O projeto, um gerenciador de faturas simples, mas funcional para freelancers Ele permite que os usuários façam login, gerenciem clientes, gerem faturas e até mesmo as baixem como PDFs E sim, integraremos Superbse para autenticação do usuário e armazenamento seguro de dados em toda a interface de IA É necessária a codificação de back-end. Ao final deste curso, você saberá como falar com uma IA para criar aplicativos web ou sites úteis, como estruturar seus prompts para obter melhores resultados, como integrar ferramentas como Super Base sem habilidades aprofundadas e como criar produtos reais rapidamente Então, aquela ideia que você tem aquela que você continua dizendo que construirá algum dia, bem, você pode lançá-la hoje Chega de desculpas por não ser técnico o suficiente ou não ter o orçamento ou a equipe Vamos começar. 2. Tour rápido do Hostinger Horizons: Tudo bem, então antes de entrarmos no modo de criação de aplicativos, deixe-me fazer um rápido tour pela HostingerHorizon, para que você entenda com o que estamos trabalhando Horizons é basicamente como ter um desenvolvedor, designer e redator em uma IA Basta conversar com ele e ele cria sites e aplicativos web reais completos com bancos de dados, contas de usuário, processamento de pagamentos, tudo mais Existem outras plataformas que funcionam da mesma forma, mas o que diferencia a Hostinger é que tudo está integrado Você não precisa de hospedagem separada, serviços de e-mail, certificados SSL, Hostinger cuida de tudo Então, quando estiver pronto para o lançamento, você poderá gerenciar seu domínio e hospedagem na mesma plataforma, em vez de fazer malabarismos com vários Com isso dito, deixe-me mostrar como começar. A primeira coisa que você precisa fazer é criar uma conta gratuita na Hostinger Então você precisa acessar tohstinger.com e clicar em Minha conta. Isso abrirá uma página que permite criar uma conta ou fazer login com a existente. Agora, eu já fiz isso. Depois de fazer login, você será direcionado ao seu painel. Onde você pode controlar toda a sua experiência de hospedagem. Agora, para começar a usar o Horizons, você pode clicar em Horizons aqui na barra lateral esquerda Se você tiver projetos existentes criados com o Horizons, eles serão listados aqui Caso contrário, basta clicar em Adicionar projetos. Como alternativa, você pode ir diretamente para hoizons dothstingor.com e Agora, a interface aqui é muito, muito simples. É aqui que você escreve o prompt e, na verdade, existem três maneiras de se comunicar com a IA. Você pode fazer isso via chat. Você pode fazer isso fazendo upload de uma imagem ou usando a voz, o que é muito legal Agora, o Horizons realmente suporta mais de 80 idiomas. Assim, você pode pensar e falar em sua língua nativa, o que é simplesmente fantástico. Agora, só para dar uma ideia de como isso funciona, vamos criar uma demonstração bem simples, certo, um projeto de teste simples só para entender as coisas. Então, aqui, eu vou dizer, crie uma landing page para um SAS chamada Time Tracker, e eu não vou dar mais detalhes Então, vou clicar em Enviar e a IA começou a fazer seu trabalho. Na verdade, é uma IA muito comunicativa. Acabei de me dizer, vamos. Estou prestes a criar uma incrível landing page SAS do Time Tracker, que me diz exatamente o que está fazendo E isso vai demorar um pouco, enquanto a IA constrói todas as páginas e toda a questão do design. E você pode ver aqui que ele está trabalhando nisso. Você tem algumas dicas aqui que você pode percorrer enquanto espera. E já que estamos esperando, eu só quero dizer que essa plataforma realmente se integra a muitos serviços como PayPal, Stripe, super Base e até mesmo o Google AdSens Então, isso realmente lhe dá a opção de criar aplicativos muito complexos, e você realmente experimentará isso neste curso quando usarmos integração do Superbase para autenticação de usuários e armazenamento seguro para nosso aplicativo de faturamento Tudo bem, então a IA parece ter terminado. Isso me diz que, pronto, seu incrível rastreador de tempo, landing page do SAS está pronta para impressionar E vamos ver o que isso criou. E deixe-me realmente redefinir o Zoom aqui para que possamos ver tudo. Então, desse jeito, ele criou uma landing page a partir de, tipo, uma frase que eu dei , completa com animações Até tenho tabelas de preços aqui, botões, e ele criou tudo, desde texto até imagens e layout. E você pode até mesmo ir em tela cheia com isso e visualizá-lo. E você também pode conferir a visualização móvel. Portanto, ele cria layouts responsivos por padrão, mesmo que eu não tenha pedido isso , o que é muito legal Então, isso é o que ele fornece por padrão. Agora, é seu trabalho revisar o que ele criou e começar a mudar as coisas e adaptá-las ao que você precisa que esse projeto seja Além disso, se você detectar erros falhas no layout, basta apontá-los para a IA e ela fará o possível para corrigi-los. Por exemplo, se eu rolar para baixo até a área de preços, podemos ver que o selo mais popular aqui está abaixo do cartão de preços, e eu não quero isso Então, vamos realmente dizer isso à IA. Vou dizer que descobri um erro. O selo mais popular na seção de preços fica abaixo do cartão de preços e precisa estar acima dele Por favor, conserte isso. Entre e agora a IA interpretará isso e fará o possível para resolver esse problema. E, na verdade, vai conversar com você. Isso vai te contar daqui a pouco. Você entendeu. Estou me esforçando para fixar imediatamente o selo mais popular na seção de preços Desta vez, vou ficar perfeitamente acima do cartão. Então, vamos ver se ele realmente faz isso. Ok, então a IA me disse que tudo está feito. Vamos dar uma olhada. E, com certeza, agora está acima da tabela de preços. E você pode então continuar e, você sabe, pedir que ele faça alterações adicionais. Por exemplo, se você quiser que isso sobreponha ao cartão de preços, basta pedir que ele faça isso, e deve ser uma solução muito fácil Ou se houver outras alterações que você gostaria de fazer, sei lá, no layout, nas cores, na tipografia, você pode perguntar o que quiser, basicamente, e ele fará isso Agora, supondo que agora você tenha um produto com o qual esteja satisfeito, a próxima etapa é publicar e deixe-me abordar isso rapidamente Você precisa ir para o canto superior direito aqui e clicar em Publicar. Na verdade, o Hostinger Horizons permite que você publique seu projeto em um subdomínio temporário gratuito, aquele que você vê aqui Para mim, para este projeto, é verde claro, números verdadeiros, números, dot hosting site.com E você sempre pode clicar aqui para ver seu site ao vivo. E isso é ótimo se você quiser apresentar seu trabalho para, sei lá, seus clientes, suas partes interessadas, sua equipe, você tem um link ao vivo que pode usar para mostrar a eles o que você fez. Além disso, você pode adicionar um domínio personalizado. E é por isso que eu disse anteriormente que o hostinger meio faz tudo por você porque mesmo que você não tenha um domínio atualmente, você pode comprá-lo através do hostinger e depois aplicá-lo ao seu projeto Aqui, você não precisa ir a outro lugar para fazer isso e depois voltar e fazer toda a atribuição de domínio Está tudo incorporado, e acho que isso é uma grande vantagem. E outra coisa que eu queria mencionar antes de concluirmos as coisas : se você ficar preso em algum momento ou precisar de ajuda na configuração, você pode obter ou precisar de ajuda na configuração, você pode obter assistência 24 horas por dia, 7 dias por semana, da equipe de sucesso do cliente da Hostinger Portanto, não hesite em contatá-los para qualquer coisa relacionada ao suporte. Tudo bem, agora que você viu como o Horizons é intuitivo para projetos simples, vamos abordar algo mais ambicioso como nosso aplicativo de gerenciamento de faturas Isso será abordado na próxima lição. 3. O que estamos criando: Como mencionei anteriormente, estamos criando um aplicativo de gerenciamento de faturas, um projeto que aborda desafios do mundo real, como autenticação de usuários, bancos de dados e integrações desafios do mundo real, como autenticação de usuários, de terceiros Se você pode construir isso, você pode construir praticamente qualquer coisa. Deixe-me primeiro explicar o aplicativo que estamos buscando e, em seguida, mostrarei como criar um prompt sólido para iniciar a IA Isso é o que eu escrevi como minha ideia de aplicativo de fatura. Você sabe, escrevendo rapidamente meus pensamentos, você pode pensar nisso como apenas um despejo cerebral, basicamente, apenas escrevendo ideias rapidamente Então, eu quero fazer esse aplicativo, como uma ferramenta de fatura para freelancers, e estou pensando em chamá-lo de Bill freelance, talvez Não precisa ser sofisticado, apenas funcional. Os usuários precisam fazer login, talvez via Superbse. Em seguida, eles podem adicionar clientes e fazer faturas. O aplicativo precisa de um painel com uma lista de faturas e talvez algumas estatísticas, como receita total, número de clientes, faturas de gastos, etc Cada fatura tem um número de prefixo. Vai aumentar automaticamente, algo como INV, 001, 002, etc Agora, ao criar uma fatura, quero poder selecionar o cliente em um menu suspenso. Quero ter itens de linha que tenham uma descrição, a quantidade, o preço, assim como qualquer outra fatura O total da fatura deve ser atualizado automaticamente. Posso definir o status de cada fatura como nova, que é o padrão enviado ou pago, e gostaria de poder baixar o PDF da fatura E talvez mais tarde eu possa adicionar funcionalidade de e-mail para que eu possa enviar a fatura aos clientes diretamente do aplicativo Além disso, gostaria de uma página para os clientes. Eu gostaria de adicionar, editar e excluir clientes e preciso de algumas informações básicas para isso, como nome, e-mail, telefone e endereço. E eu também gostaria uma página de configurações onde eles pudessem inserir as informações da empresa e também alterar o prefixo da fatura Layout limpo, talvez com uma barra lateral de navegação e, muito importante, todos os dados estão vinculados ao usuário de login Então é nisso que estou pensando para o aplicativo. É como um plano aproximado. Definitivamente, não é uma boa ideia para um aviso, porque está meio que em todo lugar. E ao escrever instruções de IA. Você precisa fazer isso de uma forma específica se quiser obter os melhores resultados. E eu vou te dar algumas dicas e truques para isso ao escrever o prompt para este projeto. Então, vamos criar um novo projeto ou um novo documento de texto, devo dizer, para o prompt, e vamos começar. primeira dica é começar com um objetivo claro e dizer exatamente o que você quer construir e o que ele deve fazer. Por exemplo, crie um aplicativo web para freelancers gerenciarem e enviarem faturas Então, em nosso exemplo, a primeira frase seria mais ou menos assim. Olá, gostaria de criar um aplicativo web para freelancers chamado Freelance Bill. O aplicativo deve ajudar os usuários a gerenciar clientes e faturas em um só lugar Portanto, uma descrição muito clara do que queremos alcançar. Depois disso, devemos listar os principais recursos como peças curtas digitalizáveis E usar marcadores é uma ótima ideia. Portanto, para os recursos principais, eu gostaria de fazer login e autenticação seguros , usar o Superbse, criar uma visualização, editar e excluir faturas e clientes, baixar faturas como PDFs e, finalmente, todos os dados serem vinculados aos Essas são as características mais importantes. Depois disso, podemos começar a descrever as páginas que queremos que a IA crie. E no meu caso, eles se parecem com isso. Então, eu quero uma página de painel que tenha uma tabela mostrando todas as faturas com ações de edição e exclusão E também quero algumas estatísticas gerais que me mostrem o número total da fatura, a receita total, o total de clientes e também o valor pendente A segunda página é a página de edição da criação da fatura ou o formulário da fatura, como eu a chamo Então, eu gostaria de selecionar um cliente, adicionar vários itens de linha para descrição, quantidade, preço unitário, calcular automaticamente os totais, gerar automaticamente o número da fatura com prefixo personalizado e dar alguns exemplos do que quero dizer com isso E também gostaria da opção de selecionar o status da fatura, nova enviada ou paga Em seguida, na página de clientes, gostaria de uma lista de todos os clientes com a capacidade de adicionar, editar e excluir. Cada cliente tem nome, e-mail, endereço de telefone. Então, como você pode ver, eu sou muito detalhado na minha descrição do que eu quero alcançar e como eu quero que essa página em particular se pareça. Por fim, a página de configurações, que contém as informações pessoais ou da empresa usadas como remetente nas faturas, e também a capacidade de definir um prefixo personalizado para os prefixo personalizado E, finalmente, adicionei algumas notas técnicas. Eu disse, use o Superbse para autenticação do usuário e armazenamento de dados, e também adicionei algumas preferências de design, se elas forem importantes, Eu disse que o design deve ser limpo, moderno, responsivo e usar um esquema de cores claras No final, eu disse: vamos começar gerando a estrutura básica e a interface do usuário, e vou refinar tudo passo passo nas instruções de acompanhamento Isso não é necessário, mas achei que é uma boa adição. Então, essa é a aparência do prompt final. Partimos dessa ideia de aplicativo, que era apenas uma coleção aleatória de pensamentos, basicamente, para um prompt mais estruturado que informa à IA o que queremos criar e os objetivos desse projeto Então, com isso feito, vamos copiar essa solicitação e voltar para o Horizons, colá-la e começar a criar nosso aplicativo de faturamento Vamos embora. E enquanto isso está funcionando, há outra coisa que eu queria mencionar, e você pode pensar nisso como uma prática recomendada. Não tenha medo de iterar, certo? Você não precisa deixar tudo perfeito desde a primeira tentativa. Você tem que tratar isso como uma conversa com a plataforma. A IA, basicamente. Então, comece estabelecendo as bases para seu aplicativo e depois repita. Em seguida, adicione recursos, faça alterações. Como eu disse, trate isso como uma conversa. É a melhor coisa que você pode fazer. E aqui está outra ótima dica, na verdade, da Hostinger dessa vez Portanto, para obter os melhores resultados, mantenha suas mensagens simples, curtas e focadas em uma mudança por vez. Então, quando você quiser fazer alterações, não escreva uma mensagem que diga: Bem, mude isso e depois mude aquilo e, em seguida, faça outra alteração nesses elementos. Faça uma alteração por vez. Isso não confunde a IA dessa forma. E também será mais fácil para você depurar e testar tudo, porque ao criar coisas com plataformas como essa, você descobrirá que precisa fazer muitos testes, certo? Depois que a IA faz uma alteração específica, você pede que os dois testem e vejam se ela foi implementada corretamente. E, em alguns casos, você precisa testar e ver se essa alteração específica não afetou outras partes do aplicativo ou suas funcionalidades. Então, você sabe, é um processo, mas definitivamente é melhor que contratar uma equipe de pessoas, gastar grandes orçamentos na criação de um aplicativo e, o mais importante, passar semanas e meses Com esse tipo de codificação de vibração, acho que é muito fácil fazer isso sozinho Então, estamos quase terminando onde a IA está quase terminando de construir nossa base para o aplicativo. Estou muito curioso para ver o que ele construiu. Ok, tudo pronto, parece que seu aplicativo de cobrança freelance está pronto para arrasar Deixe-me saber se você gostaria de algum ajuste. Ok, então vemos uma página de login muito simples, basicamente, porque no prompt que eu dei, eu disse que, ok, os usuários precisam estar logados para fazer qualquer coisa no aplicativo Portanto, a primeira etapa lógica é pedir que os usuários façam login. Assim, podemos inserir nosso e-mail, nossa senha e, se clicarmos nesses links, eles simplesmente mudarão do login para criar uma conta. Também temos uma pequena introdução aqui ao aplicativo com os principais recursos básicos, basicamente. Ainda não funcionará porque não temos uma integração ativa com o Superbse. A IA até me disse aqui que quando você estiver pronto para fazer o upgrade para o Super Base para autenticação segura e armazenamento de dados, precisará concluir essas etapas. Então, que tal fazermos isso a seguir? Porque, você sabe, integrar o Super Base é provavelmente a coisa mais técnica que temos que fazer para esta construção Então, nos vemos na próxima lição. 4. Integrando o Supabase e fazendo o teste inicial: Ok, então Super Base, o que é? Bem, simplificando, é uma plataforma de desenvolvimento. Você pode encontrar mais informações sobre isso acessando superbs.com Não vamos entrar em muitos detalhes porque, honestamente, eu também não sei muito sobre isso Por profissão, eu não sou um desenvolvedor de back-end, então, na verdade, nunca usei o SuPabse No entanto, com ferramentas de IA como Hosting ou Horizons, isso não me impede de criar um aplicativo com ele, porque conectá-lo ao seu projeto Horizons é muito simples Então, aqui está como você faz isso. Você está de volta aqui na plataforma Horizons e iria para o canto superior direito, e iria para o canto superior direito onde diz integrações Você clicaria nele e selecionaria SupaBse. Ele ainda permite que você adicione inscrições de usuários, logins, armazenamento de dados e outros recursos de back-end Então vá em frente e clique aqui, ele solicitará que você selecione uma organização e um projeto. Agora, eu já tenho algumas definidas aqui porque fiz alguns testes anteriores com o Super Base. Mas quando você usar isso pela primeira vez, terá uma aparência diferente para você. Essencialmente, o que você precisa fazer é criar uma organização. Para mim, é chamado Hostinger Horizons Org. Você pode chamá-lo do que quiser. E depois de criar isso, você pode criar um novo projeto. Então, vamos fazer isso juntos agora, e isso levará você ao site da Super Base, onde você precisa fazer login. Se você não tiver uma conta, basta criar uma. É grátis. Vou clicar em Inscrever-se agora e vou inserir um endereço de e-mail e uma senha, e vou clicar em Inscrever-se. Então, agora temos que verificar nosso e-mail para confirmar o registro. O e-mail é mais ou menos assim. Basta clicar em Confirmar endereço de e-mail. E nesta etapa, Super Base vai realmente me dizer para criar uma nova organização. Claro, vamos fazer isso. Eu vou dizer a equipe da Audi Pessoal, por enquanto, posso selecionar o plano gratuito. Isso é ótimo para a maioria das pessoas que estão apenas começando. É mais do que suficiente. Então, vamos clicar em Criar organização. E então eu vou selecionar essa organização, e vou chamar o projeto de Freelance Bill. E podemos definir uma boa senha aqui, e ela será usada para o banco de dados real. Em seguida, você pode selecionar a região mais próxima de seus usuários e fazer isso para obter o melhor desempenho. Eu moro na Europa, então vou selecionar o U central e criar um novo projeto. Ok, legal. Então, uma vez que isso é feito dentro do Superbse, precisamos voltar a hospedar nossos Horizons e fazer uma atualização E então precisamos voltar aqui para Integrações. Clique em Sup Base Em seguida, clicaremos em adicionar outra organização porque eu quero adicionar a que acabamos de criar. E aqui eu vou ver um pop-up pedindo para autorizar o acesso à API para Hosting ou Horizons, e vou selecionar a organização da equipe de Addis que acabei Então, vou clicar em Autorizar Hosting Horizons. E agora essa nova organização está conectada. E eu posso ver o projeto freelancer Build e simplesmente vou clicar em Conectar aqui na barra lateral Ok. E ele vai pedir uma confirmação, e eu vou clicar novamente, conectar. E, ao fazer isso, na verdade, dei um aviso à IA e disse: por favor, conecte minha fatura de freelance do SuperbasePject ao meu site e recebi Obviamente, conectarei seu SuperbasePject ao freelancer Bill imediatamente, e isso permitirá a autenticação segura do usuário e armazenamento robusto de dados E nesse momento, a IA realmente configura tudo para você. Ele define as tabelas do banco de dados, você sabe, para faturas, clientes e configurações Ele integra a autenticação Super Base para login e inscrição seguros e muda do armazenamento local para o Superbse para todo Tudo bem Portanto, agora tudo deve estar totalmente conectado e eu devo ter acesso ao meu aplicativo, além de poder criar contas e fazer login. Então, vamos ver se esse é o caso. Vamos começar acessando a página de inscrição. Vou inserir meu nome completo no Pod. E vou inserir meu e-mail como Adi Pordla gmail.com, vou inserir uma senha e clicar em Criar conta Então, vamos ver se isso funciona, se isso funciona. Ele me deu uma notificação dizendo que, opa, desapareceu Conta criada, basicamente. Então, agora vamos para a página de login. Clique em Entrar. E diz que o e-mail não foi confirmado. Ok, também temos alguns erros na plataforma. Diz que é um erro superbásico. Diz que o e-mail não foi confirmado. Vamos ver se eu realmente recebi um e-mail de confirmação. E eu fiz. Diz: confirme sua inscrição, então vamos confirmar isso Agora recebo um erro de recusa de conexão do host local. Ok, isso é realmente comum com o Super Base. Eu fiz algumas pesquisas sobre o assunto, e esse é um dos problemas que você pode enfrentar ao construir algo assim. Então, aqui está como você conserta isso, certo? Você volta para a Super Base, você vai para a autenticação. Você acessa a configuração de URL e aqui pode ver que ela está atualmente configurada para o host local 3.000 Você precisa alterar isso para o endereço real do seu site. Então, para isso, voltamos para Horizons. Sim, publicamos isso para que possamos obter esse URL e, você sabe, podemos abri-lo e ver nosso site. E podemos copiar isso sem a parte de login, e podemos voltar para a Super Base. Podemos colar isso e salvar as alterações. Ok, então, em seguida, precisamos reenviar esse e-mail de confirmação. O problema é que só é enviado uma vez. Então, aqui está o que faremos. Vamos gerenciar usuários no Super Base, e eu vou selecionar isso, e vou dizer excluir um usuário. Então, agora vamos voltar para nossa plataforma. Vamos fazer uma atualização rápida. E vamos nos inscrever, mas vamos usar um endereço de e-mail diferente desta vez. Então, vou usar este e criar uma conta. Ok. Nada aconteceu ainda. Vamos dar uma olhada na Super Base para ver se temos, sim. Isso foi adicionado e agora devemos verificar o link de verificação no e-mail . Então, vamos fazer isso. E com certeza, temos um link de confirmação para esse endereço de e-mail. Vamos confirmar. Então isso nos levou a algum lugar. Se voltarmos para a Super Base e atualizarmos, agora veremos esse login quando isso acontecer Agora, o e-mail está confirmado e devemos conseguir fazer login no aplicativo. Então, vamos voltar para Horizons aqui. Vamos clicar em Entrar. Então, agora eu recebo um erro de aplicativo da web detectado. Peça à Horizons que corrija esse erro para você. Então, vamos pedir que ele conserte isso. Ok, então, aparentemente, está tudo corrigido e me diz que o layout agora está usando corretamente a autenticação Superbase, e eu limpei os arquivos antigos Bem, que tal isso? Então, o que temos aqui fatura freelance, painel, clientes, nova fatura e configurações Ok, e depois algumas informações da conta. Mas antes de prosseguir, gostaria de testar a funcionalidade de login e logout para ver se ela funciona corretamente Então, vou clicar em Sair. Legal. Ok, então isso me leva de volta à página de login. Então, vamos escolher minhas credenciais ou inserir minhas credenciais, mais uma vez, fazer login E sim, sucesso. Então, isso parece estar funcionando muito bem. E isso é, na verdade, um pouco brilhante demais para mim. Então, antes de prosseguirmos, vamos realmente mudar nossa declaração original e criar esse aplicativo usando um esquema escuro. Então, vou falar com a IA novamente e vou dizer que mudei de ideia. Use um esquema de cores escuras para o aplicativo com uma cor de destaque, digamos, verde menta, porque era um pouco brilhante demais para meus olhos Isso também nos dá a oportunidade de testar esses tipos de mudanças de design porque alterar o esquema de cores de um aplicativo como esse é uma tarefa muito grande Leva algum tempo se você fizer isso manualmente, como você pode ver, a IA faz isso em um período muito curto de tempo. Não passou nem um minuto desde que eu pedi que ele fizesse isso. Então, vamos ver o que aconteceu. Ok, retoques finais. E pouco antes de terminar, ele realmente me disse que, caramba, parece que um erro incômodo entrou nos arquivos JSX do cliente, e eu vou desvendá-lo imediatamente e colocá-lo de volta em perfeito estado de funcionamento ele realmente me disse que, caramba, parece que um erro incômodo entrou nos arquivos JSX do cliente, e eu vou desvendá-lo imediatamente e colocá-lo de volta em perfeito estado de funcionamento . Interessante Então, enquanto gerava, ao mudar o esquema de cores , percebeu aquele erro de sintaxe em um dos arquivos e o corrigiu Tudo bem Então isso é o que temos muito melhor, não perfeito, obviamente. O designer e eu notamos imediatamente as coisas que deveriam ser consertadas, mas, você sabe, eu não dei indicações precisas sobre como isso deveria ser Acabei de contar, usei um esquema de cores escuras, e ele fez isso. E parece ótimo por enquanto. Também gosto da escolha da cor. Isso é bom. Temos algumas animações muito sutis aqui. E sim, então este é o painel que mostra o total de faturas, receita e valor pendente de clientes Legal. Clientes. Ainda não há clientes com a capacidade de adicionar. Nova fatura. Eu posso selecionar o cliente dessa lista. Posso selecionar o status, novo envio pago, exatamente como eu disse no prompt. Temos a data da fatura. Temos uma data de vencimento, legal, e depois os itens da linha, e eu posso adicionar quantos deles eu quiser. E, em f, clique em Cancelar, me leva de volta ao painel e, em seguida, às configurações, informações da empresa, endereço de e-mail, endereço comercial e configurações da fatura Eu tenho o prefixo do número da fatura. Posso criar uma fatura? Eu preciso criar um cliente primeiro, na verdade. Vamos adicionar nosso primeiro cliente. Digamos que cliente um, e-mail, cliente one@gmail.com. Telefone, endereço, cliente, um endereço. Vamos adicioná-lo. Legal. Então isso foi adicionado. E então vamos voltar ao painel, criar uma fatura. Ok, diz: Nenhum cliente encontrado, nenhum cliente encontrado. Portanto, um teste inicial mostra que a maior parte está funcionando, mas temos algum trabalho a fazer sozinhos. Na verdade, vamos voltar para a Super base e vamos para o banco de dados. E aqui, ele realmente nos mostra a estrutura de nossos bancos de dados. Portanto, temos uma tabela para faturas. Temos um para configurações e outro para clientes, e você pode ver como eles estão interconectados Então, por exemplo, cada fatura tem um ID de cliente, certo, que é diretamente, deixe-me mostrar isso a você O ID do cliente na tabela de faturas está vinculado à ideia do cliente real. Sim, interessante. Ok, então tudo parece estar bem aqui. Vamos voltar às mesas. E se formos até os clientes aqui e visualizarmos no editor de tabelas, sim, podemos ver o cliente que acabamos de criar no aplicativo. Podemos ver o nome, o e-mail, o telefone, o endereço e quando ele foi criado. Portanto, o link com o Superbse funciona perfeitamente. E isso é tudo que eu queria ver agora. Provavelmente concluímos a parte mais complicada do processo, que foi a integração da superbase. Agora, vamos refinar o aplicativo passo a passo e fazer as alterações necessárias para que ele chegue ao estado desejado Começaremos a fazer isso na próxima lição. 5. Como corrigir erros e refinar o layout: Ok, então os objetivos desta lição são testar as seguintes coisas. Posso criar faturas adequadamente e vinculá-las a clientes específicos Posso alterar as configurações corretamente e aplicá-las às faturas E posso associar faturas e configurações dos clientes ao usuário de login, o que significa que, se eu criar um novo usuário, os dados desse usuário serão totalmente diferentes Essas são as coisas que eu quero testar nesta lição. Então, vamos começar com as faturas. Como mostrei na lição anterior, criamos um cliente com sucesso, mas quando queríamos criar uma nova fatura, não pudemos selecionar um cliente na lista suspensa Então, vamos dizer isso exatamente à IA. Ao criar uma nova fatura, a lista suspensa de clientes fica vazia, embora eu tenha criado clientes com sucesso e pronto A IA me diz que, Ei, você viu isso, minhas desculpas Parece que deixei um fio desconectado entre os dados do seu novo cliente Superbase e o formulário da fatura Sabe, eu gosto da forma como essa IA se comunica. É muito educado, mas tem um senso de humor ocasional Então, vamos esperar que ele corrija esse erro. E observe que eu só perguntei uma coisa por solicitação. Essa é uma prática recomendada que eu encorajo você a usar também. Então a DAI me diz que está tudo resolvido. Então, vamos ver, clique em Nova fatura, selecione o cliente e, com certeza, agora ele me permite selecionar um cliente Vamos realmente criar um novo cliente aqui, cliente dois. Vamos adicionar isso. Isso foi adicionado com sucesso. Agora vamos voltar à nova fatura e podemos escolher entre o cliente um e o cliente dois Incrível. Ok. Então, cliente um, nova fatura, data de hoje, data vencimento da fatura Digamos que os itens da linha do final do mês. Digamos, não sei, um vídeo do YouTube. Uma quantidade, digamos $100. Também podemos usar isso para incrementar? Nós podemos. Mas o valor do incremento aqui não está certo porque apenas incrementa as casas decimais dessa Isso é algo que precisamos corrigir, mas não é algo urgente. Também podemos atualizar a quantidade aqui. Dois, e ele atualiza automaticamente o total, o que era um dos meus requisitos. Legal. Então, vamos criar uma fatura Ok. A nova fatura foi criada com sucesso, mas na verdade não me mostra a fatura aqui na lista Vamos contar isso. Vou dizer que criei uma fatura, mas o aplicativo não a mostra na seção de faturas recentes E, você sabe, eu cometi um pequeno erro de digitação onde eu disse que não importa com a IA, porque ela entende o que você está tentando dizer Ah, hein. Então, aparentemente, o painel ainda está procurando faturas no antigo local de armazenamento , em vez do novo banco de dados Superbse que acabamos E é por isso que sua nova fatura não está aparecendo. Cool. Então, também indica que é por isso que não está funcionando. Deixe-me consertá-lo. Eu gosto disso. Isso é legal. E isso consertou isso. Super legal. Faturas recentes, agora posso ver a fatura que acabei Legal. Vamos criar outro. Desta vez, vamos selecionar o cliente dois. Novo. Vamos definir a data de vencimento para Não sei, 7 de agosto. Vamos adicionar dois itens de linha desta vez. Então, vamos fazer um curso no YouTube por $2.000 e adicionar um serviço de marketing, sei lá Um por 1230 $9. Ok, então o total é calculado corretamente. Vamos criar uma fatura. Bom. Ok, então isso atualizou a lista de faturas recentes Também atualizou o valor pendente aqui, o que é bom. Então essa é a soma total das faturas. Tenha dois clientes, receita total zero. Acho que isso será atualizado quando as faturas forem marcadas como pagas Depende de como a IA criou a lógica por trás disso, e eu tenho duas faturas no total Legal. Ok, então eu posso criar novas faturas Eu posso criar novos clientes. Vamos ver se podemos editar uma fatura específica ou um cliente. Vamos começar com os clientes aqui. Digamos que eu vou atualizar o endereço longo do cliente dois e vou dizer o endereço longo do cliente dois em vez do endereço. Portanto, atualize o cliente, as informações do cliente foram atualizadas com sucesso. Isso é bom. Agora, se eu voltar ao painel e editar a fatura dois, digamos que eu mude o curso do YouTube para 5.000 e atualize a fatura E sim, isso parece estar se atualizando perfeitamente. Se eu editar isso e alterar o cliente, também funcionará muito bem. Vamos alterar o cliente novamente e atualizar o status para enviado em vez de novo. Sim, isso também funciona, e o bom é que a IA usa essas pílulas aqui cores diferentes, dependendo do status. Essa é uma mudança muito boa. Vamos editar a fatura um, marcá-la como paga e ver como isso se reflete Ok, então isso agora se reflete no verde e a IA agora atualizou a receita total. Portanto, a receita total é composta pelos valores das faturas pagas, enquanto o valor pendente, como deveria ser, é baseado no valor das faturas que foram enviadas ou novas E o que é interessante sobre isso é que eu não especifiquei isso para a IA. Não solicitei essa funcionalidade, mas ele sabia, certo? Sem que eu precise dizer exatamente como isso deve funcionar, é muito intuitivo. Então, ele sabia exatamente como isso deveria funcionar. Isso torna as coisas muito mais fáceis quando a IA encontra você no meio do caminho Ok, então vamos voltar às metas desta lição. Eu disse que queria testar se, você sabe, eles podem ser editados, o que eles podem. Além disso, se as configurações estiverem funcionando corretamente. Então, vamos realmente alterar essas configurações. E vamos começar com as configurações da fatura porque, por padrão, o prefixo da fatura é INV, mas vamos alterá-lo para AD, digamos, ou ADR E vamos salvar as configurações. Então, agora, quando eu crio uma nova fatura, estou realmente curioso para ver o número e o prefixo da fatura porque, normalmente, na minha cabeça, o número da fatura deve ser incrementado automaticamente com base na última fatura, mas agora eu deveria estar usando o novo prefixo que eu o E eu não especifiquei isso para a IA, mas estou curioso para ver se ela realmente implementou isso sozinha. Então, vamos selecionar o cliente dois e, digamos, blá, com um preço de dez, criar a fatura. Nossa, legal. Ok, então isso criou a fatura ADR 003. Portanto, ele não apenas usou o novo prefixo que eu dei, mas também continuou o número da fatura de onde parou Super cool. Ok, vamos realmente excluir essa fatura Tem certeza de que deseja excluir essa fatura? Essa ação não pode ser desfeita? Ok. Mas por que estou recebendo uma notificação do navegador em vez de uma notificação no aplicativo? Então, vamos clicar em OK, a fatura foi excluída com sucesso Então, agora, se eu criar um novo, digamos um cliente. Oh, entrada inválida. Na verdade, não consegui ver isso, mas acho que é porque não consegui selecionar a data de vencimento. Ok. Então, vamos voltar aos erros. Erro superbásico. Vamos copiar isso. E vamos pedir à IA que conserte isso. Recebi esse erro e vou pedir que ele torne a data de vencimento um campo obrigatório porque esqueci de escolher a data de vencimento Então, isso por meio de um erro. E para evitar isso, não preciso necessariamente depender da IA o tempo todo. Eu posso dizer, Ei, torne esse campo obrigatório. Isso deve resolver quaisquer problemas que possamos ter no futuro. Ok, então, aparentemente, tudo está feito, o erro foi eliminado e a data de vencimento agora é um campo obrigatório, exatamente como você queria, me diz a IA Ok. Vamos ver se esses ajustes funcionam. Então, vamos criar uma nova fatura. Sim, selecione o cliente. A data de vencimento agora é obrigatória, mas o que acontece se eu clicar em Criar fatura agora Está bem? Então me diz, por favor, preencha este campo. Na verdade, ele preencheu automaticamente a data de vencimento. Interessante Ok. Então, vamos fazer isso. Vamos fazer isso. Crie uma fatura Ok, então isso é o que eu queria testar originalmente. Se eu excluir uma fatura, por exemplo, a fatura 003, e criar uma nova, a IA ainda usará esse prefixo 003, que deveria, ou ir para 004, porque tínhamos uma fatura anteriormente com esse número, mas ela porque tínhamos uma fatura anteriormente com esse número, por exemplo, a fatura 003, e criar uma nova, a IA ainda usará esse prefixo 003, que deveria, ou ir para 004, porque tínhamos uma fatura anteriormente com esse número, mas ela fez a coisa certa. Ele usou 003. E vamos criar outro porque eu estava curioso sobre essa data de vencimento. Então, aparentemente, ele preenche automaticamente essa data de vencimento com o último dia do mês atual O que, eu acho, é bom para mim. E acho que, por enquanto, isso vai funcionar muito bem. Assim, presumo que eu possa adicionar, editar e excluir clientes. Na verdade, não testei a exclusão do cliente. Então exclua. Sim, então funciona. Assim, posso editar a exclusão em clientes e faturas e alterar o prefixo Agora, a última coisa que quero testar é se os dados que foram criados aqui, as configurações de faturas dos clientes, estão vinculados ao usuário de login E para isso, basta criar um novo usuário e criar novos dados para ele. E quando trocamos de usuário, só devemos ser capazes de ver os dados associados ao usuário específico, se isso fizer sentido. Então, vamos sair. Agradável. Isso também atualizou a tela de login. Eu gosto disso. Vamos nos inscrever, criar uma nova conta aqui. E vou usar um endereço de e-mail aleatório que tenho para testar e vou criar uma conta com isso. Então, agora eu deveria estar recebendo um e-mail. Sim, isso funciona. Confirme. Então, agora vamos fazer login com essas informações. Portanto, não temos faturas. De qualquer tipo. Não temos clientes. E quando vamos para as configurações, tudo aqui está vazio, exceto as configurações, dizem que o número do prefixo da fatura é ADR, mas isso é algo que eu adicionei recentemente para o Então, vamos resolver isso. E vou apenas dizer que, quando um novo usuário for criado, use INV como prefixo padrão da fatura Tudo bem, então vamos ver se isso funciona. Portanto, este é um novo usuário e, com certeza, temos o INV. Bem, isso é bom. Ele também preencheu automaticamente o e-mail que eu usei para me inscrever, e acho que não estava lá antes, não é? Ok, mas também temos um erro aqui. Temos um erro superbásico, então vamos corrigir isso. E só uma dica rápida. Se você quiser escrever mais de uma linha nessa caixa, pressione Shift Enter para ir para uma nova linha. Se você pressionar Enter diretamente, ele enviará a solicitação para a IA. Ok, então vamos ver, vamos voltar às configurações, e temos outro erro, valores de chave duplicados Ok, vamos contar. Agora eu tenho isso. Vamos ver o que diz. Produz um erro de chave duplicada. Parece que temos uma condição de corrida clássica. Não sei o que isso significa. Tanto no acionador do meu banco de dados quanto na página de configurações, estamos tentando criar um perfil padrão para você ao mesmo tempo. Ah, hein. Minhas desculpas pelo pequeno engarrafamento Muito interessante Então, ele me diz que tudo será corrigido em um piscar de olhos. A página de configurações agora será carregada sem problemas. Vamos ver se esse é o caso. Ei, é verdade. Muito impressionante. Ok. Então isso é o que eu queria testar. Vamos criar um novo cliente, e eu vou dizer Demo client one, Demo client one@gmail.com, e vou adicioná-lo. E então vamos criar uma nova fatura aqui para o cliente Demo one Vamos chamar isso de design de logotipo. $1.000 criam fatura. Ok, então para esse usuário para o usuário Audi, eu tenho a fatura 001 para o cliente Demo 1 de $1.000, certo Então, se agora sairmos e usarmos minha outra conta, sim, todos os dados agora estão associados corretamente. Tenho meu cliente um e cliente dois que criamos inicialmente. Eu tenho as três faturas que eu criei lá. E em termos de configurações, sim, eu tenho o prefixo INV, embora eu me lembre de alterá-lo para ADR Então, agora, se eu criar uma nova fatura, espere. Então, vamos mudar o prefixo aqui para ADR. Ok. Então, agora, se eu criar uma nova fatura, ela será ADR Ok. Agora, se eu sair e entrar na outra conta, entrar aqui e alterar o prefixo da fatura para Não sei, digamos, HHH, salvo as alterações e eu crio Sim, veja, isso não está certo porque não usa esse novo prefixo de fatura Então, deixe-me dizer isso. Digamos que o novo prefixo de fatura alterado não seja usado ao criar uma nova Como você pode ver, todo esse prédio de IA é muito conversacional, certo? Você pede que ele faça alguma coisa, você o testa. Se não funcionar, você diz para ele fazer isso de novo. Você testa outras coisas. Se isso não funcionar, você pede que ele faça alterações. Basicamente, isso é tudo o que existe. Mas o bom disso é que, claro, você não precisa saber como escrever código. A IA faz isso por você. Ah, hein. Portanto, o problema, aparentemente, era que o formulário de fatura ainda estava examinando as configurações antigas em cache em vez de buscar as Ok, então vamos testar isso corretamente. Então, agora, se você acessar as configurações, temos o prefixo HHH. Então, vamos criar uma nova fatura. E agora ele está usando HHH 003, mas eu realmente não quero esse Então, vou dizer à IA não quero um hífen no número da fatura Basta usar o prefixo mais o número. HHH, por exemplo, HHH 03 ou 003. Então, sim, acabei de ver. Um erro e eu pedi para corrigi-lo. Então, seu papel, eu acho que você poderia chamá-lo aqui, é o de, você sabe, supervisor, líder de equipe, até mesmo pessoa de controle de qualidade, você é o único com a visão, basicamente Você precisa saber, você sabe, como você quer que o projeto se pareça e como você quer que ele funcione, e então você precisa transmitir essa visão para a IA, sim, falando com ela É um mundo muito interessante em que vivemos agora. Tudo bem, vamos mais uma vez, criar uma nova fatura HHH 04 E se eu mudar isso para DDD, salvar as alterações e criar uma nova fatura, vamos criar o cliente Vamos selecionar o cliente, na verdade. Sim. DDD 05 Ok, vamos sair mais uma vez e entrar com a outra conta. E eu quero conferir as configurações aqui. Ainda está usando o prefixo ADR. Vamos também mudar isso para OOOO, não sei, QQQ, salvar alterações, nova fatura E agora é QQ q005. Legal. Ok, então tudo o que eu queria testar nesta lição funciona muito bem. Eu posso adicionar, editar e excluir clientes. Eu posso fazer o mesmo com faturas, e todos os dados que eu crio para o usuário do LogIn estão associados a esse usuário do LogN, que é muito legal Agora, na próxima lição, começaremos a adicionar algumas funcionalidades mais avançadas ao nosso aplicativo de fatura e, como sempre, testaremos tudo minuciosamente e garantiremos que tudo esteja funcionando E se isso não acontecer, pediremos à IA que o conserte. Então, nos vemos na próxima lição. 6. Como estender a funcionalidade de faturas: Tudo bem, então eu tenho uma meta muito específica para esta lição Quero implementar uma funcionalidade de download como PDF no meu aplicativo. Além disso, gostaria de implementar uma pré-visualização da fatura. O que isso significa? Quando eu crio uma nova fatura ou edito uma existente, gostaria de uma prévia em algum lugar ao lado que me mostrasse a aparência dessa fatura quando baixada como PDF, se isso fizer sentido Então, vamos fazer isso. Vamos começar com isso. O botão Download está funcionando aqui? O download do PDF ainda não foi implementado. Você pode solicitá-lo em sua próxima solicitação. Ok, vamos solicitar isso. Eu vou dizer, por favor, implemente download de PDF para faturas Pedido muito simples. Estamos trabalhando em uma solicitação por vez. Como eu disse, essa é a melhor prática porque nem mesmo é a melhor prática para a IA, mas para você também, porque limita as coisas que você deseja testar. Quando você está perguntando ou se está perguntando à IA, você sabe cinco coisas em um prompt Você precisa testar cinco coisas diferentes. Mas quando você se concentra em uma coisa de cada vez, é muito mais fácil para você e também é muito mais claro para a IA Sempre fico muito feliz em ler as respostas que a IA me dá. Então, aqui está meu plano de jogo. Instale o Auto table, que é uma ferramenta que me ajudará a criar tabelas com aparência profissional em suas faturas em PDF, criar uma página dedicada criar a lógica de geração de PDF Isso me diz que adicionarei um botão de download de PDF à nova página de visualização e atualizarei os itens necessários. Ok, então vamos ver o que ele fez. Então, mudou o ícone de download. Para um ícone de olho. E quando clicamos nisso, Oh, isso é muito legal. Na verdade, ele me mostra uma prévia, e é isso que me surpreende ao usar ferramentas como essa Eu queria uma prévia, certo? Eu queria isso na página de edição ou na página do anúncio. Mas nunca pensei: que tal adicionarmos uma funcionalidade de visualização aqui fora dela? Eu nem pedi que ele fizesse isso, mas ele fez isso de qualquer maneira. Número da fatura, informações da empresa, data da fatura do cliente. Você pode ver o conteúdo da fatura e depois baixá-la Vamos baixá-lo. Fatura QQQ 05 PDF Vamos baixá-lo e ver como é. Tem todas as informações necessárias. Tem o nome da minha empresa, Bill de Bill two. Então, ele pegou o cliente, certo? Sim. Preço unitário por quantidade, está correto? Sim, é. Obrigado pelo seu negócio. Sim, então funciona. Quão fácil foi isso? E se eu editar a fatura, também tenho um botão de download? Eu não tenho. Portanto, a única maneira de baixar a fatura atualmente é abri-la e depois baixar o PDF E eu também posso clicar em Editar e isso me levará para a página de edição. Sim, eu estou bem com esse fluxo. Acho que vai funcionar muito bem por enquanto. E eu também posso clicar em uma fatura, e ela vai me levar para a página de pré-visualização NIE Na verdade, essas são algumas das melhores práticas quando se trata de UX, e a IA as implementou automaticamente, o que é muito impressionante, muito impressionante. OK. Então, a parte do download do PDF está concluída e isso levou alguns minutos. Muito legal. Vamos implementar a parte em que ela me mostra uma prévia quando eu adiciono ou edito uma fatura Então, por exemplo, ao entrar nesta página, quero poder editar os detalhes da fatura exatamente como antes, mas gostaria de ver uma prévia da fatura final aqui em um lado Então, vamos fazer isso. Então, vamos perguntar isso. Ao adicionar ou editar uma fatura, gostaria de ver uma prévia ativa da fatura ao lado Ao vivo, o que significa que ele está atualizando seu conteúdo à medida que eu altero os detalhes da fatura Vamos ver o que isso faz. Obviamente, uma pré-visualização da fatura ao vivo é uma ideia fantástica Vou redesenhar o formulário da fatura para incluir uma bela visualização em tempo real que é atualizada instantaneamente enquanto você Vamos ver o que acontece. Você consegue se imaginar sentado em uma praia em algum lugar com seu laptop, você sabe, criando aplicativos, criando produtos? Muito, muito bom. Ok, vamos. Vamos editar. Com certeza, temos essa prévia no lado direito. Altere a data de vencimento para a primeira, que é atualizada instantaneamente. Legal. Vamos mudar a descrição aqui para vídeos, que são atualizados em tempo real. Vamos mudar a quantidade aqui para duas. Isso funciona. Vamos mudar o preço. Isso é um problema. O formulário aqui está muito apertado. Então, precisamos mudar isso. Então mude a quantidade para três. Sim, os preços são atualizados automaticamente. Legal. Vamos adicionar algumas notas. Ei, obrigado por trabalhar comigo. Atualize a fatura. Ok, então essa foi, eu acredito, essa. Sim. OK. Então essa foi a página de edição. Se abrirmos a nova página, sim, ela funciona muito bem. Então, funcionalmente, funciona, mas precisamos corrigir algumas coisas de usabilidade aqui Então, primeiro de tudo, esses campos agora são muito pequenos. Quer dizer, a quantidade, sim, acho que está tudo bem porque geralmente tem um valor pequeno, mas o preço é muito pequeno. O total é muito pequeno. Como você pode ver, o texto meio que transborda aqui. E tenho a sensação de que a barra lateral aqui é apenas espaço desperdiçado Então, vamos começar removendo a barra lateral e movendo esse conteúdo para a barra superior. Então, vou dizer o seguinte. A barra lateral está ocupando muito espaço. Por favor, remova-o e mova seu conteúdo em uma barra superior. Deve ser fácil o suficiente. E, novamente, esse tipo de mudança levaria, eu acho, provavelmente várias horas para ser concluído dependendo de quem está fazendo isso por você, se estivermos falando de, tipo, pessoas vivas. Mas sim, a IA simplesmente o codificará em pouco tempo. Ok, isso parece muito melhor. Isso moveu tudo isso para o topo. Ele me mostra o painel, a nova fatura do cliente, mas nenhuma configuração Além disso, Ah, tudo bem. Então, foi como um menu suspenso aqui, onde mostra a mim, ao usuário, a página de configurações. E então o link de logout. Muito legal, exceto pelo fato de que eu só tenho um G lá e não é um círculo, basicamente, então temos que consertar isso. Então, na verdade, vou dizer que o botão do menu suspenso na barra superior não parece certo. Ele apenas exibe um G em forma de pílula vertical. Atualize isso para mostrar um ícone de usuário e mova o nome de usuário e o e-mail para fora do menu suspenso. Então, isso deve ser bastante fácil. Assim, o usuário sempre pode ver seu nome, seu e-mail quando estiver logado Tudo bem. Então parece um pouco melhor, mas ainda não está perfeito porque essa forma aqui é muito estranha. É como um formato de pílula, mas temos acesso às configurações, o que é bom, e ao link de logout Legal. Mas vamos realmente resolver esse problema. Então, vou dizer que o fundo do ícone ainda tem a forma de uma pílula vertical Por favor, faça um círculo. Tudo bem, vamos ver como isso funciona. Ok, e acho que isso finalmente resolveu o problema. O botão agora está ótimo. Funciona como deveria. Eu tenho boas informações aqui e posso alternar entre essas páginas. Ok, agora, já que tiramos a barra lateral do caminho, vamos realmente editar essa página de edição da fatura e ver como isso acontece com o espaço extra Agora, obviamente, em um site ao vivo, não temos essa barra lateral. Vai ficar assim, basicamente. Mas, você sabe, ainda precisamos garantir que esse layout funcione em vários tamanhos de tela diferentes. Então, isso é o que parece no celular. Ok, o que não é muito ruim, e o menu ainda funciona Bom. Mas no desktop, acho que ainda não chegamos lá com esse formulário. Então, vamos ver como podemos corrigir isso. E você sabe o que? Na verdade, nem vou tentar encontrar uma solução para esse problema. Vou apenas descrever o problema para a IA e ver o que acontece, porque se ela fizer alguma coisa e eu não gostar, sempre posso voltar para uma versão específica do aplicativo clicando no botão Restaurar Então, depois de cada bate-papo, sim, podemos restaurar uma versão específica desse aplicativo se não gostarmos da mudança. Então, na verdade, vou descrever meus problemas aqui. E os problemas estão basicamente na seção de itens de linha, porque não temos espaço suficiente para o preço unitário da quantidade no total. Então, vou dizer que o formulário de fatura na seção de itens de linha não oferece espaço suficiente para os campos do item de linha, especialmente os campos de preço Você pode encontrar uma solução para isso, certo? Então, estou apenas descrevendo o problema, na verdade. Não estou tentando encontrá-lo para a IA. Só estou esperando para ver quais sugestões ele me dá para isso. E se eu não gostar deles, sempre posso voltar atrás ou pedir que você faça mais alterações Vamos ver seu plano aqui, na verdade. Por isso, diz que quer reformular o layout da grade e melhorar a visualização móvel Tudo bem. Bem, vamos ver como isso acontece. Ok, nova fatura. Vamos ver. Hm. Quero dizer, realmente não adiantou muito, não é? Então, se eu mudar isso, não, isso ainda não funciona corretamente porque o total aqui, se estivermos lidando com quantidades maiores, ele ainda se sobrepõe ou sai da caixa delimitadora E vamos realmente ver a visualização móvel porque ela disse que atualizou a visualização móvel. Vamos perguntar isso. Na verdade, ela não fez nenhuma alteração valiosa, então não vou voltar para uma visão mais antiga, mas, em vez disso, vou pedir que ela a mova um pouco Então, pedi uma solução, mas na verdade não me deu uma boa solução, então vou dizer a ela o que fazer. Na seção de itens de linha, defina a descrição do item de linha toda a largura e mova a quantidade, o preço unitário e o preço total sozinhos ou, devo dizer, na segunda linha. Dessa forma, os dados têm espaço suficiente. OK. E uma outra dica aqui, e eu já fiz isso antes, se você alguma vez não conseguir se comunicar com a IA, se estiver pedindo que ela faça alguma coisa, mas ela simplesmente não entende o que precisa fazer, tente usar outra IA para gerar uma solicitação. Então, eu costumava fazer isso no passado. Eu perguntava à IA algo que ela não entenderia e, em seguida, pedia ao CHAT GPT que escrevesse uma solicitação para eu fornecer à IA E eu expliquei o que eu queria fazer com o HatGPT. Então o HatGPT pegou isso, escreveu um aviso muito detalhado e muito técnico, que depois eu dei a essa outra IA, e ela finalmente fez o trabalho Não funciona o tempo todo, mas geralmente ajuda. OK. Então, agora vamos editar a fatura Sim, lá vamos nós. Isso é muito melhor. Agora temos muito espaço para a descrição e os outros três campos. Outra coisa que eu gostaria de acrescentar aqui é uma moeda ao preço unitário. Então, eu direi, adicione a moeda do dólar americano ao preço unitário também. Ok, então a IA fez mudanças. O que isso significa? Temos que testá-los. Então, editamos. Agora também temos o cifrão, e alterar isso também atualiza os valores aqui e também os atualiza aqui na prévia. Muito bom. Se conferirmos a prévia aqui, ela ainda funciona. E se eu criar uma nova fatura, selecionar o cliente, há uma coisinha aqui O número da fatura parece estar cortado. Portanto, não está cortado. Na página de edição, mas está cortada na página Criar. Interessante. Nós vamos contar isso. Na página de criação da fatura, o número da fatura é cortado. Corrija o teste da nova Então agora diz A, selecione o número da fatura do cliente, data, data de vencimento E se eu editar, o número da fatura será exibido corretamente, mas eu não quero aquele sinal de hash lá OK. Mas não é exibido corretamente na nova fatura Portanto, essa solicitação dessa vez seria remover o sinal de hash do número da fatura na página de detalhes da fatura Além disso, ao criar uma nova fatura, o número da fatura mostra A, corrija Então, eu meio que quebrei minha própria recomendação porque pedi que ela fizesse duas coisas em uma única solicitação. Vamos ver como isso funciona. Normalmente, como eu disse, eu realmente não recomendaria isso porque é muito mais fácil para você e também muito mais claro para a IA Mas vamos ver como isso acontece só dessa vez. OK. Agora, ele remove esse sinal de hash do número da fatura e, quando eu crio uma nova fatura, QQQ 06, sim, Como você pode ver, isso agora corrigiu os problemas e me mostra o número correto da fatura Agora, vamos conferir rapidamente os outros detalhes que devem aparecer na fatura Então, quando eu seleciono o cliente, ele seleciona o cliente um, cliente dois, isso é correto Mas e quanto aos meus dados pessoais? Então, vamos realmente voltar. Vamos para as configurações. E vamos preencher o nome da empresa aqui. Digamos, eu não sei, Pordla Designs Ic DiPord meu endereço de e-mail Claro. Digamos apenas um número de telefone fictício, o endereço Vamos colocar, uh, o endereço, e vamos realmente preencher todos os campos aqui. Está bem? Salve as alterações. Legal. Então, agora, quando eu crio uma nova fatura, sim, ela preenche minhas informações corretamente Embora não exiba meu site. Oh, não, sim, é verdade. Eu não vi isso. Legal. Ok, então vamos definir o cliente uma data de fatura de status, data de vencimento Eu preencho isso automaticamente. Data de vencimento amanhã. E digamos, não sei, YouTube, quantidade dois com preço unitário 100 e pressione Enter para criar a fatura Legal. E temos um erro aqui. Não estou vendo o cliente para esta fatura. Se eu mudar isso para o cliente dois, vemos isso? Nós não temos. A fatura QQQ 006 está Se eu criar uma nova fatura, teremos os mesmos problemas Sim, nós temos. OK. Então, acabamos de descobrir um novo problema. É por isso que você precisa testar, testar, testar e continuar consertando as coisas. Ao criar, digamos, o cliente não é exibido na tabela de faturas recentes para novas faturas Esse é um comportamento estranho. Vamos ver se isso resolve isso. Então, aparentemente, o nome do cliente não estava sendo salvo corretamente ao criar uma nova fatura, é por isso que não estava aparecendo no seu painel Coisas assim acontecem, você sabe, até mesmo com a IA. Ao fazer essas alterações, você está alterando o código em si. Portanto, é natural que, quando você muda alguma coisa, você possa estragar outra coisa, mas parece que isso corrigiu o Então, agora, se eu criar uma nova fatura para um cliente, sim, eu a exibo corretamente Incrível. OK. E o número da fatura é mostrado lá corretamente. Uma coisa que notei é que a visualização da fatura que vejo aqui é, na verdade, diferente da visualização da fatura que vejo Então, talvez queiramos mudar isso. Deixe-me pedir que você faça isso. Então, vou contar exatamente o que eu disse a você. As visualizações da fatura são diferentes entre a página de visualização e as páginas de edição do anúncio Por favor, faça-os iguais. Tudo bem, vamos dar uma olhada. Então essa é a prévia. Parece de uma certa maneira, bom. E se formos editar, sim. Então eu acho que parece praticamente o mesmo. Então, estou feliz com isso. Então, se eu baixar essa fatura agora, a fatura 008, e eu a abrir, ela me mostrará as informações corretas Sim. Mas o design da fatura real realmente não se parece com a prévia que vejo aqui E seria bom que tudo isso fosse a mesma coisa. Então, vamos fazer isso, exceto que a visualização está usando esse esquema de cores escuras, e a fatura que eu gero deve estar em um esquema de cores claras porque você pode querer imprimi-la em papel Então, neste caso, vamos perguntar isso. Faça com que o formato PDF para download se pareça exatamente as duas visualizações que você acabou de criar, exceto use um esquema de cores claras para o Vamos ver se isso é possível. Ah, cara. Eu amo isso. Parece que não há nada que a IA não possa fazer. Quer dizer, acabei de pedir que ele fizesse isso, o que, na minha opinião, é uma tarefa muito complexa, certo? Mas a IA me diz que, Ei, você entendeu. Vou instalar isso e atualizar isso. Muito legal. Então, vamos ver se isso fez alguma alteração nas visualizações aqui. Eu não fiz isso. Então, se eu baixar o PDF agora, Oh. OK. O que é isso? Sim, isso não é bom. Então, talvez eu não tenha sido muito claro. Parece que tudo o que ele fez foi pegar uma imagem da prévia que eu tinha no aplicativo e colocá-la em um fundo branco. E não era isso que eu queria. Eu quero basicamente ter esse formato, esse layout da fatura, basicamente, mas em um esquema de cores claras Então, vamos perguntar novamente. Eu vou dizer que essa não é a solução certa. Use o mesmo formato e layout para o PDF que você usou para a pré-visualização, ou devo dizer, para a pré-visualização da fatura No entanto, o PDF usará um esquema de cores claras. E acho que isso deveria ser suficiente. Vamos ver se isso é específico o suficiente para isso. Se não, bem, acho que vou falar com meu bom amigo Chad GPT e pedir que você crie um prompt melhor para a Vamos pré-visualizar, vamos baixar. Sim, isso ainda não está certo porque sim, ele usa o formato, mas não funciona corretamente. Essa é a primeira fatura. E o texto era realmente selecionável aqui, mas nesses dois, isso nem é selecionável Isso é uma imagem, basicamente. Então, vamos realmente ir ao HatGPT e tentar encontrar uma solução para Tudo bem, então depois de conversar com o CHADGPT, eu basicamente disse que, olha, estou criando um aplicativo de faturamento com o Hosting Estou tentando fazer com que ele combine o formato do PDF com a visualização prévia do aplicativo. Então, eu contextualizei um pouco e perguntei: você pode me ajudar com um aviso? Então, isso me deu um aviso. Esse, que é um pouco detalhado demais. Então eu disse, isso é muito detalhado. A IA já sabe o que estamos construindo, então me deu um pequeno aviso. Então, vamos tentar assim. Eu só vou pegar isso. Eu vou colá-lo. E o aviso aqui basicamente diz: Faça o PDF exportado, combine com o layout de voz na tela exatamente a mesma estrutura, espaçamento e alinhamento. A única diferença é usar um esquema de cores claras, texto preto com fundo branco para impressão, manter o design limpo e consistente com a pré-visualização. Então, vamos ver se isso ajuda de alguma forma. Pela minha experiência, como eu disse, isso funciona na maioria das vezes porque ter outra IA escrevendo as instruções para você geralmente resulta em instruções mais detalhadas e técnicas, mas nem sempre é o caso Se isso não funcionar corretamente, podemos estar vendo , você sabe, algo que a IA não pode fazer, mas duvido que seja esse o caso, honestamente Então ele diz, ou diz, você entendeu. Minhas desculpas A última barraca não era totalmente perfeita em pixels. Ok, então vamos clicar aqui. Vamos clicar em baixar o PDF. Vamos ver se não, isso não parece funcionar corretamente, nem mesmo desta vez. Então, vamos dizer isso. Você continua colocando uma imagem nesse PDF. O texto nem mesmo é selecionável. Gere o PDF da mesma forma que você fez ao criar este aplicativo pela primeira vez. Mas use o layout e estrutura da pré-visualização da fatura na tela Então, estamos meio que atacando isso de um ângulo diferente. Vamos ver se isso faz alguma coisa. Lamento sinceramente os repetidos erros. Estou implementando essa solução correta agora e tenho certeza de que você ficará satisfeito com a qualidade profissional dos resultados. Bem, isso ainda está para ser visto, meu amigo da IA. Uh hein. Então, aparentemente, o que ele fez foi usar um pacote HTML to canvas para criar isso. Então, agora ele está removendo isso e trazendo de volta a tabela automática para criar um PDF com texto real selecionável Ok, vamos tentar. Opa. Vamos baixar. Ah. Lá vamos nós. Então, agora parece quase que exibi-lo corretamente. Não é 100%, mas está bem próximo. exemplo, todas as informações estão no lugar certo, exceto na fatura Esse é um tipo de layout de caixa com o cabeçalho, o cabeçalho da tabela sendo colorido dessa forma, e a visualização mostra assim. Acho que vou aceitar. Acho que posso ajustar isso um pouco mais, mas, de qualquer forma, essa lição durou muito tempo Então, acho que, por enquanto, temos uma grande semelhança com nossa prévia aqui, e eu vou vencer Portanto, os objetivos desta lição eram implementar a pré-visualização da fatura e também o download em PDF E como você viu, o trabalho está ótimo, você pode clicar em qualquer fatura para ver uma prévia aqui Você pode baixá-lo como um PDF e também criar uma nova fatura ou editar uma fatura existente mostrará uma prévia no lado direito E essa prévia é atualizada ao vivo à medida que você atualiza os detalhes da fatura Então, o que mais eu preciso ou quero fazer para este aplicativo? Bem, parece funcionar muito bem por enquanto. A única coisa que eu acho que mudaria imediatamente é o fato de termos muitos botões, digamos , uma nova fatura, certo? Temos uma aqui e uma aqui, e o menu principal aqui também diz nova fatura Então, acho que gostaria de simplificar isso e ter um único botão, talvez aqui ou talvez aqui no cabeçalho Remova este item do menu e, em seguida, talvez faça algumas alterações no design para torná-lo um pouco mais polido Mas isso é para a próxima lição porque, como eu disse, isso já é muito longo. Então, nos vemos na próxima lição, onde implementaremos as mudanças finais em nosso aplicativo. 7. Adicionando toques finais: Ok, bem-vindo de volta à lição final de construção deste projeto, e os objetivos para este são muito simples. Precisamos refinar os novos botões de fatura porque são muitos e estão espalhados por todo o layout E também precisamos fazer algumas mudanças estéticas. Basta aperfeiçoar um pouco mais o EUI. Então, vamos começar com o botão. Então, vou dizer que temos muitos botões para criar uma nova fatura Mantenha um único acentuado na barra superior. E acho que nem é preciso dizer que os outros dois deveriam ser removidos. Então, vamos ver se ele faz isso corretamente. E, aparentemente, enquanto fazia isso, a IA encontrou um erro, um ponto e vírgula incômodo Ok, eu não vi isso, mas aparentemente sim. Então, sim, agora temos um único botão de nova fatura que nos leva à página Criar nova fatura Bom. E quando clicamos em Editar, isso nos leva à página Editar fatura Então esse é o alvo número um. O objetivo número dois é fazer algumas mudanças estéticas. E para isso, eu realmente gostaria de testar esse recurso de imagem. Então, eu gostaria de encontrar algumas imagens que mostrem o tipo de layout que estou tentando obter, entregá-las à IA e pedir que ela combine as cores e, você sabe, o espaçamento e tudo com as imagens que acabei Então, vamos ver como isso acontece. Na verdade, vamos driblar e procurar o que seria esse painel escuro Vamos ver se podemos encontrar algo que eu goste e que eu acho que funcionaria bem para esse tipo de projeto. Então isso é interessante. Da mente usada. Isso parece interessante. Então, vamos salvar isso. E isso realmente o salva como uma imagem P da web. Gostaria de saber se a IA aceita uploads da web P. Está muito escuro. Isso parece interessante. Novamente, não vou tentar pronunciar seu nome. Então, vamos salvar essa imagem. Ok, vamos tentar com essas duas imagens, certo? Então, voltaremos aqui e clicaremos em Carregar. Vou apenas selecionar essas duas imagens P da web e ver se isso funciona. Então, aparentemente, funcionou. Ok, legal. Então, vamos realmente dar um aviso. Use as duas imagens como referência e altere as cores e o espaçamento da interface do usuário. Estou muito curioso sobre isso, porque se isso funcionar bem , é muito fácil criar um aplicativo que não apenas funcione bem, mas também tenha uma boa aparência, porque você pode um designer profissional que crie um design para esse aplicativo e você pode simplesmente pedir à IA que combine isso o mais próximo possível possível. Está dizendo que o plano aqui é renovar a paleta de cores, refinar o espaçamento e os layouts e examinar cada componente da interface do usuário para garantir que estejam perfeitamente alinhados com o novo esquema de cores e estejam perfeitamente alinhados com aqui é renovar a paleta de cores, refinar o espaçamento e os layouts e examinar cada componente da interface do usuário para garantir que estejam perfeitamente alinhados com o novo esquema de cores e espaçamento. Tudo bem, certo. Bem, o plano parece ótimo. Vamos ver a implementação. E aqui estamos. Então, para referência, abri uma versão mais antiga da interface do usuário. Isso foi, você sabe, antes de fazermos as mudanças de layout aqui. E esse é o novo. Então, sim, é definitivamente diferente do que tínhamos antes. Vamos abrir um desses. Não é como noite e dia, mas acho que é uma melhoria. Mudou a cor de destaque porque as duas imagens que eu dei, sim, estavam usando esse tipo de cor laranja e laranja Sim, eu definitivamente fiz algumas mudanças aqui. Por exemplo, ele adicionou, tipo, uma cor de fundo clara a todas essas seções. Isso meio que diminuiu o contraste dessa borda. E também acrescentou que acabei de notar isso. Eu adicionei um desfoque, como um efeito de desfoque de fundo, à barra de parada, e acho que isso a corrigiu Acho que não foi corrigido antes. Então, agora ele permanece no lugar quando rolamos para cima e para baixo. Ok, então, no geral, sim eu gosto dessas mudanças, e acho que posso continuar conversando com a IA , aperfeiçoar isso e fazer com que pareça o que tenho em mente. Na verdade, trata-se de quanto tempo você está disposto a gastar com a IA. Se você está, você sabe, tentando criar um MVP, como um produto mínimo viável que você quer mostrar que conhece, partes interessadas, então, você sabe, criar algo assim é mais Parece ótimo. É responsivo. Você sabe, funciona no celular também. Está limpo e você sempre pode fazer alterações visuais nele. Então, eu só quero fazer uma rodada final de testes para ter certeza de que tudo funciona perfeitamente antes de continuar. Então, vamos até os clientes. Vamos adicionar um cliente. Oh, isso também mudou esses campos aqui. Isso também mudou sua aparência, basicamente. Ok, adicionando clientes. Trabalha, editando clientes. Funciona. Vamos voltar aqui. Vamos criar uma nova fatura. Selecione o cliente três. Sim, legal. Descrição da quantidade do item, dois deles por $300. Ei, vamos fazer uma ótima fatura. Sim. Então isso funcionou. Eu posso pré-visualizá-lo muito bem. Eu posso baixar um PDF disso. E o PDF tem a seguinte aparência. Também mudou as cores do PDF, mesmo que eu não tenha pedido. Legal. Posso editar a fatura e depois excluir as faturas Bom. E acho que vou parar por aqui com esse aplicativo. Acho que consegui chegar a um estado muito decente em quê? Uma hora. Talvez o curso um pouco mais de uma hora, provavelmente, mas você precisa entender que, se eu fizesse todo esse processo sem falar com a câmera, obviamente levaria menos tempo. Mas estou feliz com o que criei até agora e vou terminar aqui. Junte-se a mim na próxima lição para obter a conclusão e as próximas etapas. Te vejo lá.