Crie e publique um app mobile com GPT-6 Astra

Autoria: freeCodeCamp.org · Assistir no YouTube

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: Build and Publish a Mobile App with GPT-6 Astra · Canal: freeCodeCamp.org · 2:35:43 · Assistir no YouTube

Tópicos: Agentes de IA, Dados, bancos de dados e embeddings, Engenharia de software com IA, Ferramentas de desenvolvimento com IA

Resumo

Neste tutorial, Brock mostra um fluxo completo para planejar, criar e preparar para publicação um app social inspirado no Instagram, usando Codex e GPT-6 Astra. O projeto inclui autenticação, telas e recursos sociais, backend em tempo real, páginas legais e monitoramento de erros. Ao longo do processo, o apresentador demonstra como usar referências visuais, prompts iterativos, revisão de código e builds de desenvolvimento para testar o app no celular. O vídeo também aborda requisitos importantes para a publicação na App Store, como exclusão de conta, política de privacidade, termos de serviço e URL de suporte.

Pontos-chave

Planeje a ideia, os recursos, as telas e os fluxos do app antes de começar a implementar.
Gere referências visuais e peça à IA para implementar uma tela por vez, comparando capturas de tela com o design desejado.
Use Expo para iniciar o app e crie um development build para testar recursos nativos no dispositivo.
Integre Clerk para autenticação e Convex para backend, banco de dados e atualizações em tempo real.
Comece com um MVP e adicione recursos gradualmente, em vez de tentar construir tudo de uma vez.
Faça revisão de código com CodeRabbit e trabalhe com branches e pull requests.
Prepare política de privacidade, termos de serviço, exclusão de conta e URL de suporte antes de enviar o app à App Store.
Use Sentry para monitorar erros, consultar logs e coletar feedback dos usuários.

Capítulos

Início	Capítulo	Resumo
00:00	Demonstração do app e visão geral do curso	O apresentador mostra o app social, seus recursos e o fluxo que será seguido para construí-lo.
10:25	Preparação do ambiente e criação do projeto Expo	Instala VS Code e Node.js, cria o projeto Expo e configura o ambiente para executar o app.
20:47	Planejamento do app com Codex	Define o escopo do MVP e usa perguntas da IA para especificar recursos, telas e decisões técnicas.
30:13	Definição dos requisitos e criação do plano	Conclui as decisões do projeto e pede a criação de um arquivo plan.md com os requisitos.
38:44	Geração das referências visuais	Usa prompts e imagens geradas por IA para criar referências de telas e um sistema visual.
49:15	Implementação da autenticação e primeira tela	Aplica um ciclo de comparação visual para criar a tela de autenticação e integra o Clerk.
59:47	Construção das telas principais	Implementa as telas de início, perfil, edição de perfil, explorar e mensagens usando referências visuais.
69:37	Revisão de código com CodeRabbit	Cria uma branch, abre um pull request e usa a revisão automatizada para identificar e corrigir problemas.
78:30	Integração do Convex e recursos sociais	Configura o backend e implementa publicações, curtidas, comentários e seguimentos.
88:23	Mensagens e ajustes da interface	Implementa mensagens, melhora a tela de detalhes da publicação e testa o comportamento dos recursos.
98:17	Build de desenvolvimento no celular	Cria um development build com EAS e verifica no celular a sincronização em tempo real.
108:14	Stories, skills e orientações para agentes	Adiciona stories, cria uma skill reutilizável para o ciclo de comparação visual e apresenta arquivos de instruções para agentes.
118:09	Tela de configurações e exclusão de conta	Cria a tela de configurações e implementa a exclusão de conta, requisito importante para apps com autenticação.
126:27	Páginas legais e landing page	Gera páginas de termos de serviço, política de privacidade e suporte, além de uma landing page com mockups.
140:02	Monitoramento e feedback com Sentry	Integra o Sentry para registrar erros e logs, testar alertas e receber feedback dos usuários.
150:01	Ajustes finais e encerramento	Vincula as páginas legais no app, sincroniza as alterações e encerra o fluxo de desenvolvimento.

Citações

Não vamos simplesmente abrir o Codex e dizer: “Crie um app para mim”, esperando que tudo funcione de algum jeito. — 05:47

A primeira coisa que você precisa fazer é planejar o projeto. — 21:49

Você não precisa construir todos os recursos desde o início. — 29:11

Tire uma captura de tela do simulador e compare com o design real. — 50:16

Conceitos e entidades

Codex (ferramenta): Assistente de programação usado no tutorial para planejar, implementar, revisar e testar o app.
GPT-6 Astra (modelo): Modelo mencionado no título e usado pelo apresentador durante o desenvolvimento do app.
Expo (ferramenta): Plataforma usada para iniciar, desenvolver, compilar e publicar o app mobile.
Clerk (ferramenta): Serviço de autenticação integrado ao app para login com Google e Apple.
Convex (ferramenta): Backend e banco de dados usados para armazenar dados e sincronizar alterações em tempo real.
CodeRabbit (ferramenta): Ferramenta usada para revisar alterações de código enviadas em pull requests.
Sentry (ferramenta): Serviço demonstrado para monitorar erros, consultar logs e receber feedback dos usuários.
Cloudflare Pages (ferramenta): Serviço usado para publicar a landing page e as páginas legais do projeto.
shots.so (ferramenta): Site usado para criar imagens de apresentação do app em mockups de celulares.
freeCodeCamp.org (empresa): Canal do YouTube que publicou o tutorial.
Brock (pessoa): Apresentador que conduz o tutorial de desenvolvimento e publicação do app.

Tradução completa (pt-BR)

00:00 Aprenda a criar e publicar do zero um aplicativo móvel real, no estilo do Instagram, usando Codex e GPT-6 Astra. Brock vai orientar você durante todo o ciclo de desenvolvimento, abordando desde a geração de designs de interface e a configuração de um backend até a publicação na App Store. Você vai dominar não apenas o código, mas também os workflows exatos de prompting com IA necessários para transformar uma ideia em um produto finalizado. Bem-vindo ao tutorial completo de Codex sobre como criar

00:30 um aplicativo móvel real usando IA. Neste curso, vou mostrar o workflow exato que usei para sair de uma ideia e chegar a um aplicativo móvel funcional. E, só para dar um pouco de contexto, recentemente usei esse mesmo workflow para criar meu próprio aplicativo móvel e publicá-lo na App Store. Então, tudo o que vou mostrar neste vídeo realmente funciona. Antes de começarmos a programar, deixe-me mostrar o projeto que vamos criar neste tutorial. Este é um aplicativo de mídia social, como o

01:02 Instagram. Para usá-lo, primeiro você precisa estar autenticado. No nosso caso, temos duas opções diferentes. Vou entrar com minha conta do Google. Depois de se autenticar, você será redirecionado para a tela inicial. Aqui temos quatro abas: início, mensagens, explorar e perfil. E note o efeito Liquid Glass do iOS. Vou mostrar como criá-lo sem escrever muito código. Agora, na tela inicial, você

01:33 pode ver as publicações dos usuários que já segue. E aqui também pode publicar stories. Vamos selecionar algo da nossa biblioteca. Se quiser, também pode usar a câmera. Mas aqui vou selecionar algo da biblioteca. Vou publicar esta imagem. Vamos publicar. Ela será enviada em segundo plano. Quando o envio terminar, poderemos visualizá-la. Pronto. Os stories funcionam exatamente

02:06 como no Instagram. Se quiser pausá-lo, toque e segure. E, para ir ao próximo, basta tocar. Você também pode excluir seus stories, se for o proprietário. Agora, também dá para fazer publicações, certo? Você pode criar publicações. Vamos publicar alguma coisa. Vou selecionar esta imagem e podemos adicionar uma legenda. Digamos: “Viagem neste fim de semana”. E vamos publicar. Pronto, foi publicada e podemos vê-la imediatamente na tela inicial. Você pode curtir e

02:38 até adicionar comentários. Vamos escrever algo como, sei lá, um comentário de teste, e publicar. Agora ele vai aparecer aqui. Você pode curtir os comentários. Pode ordená-los. Temos algumas opções diferentes aqui, e você também pode salvar as publicações nos favoritos. Isso é tudo na tela inicial. Também temos mensagens em tempo real. Como você pode ver, temos algumas conversas anteriores, mas são todos dados fictícios que criei para esta demonstração. Aqui vou inserir as imagens reais do tutorial

03:10 em que testo isso no meu celular. Enviei uma mensagem em tempo real, e tudo funciona nas duas contas. Além das mensagens, temos a tela Explorar, onde você pode ver publicações aleatórias de outras pessoas, com um design de interface muito bonito. Você pode curtir as publicações e, se tocar nelas, será levado à publicação propriamente dita. A partir daí, poderá ver as outras contas e segui-las, ou até deixar de segui-las, caso já as siga. Aqui você pode pesquisar

03:42 pessoas, publicações ou até tópicos. Por fim, temos a tela de perfil, onde você pode ver suas publicações, inclusive vídeos, itens salvos e publicações em que foi marcado. Você também pode editar seu perfil aqui. Digamos que, para a bio, vou colocar, sei lá, “YouTuber” e depois salvar. Assim que salvo, você pode ver que o perfil foi atualizado. Além disso, também é possível alterar a imagem do perfil. E temos a tela de configurações. Agora, aqui

04:14 temos vários botões e links diferentes, mas os mais importantes são os links da política de privacidade e dos termos de serviço. Como você pode ver, eles apontam para URLs reais, aqui. Isso é algo que você precisa implementar. Se não implementar, a Apple vai rejeitar seu aplicativo, e vou ensinar como fazer isso mais adiante no curso. Também temos a opção de excluir a conta. Mais uma vez, se você não implementar isso, seu aplicativo

04:45 será rejeitado. Também temos um botão de feedback, onde os usuários podem literalmente nos enviar comentários. Aqui, eles podem informar o nome. Já preenchi este campo, mas você pode simplesmente colocar John, seu e-mail e, se quiser enviar uma solicitação de recurso ou, sei lá, relatar algum tipo de bug, pode escrever algo como: “Por favor, corrija o recurso de edição do perfil, ele não funciona”. Depois, você pode enviar o feedback, e vou mostrar como coletar esses feedbacks

05:16 mais adiante no vídeo. Além do aplicativo móvel, vamos criar uma landing page com um design de interface muito bonito. Como você pode ver, temos algumas imagens de demonstração, e vou mostrar como criá-las e usá-las em seus projetos futuros. Na parte inferior, temos os links da política de privacidade e dos termos de serviço. Mais uma vez, você não deve deixar essas coisas de lado. Esse é o projeto completo que vamos criar neste vídeo. Este não é um daqueles tutoriais aleatórios de vibe coding em que

05:47 simplesmente abrimos o Codex e dizemos: “Crie um aplicativo para mim”, esperando que, de alguma forma, tudo funcione. Em vez disso, vou mostrar todo o processo, passo a passo. Vamos começar com uma ideia. Depois, vamos planejar o aplicativo direito, identificar todos os recursos de que vamos precisar, gerar um design de interface completo e, então, usar o Codex para implementar tudo. Ao final deste tutorial, você deverá entender claramente todas as ferramentas necessárias para criar um aplicativo moderno usando IA. Também vai saber o que fazer

06:18 quando ficar sem saber como prosseguir. Porque um dos maiores problemas ao programar com IA não é necessariamente a programação em si. É saber o que pedir. Ao longo deste curso, vou mostrar como lido com isso, como dou mais contexto ao Codex e como faço com que ele realmente me ajude a resolver o problema. Também vou compartilhar os prompts que uso pessoalmente. Isso inclui os prompts que uso para planejar um aplicativo, gerar o design de interface, implementar as telas e até criar itens como a política de privacidade

06:50 e os termos de serviço. E essas coisas são importantes se você quiser publicar seu aplicativo. Dependendo do que o aplicativo faz e do tipo de dados de usuário que você coleta, a Apple pode exigir itens como uma política de privacidade, termos de serviço, um recurso para excluir a conta e outras informações. Se você deixar de incluir algo exigido para o seu aplicativo, ele poderá ser facilmente rejeitado durante a revisão da App Store. Essas são geralmente coisas que você aprende do jeito difícil, depois de criar seu primeiro aplicativo, mas vou tentar abordar todas

07:21 elas neste tutorial, para que você saiba o que observar antes de enviar seu aplicativo. Também é importante mencionar que, nas primeiras vezes que enviam seus aplicativos à App Store, as pessoas costumam receber uma rejeição, o que é normal. Mas, no meu caso, nunca fui rejeitado pela Apple. Meu aplicativo foi aceito logo no primeiro envio, porque este workflow cobre tudo. Assim, você não deixa passar nenhum detalhe importante. E só mais uma coisa: todas as ferramentas que vamos usar neste curso são totalmente gratuitas para começar

07:52 Então, você não precisa de cartão de crédito para acompanhar. E o código-fonte completo do aplicativo também estará disponível gratuitamente. Vou deixar o link na descrição. Meu objetivo com este curso é ajudar você a entender todo o workflow para que, depois de assistir a este vídeo, possa pegar sua própria ideia e saiba como transformá-la em um aplicativo móvel real usando Codex. Então, vamos passar da ideia ao planejamento, ao design de interface e, por fim, deixar o aplicativo pronto para

08:22 publicar. Agora, dito tudo isso, não vamos perder tempo e vamos começar o curso. Mas, antes de começar, quero mencionar rapidamente que temos uma comunidade da escola e, dentro dela, documentei basicamente toda a jornada de criação do meu próprio aplicativo e de publicação dele na App Store. Aqui, dá para ver que tudo levou exatamente 14 dias, porque o dia zero é meio que um curso intensivo. Então, levou cerca de 14 dias para enviá-lo à App Store

08:55 e depois começamos com o marketing, e novas aulas serão adicionadas todos os dias. Esta é uma comunidade para quem tem interesse em acompanhar todo o processo, como a configuração de pagamentos — sabe, temos planos mensais e anuais, talvez até alguns planos semanais. E também como passar por todo o processo de envio ou, por exemplo, como implementar notificações push. E isto não é apenas um curso, mas uma comunidade ativa. Aqui, dá para ver que todo mundo está

09:25 compartilhando o próprio processo, motivando uns aos outros e assim por diante. E, na verdade, um dos nossos alunos já publicou o aplicativo dele na App Store. E, só para deixar registrado, este é o aplicativo dele, que ele criou comigo na nossa comunidade em exatamente 14 dias. E, para dar uma ideia, quando você clica em uma dessas aulas, temos vídeos específicos para aquele dia. Você sempre pode voltar e rever essas aulas, se tiver interesse. Então, se quiser participar, vou

09:55 deixar o link na descrição. Espero ver você lá dentro. Certo. Como de costume, vamos começar do zero absoluto. Primeiro, no meu caso, estou usando o VS Code como editor de código, mas você pode usar qualquer coisa que quiser. Pode ser Cursor, não sei, pode ser Windsurf, realmente qualquer ferramenta que preferir, mas recomendo usar o VS Code para termos exatamente o mesmo ambiente. Para isso, você pode acessar code.visualstudio.com

10:25 e clicar neste botão. No meu caso, estou usando um Mac, mas, se estiver no Windows, verá um botão correspondente e poderá instalar para Windows também. E, mais uma vez, neste tutorial estou usando um Mac, mas, se estiver usando Windows, tudo será praticamente igual, então você pode acompanhar sem problemas. A outra coisa que você precisa ter é o Node.js. Se ainda não tiver, acesse nodejs.org ou clique no botão de download. Deixe tudo como está. Por padrão, ele vai selecionar seu ambiente, sabe, seu sistema operacional, e depois é só instalar. Certo. Vou presumir que você tem os dois. Depois, vá até a área de trabalho e crie uma pasta vazia. No meu caso, chamei-a de Codex Gram, como Instagram, mas coloquei Codex. Você pode dar o nome que quiser. Depois, basta abri-la no VS Code. Basicamente, é só arrastá-la e soltá-la aqui. Ela vai abrir. Certo.

10:56 Então, depois de ter feito isso, podemos começar a criar um aplicativo para dispositivos móveis. O que vou fazer é primeiro criar um boilerplate. Para isso, vamos usar o Expo. Se ainda não conhece, acesse expo.dev. Esta é literalmente a melhor maneira de começar a criar um aplicativo para dispositivos móveis em 2026. Eles têm literalmente tudo de que você precisa, desde a criação do aplicativo até a publicação na App Store e na Play Store. Foi isso que eu

11:27 usei para criar e publicar meu aplicativo na App Store, só para você saber. E é totalmente gratuito para começar. Mas, se estiver levando a sério a publicação do seu aplicativo na App Store, provavelmente vai querer escolher um plano de pelo menos US$ 20 por mês. Mas, por enquanto, você não precisa pagar nada. Com isso, vamos acessar expo.dev/docs, que é a documentação, e precisamos copiar este comando. Tecnicamente, nós

11:57 poderíamos simplesmente pedir ao Claude ou ao Codex para executá-lo, mas aqui prefiro executá-lo manualmente para mostrar o que vamos obter, e vai ser um pouco mais fácil fazer isso por conta própria. Então, cole isto no terminal e coloque um ponto no final, o que significa criar um aplicativo Expo na pasta atual. Certo? É isso que significa. Então, ele vai criar tudo aqui. Primeiro, vamos receber uma pergunta. Na

12:28 época em que estou gravando este vídeo, é a versão 57. Mas, se você estiver assistindo no futuro, esse número terá aumentado. Não tem problema nenhum. É só pressionar Enter. Isso vai criar alguns arquivos e pastas diferentes, que formam basicamente um aplicativo simples para dispositivos móveis. E podemos executá-lo em um simulador daqui a pouco, assim que isso terminar. Estou usando um Mac. Meu simulador será do iOS. Mas, se estiver no Windows, você pode instalar um simulador de

12:59 Android. Certo. Então, vou iniciar meu simulador. Aliás, com os recursos mais recentes do Expo — pelo menos até o momento em que estou gravando este vídeo —, você pode estar no Windows e ainda assim criar para iOS. Dá literalmente para executar um simulador de iOS no Windows. Basta consultar a documentação. Você vai encontrar as informações. É algo bem novo, então não vou entrar nisso, mas saiba que

13:30 algo assim existe. Certo, aqui está meu simulador. Tenho alguns projetos anteriores que criei, mas vamos começar do zero. Aqui diz que você pode iniciar este aplicativo executando estes comandos para Android, iOS e até para a web. Aqui, vou simplesmente digitar npx expo start. Isso vai nos mostrar um código QR e também abrir um terminal onde, se você pressionar I, o aplicativo vai abrir

14:01 no simulador. Então, deixe-me colocá-los lado a lado. Certo. Parece que algo falhou. Vou pressionar I novamente. Ele está tentando abrir o aplicativo. Não sei por que estou recebendo um erro. Normalmente, deveria abrir imediatamente. Mas isso não é problema. Vou simplesmente pedir ao Claude ou ao Codex

14:32 para explicar o que está acontecendo aqui. E, falando em Claude e Codex, se quiser usar o Claude, você precisa instalar esta extensão no VS Code: Claude Code para VS Code. E certifique-se de escolher a versão verificada. Se quiser usar o Codex — é o que vou fazer neste tutorial, embora tenha assinatura dos dois —, o Codex tem um modelo recente chamado GPT-6 Astra, e quero usá-lo neste tutorial. Então, instale o Codex

15:03 se tiver uma assinatura, ou o Claude, ou qualquer outra ferramenta que queira usar. Aliás, uma coisa que quero mencionar é que o objetivo deste tutorial não é chegar exatamente ao mesmo resultado final. O objetivo aqui é entender o workflow para criar aplicativos para dispositivos móveis por conta própria. Então, tudo bem se, ao final deste vídeo, você tiver um aplicativo diferente do meu. Quer dizer, as funcionalidades provavelmente serão as mesmas, mas o design da interface pode ser diferente. O código também pode ser um pouco diferente, e

15:34 isso porque a IA não dá exatamente o mesmo resultado final todas as vezes. Certo? Então, é bom ter isso em mente. Não tem problema nenhum se você não obtiver exatamente o mesmo resultado final que eu tenho aqui. Além disso, vejo muita gente ficando meio desanimada por causa da IA, porque agora ela consegue criar praticamente qualquer coisa. Mas eu sempre estive deste lado, tentando encontrar oportunidades em que ela me ajude a criar um aplicativo bem

16:05 Isso acontece porque a IA não gera exatamente o mesmo resultado final todas as vezes. Certo? Então, essa é uma coisa para ter em mente. Não tem problema nenhum se você não obtiver exatamente o mesmo resultado final que estou mostrando aqui. Além disso, vejo muita gente ficar meio deprimida por causa da IA, porque agora ela consegue criar praticamente qualquer coisa. Mas eu sempre estive deste lado: estou tentando encontrar oportunidades em que, sabe, ela me ajude a criar um aplicativo bem

16:36 rapidamente, para que eu possa me concentrar no marketing e, sabe, em outras coisas. Agora, como a IA consegue criar qualquer coisa — o que não é exatamente verdade no momento, embora eu ache que isso vá acontecer em algum momento —, hoje isso ainda não é bem verdade. Ela não consegue criar qualquer coisa. Ela consegue criar algo para começar, mas, à medida que os projetos ficam cada vez maiores, ela meio que não dá conta. Então, acho que ainda é importante conhecer os fundamentos da programação. Mas, se você quiser criar um projeto simples, sei lá, um MVP, eu

17:08 acho que a IA pode ajudar. E, com este tutorial, espero que você aprenda a criar um MVP. Certo, dito isso, eu definitivamente recomendaria que você assinasse um plano de US$ 20 por mês em uma dessas ferramentas: Claude, Codex ou Cursor. Acho que, por enquanto, minha favorita talvez seja o Codex. Embora eu use o Claude há bastante tempo, com o modelo mais recente que eles têm, que é o GPT6, acho que você pode escolher o Codex para testar isso. E eu

17:40 acho que o Codex é mais barato que o Claude ou o Cursor. Certo, dito isso, agora vamos voltar ao VS Code. Instale esta extensão. Acho que preciso reiniciar a extensão. E basta clicar duas vezes nesta área vazia. Daqui, você pode acessar o Claude ou o Codex. Digamos que você esteja usando o Claude. Esta é a interface que vai aparecer. Agora podemos conversar com o Claude e, sabe, atualizar o modelo. Deixe-me

18:11 maximizar isto. Você pode atualizar o modo e, inicialmente, vamos usar o modo de planejamento. Vou entrar nele. Você também pode atualizar o modelo, sabe, adicionar o nível de esforço e assim por diante. Temos algo semelhante no Codex. É o que vou usar. Então, basta clicar em adicionar. Aqui, você pode mudar o modelo novamente. O mais recente no momento em que estou gravando este vídeo é este. Você também pode atualizar o nível de esforço. Então, aqui, vou conceder acesso total para

18:42 que eu não fique, hum… Uma coisa que quero mencionar é que, quanto mais alto você escolher — como Extra High e até Ultra —, melhor será o resultado, mas vai levar muito mais tempo do que deveria. Então, normalmente, eu escolheria Médio ou Alto. Se estiver criando algo, um recurso que não seja tão importante, mas, se estiver tentando criar algo que precisa funcionar exatamente como eu

19:12 quero, provavelmente escolheria Extra High ou até Ultra. Mas saiba que vai levar muito mais tempo se você escolher uma dessas opções. Então, neste tutorial, para começar, acho que vou escolher Médio. E, nas permissões, vou conceder acesso total para que ele não fique me fazendo perguntas o tempo todo. Então, basicamente, digo: “Ei, Codex, faça o que quiser. Não me pergunte. Só tome cuidado.” Mas, normalmente, você pode simplesmente conceder acesso total mesmo assim. Certo. Para começar, a primeira

19:46 coisa que vou fazer é abrir o terminal com Ctrl J. Acho que agora o aplicativo está em execução. Tivemos um erro, mas ele se corrigiu sozinho. Aqui, dá para ver que, se você pressionar R, o aplicativo vai recarregar. E temos este projeto padrão do Expo. Agora, é claro, vamos apagar tudo. Vamos fazer isso. Abra o terminal. Encerre o processo com Ctrl C. Limpe a tela. Há um comando que podemos

20:17 executar. É npm run reset-project. Basicamente, ele vai pegar todas essas pastas e arquivos de que não precisamos e apagá-los. Agora temos alguns componentes de que não precisamos, algumas constantes, hooks e assim por diante. Então, basta executar o comando. Depois, pressione Enter mais uma vez. Aqui, dá para ver que tudo foi apagado e colocado em uma pasta chamada example, que não é necessária para mim. Então, vou apagá-la também. Agora vamos

20:47 executar este aplicativo com npx expo. Foi isso que tínhamos inicialmente, certo? Agora, se você pressionar R, ele vai recarregar. E veja que temos um aplicativo muito mais simples, certo? É literalmente uma única tela com um texto simples. Certo. Com isso em mente, vamos planejar um projeto. Neste tutorial, eu gostaria de usar… Desculpe, gostaria de criar um aplicativo de rede social parecido com o Instagram, mas

21:18 é claro, muito mais simples. Certo, pausei o vídeo sem querer, mas estava dizendo que gostaríamos de criar um clone do Instagram muito mais simples, certo? Então, talvez tenhamos coisas como publicar fotos, comentar, ter uma tela de perfil e coisas assim. E este é o workflow que vamos usar. Foi o que usei para criar meu próprio aplicativo para celular também. Vou tentar dividir o processo em etapas ao longo deste curso. Então, a primeira coisa

21:49 que você precisa fazer é planejar seu projeto. Esta é uma etapa que muitos iniciantes simplesmente pulam. Eles começam a programar imediatamente porque estão muito empolgados. Mas isso quase sempre dá errado, porque, se você não planejar tudo, em algum momento a IA vai começar a adivinhar, até mesmo logo no início. Então, o que você deve fazer é dar contexto à IA sobre o tipo de projeto que deseja criar, sabe, definindo sua ideia, seus objetivos,

22:19 recursos, páginas, fluxo do usuário e stack de tecnologia, para que ela não fique adivinhando todas essas ferramentas e funcionalidades. E, para isso, tenho um prompt muito, muito bom que funciona sempre. Vou deixar na descrição. Basta copiar tudo e você pode pausar o vídeo para ler. Basicamente, vou tentar simplificar: pedimos à IA que nos entreviste sobre cada detalhe do projeto, para que ela não precise adivinhar nada e para que

22:51 estejamos alinhados. Certo. Mais uma vez, você pode ler tudo se tiver interesse, mas vou copiar e abrir no Claude — desculpe, no VS Code e no Codex. Aqui, você deve selecionar o modo. Deixe-me encontrar. Deve ser o modo de planejamento. Para selecionar esse modo, você precisa clicar neste sinal de mais. Depois, selecione o modo de planejamento. Agora, cole primeiro o prompt. E aqui dizemos: “Vamos descrever o projeto para você.”

23:23 Agora, vou explicar tudo. Quando terminar, já volto. Pausei o vídeo e tentei explicar o projeto ao Codex. Aqui está o prompt completo. Eu disse que quero criar um aplicativo simples de rede social no estilo do Instagram, usando o Clerk para autenticação e o Convex para o backend e o banco de dados. Vou falar sobre essas duas tecnologias, mas, basicamente, esta é a stack de tecnologia para começar. Depois, eu disse que os usuários devem poder se cadastrar

23:54 e entrar com Google ou Apple. Eles devem poder criar posts com imagens ou vídeos, seguir e deixar de seguir pessoas, sabe, curtir e comentar. Você pode ler o restante. Também há o envio de mensagens diretas, certo? E eles também podem ver e editar o perfil. E aqui digo que o aplicativo deve ter quatro abas principais: início, mensagens, explorar e perfil. Já que estamos falando de abas, vamos dar uma olhada nas abas nativas do Expo.

24:27 Vou pesquisar “native tabs” e acessar a página na documentação do Expo. Role até o final. Estas são as abas. É disso que estou falando. E as abas nativas oferecem o efeito Liquid Glass do iOS, certo? Então, você não precisa mudar o estilo nem criá-las do zero. Há um componente chamado native tabs que oferece todos esses recursos prontos para usar. Se tiver interesse, você pode consultar a documentação completa. Mas é

24:59 algo que gostaríamos de usar aqui. Vamos também dizer que usaremos native tabs e, para a estilização, algo como NativeWind. Basicamente, NativeWind é o Tailwind CSS para React Native, certo, para aplicativos móveis. Certo, você entendeu. Primeiro, você vai

25:30 pegue o prompt do plano daqui, certo? E então você deve descrever seu projeto. Foi exatamente isso que eu fiz. Claro, ele deve ser bem mais detalhado, se possível, mas, para esta demonstração, acho que está bom. E agora vamos executar. Serão feitas algumas perguntas diferentes, em algumas rodadas diferentes. Primeiro, vamos receber talvez umas quatro perguntas. Vamos responder a todas e depois receber outra rodada de

26:01 quatro perguntas e, depois, mais uma, até que a IA tenha todas as informações e o contexto completo. Quando tivermos isso, o plano estará pronto e poderemos começar a construir o projeto. Mas, em vez de começar a construir imediatamente, o que eu gostaria de fazer é gerar o design da UI com base no plano que criamos. Vou explicar isso de novo: vou passar alguns prompts para gerar o design da UI. Certo, voltei ao VS Code. Aqui temos a primeira

26:34 rodada de perguntas. Temos três perguntas diferentes. Aqui diz: quem é V14 e o que conta como um primeiro lançamento bem-sucedido? Na maioria das vezes, você vai querer escolher a resposta recomendada, mas haverá alguns casos em que vai querer escolher uma resposta diferente da recomendada e, às vezes, até adicionar sua própria descrição. Neste caso, vou dizer apenas que deve ser uma demonstração funcional e vou escolher a opção

