Crie aplicativos de IA rapidamente: da ideia ao MVP sem programação

1. Introdução ao curso: Oi, aí. Bem-vindo ao curso Build AI Apps VAST. Meu nome é Nima Tahami e, nos últimos anos, tive a sorte de ensinar mais 18.000 estudantes e criar Veja, a maioria das pessoas desiste de sua ideia antes mesmo começar a construí-la e lançá-la. Eles começam a pensar demais em todas as partes ou ficam presos no código Você não precisa mais ter nenhuma habilidade de codificação para dar vida às suas ideias . Graças à IA. Ao longo deste curso, mostrarei as etapas exatas que eu tomo para transformar uma ideia de apenas uma ideia em designs para um produto vivo. Nenhuma experiência em codificação é necessária, e você sai com um aplicativo que está realmente disponível na Internet e que as pessoas podem usar e pagar Então, se você é designer depois de deixar de projetar apenas telas ou é um gerente de produto que quer dar vida às suas ideias , este curso é exatamente para você. E você não vai ficar apenas assistindo a este curso. Na verdade, você pode criar junto comigo , dar vida à sua própria ideia e aprender a usar ferramentas como Claude e Cursor para ajudá-lo a criar seu aplicativo com mais rapidez Este é um curso super prático. Espero que você esteja pronto para realmente executar e finalmente dar vida à sua ideia. Vamos começar. 2. Nota sobre os bastidores: Antes de continuar com as palestras, quero fazer uma pausa bem rápida aqui apenas para mostrar a vocês breve resumo dos bastidores de como essas palestras são realmente feitas, tempo gasto no planejamento das palestras e na verdade da filmagem e edição Eu criei uma ferramenta chamada clip na qual agora faço todas as minhas gravações, incluindo as palestras que você estava prestes a assistir Estou muito empolgada com isso, então é por isso que estou mostrando para você. Basicamente, deixo cair as imagens que tenho para as palestras e, em vez de ter que passar, você sabe, dezenas de horas ao lado do editor editando todo o curso, agora tenho a IA dentro dessa ferramenta, faço a edição Se você está pensando remotamente em fazer qualquer tutorial, conteúdo do YouTube ou outro tipo de curso, ou conteúdo educacional para palestrantes, isso também pode ser muito útil Então, agora, ele está examinando e eliminando todos os erros que cometi para que, quando você estiver assistindo às palestras, você sabe, seja profissional, suave, limpo e você não fique sentado perdendo seu tempo assistindo a uma palestra que não faz sentido ou apenas pausas aleatórias Então dê uma olhada. Há um link aqui se, novamente, você estiver interessado em filmar conteúdo ou apenas dar uma olhada e ver se é algo que você pode usar para seu próprio tipo de diário. Aproveite o resto do curso. 3. Projetando com velocidade: Então, esta é uma semana empolgante em que realmente podemos criar nosso produto, mas não qualquer produto ou qualquer versão de nosso produto, o produto mínimo viável, que tenho certeza que você já ouviu falar, ou seja parte mais valiosa a parte mais valiosa do produto ou o valor que nossa empresa terá, vamos empacotá-lo em um pequeno aplicativo ou produto e vendê-lo especificamente, certo? Hum, então, é claro, eu sei que você pode ter muitos recursos em mente e várias maneiras de executar sua ideia, e, você sabe, mesma coisa para mim e para o aplicativo em construção, mas eu não vou começar a escrever uma lista de 20 recursos e depois criar cada um, certo. A menos que eu tenha a garantia de que vou conseguir clientes para o meu produto, isso será potencialmente uma perda de tempo. Mas o que vai ser útil é restringir quais recursos ou quais partes do tipo de valores sobre os quais falamos o usuário deseja do produto e focar especificamente nisso Hum, então com esse conjunto, vamos projetar para a velocidade e não para a perfeição. Então eu vou te dar um exemplo. Esta é a primeira versão do clipe do meu aplicativo de edição que eu criei. Ainda não era um editor em grande escala. Primeiro, eu realmente criei apenas um recurso desse produto. E esse recurso é , na verdade, transformar palestras longas ou vídeos mais longos em rolos curtos Portanto, seu vídeo será mais longo e nós o transformaremos em vídeos menores com base na transcrição e no que é interessante nela E, como você pode ver, os designs também são super simples. Não existe um design sofisticado, embora eu provavelmente pudesse ter passado mais tempo projetando isso Eu escolhi a versão mais simples que pude. Você acabou de soltar seus vídeos. E na época, na verdade, mesmo nos designs, eu permitia que as pessoas publicassem vários vídeos, mas acabei recorrendo a apenas um vídeo Então, novamente, você quer restringir seus recursos ao valor mais importante que você deseja gerar para os usuários. Vá com isso. A mesma coisa. Aqui eu tenho uma integração para o vídeo. Depois de soltar o vídeo, ele perguntará se isso é sobre o curso Figma Novamente, eu projetei esse Figma, mas, na realidade, até dei esse passo e fiz com que você simplesmente escolhesse os tópicos que deseja exportar Depois de analisar a transcrição, em vez de perguntar do que trata este curso, basta marcar qual dos tópicos deseja exportar Hum, tão super simples. Novamente, tudo isso provavelmente é como três telas no total, talvez quatro. Tudo isso faz parte da mesma tela. É como uma tela de carregamento. E, novamente, embora eu seja designer e busque a perfeição, tento não me aprofundar muito nos detalhes do design e escolher a parte mais simples deste produto E então você pode ver os vídeos deles e, a partir daqui, eles podem novamente, diz editar. Não havia capacidade de edição na primeira versão. Tudo o que você pode fazer é abri-lo, ver as filmagens, exportá-las, excluí-las e depois ir para a próxima Tão super simples novamente. E aqui eu até o tinha para que você pudesse ter, novamente, pastas para cada projeto e entrar em projetos. Então, para a primeira versão, foi super simples, e eu encorajo você a fazer o mesmo. Não projete com perfeição, projetado para uma espécie de MVP ou compilação de recursos Portanto, se concentrar no que é o recurso mais importante do seu aplicativo, na verdade, resolve o problema das pessoas e se concentre nisso Esqueça todos os outros recursos, certo? Então, para ajudá-lo a fazer isso, eu realmente recomendo que você também use a seção da comunidade no Figma se estiver fazendo seus designs no Figma, o que eu recomendo fortemente Eles já têm muitos kits de interface de usuário que as pessoas já criaram. Eu o encorajo fortemente se você estiver usando uma biblioteca de design como o ShatCN Essa também é ótima. Muitas empresas o usam, especialmente se você estiver projetando algo que pode ter uma tela de painel ou algo um pouco mais sofisticado. Eles têm muitos componentes, como gráficos que você pode usar e painéis Então, definitivamente , consulte este aqui. Novamente, se você abrir algum deles, digamos que eu abri o primeiro aqui. Novamente, essa é uma biblioteca de design aberta pela Verso que você pode usar. Assim, você pode ver todos os componentes que eles já têm. exemplo, você não precisa criar um componente de entrada do zero, basta arrastar um daqui. Eles têm tipos de cores e também há versões mais extensas delas, eu acredito. Então, se você olhar para este, eles têm, como todos os componentes divididos por páginas. Então você tem diálogos de alerta, hum, avatares, emblemas, navegação por trilhas de navegação, grupos de botões e assim por botões Portanto, explore o que você tem disponível e não tente inventar do zero E você verá que, quando começarmos a realmente criar nosso produto, aproveitaremos essas bibliotecas em vez de fazer tudo do zero. Portanto, à medida que você continuar projetando o produto, voltaremos e realmente usaremos o ChatGPT para nos ajudar a restringir nosso conjunto de recursos, lembre-se que você deseja usar bibliotecas externas Você quer simplificar o número mínimo de páginas necessárias para seu aplicativo. Você não precisa de configurações sofisticadas ou recursos de perfil apenas em, você sabe Então, esses pequenos detalhes são importantes em grande escala, mas inicialmente, quando você está apenas começando, você não precisa gastar tempo criando todas as páginas individuais Volte e comece a planejar de fato, o que vamos construir? Vou falar sobre meu produto, mas obviamente, fazer isso, você faz a mesma coisa com o seu produto. 4. Usando o ChatGPT para planejar nosso aplicativo: Certo, então estamos nos preparando para começar a trabalhar em nossa primeira versão do nosso aplicativo antes de realmente criá-lo e até mesmo elaborar os recursos que queremos Queremos aproveitar a IA, é claro, para nos ajudar a decidir alguns desses recursos. E um dos meus exercícios favoritos é conversar com o ChatGPT sobre, você sabe, a primeira versão do nosso produto Então, aqui, eu escrevi um aviso, me ajude a planejar a primeira versão de um MVP de um Para um aplicativo que ajuda os usuários a controlar as despesas e dividir facilmente as contas em viagens e a escrever apenas os recursos que mais gerarão valor para os usuários. Pesquise o que os concorrentes, como Split Wise, estão faltando em seus produtos ou sobre o que os usuários estão reclamando on-line. Isso faz duas coisas. Uma é que ele nos fornece alguns recursos que são os mais importantes que vamos criar, em vez de apenas tudo o que podemos criar. Em seguida, também examinará um pouco on-line, talvez no reedit e em outras fontes Então, na verdade, ele examinará esses recursos quando você pedir pesquise algo para ver on-line quais são as reclamações deles sobre esses produtos Se você quiser, pode ser mais específico e dizer: . Se você quiser, pode ser mais específico e dizer: Veja o reedit e sites como o G two, que é a plataforma de avaliação de aplicativos Então, vamos pressionar Enter e ver o que acontece. E, como você pode ver, ele pesquisará na web e, em seguida, criará um plano de MVP com base em reclamações reais de usuários da Redt, analisará o Trust Pilot e os painéis de feedback do aplicativo Então, com base nisso, voltei com fricção artificial e paywalls, maior problema. Isso faz sentido. Toda vez que eu uso o Blitwise, você só pode adicionar um certo número de transações Como diz aqui, há três por dia que você pode realmente adicionar e, em seguida, isso o força a pagar pelo aplicativo, certo? Então, isso pode ser interessante para aproveitarmos e realmente criarmos um produto que talvez, você sabe, pague uma vez, como um negócio vitalício ou algo parecido. Pague, não sei, 20, 30, 40 dólares. Novamente, vamos definir o preço, mas pagaremos uma quantia X de dólares. Você recebe o produto, não precisa se preocupar com cada vez que ele solicita um pagamento, certo? E então eu acredito, divida as cobranças em alguns dólares por mês Mas, novamente, pode ser irritante sempre ser atingido por aquela tela, e eu sei que isso aconteceu comigo antes Qualquer atrito parece inaceitável. Então, vamos construir com isso, certo? Embora isso não seja um recurso, é uma experiência de usuário que vamos desenvolver e criar uma versão melhor dela. Muito atrito na configuração faz sentido. Eu fiz isso também. Há grupos envolvidos e os convites podem ser confusos. Então, se convidarmos amigos, vamos tornar tudo muito simples. Na verdade, faremos com que você nem precise inserir seus e-mails, talvez apenas compartilhe um link e as pessoas possam participar automaticamente de viagens sem precisar saber seus e-mails com antecedência. Então, se vamos construir isso, vamos construí-lo de uma forma em que os usuários possam dar o menor número de etapas para convidar amigos, certo? Então, vamos manter isso em segredo. Não é necessariamente um recurso. Novamente, é uma melhoria na experiência do usuário, mas estou construindo isso com o design como um diferencial, e você quer fazer o mesmo Então, vamos seguir em frente e manter isso em mente. E ao passar por isso, observe também, seja em um pedaço de papel ou no seu computador, anote o que você quer fazer de diferente do que os concorrentes estão fazendo para ajudar você a se diferenciar Modelo mental de estabelecimento confuso, certo? Então, quando você tenta fazer um acordo, as pessoas não necessariamente entendem como isso funciona, não sabem quem deve pagar a quem muitas microtransferências, constrangimento emocional E então podemos incluir isso no produto também, certo? Depois que a viagem terminar, por que não simplificamos a descoberta de quem precisa pagar quanto? Talvez até envie lembretes por e-mail ou algo parecido, certo? Percebi, no Split Wise, que não recebi nenhum lembrete quando preciso pagar alguém Ele me envia extratos mensais, mas isso é diferente de, você sabe, quando você precisa cutucar seu amigo para, ei, tipo, você pode me pagar cerca de 100 dólares por algo como o Airbnb, você pode me pagar cerca de 100 dólares por algo como o Airbnb Então, esses podem ser momentos difíceis e, portanto, esse pode ser outro ângulo para diferenciar nosso produto do dividido Então, sim, há muitas coisas aqui que eu não vou entrar em muitos detalhes, mas vou ter em mente para o meu processo de design. Portanto, a principal oportunidade é que os usuários não querem uma ferramenta financeira. Eles querem um ajudante de coordenação de viagens que administre dinheiro automaticamente Estamos viajando, basta fazer essa lista de esforços. Somente recursos de MVP que impulsionam a criação de viagens instantâneas de valor real, certo Então, isso quer dizer que não há contas. Crie uma viagem, gere compartilhe Link exatamente o que eu tinha em mente também. As pessoas se inscrevem via Link. Não é necessário se inscrever. Não tenho 100% de certeza sobre a parte da inscrição e só porque ainda precisamos que os usuários se autentiquem Mas eu pude ver isso potencialmente funcionando também. Portanto, pelo menos uma pessoa precisa criar uma conta para criar a viagem, mas, potencialmente, os hóspedes não precisam. E, novamente, esses são agora, estamos apenas discutindo ideias. Quando chegarmos à parte real da construção, que acontecerá logo depois, vamos realmente defini-la antes de avançarmos. Até mesmo cria vários recursos que, segundo o ChatGPT, não os coloque no MVP, e vamos ter não os coloque no MVP, isso em mente, como, você sabe, integração bancária, assinaturas, etc assinaturas Então, aqui está o que aconteceu. Diz: Faça um loop, crie uma viagem, compartilhe um link, adicione despesas instantaneamente, veja o saldo, claramente, pague com pagamentos mínimos. Eu acho isso ótimo, certo? Portanto, isso é um pouco mais simples do que todos os outros recursos configurados aqui. Mas se criarmos uma versão fácil disso, na verdade, o recurso é apenas uma coisa. E isso é, você sabe, ser capaz de organizar sua viagem com base nas despesas, certo? Não estamos construindo, embora esteja nos dizendo esse ciclo de diferentes tipos de telas que podemos precisar, talvez você precise de uma tela para criar uma viagem. Na mesma tela, você pode compartilhar o link. Adicionar despesas faria parte da mesma tela, vendo o saldo, novamente, na mesma tela. pagamentos mínimos, criaremos Com pagamentos mínimos, criaremos apenas uma onda na mesma tela para que você possa realmente ver quem é dono do quê. Obviamente, a tela terá estados e componentes diferentes, mas vamos mantê-la o mais limpa possível. Obviamente, você também precisará de uma tela inicial para poder criar viagens. Então você tem uma tela inicial para ver todas as suas viagens. Então, dentro da página de viagens, você não precisa navegar para lugares diferentes, um lugar super simples para ver o que é um total, qual é o saldo operacional, quem é dono do quê? E depois a capacidade de adicionar alguns tipos de despesas, e vamos mantê-las o mais limpas possível e vamos mantê-las o mais limpas possível e usar o mínimo de telas possível, novamente. Então, com isso em mente, vou começar com os designs. Você faz o mesmo na próxima palestra Eu voltarei para explicar como fiz meu design e quais são as decisões que tomei nas páginas que acabei de explicar agora Então, vou criar essas primeiras duas ou três telas principais, autenticação, todas as viagens e, em seguida, páginas de viagem individuais específicas. Então, eu vou projetar isso. Você projeta suas telas essenciais, reduza para três ou quatro no máximo, se puder. Sei que alguns produtos podem ser um pouco mais complicados do que outros, mas, novamente, tente reduzi-los ao mínimo e às telas mais importantes. vejo em um minuto e estou ansioso para ver também seu design. 5. Como escolher o dispositivo: Antes de realmente iniciar seu processo de design, você pode estar se perguntando : devo criar um aplicativo web? Devo criar um aplicativo móvel? Devo criar um aplicativo de desktop. Há muitas perguntas sobre o que construir e também com qual pilha construir A pilha é composta por todas as ferramentas e softwares que vamos usar para realmente criar nosso aplicativo Agora, minha opinião sobre isso é super simples. Em geral, eu escolho um aplicativo web que seja compatível com dispositivos móveis, que os usuários possam acessá-lo na web em seus navegadores a menos que agora seja aqui os aplicativos nativos entram em ação. A menos que você esteja fazendo algo específico, como edição de vídeo, algo que envolva a máquina de parada do usuário. Deseja utilizar parte dessa memória, energia ou armazenamento. Para o meu editor de clipes para desktop, decidi criá-lo apenas para desktop, mas ele está processando localmente toda a edição e renderização do vídeo , e eu não preciso fazer isso em um servidor, que pode ser caro, especialmente para começar Agora, para um aplicativo web simples como o Bitwise, petitor friends on trips, seja capaz de dividir contas Um aplicativo web é suficiente. Agora, talvez eu queira criar um aplicativo nativo posteriormente, que eu possa enviar para as lojas de aplicativos e os usuários possam baixá-lo em seus telefones. Será útil se meu ENS usar este aplicativo diariamente ou semanalmente, especialmente se eu seguir rotas b2b e tiver usuários que possam viajar semanalmente para trabalhar Esse é um lugar onde fazer um aplicativo nativo móvel faz mais sentido. Ou, no seu caso, se você estiver criando um aplicativo que envolva o usuário a interagir com esse aplicativo diariamente ou semanalmente e com frequência, talvez seja uma experiência melhor criá-lo como um aplicativo nativo. Claro, todos eles vêm com seus desafios. Se você criar um aplicativo nativo, deverá enviá-lo para a loja de aplicativos e a Apple deverá analisá-lo antes que você possa realmente vê-lo ao vivo na loja de aplicativos. A loja de aplicativos também pode ser super competitiva. Mas também se você estiver fazendo um aplicativo Web, você também enfrentará esse desafio. Mas existem prós e contras. Você tem que decidir por si mesmo com base nisso, o que faz mais sentido. Novamente, geralmente, eu escolheria um aplicativo da web acessível no navegador. Todo mundo tem um navegador no telefone e você precisa realmente pensar nisso. seu aplicativo é um SAS que só pode ser acessado na web em um computador Nesse caso, é uma escolha fácil. Mas se você está criando algo em que as pessoas possam usá-lo mais em dispositivos móveis , a escolha se torna um pouco mais complicada Mas, novamente, eu prefiro um aplicativo web, a menos que você tenha casos específicos em que o usuário precise A, usar a potência da máquina do dispositivo na medida em que, por exemplo, um jogo, ou se quiser criar um aplicativo que os usuários usem diariamente ou semanalmente, por exemplo, digamos, um aplicativo de compras. Agora, lembre-se de que, mais tarde, você sempre poderá alterar sua pilha Você sempre pode tornar seu aplicativo da web também um aplicativo móvel. Basta começar com o básico, começar com o que for mais rápido, e é por isso que sugiro um aplicativo web para a maioria das ideias 6. Inspirando-se: Tudo bem, agora que decidimos o que queremos criar e quais são os recursos que queremos criar em torno disso para nosso MVP, precisamos de inspiração de outras ferramentas que já existem para realmente montar nosso próprio A melhor maneira de fazer isso é usar essa plataforma chamada Mobiin, que tem capturas de tela de literalmente milhares de aplicativos diferentes, e eles também mostram animações como parte dela Essa é uma ótima ferramenta para ver o que outros aplicativos estão fazendo. Então, aqui em cima, você pode realmente pesquisar pelo aplicativo específico. Você também pode filtrar por web designs, iOS ou dispositivos móveis. Então, aqui em cima, vou pesquisar por split wise porque essa é uma ferramenta semelhante à que vou criar. Se eu abrir, você pode ver todas as telas divididas aparecerem aqui. Você pode realmente ir em frente e salvá-lo. Eu vou guardar esse. Você pode ver todas as telas individuais aqui. Aqui temos acréscimo e despesa. Vou usar um pouco disso para realmente poder projetar. Você pode ver exatamente como fazer as divisões. Como eles exibem sua página de transações e até têm algumas páginas adicionais aqui embaixo. Ao fazer isso, você pode realmente selecionar telas individuais. Gosto de selecionar essas telas aqui para adicionar fluxo de despesas. Vou seguir em frente e copiar esses três. Eles têm esse plug-in que você pode instalar e, em seguida , acessar o aplicativo e clicar em Executar. Então, a partir daqui, você pode realmente colar as telas. Vou apertar Command V. E ele prosseguiu e colou essas telas aqui Enquanto estou projetando meu aplicativo, vou dar uma olhada nessas telas para me inspirar. Você pode fazer isso, é claro, com vários aplicativos diferentes. Se você pesquisar no Mobiin, certeza encontrará as capturas de tela de seus concorrentes e as usará como inspiração para seus Há mais uma maneira muito útil de usar o mobiin: a guia de fluxos aqui Nas telas, se você realmente mudar para fluxos, poderá pesquisar telas com mais facilidade. Por exemplo, quero dar uma olhada em como as pessoas adicionam despesas de forma dividida. Eu posso ver a categoria dos fluxos. Então, aqui vamos adicionar uma despesa, e temos todas as telas relacionadas à adição uma despesa lado a lado, o que é muito útil. Agora, quando estou criando meu próprio aplicativo, me certifico de não perder nada desse fluxo. Novamente, posso salvar isso na minha coleção móvel, chamá-lo de aplicativo de despesas de viagem, clicar em Criar ou, novamente, posso copiá-lo para o Figma 7. Planejando nossos recursos: Agora que vimos alguns exemplos de aplicativos que executam uma funcionalidade semelhante, vou dar uma olhada nas maquetes ou, agora são principalmente wireframes que Nem mesmo wireframes, mas principalmente apenas requisitos, eu diria Para a página de autenticação, retirei da biblioteca ShatSN Figma, inscrição simples Ou na tela de login, neste caso, vou manter a tela de inscrição muito parecida com uma imagem aqui, inserida à esquerda e, potencialmente, uma verificação de e-mail parecida com esta. Novamente, tirei isso diretamente da biblioteca CN de bate-papo. Agora vou ter uma página de boas-vindas que solicita rapidamente o nome do usuário e potencialmente, até mesmo para fazer sua primeira viagem. Seriam três campos rápidos para obter o nome deles, bem como a primeira viagem, que envolverá o nome da viagem e as datas, mas acho que preferiria colocá-las em vez disso. Então, quando acessam o painel, que é a tela inicial principal, eles veem todas as suas viagens. Eles podem criar uma nova viagem a partir daí Clique em um botão para criar uma nova viagem. Eles veem um Navbar. Em seguida, em cada viagem ou em cada cartão de viagem, haverá um nome dentro dele, possivelmente as datas de quem se inscreveu e você poderá ver quem e quantos status Ou seja, se as viagens foram concluídas, todas pagas ou ainda estão em andamento, digamos, custo total. Agora, isso pode ser opcional. Novamente, nada disso é imutável no momento e no custo para o usuário. Para o usuário que o está visualizando em seu painel, o custo dessa viagem até ele. Então, um link de cópia rápida seria bom para que você nem precisasse entrar na viagem se quiser convidar alguém rapidamente para ela. Esse será o painel, super simples novamente. Então, finalmente, a página da viagem. A página da viagem terá todos os detalhes sobre a viagem. Será o nome, as datas, novamente, potencialmente opcionais. Todas as informações do cartão, até aqui, onde o usuário pode realmente sair viagem ou excluí-la. Se ele a criou, ele pode se inscrever e fornece uma análise simples de quem deve, quanto a quem, se for público ou se um usuário que não está autenticado ou logado visitar, ele uma análise simples de quem deve, quanto a quem, se for público ou se um poderá ver um botão para participar da viagem e, em poderá ver um botão para participar da viagem seguida, será solicitado a se inscrever e participar, super simples, dois cliques Se o usuário estiver criando uma viagem, tudo o que ele precisa fazer é adicionar um nome. As datas serão opcionais e, em seguida, basta clicar em Copiar link para compartilhar. Para adicionar uma despesa, haverá um fluxo simples. Estou pensando novamente, na mesma página, acho que não quero mostrar nem mesmo um pop-up ou outra página, mas quando eu começar a criar, vou descobri-las em detalhes. Em seguida, temos o nome da despesa. Qual foi essa despesa? Qual foi o total? Quem estava envolvido e, em seguida, alguns tipos divididos. Foi igual? Sejam quantidades ou porcentagens específicas entre pessoas, ou mesmo potencialmente, acho que essa é uma nova Eu não vi isso em outras ferramentas, mas há dias. Imagine algo como o Airbnb se alguém ficasse por 20 dias versus 30 dias, basta colocar quantos dias ou quantas noites alguém ficou em comparação com todos os outros e dessa forma, você pode calcular isso facilmente É bom tê-los, mas provavelmente vamos mantê-los fora do MVP, pelo menos para As etiquetas que marcam podem ser tipos de categorias de cercas, era o custo de uma refeição ou era B&B, moradia, etc Depois, também a seleção de moedas. Se você quiser ter várias moedas, isso também seria bom porque, como você pode imaginar, se você tiver várias moedas no aplicativo , pode ficar um pouco mais complicado. Por enquanto, MVP, primeira versão, os usuários vêm reclamar depois Mas, por enquanto, só queremos lançar a primeira versão o mais rápido possível. Então, haverá apenas uma moeda, qualquer moeda que você conheça, use em seu país ou no país do usuário, vamos continuar com ela. Então, tudo está pronto agora. Novamente, tudo isso pode mudar e mudará no processo real de design e desenvolvimento. Você ainda não precisa ter uma imagem nítida disso na fase de enquadramento ou planejamento do fio salgado Vimos alguns exemplos. Reunimos uma lista do que queremos em cada página. Super simples. Novamente, além da autenticação, que tem duas páginas aqui, todo o resto é apenas uma tela de boas-vindas e duas outras telas. Isso é o que realmente é um MVP. Você poderia até dar um passo adiante e diminuí-lo, mas eu diria que esse seria o produto mínimo viável que também é valioso. Queremos que seja valioso. Também não queremos torná-lo MVP muito baixo , pois lembre-se de que estamos cobrando por esse produto e ele não congelará Também queremos ter certeza de que ele agrega valor e tem uma aparência profissional e limpa. Mas não necessariamente você precisa de milhares de recursos para cobrar dos usuários, basta um simples. Sim, vou começar a desenhar agora com todas essas telas. Volte e explique meu processo de design e espero que você faça o mesmo. 8. Revisando os designs: Tudo bem, então terminei de desenhar minha primeira versão. E, novamente, não estou muito orgulhoso disso porque esse deveria ser o MVP Eu montei esses designs em talvez menos de, eu diria, quatro ou 5 horas. A chave aqui é a velocidade e é isso que você quer para sua primeira versão. Hum, então, novamente, eu tenho autenticação aqui. Veja, muitos desses componentes foram retirados da biblioteca ShatSN no Você pode encontrar isso na seção da comunidade. Colei a tela de verificação a partir daí, e essa é muito simples : qual é a sua página de nome Parece um pouco simples, então talvez no MVP real, eu o torne um pouco E então temos o MitripsPage. Eu tenho minhas viagens aqui. Uh, Bali com sete amigos, e isso é o quanto é devido a você Então, imediatamente, você tem uma ideia de todas as suas viagens, quanto lhe é devido ou quanto você deve Então, neste caso, eu devo algo e acrescente esse pequeno toque aqui, como, você sabe, carimbo que você recebe em um passaporte Então, pequenos toques de design como esses ainda são, hum, importantes, eu diria Portanto, MVP não significa que você deva fazer algo feio. Hum, você sabe, não é fácil de usar. Significa apenas a versão mais simples que você pode lançar e que não custa semanas de desenvolvimento. Link de cópia rápida aqui, para que os usuários possam copiar rapidamente a viagem e enviá-la para seus amigos. Eles podem criar uma nova viagem e, se estiverem nesta página e ainda não tiverem nenhuma viagem, terão um pequeno estado vazio como esse. Novamente, retirei esse modelo da biblioteca Chat CN, fiz alguns ajustes nele e aqui estamos Ah, então a página mais importante. Comecei com duas versões. Primeiro, comecei com essa versão e comecei a montá-la, e ela estava um pouco espalhada e me lembrou de Split Wise É aqui que o ChatGPT entra em ação. Na verdade, antes de tudo, perguntei: como posso tornar meu aplicativo diferente? Do ponto de vista do design, quais são as coisas que eu sou diferente. Uma das coisas que ele enfatiza é contar uma história e facilitar a compreensão exata de onde você está com seu equilíbrio. Em vez de liderar com transações, lideramos com o quanto os usuários me devem e eles podem entender facilmente Eu dei o primeiro design para ele e disse: O que você acha disso? Isso é o que eu tenho até agora. Mais uma vez, repetiu comigo. Eu me disse, tenha um resumo mais claro para os usuários. À medida que comecei a atualizar o design cada vez mais, continuei enviando versões e recebendo algumas ideias. Obviamente, eu não implementei tudo isso, mas em algum momento, ele disse que você é bom o suficiente para lançar isso como MVP. Esse era o V One. Eu projetei isso para criar algo assim. Agora, aqui na página de viagens, eu convidei amigos aqui. Esse é o CTA principal, todas as viagens você possa voltar a todas as viagens e, aqui embaixo, ter algumas informações rápidas sobre quem criou a viagem, quando e quantas pessoas estão envolvidas Estou pensando que talvez se você passar o mouse sobre ela, você possa ver a lista real de pessoas ou algo parecido Novamente, essas pequenas interações com as quais lidamos no processo de desenvolvimento real. Você não precisa se aprofundar em seus designs. Então você tem uma lista de saldos , como quem lhe deve quanto imediatamente, você sabe quanto é devido a você no total e quem tem que pagar Nota rápida paga. Você não precisa fazer uma configuração completa em outros aplicativos. Nós vemos a atividade da viagem aqui, então você pode ver todas as transações listadas uma por uma. Quais foram as transações? Título, quem o adicionou e quem estava entre eles Mais importante ainda, quanto você recebe de volta ou quanto você deve se tiver que pagar por algo Novamente, super simples, não adiciona uma despesa aqui. Ainda não trabalhei nessa peça para adicionar uma despesa. Esse é o meu design. Espero que você tenha feito algo semelhante para seu aplicativo. Novamente, mantenha o número mínimo de telas se você ainda não iniciou esse processo e aproveite o ChatGPT e outras ferramentas de IA para fornecer algum feedback sobre ele, mas não confie totalmente nele porque, novamente, não é perfeito, não é um designer, às vezes ele dirá o que você quer ouvir ou lhe dirá algumas coisas extras que podem não ser relevantes. É aí que você, como designer também ou sua equipe de designer, pode sair e revidar ou desafiar um pouco com a IA aqui. Hum, então sim, aí está e é hora de começar a construir isso. Então, antes de entrarmos no Cursor real e criarmos esse aplicativo, vamos ver qual pilha realmente usaremos 9. Escolhendo uma pilha: Tudo bem, finalmente chegue à parte empolgante, criando nossa primeira versão, nosso aplicativo MVP. Vamos examinar a pilha que vamos usar ou pelo menos eu vou usar Se você quiser acompanhar, use a mesma pilha, por favor, faça isso Se você já tem uma pilha de sua preferência, a mesma pilha se refere essencialmente a todas as ferramentas e ao que você está usando para codificar seu aplicativo ou dar vida a ele No momento, estamos apenas projetando o Figma , um aplicativo que nos permite projetar nossas telas Mas para realmente transformar esse design em um aplicativo web funcional real e disponibilizá-lo para que as pessoas usem, paguem, recebam e-mails , etc., precisamos usar uma pilha para basicamente fazer tudo funcionar, tanto em termos do front-end, que é a parte do design, quanto do back-end, que é toda a parte do servidor que lida com todas as informações e dados. Então, rapidamente, vamos analisar o que vou usar e então você decide por si mesmo se quer continuar com isso ou usar outro veado As principais ferramentas que usarei para codificar este projeto serão o Cursor, que é a ferramenta de codificação de IA Ele tem um agente de IA integrado com o qual você pode conversar e, claro, usa modelos como Cloud e GPT Hum, e outros para dar vida à ideia. Depois, temos o repositório de código no Github. É aqui que o código será armazenado. Toda vez que você atualiza o código, ele também o envia ao vivo para os usuários, o que discutiremos em um segundo como isso funciona. Para a pilha, o aplicativo web real será construído com o NexGS, o que nos permite criar aplicativos e APIs de front-end e back-end e, para o banco de dados, como armazenaremos os dados ou onde armazenaremos os dados, será via Mongo DEB, que é super fácil de É aí que vou usar para armazenar meus dados de usuário e de viagem. Next ATJS está essencialmente nos permitindo autenticar usuários, então eles permitem que eles simplesmente se inscrevam, tenham algumas opções simples de inscrição, como login com o Google, e-mail, etc Versal é o que usaremos para implantar nosso código. Depois que nosso código no GitHub for implantado, ele ficará no Versal, que basicamente hospeda o aplicativo e o back-end A partir daí, podemos até ver coisas como análises, registros e coisas assim. Stripe será a empresa de pagamento que nos ajudará a processar pagamentos para este aplicativo Novamente, decidiremos como definir o preço do nosso aplicativo, mas quando o fizermos, Stripe será a ferramenta que usaremos para processar esses pagamentos O Resend é uma ferramenta de envio de e-mails. Tanto para notificações quanto para e-mails de login, usaremos o Reenviar para enviá-lo. Praticamente tudo isso é gratuito para começar Todos eles têm planos pagos, é claro, e coisas como o Stripe, Stripe cobra apenas a porcentagem das transações, então você não precisa se preocupar com nenhum outro pagamento delas Novamente, todos os outros, sejam gratuitos ou gratuitos. Esses são alguns opcionais. O AW é para armazenamento. Se você quiser armazenar imagens de usuários ou uploads de recibos, no meu caso, farei isso usando a AWS Novamente, para MVP, provavelmente deixando isso de fora. O Google Analytics é uma boa opção para acompanhar os dados de visitantes e usuários. Outra boa ferramenta de análise é PostHG, onde você pode até obter mais informações, como mapas de calor, como os usuários estão interagindo e o que eles veem quando interagem Muito bom para depuração e coisas assim para descobrir onde estão os problemas Então, definitivamente, uma boa e útil. Mas, novamente, a censura opcional do Super base substitui o banco de dados e, portanto, você não precisará do Next JS e do Mongo portanto, você não precisará do Next JS e Se você usa o Super Base e acredito que até mesmo para alguns e-mails , você provavelmente também não precisará dele. Vou substituir algumas coisas. Mas, novamente, eu realmente não o usei porque não vejo muita necessidade de já termos uma pilha para descobrir isso Se você está estudando e quer experimentar, pelo que eu sei, também não é uma opção ruim. Essa é a pilha que usaremos. Agora vamos começar pulando para o Cursor. Antes disso, vamos realmente configurar nosso projeto no próximo vídeo e depois voltar para começar a trabalhar nele. 10. Configurando nosso projeto: Tudo bem. Antes de começar, você deseja instalar o NoJS Acesse nojs.org e clique em Genjs. Você precisará disso para poder realmente criar um novo aplicativo usando a pilha que discutimos Novamente, se você não quiser seguir essa pilha e já tiver sua própria ou já não descobriu o JS, não precisa seguir isso Isso se você está fazendo isso pela primeira vez e nunca criou um aplicativo NoJS Quando terminar, você deve seguir em frente e abrir o terminal. Então, na sua máquina ou na pasta do aplicativo, vá em frente e encontre o aplicativo chamado terminal. Parece algo assim, e então você pode realmente criar uma pasta em seu desktop ou em qualquer lugar onde você já guarde, talvez código ou outros projetos para si mesmo. Se você tiver uma pasta, é melhor navegar até essa pasta. Eu já tenho uma pasta chamada code. Eu só vou fazer um código de CD como este. Lá vamos nós. Estou dentro da pasta de códigos. Obviamente, se você tiver uma pasta para si mesmo, faça isso lá. Você não precisa. Isso é apenas mais para organização. Então você quer escrever NPX, criar o Next App, inserir Enter e ele perguntará qual é o nome do projeto Por enquanto, vou ligar para esse aplicativo Trips e clicar em Enter. Na verdade, vou personalizar as configurações, então vou escolher minhas próprias preferências, basta ir até aqui. Não vou usar o TypeScript, vou usar yes int, aperte não para este, sim para aquele O resto, vou manter o padrão. Sim, não. Pronto, está sendo instalado. Novamente, é assim que eu configuro projetos, você não precisa seguir isso, mas é assim que eu faria. Ela está criando esse projeto agora mesmo. Agora, dentro dessa pasta, eu tenho esse aplicativo de despesas de viagem e ele criou todos os arquivos. O que eu quero fazer agora é realmente abrir essa pasta dentro do Cursor. Eu já tenho o Cursor instalado. Se você não o tiver instalado, vá em frente e faça isso. Então, uma vez que eu abro o Cursor, vejo que tenho essa interface aqui. Eu gosto de ter a barra lateral aqui, a barra lateral principal. Você também pode executar o Comando B. E agora você pode ver todas as pastas aqui, o que é perfeito. Você pode até mesmo seguir em frente e executar este projeto. Vou abrir um novo terminal acessando a guia na barra de status ou na barra de menu pressionando terminal e clicando em Novo terminal. Aqui, se você executar o NPM run Dev So, ele prosseguirá e realmente executará o projeto e abrirá em um novo navegador Assim. Se você tiver isso, significa que você criou um aplicativo sem JS e está funcionando bem. Isso funcionará como nossa base para o código ou o projeto que usaremos Vamos voltar na próxima palestra para enviar isso para o GitHub ou repositório de código 11. Usando Git: Tudo bem. Queremos realmente colocar nosso código que acabamos de criar, mesmo que seja uma base no momento , no Git Hub para que o código seja armazenado lá Dessa forma, quando atualizamos nosso código, podemos enviá-lo para lá para que seja salvo com todas as alterações. Posteriormente, quando conectarmos o versal, que, se você se lembra, é a plataforma de hospedagem, ele pegará automaticamente o código mais recente do GitHub e o implantará nos usuários ou on-line em seu domínio para que usuários ou on-line em seu domínio para os usuários possam usar seu produto Hum, é super simples configurar o Git por meio do Inside of Cursor Obviamente, você pode fazer isso por meio do github.com e inscrever lá, então crie uma conta se você ainda não tiver Mas aqui, se você simplesmente acessar a guia Git essencialmente aqui, poderá criar seu primeiro, você sabe, Commit Vou apenas fazer um Commit inicial como esse e publicar este branch. Agora, agora, está me dizendo, você quer fazer disso um repositório público Quer dizer que todos no GitHub podem ver meu código ou um código privado Na maioria dos casos, você deseja criar um repositório privado a menos que esteja fazendo algo como um projeto de código aberto Caso contrário, você escolherá privado e, imediatamente, ele publicará nele. Depois, você pode até mesmo abri-lo no GitHub. Se você clicar em Abrir no GitHub, ele criará na minha conta do GitHub esse aplicativo de despesas de viagem como um repositório privado com todo o código Agora, se você fizer alguma alteração no código, apenas como exemplo, vou para page dot JS, que é, você sabe, a tela inicial que vimos. Então, primeiro de tudo, vou me certificar de que o aplicativo está em execução. Então, essa tela inicial, digamos, eu só quero atualizar o texto aqui para começar, hum, você sabe, e mudar isso para despesas de viagem. Clique em Salvar que, a propósito, atualiza isso automaticamente . Agora temos isso. Então, podemos ver se você vai até a guia Git, podemos ver que há mudanças no ponto da página JS, e podemos ver se você clicar exatamente o que mudou, essa linha muda para isso, o que é certo, e então podemos realmente fazer essa alteração no texto do Commit Então, clicaremos em Confirmar e sincronizaremos essas alterações. Essa alteração agora também está disponível no GitHub. Se você acessar o repositório If I open this Git Hub, novamente, você pode ver que agora mesmo houve um commit e eu posso ver todos os commits Isso facilita o controle de todas as alterações que você fez em seu código ao longo do tempo. Caso tenha de todas as alterações que você fez em seu código ao longo do tempo cometido um erro em algum lugar, você sempre pode voltar para um desses commits É por isso que usamos o Git em todo o projeto enquanto eu Você vai me ver usá-lo várias vezes entre cada recurso, implementação ou tela para que eu acompanhe o progresso. Caso haja algum problema novamente, eu possa voltar ou reverter para a confirmação anterior 12. Escolhendo o modelo de cursor: Eu queria abordar brevemente as diferenças entre os diferentes modelos e modos de agente e como eu os uso. Em termos de modos, você tem o modo Agente, que estamos usando para fornecer tarefas para o Cursor concluir para nós. Mas também temos o modo de planejamento. Antes que o agente realmente tome medidas para alterar o código, pedimos que você planeje as coisas e nos fale sobre o que ele fará e como implementaria algo para que possamos revisar um documento antes que ele realmente seja implementado Há também o modo de depuração, que você pode solicitar para resolver bugs especificamente, e também modo Perguntar se quiser apenas fazer perguntas sobre seu código ou sobre como seu aplicativo funciona no momento Nos modelos, você pode realmente desativar o Auto se não quiser e ativar o modo Máximo se quiser a quantidade máxima de tokens usados para essa tarefa. O Composer é o próprio modelo do cursor que funciona muito bem. Já tentei isso várias vezes. O Ops também é ótimo, incluindo o Sont. Normalmente não trabalho com os modelos GPT, mas eles também estão disponíveis aqui Meu favorito pessoal também é Sonnet ou Ops Composer. Mas lembre-se de que isso não é necessário, a menos que você esteja executando tarefa mais complexa ou complicada a qual o automde normalmente teria dificuldade Uma vez que você tenha um pouco mais de complicação ou tarefa complicada para dar ao Cursor, é aí que eu usaria esses modelos, tendo em mente que, é claro, custava mais tokens e créditos usá-los 13. Como adicionar a página inicial: Claro, há várias coisas que você pode fazer a partir daqui. Ou configure as rotas de API para o back-end, você pode criar o banco de dados e configurar o MongoDB Você pode configurar a interface do usuário e os designs. O que eu gosto de fazer pessoalmente é configurar primeiro os designs e depois entrar na funcionalidade do aplicativo Um dos maiores erros que vejo na codificação do Vibe é dar ao aplicativo tudo para fazer de uma só vez Depois de fazer isso, você tecnicamente perde o controle de tudo e precisa voltar e pedir que ele faça alterações em todo o lugar Mas se você mantiver todo o aspecto de codificação do Vibe controlado, dando apenas uma tarefa, uma coisa por vez, para trabalhar, não só podemos controlá-la e contê-la porque podemos ver o que ela está fazendo em cada página de cada vez, mas também é melhor porque é mais organizada e há menos chances de ocorrerem bugs Embora eu tenha certeza de que ainda haverá bugs, vou começar com a interface do usuário. Vou começar com a página inicial. Aqui, de volta aos designs, temos as páginas de autenticação, e tenho certeza de que você também pode precisar de páginas de autenticação para si mesmo. Mas minha página principal é uma página de painel, e se você tem uma página de painel ou página inicial como essa, você sempre pode começar com essa e é isso que eu encorajo você a fazer Hum, e vamos usar o que é chamado de servidor Figma MCP, que basicamente cria uma conexão entre Figma e Cursor para poder ou fazer isso facilmente , para que possamos copiar um link do Figma, colá-lo no Cursor, e na verdade pegaremos todas as propriedades da tela, e na verdade pegaremos todas as não apenas capturas de tela, e versão limpa desse design ou interface do usuário. Uh, então para fazer isso, você precisará do Figma Pro, precisará da conta de nível profissional e, em seguida, mudará para o modo Dev aqui Aqui, você pode ver o MCP neste painel. Se você não vê, você pode ter o MCP desativado. Se você tiver o MCP desativado, você verá esse servidor MCP de desktop habilitado . Você vai acertar isso. Em seguida, você habilitará o MCP nesse URL e copiará isso Depois de copiar isso de volta no Cursor, se você estiver usando outras ferramentas, elas também têm MCP para a maioria delas Pesquise um pouco sobre sua ferramenta e como configurar o MCP Para o Cursor, você acessa as configurações, acessa as ferramentas e o MCP e, em seguida, acessa o novo servidor MCP e substitui esse URL pelo que obteve da FICMA Eu já o tenho configurado, então não vou fazer isso, mas certifique-se de clicar em salvar depois de fazer isso. Então, se você fez a coisa certa, você deve ver FICMA com o número de ferramentas habilitadas e está habilitado aqui Certifique-se disso antes de continuar. Dessa forma, o que você pode fazer é simplesmente clicar na página desejada. Quero a página do painel. Copie esse prompt aqui, embora façamos algumas alterações nele e depois o traremos nele e depois o traremos volta para o novo bate-papo aqui no Cursor. Cole-o. usar apenas um modelo de automóvel para este. Mas é claro que existem outros modelos que você pode usar e falaremos um pouco sobre os modelos e como escolher um mais tarde. Mas, por enquanto, um modo automático deve ser suficiente. Vamos escrever algumas notas abaixo disso. Vamos nos certificar de transformar cada cartão em um componente. E certifique-se de transformar o Navbar em um componente. O que estou dizendo ao Cursor é pegar a Navbar e esses cartões e transformá-los em componentes para que possamos facilmente fazer alterações neles posteriormente e nosso código fique mais limpo Vamos apenas fazer isso, aperte Enter. Vou começar a fazer isso. Agora, se você tiver o MTP funcionando corretamente, verá que ele solicitará algumas permissões em apenas um minuto. Aí está. Você vê que está funcionando, obtenha o contexto de design Figma. Você pode ver as capturas de tela. Novamente, ele pode solicitar algumas permissões se você não tiver executado isso antes. Vamos esperar um minuto. Enquanto isso, vou voltar para a página inicial e ver quais mudanças ela faz ou o navegador de arquivos real, devo dizer Agora está começando a criar cada componente, criando um componente NAVR, um componente cartão de viagem e atualizando a página com o uso do NAVR e do cartão de viagem Novamente, estamos nos concentrando primeiro no design e, em seguida, na implementação real dos recursos, banco de dados e na funcionalidade da criação real da viagem e tal. Está tudo pronto. Ele nos deu um resumo de tudo o que fez com esses componentes e atualizou a página que JS. Vamos manter todas as alterações voltar ao nosso navegador que está executando este aplicativo. Aí está. Este é o design, foi copiado da Figma. É muito decente. Obviamente, tem problemas como esses ícones esticados, mas está muito próximo do que queremos que seja eventualmente Vou fazer mais uma coisa e fazer com que ele instale o ChaDSN para usar componentes de lá no futuro Como estou usando a biblioteca ShatSN, quero ter certeza de que ela tenha acesso aos componentes do Shad CN Ele deve prosseguir e instalá-lo e procurar o Shad CNUI, instalá-lo e , com sorte, fazer algumas atualizações para que esses botões venham, na verdade, do Shad CN, em vez dos botões codificados personalizados Vou deixar que faça isso. Você pode fazer a mesma coisa e, em seguida, voltaremos na próxima palestra para aperfeiçoar isso e seguir para nossa página de viagem 14. Refinamentos no design: Eu fiz algumas coisas aqui para tornar o design um pouco melhor. Eu só vou te mostrar aqui. Corrigi os problemas com a elipse e o texto interno que não estava lá e esse SVG que estava esticado Para fazer isso, escrevi algumas instruções. Vou examiná-los rapidamente porque, novamente, não quero enfatizar muito a fase de construção ou essa parte do edifício, mas sim dizer rapidamente que tipo de instruções dei à IA Eu me certifiquei de que isso aumentasse a elipse do texto. Mas, na verdade, antes disso, deixe-me começar com o que fiz inicialmente. Inicialmente, dei duas correções para fazer. Eu disse: Certifique-se de que haja uma camada de texto ao redor da elipse interna e repita os nomes das cidades exatamente como no design Figma Você quer se referir ao design Figma que você deu a ele e o logotipo simples está reduzido Você pode ter certeza de que ele preserva Não fez um bom trabalho dessa vez. Então, o que eu fiz foi examinar o Figma, selecionar essa camada simples e exportá-la como um Como SBG aqui. Depois de exportar isso, certifique-se colá-lo na pasta pública. Se você entrar nas pastas onde está o arquivo do seu projeto, certifique-se de colar dentro dessa pasta pública qualquer ícone que desejar, pois é aí que os ícones devem ser armazenados. Você pode até mesmo criar pastas aqui e isso é uma boa prática. Se você quiser criar uma pasta de ícones e depois armazenar todos os seus ícones lá. Vou manter as coisas simples e colocar tudo dentro. Então eu fiz um trabalho decente. O texto era um pouco pequeno demais em comparação com a elipse que já estava lá, o círculo Eu me certifiquei de que é do tamanho certo. Eu só pedi que fizesse com que seguisse o mesmo caminho. Um era mais circular do que oval, então eu me certifiquei de que combinava e ele fez um ótimo trabalho e eu disse a ele que usasse o SPG para o avião Mais uma vez, alguns pequenos ajustes tornam os textos um pouco maiores Então, se você precisar fazer algum ajuste, diga a ele um pouco menor ou maior, gire o avião SPG porque ele estava voltado para o lado errado Portanto, certifique-se de dar a ele aquelas rotações específicas de 90 graus, etc Novamente, então o carimbo de data foi apagado. Como você pode ver nos designs aqui, parece muito bom. Mas, inicialmente, no aplicativo, isso não aconteceu. Mas então eu pedi para ter certeza de que estava no centro. Então agora parece muito bom. Novamente, alguns microajustes, abaixe o texto, tente um a cinco, faça algumas alterações. Você me disse que esse é o preenchimento de 110 pixels, em vez de 100, eu disse tentar um em cinco porque era demais. Forneça números específicos quando puder. Em seguida, voltaremos e trabalharemos na página da viagem. 15. Página de viagens: Portanto, antes de continuar, vou me certificar de escrever um design de cartão de viagem atualizado e confirmar essa alteração. Novamente, entre as alterações que você faz, você deseja enviar para o Github de vez em quando para poder acompanhar tudo e todas as alterações feitas Caso você precise reverter, isso também facilita muito. Na nossa próxima página, que é a página da viagem para mim, eu acho, esta aqui. Esse é o atualizado. Vou mudar para o modo Dev, copiar o link MCP e minimizá-lo Novamente, certifique-se de que tudo o que você selecionar vá para a Figma Certifique-se de Cursor. Certifique-se de que, no Figma, você selecione o quadro inteiro Certo, então certifique-se criar um novo bate-papo em sua seção de bate-papo de IA aqui para que ele não use muito crédito ou que você não faça um bate-papo muito longo, que pode ser ineficiente para as mudanças, bem como para a base de crédito Você quer ter certeza de criar um novo bate-papo, pressionar Command ou Control no Windows e, em seguida, colar esse link do Figma na página de viagens e fornecerei algumas informações Eu vou dizer, adicione uma nova página de viagens. Com base nos designs abaixo, o usuário navega até esta página clicando no cartão de viagem na página inicial Deixe-me dar uma outra olhada nos designs e ver se há mais alguma coisa. Novamente, vou fazer com que os cartões de saldo em componentes, bem como transformem os cartões de despesas em componentes. O resto parece bom. Mais uma coisa que eu quero fazer é garantir que isso esteja sendo baixado, para que ele baixe os ícones. Às vezes, porém, isso não funciona Talvez precisemos exportar manualmente os ícones e as imagens para o nosso projeto Mas vamos ver como isso acontece na primeira tentativa. Vou fazer uma pausa e voltar quando estiver pronto. Tudo bem Está pronto e me dá um resumo de tudo o que foi feito, incluindo o componente do cartão de saldo, o cartão de despesas e a página de viagens, bem como as rotas. As rotas são como as pessoas navegam em seu aplicativo NextGS e, portanto, ele lida com tudo isso. Agora podemos experimentar e até mesmo criar o link aqui. Trips Slug é essencialmente o ID dessa viagem. Está até mesmo estabelecendo algumas das bases para nosso back-end posterior, o que é incrível. Até agora, não tivemos nenhuma integração de back-end ou servidor. Mas faremos isso em breve e isso será muito útil. No processo, aqui está um pouco confuso o design dos cartões de viagem Vamos corrigir isso em apenas um segundo. Mas vamos ver se clicamos em um. Temos um erro. Isso é muito comum quando você trabalha com IA. Se você receber um erro como esse, basta copiar as informações do erro aqui passá-las de volta para o seu agente de codificação Apenas deixe que ele analise esse erro e corrija-o. Na maioria das vezes, é algum erro lógico ou se esqueceu de definir uma variável ou algo parecido , em que geralmente é pequena e será corrigida imediatamente. Espere um pouco. E enquanto está fazendo isso, podemos voltar aqui e lá vamos. Está consertado e parece ótimo, para ser honesto. É logo de cara, é o mais perto que podemos chegar dos designs da Figma Novamente, essa é a beleza do MCP. Isso teria levado pelo menos alguns dias para fazer isso antes. Mas agora temos tudo isso. Obviamente, não fez nada que você não tenha mandado. Adicionar despesas ainda não funciona. Todas as viagens funcionam, retornam a todas as viagens. Convidar amigos ainda não faz nada, nem esses três pontos aqui. E você pode ver que ele criou duas versões diferentes. Há essa versão aqui para Tóquio. Mas se eu voltar, também há essa versão para Bali, elas parecem diferentes Ainda não são botões, então, é claro, temos algumas coisas para corrigir. Vou anotar essas coisas e você também deveria. Ao montar cada página, anote o que está errado. Vou anotar que o botão aqui precisa ser corrigido Anote a despesa adicional, mas também para essa, vou criar uma nova solicitação para ela. O resto parece bom, mas é claro que há problemas como esses problemas de alinhamento. Você vê que este aqui está alinhado. Pequenas coisas assim, anote e passe de volta para a IA. Não há gradiente aqui atrás da seta, como eu tenho em meus designs É uma coisa muito pequena e sutil. Vou fazer essas correções porque elas são menores e depois voltarei e continuarei com o resto do fluxo, o que aumentará as despesas. Além disso, vou trabalhar na criação de uma nova viagem. Essas são duas coisas nas quais vou trabalhar a seguir. Hum, e novamente, para seu aplicativo, acompanhe. Mas se você está fazendo exatamente a mesma coisa, você sabe, você pode acompanhar exatamente. 16. Roteamento para o painel: Tudo bem. Meu cursor agora está fazendo pequenas alterações, como o gradiente aqui de que eu estava falando Agora, uma coisa que quero dizer é que uma pequena mudança que quero fazer e garantir que você faça em seu projeto é aquele projeto na pasta do seu aplicativo, seu ponto de página JS é inicialmente a página original que aparece. Então, no nosso caso, agora, é apenas um host local, 3.000 Não há nenhum tipo de barra, página de soma. Quando você está aqui, olhe Bali, basicamente você está vendo , dentro desta pasta do aplicativo, a página de viagens É aí que você tem esse ID de viagem. Também queremos mover nossa página aqui agora, esta aqui. Se você tem uma página de painel como esta que eu tenho, não quer que seja o JS de pontos da sua página , porque na verdade é para sua página de destino. Quando as pessoas acessam seu site, a página de marketing, a primeira página que aparece, por exemplo, aqui para a versão atual do QClip, é esta página, então eu tenho uma página de painel O painel Slash é, na verdade, a página do painel. Uma pequena mudança, eu vou tê-la e vou fazer isso em um novo chat. Certifique-se de que o JS da página atual se torne uma página de painel. E altere o ponto da página JS para ter apenas um texto reservado para nossa página de destino Não queremos que ele crie uma landing page agora. Nós vamos fazer isso daqui a pouco. Mas, por enquanto, eu só quero ter certeza de que essa página se torne uma página de painel para que não haja confusão no futuro. Certifique-se de fazer algo assim também, caso contrário, pois isso faz uma alteração. Se voltarmos aqui, a página de destino estará disponível em breve e , se você acessar o Slash Dashboard, pronto Temos uma página de painel aqui. Só para simplificar, vou dizer que adicione um botão na página de destino que me leve ao painel. Assim, toda vez que lançamos o projeto, por padrão, acessamos a página de destino, que atualmente está aqui. Queremos ter apenas um botão. Novamente, isso é temporário apenas para que possamos acessar esta página rapidamente. Então, continuarei fazendo pequenas mudanças, principalmente no design e na funcionalidade como esta aqui para o lado do design. Então, quando as coisas estiverem prontas, prosseguiremos ou eu continuarei adicionando uma despesa e adicionando um fluxo de viagem. Mais uma coisa que vou fazer é, hum, você sabe, alterar os links de todos os botões que estavam anteriormente vinculados à Página JS para ir para a porta JS, na página Trips. Só quero ter certeza de que esse link também será alterado aqui. Todas as viagens devem voltar para o Dashboard em vez da página inicial ou, novamente, para a página de destino Certifique-se de fazer essa alteração. Apenas algo sutil para observar. 17. Adicionando despesas: Tudo bem, as coisas estão começando a ficar bem e muito mais limpas, então vou prosseguir e fazer as mudanças. Altere os cartões e adicione a página de viagens. Vou sincronizar essas alterações agora, quero adicionar meu fluxo de adição de despesas. Eu já o desenhei aqui porque percebi por que não é mais fácil passar isso para o Cursor Aqui, vou clicar duas vezes para selecionar este cartão que basicamente adiciona uma despesa e , em seguida, vou até o MCP para copiar o link ou o modo Dev aqui no Cursor criar um novo bate-papo, cole e diga: adicione um cartão para permitir que os usuários adicionem despesas ao clicar em adicionar despesa. Mas na página de viagens, você quer ser específico dessa forma, dar um exemplo de onde está, embora provavelmente também descubramos, mas isso facilita um pouco. Não se esqueça de inserir este blog e, se o usuário clicar em Cancelar, feche-o Se houver alterações feitas no interior ou números adicionados nos campos de entrada, mostre primeiro um alerta e, em seguida, cancele ou feche-o. Tudo bem. Dei algumas instruções lá e a principal delas foi se o usuário clicar para cancelar essa despesa, certifique-se de que ele realmente seja avisado, ele realmente quer fechar isso ou não Dessa forma, eles não perdem alguns dados. Um resumo muito rápido. Aqui eu tenho um campo de valor, então o usuário coloca o valor. Diz a eles para que servia. É aqui que a categoria aparece aqui. Ou o nome da despesa. Então é assim que se divide. Normalmente, a divisão por padrão é igual, então é igual entre todos. Mas então, se quiserem, eles podem realmente entrar e alterar os números e, dinamicamente , eles serão atualizados Se eles quiserem usar uma base percentual, eles podem fazer isso. Se eles usarem dólar por dólar, eles podem fazer isso, ou se quiserem por dia, eles também podem fazer isso. Então, se você se lembrar, ele calculará quantos dias a partir do total da viagem, essa pessoa dormiu neste Airbnb, portanto, cobra a quantia certa e, em seguida, adicionará as despesas Então, muito simples e direto. Ele começará a fazer isso e vamos ver o que ele faz em um minuto. Tudo bem. Está funcionando e vamos ver com um custo. Portanto, é óbvio que ele não acessou os designs do Figma. Eu posso dizer pelo design, mas não estou seguindo exatamente como deveria ser. Vou perguntar: você seguiu exatamente os designs da FICMA e perguntou isso Não tínhamos acesso, buscando os designs agora. Às vezes isso acontece. Ele comete erros, na verdade não o acessa por qualquer motivo; talvez seja necessário solicitá-lo novamente. Apenas um lembrete amigável, talvez você precise fazer isso várias vezes se isso não acontecer na primeira vez Vamos ver o que ele faz desta vez. Desta vez, ele consertou o problema. Na verdade, eu insiro alguns números. $20 calcula automaticamente tudo até $30, aí Você pode remover pessoas dela. Esses provavelmente não são os estados certos, então eu só preciso atualizar essas pequenas coisas. Você pode fazer uma base percentual. E isso também não parece certo. Novamente, talvez eu precise fazer algumas alterações aqui e ali para garantir que, de acordo com os detalhes, ele o atualize Mas o design básico é decente. A colocação delas, é claro, não está correta, mas pelo menos nos pergunta se queremos realmente descartá-las, pagando alguma despesa, e então você não pode, agora está permitindo que você adicione despesas vazias Pequenas coisas assim precisam ser consertadas. Mas faremos essas mudanças e continuaremos na próxima palestra. 18. Páginas de autenticação: Tudo bem, estamos entrando na essência do curso, na fase de construção, e ficando mais reais com ela. Mudei a configuração da luz atrás de mim para combinar com essa vibração. Mas, basicamente, vamos começar a trabalhar em nossa autenticação agora. Então, vou executar o projeto e revisar mais uma vez onde estamos. Eu tenho minha página do painel configurada. Obviamente, esses são dados de teste e não reais, então vamos começar a criar viagens reais e dados reais. Por enquanto, tudo isso são apenas testes, mas eu tenho uma primeira interface de usuário funcionando. Obviamente, ainda há melhorias a serem feitas, mas não entraremos em detalhes. Na verdade, ao criar seu MVP, você deve priorizar o momentum e divulgá-lo rapidamente, em vez dos pequenos detalhes que, como designer, às vezes também adoro corrigir pequenos detalhes de design e, até certo ponto, eles são importantes, certo ponto Sim, eu também tenho o fluxo de despesas adicionado aqui para mim. Novamente, não é perfeito. Ainda há ajustes a serem feitos Mas acho que é um bom momento para realmente começar a trabalhar na autenticação. Em outras palavras, permitir que os usuários realmente façam login e criem uma conta. Para isso, vamos usar duas ferramentas. Vamos usar o ATJS que é essa biblioteca que permite que você faça login com seus usuários usando aplicativos diferentes, como Github e Google, Twitter, Apple, além de e-mail, Novamente, vamos fazer o MVP e vamos ficar apenas com o e-mail por enquanto Mas, obviamente, para configurar esses, você também pode passar por isso. Eles só levam um pouco mais de tempo e um pouco mais de configuração por si só. Na verdade, você pode seguir as instruções para aqueles sobre como configurar, por exemplo, Google. Por enquanto, começaremos com apenas o login por e-mail, que os usuários insiram seus e-mails. Vou enviar a eles um link mágico para fazer login. E para esse link mágico, precisamos realmente enviar e-mails. Para enviar e-mails, usaremos essa ferramenta chamada Reenviar e esse reenvio basicamente permite que você envie até 3.000 e-mails por mês gratuitamente Essa é uma ótima opção. Então vá em frente e comece a criar uma conta para o Resend Eu vou fazer a mesma coisa aqui. Tudo bem. Então, depois de entrar, você pode criar uma chave de API para suas contas, vá em frente e faça isso. E certifique-se de copiá-lo. Agora, o que você vai querer fazer é voltar ao Cursor ou onde quer que tenha seus arquivos e criar um novo arquivo, e chamá-lo exatamente com a grafia de ponto ENV ponto Local Portanto, esse é um arquivo de ambiente em todas as suas chaves de API serão armazenadas para que essas chaves de API possam ser usadas para autenticar seu aplicativo com reenvio para envio Este é um arquivo super privado. Você não quer postar ou publicar isso no GitHub. É por isso que, na verdade, está automaticamente no arquivo Ignorar, que ignorará o upload desse arquivo Na verdade, esse arquivo define o que será enviado para o GitHub versus o que não é e os arquivos DOT ENV não serão São secretos. Você quer manter isso em segredo e em sua máquina. Hum, então, por aqui, você pode realmente digitar como quiser, mas eu gosto de apenas reenviar a chave de sublinhado da API de sublinhado, igual a, e depois colar Depois de colar seu valor, clique em Salvar e feche o arquivo. Agora, também queremos configurar o Auth JS. Então, vamos dizer, você sabe, Cursor para nos ajudar com isso. Mas primeiro, vou realmente copiar o design de nossas telas de autenticação. Então, eu vou fazer isso aqui. Eu vou até aqui. Lá vamos nós. Vamos implementar essa tela de login da Figma. Primeiro, vamos implementar o design antes de realmente integrar a tela de login. Vou me certificar de usar os elementos Shad CN. E esta página deve ser uma barra Login. Estou lhe dizendo qual nome criar, embora provavelmente você tenha descoberto isso de qualquer maneira, mas estou dizendo que você crie explicitamente uma página de login em Quando você acessa seu app.com, clique em Login, pessoas e nesta página Vamos começar com isso. Voltaremos em um segundo para ver como funciona. Vamos cortar o Login. E lá vamos nós. Nada mal, muito perto do que temos. Nós nos preocuparemos com o gráfico aqui mais tarde, quando tivermos nosso aplicativo funcionando. Mas isso é ótimo. Novamente, há pequenas coisas a serem corrigidas quando estou passando o mouse sobre os botões Esse botão de login não está mostrando o cursor direito Novamente, para essas pequenas coisas, certifique-se de informar no botão de login que o tipo correto de cursor do link não está aparecendo. É assim que você deseja abordar seu conjunto de correções pequeno e um de cada vez. Então vemos que temos uma inscrição. Ainda não temos uma tela de inscrição, então também vou pedir que ela duplique esta página e também crie uma versão de inscrição no slash sign up Eu coloco isso na fila. Em seguida, ele funcionará nisso. E enquanto estiver fazendo isso e encerrando, vamos voltar na próxima aula para continuar com nossa configuração de autenticação 19. Banco de dados: Tudo bem, eu tenho uma página de inscrição em andamento e antes que possamos realmente fazer nossa autenticação funcionar, precisamos configurar um banco de dados. Portanto, o banco de dados é onde os dados são armazenados. Então, quando um usuário insere seu e-mail, a senha e deseja criar uma conta, é aqui que, no banco de dados, essencialmente, um registro de conta será criado, e sempre que precisarmos fazer atualizações para esse usuário ou adicionarmos viagens ou precisarmos adicionar despesas Tudo isso tem que ser separado. Você pode pensar neles como tabelas ou categorias separadas de documentos que precisamos usando um banco de dados. Para nosso banco de dados, usaremos o MongoDB. Claro, existem outras opções como Postgres e Neon e muitas Se você já está acostumado com um, escolha-o. Caso contrário, começar a usar o Mongo DB é simples. Acesse mongodb.com e comece. Já tenho uma conta, vou entrar. Depois de fazer login, certifique-se de criar um novo projeto Vou apenas nomear meu aplicativo Project Trip Expense por enquanto. Novamente, você pode alterar isso mais tarde. Clique em Avançar. Clique em Criar projeto. Então, quando estiver aqui, você quer continuar e criar um cluster. O cluster é essencialmente um contêiner para seu banco de dados. É aqui que algumas opções aparecerão. Vou escolher o gratuito com o qual é bom o suficiente para começar e, à medida que você obtém mais e mais usuários, talvez queira fazer o upgrade para os outros. Apenas para deixar o cluster zero como nome e depois deixá-los com as configurações padrão, crie a implantação. Agora, imediatamente, você verá uma senha de nome de usuário aqui. Você vai prosseguir e clicar em Criar usuário do banco de dados. Você vai escolher um método de conexão e eu vou escolher a bússola Portanto, o Compass é esse aplicativo que reside em sua máquina e você pode gerenciar essencialmente os dados Por meio dele, você pode ver os dados Você não precisa fazer login em mongodb.com toda vez em seu navegador Na verdade, você pode simplesmente usar este aplicativo MongoDB Compass para fazer Vá em frente e faça o download. Reserve um segundo para fazer isso, se você não tiver. Eu já o tenho, então vou clicar Eu tenho o Compass instalado Então, aqui embaixo, você obterá uma string para sua conexão. Você precisa dessa string novamente para tê-la dentro do seu código. Certifique-se de copiar isso. Clique em concluído aqui. Volte para o seu código e, dentro do ponto ponto Local que criamos, você criará uma nova linha, URI de sublinhado do Mongo é igual, e depois cole a string que você obteve Clique em Salvar e feche isso. Agora, uma vez dentro da bússola do MongoDB, você pode adicionar uma nova conexão colar a URI que Vou mudar o nome para aplicativo de despesas de viagem aqui e depois salvar e conectar. Então, eu estou dentro daqui agora. Ainda não há dados, então não há nada aqui que você possa ver. Nós vamos fazer mais uma coisa. Você voltará ao seu próprio local no final da string aqui, onde diz mongodb.net slash, você escreverá Dev DEV Não importa necessariamente como você o escreve ou mesmo se você escreve desenvolvimento ou algo assim. Isso é tudo apenas para criar uma pasta aqui chamada Dev ou um contêiner, você pode pensar nisso que basicamente separa seu banco de dados de desenvolvimento de testes de sua produção Depois que entrarmos no ar e outros usuários puderem usar isso, você normalmente desejará que ele permaneça em outro contêiner em seu banco de dados ou em seu cluster para que não esteja tudo misturado. Isso é mais para organização e melhores práticas. Quando chegarmos à produção real, você verá como fazer isso. Mas, por enquanto, certifique-se de adicionar essa barra Dev. Estamos todos configurados aqui. Vamos voltar agora na próxima palestra para realmente começar a autenticar usuários 20. Como finalizar a autenticação: Para começar a criar usuários. Uma coisa que eu quero observar é que agora, dentro do meu aplicativo, temos esse e-mail e senha. Vou optar por não usar a senha e manter a simplicidade para que os usuários simplesmente insiram seus e-mails recebam um link para realmente entrar no aplicativo com facilidade. Dessa forma, é muito mais simples e eles não precisam se lembrar da senha e assim por diante Obviamente, você pode optar por fazer isso se quiser. Obviamente, esses botões provavelmente não funcionarão para começar. Mais tarde, se tivermos tempo, podemos sempre configurar isso. Mas, por enquanto, vamos nos concentrar apenas em fazer com que os usuários façam login por e-mail. Para fazer isso, vou até aqui e em um novo bate-papo. Vamos instalar a próxima autenticação e implementar a autenticação, ela funciona e também adicionar um modelo de usuário e os arquivos necessários para o Mongo Você vai escrever isso e, basicamente, tudo o que você está dizendo é instalar a próxima biblioteca JS sobre a qual falamos e, em seguida, ela criará um modelo de usuário. Toda vez que falamos sobre algo como um modelo, isso significa basicamente definir quais são os parâmetros de um usuário, por exemplo, um usuário tem um e-mail, tem uma senha, tem um primeiro nome, criou viagens e viagens são aquelas que poderiam ser vinculadas a outro modelo, essencialmente. Você quer pensar nisso como quais são os dados relacionados ao usuário ou a qualquer outro modelo que estamos criando. Assim que começarmos a criar o modelo de viagem, da mesma forma, precisaremos de campos de data de qual dia até qual dia. Hum, quantas pessoas fazem parte disso, quem faz parte dessa viagem? Quais são as despesas desta viagem. Podemos ver que o Cursor já montou um para nosso usuário dot js. Isso é o que parece, certo? Temos o nome, temos o e-mail, temos a senha. Ele adicionou a senha porque a viu nos designs, mas, novamente, não precisaremos. Isso é timestamps, que basicamente mostra quando esse usuário foi criado Quando eles foram atualizados pela última vez ou quando seus dados foram atualizados pela última vez? Por padrão, eles deveriam estar lá. Vamos manter esse arquivo. Eu cometi um erro aqui e esqueci de dizer para ele realmente remover a senha e usar o reenvio para enviar e-mails de verificação É exatamente isso que estou fazendo agora, pedindo que ele remova a senha do aplicativo e da autenticação e em vez disso, use o campo de e-mail e reenvie para verificação Vou esperar que isso termine e depois volto. Mais coisas que você precisa fazer para Next Auth funcione é que precisamos dessa chave secreta de autenticação para poder integrá-la ou adicioná-la ao nosso arquivo local ou arquivo de ambiente Basta copiar este NpxotSecret daqui e executá-lo em Vou abrir um novo terminal aqui e depois executá-lo. Você faz o mesmo. Em seguida, ele pode solicitar que você instale um novo pacote, então basta digitar Y e pressionar Enter para dizer sim. Eu vou te dar algum valor. Apenas certifique-se de copiar isso e colocá-lo em seu próprio arquivo local. O Cursor até montou exemplos para eu ver quais são as coisas que eu preciso. Eu também preciso desta recente mensagem de e-mail. Certifique-se de adicionar isso. Para testar, você pode simplesmente mantê-lo assim. Depois de comprarmos um domínio, queremos realmente usar o domínio real. Vou reiniciar meu servidor pressionando Control C e depois subindo aqui para executar o NPM Run Dev Estou apenas usando a tecla de seta para cima para voltar ao último comando que escrevi lá, pressionar Enter e abrir meu projeto mais uma vez. Temos esse e-mail. Bem vindo de volta. Agora, eu não tenho uma conta, então vou me inscrever. Certifique-se de colocar aqui endereço de e-mail com o qual você se inscreveu no Resend para fins de teste. Lá vamos nós. Quando eu verifico meu e-mail, recebo algo assim. Parece que não colamos o próximo segredo corretamente, assim como está neste arquivo de exemplo. Então, vamos testar isso mais uma vez, clicar para entrar e pronto. Estamos logados Na verdade, temos um usuário agora. Diz nosso e-mail aqui, podemos sair daqui. Se eu for ao nosso Mongo DB Compass e atualizar esse aplicativo de despesas de viagem, podemos ver que agora temos essa pasta Dev porque colocamos essa Então, se eu for até aqui, temos usuários, e aí vamos nós. Esse é meu usuário, então ele apareceu lá. Não temos um nome aqui. Talvez na página de inscrição, possamos fazer com que o usuário preencha seu primeiro nome lá Originalmente, meu design, pensei em criar uma página separada, mas é bobagem ter apenas um campo aqui Vou criar um novo bate-papo e pedir ao Cursor que adicione um novo campo de nome à página de inscrição acima do e-mail. O primeiro nome do usuário também será salvo no banco de dados, abreviação de banco de dados Vou deixar isso funcionar e praticamente teremos nossa autenticação concluída. Agora temos usuários, temos um banco de dados e estamos um passo mais perto de realmente tornar esse aplicativo totalmente funcional. Vamos voltar a seguir para realmente nos concentrarmos em permitir que os usuários criem viagens. 21. Criando viagens: Tudo bem. Acho que estou pronto para começar a criar uma nova viagem aqui para que as pessoas possam clicar em Criar uma nova viagem. Estou pensando em MVP, simplifique, tela de modelo de alerta rápido que aparece perguntando o nome da viagem, e as datas, as datas, serão opcionais, mas vou manter isso aí E vou me certificar de usar esses componentes CN porque eles já têm seletores de data definidos, então você não precisa descobrir isso Quanto ao resto, realmente não precisamos de mais nada do usuário. Então, talvez eu faça uma viagem rápida de criação e tinta, copie o link do convite. Eles simplesmente fazem isso e podem enviá-lo para quem quiserem que participe da viagem Vamos começar com isso. Vou voltar e criar um novo bate-papo aqui e dizer, hum, vamos tornar a adição de uma viagem funcional. Os usuários podem adicionar uma nova viagem. Certifique-se de adicioná-lo ao modelo do usuário. Certifique-se de criar um novo modelo de viagem. Então, novamente, o modelo aqui é como monitoramos diferentes tipos de dados, uma viagem deve ter seus próprios dados separados do usuário, e a viagem incluirá coisas como, como falamos antes, o nome da viagem, o número de despesas ou despesas decorrentes dela, quem faz parte dessa viagem para que possamos realmente mostrar ou permitir que os usuários vejam as viagens certas e assim por diante e assim por diante. Então, como parte desse modelo de viagem, então vou escrever como parte do modelo de viagem, não se esqueça de adicionar o seguinte nome proprietário, que quem criou essa viagem os usuários que fazem parte dela. Mais tarde, adicionaremos despesas. Não temos um modelo de despesas, então vamos deixar isso de fora. Data de início, data de término das viagens. Nós realmente não precisamos de um local, esse seria apenas o nome. O que mais precisamos? Acho que é bom começar. Em seguida, vamos fazer com que ele crie um novo modelo usando Shad CN, os componentes que aparecerão quando o usuário chegar, crie uma nova viagem e solicite apenas o nome, as datas e as datas de início Torne as datas opcionais, mas o nome é obrigatório e faça o CTA principal ou a chamada à ação, crie a viagem e copie o link do convite com um CTA secundário para criar apenas a Vamos executar isso, esperar um segundo e voltar para ver o que ele faz. É importante saber o que está acontecendo em segundo plano ao fazer isso e adicionar aquilo. Quero ter certeza de que você entende o que o agente de IA está fazendo em segundo plano, porque, novamente, acredito que é importante também ter algumas informações básicas. Está fazendo algumas coisas. Está criando um modelo para nossa viagem. Se continuarmos aqui, veremos todos os dados que dissemos que queremos. Eu até adicionei alguns extras como o código de convite, que eu não mandei adicionar, mas está fazendo isso de forma que possa gerar um código de viagem que as pessoas possam enviar umas às outras. Também criou uma rota de API. A rota da API é essencialmente uma forma de o front-end conversar com o back-end e fazer coisas como criar novas viagens. Se entrarmos aqui, ele fará algumas coisas verificando primeiro se o usuário está autenticado Ele faz algumas verificações iniciais, certificando-se de que o nome da viagem seja adicionado. Se o usuário não os adicionar e tentar criar uma nova viagem, basicamente essa rota de API o impedirá de fazer isso. Mas se tudo parecer certo, ele poderá criar a viagem com as seguintes informações com o nome, a quem pertence, quem faz parte dela, onde estão os usuários, quando é a data de início? Quando é a data de término. Essencialmente, tudo o que esse código está fazendo é permitir que o front-end fale com o back-end usando essa rota de API. Obviamente, está fazendo algumas suposições por conta própria. Portanto, a IA fará isso se você não fornecer informações ou contexto suficientes. Acho que não falei totalmente sobre o que queremos fazer na página de viagens, se ela substituirá esse tipo de cartão vazio ou cartão falso que criamos até agora. Vamos ver o que ele faz e depois partir daí. Tudo bem, então parece que agora eu não tenho viagens. Ainda não implementou a página vazia que eu já criei, mas ainda não dei essa página a ela. Essa é a próxima coisa a fazer. Mas vamos tentar criar uma nova viagem. Vamos chamá-lo de Bali 2025. Data de início. Vamos escolher 2 de março, vamos fazer o sexto, criar a viagem e copiar a tinta do convite, falhar em criar a viagem. Algo aconteceu. Vamos ver o que aconteceu. Aqui no seu terminal, você sempre verá quaisquer erros que possam ter acontecido. Parece que houve algum erro relacionado ao que está escrito aqui. O que você pode fazer aqui no Cursor é realmente fazer em e depois ir até os terminais e selecionar este é o terminal do nó, então você pode selecionar o terminal do nó e dizer, temos um erro e deixar que ele descubra. Parece que está consertado. Vamos tentar isso mais uma vez. E ainda há um problema. Novamente, repita exatamente o mesmo processo. Há outro erro, parece que o erro está em outro lugar agora. Vamos ver se podemos consertá-lo. Multiplica o charme. Vamos clicar em Criar viagem e copiar a tinta de convite. Boom, ainda é um erro. Certifique-se de que, de vez em quando, após as correções, você interrompa o servidor, então pressione Control C em seu terminal e execute seu ambiente de desenvolvimento novamente, execute seu aplicativo novamente e, em seguida, vamos fazer isso mais uma vez. Bali 2025 e vamos definir algumas datas, mesmo que não seja necessário. E lá vamos nós. Estamos dentro de Bali 2025. Até criou esse link aqui. Agora, não tenho certeza se ele realmente copiou o link. Vamos tentar criar uma tinta de convite sozinha e usá-la do lado de fora. Na verdade, não temos o link certo aqui, então ele não implementou a parte do convite corretamente, mas isso é só porque nos apressamos em criar a viagem e não demos mais detalhes sobre como ela vai lidar com o convite de amigos e assim por diante Então, minha lógica é vamos concluir primeiro a criação da viagem. Vamos descobrir a criação de despesas e tudo mais. Em seguida, vamos trabalhar em como os usuários podem realmente convidar amigos para participar. Por enquanto, isso é incrível. Se voltarmos aqui, a viagem foi criada, e isso não é apenas falso, mas na verdade passou por nossa bagagem. Se atualizarmos nossa bússola Mongo DB, podemos ver que temos essa pasta de viagens aqui agora com toda a viagem que criamos, essa única viagem que criamos, podemos ver quem Você já viu o ID do objeto que se refere a outra tabela em outra pasta. Este é o usuário que eu tenho aqui. Esse é o ID do objeto aqui. Ela corresponde ao usuário ou ao proprietário e, como parte dos usuários, também é minha conta. Eu sou o proprietário desta viagem e o usuário, o que faz sentido. Temos a data de início e a data de término. Ele criou um código de convite. Novamente, não fornecemos mais informações sobre como os convites deveriam funcionar, mas faremos isso mais tarde, quando eu terminar todo o fluxo de uma viagem Vamos voltar e realmente trabalhar nas despesas. Hum, e depois receba os convites. 22. Fluxo de despesas: Então parece que estamos em alta aqui. Então, por que não continuamos avançando tornando as despesas reais? Então, vamos adicionar funcionalidade às despesas, criar um modelo de despesas com todos os parâmetros necessários e ter certeza adicionar despesas ao modelo de viagens, se ainda não estiver lá. Certifique-se de que as despesas realmente calculem os saldos de diferentes usuários Lá vamos nós. Estamos enviando isso. É hora de testar nosso fluxo de despesas. Vamos adicionar uma despesa. Digamos que custasse $20 e fosse para compras. E, obviamente, eu só tenho uma pessoa adicionada à viagem, então isso realmente não faz sentido. Mas vamos colocá-lo e ver se funciona. Lá vamos nós. Foi adicionado. Obviamente, ele precisa de algum trabalho agora mostrar o e-mail aqui em vez do primeiro nome. Acho que em algum lugar do código está mostrando o e-mail se não houver um nome para o usuário, vamos realmente testar Vou para o Mongo DB Compass e em vez de o nome aqui estar vazio ou nulo, vamos fazer uma alteração nisso Se clicarmos em Atualizar, vamos definir o nome. Para Nima Tahami. Este conjunto está essencialmente mudando esse nome para Nima Tommy. Normalmente, você pode editá-lo diretamente lá, mas como era nulo, tivemos que realmente fazer assim Agora, se estamos frescos, temos um nome. Se eu atualizar o aplicativo, e pronto. Eu estava certo, o código está substituindo e-mail por nome. Se o usuário não tiver um nome, ele mostrará isso. Mas me certifiquei de que, a partir de agora, eu coletaria o nome dos usuários no fluxo de inscrição para ver se voltarmos a todas as viagens e sairmos. Vamos nos inscrever agora. Vou perguntar o nome completo, a menos que você coloque seu nome completo, na verdade não vou deixar você se inscrever, você tem que colocar seu nome completo. Lá vamos nós. O fluxo de despesas também está funcionando. Se atualizarmos nosso banco de dados aqui, eu deveria ver as despesas como uma tabela separada e pronto Temos a viagem a que pertence, hum, paga por, quem realmente pagou por essa viagem? Qual foi o valor? Qual é a descrição? Como é dividido? Na verdade, manteve tudo isso em mente, assim como as divisões. Quem deve quanto Isso está parecendo muito bom. Eu não vou mentir. Obviamente, ainda posso fazer melhorias, permitindo que os usuários excluam despesas, garantindo que essa divisão funcione corretamente. No futuro, vou fazer alguns testes para realmente ter certeza de que isso funciona. Na próxima etapa, farei com que o fluxo Convide amigos funcione para que os usuários possam realmente copiar um link aqui, clicar em Convidar amigos, copiar um link e depois convidar outros amigos para o aplicativo. O problema é que, no momento, não podemos criar várias contas porque o Resend só nos permite enviar e-mails de domínios que possuímos e não criamos realmente marca deste aplicativo, nem encontramos um domínio ou algo parecido Precisamos fazer uma pausa, conversar um pouco sobre marca criar um nome e tudo Quando terminarmos com isso, podemos realmente continuar testando esse fluxo. Por enquanto, não preciso me preocupar com isso. Isso é mais na fase de testes. Por enquanto, vou garantir que primeiro, implementado , esse Convide amigos funcione. Os usuários que não estão autenticados podem ver a página, apenas as informações da viagem aqui, e talvez um botão para entrar no 23. Marca: Portanto, precisamos criar uma marca antes de continuarmos. Sabe, em algum momento do seu projeto, você tem que fazer isso. É uma daquelas coisas que às vezes leva um pouco de tempo para ser inventada, especialmente escolher o nome certo, o logotipo certo, você sabe, fontes, cores, etc Eu enfrento esse problema muitas vezes, como você pode imaginar, criando, sei lá, mais de 16 aplicativos. Então, eu mesmo criei um aplicativo para realmente ajudar com isso. Agora, é claro, como alternativa, você pode fazer isso no ChatGPT Você não precisa fazer isso exatamente nessa ferramenta, mas eu basicamente montei essa ferramenta para oferecer uma marca rápida, incluindo cores, ideias de domínio, ideias nomes e assim por diante. Então, eu já possuo um domínio tripvela.com e, como eu o tinha um projeto anterior que nunca surgiu, quero usá-lo neste projeto porque é muito relevante, mas não tenho um logotipo para ele e não tenho fontes e cores específicas Então, vou usar o kit Brand para criar isso. Você vai escrever a marca ou, você sabe, a ideia aqui, um aplicativo para ajudar amigos a dividir despesas em viagens. Como eu já tenho um nome, vou dizer que se chama Tripvela Eu não preciso do nome D. Eu só preciso do logotipo e talvez de algumas cores de fonte. Vai levar um segundo aqui. Obviamente, está mostrando Tripvela como um nome. Aqui está um logotipo simples que eu posso usar. Este é um logotipo básico, mas você também pode obter um premium. Vou experimentar o logotipo premium. Esse esquema de cores não é ruim, mas vou trocá-lo e tentar ver o que mais podemos encontrar aqui. Essa é decente. Esse cinza também é bom. Talvez eu use algumas dessas cores. Mas, por enquanto, vamos ver, esse é o logotipo premium que ele criou. Vamos dar mais uma olhada. Obviamente, tripl.com é usado porque esse é o domínio que eu tenho, mas também mostra outros domínios disponíveis Se você quiser outros nomes, pode misturá-los. Você não precisa incluir seu próprio nome na ferramenta. Qualquer coisa surge com uma assinatura de e-mail para você, então você pode usá-la para seu e-mail. Sinta-se à vontade para brincar com isso, ter uma ideia de nome, criar algumas fontes e cores. Novamente, você pode usar isso ou conversar com o ChatGPT para inventá-lo e, em seguida, comprar um domínio Certifique-se de comprar um domínio e depois voltar para integrar seu domínio ao Resend, apenas para que possamos criar vários usuários para que possamos realmente testar nosso fluxo de convites ou, pelo menos, meu aplicativo Se seu aplicativo for diferente e você não precisar fazer isso, deixe isso para o final. Te vejo em um minuto. 24. como conectar o domínio para reenviar: Espero que agora você tenha comprado o domínio que você vai usar para o seu projeto. Depois de fazer isso, agora estou usando o Namechep aqui, então você pode estar usando Go Daddy, Namechep Certifique-se de encontrar a seção DNS avançado para poder adicionar alguns registros aqui Esses registros nos permitirão enviar e-mails de reenvio aos usuários Precisamos acessar os domínios aqui em resend.com em resend.com em Escreva seu domínio. Você também pode adicionar domínio. Você pode enviar e-mails, por exemplo, da notificação dotdmain.com Eu vou fazer o mesmo. Vou fazer notifications.tripvela.com, que é meu domínio. E então vamos adicionar domínio. Então eu vou te dar algumas instruções aqui. Você pode até assistir a um vídeo, se quiser. Mas é bem simples. Tudo o que você precisa fazer é copiar esses registros no seu DNS, no seu provedor de domínio Você vai adicionar um novo registro. Se você olhar para trás, este é um registro TXT, você deseja selecionar o registro TXT Para o anfitrião, novamente, cole o que você vê aqui. Para o valor, cole o que você vê aqui, você pode copiá-lo facilmente e ter certeza de que está fazendo isso corretamente. Não se apresse com isso. Você também vai fazer um disco MX. Na verdade, os discos da MC estão aqui. Eu já enviei notificações de pontos. Então eu quero copiar este aqui. Vou adicionar outro registro MX, na verdade, ou na verdade, este é um registro TXT, não um registro MX, mas outro registro TXT aqui em cima, cole o host e cole este aqui Já fizemos esses aqui, e este é opcional, mas eu recomendo que você faça isso. Outro registro TXT. Então, pressione Enter. A única coisa que eu quero garantir que você faça o mesmo é definir a prioridade aqui como dez para o registro MX Como não receberemos e-mails disso, eles apenas serão enviados para que as pessoas façam login. Não precisamos habilitar o recebimento. Eu adicionei os registros e , em seguida, ele verificará o DNS. Apenas espere um pouco. Se você fez isso da maneira certa, tudo será bandeira verde em breve. Então você sabe que tem essa configuração e pode começar a enviar e-mails desse domínio. Às vezes, isso pode demorar um pouco mais do que o normal, espere um pouco. Pode levar algumas horas ou minutos, mas normalmente isso é feito instantaneamente e somos verificados. Estamos prontos para ir. Agora, tudo o que precisamos fazer é voltar à nossa base de código e garantir que, na base de código em seu ponto local, assim como temos no exemplo de um ponto aqui, altere o reenvio do e-mail para aquele e-mail que você acabou de criar Mas é claro que você acabou de criar um domínio. A minha foi uma notificação, dot tripvela.com, mas você precisa começar o e-mail e, para este, normalmente, você pode fazer algo como não responder Nenhuma resposta em notifications.tripvela.com. Vou apenas verificar se é isso que eu tenho aqui. Certifique-se de substituir o e-mail reenviado do e-mail para que ele saiba e envie do e-mail correto Estou apenas testando isso agora outro e-mail para ver se funciona. Vejo que funciona. Agora estou recebendo as notificações da Tripvela em tribella.com, envie para mim e depois posso assiná-la notificações da Tripvela em tribella.com, envie para mim e depois posso Agora que criamos outro usuário, posso criar viagens com esse usuário. Mas o que me interessa é poder participar de uma viagem que outra pessoa já fez. Vamos voltar e trabalhar nesse fluxo na próxima palestra. 25. Configuração para convidar amigos: Então, do usuário que acabei de criar, que é um usuário diferente com o qual criei a viagem inicial, tentei acessar o mesmo link que esse usuário tem para aquela viagem. Esse é o link dessa viagem. Mas agora o que vejo é que não tenho acesso a essa viagem. Como eu não sou o criador da viagem e não sou um dos usuários da viagem, não posso ter acesso a ela. Mas o que queremos é realmente mostrar algumas informações sobre a viagem, talvez apenas essa parte superior aqui, que esta é uma viagem a Bali, esse é o proprietário, essas são as datas e quantas pessoas estão indo E então, em vez de ver todas as outras informações, como saldos e atividades da viagem , porque ainda não são relevantes para mim , eu não participei da viagem O que podemos fazer é ter um botão que diz participe desta viagem para ver a atividade ou algo parecido. Eles clicam no botão. Então, se eles não tiverem uma conta ou estiverem desconectados, será solicitado que eles criem uma conta ou login Depois de fazer isso, eles devem poder fazer parte automaticamente dessa faixa e ver todos os saldos e atividades da viagem Por enquanto, vamos contar ao Cursor ou ao agente de IA do Cursor. Queremos permitir que usuários públicos anônimos ou conectados, mas que não façam parte de uma viagem, possam ver informações de alto nível sobre a viagem Isso inclui apenas a parte superior, não as seções de saldo ou atividades da viagem. Em vez disso, deve haver um botão para participar da viagem. Se um usuário clicar nele, ele deverá ser levado à página de login e, se não fizer parte da viagem, deverá se tornar parte da viagem e ver todas as informações relevantes O que estamos dizendo para você fazer é dizer que queremos que as pessoas na Internet possam encontrar essa faixa por meio deste link. Se você tiver esse link, significa que você pode acessar a viagem. Então, alguém compartilhou com você que tem acesso a esse link. Portanto, não é um link acessível ao público que todos conheçam. É um link exclusivo. Como você pode ver aqui, tem algum ID aqui que normalmente as pessoas não encontram. A menos que alguém tenha compartilhado esse link com você, mesma forma que um link do Google Dog ou Figma também funciona As pessoas podem acessar essa página, mas não conseguem ver nenhum dado até criarem uma conta e participarem da viagem. É assim que veremos amigos participando da viagem. Eu, como proprietário de uma viagem, enviarei este link para meus amigos e, em seguida, permitirei que eles criem uma conta ou façam login caso já tenham uma, para poderem participar desta viagem e participar da adição despesas e da visualização dos saldos que devem ou aos quais devem Vou deixar isso terminar e depois voltaremos para ver como fica a partir daí. 26. Testando links de convite: Hum, eu passei mais uma mensagem para o Cursor depois de terminar, e eu disse que quando um usuário clica em Convidar amigos, mostre um brinde, o que, em outras palavras, significa uma pequena mensagem que aparece mostrando sucesso, etc., ou erros, e diz link copiado, envie para um ou dois amigos, é apenas uma mensagem amigável e depois copiada para a área de transferência para que eles possam enviá-la Porque percebi que, quando vou para Convidar amigos, ele não funciona, então me certifiquei de que ele também adicionasse funcionalidade para isso. Sinta-se à vontade para sempre enviar várias solicitações para poder adicionar coisas na fila depois que o agente de IA fizer uma coisa, ele também funcione em Obviamente, você pode executar agentes em paralelo criando um novo agente e fazendo com que vários sejam executados em paralelo. Gosto de fazer isso se estiver trabalhando em algo um pouco mais complicado. Este projeto é simples o suficiente para que possamos executar um de cada vez. Tudo bem. Vamos testá-lo. Vamos até aqui e dar uma olhada imediatamente, mesmo que essa não seja minha viagem, é uma viagem que eu acessei em outra conta de usuário que eu tenho. Na verdade, posso participar da viagem. Então, se eu clicar em Joint Trip Boom, posso ver todas as informações e até adicionar uma despesa. Lá vamos nós. Esse usuário se chama Tim Cook, então eu posso realmente ver a despesa aqui. Se eu adicionar 20 aqui, você pode ver que a divisão é igualmente bonita se eu fizer uma porcentagem. A porcentagem não está funcionando bem. Ele tem que descobrir por porcentagem, então ele vai mudar esses campos para porcentagem. A mesma coisa para o dólar e a mesma coisa a cada dia. Obviamente, precisa de algum trabalho. Ainda não estamos aqui para aperfeiçoar nada. Estamos aqui apenas para garantir que a base funcione e depois começaremos a fazer pequenos ajustes. Se eu adicionar despesas, ok, esta será adicionada. Linda. É mostrado uma divisão entre essa pessoa e essa pessoa. Novamente, pequenos ajustes aqui e ali para fazer. Eu posso ver que $10 são devidos a mim, então isso é bom e posso marcá-los como pagos, mas isso não funciona porque, até agora, não implementamos isso Vamos garantir que os saldos também sejam implementados adequadamente Então, vamos seguir em frente e fazer isso também. Mas, por enquanto, podemos ver que tudo está funcionando bem para que outros usuários possam participar das viagens Temos dois problemas com o Next JS. Sempre que você tiver alguns erros, basta copiá-los para o Cursor desta forma , abrir um novo bate-papo e compartilhar o erro, espero que possamos corrigi-lo basta copiá-los para o Cursor desta forma, abrir um novo bate-papo e compartilhar o erro, espero que possamos corrigi-lo . A mesma coisa com este. Eu vou fazer isso em um novo chat. Vou fazer com que ele corrija esses erros. Você também trabalha em seus recursos e, em seguida, voltaremos na próxima palestra para trabalhar com saldos para que as pessoas possam realmente ver seus saldos e de forma inteligente e calcular automaticamente ou simplificar a dívida de forma semelhante ao que o semelhante ao Então, quando estiver pronto, farei algumas pequenas mudanças. Vou voltar e explicar as mudanças que fiz. podemos ver que esses erros propósito, podemos ver que esses erros desapareceram, então isso é bom. Mas, por enquanto, acho que estamos praticamente prontos. Se eu for a todas as viagens, posso ver essa viagem aqui. Isso não está certo porque diz apenas você, mas na verdade deveria dizer quantas pessoas fazem parte dessa viagem, porque não só eu agora, há três membros, diz, embora devessem ser dois. Novamente, pequenos erros aqui e ali. Anote todos os erros que você vê. Ao testar seu aplicativo dessa forma, anote todos os problemas que surgirem para que você possa corrigi-los um por um. Hum, essa é a melhor coisa a fazer. Não tente resolver todos os problemas de uma só vez. cursor pode bagunçar ainda mais as coisas, mas eu tenho uma lista de coisas a fazer, incluindo, você sabe, um formato melhor para mostrar a divisão entre um ícone melhor aqui, então esse ícone pode mudar com base no nome da despesa, hum, você sabe, agora, ele me permitiu adicionar uma despesa sem dizer para que servia Então, há muitas coisas para corrigir aqui, analisando questões como por que escolheu três membros. Eu vou voltar e fazer essas mudanças no final. Por fim, também quero ter certeza, antes de concluirmos nosso MVP, de que o aplicativo também seja compatível com dispositivos móveis, caso os usuários tentem acessá-lo no celular, que tenho certeza que acontecerá com um aplicativo como Talvez precisemos fazer alguns ajustes nisso também. Vamos voltar, trabalhar nas balanças, garantir que a funcionalidade funcione e, em seguida, fazer pequenas correções e telas móveis 27. Adicionando balanças: De volta ao aplicativo, criei outro usuário e adicionei outra despesa lá. Agora meu saldo é zero porque um usuário me deve $10, o outro, eu devo Agora, quero ter certeza de que esse recurso de saldo funcione e que as pessoas possam realmente marcar coisas como pagas. Quero garantir que as dívidas simplificadas aconteçam para que, se os usuários devem uns aos outros, isso simplifique quem tem que pagar quem, para que as pessoas em todo o mundo não precisem fazer transações ou transferências, e isso apenas simplifique quem deve a quem , a fim de reduzir o número Obviamente, há outras coisas que eu quero corrigir, mas antes disso, vou até o Cursor, abrirei um novo chat e diremos: quero fazer com que os saldos funcionem e funcionem forma que os usuários possam usá-lo para acompanhar o pagamento de Mark por cada usuário ao qual devem ou devem dinheiro. Também quero que o cálculo dos saldos seja simplificado para que ele calcule automaticamente quem deve pagar qual quantia para favorecer o menor número de transações ou transferências que os usuários da viagem precisam fazer entre si Adicione um botão no canto superior direito dos saldos, dizendo: “O cálculo automático está ativado Se eles o desativarem, mostre quanto cada usuário individual deve ou deve ao usuário e simples, estou dizendo para você tornar isso funcional, acompanhar isso no banco de dados, quem pagou a quem para que fique visível aqui para o usuário, que, por exemplo, se eu paguei um usuário aqui, ele acompanhará isso. Ou acho que, nesse caso, se o usuário me pagou, posso dizer que Mark pagou. A mesma coisa com este, acompanhe isso e torne-o ativo e, em seguida, simplifique as dívidas para que, se os usuários estiverem em dívida uns com os outros, novamente, ele faça o menor número de transferências necessárias, assim como acontece em partes. Essas são duas mudanças que eu fiz. Vamos ver como eles se saem. olho no Cursor enquanto ele está fazendo alguma coisa porque às vezes eu percebo que ele tenta fazer algo novo. Pedi para ter certeza de que o botão pago aqui funciona e queria criar uma nova lista da qual nem precisamos. Agora vemos as calculadoras automáticas ativadas e, se eu vejo nesse outro usuário, elas funcionam porque agora estão desligadas e vejo que essas duas pessoas me devem $10 Mas se eu fizer o cálculo automático, essa pessoa me paga 20 dólares e eu estou resolvido Isso funciona, isso é bom, mas temos que garantir que a marca paga também funcione. Está dizendo que funciona agora, vamos ver. Simplesmente desapareceu de lá. Isso é interessante. Vamos garantir que as cartas não desapareçam. Eu falei muito cedo lá. Ele ainda está trabalhando nesse recurso, então vamos esperar um pouco. Vemos que isso funciona agora. Posso reverter esses pagamentos e marcá-los como pagos. Há alguns problemas em que os cartões são duplicados Vou me certificar de que, na verdade, ele está mantendo o mesmo cartão e apenas alterando isso. Ao passar por esse processo, também estou percebendo que há uma lacuna de UX aqui que poderia ser melhorada Eu usei split wise inúmeras vezes e uma das coisas é que você nunca sabe quando agir. Quando você deve realmente começar a pagar outras pessoas. O que estou pensando em fazer é adicionar um botão de compensação com o qual o proprietário da viagem possa interagir. Eles têm um botão que diz, hum, liquidar, que encerrará a atividade da viagem para que as pessoas não possam mais adicionar despesas. Em seguida, ele enviará um e-mail para cada participante dizendo o quanto eles devem exatamente a quem, dessa forma, eles nem precisam acessar o aplicativo para vê-lo e podem simplesmente ter um simples botão no e-mail que diz que Mark pagou Vou trabalhar na próxima palestra e, em seguida, garantir que todo o ciclo seja encerrado antes de voltar e, na verdade, corrigir mais alguns problemas que estão no aplicativo, e então estaremos prontos para começar 28. Resumo: Tudo bem. É aqui que estamos. Eu disse ao Cursor que adicionasse aquele botão pronto para resolver. Agora, como proprietário desta viagem, posso marcar isso como pronto para ser resolvido. Lá vamos nós. Está pronto para ser resolvido. Não consigo mais adicionar transações aqui, nem ninguém na viagem e os participantes podem dizer o que precisam fazer. Aqui está um usuário dizendo que você está pronto. Incrível. Aqui está outro que diz que você deve $20 a esse usuário Lá vamos nós. Isso funciona muito bem agora para um MVP, é muito bom Temos um botão de desfazer se você precisar aqui. Em seguida, compilei uma lista de todas as pequenas e maiores correções nas quais quero trabalhar. Obviamente, isso seria demais para eu fazer, para fazermos isso juntos, e é um pouco redundante porque vou apenas inserir essas notas de UX de interface de essas notas de UX de interface no Cursor para que ele as corrija uma a uma Depois vou fazer testes, verificar se funciona e tentar não gastar muito tempo com isso. Obviamente, é importante não enviar produtos com buggy. Mas, para mim, provavelmente isso levará algumas horas, no máximo, modo que, até o final de hoje, eu tenha uma versão funcional do Tripvela funcionando e depois voltaremos e aprenderemos como podemos realmente nosso aplicativo passar pelo Verso para que as pessoas possam realmente visitar nosso domínio, ver nosso aplicativo e se inscrever nele Agora, uma coisa importante que ainda não implementamos é o pagamento. A capacidade de permitir que os usuários paguem por esse produto. O que vamos fazer é realmente trabalhar nisso quando criarmos nossa página de destino nas palestras ou módulos a seguir , para que o usuário possa pagar naquele ponto da página de destino e, em seguida, faremos a integração funcione essencialmente nesse ponto. Será um pouco demais fazer isso atualmente, pois também estamos montando o aplicativo. Então, faça a mesma coisa, encerre as páginas que você tem e sua funcionalidade é a principal e comece a fazer anotações de pequenas coisas que você percebe ao longo do caminho. Você também pode mostrar seu aplicativo a um ou dois amigos em sua máquina por enquanto para receber o feedback deles e talvez um deles anote algo que você perdeu. Mas também é um bom exercício. Então, quando estiver pronto, volte e continuaremos na próxima seção, que será página de destino , marketing e pagamentos. 29. Revisão final de aplicativos: Tudo bem. Passei algumas horas consertando tudo e pronto para realmente ser enviado. Então, vou revisar algumas mudanças que fiz. Eu adicionei alguns estados de carregamento aqui. Eu fiz com que o Cursor realmente fizesse um esqueleto carregando esta carta Então, quando está carregando, parece bom. Agora também tenho um estado vazio, então, quando os usuários acessam o painel, não fazem nenhuma viagem semelhante à que eu fiz no Figma Eu também criei um logotipo. Coloquei o logotipo aqui e o nome. Criar uma nova viagem é praticamente a mesma , exceto que mudei o campo de data aqui para torná-la um pouco mais agradável e vamos começar uma viagem que já existe Então, adicionei algumas coisas aqui, a capacidade de ver todas as pessoas como parte da viagem, todos os cartões de saldo funcionam agora e todas as despesas têm ícones personalizados com base na despesa. Se você não conseguir encontrar um ícone, ele simplesmente fará o cifrão assim. Adicionar despesas funciona agora. Eu adicionei quem pagou, para que você possa realmente alterar o usuário que pagou. Você pode alterar a data e agora tudo isso funciona corretamente. As divisões fazem sentido. Se eu ganhar $20, tudo isso faz sentido Você pode até mesmo fazer durante o dia. Isso é bom para coisas como hotéis, Airbnbs, onde você deseja dividi-lo por dia Sim, e então você pode adicionar essa despesa. Se você adicionou despesas, certifique-se de dizer para que serviram. Digamos que eu gastei $200 em um anúncio de hotel, depois recebo 150 de volta e posso ver quem estava entre eles Todas essas pequenas mudanças eu adicionei o total gasto nessa viagem, ajustei um pouco o Snavbr e adicionei uma lista suspensa para o perfil aqui ou a lista suspensa do perfil Depois, também fiz algumas alterações para celular. No celular, também parece bom agora e deixe-me mostrar que isso é só para mostrar no celular, como é. Agora é compatível com dispositivos móveis. Mais uma vez, dei coisas a cada um, pouco a pouco. Eu disse para celular, faça o seguinte e agora você pode ver que todas as cartas estão boas. Em termos do aplicativo em si, ele está pronto. Hum, embora ainda não tenhamos uma página de destino, precisamos de uma página de destino antes de colocá-la em produção e permitir que os usuários a usem. É isso que faremos no próximo módulo para voltar e realmente começar a reunir mais ativos de marketing, incluindo a página de destino, incluindo a capacidade de receber pagamentos dos usuários por esse aplicativo antes que possamos realmente colocá-lo no ar para que as pessoas o usem. Mas, no geral, testei o aplicativo. Funciona bem e eu encorajo você a fazer o mesmo com seu aplicativo Quando estiver pronto para começar com mais coisas de marketing , nos vemos na próxima palestra 30. Revisão da landing page: Monte minha página de destino que vou usar para o Tripvela, meu aplicativo de rastreamento de despesas de viagem Reservei cerca de um dia para montar isso e explicarei como segui o modelo que apresentei e como decidi os elementos que tenho aqui. Em primeiro lugar, adicionei um texto H one realmente cativante, e é isso que eu recomendo que você faça novamente. Sua seção de heróis é uma das seções mais importantes, então você deve mencionar exatamente o problema que está resolvendo para os clientes. Hum, então, você sabe, eu escrevi meu H one de uma forma de falar sobre o tipo de incômodo de dividir despesas Então, escrevi dividir as despesas de viagem sem problemas. E então o subtexto é onde você explica um pouco mais sobre, você sabe, o que esse produto faz Por isso, acompanhei as despesas compartilhadas e liquidei instantaneamente para que todos possam se concentrar em aproveitar o. E então você pode planejar sua primeira viagem. Esse é o principal apelo à ação. Na verdade, ele levará os usuários à página de inscrição para criar uma conta. Um belo gráfico aqui ao lado, uma pequena animação dela aqui para mostrar diferentes viagens por aqui você pode ver as pessoas gastando em uma viagem. Eu realmente falo exatamente sobre o que é o produto e qual é o problema. Então você desce até aqui e lê a declaração do problema. Vá em grupo As despesas se acumulam rapidamente, uma pessoa paga o jantar, outra reserva passagens, outra paga o Uber e assim ninguém se lembra de quem deve Isso é verdade que acontece muito em viagens e, portanto, realmente fala sobre a emoção do usuário e a experiência que ele tem. Então eu tenho a declaração da solução. O TriplLA ajuda você a acompanhar para que você possa aproveitar a viagem. Novamente, o aplicativo ajuda você a acompanhar, para que você se concentre na viagem. Veja como você convida amigos para sua viagem, configura uma viagem e compartilha o link com seus amigos e familiares. Há um exemplo de viagem aqui e eu vou te mostrar que em um segundo, adicione despesas. Aqui está um exemplo de despesa aqui. Adicione despesas à sua viagem e acompanhe as transações e, aqui embaixo, pague. Novamente, pequenas animações flutuantes. Você não precisa fazer isso na sua landing page, mas, novamente, estou usando o design como um diferencial do meu produto, estou aplicando algumas animações e microinterações interessantes e microinterações Novamente, acomode-se, veja quem deve o quê, Mark pagou quando você está bem e mantenha a viagem organizada Antes de mostrar um exemplo de viagem até aqui, vou descer até aqui e mostrar o resto. Novamente, uma pequena seção de pausa, divisão de custos, acomodação, sem conversas estranhas no IOU e, em seguida, outra chamada à ação, criam Como você pode ver, as chamadas para ações estão muito alinhadas umas com as outras Planeje sua primeira viagem, crie sua primeira viagem com base em um plano de ação principal. Eu não tenho 1 milhão de diferentes. Este que você vê no painel de navegação, vá para minhas viagens só está aparecendo porque eu já estou logado como usuário, caso contrário, diria apenas cadastre-se ou faça login E então eu criei o preço com base no que conversamos. Decidi fazer dois planos, um por viagem. Então, se há clientes que querem apenas usar isso e experimentar, eles podem pagar apenas dez dólares por viagem e depois ter despesas ilimitadas, ao contrário dos outros concorrentes no mercado, hum, e depois dividir com o maior número possível de amigos Não há limite para isso, ou eles pagam apenas $40 uma vez, depois têm viagens ilimitadas para sempre, tudo neste plano, mais nenhuma taxa por viagem, despesas ilimitadas novamente, então esse é um ótimo valor Alguém que está vendo isso e viaja muito provavelmente está pensando se eu viajar mais de quatro vezes minha vida e dividir as despesas com amigos, que fala exatamente com o público-alvo que eu quero , com certeza eles conseguirão essa oferta em vez desta. E então estou encerrando com base em algumas perguntas frequentes. Então, novamente, eu fiz algumas perguntas que podem estar no topo da mente das pessoas, você sabe. Quando eu marco alguém como pago? Outras pessoas ou outras pessoas precisam pagar para participar? Existe um teste gratuito? E então eu respondi a todas elas, uma por uma. Eu encorajo você a fazer o mesmo em sua seção de perguntas frequentes. É claro que há uma página de termos, página de privacidade, aquelas que eu ainda não configurei, mas você pode utilizar recursos diferentes para essa página, incluindo analisar os termos da concorrência ou consultar o ChatGPT sobre isso Deixo isso totalmente para você, porque essas são letras miúdas e importam um pouco, para alguns, dependendo do tipo de aplicativo que você está criando. Vou deixar isso para você e vou seguir em frente e fazer isso. Hum, há apenas mais uma coisa além da que é necessária para esta página de destino para torná-la funcional ou, na verdade, mais duas coisas. Uma delas é configurar o favicon e imagem de compartilhamento social para que os usuários vejam os metadados e No momento, apenas diz Tripvela, o que é ótimo. Mas, novamente, o ícone é genérico, é apenas um logotipo versal Vamos configurá-los na próxima palestra porque com certeza se aplicarão ao seu projeto, bem como a uma imagem de compartilhamento social, que é uma imagem que aparece sempre que você envia seu link para as pessoas para quem eu envio mensagens ou no LinkedIn e nas Como faremos algum marketing mais tarde, é importante que você os configure corretamente. E então, quando fizermos isso, vamos realmente conectar o Stripe para que possamos realmente cobrar dos usuários No momento, temos essa coisa de pagamento, mas ainda não podemos cobrar dos usuários. Eles realmente não fazem nada, então também os conectaremos ao Stripe mais tarde Eu prometo te mostrar a viagem de amostra. Coloquei aqui um exemplo de viagem a Barcelona que os usuários podem fazer, e parece que, exatamente como uma viagem real, dá a eles uma amostra do que eles podem esperar, especialmente porque eu não tenho um plano gratuito. Eles podem ter uma ideia de como é a adição de despesas e podem até mesmo brincar com isso e adicionar despesas mesma forma que fariam no aplicativo real. Mas é claro que isso não está conectado ao back-end. Tudo isso eu fiz com que o Cursor fizesse como um site simulado, nada aqui está sendo salvo É principalmente para as pessoas brincarem e terem uma ideia da aparência do aplicativo. Acho que é muito importante dar a eles uma amostra do aplicativo. Voltaremos e falaremos sobre os retoques finais necessários na página de destino antes de prosseguirmos e iniciarmos nosso marketing e distribuição 31. Configuração do Stripe: Selecione pagamentos em nossa página de destino, usaremos o Stripe para processar pagamentos É a maneira mais simples de fazer isso funcionar. Quando se trata de configurar uma conta, é a maneira mais rápida e fácil de lidar com pagamentos on-line. Então, depois de criar uma conta no stripe.com, ele pode fazer perguntas como essa para configurar as coisas. Você não precisa respondê-las. Você pode ignorá-los, mas pode escolher se tem pagamentos recorrentes ou não recorrentes Nossos pagamentos não são baseados em assinaturas, então vamos seguir em frente e escolher pagamentos não recorrentes e, em seguida, clicar em Continuar, e continuaremos aqui Agora, ele perguntou se você quer acessar a conta Sandbox ou Live A conta ativa é sua conta de produção seu aplicativo real quando ele está ativo para os usuários. O Sandbox é para ambientes de teste. Vamos para o Sandbox por enquanto. Em seguida, você prosseguirá e pesquisará as chaves da API do desenvolvedor. Normalmente, isso também é mostrado na sua página inicial aqui. Então, vá em frente e pegue duas chaves a partir daí para adicionar ao seu arquivo de ambiente. Uma delas é a chave da API. O outro é secreto. Novamente, você quer ter certeza de que eles estão protegidos e adicionados somente ao seu arquivo de ambiente. No arquivo de exemplo aqui, eu vou ter a chave de API do Stripe Você tem a chave de API do Stripe e , em seguida, o Stripe a chama de Stripe Você quer seguir em frente e garantir que eles sejam adicionados ao seu arquivo de ambiente real e, em seguida, adicionar esses valores para que isso funcione. Reserve um momento para fazer isso. Agora que adicionei essas chaves, vou pedir ao Cursor que implemente o Stripe para processar pagamentos dos dois planos presentes em nossa página inicial Vou apenas explicar que o plano por viagem é por viagem e custa 999, permitindo que os usuários criem apenas uma única viagem Se os usuários tentarem criar mais viagens, direcione-os para a página de pagamento do Stripe e acompanhe os créditos por viagem como parte do modelo do usuário Então, aqui o que estou dizendo são informações sobre o primeiro plano, que é por plano de viagem, custa 999 e permite que o usuário crie apenas uma única viagem E se eles tentarem criar mais viagens, página de pagamento será aberta novamente para que eles paguem e, você sabe, comprem outra viagem. Estou dizendo para você se certificar de acompanhar o crédito da viagem. Então, quantas viagens as pessoas podem fazer com base nisso como parte do modelo do usuário. Em seguida, o outro plano, um plano, é vitalício e custa 39 a 99 e permite que os usuários criem viagens ilimitadas em suas contas. Certifique-se de acompanhar isso também no modelo do usuário. Vou apenas garantir que ele saiba que os usuários não podem criar viagens sem ter créditos ou acesso vitalício. Tudo bem. Vou enviar isso e mais uma vez, falar brevemente sobre o que fiz. Expliquei os dois planos que tenho, os preços deles e pedi que implementasse o Stripe para eles Dei instruções específicas para garantir a atualização do modelo do usuário, que é, novamente, como estamos armazenando informações sobre os usuários e você pode ver isso nos modelos aqui. Então, o modelo do usuário e, imediatamente, você pode vê-lo atualizado, então ele adicionou créditos de viagem. Então, por viagem, atualizaria esse número aqui. Então, sabemos quantas viagens as pessoas podem criar por causa de quantos créditos elas têm. Ou, se eles tiverem um acesso vitalício, é um valor booleano que ele criou, que é verdadeiro ou falso e permite que você acompanhe isso Vou manter esse arquivo e garantir que, quando o aplicativo estiver mudando de modelo, você realmente interrompa o servidor e o execute novamente mais tarde. Então, vou esperar até que esteja pronto e depois executá-lo novamente. Ele me disse: certifique-se de adicionar seus valores do Stripe. Nós já fizemos isso, então isso é bom. Em seguida, adicionaremos os scripts de API para isso. Parece que a implementação está pronta. Vou testar a implementação agora. Como usuário que não tem créditos, vou tentar criar uma nova viagem. Vamos fazer Bali e clicar em Criar viagem. Você precisa de um plano para criar uma viagem, comprar por viagem ou acesso vitalício. A única desvantagem disso é que ele me mostra de forma realista as opções aqui, em vez de apenas me dizer que preciso dos créditos da viagem Agora, vamos testar na página inicial real se eles funcionam. Houve um erro, então vou prosseguir e me certificar de repassar esse erro. Que tal obter uma vida útil? A mesma coisa. Novamente, qualquer erro, passe-o de volta para o Cursor e faça com que ele os analise. Então parece que está consertado. Parece que o erro foi, na verdade, do meu lado. Pedi que eu definisse o ID de preço do Stripe por viagem e também a vida útil do ID de preço no arquivo local do ambiente Na verdade, precisamos criar esses planos no Stripe. Ele fornece as instruções, acesse o painel do Stripe, catálogo de produtos e o produto Nós vamos fazer isso. Vamos acessar o catálogo de produtos, criar um produto e nomeá-lo por viagem. É um pagamento único de 999 e vamos adicionar o produto e garantir que você entre nesse produto e realmente copie o ID do preço aqui Assim como aconteceu no meu arquivo de exemplo aqui. Vou copiar isso e me certificar de colar esse ID de preço nesse arquivo de ambiente. Reserve um segundo para fazer isso. De volta ao Stripe, também vou criar um produto para toda a vida e torná-lo um produto único de 39 99 Produto, mesma ideia. Copie o ID do preço e, de volta ao arquivo de ambiente, vou colá-lo, certificando-se de que seus valores comecem com o sublinhado do preço Agora que isso está pronto, vou experimentar isso. Lá vamos nós. Sempre que estiver fazendo testes com uma conta Stripe, basta colocar 42, quatro, dois, quatro, dois, dois, dois, repetir várias vezes para o cartão de crédito, colocar uma expiração aleatória e o CVC O problema é o seguinte. No momento, conectamos a conta Stripe e conectamos o preço ou os planos que temos à conta Stripe e ao nosso produto Agora, nosso produto pode realmente gerar esse link para que as pessoas comprem o plano. Mas precisamos do que é chamado de webhook ou webhook do Stripe para poder realmente entender ou fazer com que nosso aplicativo e nossos aplicativos de back-end entendam e ouçam quando o Stripe diz que sim, na verdade, essa pessoa comprou Então, conectamos a primeira etapa. Agora precisamos voltar e realmente conectar o webhook, que também é mencionado aqui, como você pode ver, em um endpoint de webhook, ele deve ser mais como você pode ver, em um endpoint de webhook, ou menos assim E adicione esse evento a ele, e você também precisará definir um segredo de webhook do Stripe em seu ambiente, arquivo local Como estamos testando isso localmente em nossa máquina e ainda não temos nosso servidor de produção, também precisamos usar o ouvinte de webhook localmente para indicar que o usuário realmente criou ou Vamos voltar na próxima seção para implementar o webhook do Stripe 32. Webhook do Stripe: Então, conectamos o Stripe e agora precisamos realmente nos conectar ao webhook, que é basicamente como nosso back-end saberá quando os usuários comprarem planos por meio Porque agora, quando permitimos que as pessoas criem um plano, nós as redirecionamos para o Stripe, e esse é, na verdade, o site do Stripe Não é nosso site. Não sabemos quando o pagamento de um usuário realmente é processado até que o Stripe nos diga que isso acontece por meio do que é chamado de webhook Se você acessar os desenvolvedores do Stripe aqui , acesse os webhooks Na verdade, você pode configurar um webhook aqui ou testar com um ouvinte local Por enquanto, vamos testar com um ouvinte local. Siga as instruções aqui e certifique-se de fazer login . Você pode fazer tudo isso através do seu terminal aqui embaixo. Siga o link do terminal e clique em Permitir acesso. Em seguida, certifique-se de copiar essa linha aqui e colocá-la no seu terminal também. Agora, ao colar isso em seu terminal, você obterá um segredo de webhook Você quer ter certeza de adicionar também um segredo de webhook do Stripe como so equals e, em seguida, inserir o segredo do webhook que começa assim Reserve um momento para localizar e fazer isso. Depois de fazer isso, me deparei com um problema aqui. Portanto, se você tiver algum problema, basta encontrar este terminal Stripe, enviá-lo e dizer que houve erros no Cursor Ele pedirá que você entenda o que deu errado e diga o que você precisa fazer. Outro problema, mas explicou que precisamos realmente ter certeza de que é localhost dot Colon 3.000 Certifique-se de seguir exatamente isso. Vamos tentar isso mais uma vez. Eu atualizei meu segredo novamente e vamos continuar criando isso em outra ocasião. Vamos ver se vai funcionar dessa vez. Veja, recebemos 200 de volta do nosso webhook da API SipeSash, o que significa que ele Você pode ver em nossos dados de usuário no Mongo, eu tenho esse crédito de viagem agora de um Isso só aconteceu porque o webhook do Stripe funcionou, o que significa que agora você pode realmente criar uma viagem. Vamos tentar isso. Só vou colocar Bali two create e pronto. Agora eu criei essa viagem porque eu tinha créditos. Eu atualizo os créditos ou, se eu atualizo meu banco de dados de usuários, como você pode ver, o crédito da viagem acabou Isso está funcionando corretamente agora. Se eu voltar e tentar criar mais uma viagem como a de Bali Three, ele saberá que estou sem créditos e me levará de volta à página de checkout Eu sei que isso funciona agora. Também vou testar meu plano vitalício, mesma configuração, mas com o tempo de vida, devo ser capaz de criar várias viagens. Vou deixar você fazer isso para sua própria configuração. Você pode ter uma assinatura, siga as instruções e o Cursor para configurá-la. Lembre-se de que, até agora, configuramos apenas webhook do Stripe para funcionar localmente e ainda não em nossa produção Precisamos voltar depois de colocar nosso aplicativo em produção para realmente conectar nosso Stripe de produção ao aplicativo Depois de fazer isso, precisamos acessar a conta Switch to Live e, na verdade copiar nossos preços do teste para a produção. Faremos isso em um segundo, quando estivermos prontos para lançar nosso aplicativo. 33. Configurações de segurança: Estamos nos preparando para colocar nosso aplicativo produção e permitir que qualquer pessoa no mundo o use. Precisamos fazer mais duas coisas pequenas aqui, mas muito importantes. A primeira coisa é em seu projeto no MongoDB, você quer ir em frente e fazer o login, acessar seu Em seguida, aqui na guia Segurança, você deseja acessar o banco de dados e o acesso à rede. Em seguida, acesse a lista de acesso IP. Essa é essencialmente a lista de endereços IP que podem acessar o banco de dados. No momento, seu endereço IP está incluído aqui, que permite que você, a partir de sua máquina local, faça alterações no banco de dados, hum faça alterações no banco de dados, hum, mas quando entrarmos no ar, usuários com endereços IP diferentes todo o mundo usarão seu aplicativo. Hum, então isso não funcionaria necessariamente porque o banco de dados não funcionaria e permitiria novas entradas ou exclusões de diferentes endereços IP É por isso que você precisa adicionar um endereço IP aqui e certificar-se de digitar a entrada da Lista de Acesso zero ponto zero ponto zero. Então, quatro zeros e depois zero. Você deseja confirmar isso e , em seguida, ele deve ser adicionado aqui e ativo. Agora, é claro, isso tem um pouco de risco de segurança e há outras maneiras de fazer isso, mas essa é a maneira mais fácil de configurá-lo. Apenas certifique-se de que a senha e o nome de usuário do banco de dados estejam seguros. Aquele que foi dado a você por Mongo Di B quando você configurou esse cluster O mais importante é garantir que ele esteja protegido para que ninguém possa realmente acessar seu banco de Mais uma coisa que faremos na base de código do nosso aplicativo para torná-lo seguro é fazer uma auditoria de segurança para garantir que nada seja exposto publicamente ou incorreto e implementar a limitação de taxa da API para evitar que implementar a limitação de taxa da API para abusadores façam uma verificação de segurança completa de todas as funções do Bend e insiram Isso é apenas para garantir que o Cursor faça mais uma verificação final da segurança do seu projeto e revise sua base de código, certificando-se de que haja alguma limitação de taxa em vigor, o que basicamente impede que as pessoas enviem que basicamente impede que as pessoas spam para seu servidor ou enviem spam para sua API várias vezes Novamente, existem muitos usuários e alguns deles podem tentar tirar proveito da sua plataforma. Agora, isso acontece com qualquer desenvolvedor, então certifique-se de realmente executar esse prompt e, claro, provavelmente há outros prompts que você também pode executar para ter certeza disso Mas esse é o que o IE normalmente usa agora : está verificando tudo em termos de autenticação, middleware, rotas de API, deixando ele faça o que quiser para que seu código fique mais seguro Mas antes de voltarmos e realmente colocarmos nosso aplicativo no ar em nosso domínio para que outros usuários possam usá-lo. 34. Como iniciar a produção: Tudo bem. São tempos empolgantes. Finalmente, estamos prontos para lançar nosso aplicativo, no qual trabalhamos tanto publicamente nosso aplicativo, no qual trabalhamos tanto, para a web permitindo que qualquer pessoa no mundo realmente o use. Então, isso é empolgante e vamos fazer isso de novo, conforme explicado em nossa pilha, estamos usando o Versal para implantar nosso aplicativo Então, essencialmente, a Versal é a plataforma que hospeda nosso projeto e é uma ótima plataforma Você pode começar gratuitamente e também acompanhar, você sabe, os registros que estão chegando. Portanto, certifique-se de fazer um teste final do seu aplicativo, certifique-se de que ele funcione por push para o Github, caso contrário. Você se inscreve no Verso, cria um novo projeto e, em seguida, solicitaremos que você conecte seu Github. Certifique-se de conectar seu Github para que você possa realmente conectar seu aplicativo ou importá-lo para o Verso com apenas um clique de um botão. Eu já fiz isso. Vou renomear este Tripvela. Então, aqui está outra coisa importante que você precisa fazer. Você precisa realmente adicionar as variáveis de ambiente aqui para que, depois que seu aplicativo for enviado, isso funcione. Vou fazer uma pausa aqui só para explicar rapidamente. Você deseja realmente acessar seu ambiente, o arquivo local, copiar cada uma dessas strings individuais Mongo URI, por exemplo, você vai colar isso na chave e, em seguida, para o valor, você vai colar o valor que vem depois do sinal de igual aqui se apresse com este porque é muito fácil cometer um erro e você também precisa atualizar alguns deles para que sejam um pouco diferentes. Por exemplo, para o Mongo, se você se lembra de nosso site para desenvolvedores ou nosso site de desenvolvedores, criamos o Dev Em sua produção, você quer realmente fazer slash Prod ou production para que seus dados de usuário de usuários do mundo real sejam armazenados em uma parte diferente do cluster que os dados de teste E então você vai seguir em frente e adicionar mais. Novamente, lembre-se de que alguns deles serão diferentes. Mong permanecerá o mesmo, exceto pela última parte, em vez de Dev, certifique-se de que seja slash O próximo segredo de autenticação permanecerá o mesmo. próximo URL de autenticação será o URL em que as pessoas acessarão este site Certifique-se de colocar HTTPS, então certifique-se de incluir o S para segurança e, em seguida, Colin, barra para frente, barra e, em seguida, coloque seu site real Para o meu caso, isso será tripvelala.com, HTTPS. Tripvela.com. Você não precisa colocar nenhuma barra no final chave de reenvio será a mesma porque você está enviando e-mails da mesma conta O e-mail do formulário também deve permanecer o mesmo. Você não precisa mudar isso. Agora, a API Stripe, segredo do Stripe e o webhook do Stripe serão diferentes Desta vez, você precisará realmente mudar para o Stripe e mudar para sua conta ativa Se você tiver algum contrato, certifique-se de revisá-lo no documento ativo do Stripe e, em seguida, você poderá realmente copiar o material . Escolha o que copiar. Queremos copiar nossos produtos, clique em Continuar. Então você tem suas chaves aqui que você pode copiar para a conta ativa, que deve entrar novamente aqui no Versll Agora, deixe o segredo do webhook de fora. Faremos isso juntos na próxima palestra. Seu ID de preço do Stripe por viagem ou qualquer ID do Stripe que você tenha para o seu tipo de pagamento também será diferente Certifique-se de copiá-los diretamente da versão ao vivo do seu Stripe, então clique aqui e copie-os corretamente Novamente, o único outro segredo que deveria ser diferente é o segredo do webhook do Stripe, que faremos juntos na próxima palestra Vá em frente e insira essas variáveis corretamente. Vou dedicar um minuto para fazer isso, analisá-los, verificar se você os configurou corretamente e nos vemos em um minuto. Depois de copiar tudo isso, certifique-se de clicar em Implantar Depois de clicar em Implantar, você verá que o aplicativo começa a ser realmente construído ou o Versa começará a criar seu próximo projeto em seus próprios servidores e fornecerá um resumo do que foi feito. Há uma chance, às vezes uma grande chance de você obter ou de se deparar com algum erro. Se você fizer isso, vá em frente e expanda isso, copie esses erros e coloque-os no Cursor para garantir que ele seja atualizado ou faça alterações lá. Se você fez isso corretamente, está tudo bem, você deve ter uma implantação ao vivo. Agora, lembre-se de que ainda não conectamos nosso domínio. Outra coisa boa sobre o Versll é que toda vez que você envia para a ramificação principal do Github, ele realmente atualiza seu aplicativo ativo, então você não precisa fazer mais nada para fazer isso Se você fizer alguma alteração em seu aplicativo, qualquer atualização de recurso e fizer push para o GitHub, seu aplicativo será atualizado automaticamente para os usuários Certifique-se de que eles sejam testados antes de enviar qualquer coisa para o GitHub. Enquanto isso, vamos aos domínios e na verdade, adicionar um domínio existente a este projeto, trilala.com, e clicaremos em salvar Eu já tenho esse domínio em outro aplicativo, vou apenas mover os domínios para este projeto A única coisa que você precisa fazer a partir daqui é acessar seu registro de domínio. Se você tem chip de nome ou Go Daddy, vá até lá e vá até o DNS avançado e adicione esses valores, assim como fizemos com as chaves de reenvio Siga estas instruções em seu provedor de domínio e depois me encontre aqui. Agora, certifique-se de atualizar essas configurações tanto para a versão sem WWW quanto para a versão que já está pronta Depois, você pode tentar atualizar. Depois de fazer isso, você o configurou corretamente Lá vamos nós. alguns problemas com o design da página inicial, então vou inseri-los no Cursor para corrigi-los. Espero que você não tenha nenhum problema ou, se tiver, reserve um tempo para corrigi-los e, em seguida, voltaremos para configurar webhook do Stripe corretamente para que todo o aplicativo funcione Mas parabéns por tornar seu aplicativo público. 35. Integração de listras finais: Uma última etapa para configurar nosso aplicativo para que ele esteja pronto para aceitar pagamentos configurar nosso webhook do Stripe sobre produção Agora, se você se lembra, o webhook é o que nos permite entender se um usuário realmente pagou e, em seguida, conceder-lhe a assinatura ou o benefício, o plano, etc Um Cursor ou agente de IA, vá em frente e peça instruções sobre como configurar o webhook para produção do seu aplicativo Dê um passo a passo com base no que você precisa fazer. No meu caso, foi em frente e me disse que preciso seguir esta etapa, preciso seguir esta etapa, acessar o Stripe Dashboard Aqui está um painel do Stripe, acesse os desenvolvedores e clique webhooks para adicionar o destino Depois de adicionar o destino, esse é o link que você deseja, mas precisaremos dele em um segundo. Para meu aplicativo, eu só preciso que a sessão de checkout seja concluída. Vou pesquisar por checkout dot session dot Completed, e ele já aparecerá Para seu aplicativo, isso pode ser diferente. Esse é o evento que o webhook ouvirá. No meu caso, sempre que uma sessão de checkout foi concluída com sucesso, queremos seguir em frente e ouvir esse endpoint O URL do endpoint é o que você obteve do aplicativo, mas é claro que você deseja substituí-lo pelo seu domínio menos o webhook das APIs trip.com slash. Em seguida, vou clicar em Criar destino e garantir que você copie esse segredo e depois volte para garantir que você copie esse segredo e depois volte sua implantação, vá para o que você obteve do aplicativo, mas é claro que você deseja substituí-lo pelo seu domínio menos o webhook das APIs trip.com slash. Em seguida, vou clicar em Criar destino e garantir que você copie esse segredo e depois volte para sua implantação, vá para as configurações em erslls. Certifique-se de selecionar seu projeto, acessar suas configurações, acessar variáveis de ambiente e, em seguida, adicionar a variável de ambiente. Agora, se você se lembra em seu código, deveria ser assim Stripe underscore webhook underscore secret Certifique-se de copiar isso e colar o valor que você obteve do Stripe Clique em salvar e depois em reimplantar. Sempre que você fizer alterações em suas variáveis de ambiente, você deve prosseguir e reimplantar para que sua implantação mais recente tenha essa chave de ambiente adicionada a Então, em seu projeto, você pode acompanhar suas implantações, vemos que agora está sendo construído Agora, depois de pressionar, a única maneira de saber se esse webhook do Stripe funciona é realmente fazer um pagamento de teste Você pode realmente retirar seu cartão de crédito e usá-lo ou pode criar um cupom aqui no Stripe, configurar um cupom de 100% de desconto e depois pedir ao Cursor que ative os códigos promocionais E depois de fazer isso, basta inserir o código do cupom e testar se a assinatura ou o preço do aplicativo funcionam. Agora, com isso resolvido, temos nosso aplicativo instalado e funcionando. Você pode compartilhar isso com amigos. Agora, prometo mostrar a vocês como é a imagem OG e os metadados que configuramos Então, se você colar o link do seu aplicativo em uma mensagem, digamos que eu, você pode ver aqui que Tripvela cortou as despesas de viagem sem problemas Então, sempre que alguém compartilhar tripvela.com, ele aparecerá assim, o que No futuro, eu poderia fazer a alteração em vez de apenas ter o nome aqui, talvez ter uma descrição do que o produto faz. Isso encerra a montagem do nosso produto. O próximo passo é realmente contar às pessoas sobre isso e começar a receber vendas. 36. O que vem a seguir?: Parabéns por ter chegado até aqui no curso. Eu quero falar um pouco sobre o que acontece a partir daqui. Para onde vamos? O que você faz com seu produto e como garantir que seu sucesso continue no caminho certo e como será o sucesso daqui em diante? Muitas pessoas presumem só porque lançam um produto, milhares de usuários o usarão imediatamente. Na realidade, os números são muito menores do que isso e levam mais tempo. Além de precisar de mais pacientes para acompanhar seu progresso, você precisa entender que, agora você precisa entender que, agora, nas próximas semanas ou meses, sua meta é obter o máximo de feedback possível dos primeiros 50 a 100 usuários Não se concentre em ir aos milhares ainda. Converse com esses 50 a 100 usuários, certifique-se de melhorar seu produto, ouça-os e melhore com base no feedback que eles realmente fornecem a você. O objetivo real é compartilhar seu produto em sua versão mais atual com as pessoas e aproveitar o feedback para criar um produto que você possa escalar para milhares de usuários no futuro. feedback de usuários reais é uma grande vantagem e muitos fundadores ignoram isso, mas se você aproveitá-lo corretamente, criará um produto para um determinado segmento do público ou mercado-alvo que poderá ser escalado e crescido rapidamente ao longo do tempo No momento, estamos fazendo algumas suposições sobre nosso produto, mas colocamos isso na frente dos usuários. Na verdade, aprendemos quem é nosso verdadeiro cliente e com o que eles realmente se importam mas colocamos isso na frente dos usuários. Na verdade, aprendemos quem é nosso verdadeiro cliente e com nosso Depois de obtermos essas respostas, podemos nos concentrar no marketing e na criação dos conjuntos de recursos certos para elas. Você também aprende quais métodos de marketing funcionam melhor para você. É um vídeo, ou é uma postagem de blog, ou é uma parceria ou talvez seja uma divulgação direta Ao experimentar e aprender qual método funciona melhor, você aprenderá o que investir para que ao gastar dinheiro em marketing, não desperdice seu dinheiro e o gaste corretamente nos canais de marketing certos Procurando bons sinais de seu produto, como usuários compartilhando seu produto, falando sobre seu produto, respondendo a você e dando feedback sobre seu produto Às vezes, talvez você precise se esforçar para poder conversar com os clientes e obter feedback diretamente deles. Às vezes, os clientes podem não se importar o suficiente compartilhar feedback com você, a menos que você peça. Portanto, certifique-se de entrar em contato com eles e perguntar sobre a experiência deles. Alguns deles podem ser configurados como e-mails automáticos que saem do seu aplicativo Certifique-se de aproveitar muito os e-mails, especialmente para sua base de usuários existente. Vou continuar compartilhando meu produto Tripvela em diferentes comunidades de viagens, bem como divulgando diretamente a fim de atrair os primeiros cem usuários e, a partir daí, explorar maneiras de atingir , talvez, nômades digitais que tenham seguidores nas mídias sociais para criar conteúdo para promovê-lo para serão minhas próximas semanas e meses e espero que você aproveite todas as ferramentas e métodos de marketing sobre os quais falamos e expanda seu produto para mais de milhares de usuários e deseje a você tudo de bom. Obrigado por participar do curso.