27:04 recomendada. Depois, pergunta se devemos criar o app para iOS e Android. Aqui, quero que ele seja apenas para iOS no início. Então, vou selecionar esta opção. Se quiser, você também pode selecionar esta outra, mas vou escolher esta. E, digamos, acesso público para membros. Sim, todos devem poder usá-lo, desde que estejam conectados. Certo, agora a IA vai guardar essas respostas na memória e depois vai nos fazer

27:36 outra rodada de perguntas. Acho que vou responder a todas elas. Quando terminar, já volto. E, em vez de responder fora da câmera, vou fazer isso aqui mesmo, para que você veja o tipo de pergunta que estou recebendo. Para a criação de imagens, vamos dizer que só será possível enviar uma imagem, para manter as coisas simples. Aqui pergunta o que os usuários devem ver depois de se cadastrarem. Vou dizer que eles precisam escolher um nome de usuário e, aqui, vou dizer: cabeçalho da página inicial

28:07 e botão. Que comportamento você quer para comentários e exclusões na demonstração? Vamos usar comentários simples e permitir que cada usuário exclua os próprios. Dá para fazer algo bem mais complexo, mas não é isso que você quer para a versão inicial. Aqui, de novo, você pode ler a pergunta. Esta será minha resposta. Depois, pergunta quais limites de mídia são aceitáveis para esta demonstração. Vamos dizer imagens de até 10 megabytes e vídeos de até 30 segundos e 50 megabytes.

28:41 Não queremos permitir imagens e vídeos grandes demais no início. Aqui pergunta se a versão 1 pode excluir as notificações push. Sim, com certeza. Não queremos incluir pagamentos nem notificações push na versão inicial. Vou responder que sim. Uma demonstração confiável. Não queremos criar algo muito complexo desde o começo. E foi isso que também fiz com meu próprio app para dispositivos móveis. Em vez de criar todos os

29:11 recursos desde o início, basicamente comecei com uma versão simples, que é a V1, certo? Apenas um MVP. Então, defini que, no mínimo, os usuários deveriam poder tirar uma foto e calcular as calorias com IA. Depois que fiz isso, adicionei vários outros recursos, certo? Você não quer criar tudo desde o começo. Pela minha experiência, essa abordagem tem funcionado muito bem. E é isso que eu recomendo. Eu diria

29:42 que, aqui, vamos dizer que queremos criar nossa própria tela nativa personalizada, em vez de usar a UI do Clerk, porque quero mostrar como gerar algo a partir do design da UI que vamos receber da IA. Certo. Vou escolher esta opção e queremos usar Convex em todo o projeto. Vamos dizer que seja primeiro online e que também haja novas tentativas. Agora tenho outra pergunta sobre o tema. Em vez de escolher uma dessas opções, vou escrever minha própria

30:13 descrição, ou tentar explicar algo. Por enquanto, apenas o modo claro. Quanto às cores, vou dizer que fornecerei uma referência de design mais adiante, porque não queremos que ele use uma paleta de cores como azul, sabe? Não quero isso; mais tarde, vou fornecer um design pronto. Então, vou dizer para usar esse design.

30:49 Vamos dizer que deve ser tocar para reproduzir, acho. Sim, é o recomendado. Vou escolher essa opção. Agora, existe algo chamado build de desenvolvimento. Deixe-me tentar explicar rapidinho antes de responder. Aqui, dá para ver que estamos executando nosso aplicativo, certo? Mas ele está dentro do Expo Go. Esta é uma ferramenta fornecida pela Expo, mas serve para testes, certo? É para fins de aprendizado. Quando você está criando um aplicativo de verdade, vai

31:22 querer criar um build de desenvolvimento, porque nele você pode não ter todos os recursos, ou alguns módulos nativos podem não funcionar no Expo. Certo. Em termos simples, mais uma vez: isso é para testes e demonstrações de aprendizado. Se quiser criar um projeto de verdade, você vai querer usar algo chamado build de desenvolvimento. Basicamente, o que isso faz, em termos simples, é pegar seu aplicativo e, em vez de executá-lo dentro do Expo Go, criar

31:54 um aplicativo independente desse tipo. Certo. Vamos ver como funciona. Sei que isso parece confuso para quem está começando, mas acho que não tem problema. Vamos ver como funciona. Se você estiver criando um projeto de verdade, vai querer usar um build de desenvolvimento. Essa é a maneira simples de explicar. Ainda temos mais perguntas. Vou escolher as opções recomendadas para não perdermos muito tempo. Mas acho que você consegue ver o

32:26 workflow. Você vai receber todas essas perguntas para que a IA não fique adivinhando os recursos; em vez disso, é você quem decide tudo. Agora, aqui pergunta o que um usuário novo deve ver se não segue ninguém. Basicamente, quando você se cadastra pela primeira vez, não está seguindo ninguém. Então, o que deve aparecer na tela? Você pode escolher um estado vazio. Vou dizer conteúdo de demonstração preenchido, ou seja, adicionar algum conteúdo falso ou contas de teste, para que possam ver algumas publicações. Acho que isso vai ser melhor, especialmente para este tutorial. Se eu estivesse criando um projeto de verdade, provavelmente escolheria estados vazios sinceros. Mas aqui vou selecionar esta opção. E aqui pergunta se as mensagens devem incluir indicadores de não lidas. Acho que, por enquanto, vamos deixar apenas a lista básica de conversas. Talvez possamos adicionar esses recursos mais tarde, mas, por ora, vamos manter tudo simples e escolher esta opção. E aqui pergunta se você vai

32:58 conseguir — esta é a outra pergunta que acabei de receber, e esta será minha resposta. Vou dizer que, por enquanto, vamos usar a autenticação do Clerk com uma chave pública, e vamos falar disso mais adiante. Basicamente, o Clerk vai fornecer uma variável de ambiente, que será nossa chave pública para usar durante o desenvolvimento. Vou enviar essa resposta também. Fora da câmera, respondi a mais algumas perguntas. E aqui está tudo. Você pode pausar o vídeo e ler. Se

33:31 estiver criando um projeto de verdade, é exatamente isso que eu faria. Agora, aqui diz: “Pronto para transformar isso em um plano de implementação?” Vou dizer que, por enquanto, pode criar isso em um arquivo Markdown chamado plan.md, algo como o readme.md. Assim, pelo menos vou poder ver o plano. Então, vou dizer: por enquanto, crie um arquivo plan.md com todos os detalhes.

34:02 Se você está criando um projeto de verdade, é exatamente isso que eu faria. E aqui agora diz: “Pronto para eu transformar isso em um plano de implementação.” Por enquanto, vou apenas dizer para criar isso em um arquivo Markdown chamado plan.md, meio como um readme.md. Mas, pelo menos, eu deveria conseguir ver o arquivo aqui. Então, por enquanto, vou apenas dizer para criar um arquivo plan.md com todos os detalhes.

34:36 para que depois possamos, sabe, implementar isso passo a passo. Então vou executar isso. Ele vai criar esse arquivo plan.md e, depois disso, vou encerrar esta aula por aqui. Na próxima aula, vamos começar com o design da interface. Para isso, mais uma vez, vou fornecer um prompt que vai nos ajudar a gerar designs de interface realmente bonitos. E, quando tivermos o design, vamos para o Codex e dividi-lo em recursos. Por exemplo, primeiro vamos criar a autenticação…

35:07 …e depois, digamos, a conexão com o banco de dados, e assim por diante. Vou entrar nisso na próxima aula. Por enquanto, vamos só esperar que ele crie o plano. Aqui diz que este é o plano completo. Ele ainda está tentando escrevê-lo. Quando terminar, acredito que vamos receber o arquivo plan.md. Certo. Aqui temos o plano completo. Você pode dar uma olhada. Você também terá seu próprio

35:37 plano. Aqui ele pergunta: “Quer que eu implemente isso?”. E eu digo: por enquanto, crie apenas o arquivo; depois vou pedir a implementação. Acontece que ele não consegue criar o plan.md enquanto estamos no modo de planejamento. Então, aqui ele diz para simplesmente desativá-lo. Se você clicar aqui, o modo de planejamento desaparece. E aqui vou dizer apenas “faça” ou, melhor, “faça agora”. Então, em dois minutos, ele criou o plan.md com todos os

36:09 detalhes. Você terá exatamente a mesma coisa, dependendo do contexto que forneceu à IA. Certo. Acho que podemos encerrar esta parte por aqui. Mas, antes disso, o que eu gostaria de fazer é salvar tudo em um commit e publicar no GitHub. Vou fechar isto. Se quiser, você pode pedir para a IA fazer isso por você, mas, na primeira vez, vou fazer manualmente. Primeiro, vamos ao GitHub. Se você não tiver uma conta, crie uma.

36:40 É totalmente grátis para começar. Depois, clique em “New” e crie um novo repositório. Você verá esta tela. Dê um nome para ele aqui. No meu caso, acho que vou escolher algo assim. Acho que vou usar este nome. Por enquanto, vou deixá-lo privado, mas, quando você estiver assistindo a este vídeo, ele será público e gratuito. Mas, por enquanto, vamos deixá-lo privado. Sim. Fora isso, você pode deixar tudo como está e criar o repositório.

37:10 Agora ele vai nos mostrar um comando, que é esta parte. Vamos copiá-lo e colá-lo no nosso terminal. Primeiro, vou copiar isto e abrir o VS Code. Primeiro, vou preparar todas as alterações. Nesta aba, clique neste botão, onde diz para preparar todas as alterações. Depois, vamos criar uma mensagem de commit clicando neste botão. Assim, a IA vai criar a mensagem. Tecnicamente, você pode escrever qualquer coisa, mas é melhor usar este recurso da

37:42 IA. Agora vamos fazer o commit. E vamos tentar publicar a branch, eu diria. Mas primeiro, acho que precisamos abrir o terminal, encerrar isso, limpar o terminal e colar o que acabamos de copiar. O que isso faz, basicamente, é pegar todas essas alterações locais que temos no nosso laptop, na nossa máquina, e enviá-las para o repositório que acabamos de criar. Repare que, assim que isso for concluído

38:13 com sucesso, você poderá atualizar a página e ver tudo exatamente aqui. Certo, tínhamos todas essas alterações locais. Agora elas estão disponíveis no GitHub. Certo, acho que vou encerrar esta aula por aqui. Lembre-se: esta é uma das etapas mais importantes quando você está criando um aplicativo. Acho que você deveria dedicar bastante tempo ao planejamento do seu aplicativo. Então, em vez de partir direto para a programação,

38:44 você deveria dedicar bastante tempo e conversar com a IA, como fizemos nesta aula. Certo. Com isso, nos vemos na próxima aula, em que vamos gerar o design da interface. Certo. Foi aqui que paramos na aula anterior. Planejamos nosso projeto. Agora é hora de começar com o design da interface. Para isso, já tenho vários prompts diferentes que usei e que me deram designs realmente muito bonitos. Agora vamos usar algo parecido. Aqui temos um design para um aplicativo de planejamento de viagens com IA

39:15 planner. Temos outro para um aplicativo de receitas, e este é o prompt que usei para obter aquele design. A mesma coisa para um aplicativo de namoro. Depois, o design de interface propriamente dito para o meu aplicativo móvel e, por fim, o design de interface do aplicativo odontológico. Você encontra este link na descrição. Vou deixá-lo lá. Vamos rolar até o topo e, basicamente, vou copiar o prompt inteiro. Mas lembre-se: este é para o aplicativo de planejamento de viagens, enquanto nós

39:46 estamos criando algo como um aplicativo de rede social. Então, o que vamos fazer é primeiro copiar este prompt, abrir o ChatGPT ou o Gemini, o que você estiver usando, colar o prompt e, em seguida, dizer: “Com base no nosso plano”, que está aqui. Vamos copiá-lo e dizer: “Com base no nosso plano, crie um prompt como este”. Quando tivermos o prompt, vamos colá-lo em uma nova conversa, que vai gerar a imagem para nós. Então, vou colar aqui o meu

40:18 plano. Depois, posso dizer algo como: “Com base no plano que tenho, quero que você crie um prompt como este, que gere um design de interface”. Certo. Mais uma vez, basicamente, ele vai ler o nosso plano e, com base nele, vai nos dar um prompt como este, para podermos abrir uma nova conversa e gerar uma imagem. E há um novo modelo que a

40:49 GPT acabou de lançar, o image 2.5. Ele parece muito bom. Já experimentei. Vamos dizer apenas “criar imagem”. Quando tivermos o prompt, vou copiá-lo e colá-lo. Mas parece que isto está tentando gerar a imagem. Bem, na verdade, não. Não era uma imagem. Era um prompt, como pedimos. Então, vou copiar tudo isso até aqui. E vou

41:21 colá-lo bem aqui. Certo. Depois de algum tempo, este foi o resultado que obtive com o GPT. Acho que a própria interface está bem limpa e nítida. Mas há algumas coisas de que não gostei muito, como o ícone. Então, em vez dele, gostaria de ter um ícone de câmera. Também vou dizer que este é o sistema de design e que quero aprimorá-lo. Aqui está o meu prompt. Você pode fazer algo parecido. Eu disse: “Este é um bom começo, mas quero que você atualize

41:53 o logo, trocando a letra C por um ícone de câmera, parecido com o do Instagram, mas um pouco diferente. Então, não o copie exatamente. Além disso, aprimore o sistema de design como uma imagem separada”. Vou executar isso. Quando tivermos o sistema de design, vamos abrir o VS Code. Vamos criar uma pasta chamada design. Dentro dela, vamos colocar o sistema de design. Vamos anexá-lo. E também vamos ter cada uma destas telas

42:24 aprimorada individualmente. Esse é o meu workflow. Deixe-me mostrar. Vamos gerar o design completo da interface, mais ou menos como fizemos aqui. Certo? Depois, vamos aprimorar cada tela, uma por vez. Digamos que primeiro vamos aprimorar a tela de autenticação e depois, não sei, a tela de perfil do onboarding, e assim por diante. Vamos criá-las uma por uma. Acho que podemos começar pela tela de autenticação. E acredito que

42:55 Bem aqui, deveríamos ter a tela de autenticação. Deixe-me tentar dar zoom. É, mas assim não ficou muito bom. Isso não está com uma aparência muito boa. Acho que esse texto é desnecessário. Mas vamos continuar fazendo mais algumas iterações com o GPT até conseguir algo de que realmente gostemos. Essa é a questão com IA. A maioria das pessoas tenta obter o melhor resultado logo de primeira e, quando não consegue, meio que desiste. Diz que IA é uma porcaria. Não é muito

43:28 bom. Mas, cara, no fim das contas, é só IA. Você precisa fazer mais algumas iterações, dar uma referência, sabe, para conseguir algo de que realmente goste. Neste caso, eu não gostei muito do design da tela de autenticação. Então vou pedir uma alteração daqui a pouco. Certo. Depois de um tempo, esta foi a imagem que consegui. Dá para ver que o logo foi atualizado e acho que também temos o sistema de design, que foi meio que ampliado. Então podemos copiar isso e colar no VS Code daqui a

44:00 pouco. Mas aqui, como eu já disse, não gostei da tela de autenticação da interface. Então dá para ver aqui o meu prompt. Eu só disse: “Me dê uma variação diferente e amplie essa imagem. Amplie também o sistema de design.” Por algum motivo, no começo não vi esta imagem. Mas vou copiar esta imagem e colá-la aqui, e vamos chamá-la de referência do sistema de design.

44:32 Agora, geramos isso e também o design completo porque nosso agent de IA pode analisar a imagem e identificar todos os componentes, todas as cores, como as fontes, literalmente tudo de que precisa. Aqui seria mais difícil encontrar essas informações, e a imagem não inclui tudo. Agora vou copiar esta imagem também. Vamos para o VS Code. Vou colá-la aqui. E vamos dizer que este é o design da tela de autenticação ou você pode simplesmente dizer

45:05 que também é uma referência. É assim que costumo chamá-la. Com isso, podemos pedir à IA que crie esse design. E, para isso, mais uma vez, tenho um loop meio especial que vou mostrar nos próximos minutos. Mas, por enquanto, essa é a tela de autenticação. Depois da autenticação, o que podemos criar? Vamos dar uma olhada. Podemos criar a tela de perfil ou a tela inicial, mas, por enquanto, vou copiar esta imagem inteira. Então eu

45:37 estava dizendo que vou copiar esta imagem e abrir o VS Code aqui. Vou colá-la e chamá-la de referência de design, ou simplesmente referência de design do app. Certo, este é o design completo, não é? Este é o sistema de design e esta é a tela de autenticação. Sempre que quisermos criar uma tela por vez, vamos usar imagens desse tipo. Vamos ampliar cada tela. Talvez você esteja se perguntando

46:08 como podemos obter esta imagem de demonstração para usá-la na tela de autenticação. Boa pergunta. Vou abrir o GPT e dizer: “Quero que você gere a imagem de demonstração que está usando na tela de autenticação.” Certo. Ele vai gerar essa imagem para podermos usá-la depois na tela de autenticação. Então, não sei

46:39 por que, mas inicialmente ele gerou esta imagem, que não gostei muito, porque esta é a que gostaríamos de usar na tela de autenticação. Então fiz esta captura de tela. Se você estiver no Mac, use Command + Shift + Control + 4. Certo. Command + Control + Shift + 4 permite fazer a captura de tela; depois, é só colá-la aqui. Então eu disse: “Eu quis dizer esta”, e também pedi para deixar o fundo transparente, para

47:10 combinar com o fundo branco do aplicativo. Certo. Basicamente, não queremos esse fundo na imagem. Este foi o resultado final que consegui. Vou copiá-lo e colá-lo aqui. Vamos colocá-lo na pasta assets/images. Ctrl + V e vamos chamá-lo de imagem de demonstração da tela de autenticação. Mais adiante no vídeo, vamos usá-la, e vou mostrar como anexá-la ao chat do Codex. Certo, então

47:43 esse é, em termos simples, o meu workflow de design. Eu poderia ter feito isso muito mais longo. Poderia explicar cada detalhe, como criar cada tela e como ampliá-las, mas essa é basicamente a ideia geral. Agora, você precisa repetir o mesmo processo várias vezes para gerar todas essas imagens. Na verdade, mais adiante no vídeo, você vai ver que, em certo momento, não precisamos criar todas elas, porque vamos

48:13 ter referências de design suficientes, e o Cloud vai conseguir criar as outras telas só de olhar para esta imagem. Certo. Com isso em mente, acho que vou encerrar esta seção aqui. Acho que esta foi uma aula de 10 minutos, mais ou menos. De 10 a 15 minutos. Vou adicionar tudo ao stage. Temos apenas algumas imagens e vamos pedir uma mensagem de commit. Quando tivermos a mensagem de commit, vamos

48:43 fazer o commit e sincronizar tudo. Basicamente, isso vai pegar estas alterações locais e enviá-las para a nossa conta do GitHub. Deixe-me mostrar. O nome era Codex Graham. Vou acessar esse repo. E aqui dá para ver que acabamos de receber essas alterações. Certo. Com isso, acho que vejo vocês na próxima aula. Certo. Na aula anterior, geramos o design da tela de autenticação.

49:15 Agora vamos ver como podemos pegar isso e transformá-lo em realidade. Há um loop que sempre uso: pedimos ao Cloud para tirar uma captura de tela do simulador. Certo? Digamos que esta seja a nossa tela de autenticação. Dizemos para tirar uma captura de tela e compará-la com o resultado final até que sejam idênticos. Vá em frente e faça isso, certo? Então, é como um loop. Primeiro, pedimos para criar a tela de autenticação. E aqui está

49:46 o workflow: tire uma captura de tela do simulador e compare-a com o design original. Se estiver idêntica, pare. Se não estiver, continue. Certo? Então, é como um loop. Ele vai rodar algumas vezes e, quando terminar, quando estiver idêntica, vamos dizer: “Certo”. Eu estava dizendo que, quando estiver idêntica, é só seguir para o próximo recurso ou para a próxima tela, seja o que for. Certo? Com isso em mente, vamos conversar com o Claude.

50:16 Desculpe, com o Codex, neste caso. Não estou usando o Claude, mas você entendeu. Acho que vou abrir um novo chat e tentar explicar. Certo, pausei o vídeo e expliquei. Você pode pausar o vídeo e ler. Basicamente, é exatamente o que acabei de explicar. Vou executar isso. Deixe-me conferir se o aplicativo está rodando. Acho que não está. Então vou digitar npx Expo.

50:49 E vou pressionar R — ou você deve pressionar I se o aplicativo não estiver rodando no simulador. Agora ele está aqui, como dá para ver. Enquanto ele tenta criar isso, podemos criar a aplicação do Clerk. O Clerk será o serviço de autenticação que vamos usar. É totalmente grátis para começar e você não precisa pagar nada; nem sequer precisa informar os dados do cartão de crédito. Então é só criar uma conta e, aqui, você pode criar uma nova

51:20 aplicativo. No meu caso, tenho vários aplicativos diferentes, mas vamos começar do zero. Vamos dar um nome a ele. Vou chamar de Codex Creme. Você pode dar qualquer nome. Depois, basta adicionar as opções de login que gostaria de oferecer. No meu caso, vou desativar o e-mail e deixar apenas Google e Apple. Agora, uma coisa que quero mencionar: se você incluir algo como a autenticação do Google, também precisa incluir a autenticação da Apple, certo? Então

51:51 basicamente, a Apple exige que, se você incluir outras integrações sociais para autenticação, também tenha a autenticação da Apple; caso contrário, seu aplicativo será rejeitado. Vamos ativar as duas opções no painel do Clerk e clicar em criar o aplicativo. Certo, aqui eles têm vários SDKs, literalmente para tudo. Mas, no nosso caso, vamos usar o SDK do Expo. Agora você pode copiar

52:22 o prompt e deixar a IA configurar isso. E é exatamente o que vou fazer. Mas, se quiser ver toda a configuração manual, basta clicar aqui. Depois, você pode seguir as etapas. O que vou fazer é pegar a variável de ambiente. Então, vou copiá-la e vir até aqui. Vou criar o arquivo env e colar isso nele. Temos uma chave publicável. Basicamente, com essa chave, podemos nos conectar a este aplicativo

52:55 que acabamos de criar. Você pode pensar dessa forma. Acho que vou copiar este prompt. Mas gostaria de implementar a autenticação um pouco mais adiante no vídeo. Por enquanto, vamos configurar o design da interface. Vou voltar assim que isso estiver concluído. Certo, depois de cerca de 4 minutos, chegamos ao resultado final. Acho que ficou bem parecido com o design que anexamos. Deixe-me encontrá-lo. Certo, está quase idêntico. Temos

53:26 os três pontos bem aqui, o ícone, o logo, literalmente tudo. O que eu gostaria de remover talvez seja este texto. Acho que é desnecessário. Posso procurar por ele e apagá-lo eu mesmo. “Um aplicativo social em que testadores confiam.” Vamos encontrá-lo. Vou apagar este texto. Acho que é desnecessário.

53:56 Além disso, acho que está bem clean, especialmente para a versão um. Talvez possamos atualizá-lo mais adiante. Mas, por enquanto, vou deixar como está. Agora, vamos pegar este prompt. Vou copiá-lo e colá-lo aqui. E vou dizer: implementar. Então, acabei de pedir para implementar a autenticação com Clerk. E aqui está a documentação completa. Mais uma vez, volto assim que

54:27 isso estiver pronto, porque, por enquanto, se você clicar, nada acontece. Mas agora o Codex vai implementar isso, e deve funcionar. Certo. Aqui você pode ver que ele criou tudo e agora está até usando meu computador e fazendo testes sozinho. Isso é o Codex. Ele clicou aqui e agora acho que vai clicar em continuar ou cancelar. Está literalmente testando isso. Agora, o que vou fazer é simplesmente interromper esse processo, porque

54:58 acredito que a implementação já foi concluída com sucesso. Vou testar. Vou clicar neste botão e escolher continuar. Já tenho uma conta na qual entrei antes. Mas o que está acontecendo? Vamos escolher cancelar. Espera, acho que vou fechar isto primeiro. Certo, acredito que aqui você pode ver o Codex Graham, e esta é a versão de desenvolvimento. Já mencionei isso brevemente antes, mas

55:30 nunca expliquei como fazer isso. Acho que você pode ver que o Codex já criou a versão de desenvolvimento, mas vamos supor que você não saiba como fazer. Vou tentar explicar rapidinho. Primeiro, existe algo chamado Expo Dev Client. É um pacote que você pode consultar, ou um módulo. Você copiaria isto, certo, e colaria no terminal: npx expo install expo-client. Depois de fazer isso, você abriria o terminal e

56:01 abriria um novo terminal. Certo? Então, executaria npx expo run:ios ou npx expo run:android se estivesse criando para Android. No meu caso, será para iOS. Parece que o Codex já executou o comando. Se você olhar aqui, tenho uma pasta iOS, certo? Se executar para Android, também terá a pasta Android. E isso é basicamente o

56:33 aplicativo inteiro, certo? Mas ele é criado dentro da pasta iOS. Esta é uma versão de desenvolvimento. Agora podemos vê-la aqui. Certo? Há muito mais detalhes, mas podemos deixar assim para explicar de forma simples. Certo. Daqui em diante, sempre que eu quiser executar meu aplicativo, vou executá-lo daqui. Não vou abrir o aplicativo Expo Go, porque, como eu disse, ele era para testar aplicativos pequenos.

57:04 Certo. Espero que isso faça sentido. Agora, vamos clicar em continuar com Google. Antes de clicar em continuar, se você pressionar Ctrl+D, abrirá as ferramentas de desenvolvedor. Aqui, você pode ativar o botão de ferramentas, que é este. Isso é apenas para desenvolvimento. Você não verá isso quando publicar seu aplicativo na loja de aplicativos. Certo? Aqui, você pode alternar o estado, usar a atualização rápida, recarregar, ir para a

57:36 tela inicial, basicamente fazer tudo. Agora, vamos clicar em continuar com Google e testar se a autenticação funciona. Isso demora um pouco, mas não sei por quê. Vou pressionar Ctrl+D e recarregar. Certo, agora vamos tentar criar uma conta

58:06 porque, se você olhar agora na seção de usuários, não temos nenhuma conta. Ah, acho que temos, e acredito que seja porque o Codex testou isso em segundo plano. Mas, sim, acabamos de entrar aqui. Também podemos sair da conta e voltaremos para esta tela. Certo, essa é a autenticação. Em termos simples, ela está implementada. Você também pode testar com a Apple, mas, como o Google está funcionando, isto também está funcionando 100%. Só que não vou

58:38 testar. O que fiz fora da câmera foi acessar o GPT no mesmo histórico de conversa. Paramos neste ponto. Pedi para ampliar as telas inicial, de perfil e de conversa. Gerar cada uma delas como uma imagem separada. Temos a tela de conversa, a tela inicial e a tela de perfil. Vou copiar cada uma dessas imagens e abrir o VS Code. Vamos maximizar a tela

59:10 na pasta de design. Vou colar. Opa. Vou colar esta. Vamos chamar de referência da tela inicial. E vamos ao GPT. Basicamente, vou fazer a mesma coisa com as outras telas. Esta será a referência da tela de conversa. E, por fim, acho que a tela de perfil.

59:47 Certo. Outra coisa que fiz foi gerar mais telas. Pedi para ampliar a tela de exploração, que é esta. É esta aqui. Depois, pedi a folha de edição do perfil e a folha de comentários, e pedi para gerar cada uma delas como uma imagem separada. Aqui você pode ver os comentários. Elas são necessárias para que o GPT ou o Codex as copie. Então, o que você deve fazer é copiá-las e colá-las

1:00:19 aqui. Vou chamar de referência da tela de exploração. Agora, também vou pegar as outras imagens, mas acho que gostaria de ir ao Codex e dizer: assim como na tela de autenticação, quero que você crie a tela inicial, onde temos aquele loop. Certo? Vou tentar explicar. Deixe-me mostrar rapidinho. Certo. Vou dizer: entre nesse loop mais uma vez e crie a

1:00:51 tela inicial. Por enquanto, não temos um banco de dados. Não temos nenhum dado. Então, vou pedir para criar alguns dados de teste ou dados fictícios, como um destes, e montar a interface. Vou pausar o vídeo e preparar meu prompt. E aqui, se você quiser fazer referência a uma imagem, que é a tela inicial, basta dizer “adicionar” e depois incluir o nome do arquivo. Então, será home screen rev.png. Vou executar isso. Quando terminar, já volto. Então

1:01:21 agora ele já montou a tela e ainda está nesse ciclo. Literalmente, está tentando compará-la com o resultado final e corrigir os problemas. E, neste momento, consigo ver um problema bem aqui. Ele deve corrigir esse tipo de transbordamento. A tela deveria ficar assim. Então, vou esperar até que termine. Quando estiver pronto, já volto. Mas isso está idêntico. Literalmente, é exatamente o mesmo resultado final. Certo, então o GPT

1:01:51 terminou, mas ainda há alguns problemas que ele não corrigiu de verdade. Não é algo com que você deva ficar bravo, porque, no fim das contas, é IA. Você deve fazer capturas de tela e pedir ajustes. É isso que eu faço. Literalmente, tiro uma captura de tela e colo aqui. E, em vez de pedir algumas atualizações ou correções em um único prompt, peço uma correção de cada vez. Então, aqui tirei a captura de tela e vou dizer: corrija esse

1:02:22 transbordamento. Certo. Quando isso terminar, vou pedir o próximo ajuste. Vou dizer: use as abas nativas para estas abas, certo? Mais uma vez, as abas nativas são algo que temos no expo. Você pode conferir; isso vai nos dar o efeito Liquid Glass do iOS. Se quiser, você pode copiar a página inteira em Markdown. Assim, terá a página inteira como uma

1:02:52 documentação e poderá colá-la aqui. Na verdade, é isso que vou fazer. Vou dizer algo como: converta as abas em abas nativas. E aqui está a documentação completa; então, você colaria isso. Agora vou executar, mas primeiro vamos esperar a tarefa atual terminar, e acho que já terminou. Agora, o GPT está tentando usar meu

1:03:23 simulador e testar isso. Certo. Aqui dá para ver que acho que não há transbordamento, mas a imagem não está bem — dá para ver que ela tem o fundo preto, algo que podemos corrigir. De qualquer forma, são dados de teste fixos. Certo. Vou executar isso agora. Em alguns minutos, as abas devem ser convertidas em abas nativas. Certo. Depois de 5 minutos, ele conseguiu criar as abas nativas. Como vocês

1:03:55 podem ver, está com uma aparência bem mais limpa em comparação com a versão anterior. Havia um problema aqui. Dá para ver que o fundo estava meio cinza, mas agora está transparente. Isso porque eu pedi. Então, tirei uma captura de tela e disse: “As abas nativas estão como eu queria, mas remova o fundo cinza, para que o restante do aplicativo fique visível.” Certo? Antes, havia um fundo cinza aqui. Dá para ver. Mas

1:04:26 agora não temos mais isso. Como podem ver, ele corrigiu em menos de 1 minuto. Com isso, espero que vocês consigam entender meu workflow. Agora, do mesmo jeito, vou criar a tela de perfil, a tela de exploração e também a tela de mensagens. Aqui, acho que adicionei mais algumas imagens da câmera. Então, tínhamos a tela inicial do perfil. Adicionei a referência de edição do perfil, certo? Esta tela. Também adicionei a tela de comentários e acho que a tela de chat

1:04:57 também. Certo, estas são algumas das telas que adicionei sem gravar. Além disso, não atualizei nada na base de código. Agora vou dizer para fazer exatamente a mesma coisa na tela de perfil. Quando terminar, já volto. Só para registrar, este foi meu prompt: “Agora, crie a tela de perfil. Use esse ciclo e aqui está a imagem de referência que acabei de anexar.” Certo, em 6 minutos ele conseguiu criar e testar. Esta é a

1:05:29 tela de perfil. Agora eu só disse para criar a tela de edição do perfil e anexei a imagem de referência. Vou executar isso e volto quando terminar. Talvez vocês estejam se perguntando por que não implementamos nada agora. Bem, é porque acho que é sempre melhor fazer todo o design da interface primeiro; depois, vai ser muito fácil substituir tudo pelos dados reais. Por enquanto, este é o meu workflow. Estou tentando fazer o máximo possível do design da interface. E, quando eu quiser implementar

1:06:01 o backend de verdade, tudo o que preciso fazer é substituir estes dados pelos dados reais. Certo, vamos configurar o Convex nas próximas seções. Mas, por enquanto, vamos criar a maior parte do design da interface. Certo, depois de um tempo, aqui está. Essa tela também foi criada. Mas acho que não faz sentido ter o botão de sair aqui. É isso que temos no nosso design de interface, então não posso culpar o Codex. Mas vou dizer: “Remova o botão de cadastro daqui. Talvez devêssemos colocá-lo nas

1:06:32 configurações.” Basicamente, quando pressionarmos este botão, deve aparecer algum tipo de tela de configurações. Vou explicar isso um pouco mais adiante no vídeo. Por enquanto, vou dizer: “Remova o botão de cadastro da tela de edição do perfil.” E também vou tirar uma captura de tela daqui. Vou dizer: “Substitua os três pontos por um ícone de

1:07:02 configurações. Vamos criar essa página mais tarde.” Certo. Agora ele diz que removeu o botão de cadastro. Sim, ele não está mais aqui. E agora também devemos atualizar esta parte. Enquanto ele tenta atualizá-la, vamos pedir para criar a página de exploração. Já temos algo aqui, mas não é o design. Isso é algo que o Codex gerou por diversão no

1:07:33 passado. Basicamente, eu gostaria de ficar com esta versão. Então, vou usá-la como referência. Vamos chamar de “referência da tela de exploração”. Vou dizer: “Crie a tela de exploração.” E aqui dá para ver que isso foi atualizado para “Configurações”; vamos implementar essa parte um pouco mais adiante no vídeo. Certo, depois de um tempo, a tela de exploração ficou pronta. Aqui dá para ver que vamos substituir esses dados pelos dados reais um pouco mais adiante no

1:08:05 vídeo. Depois da tela de exploração, adicionei a referência da tela de chat e também pedi para criar essa tela. Então, temos uma conta ou um chat fictício. Se pressionarmos aqui, aparecem os detalhes, onde podemos enviar uma mensagem. Vamos entrar nos detalhes e na implementação disso um pouco mais adiante no vídeo. Mas, com isso, acho que podemos encerrar esta seção, na qual criamos todo o design da interface, desde a tela de autenticação até o perfil e basicamente tudo de que precisaríamos para a versão um.

1:08:36 Agora, antes de fazer commit das minhas alterações e encerrar esta seção, quero falar sobre uma coisa. Vamos rever o workflow que seguimos até agora. Criamos nosso plano. Geramos o design da interface. Dividimos tudo em recursos, como autenticação e design da interface. Até agora, só criamos essas partes, certo? Então, vamos criar um recurso de cada vez. Foi o que fizemos. Criamos a

1:09:06 tela de autenticação e depois criamos o restante das páginas — desculpe, o restante do design. Fizemos uma autocorreção, testamos manualmente a maioria das coisas para ver se estavam funcionando ou não, e acabou que tudo passou nos testes. Mas agora precisamos fazer uma revisão de código com IA. Pelo menos, é isso que faço como parte do meu workflow, porque parece que tudo está funcionando, mas pode haver muitos problemas de segurança diferentes na minha base de código que não consigo identificar. Por esse motivo, quero ter

1:09:37 uma IA que consiga, sabe, examinar toda a minha base de código e ver se tenho algum problema ou se não estou seguindo alguma convenção, e assim por diante. Para isso, há várias ferramentas diferentes, e uma das ferramentas gratuitas que você pode começar a usar é o CodeRabbit. É totalmente grátis se cadastrar, e você terá, tipo, duas semanas de teste gratuito. Eu já tenho uma conta. Então, basta fazer login com sua conta do GitHub. Depois, você deve visitar esta seção, onde ficam os

1:10:09 repositórios. Quando estiver aqui, você pode adicionar seus repositórios manualmente ou sincronizar todos de uma vez. Foi isso que eu fiz. Basicamente, tenho todos os meus repositórios no painel do CodeRabbit. Agora, sempre que quiser usar o CodeRabbit para a revisão de código por IA, você precisa enviar um pull request, ou também pode fazer isso na branch principal. Mas eu prefiro criar branches separadas. E, se você não sabe o que isso significa, vou tentar explicar rapidinho.

1:10:39 Imagine que esta é a linha do tempo, certo? E que você está desenvolvendo funcionalidades a cada dia. Certo? Hoje, você começou pela autenticação. Depois, adicionou o design da interface. Em seguida, adicionou o recurso de mensagens. E agora quer adicionar o recurso de chamadas de vídeo, certo? Mas não sabe se isso vai causar algum problema ou se seus colegas de equipe vão aceitar. Então, você pensa: em vez de atualizar o código diretamente, certo? Em vez de atualizar a branch de verdade, vou

1:11:10 criar uma branch de testes, certo? E nela vou adicionar algumas mudanças: vou adicionar chamadas de áudio e, depois, chamadas de vídeo, e então fazer o commit delas. Digamos que você goste do resultado final. Nesse caso, pode enviar um pull request e, se estiver trabalhando com seus colegas de equipe, dizer algo como: “Criei o recurso de chamadas de vídeo. Vocês poderiam aceitar minha solicitação?”. Se eles aceitarem, suas mudanças serão adicionadas à branch de verdade, que chamamos de main

1:11:42 ou master. Digamos que sua equipe goste desse recurso. Eles podem aceitá-lo e, depois, em algum momento, você pode excluir essa branch, porque não precisa mais dela, e suas mudanças já estão aqui. Ou digamos que eles não gostem. Eles dizem: “Isso está quebrando nosso código” ou “Não queremos ter o recurso de chamadas de vídeo”, algo assim. Eles vão rejeitar seu pull request, e aí você pode simplesmente excluir essa branch, como se nada tivesse acontecido. Certo, essa é a

1:12:14 ideia geral. Se você é iniciante, se nunca viu isso antes, pode parecer um pouco abstrato, mas essa é a ideia geral. Você cria branches separadas, certo? E pode adicionar mais recursos e, em algum momento, trazê-los de volta ou enviá-los para a branch principal. Imagine que há dez pessoas diferentes trabalhando em um projeto. Cada uma pode criar suas próprias branches e trabalhar em recursos diferentes, certo? No fim, tudo será mesclado na branch

1:12:46 principal. Certo, espero que isso não tenha ficado muito confuso. Agora, vamos ao VS Code e ver como criar uma branch separada e fazer commit das nossas mudanças. Primeiro, vou maximizar a janela e pressionar Command+Shift+P ou, se estiver no Windows, Control+Shift+P. Aqui, você pode escolher “Toggle Status Bar Visibility”. Acho que… desculpe, vou selecionar “Create New Branch”. Por padrão, estou na

1:13:16 master, como você pode ver. No seu caso, talvez seja main, o que não tem problema; é a mesma coisa. Basta escolher “Create a New Branch” e dar um nome a ela. Vou chamar de “oath” e, digamos, “UI design”. Certo, acabamos de criar essa branch. Agora, vamos tentar fazer commit das nossas mudanças. Vá até aqui, role para o topo e prepare tudo clicando neste botão. Vamos escrever uma mensagem de commit.

1:13:48 Essa é a mensagem que a IA gerou para mim. Vou fazer commit dela. Certo. Em seguida, vamos escolher “Publish This Branch”. Agora, se você abrir seu código-fonte, basta atualizar a página. Ainda está demorando um pouco. Agora devemos ter essa nova branch, certo? Ela está aqui, criada há quatro segundos. Vou escolher “Create a Pull Request”. Agora, se você rolar até o fim,

1:14:19 vai poder ver quantas linhas foram alteradas. Sabe, esta é a quantidade de linhas adicionadas e estas são as exclusões. Depois, você pode rolar a página e ver todas as mudanças. Em vez de revisar tudo manualmente, vamos deixar a IA examinar cada linha e nos dizer o que podemos corrigir. Vou escolher “Create the Pull Request”. Se você configurou tudo corretamente, deve receber uma revisão de código em alguns minutos. Certo,

1:14:50 então, inicialmente, é isso que você vai ver, e vai levar alguns minutos. Quando terminar, você receberá o feedback do CodeRabbit. Quando terminar, volto aqui. Certo. Depois de dez minutos, a revisão de código está pronta. Agora, podemos rolar até o fim e ver todas as sugestões. Como não implementamos nada importante no nosso código além do design da interface, não temos problemas tão sérios. Mas aqui dá para ver uma sugestão menor e

1:15:23 mais uma. É, acho que no momento temos só duas. E, se quiser corrigir, obviamente pode copiar o prompt e colá-lo na IA. Você também pode ver qual é o problema e por que isso é uma sugestão, o que o CodeRabbit acha e como corrigir. Agora, imagine que você tenha dez sugestões diferentes. Você não vai querer copiar cada uma delas, uma por uma. Então, pode rolar até o topo e pegar o prompt com todos os comentários da revisão para agentes de IA. Certo? Então,

1:15:55 vou copiar isso e voltar ao VS Code. Vou colar meu prompt aqui. Isso vai corrigir esses problemas. Quando terminar, podemos adicionar outro commit e enviá-lo como um pull request novamente. No momento, estamos aqui: criamos nosso commit e enviamos o pull request, certo? E, antes de mesclar

1:16:26 o pull request, queremos executar essas correções. Como você pode ver, tudo foi corrigido em um minuto. Vamos preparar essas mudanças e criar um novo commit. Não é necessário criar outro pull request. Vou escolher “Sync the Changes”. Se você rolar até o topo, verá que agora temos dois commits. Antes, tínhamos um. A página acabou de atualizar sozinha. Agora, podemos rolar até

1:16:58 o fim e escolher “Merge This Pull Request”. Agora, o CodeRabbit vai tentar fazer outra revisão porque você acabou de criar um novo commit, mas não precisamos esperar por ela, porque essas sugestões vieram do CodeRabbit. Certo. Vou confirmar a mesclagem. Basicamente, estamos dizendo que sim, aceitamos. Agora, suas mudanças estarão na branch master. Certo. Vou tentar visualizar isso e mostrar cada

1:17:28 etapa: criar a branch, adicionar o commit, enviar o pull request e mesclá-lo. Com isso, está tudo concluído. Você pode voltar para a branch master. Basta selecionar esta e clicar neste botão. Certo, vamos sincronizar tudo. Ah, espere. Temos uma alteração em MV. Como assim? Espera, o que mudou aqui?

1:18:00 Acho que temos a chave secreta. Isso é algo que o Codex adicionou nos bastidores. Não é muito importante por enquanto. Pode ir em frente e pressionar este botão. Talvez você não tenha isso. Não sei. Pode ir em frente, pressionar este botão, e isso vai sincronizar tudo. Basicamente, vai buscar as alterações mais recentes e atualizar sua base de código com elas. Certo. Então, foi aqui que paramos. Agora que temos a maior parte do design da interface pronta, é hora de começar a implementar as funcionalidades de verdade. Então, devemos

1:18:30 conseguir criar posts, sabe, curtir, comentar, enviar mensagens e assim por diante. Para isso, vamos precisar de um backend e, basicamente, de um banco de dados. Para isso, podemos usar o Convex, que é totalmente gratuito para começar. Você não precisa pagar nada. Aqui dá para ver que eles têm um plano gratuito muito generoso, e eu já tenho uma conta. Se você ainda não tiver, pode se cadastrar e depois entrar com sua conta do GitHub; em seguida, você vai para o VS Code. Agora

1:19:01 você pode pedir para a IA implementar isso para você. Mas o que vou fazer é configurar tudo por conta própria, para que você veja o processo, em vez de simplesmente fazer vibe coding às cegas. Certo. Aqui, não sei o que está acontecendo com a interface do terminal. Certo, agora está resolvido. Daqui em diante, quase sempre você vai querer ter dois terminais diferentes. Em um deles, você vai executar o aplicativo do Expo com npx expo e, no

1:19:32 outro terminal, vai executar o Convex. Certo, que é o nosso backend. Então, aqui, pode digitar npm install convex primeiro. Isso vai instalar o pacote e depois vamos executar npx convex dev. É só aguardar. Isso vai instalar o pacote. Certo. Isso está demorando um pouco mais do que deveria. Enquanto isso está

1:20:04 instalando, fiz algo em segundo plano: basicamente, gerei um logo diferente. Como não gostei muito deste, fui para o GPT. Vou mostrar as etapas. Foi aqui que paramos, certo? Eu só disse: “Gere uma grade com nove ícones para este aplicativo, para eu escolher um.” E não gostei muito de nenhum deles. Digamos que eu gostasse deste; eu diria: “Aumente a resolução da opção cinco.” Mas, claramente, não gostei de nenhum. Então, simplesmente disse:

1:20:35 “Me dê um estilo e uma vibe completamente diferentes. De novo, uma grade com nove opções.” Daqui, gostei da opção seis. Só disse: “Aumente a resolução desta e faça com um tema azul.” Foi isso que ele me deu. Embora não seja exatamente a mesma coisa, ainda gostei bastante desta. Depois, só disse: “Remova o fundo.” Então, esse é outro processo que eu queria mostrar. Se quiser obter uma variação diferente de alguma coisa, peça uma grade com nove opções em vez de pedir nove vezes separadas. Então, daqui,

1:21:06 digamos que você goste desta. Basta dizer: “Aumente a resolução desta para mim.” [fungada] Com isso em mente, você vai querer copiar esta imagem, ou o logo, certo? Vou entrar nos meus assets e colar. Na verdade, dentro da pasta de imagens, vou pressionar Ctrl + V e vou usá-la daqui a pouco. Por enquanto, o Convex já está instalado. Vamos limpar isso. Você vai digitar npx convex dev. Inicialmente, talvez ele peça para você entrar, se estiver executando isso pela

1:21:37 primeira vez. Mas eu já entrei, certo? E esta vai ser a próxima pergunta que você vai receber se já tiver entrado. Queremos criar um projeto novo. Então, vou selecionar este. Vamos dar um nome a ele. Vou chamar de codex gram. Ele está usando o nome da pasta. Então, vou pressionar Tab e depois Enter. Se quiser, você pode digitar outra coisa para alterar esse nome. Mas vou deixar como está. E queremos fazer o deploy na nuvem. É só pressionar Enter.

1:22:09 E queremos configurar os arquivos de IA do Convex, como agents.md e algumas skills. Basicamente, isso vai ensinar a IA a trabalhar com o Convex da melhor maneira possível. Certo. Isso vai criar alguns arquivos diferentes, e, na verdade, a maioria deles vai ficar em uma pasta chamada convex. Certo. Então, todo o código do nosso backend vai ficar bem aqui, certo? E vamos ter o schema, diferentes

1:22:41 mutations e queries. Se você não sabe o que isso significa, basicamente, usamos queries para buscar dados, como obter os posts; e, para criar algo, usamos mutations, como criar um comentário, criar um post, excluir um post, excluir um comentário, atualizar coisas desse tipo. Então, a IA vai criar algumas mutations para nós. Certo, só estou explicando isso caso você esteja fazendo vibe coding e tenha assistido até aqui.

1:23:13 Acho que essas coisas são úteis de saber. Certo. Daqui em diante, mantenha sempre este terminal aberto. Você pode renomeá-lo pressionando Enter ou clicando com o botão direito e escolhendo “Renomear”. Vou chamá-lo de Convex. Você também pode renomear este. Pode chamar de Expo mobile, ou do que quiser. Certo. Agora, o que vou fazer é abrir um novo chat. Primeiro, vou dizer: “Use

1:23:43 o logo que tenho bem aqui.” Vou chamá-lo de logo.png. E vou dizer: “Use este arquivo logo.png como o logo da marca neste aplicativo.” Também podemos dizer algo como: “Substitua o atual por este.” Certo. Como dá para ver, em 50 segundos, os ícones foram atualizados neste aplicativo. Agora, vou

1:24:14 maximizar a tela. Aqui está meu prompt. Você pode pausar o vídeo e ler, mas, basicamente, digo: “Agora que temos a autenticação e a maior parte do design da interface pronta, leia meu arquivo plan.md para saber que tipo de funcionalidade queremos criar.” Depois, digo: “Pode começar a implementar a criação de posts, curtidas, comentários e seguidores.” E então digo: “Avise se eu precisar configurar alguma coisa no painel do Clerk ou do Convex.” Certo, é isso que você

1:24:46 vai querer fazer no final. Basta dizer algo como: “Avise se houver alguma coisa que eu precise fazer manualmente em algum desses painéis.” E vou executar isso. Vamos ver o que vamos receber. Enquanto ele está construindo, acabei de receber uma pergunta. Ela diz: “A integração do Convex está ativada no seu painel do Clerk?” Se não estiver, diz para acessar “Integrations” e encontrar o Convex. Então, vou procurar meu projeto. Acesse

1:25:17 “Configure” e depois pesquise por “Integration”. Pode clicar aqui. Fica em “Developers”. Então, bem aqui, ative a integração do Convex. Depois, volte para o VS Code. Vamos dizer que está ativada. Certo. Depois de 20 minutos, parece que tudo foi implementado exatamente como pedimos. E ele diz que não precisamos adicionar nada, sabe, que não precisamos fazer nada no painel. E aqui dá para ver que, se você

1:25:48 se lembra, dissemos que o usuário precisa primeiro configurar um nome de usuário para poder usar este aplicativo. Então, aqui ele diz para começar adicionando um nome de usuário. Vou tentar inserir meu nome e, depois, o sobrenome. Vou clicar em “Continue”. Isso vai criar o perfil. Por enquanto, não temos dados, por isso está tudo vazio, certo? A interface está preenchida com o estado vazio. Certo, vamos criar um post aqui.

1:26:19 Vou tentar selecionar alguma coisa da minha galeria. Vamos selecionar esta. E aqui vou escrever algo como “Viagem deste fim de semana”. E vamos colocar três pontinhos. Eu ia dizer… e vou clicar em “Publish”. Aqui, apareceu o indicador e parece que isso foi enviado. Podemos confirmar acessando o painel do Convex. Vou tentar entrar agora. Assim que

1:26:49 faça login, selecione o aplicativo atual e confira se você está no ambiente de desenvolvimento. Daqui, vou simplesmente selecionar arquivos. Aqui dá para ver que um arquivo acabou de ser enviado. Normalmente, você pode passar o cursor sobre ele e ver o resultado final. Vou tentar instalá-lo. Vamos ver. Certo, aqui dá para ver que essa é a imagem que foi enviada para o Convex. Com isso, acho que também podemos dar uma olhada nos dados. Aqui dá para ver que

1:27:20 temos várias tabelas diferentes, como uploads e profiles. Este é o único perfil de usuário que temos. Agora, talvez você esteja se perguntando como conseguimos este usuário aqui, certo? Acho que é porque configuramos a integração do Convex no Clerk. Então, ela já foi configurada automaticamente. Agora, vamos testar mais alguns recursos que eu gostaria de experimentar. Vamos lá. Vou tentar adicionar um comentário. Talvez tenhamos um problema na interface aqui que

1:27:52 podemos corrigir. Vou escrever apenas “comentário de teste”. E, ao mesmo tempo, vou tirar uma captura de tela. Vou abrir o Codex e dizer: “corrija a seção de comentários. Ela deve ficar um pouco mais afastada da parte inferior”. Depois, vou tentar publicar. Vamos lá.

1:28:23 Ele está bem aqui. A interface não está muito boa. Vou tentar dar uma formatada. O que vou fazer é tirar uma captura de tela e abrir o GPT aqui. Vou colar a imagem e dizer algo como: “Esta é a interface atual da tela de detalhes da publicação. Quero que você me dê três variações diferentes dessa interface. Tente mantê-la simples e garanta que combine com a paleta de

1:28:55 cores azuis que já temos. É, me dê apenas três variações diferentes.” Assim, ele vai me dar três variações e, entre essas três imagens, vou tentar escolher uma e pedir ao Codex que a implemente para nós. Certo. Em segundo plano, ele vai implementar. Vamos ver. Certo, como podem ver, isso foi corrigido. Ficou pronto em 30 segundos. Agora

1:29:28 posso escolher algo como excluir. Se você selecionar cancelar, obviamente nada acontece. Mas, se excluir o comentário, ele deve desaparecer. Aqui dá para ver que tudo se atualiza automaticamente. Uma coisa que vale mencionar sobre o Convex é que tudo funciona em tempo real por padrão. Imagine que você escreva um comentário e tenha outro simulador aberto aqui. Se alguém estiver vendo esta publicação no outro simulador, assim que você publicar, essa pessoa verá o comentário em tempo real.

1:29:58 Não é necessário recarregar o aplicativo. Outra coisa que vou pedir ao Codex é para adicionar alguns dados de exemplo. Se você não sabe o que isso significa, são basicamente dados de teste definidos diretamente no código, para que possamos ver como fica o restante do aplicativo. No momento, no explorador, temos apenas uma publicação. Mas como ficaria se tivéssemos, tipo, 20 publicações diferentes, certo? Então vou dizer: “adicione alguns dados de exemplo”. Isso me ajudaria

1:30:30 a ver o restante do aplicativo com muitos dados. Provavelmente essa parte não é tão importante, mas vou adicioná-la mesmo assim. Vamos executar. Certo. Levou cerca de 10 minutos e aqui está. Agora temos 24 perfis fictícios, com essa quantidade de fotos, curtidas e comentários. Se você acessar o explorador, poderá ver todas essas publicações e contas diferentes. E, se tocar nelas, verá os detalhes

1:31:00 com curtidas e comentários, e também poderá curtir ou comentar. Então, temos a tela inicial. É assim que ela fica. Temos o perfil. Seguimos essa quantidade de contas e, desculpem, na verdade, todas as contas estão seguindo a gente, porque esse é o número de perfis criados, e nós estamos seguindo 12 deles. Acho que é um ótimo começo. Podemos visitar algumas contas e

1:31:30 tentar segui-las. Reparem que a interface não é das melhores, mas sempre podemos voltar e colocar o CEX em um loop, algo que vou abordar nas próximas seções. Por enquanto, acho que podemos seguir e deixar de seguir. Aqui, vou dizer apenas “deixar de seguir”. Não sei por que, mas isso demora um pouco, acho que porque está sendo executado em segundo plano. Também podemos deixar isso um pouco mais rápido.

1:32:02 Certo. Com isso, acho que vou fazer uma pausa rápida e já volto. Certo. Agora vamos implementar as mensagens do chat. No momento, tudo o que vocês veem na tela é completamente falso. Esses dados estão definidos diretamente no código. Então, vou dizer apenas “implemente as mensagens do chat” e fazer referência a esta tela. Vou escrever “chat screen ref.png”. Agora, quanto a esta tela, ela não está muito boa.

1:32:34 Então, também vou fornecer algumas referências. Para gerar uma referência diferente para esta tela, tirei uma captura de tela, abri o GPT e pedi uma grade com três opções para esta interface. Depois, pedi que combinasse com o restante do sistema de design. Ele me deu três variações diferentes. Esta é a que eu gostei. Então, pedi para ampliar a terceira variação. E aqui está. Agora vou

1:33:05 copiar esta imagem. Vamos colá-la aqui, na seção de design. [suspira] Vou chamá-la de “referência da aba de mensagens”. Vamos diminuir o painel esquerdo. E também vou adicionar aqui a referência da aba de mensagens. Depois, vou dizer: “coloque-se em um loop”. Você pode pausar o vídeo e ler meu prompt. Mas

1:33:37 já fizemos isso várias vezes até agora. Vou executar e volto assim que terminar. Certo. No meu caso, levou cerca de 17 minutos. Na verdade, ele construiu tudo bem rápido, mas depois leva um tempo para testar cada detalhe e garantir que esse recurso esteja funcionando como esperado. O que vocês veem aqui ainda são dados falsos. Perguntei isso porque, quando verifiquei o banco de dados — vou mostrá-lo —, não

1:34:07 vi nenhuma mensagem e fiquei pensando: “o que está acontecendo?”, certo? Então, abri o VS Code e perguntei: “Quando enviamos uma mensagem, ela é salva no banco de dados ou todos esses dados ainda estão definidos diretamente no código?” Ele disse que as duas coisas existem. Basicamente, como são contas de demonstração, o que vocês veem aqui são dados falsos. Mas, se quiserem testar de verdade, basta criar uma conta diferente e tudo deverá funcionar como esperado, o que

1:34:37 vou testar um pouco mais adiante no vídeo. Mas, por enquanto, há uma coisa que fiz fora da câmera e gostaria de mostrar rapidinho. Primeiro, vou mostrar a tela de detalhes da publicação. É assim que ela está agora. Não gostei muito. Então, abri o GPT. Deixem-me mostrar essa parte. Tirei esta captura de tela e disse: “Esta é a interface atual, da qual não gosto muito”. Pedi três variações diferentes e

1:35:09 ele quase me deu exatamente a mesma coisa. Então, anexei o sistema de design e pedi três variações diferentes com base no nosso sistema de design. A partir daí, tentei ampliar a segunda variação, que é esta. Foi a que eu mais gostei. No final, vocês vão ver que pedi para ampliar esta segunda versão. Vou copiá-la e abrir o VS Code.

1:35:40 Na seção de design, vou colar a imagem e chamá-la de “post detail ref”. Depois, vou posicionar o simulador ao lado. E vou dizer: “atualize a tela da publicação para que fique igual a esta”. Uma coisa que percebi é que não quero copiar tudo exatamente como está, porque acho que esta parte do cabeçalho está melhor do que a que temos aqui. Então, o que

1:36:12 O que eu gostaria de fazer é copiar esta parte de baixo e colar aqui. Vou dizer: “Atualize apenas esta parte”. Certo. Então, aqui vou tirar uma captura de tela. Este é o meu prompt. Você pode pausar o vídeo e lê-lo. Tentei basicamente explicar o que acabei de dizer. E vou executar isso. Quando terminar, já volto. Certo. Em menos de 10 minutos, ficou pronto aqui. Você pode ver as ações, os comentários,

1:36:43 quase tudo está idêntico ao que temos aqui. Estou bem satisfeito com o resultado. Então, não vou fazer mais melhorias nesta tela, mas, se você quiser, é claro que pode fazer isso quando quiser. Agora podemos adicionar mais recursos, e acho que vou falar disso nas próximas seções. Mas, por enquanto, o que eu gostaria de fazer é executar este aplicativo no meu próprio celular. Certo? Então, em vez de executá-lo apenas no simulador, vou instalar

1:37:15 esta build de desenvolvimento no meu próprio celular. >> [fungada] >> Agora, há duas maneiras diferentes de fazer isso. A primeira é conectar o celular ao Mac com um cabo USB, certo? Depois, você executaria este comando. Vou abrir o terminal e acessar o terminal do Expo. Vamos limpar isto. Deixe-me maximizar a tela. Você escreveria “npx expo run iOS”, como fizemos antes. Foi isso que fizemos. Mas, no final,

1:37:45 você escreveria “-d”, de dispositivo. Se o celular estiver conectado com um cabo USB, você vai vê-lo em uma das opções aqui. O meu não está conectado, mas, como já fiz isso antes, esta opção aparece para mim. A outra maneira de executar isso é usando o Expo EAS. Se não sabe o que é, vamos conferir. Vou escrever “Expo EAS”. Ou seja, Expo Application Services. Este é um

1:38:17 serviço que permite executar uma build de desenvolvimento no seu celular. Ele permite, sabe, publicar seu aplicativo na App Store, na Play Store e, literalmente, em todos os serviços que você possa imaginar. Você não precisa aprender tudo do zero. Basta explicar o caso de uso atual ao Codex ou ao Claude, e ele vai fornecer todas as etapas. Claro, eu diria que, se você tem interesse ou leva a sério o desenvolvimento para dispositivos móveis, pause o

1:38:49 vídeo, leia a página inteira, dê uma olhada na documentação e depois volte. Mas, se você só está aqui para testar as coisas, pode acessar o Codex ou o Claude e pedir as instruções. A propósito, o que você vê aqui na tela é o Apple Developer Program. Basicamente, é algo a que você precisa se inscrever se quiser publicar seu aplicativo na App Store. A Apple quer que você pague US$ 99 por ano por esse programa. E, sabe,

1:39:21 se você mora fora dos EUA, em um país com preços locais mais baixos, esse valor terá um desconto para você. Então, acho que vai ficar entre US$ 20 e US$ 25 [fungada] ou, na verdade, vai depender do país em que você mora. Sou da Turquia. Quando me inscrevi, paguei um valor entre esses dois, mas, se você estiver em outro país, pode ser ainda mais baixo ou um pouco mais alto que

1:39:52 isso. Então, sei lá, talvez custe US$ 50 ou até uns US$ 10. Não sei. Mas é bom ter isso em mente se você realmente quiser publicar seu aplicativo. Você precisa se inscrever e, infelizmente, não fui eu que inventei isso. É algo a que a Apple exige que você se inscreva e pelo qual pague. Certo, tenha isso em mente. Eu queria mencionar isso. Você sempre pode conferir novamente pouco antes de publicar seu aplicativo.

1:40:22 Certo, dito isso, agora vou abrir o Codex. Aliás, vou encerrar este terminal. Aqui vou dizer: “Quero obter uma build de desenvolvimento e instalá-la no meu celular. Quero usar o EAS, certo, o Expo Application Services. Diga o que preciso fazer e me dê tudo passo a passo”. Basicamente, você precisa executar um comando no terminal. Eu já sei qual é, mas vou fingir que não sei e tentar mostrar o que você deve fazer neste tipo de

1:40:52 situação. Certo. Aqui você pode ver meu prompt. Pode lê-lo se tiver interesse. Vou executá-lo e vamos receber um prompt ou comando que podemos executar no terminal. Isso também vai criar um arquivo chamado EAS.json. No momento, não temos esse arquivo, mas vamos criá-lo. Ele é como o arquivo de configuração de que o EAS precisa. Certo. Vou esperar a conclusão. E, mais uma vez, lembre-se:

1:41:24 falamos de duas maneiras diferentes. A primeira é executar este comando com a opção de dispositivo e conectar seu iOS ao Mac, certo? Quer dizer, o iPhone, não o iOS. Mas você entendeu. Essa foi a primeira maneira. A segunda é usar o EAS. É o que vou fazer. Desse modo, você poderá ver o processo inteiro. Certo. Vamos lá. Temos todas as instruções. São as etapas que você executaria na primeira vez. Mas, como já criei diferentes

1:41:55 aplicativos para dispositivos móveis, já configurei as conexões com o dispositivo e, sabe, já entrei no EAS, inicializei tudo etc. Então, o que vou fazer é rolar até o fim e pedir o comando para obter uma build de desenvolvimento na nuvem. Vou executar esse comando. Mas, mais uma vez, se estiver fazendo isso pela primeira vez, você precisa entrar na sua conta, inicializar tudo e criar essa conexão com o dispositivo. Então, tudo o que ele fornecer aqui estará correto. E você sempre pode

1:42:25 continuar a conversa e dizer, sabe: “Sou iniciante. Nunca fiz isso antes. Então, diga todas as etapas que preciso seguir”. Certo? É só algo para ter em mente. No meu caso, quero obter a build para iOS. Mas, se quiser obtê-la para Android, deixe tudo como está e altere esta parte para Android. Agora vou abrir meu terminal e colar isto. Ele vai fazer algumas perguntas diferentes. Parece que isto

1:42:56 falhou. Diz que a versão é inválida. Vou copiar isto e colar aqui. Depois que colei isso no Codex, ele me deu a solução. Basicamente, corrigiu o cache e depois disse para executar isto novamente. Foi exatamente o que fiz. Executei este comando novamente. Agora vou receber várias perguntas diferentes. Você vai receber as mesmas perguntas. Basta pressionar Enter algumas vezes até que a build comece.

1:43:28 Certo. Como você pode ver, agora está enviando para o EAS. Você pode acessar o painel de controle. Vamos ver. Vou acessar expo.dev. Aqui já entrei na minha conta. Você pode ver os projetos anteriores que criei. Agora, acabou de aparecer o projeto mais recente. Se clicar nele, vai ver que uma build de desenvolvimento está sendo criada, certo? Esta build está sendo gerada.

1:44:00 Quando terminar, poderemos instalá-la no nosso próprio celular. No meu caso, falhou, o que é completamente normal, e aqui está a correção. Você acessaria esta página e procuraria a etapa em que falhou pela primeira vez. Estava avançando normalmente até aqui, mas falhou. Vou clicar neste botão, que vai mostrar os logs, ou seja, os detalhes. Se não sabe o que isso significa, vou colar isto e dizer que você nem precisa dizer nada, mas vou simplesmente dizer

1:44:31 Minha build de desenvolvimento falhou, e aqui estão os logs. Espero que isso nos dê uma solução. Depois que corrigirmos, vamos executar novamente. Certo, aqui podemos ver que isso foi corrigido. A mensagem diz para executar esse comando novamente. Mas também percebi que temos muitas alterações diferentes. Até onde sei, precisamos fazer commit delas para gerar uma build do EAS, mas vou confirmar. Vou dizer: tenho

1:45:02 alterações sem commit. Preciso fazer commit delas antes? Acredito que precisamos fazer commit, porque o EAS obteria um snapshot. Mas parece que não. Tudo bem, então. Talvez eu esteja enganado. Vou resolver isso. Vou colar isto e, de novo, pressionar Enter algumas vezes. Vamos gerar uma nova build de desenvolvimento.

1:45:35 Você deve conseguir ver a nova build aqui. Então, aqui dá para ver que temos a build de novo. Ela está sendo gerada. Vamos esperar para ver se vai falhar ou não. Já volto. Certo. Depois de alguns minutos, o processo será concluído com sucesso e você receberá um QR code. Acabei de escaneá-lo com meu celular e foi isso que apareceu. Basicamente, o aplicativo foi instalado e, se você tocar nele, vai aparecer esta interface. Aqui dá para ver o logo, o nome, e ele está tentando encontrar o

1:46:08 servidor de desenvolvimento. Agora, imagine que você esteja confuso e não saiba como executar o app, porque ele não inicia por padrão. Você pode simplesmente dizer: “Agora tenho um QR code no meu terminal. Como faço para executar isso? O que devo fazer?” Então, estes são os passos. Primeiro, escaneie o QR code. Isso vai instalar a build. Depois, em Ajustes, Privacidade e Segurança, você precisa ativar o Modo do Desenvolvedor, caso essa opção seja solicitada. Se não for, tudo bem. Em seguida, basta

1:46:39 executar isto no seu Mac. Então, role até aqui e execute este comando. Mesmo depois de executar esse comando, se o resultado final for exatamente o mesmo, execute o mesmo comando com a flag tunnel. É isso que vou fazer. Vou executar isto e, ao mesmo tempo, conferir meu celular. Vou abrir o aplicativo.

1:47:11 Talvez você não consiga ver, mas meu celular está bem aqui. Vou tentar abrir este app. Certo. Aqui estou de novo com a mesma interface, mas desta vez vou preencher este campo com um valor. Como você pode ver, diz que deve começar com HTTP, e você encontra isso bem aqui. Então, depois da URL, basta copiar esta parte, certo, até incluir o direct. Copie isto e depois vá para o celular

1:47:42 e cole. Acabei de colar. Como você pode ver, ele está tentando carregar. Vou abrir a câmera para mostrar isso a vocês. Certo. Aqui dá para ver que estou na tela de carregamento. Está carregando no momento, e nosso aplicativo está no ar. Aqui está a tela de autenticação. Literalmente, está tudo aqui. Vou

1:48:14 tentar fazer login com minha conta do Google. Aqui aparece a opção “Continuar”. Agora vou fazer login com uma das minhas contas. Certo. Aqui diz que preciso informar um nome de usuário. Vou colocar algo como “meu celular”. Vou continuar. Vamos ver o que aparece. Certo,

1:48:46 nosso feed está vazio porque não seguimos ninguém. Mas, se formos para a tela Explorar, dá para ver que temos literalmente tudo. Está funcionando exatamente como no nosso simulador. Vou tentar enviar mensagens. Mas, primeiro, vou adicionar estas contas. Certo. No meu celular, fui para a tela Explorar e pesquisei esta conta aqui, que é esta

1:49:16 aqui. Certo. Vou tentar segui-la agora. Assim que toco em Seguir, reparem que isto é atualizado automaticamente, certo? Então, tudo está funcionando em tempo real. Vou tentar deixar de seguir. Não consigo tocar. Acabei de tocar, e reparem que foi atualizado. Vou tocar de novo; observem aqui. Está sendo atualizado em tempo real. Agora vamos enviar uma mensagem. Vou abrir as mensagens

1:49:47 no meu celular. Vou mandar uma mensagem para este usuário. Vou dizer “Oi”. Como vocês podem ver, a mensagem chegou em tempo real. Agora vou escrever: “Estou mandando outra mensagem”. Vou perguntar: “Como você está?” Assim que envio, ela aparece aqui. Vamos mandar uma mensagem daqui também. Quando eu envio, ela aparece em tempo real, então tudo está funcionando como esperado.

1:50:19 Além das mensagens, todo o resto também está funcionando em tempo real. Reparem que temos apenas uma curtida, feita pelo meu celular. Vou curtir e, assim que faço isso, vejam como a contagem é atualizada. Vou adicionar um comentário. Vou escrever “Oi”; assim que publico, ele aparece aqui. Essa é a beleza do Convex. Certo. Com isso, acho que vou encerrar esta aula por aqui. Podemos melhorar bastante a interface, e isso é algo que podemos fazer nas próximas aulas, e

1:50:50 também podemos adicionar coisas como política de privacidade, termos de serviço, uma tela de configurações e assim por diante. Vou deixar essas coisas para as próximas seções. Por enquanto, vamos fazer commit das nossas alterações e encerrar esta aula. Acho que o ponto forte desta aula, ou a principal lição, é que você aprendeu a gerar uma build de desenvolvimento e instalá-la no seu próprio celular. Certo, então vamos

1:51:21 até encerrar tudo. Vou colocar todas as alterações na área de staging e criar uma mensagem de commit. Se eu estivesse desenvolvendo isso como um projeto de verdade, faria uma revisão de código, como neste workflow, criando um pull request. Mas, neste caso, vou fazer commit diretamente na branch master para não perdermos tempo. Vou sincronizar tudo. E aqui você pode

1:51:53 ver que apareceu uma janela da extensão CodeRabbit, que você pode obter gratuitamente no VS Code. Basta pesquisá-la; o nome é CodeRabbit. Você pode instalá-la, e ela vai funcionar imediatamente. Certo. Com isso, espero que… Certo. Com isso, espero ver vocês na próxima aula. Certo. Foi aqui que paramos quando a câmera estava desligada. Fiz algumas pequenas coisas e gostaria de mostrar o que implementei nos

1:52:23 bastidores. Para começar, antes não tínhamos esta interface na tela Explorar. Só apareciam as imagens. O que fiz foi fornecer a imagem de referência e dizer para repetir esse ciclo até chegarmos exatamente ao mesmo resultado final. Já usamos esse ciclo várias vezes, então não vou explicar o que está acontecendo aqui. Levou cerca de 13 minutos e ficou pronto. Foi feito de uma só vez, sem nenhum problema. Agora, há algumas coisas diferentes que precisamos atualizar, como o ícone. Ele deveria

1:52:55 combinar com o ícone atualizado que temos aqui. Além disso, quando você toca nele, o ícone muda. É algo que podemos corrigir um pouco mais adiante no vídeo. Certo. Além disso, pedi para fazer exatamente a mesma coisa na tela inicial, mas sem alterar o ícone aqui. Você pode ler meu prompt. Também pedi para implementar o recurso de stories. E ele está funcionando; já testei e publiquei algo no meu story. Vamos testar mais uma vez. Aqui você pode tocar

1:53:27 o botão e selecionar algo da sua biblioteca, ou você pode escolher… Desculpe, pode pegar pela câmera. Então, aqui vou publicar esta foto. Agora, uma coisa que eu gostaria de dizer antes de publicar: na primeira versão, era possível escrever uma legenda neste story. Então, pedi para excluir esse recurso dos stories. E também pedi para permitir tirar a foto com a câmera, não só escolhê-la da biblioteca.

1:53:59 E acho que também pedi para manter a legenda na criação da publicação, mas adicionar a opção da câmera. Certo. Então, vou publicar. Isso vai levar algum tempo, mas lá vamos nós. Se você tocar aqui agora, temos dois stories diferentes, como no Instagram. Você pode voltar e avançar, e, se tocar de novo, se houver mais stories, ele vai para o próximo. Certo. Então, essa foi a primeira coisa que fiz, e acho que executei mais uma, que é a

1:54:30 tela de perfil. Então, de novo, eu só disse: coloque-se nesse ciclo e crie a tela de perfil. Agora, repare que não disse “coloque-se nesse ciclo”, e o motivo é que não quero explicar tudo isso todas as vezes. Vou mostrar. Não quero dizer sempre: “entre em um ciclo no qual você tira uma captura de tela do simulador, compara com a imagem de referência e continua desenvolvendo até ficar idêntico”. Então, você precisa

1:55:02 criar algum tipo de componente reutilizável ou uma skill, neste caso, e vou mostrar como gerei isso. Assim, você não precisa digitar tudo isso todas as vezes. Certo. Para isso, vou abrir o que chamamos de explorador de arquivos. Na pasta Claude, temos skills; dentro da pasta agents, também temos skills. A diferença entre elas é que esta é só para Claude, mas aquela serve literalmente para qualquer outra coisa, como

1:55:33 Codex, Cursor, o que você quiser, para tudo; esta aqui é só para Claude. Agora, adicionei nas duas, caso você esteja usando Claude ou Codex. Mas, enfim, dentro da pasta agents temos skills. Se você rolar até o fim, criei esta pasta e depois o arquivo chamado skill.md. Deixe-me mostrar o conteúdo do arquivo. Foi algo que gerei com o Codex. Basicamente, eu disse: “Toda

1:56:04 vez que eu não quiser digitar isto, certo? Então, pedi: “Crie uma skill para mim e coloque-a tanto na pasta agents quanto na pasta Claude”. Foi literalmente isso que eu disse: vim até aqui e falei que não queria digitar aquilo todas as vezes. Perguntei se podia criar uma skill para mim. E é exatamente isso que está acontecendo nos bastidores. Então, você pode pegar o arquivo inteiro e colocá-lo na sua base de código, se quiser, ou eu diria para encarar isso como um desafio e

1:56:36 pedir ao Codex para gerar a mesma coisa para você. Certo. Depois que tiver isso, você pode criar um novo chat e dizer algo como: “Garanta que a tela de perfil fique igual a esta imagem”, e simplesmente enviar o prompt. Não precisa dizer “coloque-se nesse ciclo”, porque, como isso é uma skill, ela já será anexada no início da conversa. Deixe-me

1:57:06 tentar visualizar isso. Digamos que este seja seu primeiro chat. Você diz: “Crie uma tela de perfil para mim”, e então ele responde: “Certo, vou criá-la”. Depois, você diz outra coisa, e ele faz outra coisa, certo? No início do chat, essa skill será carregada automaticamente. Essa é a vantagem de criar uma skill. E aqui deixei um comentário, mais ou menos assim: “Como podemos tornar este ciclo reutilizável?” Você criaria uma skill explicando tudo, e a

1:57:37 vantagem é que você não precisa digitar tudo. Basta explicar para o Codex, o Claude ou quem quer que seja e dizer: “Crie esta skill para mim”. Certo, espero que isso ajude. Com isso, tenho a tela de perfil. Ela também está bem parecida com o resultado final. Aqui, pedi para excluir o ícone de busca, como você pode ver, e também pedi para substituí-lo pelo ícone de configurações. Vamos criar uma tela de configurações aqui. Nela, podemos editar

1:58:09 nosso perfil, compartilhar o perfil e sair da conta. Acho que vou pedir para excluir daqui o botão de edição do perfil. Também não precisamos do botão de compartilhar perfil, mas precisamos dos botões de excluir conta e de cadastro. Talvez você esteja se perguntando por que precisamos do botão de excluir conta. Bem, ele é obrigatório e, se não estiver lá, a Apple vai rejeitar seu aplicativo, porque você tem autenticação e está armazenando dados dos usuários. Quando esse usuário quiser excluir

1:58:39 a conta, você precisa dar a ele acesso a essa permissão. Então, vou digitar meu prompt. Vou explicar tudo e já volto. Na verdade, em vez de ir ao Codex e inserir um prompt sem pensar, fiz algo ainda melhor. Voltei ao chat que já tínhamos com um GPT sobre design. Pedi uma grade de três opções para a tela de configurações. Você pode ler meu prompt, mas, basicamente, eu disse:

1:59:09 “Inclua coisas como um link para a política de privacidade, os termos de serviço, excluir conta, sair da conta e algumas outras coisas necessárias em um aplicativo de rede social”. Certo. Se você está se perguntando por que precisamos da política de privacidade e dos termos de serviço, mais uma vez, isso é obrigatório. Se você não incluir os links, seu aplicativo será rejeitado. Além disso, quando publicar seu app na App Store, a Apple vai pedir que você forneça esses

1:59:40 links. Então, você precisa criar uma política de privacidade e termos de serviço e publicá-los em uma URL ativa. Vou tentar mostrar como gerá-los e publicá-los na internet para que você possa usar esses links. Certo. Entre estas três opções, gostei mais da primeira. Então, pedi para ampliar a variação um. Foi isto que recebi. Vou copiar e colar na pasta de design. Você já sabe o que vou fazer em seguida.

2:00:12 Então, vou dizer: “Crie a tela de configurações”. Para manter a consistência com os outros nomes, vamos chamá-la de referência da tela de configurações. Vou chamá-la de settings screen ref. E vou dizer: “Crie esta interface exatamente igual”. Sim, acho que, por enquanto, vou dizer apenas: “Crie esta interface exatamente igual”. Vou enviar meu prompt e já volto

2:00:43 quando terminar. Depois de cerca de quatro minutos, foi isto que recebi. Aqui, pedi para excluir esta parte do cabeçalho. Não precisamos dela. Isso deve ficar pronto em alguns segundos. No geral, acho que estou satisfeito com o resultado final. Dá para sempre melhorar a interface, mas, como você já sabe, esse não é o objetivo deste tutorial. Outra coisa que ele não fez muito bem é que não temos mais abas nativas. Então, para isso, acho que precisamos

2:01:13 simplesmente pedir para trazer de volta as abas nativas. Vamos dizer: “Lembre-se de que queremos sempre usar abas nativas”. Enquanto isso está sendo criado, quero mencionar que, no momento, estamos usando IA de uma forma muito ruim. Isto não é ideal. Não deveria ter passado das abas nativas para as abas em JavaScript. Para isso, eu já deveria ter criado um arquivo chamado cloud.md

2:01:46 ou agents.md. Como você pode ver, já temos esses arquivos. Agora, vamos falar rapidamente sobre eles. Em termos simples, são arquivos README para agents de IA. Aqui temos o readme.md. Esse é para as pessoas, certo? Para desenvolvedores. Já estes são arquivos README para agents de IA. Há uma diferença entre eles, e vou explicar isso daqui a pouco. Mas, primeiro, vamos entender o que são. Então, ambos

2:02:17 são arquivos de instruções em Markdown simples, carregados automaticamente no contexto da IA no início de uma sessão. Eles são… Deixe-me limpar isto aqui. Eles são onde você coloca convenções do projeto, notas de arquitetura, coisas como «sempre faça isto», «nunca faça aquilo», esse tipo de regra. Então, no nosso caso, poderíamos simplesmente ter dito «sempre use abas nativas», certo? Nunca use mais nada para as abas. É aqui que você colocaria a instrução. Agora, a diferença entre

2:02:47 eles é que o cloud.md é para o Cloud e o agents.md, literalmente, para qualquer outra coisa. Certo, mas acho que o Cloud ainda daria suporte a isso. Tudo o que você precisa fazer é adicionar todas as suas instruções aqui mesmo, em agents.md, e, no cloud.md, basta importar esse arquivo. Certo, é só isso que você precisa fazer. E isso é uma convenção, aliás; também expliquei isso aqui. Coloque as instruções propriamente ditas no agents.md

2:03:20 e faça o Cloud importar esse arquivo. Certo, agora acho que entendemos a diferença. E aqui, quando peço à IA para implementar as abas nativas, digo que sempre queremos usar abas nativas, certo? E aqui diz que atualizei isso no agents.md. Então, se eu abrir o agents.md e pesquisar por «abas nativas», aqui diz para sempre usar as abas nativas do Expo Router. Certo. Então, mais uma vez, vou

2:03:50 tentar visualizar isso bem rapidinho. Quando você inicia uma nova sessão com a IA, faz uma pergunta, certo? E então recebe um resultado. Digamos que você diga «crie a autenticação para mim» e ela cria. Você diz «crie uma página de perfil para mim» e recebe o resultado final. Mas, no início, há o agents.md, que é carregado automaticamente no contexto. Foi isso que explicamos. Certo. Então, espero que agora entendamos o arquivo agents.md e qual é a diferença entre

2:04:20 eles. Agora, o que fiz sem gravar foi abrir o VS Code e dizer: «Agora, implemente a exclusão da conta». Quando apertamos este botão de excluir conta, aparece a mensagem de que você precisa adicionar a chave secreta do Clerk ao painel. Desculpe, a chave secreta do Clerk. Foi isso que fiz. Acessei as configurações do projeto, as variáveis de ambiente, peguei a chave secreta do Clerk e colei aqui. Agora, como você obtém esse valor? Bem, pode acessar a documentação do Clerk Expo.

2:04:50 Então, vamos procurar aqui as variáveis de ambiente. Basta selecionar seu projeto; aliás, você também pode clicar em «API keys». Aqui está a chave publicável, mas também precisamos da chave secreta. Ela está bem aqui. Basta copiar este valor e colá-lo aqui. Você pode clicar em «Add» e colar esse valor. Ele deve aparecer aqui. Depois, salve. Foi

2:05:22 exatamente isso que fiz. Disse que já tinha adicionado. Então, disse: «Pronto. Implemente isso». Agora, parece que foi implementado. Vou dizer «Excluir a conta». Se eu disser «Cancelar», nada acontece. Mas, se eu disser «Excluir», a conta deve ser realmente excluída e minha sessão deve ser encerrada. Vamos dar uma olhada no painel. Certo. Antes, tínhamos dois usuários diferentes, mas agora temos apenas um. Certo. Então, acho que vou

2:05:53 encerrar esta seção por aqui. Na próxima seção, podemos criar a política de privacidade e os termos de serviço. E, de novo, para isso tenho alguns prompts prontos que vou compartilhar com vocês. Mas, por enquanto, se quiser, você pode pausar o vídeo e melhorar a interface do usuário o quanto quiser. Mas não quero perder tempo. Vou simplesmente fechar tudo. E vou fazer o commit das minhas alterações. Então, vamos preparar tudo e escrever uma mensagem de commit

2:06:27 e sincronizar isso. Certo. Com isso, vejo vocês na próxima aula. Certo. Agora, suponha que você tenha criado seu aplicativo e esteja na hora de começar a cuidar das páginas jurídicas. O que você precisa fazer é bem simples, e vou explicar passo a passo. Primeiro, vamos falar sobre alguns dos recursos essenciais que você deve ter. Um deles era o botão de excluir conta, que já implementamos. O outro é a opção de iniciar sessão com a Apple. Mais uma vez, ela está bem aqui.

2:06:58 Isso é basicamente algo que você precisa ter se tiver incluído outras opções diferentes de login com redes sociais. No nosso caso, temos o Google. Então, a Apple diz que você também precisa ter a opção de iniciar sessão com a Apple. Agora, além da política de privacidade e dos termos de serviço, também precisamos adicionar um URL de suporte. É algo que a Apple vai pedir quando você acessar o painel da Apple. Certo. Vou explicar isso daqui a pouco. Certo. Com isso em mente, agora

2:07:29 vamos criar a política de privacidade, os termos de serviço e um URL de suporte. Em um tutorial anterior, criei uma página inicial como esta, com algumas imagens de demonstração bem legais e mais detalhes. Agora vou mostrar como você pode gerar esse tipo de mockup em menos de 5 minutos. Certo, com isso em mente, além disso, vou fornecer a você um prompt de termos de

2:07:59 serviço. Você pode encontrá-lo. Basta copiá-lo e vamos abrir o Codex. Deixe-me criar uma nova sessão. Certo. Isso aqui vou simplesmente excluir. Não sei por quê, mas parece que eu já tinha isso de antes. Então, excluí. E aqui vou colar o texto. Basicamente, o que ele faz é dizer para ler toda a minha base de código e, com base no meu projeto, criar uma página de termos de serviço.

2:08:30 Certo? E aqui vou dizer algo como: «Coloque tudo em uma pasta chamada legal». Vamos criá-la. Então, vou dizer para colocar tudo na pasta legal e também criar uma página inicial para mim. Vou dizer para garantir que fique bem bonita. Agora, é claro que este não é o melhor prompt, mas só quero ver o que ele

2:09:00 consegue nos dar na primeira tentativa; depois, sempre podemos fazer um acompanhamento e adicionar algumas referências. Agora, antes de executar este prompt, quero preparar estas imagens de demonstração. Para isso, existe um site chamado shots.so, que é totalmente gratuito para começar a usar. Eles também têm um plano pago, mas você não precisa pagar para criar essas imagens. Certo. Acesse este site. Vou clicar em «Start over». É isso que você

2:09:30 vai ver inicialmente. Daqui, selecione um mockup. Neste caso, acho que vou escolher o iPhone 17. Você pode escolher qualquer um. Vou escolher este. Depois, vou abrir a seção de moldura. Vou dizer que não deve haver fundo, porque queremos um fundo transparente, certo? Ou seja, sem fundo branco, vermelho, nada disso. O fundo deve ser transparente. E, para as imagens,

2:10:02 para as imagens, você deve abrir o simulador e fazer uma captura de tela. Depois, vou copiar esta. Vamos dizer «Copy to clipboard» aqui. Vou pressionar Ctrl + V. Certo. Acabei de colar. Agora você pode obter este tipo de variação. Mas vai precisar de uma segunda imagem, ou até mesmo de três imagens diferentes. Deixe-me tentar entrar na conta, porque vou obter mais capturas de tela aqui. Vou clicar em «Continue». Certo, então

2:10:35 acabei de entrar na conta. Vamos abrir a tela Explorar e vou fazer outra captura de tela. Mais uma vez, vou copiá-la para a área de transferência. Vamos talvez criar esta primeiro. Vou colar a imagem. O que você deve fazer é aumentar o zoom o máximo possível. Basicamente, você está removendo esse espaço extra da parte de cima e da parte de baixo. Então, aumente o zoom. Não tanto assim, mas certifique-se de remover o máximo possível desses espaços extras. Então, vou

2:11:08 Vou ampliar agora. Acho que está bom assim. E você também precisa garantir que, abaixo da maquete, esteja escrito que não há sombra. Certo? Porque, se houver sombra… Deixe-me selecionar uma delas. Acho que não está muito visível, mas há uma sombra bem aqui, e não vai ficar com esta aparência se houver sombra. Acredite em mim: selecione “sem sombra” e então podemos exportar. Essa é a primeira variação.

2:11:38 Vamos pegar uma destas. Vou manter a simplicidade e escolher a primeira. De novo, estou ampliando o máximo possível. Também vou exportar esta. E vamos pegar uma destas. É, acho que vou ficar com esta. Talvez eu faça uma captura de tela das mensagens. Vou copiá-la para a área de transferência de novo e colar aqui. Vamos ampliar o máximo

2:12:10 possível. Certo. O que acabamos de fazer aqui é algo que você pode implementar em todos os seus projetos futuros. Basta acessar este site e fazer a mesma coisa que eu fiz. Agora, vou pegar estas três imagens e colá-las no VS Code. Na verdade, vamos até a pasta legal. Vou arrastá-las e soltá-las. Vou renomeá-las. Vou chamar esta de demo one.

2:12:42 Acho que esta deveria ser demo 3. Desculpe, demo two e demo three. Agora vou abrir o Codex. Eu tinha este prompt e vou dizer: “Na página inicial, use estas imagens, que são demo one, two e three”. Certo, vou executar isso e vamos

2:13:13 ver o que vamos receber. Certo, isso levou cerca de 17 minutos. O GPT não só criou tudo, como também testou no navegador. Como você pode ver, tenho vários arquivos diferentes, mas o importante é o index.html. Basta clicar com o botão direito e abrir com o Live Server. Se essa opção não aparecer, acesse as extensões e instale a extensão Live Server. Vou mostrar rapidinho. É esta aqui. Instale-a e então você deverá

2:13:44 conseguir vê-la. Então, clique com o botão direito, selecione esta opção e pronto. Este é o resultado final. Acho que a interface ficou muito melhor do que eu esperava. E não demos nenhuma referência. Ele criou tudo sozinho. Repare como está seguindo o design system que temos atualmente. Então, não criou algo em vermelho, roxo ou qualquer outra cor. Em vez disso, está seguindo o tema azul que temos no aplicativo

2:14:14 móvel. Se quiser, como de costume, você pode continuar ajustando e aprimorar o design. Não quero perder tempo, mas aqui você pode ver os termos de serviço no endpoint ou URL terms, eu diria. Aqui há vários campos de exemplo. Isso porque a IA não consegue adivinhar qual é o nome legal da sua empresa, sabe, o URL da política de privacidade e coisas

2:14:44 assim, porque isso ainda não foi publicado. Então, estes são alguns campos de exemplo que você precisa ler e corrigir. Mas, tirando isso, não precisa mudar mais nada. Foi exatamente isso que fiz quando estava criando meu próprio aplicativo móvel. E acho que este é o nome antigo. Desculpe, este é o nome antigo. Antes se chamava bulky AI, mas recentemente atualizei o nome; ainda está no domínio antigo, o que não tem problema. Então, aqui estão os termos de serviço. Se você rolar

2:15:16 até o fim, pode ver que coloquei os detalhes sobre a minha empresa, sabe, de onde sou e coisas assim. Agora é hora de criar a política de privacidade. Para isso, tenho o prompt. Basta copiar tudo. Vamos colar aqui. Agora, ele também deve criar a política de privacidade. Quando terminar, volto. Certo. Depois de um tempo, isso também foi implementado. Aqui você pode ver, no

2:15:46 rodapé, temos este link. Novamente, há vários campos de exemplo que você precisa ler e atualizar antes de publicar o aplicativo na App Store. Depois, você vai querer publicar isso, porque, no momento, está rodando na sua máquina local. Vou mostrar como fazer isso em instantes. Mas primeiro vamos voltar à nossa lista. Agora criamos a política de privacidade e os termos de serviço. Além disso, você também precisa ter um URL de suporte, porque este é um campo que a Apple vai solicitar no painel do Apple

2:16:18 App Store Connect quando você quiser publicar o aplicativo. Aliás, isso fica no App Store Connect. Podemos acessar esse serviço — desculpe, não Apple Store; o nome certo é App Store Connect. Explico isso em detalhes na comunidade da minha escola, mas, basicamente, em termos simples, é aqui que você vai publicar o aplicativo, e eles pedem um URL de suporte. Agora vamos criar isso também. Vou dizer: “Adicione também

2:16:50 uma página de suporte. Mantenha-a simples e muito rápida de criar. Não quero esperar 10 minutos”. Então vou dizer: “Não teste, apenas crie”. Normalmente, eu não diria isso, mas, como isto é um tutorial, vou dizer para não testar, apenas criar, para não perdermos tempo. Enquanto isso está sendo criado, vamos acessar o Cloudflare. É lá que vamos publicar nosso aplicativo. Desculpe.

2:17:23 É lá que vamos publicar nossa política de privacidade e, em geral, a página inicial. É totalmente gratuito para começar. Basta se cadastrar com sua conta do GitHub. Foi o que eu fiz. Depois, no VS Code, em Codex Cloud ou no que você estiver usando, basta dizer: “Publique isto no Cloudflare Pages”. Certo. Parece que a página de suporte foi concluída. Vou conferir. Temos a página de suporte aqui. A única coisa

2:17:54 que você precisa atualizar é o e-mail de suporte, o que é bem fácil de fazer. Se não souber como, basta conversar com o Codex. Ele vai orientar você durante todo o processo. Certo. Dito isso, para publicar, basta ir até aqui e dizer algo como: “Publique a pasta legal”. Certo? Então, temos a pasta legal. Vou dizer: “Publique isto no Cloudflare

2:18:24 Pages”. O Cloudflare tem uma ferramenta chamada Wrangler, que é uma ferramenta de CLI que permite publicar seu aplicativo sem abrir o navegador. Você pode usar essa ferramenta pelo terminal para publicar o aplicativo. Então, vou dizer para usar o Wrangler. Já configurei e fiz login. Se você ainda não fez isso, pode pedir: “Configure isso para mim”, ou simplesmente: “Explique o processo para eu configurar”. Certo, então vou

2:18:56 executar isso e, depois de alguns minutos, acredito que estará publicado. Certo, foi muito rápido. Como você pode ver, levou 1 minuto e 20 segundos. Se clicar no link aqui, verá que nossa página inicial está no ar. Agora podemos usar este URL no painel do App Store Connect. Você pode adicionar este link como política de privacidade, este como termos de serviço e depois /sup para suporte. Deixe-me encontrar.

2:19:29 Este é o URL de suporte. Certo. É assim que você cria as páginas legais e as publica na internet. Só falta preencher estes campos de exemplo. E é só isso, literalmente. Com isso, acho que vou encerrar esta aula por aqui. Vamos abrir o VS Code. E, como de costume, vamos preparar tudo e fazer o commit das nossas alterações.

2:20:02 Certo, foi aqui que paramos. Agora, nesta seção, gostaria de falar sobre algo chamado rastreamento e monitoramento de erros. Parece bastante complexo, mas, na verdade, é bem fácil de implementar. E é realmente muito importante entender isso, especialmente se você está criando aplicativos. Para conseguirmos entender, primeiro precisamos ver o problema e, depois, a solução. Então vou mostrar como integrar isso. Vamos ver primeiro o problema. Digamos que você criou seu próprio aplicativo, certo? Você publicou na App Store. Tudo funciona no seu próprio

2:20:35 dispositivo e até no simulador. Mas não dá para simplesmente presumir que tudo vai funcionar para todos os seus usuários. Gostando ou não, em aplicativos reais sempre existem alguns casos extremos e sempre haverá problemas que você precisará corrigir. E você precisa ser avisado sempre que seus usuários encontrarem algum erro. Agora, vamos dar uma olhada nos diagramas que preparei. Aqui, você sabe, é o que acontece quando seus usuários se deparam com erros. Você

2:21:06 acha que eles vão mandar um e-mail para você ou que vão excluir o aplicativo e deixar uma avaliação de uma estrela com um comentário muito ruim? Bem, em 99% das vezes, é isso que vai acontecer, porque eles nem sabem quem você é, certo? Então, como saberiam seu e-mail? Eles nunca vão tentar mandar um e-mail explicando o problema. Simplesmente vão excluir o aplicativo, deixar uma avaliação de uma estrela e dizer algo como: “Não sei, a tela do perfil não funciona. Estou tentando ver a imagem do meu perfil, mas ela nem sequer está

2:21:37 visível. Vou excluir este aplicativo.” Algo assim, certo? Então, esse é o problema que você precisa resolver. Sempre que houver um erro, você precisa receber um e-mail automaticamente que mostre o erro, o usuário e como corrigi-lo. Essa é a grande vantagem do Sentry. É aqui que o Sentry entra. Vamos resolver isso usando o Sentry, que é totalmente gratuito para começar. Pense nele como a torre de vigilância do seu aplicativo. Ele é muito mais do que

2:22:08 apenas rastreamento e monitoramento de erros, mas aqui estão alguns recursos que posso destacar. Ele vai capturar os erros. Vai mostrar os registros estruturados, que são como console.log, mas estruturados. Isso significa que podem ser pesquisados e ficam armazenados na nuvem. Depois, há as reproduções de sessão, que significam que ele vai gravar um vídeo sempre que houver um erro. Digamos que seu usuário aperte um botão e ele não funcione. Você terá a gravação em vídeo disso no seu painel do Sentry.

2:22:40 Depois, ele ajuda com o desempenho, como rastros e gargalos e, como já mencionei, você vai receber alertas em tempo real. Por padrão, ele funciona com seu e-mail, mas, se quiser, você pode configurá-lo com Slack, acredito que Discord e até Microsoft Teams. Certo, para começar, é totalmente gratuito. Se você usar o link na descrição, vai receber US$ 80 em créditos gratuitos extras, o que é bem generoso. Então, faça seu cadastro usando

2:23:11 esse link e você estará no painel do Sentry. No início, provavelmente você não terá nenhum projeto. Então, basta clicar em criar um projeto. Aqui, você pode selecionar seu repo. Digamos que você não tenha um repo no GitHub, tudo bem. Isso é opcional, certo? Depois, você seleciona sua plataforma. Neste caso, será React Native. Em seguida, dê um nome ao projeto, qualquer nome, como codex gram. É esse que vou usar. Depois, clicamos em criar o projeto.

2:23:42 Agora vou selecionar meu repo. Assim que eu selecioná-lo, o sistema vai detectar automaticamente que é um projeto React Native. Então, vou pesquisar meu repo aqui. Posso selecioná-lo. Agora, o sistema vai detectar automaticamente que este é um projeto React Native. Vou deixar tudo como está, mas vou atualizar o nome do projeto. Vou chamá-lo de Codex Gramm, embora você possa dar qualquer nome. Você também pode atualizar a frequência dos alertas. Vou deixar tudo no padrão. E aqui

2:24:12 você pode ver que dá para conectar com Slack, Discord e Microsoft Teams. Mas, por enquanto, vamos deixar como e-mail, o que é bem prático, especialmente se você estiver criando o aplicativo sozinho, sem uma equipe. Certo. Dito isso, agora você verá algo chamado Sentry Wizard. Você pode executá-lo automaticamente, desculpe, isso é o padrão, ou pode simplesmente copiar as instruções e colá-las na IA. Se quiser, novamente,

2:24:43 você pode abrir um novo terminal, copiar tudo isso e executar. Mas vou pegar as instruções. Vou colá-las aqui na minha sessão do Codex. Então, vou abrir um novo chat e talvez tentar ampliar a tela. Vou colar isso aqui. Ele explica tudo e também fornece o DSN, que é uma string de conexão. Basicamente,

2:25:15 isso vai nos permitir conectar a este projeto específico. Aliás, sempre que você criar um projeto novo, vai receber um DSN diferente. Certo. Com isso, vou executar. Isso vai configurar o Sentry e, depois, esperamos poder testar. Enquanto ele configura tudo, há alguns recursos diferentes do Sentry que eu recomendo configurar. O primeiro é o Sentry Logs. Então, basta pesquisar Sentry Logs React Native.

2:25:48 Eu abriria a documentação, copiaria a página inteira e pediria ao Codex ou ao Claude, seja qual for o que você estiver usando. Eu diria: “Configure o Sentry Logs para o meu projeto”, e é bem simples. É só uma alteração de uma linha. Se tiver interesse, você pode pausar o vídeo e ler esta documentação, que explica tudo em detalhes, mas vou tentar passar por ela bem rapidinho. Para entender o que são os Sentry Logs, aqui eu

2:26:20 preparei esta comparação entre console.log e Sentry Logs. Como você já sabe, console.log fica apenas no dispositivo do usuário, certo? Então, desaparece quando o aplicativo é fechado. É texto simples e não tem conexão com os erros. É muito básico, para projetos simples e depuração. Por outro lado, os registros são enviados aos servidores do Sentry, o que significa que ficam salvos na nuvem. Eles são

2:26:51 armazenados e podem ser pesquisados. Isso significa que você pode literalmente consultar qualquer coisa. E, para poder consultá-los, há algumas tags. Assim, são estruturados e vinculados aos rastros, aos erros e às reproduções. Veja como usar. Você pode ter diferentes registros para fins de depuração, sabe, apenas registros informativos, avisos, erros e até algo como fatal, que é algo muito, muito importante e que é

2:27:22 um problema que precisa ser corrigido imediatamente. Por exemplo, uma falha na conexão com o banco de dados é algo fatal que você precisa corrigir. Certo. Você pode pausar o vídeo e ler isto, se tiver interesse, e eu recomendo muito que faça isso. Este é um daqueles assuntos com que as pessoas não costumam se importar, mas, como responsável pelo aplicativo, acho que é um dos tópicos mais importantes, para que você possa receber o e-mail e resolver o problema imediatamente, antes que

2:27:55 seu aplicativo comece a receber avaliações muito ruins. Certo, agora vamos dar uma olhada no VS Code. Acho que a configuração ainda está em andamento. Quando terminar, volto. Certo. Em seis minutos, isso foi instalado e configurado corretamente. Uma coisa que quero mencionar é que o Sentry é um módulo nativo. Então, depois de instalá-lo ou configurá-lo, você precisa recompilar seu aplicativo. Como você já sabe, para recompilar, basta executar npx expo run:ios no terminal, certo? Então, copie isso, encerre o aplicativo pelo terminal — é este aqui —, execute-o novamente e seu aplicativo estará ativo mais uma vez. Agora, vou colar isto aqui. Na verdade, não este, desculpe. Vou copiar a página do Sentry Logs e dizer: “Configure o Sentry Logs”. Digamos que

2:28:27 Você só precisa digitar npx expo run ios no terminal, certo? Então, basta copiar isso, encerrar o aplicativo pelo terminal — que é este aqui — e executá-lo de novo. Aí, seu aplicativo estará funcionando novamente. Agora, vou colar isso aqui — na verdade, não este, desculpe. Vou pegar esta página de cópia para os logs do Sentry e dizer: “Pode configurar os logs do Sentry.” Vamos

2:28:58 Estes são os documentos para configurar os logs do Sentry para mim. Certo. Como vocês podem ver, isso foi configurado bem rapidamente, em menos de 1 minuto. Agora, além disso, o que pedi foi o seguinte: pedi para criar uma página de teste do Sentry em Configurações e criar alguns erros e logs quando pressionarmos aqueles botões. Isso vai simular problemas do mundo real, para que eu possa vê-los no meu painel do Sentry e explorá-los. Então, depois de dois minutos, ele conseguiu criar

2:29:30 esta tela chamada Teste do Sentry. Agora podemos pressionar estes botões, que vão gerar vários erros diferentes, simulando uma implementação do mundo real, certo? Ou melhor, um caso de uso do mundo real. Vamos executar alguns deles. Sempre que você os pressiona, eles capturam os erros, certo? Um erro é gerado e nós o capturamos com este Sentry. Então, vou pressionar algumas vezes. Agora vamos selecionar nosso projeto. Neste

2:30:01 caso, vai ser este aqui. E vamos para a seção de problemas. Como podem ver, há 10 segundos recebemos todos estes erros. Ao mesmo tempo, vocês vão receber um e-mail em tempo real para ver o que está acontecendo, o que está com problema, e então poderão acessar o código do projeto e corrigir tudo. Se pressionarem qualquer um deles, vão ver todos os detalhes sobre o erro e sobre o usuário, como, por exemplo, qual sistema operacional ele está usando e qual é o dispositivo que

2:30:32 ele tem, entre outras coisas. Vou deixar vocês explorarem. Podem rolar até o fim e conferir praticamente todos os detalhes. Depois, podem ir até a seção de exploração e ver também os logs. Como podem ver, há vários logs diferentes gerados. E, como no nosso projeto temos apenas um usuário no momento, talvez vocês não consigam perceber a importância dos logs. Mas imaginem que vocês tenham, digamos, 1.000 usuários ou até mesmo 10.000 usuários.

2:31:02 Nesse caso, os logs serão muito úteis para depurar tudo no projeto. Então, em geral, esses são os conceitos básicos do Sentry. É assim que podemos configurá-lo. Também existe o tracing do Sentry. Vamos conferir. Vou pesquisar “Sentry Tracing React Native”, exatamente da mesma forma. Vocês podem copiar esta página e colá-la no Codex ou no Cloud, seja lá o que estiverem usando. E então ele vai configurar tudo. Vocês podem ler para que serve; é principalmente para desempenho. E isso é algo

2:31:35 que configurei no meu aplicativo de verdade. Certo. Vou deixar como desafio, caso vocês queiram implementar. Com isso, acho que podemos fazer commit das nossas alterações e encerrar esta seção. Na verdade, acabei de me lembrar de mais um componente que gostaria de mostrar: um elemento de feedback. Vamos pesquisar “Sentry React Native feedback”. Com esse componente, vocês podem receber feedback

2:32:06 dos usuários. Vou pressionar este aqui. É isso que vocês verão e é o que os usuários vão receber; eles poderão adicionar o nome completo, o e-mail e o recurso que gostariam de solicitar. Vou copiar a página inteira e dizer: “Na tela de configurações, adicione um botão de feedback bonito com o Sentry.”

2:32:37 Quando isso estiver pronto, volto aqui. Levou cerca de 2 minutos e pronto. Agora, se pressionarmos este botão, o componente aparece. Vamos adicionar uma sugestão ou um feedback. Vou colocar meu nome. Digamos que este seja meu e-mail. Acho que preciso copiar assim. Vamos escrever: “Oi, por favor, corrija a

2:33:08 tela de perfil.” Agora, no painel do Sentry, se vocês acessarem Problemas e Feedback dos usuários, vão ver que recebemos esse feedback, certo? Temos o nome de usuário e os detalhes. Se pressionarem ali, poderão ver todo o resto. E, se não conseguirem encontrá-lo quando estiverem assistindo a este vídeo, basta ir até a barra de pesquisa e procurar por feedback dos usuários. É só pressionar e vocês serão

2:33:39 levados para esta tela. Certo. Então, é isso para a integração com o Sentry. Tem mais uma coisa que quero fazer. Quando pressionarmos estes botões, vamos vinculá-los às URLs correspondentes. Certo? Vou dizer: quando pressionarmos os links Política de Privacidade e Termos de Serviço, vincule-os às URLs publicadas correspondentes. Certo. Então, em menos de 1 minuto

2:34:10 isso foi feito. Em 1 minuto, foi implementado. Vamos pressionar aqui. Como podem ver, isso nos leva à URL correspondente. Agora, em vez de abrir isso no Safari, vou pedir: “Você pode abrir isso dentro do app? Como uma folha que apareceria na parte inferior e mostraria o site.” Então, vou dizer… Essa foi uma correção muito simples. Como podem ver, agora, quando pressionamos, a página abre dentro do app. O mesmo vale para os Termos de Serviço. Certo, acho que é isso para

2:34:43 o projeto inteiro, ou pelo menos para esta seção. Vamos fazer commit de tudo. Vou preparar tudo. Vamos criar uma mensagem de commit e depois fazer o commit. Esta é a minha mensagem de commit. Vou fazer o commit e sincronizar. Certo. Esse é basicamente o aplicativo inteiro que criamos. Daqui em diante, tudo o que vocês precisam fazer é conversar com seus agentes de IA para que eles possam melhorar

2:35:13 o design da interface. Não vou tentar fazer isso, embora tenha tentado, fora da gravação, deixar a página inicial um pouco mais organizada. Este é meu prompt. Mas, como eu disse, neste momento, vocês podem fazer algumas rodadas de ajustes. Não sei, talvez gerar mais referências de design e depois pedir que eles tentem implementá-las até vocês gostarem do resultado final. Dito isso, acho que vou encerrar este tutorial por aqui. Espero que tenham gostado e aprendido

2:35:43 algo novo com ele. Se sim, não se esqueçam de curtir e se inscrever.

Transcrição original

[00:00] Learn to build and publish a real Instagramst style mobile app from scratch using codecs and GPT6 Astra. Brock will guide you through the complete development life cycle, covering everything from generating UI designs and setting up a backend to App Store deployment. You’ll master not just the code, but the exact AI prompting workflows needed to turn an idea into a finished product. Welcome to the complete Codex tutorial on how to build

[00:30] a real mobile application using AI. In this course, I’m going to show you the exact workflow that I used to go from an idea all the way to a working mobile application. And just for some context, recently I have used this exact same workflow to build my own mobile application and publish it to the app store. So everything I’m going to show you in this video actually works. Just before we jump into coding, let me show you the project that we’re going to build in this tutorial. So this is a social media application just like

[01:02] Instagram. If you want to use it, first you need to be authenticated. And here in our case, we have two different options. I’ll go ahead and log in with my Google account. So once you’re authenticated, you’ll be redirected to the home screen. And here we have four different tabs which are home, messages, explore, and profile. And notice how we have the iOS liquid glass effect. And I’m going to show you how to build it without writing too much code. And now in the home screen, you

[01:33] can see the posts of the user that you already follow. And here you can also post stories. So let’s go ahead and select something from our library. If you wanted to, you can also get it from your camera. But here I’ll just select something from the library. So I’ll go ahead and maybe post this image. Let’s publish. This is going to upload it in the background. And once it is done, we will be able to view it. So here, here we go. So the stories works just

[02:06] like in Instagram. If you want to pause it, you can tap and hold it. And if you want to go to the next one, you would just press. And you can delete your stories if you are the owner. Now you can also posts, right? So you can create posts. Let’s go ahead and publish something. I’ll select this image and we can add a caption. Let’s just say this weekend trip and let’s post it. So here we go. It’s posted and we can see it immediately in the home screen. You can like it and you

[02:38] can even add comments. So, let’s go ahead and just say something like, I don’t know, something test and post it. Now, it’s going to be right here. You can like the comments. You can sort them. Here we have couple of different options and you can even bookmark the posts. So, that’s it for the home screen. We also have realtime messages. So, here you can tell we have couple of different past chats, but they are all fake data that I created for the sake of this demo. Here I’m going to put the actual footage from the tutorial

[03:10] where I actually test this out from my phone. So I literally sent a message in real time and everything works in both of these accounts. And other than messages, we have the explore screen where you can see random posts from other people with a really good UI design. You can like them and if you press them, that’s going to take you to the actual post. And from here you’ll be able to see the other accounts and follow them or even unfollow them if you already follow. Here you can search for

[03:42] people, posts or even topics. Then eventually we have the profile screen where you can see your posts, even videos, bookmarks, and the tag posts. So you can also edit your profile here. Let’s just say for the bio I’ll put something like I don’t know let’s put YouTuber and then I’ll save. As soon as I save here you can tell the profile has been updated. On top of this you can also change the profile image and we have the settings screen. Now here we

[04:14] have bunch of different buttons and links but the most important ones are the privacy policy and terms of services. Here you can tell we actually link it with a real real URL and we link it right here. Now this is something that you must implement. If you don’t implement it, Apple will reject your application and I’m going to teach you how to do it later in the course. Then we also have the delete account option. Again, this is one of those things that if you don’t implement your application

[04:45] will get rejected. And we even have a feedback button where users can literally send us some feedback like here they can put their name. I already filled this in but you know you can just put John your email and then if you want to have a feature request or I don’t know any kind of bugs here you can tell you know please fix the edit profile feature it doesn’t work and then you can send the feedback and I’m going to show you how you can collect those feedbacks

[05:16] later in the video. Now on top of the mobile application we’re going to build a landing page with a really nice looking UI design. Here you can tell we have some demo images and I’m going to show you how to create them and use them for your future projects. And at the very bottom we have the privacy policy and terms of services links. Again, these are the things that you don’t really want to skip. So that’s the entire project that we’re going to build in this video. Now, this is not one of those random vibe coding tutorials where

[05:47] we just open Codex and say, “Build me an application and hope everything somehow works.” Instead, I’m going to show you the entire process step by step. We are going to start with an idea. Then we will plan the application properly, figure out all the features that we would need, generate a complete UI design, and then use Quadex to actually implement everything. By the end of this tutorial, you should have a clear understanding of all the tools that you would need to build a modern application using AI. You will also know what to do

[06:18] when you get stuck. Because one of the biggest problems when you’re coding with AI is not necessarily the coding itself. It is knowing what to ask. So throughout this course, I’ll show you how I deal with it, how I give Codex more context, and how I get it actually help me solve the problem. I will also share the prompts that I personally use. This includes the prompts that I use for planning an application, generating the UI design, implementing the screens, and even creating things like privacy policy

[06:50] and terms of services. And these things are actually important if you want to publish your app. Depending on what your application does and what kind of user data that you’re collecting, Apple can require things like a privacy policy, terms of service, delete account feature, and other information. If you miss something that is required for your application, you can easily get rejected during the app store review. These are usually the things you would learn the hard way after building your first application, but I’ll try to cover all

[07:21] of them in this tutorial so you know what to look out for before you submit your application. It is also important to mention that when people submit their application to the app store for the first couple of times they get rejected which is normal but in my case I never got rejected by Apple. My app literally got accepted in the first submission because this workflow covers everything. So you don’t really miss any important detail. And just one more thing that all the tools that we’re going to use in this course are completely free to get

[07:52] started with. So you don’t need a credit card to follow along. and the complete source code for the application will also be available for free. I will leave the link in the description. My goal with this course is helping you to understand the entire workflow so that after finishing this video, you can take your own idea and actually know how to turn it into a real mobile application using Codex. So, we’re going to go from idea to planning to UI design and finally getting the app ready to

[08:22] publish. Now with all that being said, let’s not waste any time and get started with the course. Now just before we get started, I quickly want to mention that we have a school community and within the school community I have basically documented the entire journey of building my own application and publishing it to app store. Here you can tell everything took exactly 14 days because the day zero is kind of like crash course. So everything took around 14 days to submit it to the app store

[08:55] and then we start with marketing and new classes will be coming every single day. So this is a community for those of you that are interested to see the entire process like having payments, you know, we have monthly, yearly plans, maybe even some weekly plans. Then how do you get through the entire submission process or something like how to implement push notifications? And this is not just a course, but it’s a live community. Here you can tell everyone is

[09:25] sharing their own process like motivating each other, so on and so forth. And actually, one of our students has already published their app on the app store. And just for the record, this is his app and he built it with me within our community in exactly 14 days. And just to give you some insights, like when you press one of these classes, we have specific videos for that day. And you can always come back and double check these lessons if you’re interested. So, if you want to join, I’m

[09:55] going to leave the link in description. And hopefully I’ll see you inside. All right. So, as usual, we are going to start from absolute scratch. First off, in my case, I’m using VS Code as my code editor, but you can really use anything that you want. That could be cursor, I don’t know, it could be windsurf, really anything that you wish, but I would recommend you to use VS code so that we have the exact same environment. Now, for this, you can visit codevvisisualstudio.com

[10:25] and then press this button. Now, in my case, I’m using Mac, but if you’re on Windows, you’re going to see a related button, and you can just install it for Windows as well. And once again, um, in this tutorial, I’m using Mac, but if you’re using Windows, everything will be almost exactly the same, so you can follow along without any issues. The other thing that you must have is NodeJS. If you don’t have it already, just visit node.js.org, or press the download button. Leave everything as it

[10:56] is. Like by default, it’s going to select your environment, you know, your operating system, and then install it. Okay. So, I’ll just assume that you have both of them. Then head over to your desktop, create an empty folder. In my case, I call this as Codex Gram, which is like Instagram, but I put Codex. You can call this anything that you wish. And then just open it up in VS Code. So basically just drag and drop it right here. It’s going to open this up. Okay.

[11:27] So once you have it now we can start building a mobile application. Now what I’ll be doing is first creating a boiler plate. And for this we’ll be using Expo. So if you don’t know already, let’s go ahead and visit expo.dev. This is literally the best way to start a mobile application as of 2026. Literally, they have everything that you would need from building the app to publishing it to App Store and Play Store. This is what I

[11:57] used to build and publish my app to App Store, you know, just to let you know. And this is completely free to get started with. But if you’re serious about publishing your app to the App Store, then probably you would like to go with at least $20 per month plan. Uh but yeah, for now, you don’t really need to pay anything at all. Now with this um we’ll go ahead and visit expo.dev/doccks which is the documentation and we need to copy this command. Now technically we

[12:28] can just ask cloud or codex to run this for us but here I’d like to run it manually to show you what we’re going to get and like it’s going to be a bit easier to do it by ourselves. So paste this in to your terminal and put dot at the end which means create an expo application under the current folder. Right? This is what that means. So it’s going to create everything right here. First we’re going to get a question. At

[12:59] the time that I’m recording this video it is seck 57. But if you’re watching it in the future this will be incremented. That’s not a problem at all. Just go ahead and press enter. And this will get couple of different files and folders which is basically a simple mobile application. And we can run it in a simulator just in a second once this is completed. Now I am on Mac. My simulator is going to be an iOS simulator. But if you’re on Windows, you can install an

[13:30] Android um simulator. Right. So here I’ll go ahead and run my simulator. And by the way, with the latest features, like as of now that I’m recording the video with Expo, you can be on Windows but still build it for iOS. Like you can literally run an iOS simulator on Windows. Just check their documentation. Um, you’ll be able to see it. It is pretty new, so I’m not going to get into it, but just know that

[14:01] something like that existed. Okay, so here I have my simulator. I have some previous projects that I created in the past, but we are going to go ahead and start from scratch. So here it says you can start this app by running these commands for Android, iOS, and even for web. Here I’ll go ahead and just say MPX expo or MPXO start. This will give us a QR code as well as a open terminal where if you press I, it is going to open this

[14:32] app in your simulator. So let me actually put them side by side. Okay. So it looks like something has failed. I’ll press I once again. It is trying to open this. I don’t know why I’m getting an error. Usually it should open it immediately. But now that’s not a problem at all. I’ll just go ahead and you know ask cloud or codex

[15:03] to explain what is happening here. And speaking of cloud and codex, if you would like to use cloud, you need to install this extension within the VS code. So cloud code for VS code and make sure you get the verified one. And then if you would like to use Codex, this is what I’ll be doing in this tutorial even though I have subscription for both of them. Codex has a recent model called GPD6 Astra and I’d like to use it in this tutorial. So go ahead and get Codex

[15:34] if you have subscription or cloud or really anything that you wanted to have. And by the way, one thing that I want to mention is that the goal of this tutorial is not getting the exact same end result. So the goal here is understanding the workflow to build mobile apps by yourself. So, it’s fine if at the end of this video you have a different app than what I have. I mean, the functionalities will probably be the same, but UI design could be different. Code could be a bit different, and

[16:05] that’s because AI doesn’t really give the exact same end result every single time. Okay? So, that’s one thing to keep in mind. It’s completely fine if you don’t have the exact same end result that I have right here. And other than this, like I see a lot of people get kind of like depressed because of AI where it can almost build anything now. But I’ve been always like I’ve always been on this side where I’m just trying to find the opportunity where you know it helps me to build an app pretty

[16:36] quickly so that I can focus on marketing and you know focus on different things. Now since AI can build anything which is not really true at the moment um even though I think it’s going to be at some point but at the moment it’s not really true. It cannot build anything. It can build something to start with but as the projects get larger and larger it kind of sucks. So I think it’s still important to know the fundamentals of programming but if you wanted to build a simple project I don’t know an MVP I

[17:08] think AI can help. And with this tutorial, hopefully you will learn how to build an MVP. Okay, so with that said, I would definitely recommend you to get a $20 a month plan in one of these, either Cloud, Codex, or Cursor. I think for now, my favorite could be Codex. Even though I’ve been using Cloud for a very long time with the latest model they have, which is GPT6, I think you can go with Codex just to test this out. And I

[17:40] think Codex is cheaper than cloud or cursor. Okay, so with that said, now let’s jump back into VS Code. Go ahead and get this extension. And I think I need to restart the extension. And you’ll just press twice to this empty area. From here, you can get Cloud or Codeex. Let’s say you’re using Cloud. This is the interface that you will have. Now we can talk with cloud and you can you know update the model. Let me

[18:11] actually maximize this like you can update the mode and initially we’ll use the plan mode. I’m going to get into that and you can update the model you know you can add the effort etc. And we have similar thing for codex. This is what I’ll be using. So just go ahead and press add. Now here you can again change the model. The latest one at the time that I’m recording this video is this one. And you can update the effort as well. So here I’ll just give the full axis so

[18:42] that I don’t really get um so one thing I want to mention is that here the extra high and even like ultra you go is better but it’s going to be taking much more time than it should. So here, usually I would go with medium or high. If I’m building something a feature that is not really that important, but if I’m trying to build something that should work exactly as I

[19:12] want, then I would probably go with extra high or even ultra. But just know that it will take much more time if you go with one of these. So in this tutorial, I think to start with, I’ll go with medium. And here for the permissions, I’ll just give the full access so that it doesn’t really ask me questions all the time. So here I basically say, hey Codex, whatever you would like to do, just do it. Don’t ask me. U just be careful with it. But usually you’ll just give the full access anyways. Okay. Now to start with, first

[19:46] thing I’ll be doing is opening up my terminal with Ctrl J. And I think now application is running. We had an error, but it just fixed by itself. Here you can tell if you press R, it’s going to reload the app. And we have this default project coming from Expo. Now, of course, we’re going to delete everything. And let’s actually do it. You would like to open up your terminal. So, kill this with Ctrl C. Clear this up. And there’s a command that we can

[20:17] run. So, it’s going to be mpm run reset- project. This is going to basically take all these folders and files that we don’t really need and it’s going to delete them. So now we have some components that we don’t really need, some constants, hooks, so on and so forth. So just go ahead and run this. Then press enter once again. Here you can tell everything has been deleted and it has put it under an example folder which I don’t really need. So I’m going to delete that one as well. Now let’s

[20:47] run this app with MPX Expo. This is what we had initially. Right? Now, if you press R, it’s going to reload it. And notice how we have much more simpler application. Right? This is literally just one screen with a simple text. Okay. Now, with this in mind, let’s go ahead and plan a project. And in this tutorial, I’d like to use sorry, I’d like to build a social media application kind of like Instagram, but

[21:18] of course much more simpler than that. All right, so I have accidentally paused the video, but I was just saying that we would like to build an Instagram clone that is much more simpler, right? So we’ll have maybe things like posting photos, commenting, having a profile screen, things like that. Um, and here’s the workflow that we’re going to be using. This is what I used to build my own mobile application as well. And I’ll try to break it down as we go through this course. So, the very first thing

[21:49] that you need to do is planning your project. This is a step that a lot of beginners just skip. They immediately jump into coding because they’re like really excited. But it almost always fails because if you don’t plan everything then at some point AI will start guessing even like at the start. So what you’d like to do is kind of like giving the AI the context what kind of project that you would like to have you know like define your idea goals

[22:19] features pages user flow and text tag so that it doesn’t really guess all these tools and features and for this I have a really really good prompt that is working every single time so I’m going to leave this in the description just go ahead and copy this entire thing and you can pause the video and read it. Basically, I’ll try to simplify it. We ask AI to interview us about every single thing about this project so that it doesn’t really guess anything and we

[22:51] are on the same page. Okay. So, once again, you can read this entire thing if you’re interested, but I’m just going to copy this and go into cloud, sorry, into VS Code and into Codex. Here, you would like to select the mode. Let me find it. It should be plan mode. And to select plan mode, you need to press this plus. And then go ahead press the plan mode. Now paste the prompt first. And then here we say we are about to describe you the project.

[23:23] And here now I’ll just go ahead and explain everything. Once I have it, I’ll just be right back. So here I have paused the video and try to explain it to Codex. And here is my entire prompt. So here I said I want to build a simple Instagram style social media application using clerk for authentication and convex for the backend and database. I’m going to get into both of these technologies but basically this is the text tag to get started with. And then here I said users should be able to sign

[23:54] up and log in with Google or Apple. They should be able to create images or videos as posts, follow and unfollow, you know, like and comment. You can read the rest. And there’s also sending direct messages, right? And they can also view and edit their profile. And here I say the app should have four main tabs which are going to be home, messages, explore, and profile. Now talking about tabs, let’s go ahead and take a look at the native tabs in Expo.

[24:27] I’ll just say native tabs and visit it in the expo documentation. Just scroll to the bottom. So these are the tabs. This is what I mean by tabs. And native tabs are giving this iOS liquid glass effect. Okay? So you don’t really need to restyle it or generate it from scratch. There is a component called native tabs and it’s going to give you all these features out of the box. If you’re interested, you can take a look at the entire documentation. But this is

[24:59] something that we would like to use in here. Let’s actually also say something like we will use native tabs and also for styling let’s say we want to use something like native wind. So native wind is basically tailwind CSS but for react native okay for mobile application. Okay so you got the point. First off, you’re going to

[25:30] get the plan prompt from right here, right? And then you would like to describe your project. Um, this is exactly what I have done. Of course, this should be a lot more detailed if you can, but for this demo purposes, I think that’s fine. And here we’ll go ahead and run this. This will ask a couple of different questions in like couple of different batches. First, we’re going to get maybe like four questions. We’ll answer all of them and then we’re going to get another batch of

[26:01] four and then another one until AI has every single thing the entire context once we have it plan will be ready then we can actually start building the project and instead of building immediately what I’d like to do is generating the UI design depending on that plan that we generated and I’m going to get into that again I’ll give you some prompts to generate the UI design. Okay, so I am back in VS Code. Here we got the very

[26:34] first batch of questions. We have three different questions. Here it says, who is V14 and what counts as a successful first release. Now, most of the time you would like to go with the recommended answer, but there will be some places where you’d like to actually choose a different like different answers than recommended and even sometimes add your own description. But in this case, I’ll just say this should be just a working demo and I’ll go with the recommended

[27:04] option. Then here it says like should we build it for both iOS and Android? Here I only want to have it for iOS first. So, I’m going to say, you know, like just go ahead and select this option. If you wanted to, you can select this one as well, but this is the one that I’ll have. And then let’s say public to members. Yes, everyone should be able to use it as long as they are signed in. Okay, so now AI will keep these answers in memory and then it’s going to ask us

[27:36] another batch of questions. So, I think I’ll just go through and answer every single one of them. Once it is done, I’ll just be right back. And instead of answering them off camera here, I’ll just do it right here so that you can see the type of questions that I’m getting. For image creations, let’s just say single upload only so that we can keep it simple. So, here it says what users should see once they sign up. will say they have to choose a username and then here I’ll just say home header

[28:07] button what comment and deletion behavior do you want for the demo let’s just have flat comments and own deletion you can go a lot more complex but for the initial version that’s not really what you would like to do so here again you can read the question this will be my answer and then it says what media limits are accept acceptable for this demo. Let’s just say images up to 10 megabytes and video up to 30 seconds and 50 mgabytes.

[28:41] We don’t really want to allow too large images and videos at the start. Um here it says can v1 exclude push notifications. Yeah, absolutely. We don’t really want to have payments push notifications for initial version. I’ll just say yes. trusted demo. We don’t really want to build something really complex from the start. And this is what I have done with my own mobile app as well. Like instead of building every

[29:11] single feature from the start, I basically um started with the simple version which is V1 right. Just an MVP. So I said at least users should be able to take a photo and calculate their calories with AI. Once I had it, then I added bunch of more features, right? You don’t really want to build everything from the start. From my experience, this has been working really nice. And this is what I would recommend. I would say

[29:42] um here we’ll just say we’d like to build our own custom native screen instead of using the cleric UI because I’d like to show you how to generate something from the UI design that we’re going to get from AI. Okay. So I’ll go with this option and we would like to use convex throughout the project. Let’s say online first and there should be retries as well. So here I have another question about the theme. Instead of answering any of these like I’ll just put my own

[30:13] kind of like description or I’ll just try to explain something like for now only light mode and I’m going to say for colors I’ll provide a design reference later at some point because we don’t really want it to use some you know like a color palette like blue it says but I don’t really want to have it later at some point. I’ll provide a pre-made design. So, I’ll just say use that one.

[30:49] So, let’s say it should be tap to play I think. Yeah, it is recommended. I’ll just go with this one. Now, there is something called development build. And let me try to explain pretty quickly before I answer this. So, here you can tell we are running our application, right? But it is within the expo go. So this is the tool that expo provides you but this is for testing purposes right. This is for learning purposes. When you’re building an actual application then you would

[31:22] like to create a development build because within this you cannot really have every single feature or some native modules doesn’t really run within the expo. Okay. So once again in simple terms this is for testing purposes for learning demos. If you want to build a real project then you’d like to use something called development build. And basically what this does in simple terms is that it’s going to take your application right and instead of running it within the expo go it will create

[31:54] this kind of a standalone application. Okay. And we’re going to see it. I know that this sounds confusing for the first time for beginners, but I think that’s completely fine. We’ll see how that work. So, you would like to use a development build if you are building a real project. So, that’s how I can explain it in simple terms. So, we have more questions. I’ll just go ahead and choose the recommended ones so that we don’t really waste too much time. But I think you’re able to see the

[32:26] workflow. You will have all these questions so that AI doesn’t really guess any feature but instead you are the one that deciding all of these. Now here it says what should a brand new user see when they follow no one. So basically when you sign up for the first time you know you are not following anyone and what you what should you see on the screen. So here you can go with the empty state. I’ll just say seated demo content which means basically add some you know fake content or you know

[32:58] test accounts so that they can see some posts. I think this is going to be better especially for this tutorial. If I was building this as a real project I would probably go with the honest empty states. But here I’m going to select this one. And here it says should messages include unread indicators? Um, I think for now we’ll just leave it as bare chat list. Maybe at some point we can add these features but for now we’ll just leave it simple and choose this option. And here it says will you

[33:31] able to so this is the other question that I just got and this will be my answer here. I’ll say for now we will just use clerk authentication with public key and this is something that we’re going to get into. Basically, clerk will give you an environment variable and it’s going to be our public key that we can use in development. I’ll go ahead and submit this as well. Off camera, I have answered some more questions. And here’s the entire thing. You can pause the video and read it. If

[34:02] you’re building a real project, this is exactly what I would do. And here now it says, “Ready for me to turn this into an implementation plan.” Here I’ll just say for now go ahead and create this under a file a markdown file called plan.md kind of like readme.md. But here I should be able to at least see it. So here I’ll just say for now create a plan MD file with all the details

[34:36] so that later we can you know implement this step by step. So I’m going to run this. It will create that plan MD file and after this I’m going to leave this lesson right here. In the next lesson we’re going to get started with the UI design. And for this once again I’ll provide a prompt that will help us to generate really nice looking UI designs. And once we have the design then we’ll go into codex and we’re going to break it into features like first we’re going

[35:07] to build the authentication and then you know let’s say the database connection so on and so forth and I’m going to get into that in the next lesson. For now let’s just wait for this to create the plan. So here it says this is the entire plan. It is trying to still write it. Once it is done, I believe we’re going to get the plan MD file. All right. So here we have the entire plan. You can take a look at it. You will also have your own

[35:37] plan. Here it says, do you want me to implement this? And I say for now only create the file later. I’ll ask for implementation. So here turns out it can’t create the plan. MD while we are in the plan mode. So here it says just deactivate it. If you press this plan mode is gone. And here I’ll just say I or I’ll just say do it now. So within the next 2 minutes it has created the plan.md with the entire

[36:09] details. You will have the exact same thing depending on the context that you given to AI. Okay. So I think we can end this section right here. But just before we do so, what I’d like to do is committing everything and publishing it to GitHub. Now, I’m going to go ahead and close this. If you wanted to, you can ask AI to do it for you, but for the first time, I’ll just do it manually here. Uh, first off, let’s go into GitHub. If you don’t have an account, go ahead and

[36:40] create one. It’s completely free to get started with. And then just press new, create a new repository. Then you will be on this screen. You need to give it a name here. In my case, I think I’ll go with something like so. I think I’ll go with this name. And for now, I’m going to make it private, but at the time that you are watching this video, it’s going to be public and free. But for now, we’ll go with private. Yeah. Other than this, you can leave everything as it is and create the repository.

[37:10] Now, it’s going to give us a command, which is this part. We’re going to copy it and paste it into our terminal. So I’m going to first copy this and go into VS code. First I’m going to stage everything. So under this tab, press this button where it says stage all the changes and then let’s create a commit message by pre by pressing this button. So AI will create the message. Technically you can type anything but it is just better to use this feature of

[37:42] AI. And now we’re going to commit this. And let’s try to publish the branch, I would say. But first, we need to, I think, go into our terminal, kill this, clear this up, and then paste this in that we just copied. Now, what this does is basically taking all these local changes that we have in our laptop, in our machine, and push it to the to the repo that we just created. So notice how once this is done

[38:13] successfully, you’ll be able to reload this and see everything like they are literally right here. Okay, so we had all these local changes. They are now live on GitHub. Okay, so I think I’m going to leave this lesson right here. Remember this is one of the most important steps when you’re building an application. So I think you should spend a lot of time while planning your application. So instead of just jumping into coding immediately,

[38:44] you should you should spend a lot of time and talk with AI just like what we have done in this lesson. Okay. So with this I’m going to see you in the next lesson where we will generate the UI design. All right. So this is where we left in the previous lesson. We have planned our project. Now it is time to get started with the UI design. Now for this I already have bunch of different prompts that I used that give me really really nice looking designs and now we’re going to use a similar thing. So here we have one design for AI trip

[39:15] planner application. We have another one for recipe app and this is the prompt that I used to get that design. Same thing for a dating app. Then the actual UI design for my mobile application and then at the end for the dental application UI design. You can find this link in the description. I’m going to leave it. Um, let’s scroll to the top and basically I’m going to copy this entire prompt. But now remember this is for the trip planner application but we

[39:46] are building for something like a social media application. So what we’ll be doing is first copying this prompt going into chat GPT or Gemini whatever you’re using paste the prompt and then we’ll say depending on our plan which is right here. So copy it we’ll say depending on our plan give us a prompt like this one and once we have the prompt we will paste it into a new chat that will generate the image for us. So, I’m going to go ahead paste this in, which is my

[40:18] plan. And then here, I can say something like, depending on the plan that I have, I want you to generate me a prompt like this that will generate a UI design. Okay. Once again, basically it’s going to read our plan and depending on the plan, it will give us a prompt like this so that we can go into a new chat and generate an image. And there is a new model that

[40:49] GPT just released which is image 2.5. It looks really really nice. I already tried this out. Um let’s just say create image. And then once we have the prompt, I’m going to copy it and paste it. But looks like this is trying to generate the image. Well, not really. It wasn’t an image. So, it was a prompt just like what we asked. So, I’m going to go ahead copy this entire thing like up until here. And I’m going to

[41:21] paste it right here. All right. So, after some time, this is the end result that I got from GPT. I think the UI itself is looking pretty clean and crisp. But there are a couple of different things that I didn’t really like, which is the icon. So here instead, I’d like to have a camera icon. And I will also say that, you know, this is the design system. I wanted to upscale it. Here is my prompt. You can do a similar thing. So I said, “This is a good start, but I want you to update

[41:53] the logo from the sea letter to a camera icon. similar to Instagram but a little bit different. So do not copy it exactly. Also upscale the design system as a separate image. So I’m going to go ahead and run this. Now once we have the design system, we’ll go into VS Code. Let’s create a folder called design. And within this, we’re going to have the design system. We’ll attach it. And we will also have each of these screens

[42:24] upscaled one by one. So this is my workflow. Let me show you that. So we will generate the full UI design which is kind of like what we have done right here. Right? And then we’re going to upscale each screen like one screen at a time. Let’s say first we will upscale the authentication and then I don’t know like the onboarding profile so on and so forth. And we are going to build them one by one. I think we can start with the authentication screen. And I believe

[42:55] right here we should have the oath screen. Let me try to zoom in. Yeah, but like this doesn’t really good. Uh this doesn’t really look that good. I think this text is unnecessary. But yeah, like we’ll just try to follow up with the GPT couple of more times until we get something that we actually like. Now, this is the thing about AI. Most people just try to get the best result in the first shot and if they don’t get it, they kind of like give up. They’re like AI sucks. It’s not really

[43:28] good. But dude, like it’s just AI at the end of the day. You need to follow up couple of more times, give it a reference, you know, so you can get something that you actually like. In this case, I didn’t really like the authentication screen design. So I’m going to follow up in a second. All right. So after some time this is the image that I got here. You can tell the logo has been updated and then I think we also have the design system which is kind of like upscaled. So we can copy this and paste it into VS code in a

[44:00] second. But here I think you know as I already told you I didn’t like the authentication UI screen. So here you can tell this is my prompt. I just said give me a different variation and upscale that image. also upscale the design system. So, for some reason, initially I didn’t see this one. Um, but yeah, I’m going to go ahead and copy this image and I’ll paste it right here and let’s just say design system reference.

[44:32] Now, the reason that we generated this and also the entire design is because like our AI agent can take a look at it and see all the components, all the colors like fonts, literally everything that it needs because here it’s going to be harder to find it and it doesn’t really include everything. And now I’m going to copy this image as well. Let’s go into VS Code. I’m going to paste it right here. And let’s say this is the oath screen design or you can just say

[45:05] reference as well. This is what I usually like to call it. Now with this we can literally go ahead and ask AI to build this design. And for this again I have a kind of like a special loop that I’m going to show you in the incoming minutes. But for now that’s the authentication screen. After authentication what we can create. Let’s take a look at it. um we can create the profile screen or the home screen, but for now I’m just going to copy this entire image. So I

[45:37] was just saying that I’m going to copy this image and I’ll go into VS Code right here. I’m going to paste this and I’ll say the design reference or let’s just say app design reference. Okay, now this is the entire design, right? This is the design system and this is the authentication screen. Anytime that we want to build one screen at a time, we’ll be using you know this kind of images. We are going to upscale every single screen. Now you might be asking

[46:08] how can we get this demo image so that we can use it in the authentication screen. Well that’s a nice question. What I’ll be doing is going into GPT and I’ll say I want you to generate me the demo image that you’re using in the authentication screen. Okay. So it’s going to generate that image so we can use it later in the authentication screen. So I don’t know

[46:39] why but initially it has generated this image which is something that I don’t really like because this is what we’d like to use in the authentication screen. So I took this screenshot. If you’re on Mac it’s going to be command shift control and 4. Okay. So command control shift and 4 is going to allow you to take the screenshot and then just paste it right here. So I said I I meant this one and then I also said you know make the background to be transparent so

[47:10] that it matches the white background of the application. Okay. So basically we don’t really want to have this background on the image. So this is the end result that I got. I’m just going to copy it and paste it right here. Let’s actually put it under the assets images. Ctrl +V and let’s say oath demo image. Later in the video, we’ll be using it and I’ll show you how to attach it to the Codex chat. Okay, so

[47:43] that’s my design workflow in simple terms. Now, I could have made this a lot longer than this. I can explain every single detail like how we can create every single screen, how we can upscale them, but that’s really the basic gist of it. Now, you need to do the same thing over and over again to generate all these images. And actually, like later in the video, you’re going to see that we don’t really need to create all of them at some point because we’re

[48:13] going to have enough design references and Cloud will be able to build the other screens just by looking at this image. Okay. So, with this in mind, I think I’m going to end this section right here. This has been like 10 minute lesson, I believe, or something like that. 10 to 15 minutes. I’m going to go ahead and stage everything. We only have some images and we’re going to say get a commit message. Once we have the commit message, we’re

[48:43] going to go ahead and commit and we’re going to say sync this up. Basically, it’s going to take these local changes and push it to our GitHub account. Let me actually show you that. So, it was called as Codex Graham. So, I’m going to visit that repo. And here you can tell we just got those changes just now. Okay. So with this I believe I’m going to see you in the next lesson. All right. So in the previous lesson we have generated the design for authentication

[49:15] screen. Now let’s go ahead and see how we can take this and convert it into reality. So there is a loop that I always use which is basically we ask cloud to take a screenshot from the simulator. Right? So let’s say this is our authentication screen. We say take a screenshot and compare it to the end result until they’re identical. Go ahead and do it, right? So this is like a loop. First we say go ahead and build the authentication screen. And here is

[49:46] the workflow. Take a screenshot from the simulator and compare it to the actual design. And if it is identical, just stop. If it is not, then keep going. Right? So this is like a loop. It is going to run a couple of times and once it is done once it is identical we’ll just say okay um I was saying once it is identical just move on with the next feature or the next screen whatever that is okay so with this in mind let’s go ahead and talk with claude

[50:16] sorry with codex in this case I’m not using claude but you got the point here I think I’ll just open up a new chat and here I’ll just try to explain it. All right, so I just paused the video and explained it. You can pause the video and read it. Basically, this is exactly what I just explained. And I’m going to go ahead and run this. And let me just double check if I’m running the application. I think I don’t. So, I’m just going to say MPX Expo.

[50:49] And I’ll press R or you should press I if it is not running in the simulator. Now, it is right here as you can tell. Now while this is trying to build it, we can create the we can create the clerk application. So clerk is going to be the authentication service that we’ll be using. It is completely free to get started with and you don’t really need to pay anything like you don’t even need to put in your credit card information. So just go ahead and create an account and then right here you can create a new

[51:20] application. In my case I have bunch of different apps but let’s let’s start from scratch. Let’s give it a name. I’ll just say Codex Creme. You can call this anything. And then just add the sign-in options that you would like to have. In my case, I’m going to disable the email, but I’ll just have Google as well as Apple. Now, one thing that I want to mention, if you include like if you include something like Google authentication, then you have to have Apple authentication as well, right? So

[51:51] basically Apple tells you that if you include any other social integrations for the authentication then you have to have Apple as well otherwise your application will be rejected and we’ll go ahead and activate both of them in clerk dashboard and we’ll say create the application. Okay, so here they have bunch of different SDKs lit literally for everything. But in our case, we’re going to get the expo SDK. Now you can copy

[52:22] the prompt and just let AI to set this up. And this is actually what I’ll be doing. But if you would like to see the entire manual setup, then just press here. Then you can go through it. What I’ll be doing is just getting the environment variable. So I’m going to copy it and I’m going to go right here. create the env file and I’ll just paste this in. So we have a publishable key. Basically with this key we can connect to this application

[52:55] that we just created. You can think of it in that way. And I think I’m going to copy this prompt. But I’d like to implement authentication a bit later in the video. For now let’s just set up the UI design. and I’ll just be right back once this is completed. All right, so after around 4 minutes, we got the end result. I think this is looking pretty similar to the design that we attached. Let me just actually find it. Okay, so it is almost identical. Like we

[53:26] have the three dots which is right here, icon, logo, um literally everything. What I’d like to get rid of is maybe this text. I think it is just unnecessary. So I can search for it and delete it myself. A social app trusted testers. So let’s find it. And I’ll just delete this text. I think it is unnecessary.

[53:56] But other than this, I think this looks pretty clean, especially for the version one. Maybe later at some point we can update it. Um, but yeah, for now I’ll just leave it as it is. Now, let’s go ahead and get this prompt. I’m going to copy it and then I’ll paste it right here. And I’ll say implement. So, I just said implement authentication with clerk. And here’s the entire documentation. And again, I’ll just be right back once

[54:27] this is done because currently if you press, nothing happens. But now Codex will implement it and it should work out. All right. So here you can tell it has built it and now it’s even using my computer and testing out by itself. Like this is Codex. It has clicked to it and now I think it’s going to go ahead and say continue or cancel. Like it’s literally testing this out. Now, what I’ll be doing is basically just stopping this process because I

[54:58] believe it is already implemented successfully. I’ll just go ahead and test this out. So, I’m going to press this button and let’s say continue. I already have an account that I signed in in the past. Um, like what is going on? Let’s just say cancel. And wait, I think I’m just going to close this first. And okay, so I believe like here you can tell we got the Codex Graham and this is the development build. This is something that I have briefly mentioned in the past but I

[55:30] never told you how we can get this. So I think you know as you can tell Codex has already got the development build but let’s say you don’t really know how to do it. I’ll try to explain pretty quickly. So first off there is something called expo dev client. This is a package that you can take a look at it or a module. You would copy this, okay, and paste it into your terminal. MPX expo install expo client. Once you have this, you would go into your terminal and let’s

[56:01] say you would just open up a new terminal. Okay? And then you would say mpx expo run iOS or Android if you’re building it for Android. So in my case, it’s going to be iOS. And looks like Codex has already run it. If you take a look at it right here, I have an iOS folder, right? If you run it with Android, then you would have the Android folder as well. And what this is basically this is the

[56:33] entire application, right? But it is built under the iOS folder. So this is a development build. Now we can see it is right here. Okay? So it is much more than this but we can keep it like this to explain it simply. Okay. So from here on out whenever I want to run my application I’ll just run it from here. I’m not going to go ahead and open up the XOGO application because as I said that’s that was for testing purposes for small applications.

[57:04] Okay. I hope that this makes sense. Now, we’ll go ahead and just say continue with Google. And before I say continue, if you press Ctrl D, you’re going to get the developer developer tools. And here you can toggle the tools button, which is this one. This is just for development purposes. You will not see this if you publish your app to the app store. Okay. So, here you can toggle the state. You can have the fast refresh, reload, go

[57:36] home, basically everything. And now we’ll just say continue with Google and we’ll test out if the authentication will work. So this takes some time, but I don’t know why. I’ll try to control D and reload. Okay, now we’ll try to sign up

[58:06] because if you currently take a look at it under the users, we don’t really have any account. Oh, I think we have and I believe that’s because Codex has test this out in the background. Um, but yeah, right here now we just logged in. We can sign out as well and we’ll be right here. Okay, so that’s the authentication. It is implemented in simple terms. You can also test out with Apple, but since Google is working like this is also working 100%, but I’m just

[58:38] not going to test this out. Um, with this, what I have done off camera is that I went into GPT into the same chat history. This is where we left. I said upscale the home screen, profile, and chat screens. generate each of them as a separate image. So, we have the chat screen, we have the home, and we have the profile screen. So, I’m going to copy every single one of these images and go into VS Code. Let’s maximize the screen

[59:10] under the design. I’m going to paste. Oops. I’m going to paste this one. Let’s call this as home screen reference. And let’s go into GPT. Basically, I’ll do the same thing for the other screens. This is going to be chat screen reference. And then finally, I believe the profile screen.

[59:47] Okay. Now the other thing that I have done is basically generating more screen. I said upscale the explore screen which is this one. Um it is this one. Then I said the edit profile sheet comment sheet and I said generate every single one of them as a separate image. So here you can tell we have the comments. So these are needed for GPT or CEX to copy it. So, what you would like to do is copying them and pasting it

[1:00:19] right here. I’ll say explore screen reference. Now, I’m going to get the other images as well, but here I think I’d like to go into Codex and I’ll say just like in the authentication screen, I want you to build the home screen where we have that loop. Right? So, I’ll try to explain it. Let me show you that pretty quickly. Okay. So, I’ll just say put yourself into this loop once again and build the

[1:00:51] home screen. For now, we don’t have a database. We don’t have any data. So, I’ll just say create some test or some fake data just like one of these and build the UI. So, I just pause the video and get my prompt. And here, if you wanted to reference an image, which is home screen, you can just say add and then add the file name. So that’s going to be home screen rev.png. I’ll go ahead and run this. Once this is done, I’ll just be right back. So

[1:01:21] currently it has built and it is still within that loop. Like it’s literally trying to compare it to the end result and trying to fix the issues. And currently I can see like there is one issue right here. Um, it should fix that kind of like overflow. It should look like this. Um, so yeah, I’ll just wait for this to be completed. Once it is done, I’ll just be right back. But this looks identical. Like literally the exact same end result. All right, so GPT

[1:01:51] is done with it, but still there are some issues that it didn’t really fix, which is something that you shouldn’t really get mad at because it is AI at the end of the day. You should take the screenshots and follow up. This is what I do. Like I would literally take a screenshot and then paste it right here. And instead of um adding couple of updates or a couple of fixes in one prompt, what I do is asking for one fix at a time. So here I just took the screenshot and I’ll say fix this

[1:02:22] overflow. Okay. So once this is done and then I’ll follow up. I’ll say um use the native tabs for these tabs, right? Once again, native tabs are something that we have in expo. You can double check this will give us the iOS liquid glass effect. If you wanted to, you can copy the entire page as markdown. This will get, you know, the entire page as a

[1:02:52] documentation and you can paste it right here. Actually, this is what I’ll be doing. I’ll say let’s say something like convert tabs to native tabs. And here is the entire documentation and then you would paste this. Now I’m going to run this but let’s first wait for this to be completed and I think it is already done. Now you know GPD is trying to use my

[1:03:23] simulator and test this out. Okay. So here you can tell I think here we don’t really have an overflow but the image is not really like can you see the image has the black background which is something that we can fix. This is some hardcoded test data anyways. Okay. So I’ll go ahead and run this now. In a couple of minutes the tabs should be converted to native tabs. All right. So after 5 minutes it was able to build the native tabs. As you

[1:03:55] can tell, it is looking really really clean compared to the previous version. Now, there was kind of like an issue here. You can tell the background was kind of like gray, but now it is transparent. That’s because I asked it. So, here I took the screenshot and I said native tabs looks as I wanted, but remove the gray background. So, the rest of the application is visible. Right? Previously, here I had some gray background here. you can tell. Um, but

[1:04:26] now we don’t really have it. As you can tell, it just fixed it under 1 minute. So, with this, I hope you are able to see my workflow. Now, in the exact same way, I’ll go ahead and build the profile screen, you know, explore screen and even the messages screen. Here, I think I added couple of more images of camera. So, we had the profile home. I have added the edit profile reference, right? this screen. I have added the comment screen as well and I believe the chat

[1:04:57] screen. Okay, so these are some of the screens that I I have added off camera. Other than this, I haven’t updated anything in the codebase. Now I’ll go ahead and just say now do the exact same thing for the profile screen. Once it is done, I’ll just be right back. So just for the record, here is my prompt. I said now build the profile screen. use that loop and here is the reference image that I just attached. All right, so in 6 minutes it was able to build and test that out. This is the

[1:05:29] profile screen. Now I just said build the edit profile and here is the reference image. So I’m going to run this once it is done. I’ll be right back. Now you might be asking why don’t we implement anything now. Well, that’s because I think it’s always better to have the entire the entire UI design and then it’s going to be really easy to replace everything with the actual data. For now, like this is my workflow. I’m trying to get the UI design as much as possible. And once I wanted to implement

[1:06:01] the actual back end, all I need to do is just replacing this data with the actual data. Okay, so we’re going to set up convex in the incoming sections. But for now, let’s just go ahead and build most of the UI design. All right, so after some time, here we go. It’s also been built. But I think having the sign out here doesn’t make any sense. That’s what we have in our UI design. So I cannot really blame Codex. But I’ll just say delete the sign up button from here. Maybe we should have it under the

[1:06:32] settings. So basically when we press this button there should be some kind of setting screen and I’m going to get into that and I’m going to get into that a little bit later in the video. So for now I’ll just say delete the sign up button from edit profile screen. And also what I’ll be doing is taking a screenshot from right here. I’ll just say replace the three dots with a

[1:07:02] settings icon. Later we will build that page. Okay. Now it says I have removed the sign up button. Yes, it is not here. And now we should update this part as well. Now while it is trying to update it, let’s go ahead and say build the explore page. We already have something here but it is not the design like this is something Codex generated for fun in the

[1:07:33] past. Um basically I would like to get this one. So I’m just going to reference this. Let’s say explore screen reference. Let’s say build the explore screen. And here you can tell this has been updated to settings and we will implement it a bit later in the video. All right. So after some time the explore screen is ready. Here you can tell we’re going to replace them with the actual data a bit later in the

[1:08:05] video. And after explore screen I just added the chat screen reference. And when I said build the screen as well. So we have a fake account or a chat. If we press that, we have the actual details where we can send the message. This is something again we’re going to get into the details and the implementation a bit later in the video. But with this, I think we can leave this section right here where we built the entire UI design from the authentication screen to the

[1:08:36] profile and basically everything that we we would need for the version one. Now just before I commit my changes and end this section there is one thing that I want to talk about. Let’s go into the workflow that we had so far. So we have built our plan. We have generated the UI design. We break it into features like authentication and UI design. So far we have only built these right. So you’re going to build one feature at a time. That’s what we have done. We built the

[1:09:06] authentication screen and then we have built the rest of the page. um sorry rest of the design we did like a selfch check we manually tested most of the things if they’re working or not and it turns out everything has passed but now we need to run an AI code review this is at least what I do as a part of my workflow because it looks like everything is working but in my codebase there could be a lot of different security issues that I cannot really see. So for that reason I want to have

[1:09:37] an AI that can you know like scan my entire codebase and see if I have any issues or if I’m not following any conventions so on and so forth. Now for this there are bunch of different tools and one of the free tools that you can get started with is going to be code rabbit. It’s completely free to sign up and you’ll get like 2 weeks of free trial and I already have an account. So just go ahead and log in with your GitHub account. Then you would like to visit u this section where you have

[1:10:09] repositories. So once you’re here, you can go ahead and add your repositories manually or you can sync all of them at once. This is what I have done. I basically have all my repositories in the code rabbit dashboard. Now anytime you would like to use code rabbit for the AI code review, you need to send a pull request or you can do like on the main branch as well. But I’d like to create separate branches. And if you don’t know what that means, let me try to explain pretty quickly.

[1:10:39] So just imagine this is the timeline, right? And you’re building features every single next day. Okay? So today you started with the authentication. Next you added the UI design. Next you add the you know messaging feature. And now you would like to add the video calling feature, right? But you don’t really know if it is going to break or if your teammates will accept it or not. So you say instead of me updating the code directly, right? Instead of me updating the actual branch, let me go

[1:11:10] ahead and create a testing branch, right? And then here I’ll add some changes like I’m going to add the audio calling and then video calling and then you’re going to commit them. Now let’s say you like the actual end result then you can send a pull request and you can say if you’re working with your teammates you can say something like here I have built the video calling feature can you please accept my request and if they accept it now your changes will be added into the actual actual branch which is what we call either main

[1:11:42] or master. Now, let’s say your team actually like this feature, they can accept it and then later at some point you can delete this branch and like you don’t really need it anymore and your changes are right here. Or let’s say they didn’t really like it. They say this is breaking our code or I don’t know we don’t want to have video calling feature something like that. They’re going to reject your pull request and then you can basically go ahead and you know delete this branch as if nothing has happened. All right, so that’s the

[1:12:14] general idea behind it. If you’re a beginner, like if you have never seen this before, it might feel a little bit abstract, but like that’s the general idea behind it. You create separate branches, right? And you can add more features, then at some point just take it back or push it to the main branch. So just imagine like you are 10 different people in a project. Everyone can create their own branches and work on different features, right? eventually everything will be merged to the main

[1:12:46] branch. Okay, so I hope that’s not really confusing. Now let’s go into VS Code and see how we can create a separate branch and commit our changes. So first off, I’ll maximize the screen and I’m going to press command shiftp or if you’re on Windows that’s going to be control shiftp. Then here you can say toggle status bar visibility from right here. I think excuse [clears throat] me I’m going to select create new branch by default I’m on

[1:13:16] master as you can tell in your case this might be main which is fine it is the same thing um just go ahead and say create a new branch and then let’s give it a name I’ll just say oath and let’s say UI design all right so currently we created this branch right now let’s try to commit our changes so you’ll go right here scroll to the top stage everything by pressing this button. Let’s get a commit message.

[1:13:48] So that’s the message AI generated for me. I’ll go ahead and commit this. Okay. And then we’ll say publish this branch. Now if you go and take a look at your source code like just go ahead and reload. So this is still taking some time. Uh now we should have this new branch right it is right here for 4 4 seconds ago. I’ll go ahead and say create a pull request. Now if you scroll to the bottom

[1:14:19] you’ll be able to see how many lines of changes you have. You know like this is the amount of new additions and these are the deletions. And then you can scroll and see every single change that you have. Now instead of so instead of reviewing them manually, we’ll just let AI to scan every single line and tell us what are the things that we can fix. I’ll just say create the pull request. If you have set it up this correctly, right, you should be able to get a code review in a couple of minutes. All

[1:14:50] right, so initially this is what you’re going to see and it’s going to take couple of minutes. Once it is done, um you’ll get the feedback from code rebbit. And once it is done, I’ll just be right back. All right. So after 10 minutes, the code review is ready. Now we can scroll to the bottom and see every single suggestions that we have. So since we didn’t really implemented anything important in our code other than UI design, we don’t really have that big of issues. But here you can tell we have a minor suggestion and then

[1:15:23] another one. Yeah, I think currently we only have two. And if you want to fix them, you can obviously copy the prompt and paste it to AI. And you can also like see the problem why this is a suggestion like what code rabbit thinks and how can you fix them. Right now just imagine you have a 10 different suggestions. you don’t really want to copy every single one of them one by one. So you can scroll to the top and you can just get the prompt for all review comments for AI agents. Right? So

[1:15:55] I’m going to copy this and let’s go back into VS Code and like right here I’ll paste my prompt. So this will go ahead and fix those issues. And once it is done, we can add another commit and then you know send it as a pull request once again. So currently we are right here. So we created our commit, we sent the pull request, right? And before we say merge

[1:16:26] the pull request. Um we would like to run these fixes. So here you can tell within the next 1 minute everything has been fixed. Let’s go ahead and stage these and we’re going to create a new commit. You don’t really need to create a new pull request. So I’ll just say sync the changes. If you scroll to the top now you’re going to have that we’ll have the two commits. Initially we had one. It just reloaded by itself. Now we can scroll to

[1:16:58] the bottom and just say you know merge this pull request. Now, code rabbit will try to give you another review because you just had a new commit, but we don’t really need to wait for it because these were the suggestions that came from code rabbit. Okay. So, I’ll go ahead and confirm the merge. Basically, we say yes, we are accepting this. Now, your changes will be on the master branch. Okay. I’ll try to visualize it and show you every

[1:17:28] single step. creating the branch, adding the commit, sending the pull request, and merging it. Now, with this, everything is done. You can go back to your master branch. Just select this one and then press this button. Right, we’re just going to sync this up. Oh, wait. We have a MV change. How come? Wait, what’s the change here?

[1:18:00] I think we have the secret key. This is something that Codex added behind the scenes. It’s not really that important for now. Just go ahead and press this button. You probably don’t have this. I don’t know. Uh just go ahead press this button and this is going to sync it up. Basically, it’ll get the latest changes and update your codebase with it. All right. So, this is where we left. Now that we have most of the UI design ready, it is time to get started with the actual functionalities. So we should

[1:18:30] be able to create posts, you know, like them, comment, send messages, so on and so forth. For this, we’re going to need a back end and basically a database. And for this, we can use Convex, which is completely free to get started with. You don’t really need to pay anything. Here you can tell they have a really really generous free plan and I already have an account. If you don’t go ahead and sign up then log in with your GitHub account and then you will go into VS code. Now

[1:19:01] you can ask AI to implement it for you. But what I’ll be doing is just setting it up setting it up by myself so that you can see the process instead of just you know blindly vibe coding. Okay. So here I don’t know what is happening with the terminal UI. Okay, now it’s fixed. Now from here on out you almost always want to have two different terminals. In one of them you’re going to run the expo application with MPX expo and with the

[1:19:32] other terminal you would like to run convex. Okay, which is our back end. So here go ahead and just type mpm install convex first. This is going to install the package and then we are going to run mpx convex def. So just wait for it. This will install the package. Okay. So this is taking a bit longer than it should. While this is

[1:20:04] installing, I have done something in the background which is basically generating a different logo. And because I didn’t really like this one, so I went into GPT here. I’ll show you the steps. So this is where we left, right? I I just said generate a grid of nine of icons for this app that I can choose from. And I didn’t really like any of them. Let’s say if I like this one, I would say upscale the option five. But clearly I didn’t like any of them. So I just said

[1:20:35] give me a completely different style and vibe. again a grid of nine. From here, I like the option six. I just said upscale this and make it in the blue theme. This is what it gave me. Even though it’s not the same thing, I still really like this one. And then I just said, you know, remove the background. So, this is one of the other processes that I just wanted to show you. If you want to get a different variation of something, just ask for a grid of nine instead of asking nine different times. So from here,

[1:21:06] let’s say you like this one. You’ll just say upscale this for me. [snorts] So with that in mind, you’d like to copy this image or the logo, right? I’ll just go into my assets and I’ll just paste it. Actually, under the images, I’ll say Ctrl +V and I’ll be using it in a second. So for now, we have the convex installed. Let’s clear this up. You’ll say MPX convex def. So initially it might ask you to log in if you’re running it for the

[1:21:37] first time. But I have already logged in right and um this is going to be the next question that you’re going to get if you are logged in. Um we would like to create a new project. So I’ll just select this one. Let’s give it a name. I’ll just say codex gram. It is taking from the folder name. So I’ll just press tab and I’ll press enter. If you wanted to you can type something else to update this name. Uh, but I’ll leave it as it is. And we would like to deploy it on the cloud. Just go ahead and press enter.

[1:22:09] And we would like to set up convex AI files such as agents.md and some skills. Basically, this will teach AI how to work with convex in the best way possible. Okay. So this will create couple of different files and actually most of them will be under a folder called convex. Okay. So our entire backend code will be under right here right and like we’ll have schema we’ll have different

[1:22:41] mutations queries and if you don’t know what that means is basically you have queries to fetch data like getting the posts and to create something you would have mutations like creating a comment creating a post or deleting a post deleting a comment updating things like that. So for this AI will create some mutations for us. Okay, I’m only explaining this if you’re just a vibe coder and watching it up up until now.

[1:23:13] Um I think these these would be helpful just to know. Okay. So with this from here on out always have this terminal open and you can rename it just by pressing enter or press right say rename. I’ll just say convex. And you can rename this one as well. You can say expo mobile, whatever you’d like to call. Okay. Now, with this, what I’ll be doing is going into a new chat. First off, I’ll just say use

[1:23:43] the logo that I have right here. So, I’m going to call this as logo.png. And I’ll just say use this logo.png png as my brand logo in this app. We can say something like replace the current one with this one. All right. So, within 50 seconds, as you can tell, icons have been updated within this application. Now, here I’m going to

[1:24:14] maximize the screen and here is my prompt. You can pause the video and read it, but I basically say now that we have authentication and most of the UI design ready, just go ahead and read my plan.md so that you know what kind of features we want to build. And then I say just go ahead and start implementing the post creation, likes, comments, and follows. And then I say, let me know if I need to set up anything from the clerk or convex dashboard. Okay, so this is what you

[1:24:46] wouldd like to do at the end. Just say, you know, like let me know if there is anything that I need to do manually from any of these dashboards. And I’ll run this. Let’s see what we’re going to get back. So, while it is building, I just got asked a question. It says, is the Convex integration enabled in your clerk dashboard? If not, it says go under the integrations and find the convex. So here I’ll go ahead and find my project. Go under the

[1:25:17] configure and then you can just search for integration. So go ahead and press this. It is under the developers. And then right here go ahead and turn this on for convex. And then go back into VS code here. Let’s say it is enabled. All right. So after 20 minutes, looks like everything has been implemented just like as we requested. And it says you don’t really need to add anything, you know, like nothing you need to do from the dashboard. And here you can tell if you

[1:25:48] remember, we said that user has to first set up a username to be able to use this application. So here it says first off, go ahead and add a username. Here I’ll just try to put my name and let’s put the last name. I’ll say continue. It’s going to create the profile. For now, we don’t really have any data. That’s why everything is empty, right? The UI is UI is filled in with empty state. Okay, let’s go ahead and create a post here.

[1:26:19] I’ll just try to select something from my gallery. Um, let’s go ahead and select this one. And here I’ll say something like this weekend trip. And let’s put a three dots. I was going to say and I’ll say publish. So here we had the indicator and looks like this has been uploaded. We can double check by going into our Convex dashboard. I’ll try to log in now. Once

[1:26:49] you log in, go ahead and select the current application and make sure you’re under the development. From here, I’ll just say files. Here you can tell we have a file that has just been uploaded. Now, usually you can hover over this and see the end result. I’ll try to install it. Let’s see. Okay, here you can tell that’s the image that’s been uploaded to Convex. Now, with this I think we can also take a look at the data. Here you can tell we

[1:27:20] have bunch of different tables like uploads, profiles. This is the only user profile that we have. Now, you might be wondering how do we get this user right here. Right? And I think that’s because we have configured the convex integration in clerk. So it is like set it up already automatically. Now let’s try to test out some more features I’m going to like. Here we go. I’ll try to add a comment. Maybe we have a UI glitch here that we

[1:27:52] can fix. I’ll just say test comment. And actually at the same time I’ll just take a screenshot. go into codeex and I’ll say you fix the comment section. It should be a bit more spaced out from the bottom and then I’ll try to post. Here we go.

[1:28:23] It is right here. Now UI is not really that great. Um, I’ll try to kind of like format it. And what I’ll be doing is actually taking a screenshot and I’ll go under GPT right here. I’ll paste in and then I’ll say something like this is the current UI that I have for the post detail screen. I want you to give me three different variations of this UI. Um try to keep it simple and make sure it is matching with the blue

[1:28:55] color palette that we have already. Um yeah just give me three different variations. So this will give me that three variations and from from those three images I’ll try to choose one and we’ll ask Codex to implement it for us. Okay. So in the background it’s going to go ahead and implement it. And let’s see. Okay, that has been fixed as you can tell. In 30 seconds it is done. Now

[1:29:28] I can tell something like delete. If you say cancel, nothing happens obviously. But if you delete comment should be gone. Here you can tell everything updates automatically. Now one thing to mention about convex is that everything is real time out of the box. So here just imagine you write a comment and you have another simulator running right here. If they are looking right here on this post as soon as you post like they will see this comment on that other

[1:29:58] simulator in real time. They don’t need to reload the application. Now one of the other things that I’ll ask Codex is to add some seated data. If you don’t know what that means, it’s basically some hard-coded test data so that we can see how the rest of the application look like. So currently under the explorer, we only have one post. But how would it look like if we had like 20 different posts, right? So I’m going to say add some seated data. That would be helpful

[1:30:30] for me to see the rest of the app with a lot of data. So probably this part is not really that important but I’ll just add it anyways and let’s run it. All right. So it took around 10 minutes and here we go. We have now 24 fictional profiles. This amount of photos, you know, likes and comments. If you visit the explorer, you’ll be able to see all these posts, different accounts. And if you press them, you’re going to get the details

[1:31:00] with likes, comments, and you can also like or comment. So we have the home screen. This is how that look like. We have the profile. We’re following this amount of accounts and sorry all the accounts are actually following us because this is the amount of profiles that have been created and we are following 12 of them. So I think that’s a really nice start and we can go ahead and try to visit some accounts and

[1:31:30] actually try to follow them. Notice how, you know, UI is not the best, but we can always follow up and put CEX into a loop, which is something that I’ll get into in the incoming sections, but for now, I think we can follow and unfollow. Um, here I’ll just say unfollow. I don’t know why, but it takes some time because I think it is running on the background. This is something that we can make a bit faster as well.

[1:32:02] Okay. So, with this I think with this I think I’ll just take a quick break and then I’ll just be right back. All right. So now let’s go ahead and implement the chat messaging. Currently everything that you see on the screen is completely fake. Like this data is hardcoded. So here I’ll just say implement the chat messaging and let’s go ahead and reference this screen. So I’m going to say chat screen ref.png. Now when it comes to the this screen, it

[1:32:34] doesn’t really look that good. So for this, I’ll also provide some references. Now to generate a different reference for this screen, I took a screenshot. I went into GPT and then I just said give me a grid of three for this UI and then I just said make sure that it is matching with the rest of the design system. So it gave me three different variations. This is the one that I actually like. So here I just said, you know, upscale the variegation third. And here we go. We have it. Now I’m

[1:33:05] going to copy this image. Let’s go ahead and paste it right here under the design. [sighs] I’m going to say something like messages tab reference. And let’s try to shrink the left hand side. And here I’ll also add the messages tab reference. And then let’s say put yourself into a loop. So you can pause the video and read my prompt. But

[1:33:37] this is something that we have done multiple times at this point. I’ll go ahead and run this and I’ll just be right back once this is done. All right. So in my case, this took around 17 minutes. It has actually built it pretty quickly, but then it takes some time to test out every single thing just to make sure that this feature is working as expected. Now, what you see here is still fake data. And I asked because when I checked the database, let me actually display it. I didn’t really

[1:34:07] see any messages and I’m like, what is going on? Right? So, I just went into VS Code. I said when we send a message does it get saved to the database or all of this data are still hardcoded and it says both of them exists basically since they are like demo accounts. What you see here is fake data but it says if you want to actually test this out go ahead and sign up with a different account and everything should be working out as expected which

[1:34:37] is something that I’m going to test out a bit later in the video. But for now, there is one thing that I have done off camera that I’d like to show you pretty quickly. Um, so first off, let me show you the post detail screen. This is currently what we have. And I didn’t really like this that much. So I went into GPT. Let me show you that exact part. So here I took this screenshot and I said this is the current UI, which I don’t really like. So I said give me three different

[1:35:09] variations and it almost gave me the exact same thing. So what I have done is attaching the design system and I said give me those three different variations depending on our UI sorry our design system. And from here I try to upscale the second variation which is this one. Like this is the one that I liked most. So here at the very end you’ll see that I said upscale this second version. So I’m going to copy it. Go into VS code

[1:35:40] under the design. Paste this in. And let’s call this as post detail ref. And then I’ll put my simulator right on the side. And I’ll just say, you know, go ahead update the post screen just like this one. And one thing I realized is that I don’t really want to copy everything exactly as is because I think this header part is looking better than what what we have right here. So what

[1:36:12] I’d like to do is actually copy this um bottom part and paste it right here. I’ll say only update this part. Right. So here I’ll take the screenshot. So here’s my prompt. You can pause the video and read it. I tried to basically explain what I just said. And I’m going to run this. Once this is done, I’ll just be right back. All right. So within the next 10 minutes, it was ready here. You can tell the actions, the comments,

[1:36:43] almost everything is identical to what we have right here. I’m pretty happy with how that ended up. So I’ll just not follow up with any other improvements when it comes to this screen if you wanted to. You can of course do it anytime you want. Now we can add more features and I think I’m going to get into that in the next sections. But for now what I’d like to do is running this application in my actual phone. Right? So instead of running it only in simulator, I’ll go ahead and install

[1:37:15] this development build in my actual phone. >> [snorts] >> Now, there are two different ways of doing it. The first one is connecting your phone with a USB cable to your Mac, right? And then you would run this command. Now, I’ll just open up my terminal and let’s go under the Expo terminal. Let’s clear this up. Let me maximize the screen. You would say MPX expo run iOS just like previously. This is what we have done. But at the end,

[1:37:45] you would say d- device. Now, if you have your phone connected with USB cable, you’re going to see it right here in one of the options. So, mine is not connected, but since I have done it in the past, it shows me this. And the other way of running this is that you would use Expo EAS. If you don’t know what that is, let’s go ahead and double check. So, I’ll just say Expo EAS. So, Expo application services. This is a

[1:38:17] service that allows you to run a development build in your phone. This allows you to, you know, publish your app to the App Store, Play Store, literally every single service that you can ever imagine. Now, you don’t really need to learn everything from absolute scratch. Just go ahead and explain it to Codex or Cloud for this current use case, and it’s going to give you all the steps. Now, of course, I would say if you’re interested or if you are serious about mobile development, just pause the

[1:38:49] video and go ahead read this entire page, take a look at the documentation, and then come back. But if you’re just here to test things out, then you can just go into Codex or cloud and ask for the, you know, the instructions. And by the way, what you see here on the screen is for Apple developer program. Basically, this is something that you need to apply if you want to publish your app to the app store. Apple wants you to pay $99 per year for this program. And you know,

[1:39:21] if you live outside of US with, you know, in a country with lower local purchase, then this price will be discounted for you. So, I think you’ll get something in between 20 to $25 [snorts] or really, you know, it’s going to depend on the country that you live in. So, I’m from Turkey. When I applied, I paid something between between this amount, but you know, if you’re in a different country, it could be even lower than this or a bit higher than

[1:39:52] this. So, I don’t know, maybe it could be $50 or maybe even like $10. I don’t know. Uh but this is something to keep in mind if you actually want to publish your app. This is something that you have to apply and unfortunately this is not something that I came up with. Uh this is something that Apple wants you to apply and pay for. Okay, just keep this in mind. This is something that I wanted to mention. You can always double check just before publishing your app.

[1:40:22] Okay, so with that said, now I’ll go into Codex. I’m going to kill this terminal by the way. Here I’ll say I’d like to get a development build and install it in my phone and I’ll say I want to use EAS right expo application services. So I’ll say what I need to do give me everything step by step. Basically you need to run a command in your terminal. I already know what that is but here I’ll just act as if I don’t know it and I’ll try to show you what what you should do in these type of

[1:40:52] scenarios. Okay. So here you can tell this is my prompt. You can read it if you’re interested. I’m going to run this and we’re going to get a prompt or a command that we can run in our terminal. And this will create also a file called EAS.json. Currently, we don’t really have it, but we’re going to get that. And it is like the configuration file that EAS need. Okay. So, I’ll just wait for this to be completed. And once again, remember

[1:41:24] there are two different ways that we talked about. The first one is running this command with the device flag and plug in your iOS to your Mac, right? And I mean iPhone, not iOS. But you got the point. That was the first way. The second way is using EAS. This is what I’ll be using. And in this way, you’ll be able to see the entire process. All right. So, here we go. We have all the instructions. This is the things that you would run for the very first time. But since I have already built different

[1:41:55] mobile applications, I already have the device connections and you know I already logged into EAS initialized it etc. So what I would do is scrolling to the bottom and then I just said give me the command to get a development build on the cloud. So I’m going to run this. But once again, if you’re doing it for the very first time, you need to log in in it and create that connection to your device. So everything that it gives you here will be correct. And you can always

[1:42:25] follow up and say, you know, like I am a complete beginner. I have never done this before. So tell me all the steps that I need to do. Okay? So this is just something to keep in mind. In my case, I want to get it for iOS. But if you want to get it for Android, leave everything as it is, but update this part as Android. Now I’ll go into my terminal. I’ll paste this in. And it’ll ask me a couple of different questions. Um, looks like this has

[1:42:56] failed. Says invalid version. I’ll just copy this and paste it right here. So after I just paste this to CEX, it has given me the solution. Basically, it has fixed the cache and then it says rerun this. This is exactly what I have done. I basically rerun this command. Now, I’m going to get bunch of different questions. You’re going to get the same questions. Just go ahead and press enter a couple of different times until it starts to build.

[1:43:28] All right. So, as you can tell now, it is uploading to the EAS. You can always go into your actual dashboard. Let’s actually see it. I’ll visit expo.dev. dev and here I have already logged into my account here. You can tell these are the previous projects that I created. Now we just got the latest one just now and if you press this you can see that we have a development build that is getting created right we are getting this build.

[1:44:00] So once it is done we should be able to install it to our actual phone. So in my case it has failed which is completely normal and here is the fix. You would go right here and let’s find the step that it has failed for the first time. Like it was going successfully right here. It has failed. So I’ll just press this button which will get me the logs which is basically the details. If you don’t know what that means, I’m going to paste this in and I’ll say like you don’t need to even say anything, but I’ll just say

[1:44:31] my dev build failed and here are the logs. Hopefully, this should give us a fix. Once it is fixed, we are going to rerun this. All right, so here we can tell that this has been fixed. It says go ahead and rerun this command. But I also realized that we have a lot of different changes. Now, as far as I know that we have to commit these to get a EAS build, but I’ll just double check. I’ll say I have

[1:45:02] uncommitted changes. Do I have to commit them beforehand? Like I believe we have to commit them because EAS would get a snapshot. Um, but looks like it says no. Okay, so that’s fine. Maybe I’m just wrong. I’m going I’m going to go ahead and clear this up. I’ll paste this and again I’ll press enter a couple of different times. We’re going to get a new development build.

[1:45:35] Like you should be able to see the new build right here. So here you can tell we have the build again. It is getting built. Let’s just wait if it is going to fail or not. I’ll just be right back. All right. So after a couple of minutes, the process will be ended successfully and you’re going to get a QR code. Now I just scanned this in my phone and this is what I got. Basically it has installed the application and if you press that you’re going to get this UI. So here you can tell we have the logo, the name and it is trying to find the

[1:46:08] development server. Now let’s say you are confused and you don’t know how to run the app because it doesn’t run it by default. You can just say now in my terminal I have a QR code. How do I run this? Like what do I do? So here are the steps that you will do. First off scan the QR code. It’s going to install the build and then under the settings privacy and security you need to have the developer mode if this is prompted. If not it’s okay. Then you need to just

[1:46:39] go ahead and run this on your Mac. So basically scroll right here and run this command. Now even after running this command if you see the exact same end result then go ahead run the same command with the tunnel flag. So this is what I’ll be doing. I will run this and then at the same time I’m just checking my phone. So I’ll open up the application.

[1:47:11] So currently you don’t see but I have my phone. is right here. I’ll try to actually visit this app. Okay. So here again I have the same UI but this time I will fill this in with a value. So here you can tell it says it should start with HTTP and you can find it right here. So after the URL just copy this part okay up until the direct included. So copy this and then go into your phone

[1:47:42] then just paste it. So I just pasted it. As you can tell it is trying to build and let me open up my camera and actually show you that. Okay. So here you can tell I am in the loading screen. Currently it is loading and our application is live. So here you can tell that’s the authentication screen. Like literally everything is right here. I’ll go ahead

[1:48:14] and try to log in with my Google account. Here it says continue. And then let me just log in with one of my accounts. Okay. So here it says you need to put in a username. Let me just put something like my phone. I’ll continue. And let’s see what we’re going to get. Okay,

[1:48:46] so our feed is empty because we don’t really follow anyone. But if we go under the explore screen here, you can tell we have literally everything. So it is working just like as our simulator. I’ll try to go ahead and send messages. But first, let me try to add these accounts. All right. So, here in my phone, I went under the explorer and right here, I search for this account, which is this

[1:49:16] one. Right. So, I’ll try to follow him now. And as soon as I press the follow, notice how this updates automatically, right? So, everything is working in real time. I’ll try to unfollow. Um, I can’t press. I just pressed and notice how it’s been updated. I’ll try to press again and just watch here. It is updating in real time. Now let’s go ahead and send a message. I’ll go under the messages

[1:49:47] in my phone. Let me just send a message to this user. I’ll say hey. And as you can tell in real time, we just got the message. And here I’ll say like I’m texting again. I’ll say how are you doing? Like as soon as I send it is right here and let’s send a message from here as well. If I send it in real time so everything is working as expected.

[1:50:19] Now other than the messages everything else is also working in real time. So here notice how we have only one like from my phone. and I’ll try to like it and as soon as I like notice how it is getting updated. I’ll try to add a comment. So I’ll just say hey as soon as I post it is right here. So that’s the beauty of convex. All right. So with this I think I’m going to leave this lesson right here. Now we can improve the UI a lot and this is something that we can do in the incoming lessons and

[1:50:50] also we can add things like privacy policy, terms of services, a settings screen, so on and so forth. So these are the things that I’ll leave for the incoming sections. But for now, let’s just go ahead and commit our changes and basically end this lesson. Now, I think the beauty of this lesson or the key takeaway here is that you have learned how to get a development build and how to install it in your actual phone. Okay, so we’ll go ahead and

[1:51:21] even like kill everything. I’m going to stage every single change and I’ll get a commit message. Now, if I was building it as my real project, what I would do is again running a code review just like here in our workflow by creating a pull request. But in this case, I’ll just go ahead and commit this on the master branch so that we don’t really waste any time. So, I’ll sync this up. And here you can

[1:51:53] tell I have a popup from the Code Rebbit extension, which is something that you can get for free in VS Code. Just go ahead and search for it which will be code rabbit. So you can install this and it will work out of the box. Okay. So with this hopefully Okay. So with this hopefully I’ll see you in the next lesson. All right. So this is where we left off camera. I have done some small things and I’d like to walk you through it like what I have implemented in the

[1:52:23] background. So first off in the explore screen we didn’t really had this UI previously. It was just the images only. Now what I said is basically I give the reference image and I said put yourself into that loop until you know we have the exact same end result. And we have used this loop multiple times. So I’m not going to explain what is going on here. So it took around 13 minutes and it was ready. This was oneshotted without any issues. Now there are a couple of different things that we need to update such as the icon. it should

[1:52:55] match with the, you know, the updated icon that we have right here. And also, when you press this, the icon changes. This is something that we can fix a bit later in the video. Okay. So, other than this, I said do the exact same thing for the home screen, but do not change the icon here. You can read my prompt. And I also said implement the stories feature. And actually it is working like I have already test this out and I have posted something on my story and let’s actually test it once again. Here you can press

[1:53:27] the button and select something from your library or you can choose it from sorry you can take it from your camera. So here I’ll go ahead and maybe post this one. Now one thing I’d like to say before I publish this in the very first version we were able to write a caption in this story. So I said go ahead and delete that feature from the stories. And I also said you know allow us to take the photo from camera not only from library

[1:53:59] and then I think I said in the post creation keep the caption but also add the camera option. Okay. So I’ll go ahead and publish this. This will take some time but here we go. If you press here now we have two different stories just like in Instagram. You can go back forward and if you press again if there there are more stories it’s going to go to the next one. Okay. So that was the very first thing that I have done and I think I run one more thing which is the

[1:54:30] profile screen. So again I just said you know put yourself into that loop and build the profile screen. Now here notice I didn’t say put yourself into that loop and and the reason for that is like every single time I don’t want to explain this entire thing. Let me show you. So every single time I don’t really want to say put yourself into a loop where you take a screenshot from simulator and compare it to the reference image and keep building until it’s identical. So like you need to

[1:55:02] create some kind of reusable component or a skill in this case and I’ll show you how I have generated it. So you don’t really need to type this every single time. Okay. Now for this I’ll just go into my like how do we call it the file explorer and under the cloud we have skills right under the agents we also have skills. Now the difference between them this one is only for cloud but this is for literally any other thing like

[1:55:33] codex cursor you name it for everything but this is for only cloud now I have added it in both of them just in case if you’re using cloud or codex uh but yeah basically under the agents we have skills if you scroll to the bottom I created this file sorry folder and then the file called skill.md And let me show you the file content. So this is something that I have generated with codeex. Basically I said every

[1:56:04] single time I don’t really want to type this, right? So I said create me a skill and put it under the agents folder as well as the cloud folder. So this is literally what I have said like I went here and then I said I don’t want to type this every single time. Can you please create me a skill? And this is exactly what is happening in the background. So you’re going to take this entire file and put it in your codebase if you really wanted to or I would say just take this as a challenge and go

[1:56:36] ahead and ask for Codex to generate the same thing for you. Okay. Um, so once you have this, you can create a new chat and just say something like, you know, make sure profile screen looks like this image and just send the prompt. You don’t need to say, you know, put yourself into that loop because since this is a skill, it’ll be already attached to the, you know, at the beginning of the conversation. Let me

[1:57:06] try to kind of like visualize it. So, let’s say this is your first chat. You say go ahead and build me a profile screen and then it says okay I’ll build it and then you say something else and and then it’ll do something else right now here at the beginning of the chat the session that skill will be loaded automatically so that’s the beauty of creating a skill and here I just left a comment kind of like how can we make this loop reusable well you would create a skill explaining everything and the

[1:57:37] beauty of this is that you don’t really need to type everything by and you will just explain it to Codex or Claude or whatever and then you’ll just say create me this skill. Okay, so I hope that helps. Now with this I have the profile screen. It is also looking pretty similar to the end result. Now here I said go ahead and delete the search icon as you can tell and I also said replace this with the settings icon and we are going to build a settings screen right here. Now here we can edit

[1:58:09] our profile, share the profile and sign out. Now I think I’ll just say delete the edit profile button from here. Also the share profile, we don’t really need them, but what we need is delete account and sign up buttons. Now you might be asking why do we need the delete account button? Well, it is mandatory and if you don’t have it, Apple will reject your application because you have authentication. You’re storing user data. When this user wants to delete

[1:58:39] their account, you need to give them the access that permission. So here, I’ll go ahead and type my prompt. I’ll explain everything and then I’ll just be right back. Now, actually, instead of going into Codex and putting a prompt blindly, what I have done is something even better. So I went into this chat that we already had with a GPT that is about design. So I said I want you to give me a grid of three for setting screen. You can read my prompt but basically I say

[1:59:09] give me things like we have privacy policy link, terms of services, delete account, sign out and some of the other things that you would need in a social media application. Okay. So if you’re wondering why do we need privacy policy and terms of services? Well once again this is something that you must have. If you don’t link them then your application will be rejected. Also when you publish your app to the app store Apple will ask you to provide these

[1:59:40] links. So basically you need to you need to build a privacy policy terms of service and deploy them on a live URL. I’ll try to show you how to generate them and publish them on the internet so that you can actually use those links. Okay. So between these three options, I like the very first one. So I just had upscale the variation one. This is what I got. I’ll go ahead and copy and paste it under the design. You already know what I’m going to do next.

[2:00:12] So I’ll just say go ahead and build the settings screen. Let’s actually say settings screen reference just to be consistent with the rest of the names here. I’ll just say settings screen ref. And let’s say build me this exact UI. Yeah, I think for now I’ll just say build me this exact UI. I’m going to send my prompt and I’ll just be right

[2:00:43] back once this is done. So after around 4 minutes, this is what I got. And here I just said go ahead and delete this header part. We don’t really need it. Now this should be done in couple of seconds. And I think overall I’m happy with the end result. Like you can always improve the UI, but that’s not the goal of this tutorial as you already know. And one of the other things that it kind of failed like we don’t have native tabs anymore. So I think for this we need to

[2:01:13] just simply tell also bring back the native tabs. Let’s say remember we always want to use native tabs. Now while this is building I just want to mention that currently we are using AI in the very bad way. Like this is not this is not optimal. It shouldn’t really go from native tabs to the JavaScript tabs. For this, I should have already set up a file called cloud.md

[2:01:46] or agents.md. So here you can tell we already have these files. Now let’s talk about these files pretty quickly. In simple terms, they are just a readme file for AI agents. So here we have readme.md. This is for humans, right? This is for developers. But these are readme files for AI agents. There’s a difference between them which is something that I’ll get into in a second. But first, let’s just read what they are in the first place. So, both

[2:02:17] are plain markdown instruction files that get autoloaded into the AI’s context at the start of a session. They are, let me just clear this. They are where you put project conventions, architecture notes, something like always do this, never do that, these type of rules. So in our case, we could have just said always use native tabs, right? Never use anything else for the tabs. This is where you would put the instruction. Now the difference between

[2:02:47] them is that cloud.md is for cloud and agents.md for literally anything else. Okay, but I think cloud would still support this. All you need to do is adding all your instructions right here under the agents.m MD and under the cloud MD just go ahead and import it. Okay, so that’s all you need to do. And this is a convention by the way here I have explained it as well. Put your actual instructions in agents.md

[2:03:20] and make cloud to import that file. Okay, now I think we we know the difference. And here when I ask AI to implement the native tabs, I said we always want to use native tabs, right? And here it says I have updated it under the agents. MD. So if I go under the agents.md and search for native tabs, here it says always use export router native tabs. Okay. So once again, I’ll

[2:03:50] try to visualize it pretty quickly. When you start a new session with AI, you’re asking a question, right? and then you are getting a result. Let’s say you just say build me authentication and then it builds it. You say build me profile page and then you get the end result. But at the beginning there is agents.md that is automatically loaded to the context. This is what we explained. Okay. So I hope now we understand the agents.md file and what’s the difference between

[2:04:20] them. Now what I have done off camera is going into VS code and then I just said now go ahead and implement the account deletion. When we press this delete account button here it says you need to add the clerk secret sorry clerk secret key to the dashboard. This is what I have done. I just went into my project settings environment variables and then just get the clerk secret key and paste it right here. Now how do you get this value? Well, you can go into clerk expo

[2:04:50] documentation. So from here, let’s just find the environment variables. Just select your project and then you can also press the API keys by the way. So here you have the publishable key, but we need the secret key as well. So it is right here. Just go ahead and copy this value and paste it right here. So you can just say add and paste this value. It should be right here. Then save. This is

[2:05:22] exactly what I have done. I said I have added it. So I said that’s done. Go ahead and implement it. Now looks like this has been implemented. I’ll say delete the account. If I say cancel, nothing happens. But if I say delete, it should actually delete the account and sign me out. Let’s go ahead take a look at the dashboard. Okay. So previously we had two different users but now we have only one. All right. So I think with this I’m going to

[2:05:53] leave this section right here. In the next section we can build that privacy policy in terms of services. And again for this I have some pre-made prompts that I’ll share with you. But for now I think if you wanted to you can pause the video and improve the UI as much as you want. But I don’t want to waste any time. Um I’ll just go ahead and let’s close everything. and I’ll just commit my changes. So, let’s stage and get a commit message

[2:06:27] and I’ll sync this up. Okay. So, with this, I’ll see you in the next lesson. All right. Now, let’s say you build your application and it is time to get started with the legal pages. Like what you need to do is pretty simple and here I’ll just try to walk you through it. So, first off, let’s talk about some of the must-h have features that you should have. One of them was the delete account button, which is something that we have implemented. The other one is the Apple sign in option. Again, it is right here.

[2:06:58] This is basically something that you have to have if you included any other different social login options. So, in our case, we have Google. Then, Apple says you must have sign in with Apple option as well. Now, on top of privacy policy and terms of services, we also need to add a support URL. This is something that Apple will ask you when you go into the Apple dashboard. Okay. So, I’ll try to explain it in a little bit. Okay. So, with that in mind, now

[2:07:29] let’s go ahead and create the privacy policy, terms of services, and a support URL. And in the past for one of my past tutorials, I have built a landing page like this where we have some demo images that is looking pretty cool and we have like more details. And now I’ll just show you how you can generate these type of mockups in like less than 5 minutes. Okay, so with this in mind, on top of this, I’ll provide you a terms of

[2:07:59] services prompt. You can find this. just go ahead and copy it and we’ll go into Codex. Let me just create a new session now. Okay. So, this is something I’ll just delete. I don’t know why, but in the past, looks like I have it. So, I just deleted that. And here, I’ll paste this in. What this does is basically it says go ahead and read my entire codebase and depending on my project, create me a terms of services page.

[2:08:30] Right? And here I’ll say um like put everything under a folder called legal. Let’s actually create that. So I’ll say put it all under the legal folder and actually build me a landing page as well. Let’s say make sure it looks pretty good. Now, of course, this is not the best prompt, but I just want to see what it

[2:09:00] can give us in the first try, and then we can always follow up and add some references. Now, before I run this prompt, what I’d like to do is actually preparing these demo images. So, for this, there is a website called shots.so, which is completely free to get started with. They [snorts] have paid plan as well, but you don’t really need to pay just to create these images. Okay. So, head over to this site here. I’ll just say start over. This is what you’re

[2:09:30] going to see initially. From here, go ahead and select a mockup. In this case, I’ll just get iPhone 17, I believe. You can select anything really. I’ll just get this one. And then I’ll say, let me go under the frame. I’ll say there should be no background because here we would like to have a transparent background, right? like this doesn’t have any white background, red background, nothing. It should be transparent. And then for the images,

[2:10:02] for the images, you would like to open up your simulator and take a screenshot. Then I’ll just copy this. Let’s say copy to clipboard here. I’ll press Ctrl +V. Okay. So, I just pasted that. Now you can get this type of variation. But then you need the second image or even like three different images. Let me just try to kind of like log in because I’m going to get more screenshots here. I’ll say continue. And okay, so I

[2:10:35] just logged in. Let’s go under the explore screen and I’m going to take another screenshot. Again, I’ll copy this to clipboard. Let’s go and maybe create this one initially. So I’m going to paste this in. And what you would like to do is zooming in as much as possible. So you are basically deleting this extra space from the top and from the bottom. So go ahead and zoom in. Don’t make it this much, but just make sure that you know you get rid of these extra spaces as much as possible. So I’m

[2:11:08] going to go ahead zoom in. I think this is fine. And you also want to make sure that under the mockup you say there is no shadow. Okay, because if you have shadow like let me select one of them like I think it is not really that visible but there is some shadow right here and it’s not going to make it look like this if you have shadow like just trust me go ahead and he would like to select no shadow and then we can export this. So that’s the first variation.

[2:11:38] Let’s go and get one of these. I’ll just keep it simple and get the first one. Again, I’m zooming in as much as possible. I’m going to export this as well. And let’s go ahead get one of these. Yeah, I think I’ll just go with this one. Let me take a screenshot maybe from the messages. I’ll copy it to clipboard again. and I’ll paste this in. Let’s zoom in as

[2:12:10] much as possible. Okay. So, what we have just done here is something that you can implement in all of your future projects. Just visit this site and do the same thing that I’ve done. Now, I’m going to get these three images and I’ll just paste it into VS Code. Let’s actually go under the legal folder. I’m going to drag and drop and let’s just say like I’ll rename it. I’ll say demo one.

[2:12:42] Um I think this should be demo 3. Sorry, demo two and three. Now I will go into codex. So I had this prompt and I’ll just say in landing page use these images which are demo one, two, and three. Okay, so I’ll just run this and let’s

[2:13:13] see what we’re going to get back. All right, so this took around 17 minutes. GPT not only build it but also test it out on the browser. So here you can tell I have bunch of different files but the important one is the index.html. Just go ahead rightclick and then open this with the live server. If you cannot see this option then just head over to the extensions and just get the live server extension. Let me show you that pretty quickly. It’s going to be this one. Install it and then you should be

[2:13:44] able to see it. So right click, press this and here we go. This is the end result. And I think UI is way better than what I expected. And like we didn’t give any kind of reference at all. It has built it by itself. And notice how it is following the system design that we currently have. So it didn’t build something like in the red color or purple or really anything. But instead it like it is following the blue color theme that we have in the mobile

[2:14:14] application. Now if you wanted to you can of course as usual you can follow up and improve the design. I don’t want to waste any time but here you can tell we have the terms of services under the terms endpoint or URL I would say. Now here you can tell there are a bunch of different uh placeholder fields. That’s because AI cannot really guess what is the legal name of your business, you know, privacy policy URL and things

[2:14:44] like that because this is still not deployed. So these are some um placeholders that you would like to actually read and fix. But other than these, you don’t really need to change anything else. This is exactly what I have done when I was building my own mobile application. And I think like this is the old name. Um sorry, this is the old name. Previously it was called bulky AI but recently I have update the name but it is still under the old domain which is fine. So here I have a terms of services if you if you scroll

[2:15:16] to the bottom here you can tell like I just put the details about my business you know where I’m from things like that. And now it’s time to build the privacy policy. And for this again I have the prompt. You’ll just go ahead get this entire thing. Let’s paste this in. And now it should also build the privacy policy. Once this is done, I’ll just be right back. All right. So after some time, this has also been implemented. Here you can tell in the

[2:15:46] footer we have this link. Again, there are a bunch of different placeholders that you would like to read and update just before you publish your app to the app store. And then you would like to kind of like deploy this because currently this is running on your local machine. Now I’ll show you how to deploy it in a second. But first let’s go back to our list. Now we have built the privacy policy and terms of services. On top of this you also want to have a support URL because this is a field that Apple will ask you in the Apple

[2:16:18] dashboard when you want to deploy it. And this is going to be by the way under the Apple store connect. So we can actually visit that like app store connect. Sorry not Apple store. It should be app store connect. So this is something that I go into in detail in my school community but basically [snorts] in simple terms this is going to be the place where you will publish your app and they ask for a support URL. Now let’s go ahead and build it as well. I’ll just say also add

[2:16:50] a support page. Please keep it simple and super quick to build. like I don’t want to wait 10 minutes. So I’ll just say don’t test only build. Now usually I wouldn’t say this but this uh this is just because this is a tutorial I’ll say don’t test it just build so that we don’t waste any time. And now while this is building let’s go ahead and see cloudflare. This is where we will deploy our application. Sorry.

[2:17:23] This is where we will deploy our privacy policy and in general the landing page. So this is completely free to get started with. Just go ahead and sign up with your GitHub account. This is what I have done. And you will just go into VS Code under Codex cloud whatever you’re using. You will just say go ahead and deploy this to Cloudflare pages. Okay. And looks like support page has been completed. Let me double check. We have the support page here. The only thing

[2:17:54] that you need to update is the support email, which is something pretty easy to do. If you don’t know how to do it, just talk with Codex. It’ll um basically it’ll walk you through the entire process. Okay. So, with that said, what you would like to do for deployment, just going here and saying something like deploy the legal folder. Right? So, we have the legal folder. I’ll just say deploy this to Cloudflare

[2:18:24] pages. And Cloudflare has a tool called Wrangler, which is a CLI tool that allows you to publish your app without touching the browser. So from the terminal, it can use this tool and deploy your app. So I’ll just say use Wrangler and I already have the setup and login. If you don’t have, you can say go ahead and set this up for me or just tell me the process how I can set this up. Okay, so I’m

[2:18:56] going to run this and after I believe couple of minutes, this should be deployed. All right, so it was super quick. Here you can tell it took 1 minute and 20 seconds. And if you press the link here, you can tell our landing page is live. Now we can use this URL in the App Store Connect dashboard. So you can add this link as your privacy policy. This link for the terms of services and then /sup support. Let me just find it.

[2:19:29] This for the support URL. All right. So this is how you build the legal pages and deploy it to internet. The only thing left for you to do is filling filling in these placeholders. And literally that’s it. Now, with that, I think I’m going to leave this lesson right here. Let’s go ahead and visit VS Code. And as usual, we’re going to stage everything and commit our changes.

[2:20:02] All right, so this is where we left. Now, in this section, I’d like to talk about something called error tracking and monitoring, which sounds pretty complex, but it’s actually pretty easy to implement. And it’s really, really important to understand, especially if you’re building apps. Um, for us to be able to understand it, first we need to see the problem and then the solution. Then I’ll show you how to integrate it. So, let’s just see the problem first. Now, let’s say you built your own application, right? You deployed to App Store. everything is working in your own

[2:20:35] device and even in the simulator. But you cannot really just assume that this is going to work for every single one of your users. Now like it or don’t like it in real applications, there are always some kind of edge cases and like there will always be some problems that you need to fix. And now you need to be notified anytime your users are getting some errors. Now let’s take a look at the diagrams that I have prepared. So here you know like what happens when your users face some errors. Do you

[2:21:06] think they will send you an email or do you think they will delete the application and leave a one-star review with a really bad comment? Well 99% of the time this is what’s going to happen because they don’t even know who you are, right? So how would they know your email? So they’ll never try to send you an email explaining the issue. they’ll just delete the app, leave a one-star review, and they’ll say something like, I don’t know, like profile screen doesn’t work. I’m trying to see my profile image, but it is not even

[2:21:37] visible. I am deleting this app. Something like that. Right? So, that’s the problem that you need to kind of fix. Anytime there is an error, you need to get an email automatically seeing the error, the user, and how to fix it. So, that’s the beauty of Sentry. This is where Sentry comes in. We’re going to fix it by using Sentry, which is completely free to get started with. So, think of it like the watch tower of your application. Now, it is much more than

[2:22:08] just error tracking and monitoring, but here are some of the things that I can highlight. So, it’s going to catch the errors. It’s going to show us the structured logs, which is like console.log, but it is structured. That means you know it is searchable and it is persisted in the cloud. Then there are session replace which means that it’s going to take video recording anytime there is an error. So let’s say your user presses button and it has failed. So you will have the video recording of that in your sentry

[2:22:40] dashboard then it helps with performance such as traces and bottlenecks and as I have already mentioned you’re going to get realtime alerts. Now, by default, it’s going to work with your email, but if you wanted to, you can set this up with Slack, I believe, Discord, and even Microsoft Teams. Okay, so this is completely free to get started with. If you use the link in the description, you’re going to get $80 extra free credits, which is pretty generous. So, go ahead and sign up with

[2:23:11] that link, and then you’ll be in the Sentry dashboard. So, initially probably you will not have any projects. So just go ahead and say create a project. From here you can select your repository. Let’s say you don’t have a repository on GitHub which is completely fine. So this is optional right. Um then you would select your platform. In this case it’s going to be react native and then give it a project name like anything codex gram. This is what I’m going to leave. And then we’ll say create the project.

[2:23:42] Now I’m going to select my repository. And as soon as I select it, it is going to automatically detect that it is a React Native project. So here I just search for my repository. I can select it. And now it’s going to auto detect that this is a React Native project. I’ll leave everything as it is, but I’ll update the project name. I’ll say Codex Gramm even though you can call it anything really. Then you can also update the alert frequency. I’ll just leave everything as default. And here

[2:24:12] you can tell you can connect it to Slack, Discord, and Microsoft Teams. But for now, we’ll just leave it as email, which is pretty comfortable, especially if you’re just building it by yourself, like if you don’t have a team. Okay. So, with that said, now this is what you’re going to get, which is called Sentry Wizard. Now, you can run this automatically, sorry, by default, or you can just copy the instructions and paste it to AI. Now, if you wanted to again,

[2:24:43] you can just open up a new terminal, copy this entire thing, and run it. But I’ll just get the instructions. And I will paste it right here in my Codex session. So, let me go ahead and open up a new chat and maybe I’ll try to zoom in. I’ll paste this in. It explains everything and it even provides the DSN which is a connection string. Basically,

[2:25:15] it’ll allow us to connect to this specific project. Anytime you create a new project, by the way, you’ll get a different DSN. Okay. So, with this, I’ll go ahead and run it. This will set up Sentry and then hopefully we should be able to test this out. Now, while this is building it, there are a couple of different features of Sentry that I would recommend you to set up. Like the first one is going to be sentry logs. So, let’s just go ahead and say Sentry Logs React Native.

[2:25:48] I would visit the documentation and then I would just copy the entire page and ask, you know, Codex or Cloud, whatever you’re using. I’ll just say setup sentry logs for my project and it is actually pretty simple. It is just a one line change and like if you’re interested you can pause the video and read this documentation which they explain everything in detail but let me try to pretty quickly go over it. So to be able to understand what sentry logs is here I

[2:26:20] have prepared this comparison between console.log versus sentry logs. So here as you already know console.log lives on user’s device only right so it’s going to disappear when the application closes. It is plain text and it has no connection to errors like it is super simple for simple projects for debugging. But on the other side logs are sent to sentry servers which means it is saved on the cloud. It is

[2:26:51] persisted and searchable. That means you can you can literally query anything and to be able to query them there are some texts. So it is structured and it is linked to the traces errors and replays. Now here is how to use it. Like you can have different logs for debugging purposes you know just for information logs, warnings, errors and even something like fatal which is you know really really important and that is like

[2:27:22] kind of like a problem that needs to be fixed immediately. So to give you an example database connection failing is something fatal that you need to fix. Okay. So you can just pause the video and read this if you’re interested, which I would highly highly recommend. This is one of those things that people don’t really care, but as a app owner, I think this is one of the most important topics so that like you can get the email and immediately solve it before

[2:27:55] your application has really bad reviewing. Okay, so with this, let’s take a look at the VS code. I think this is still setting this up. Once it is done, I’ll just be right back. All right. So, within the 6 minutes, this has been installed and set it up correctly. Now, one thing that I want to mention is that Sentry is a native module. So, once you install it or once you set this up, you need to rebuild your application. So, as you already know, rebuilding means you

[2:28:27] need to just say MPX expo run iOS in your terminal, right? So just copy this, kill your application from your terminal which is this one and then rerun it and then your application will be live once again. Now with this I’m going to go ahead and paste this into actually not this one sorry I’m going to get this copy page um for sentry logs and I’ll just say go ahead and set up sentry logs. Let’s say

[2:28:58] this is dogs for sentry logs set up for me. All right. So, as you can tell, this has been set it up pretty quickly in less than 1 minute. Now, on top of this, what I have asked is this. I said, go ahead and create me a sentry test page under the settings and create some errors and logs when we press those buttons. So this is going to simulate real world issues so that I can see them in my sentry dashboard and explore. So after two minutes it was able to build

[2:29:30] this screen called Sentry test. And now we can press these buttons which is going to create bunch of different errors that kind of like simulate a real world implementation right or a real real world use case I would say. Now let’s go ahead and run some of them. like anytime you press them, they’re going to catch the errors, right? It’s going to throw an error and we’re going to catch it with this sentry. So here, I’ll just press couple of times. And now let’s go ahead select our project. In

[2:30:01] this case, it’s going to be this one. And go under the issues. Like here, you can tell 10 seconds ago, we got all these errors. And at the same time you’re going to get the email in real time so that you can see what is going on, what is broken and then you can jump into your codebase and fix them. Now if you press any of them you’re going to get the whole details about the error about the user like what’s the um you know what’s the operating system they’re using? What is the device that

[2:30:32] they have? So on and so forth. I’ll just leave you to explore it. You can scroll to the bottom and basically check almost every single detail. Then you can go under the explore and take a look at the logs as well. Here you can tell there are bunch of different logs that are generated. And now since in our project we only have one user currently you might not be able to see the importance of logs but just imagine you have like 1,000 users or like even 10,000 users

[2:31:02] then logs will be really really handy where you can basically debug everything about your project. So overall that’s the basics of Sentry. This is how we can set this up. And there’s also Sentry tracing. Let’s double check. I’ll just say Sentry Tracing React Native in the exact same way. You can go ahead and copy this page, paste it into Codex or Cloud, whatever, whatever you are using. And then it’s going to set this up. You can read what this is for mostly for performance. And like this is something

[2:31:35] that I have set it up in my actual application. Okay. So, I’ll just leave it as a challenge if you wanted to implement. And with this, I think we can commit our changes and leave this section right here. Well, actually, I just realized there is one more component that I’d like to show you, which is going to be a feedback element. So, let’s go ahead and search for Sentry React Native feedback. So, with this component, you can basically you can basically get feedback

[2:32:06] from your users. So I’m just going to go ahead press this one. So like this is what you will see what your users will get where they can add their full name, email, and you know the feature that they would request. So I’m going to go ahead copy this entire page and I’ll just say under the settings screen, add a nice feedback button with sentry.

[2:32:37] Once this is done, I’ll just be right back. So, it took around 2 minutes and here we go. Now, if you press this button, we got the component. Let’s go ahead and add a, you know, a suggestion or a feedback. I’ll just give it my name. Let’s say this is my email. I think I need to copy it like this. Let’s just say, “Hey, please fix the

[2:33:08] profile screen.” Now, in your sentry dashboard, if you visit issues and user feedback, you’re going to see that we got that feedback, right? So, we have the username, the detail, and if you press that, you’ll be able to see everything else. And if you cannot really find it at the time that you’re watching this video, you can just go to the search bar and search for the user feedback. Just press it and it’s

[2:33:39] going to take you to this screen. All right. So overall, that’s it for the Sentry integration. There is one more thing that I want to do. When we press these buttons, let’s actually go ahead and link them to the actual URL. Right? So I’m going to say when we press privacy policy in terms of services link it to the actual deployed let’s say URLs. All right. So within the next 1 minute

[2:34:10] this has been all right. So in 1 minute it’s been implemented. Let’s go ahead and press this. As you can tell it is taking us to the actual URL. Now, instead of opening opening this up in Safari, I’ll just say, can you open this up within the app? Like a sheet would come from the bottom and we would see the website. So, I’ll just say So, that was a super simple fix. As you can tell, when you press now, it just opens up within the app. Same for the terms of services. Okay, so I think that’s it for

[2:34:43] the entire project or at least for this section. Let’s go ahead and commit everything. I’ll stage everything. Let’s get a commit message and then we’re going to commit this. So this is my commit message. I’ll commit and let’s say sync this up. All right. So that’s pretty much the entire application that we have built. So from here on out, all you need to do is just going and talking with your AI agents so that they can improve

[2:35:13] the UI design. I’m not going to try to do it even though I have tried to like off camera just make the homepage look a little bit more cleaner. Here’s my prompt. But yeah, as I said, at this point you would like to just have a couple of different follow-ups. I don’t know, maybe generate more design references and then ask them to kind of like implement it until you like the end result. So, with all that said, I think I’m going to leave this tutorial right here. I hope you enjoyed it and learned

[2:35:43] something new from it. If so, don’t forget to like and subscribe.