O iPhone Duo precisa de apps. Claude pode criá-los.

Ver no idioma original →

Autoria: Riley Brown · 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: The iPhone Duo Needs Apps. Claude Can Build Them. · Canal: Riley Brown · 22:58 · Assistir no YouTube

Tópicos: Claude Code, Engenharia de software com IA, Privacidade e proteção de dados

Resumo

Riley Brown demonstra como criou um app de quadros com stickers para o iPhone Duo usando Opus 5.5 no Claude Code, sem escrever código manualmente. Ele configura o ambiente com um Mac, Xcode e o simulador do iPhone Duo, e começa com um protótipo simples em Swift. O app permite buscar imagens, transformá-las em stickers e organizá-las em quadros; depois, Convex é integrado para armazenar dados na nuvem e compartilhar quadros com atualizações em tempo real. Por fim, ele refina a interface, testa o app e anuncia que publicará o código em um repo público.

Pontos-chave

• O fluxo de criação começa com a instalação do Claude, do Xcode e da versão do simulador necessária para testar apps no iPhone Duo.
• Antes de construir o app completo, o autor pede ao Claude Code que crie e execute um app básico em Swift para confirmar que o simulador está funcionando.
• O protótipo combina um quadro inspirado no Excalidraw com busca de imagens e criação de stickers com remoção de fundo.
• O app usa SER API para buscar imagens e remove.bg para remover fundos.
• Inicialmente, os dados são armazenados localmente; depois, o autor integra Convex para salvar os quadros na nuvem.
• Com Convex, o app pode criar links compartilháveis e refletir alterações em tempo real para quem visualiza o quadro.
• O autor usa novas instruções no Claude Code para aprimorar a interface, adicionar animação e permitir buscar stickers já criados.
• Ao final, ele pede a criação de um repo público chamado native board, com instruções de configuração e sem informações sensíveis.

Capítulos

Início	Capítulo	Resumo
00:00	Preparação do ambiente	O vídeo apresenta o objetivo de criar um app para o iPhone Duo e mostra os programas e equipamentos necessários.
03:37	Ideia e protótipo inicial	O autor define a ideia de um quadro com stickers, cria um app básico em Swift e pede ao Claude Code que construa o protótipo.
10:55	Integração com Convex e compartilhamento	O autor explica a integração com Convex para armazenar os dados na nuvem e compartilhar quadros com atualizações em tempo real.
16:41	Testes e refinamento da interface	O autor solicita melhorias visuais, animação para os stickers e busca entre as imagens já criadas.
20:56	Publicação do app e ferramentas usadas	O autor demonstra o app em diferentes orientações, anuncia a publicação do código em um repo público e resume as ferramentas utilizadas.

Citações

Por favor, crie um app básico de Hello World. Compile e execute no simulador. — 05:43

Crie um app feito para o iPhone Duo. — 06:45

Preciso que você transforme isso em um banco de dados em tempo real. — 12:58

Crie um novo repo público. Certifique-se de que nenhuma informação sensível seja exposta. — 21:26

Conceitos e entidades

• iPhone Duo (modelo): Dispositivo da Apple apresentado no vídeo como alvo do app e do simulador usado nos testes.
• Opus 5.5 (modelo): Modelo usado para gerar e refinar o código do app durante a demonstração.
• Claude Code (ferramenta): Ferramenta usada para gerar o código, executar o app e implementar mudanças solicitadas por prompts.
• Xcode (ferramenta): Ferramenta da Apple instalada para acessar o simulador e testar o app.
• Convex (ferramenta): Serviço de backend usado para armazenar dados na nuvem e habilitar compartilhamento e atualizações em tempo real.
• SER API (ferramenta): API usada no app para buscar imagens na internet.
• remove.bg (ferramenta): Serviço usado para remover o fundo das imagens transformadas em stickers.
• Swift (conceito): Linguagem nativa para iOS mencionada como base para construir o app.
• Excalidraw (ferramenta): Referência visual para o quadro de desenho e organização de ideias do app.
• Riley Brown (pessoa): Criador do vídeo, que demonstra a construção e os testes do app.

Tradução completa (pt-BR)

00:00 Hoje vamos usar Opus 5.5 para criar um app para iOS, mas não um app comum para iOS. Vamos criar um app para o iPhone Duo. Este é o novíssimo dispositivo da Apple que acabou de ser anunciado. E, sempre que a Apple lança um novo dispositivo, algumas pessoas criam os primeiros apps incríveis. Agora, você não precisa saber programar para criar um ótimo app para iPhone. Especialmente porque a Anthropic acabou de lançar o melhor modelo de programação do mundo que é realmente acessível. Hoje vou criar um app para iPhone Duo

00:31 do zero com Claude Opus 5.5 dentro do app Claude. Mesmo que você nunca tenha escrito uma única linha de código na vida, pode criar um app de alta qualidade com Claude se seguir estes quatro passos. O primeiro passo para criar um app para iPhone Duo é baixar tudo o que você precisa para fazê-lo funcionar. E, se você estiver me acompanhando para criar um app para iPhone Duo, aqui estão as quatro coisas de que vai precisar. A primeira é hardware. As outras três são programas que você pode baixar no computador. A primeira coisa de que você

01:01 vai precisar é de um Mac. Estou usando um MacBook Pro M4, mas tenho quase certeza de que qualquer MacBook mais recente, do M1 em diante, vai funcionar muito bem. Depois, para escrever todo o código e fazer toda a construção, vamos usar o app Claude. Este é apenas o app para computador que tenho no meu computador. Você pode baixar esse app. Basta acessar o Google e digitar “baixar cla desktop”; é muito fácil encontrá-lo aqui e

01:31 você pode baixá-lo para MacOSS. O próximo app de que você vai precisar é o Xcode, que vai nos permitir testá-lo em um simulador para o iPhone Duo. Este é um simulador do iPhone Duo, e vamos usar o claw para gerar o código. Vamos usar o simulador para testar, e podemos até girar o Duo. Podemos abrir o Duo e abrir um app que criei ontem, que é um clone do Muse. E é por isso que

02:03 precisamos de um simulador. Para obter o simulador, você precisa instalar o Xcode. Então, acesse a Apple App Store no seu computador, pesquise Xcode e baixe-o para o computador. Depois de baixar o Xcode, vá até aqui no Claude e navegue até esta aba, que é o Claude Code. Dentro do Claude Code, você vai executar este prompt. Você vai dizer: “Por favor, verifique se o simulador está funcionando. Quero poder

02:35 criar um app, executar o código e depois testá-lo no simulador. Meu principal objetivo é criar um app para iPhone Duo e executá-lo no simulador. Verifique se temos a versão 271 beta. Ela adiciona o simulador do Duo. Foi exatamente assim que configurei tudo originalmente. E parte do simulador é algo chamado devicehub, que tem todos os diferentes dispositivos. Aqui temos um iPhone 17 Pro. E aqui está o simulador do Duo. E você precisa da versão 27.1

03:06 para ter o Duo. A quarta coisa é que estou usando Convex como banco de dados. Vou falar um pouco mais sobre isso depois. Na verdade, você não precisa disso para começar a criar o app. Isso serve caso queira armazenar seus dados em algum lugar para, em teoria, poder criar no futuro um app web que compartilhe o mesmo banco de dados. Então, é só disso que você precisa para começar a criar: um computador Mac com Claude. Vamos usar o Claude Code, e você precisa ter o Xcode baixado no computador. Agora está tudo pronto para começar a criar seu app. Então, o

03:37 segundo passo para criar um app para iPhone Duo é ter uma ideia e criar um protótipo. Esta é a minha ideia para o app de iPhone Duo. Pode parecer um app meio de nicho, mas acompanhe meu raciocínio. Vi isto no Twitter. Esta pessoa está usando o lado direito da tela, onde tem acesso a adesivos, e, no lado esquerdo da tela, tem este pequeno diário. Minha ideia para um app seria semelhante ao meu app de computador, no sentido de que meu app de computador me permite pesquisar

04:09 qualquer coisa na internet. Digamos que eu precisasse de uma imagem do iPhone Duo. Posso pesquisá-la bem rápido. Posso clicar nela, remover o fundo, copiá-la e colá-la no Excaladraw. Então, o que quero poder fazer é ter um gerador de adesivos ou imagens à direita e o Excaladraw à esquerda. Quero poder colocá-los em tela cheia e alternar entre os dois, mas quero que estejam no mesmo app. E quero

04:40 poder gerar adesivos de qualquer pessoa, certo? Quero poder procurar Sam Alman e ter um adesivo dele. E quero poder gerá-lo e criar um adesivo para arrastá-lo para o quadro e depois adicionar algum contexto ao redor, criando um quadro que explique melhor minhas ideias. Certo, agora que você entendeu minha ideia, acho que está na hora de criar nosso protótipo. Então, de novo, não vamos usar o Claude como na versão normal de chat. Vamos usar o Claude Code. Então,

05:12 você pode vir até aqui, clicar em Claude Code e pressionar commandN. Você pode ver a interface principal do Claude Code. A primeira coisa que sempre faço é criar uma nova pasta para este projeto no computador. Vou até aqui embaixo, onde diz agent native landing. Não vamos trabalhar nessa pasta. Vamos abrir uma pasta nova, e vou salvar a pasta onde escreveremos todo esse código. Vamos colocá-la na

05:43 pasta de documentos. Vou clicar em documentos e selecionar abrir. Depois, vou sempre começar com este prompt: “Vamos criar um app para iPhone Duo em Swift. Por favor, faça um app básico de Hello World. Compile-o e depois execute-o no simulador. Logo depois, vamos criar um app completo. Só quero deixar tudo configurado, funcionando e em execução.” Swift é a linguagem nativa do iOS. Basicamente, o que estamos criando é um app, um app simples

06:14 que só diz Hello World. O que quero fazer é estabelecer uma conexão e verificar se tudo está funcionando, para conseguirmos executar o app neste simulador aqui. Isso deve levar apenas alguns minutos. Depois, vamos usar nosso primeiro prompt para criar o app de verdade. Certo, diz que o Hello World está sendo executado no simulador do iPhone. Vou trazê-lo de volta para cá. Vamos mudar para o iPhone Duo. E aí está: um app bem básico de Hello World em execução no simulador do iPhone Duo

06:45 Certo, agora é hora do nosso primeiro prompt para criar o app que queremos. Este é o app que quero criar: “Crie um app feito para iPhone Duo.” Vou acrescentar uma coisa: “Pesquise na internet e descubra como criar os melhores apps para o novo iPhone Duo.” Ele deve ter uma boa aparência na horizontal e permitir que eu crie documentos legais com adesivos feitos de imagens reais. O lado direito do app deve ser baseado em adesivos. Estou fornecendo a ele essas duas

07:16 imagens. Uma é a captura de tela do app que vi no Twitter, e a outra é a imagem que acabei de gerar com IA. Estamos usando Opus 5.5. Para o primeiro prompt, vamos usar high. Assim, ele usará um pouco mais de tokens e poderá custar um pouco mais, mas com Opus 5.5 ainda não é tão caro. O app deve ser como o Excaladraw à esquerda e ter geração de adesivos à direita. Estou apenas dando algumas informações básicas sobre o app e como quero que ele se comporte.

07:47 Agora, o que vou dizer é que tudo deve ser armazenado perfeitamente em um banco de dados local. Vamos adicionar o Convex. Então, mais tarde, vamos transformar isso em um banco de dados armazenado na nuvem, mas vamos começar com um banco de dados local. Todo app de iPhone que você criar pode ter um banco de dados integrado ao iPhone. O problema é que, se você quiser criar, por exemplo, um plano para equipes, mais ninguém poderá ver esses dados. Só você. Então, eventualmente, vamos mover isso para a nuvem. Mas, para o protótipo, vamos começar com o banco de dados local. Então, sabe como vamos pesquisar de fato

08:19 imagens que podem ser encontradas na internet? Na verdade, precisamos de uma API para isso. Então, vamos usar a API do mecanismo de busca do Google. E vamos usar a SerpAPI para isso. Vamos obter uma chave de API dela, que nos permitirá gerar imagens. E, para remover o fundo, vamos usar o remove.bg. Vou criar uma conta aqui. Acho que pago US$ 5 ou US$ 10 por mês por esta, para gerar imagens ilimitadas. E também vou obter minha chave de API por meio dela. E agora vamos

08:49 voltar ao Claude e vou dizer que, para a remoção de imagens ou para a busca de imagens e a remoção do fundo, estamos usando a SerpAPI e o remove.bg. Vou colar as chaves de API abaixo. Isso geralmente não é uma boa prática, mas faço mesmo assim. E vou executar isso. Depois vou colar aqui. Não quero fazer isso enquanto estou gravando porque quero manter minhas chaves privadas. Certo, não vou

09:21 mentir: isso demorou uma eternidade. Acho que levou uns 37 minutos para terminar. Mas, como vocês podem ver aqui, agora temos este app de scrapbook no nosso dispositivo. Aqui está fechado. Aqui está aberto. Vamos dar uma olhada. Certo, aqui está nosso app. Este é um novo documento. Posso selecionar isto aqui. Vou escrever apenas Claude 5.5. Certo, é a mesma fonte.

09:52 E, se eu tocar duas vezes na tela aqui, posso escrever Claude Opus 5.5. E consigo arrastar isso? Consigo arrastar para lá e para cá. Muito legal. Agora, quero poder pesquisar alguma coisa. Posso digitar Dario Amodei? Agora podemos pesquisar. Vamos transformá-lo em um adesivo. Espero que funcione. Meu Deus, isso é incrível. Olhem só. Acabamos de gerar este app com um único

10:23 prompt. E acredito que podemos colocá-lo em tela cheia aqui. Aqui está em tela cheia. Olhem só. Criamos este app Excalidraw. Podemos criar adesivos. Posso colocá-lo em tela cheia. Uau, ficou muito bom. Um logo do Claude. E agora posso transformá-lo em um adesivo. Pronto. Agora posso abrir o quadro e arrastá-lo para dentro. Nossa, criamos isso de primeira. Levou 37 minutos para ser gerado, mas criamos este app para o iPhone Duo de primeira. E

10:55 mais uma vez, todos esses dados estão armazenados localmente no app neste momento. O que realmente queremos é que esses dados sejam armazenados na nuvem para que, em teoria, possamos compartilhá-los com outras pessoas. Podemos torná-los compartilháveis. Então, queremos armazená-los de fato em um banco de dados na nuvem. E a maneira mais fácil de fazer isso com o Claude é usar o Convex, o que me leva ao patrocinador do vídeo de hoje. Todo app de verdade precisa de um lugar para armazenar seus dados e mantê-los atualizados para todos que o usam. O Convex é o backend que uso para isso,

11:25 e foi desenvolvido para a maneira como criamos apps hoje em dia, com agents de IA. Há um plugin oficial do Convex para o Claude Code. Instale-o uma vez e, sempre que você pedir ao Claude para criar algo, ele poderá configurar um banco de dados de verdade, funções de backend e armazenamento de arquivos para você. E tudo acontece em tempo real. Quando os dados mudam, todas as telas que usam o app são atualizadas instantaneamente. Sem atualizar a página, sem código extra. Normalmente, seu agent teria que criar a sincronização, o armazenamento em cache e todas as regras que mantêm seus dados consistentes. Com o

11:57 Convex, isso já está pronto, então seu agent pode se concentrar no app em si. O plugin também permite que seu agent veja a estrutura do app, os logs e as funções de backend. Assim, quando algo dá errado, ele consegue ver o motivo e corrigir. E, como seus dados ficam no Convex, e não dentro de um único app, você pode começar hoje com um app de iPhone e adicionar depois uma versão para web ou desktop, tudo lendo do mesmo banco de dados. Criar uma conta no Convex é grátis. Peça ao seu agent para criar seu próximo app com o Convex. O link está na

12:27 descrição. Certo, de volta ao app. Para criar um banco de dados — e, a propósito, esse banco de dados será em tempo real —, se você tiver uma conta de equipe no nosso app e eu mover coisas pelo quadro, isso acontecerá em tempo real. O Convex tem um banco de dados em tempo real que atualiza tudo muito rápido. Isso vai ser muito legal. Acesse convex.dev e crie uma conta. Depois, vá até o Claude Code. Vá até a seção de personalização. Vá até os plugins. Depois, encontre o plugin do Convex. E você pode

12:58 ver que deve aparecer “Convex by Convex”. Este é um design em pacote. Vamos clicar nele e garantir que foi baixado. Agora, vou descer até aqui e ditar este prompt rapidinho. Ei, Claude Code, preciso que você transforme isso em um banco de dados em tempo real, porque depois vamos adicionar um plano para equipes. Quero que todos esses dados sejam armazenados em um banco de dados em tempo real. Quero que fique perfeito e que eu possa tornar esses quadros compartilháveis e enviar um link para alguém com o código ou com um link para que essa pessoa possa ver meus quadros e também as imagens.

13:30 Então, quero que eles possam ser compartilhados e vistos pelos meus amigos e no meu celular. Por favor, configure o banco de dados do Convex da maneira que achar necessária. Faça isso perfeitamente, e nosso app vai ficar incrível quando você terminar. Agora podemos iniciar isso. Vou comer alguma coisa e voltar; espero que o banco de dados esteja totalmente configurado. Certo, só para mostrar a vocês: estou impressionado com isso. Olhem só. Já faz 57 minutos. Está funcionando. E

14:02 acabei de dizer que estou testando, tudo bem. Mal posso esperar para mostrar o que ele fez. Está funcionando há tanto tempo. Então vou dizer: “Por favor, se apresse”. Está tudo bem. Está corrigindo coisinhas que eu nem pedi para corrigir, mas funciona. Então, é só esperar até terminar e vou mostrar para vocês. Finalmente terminou de executar. Olhem o app que criamos aqui. Vejam só. Podemos criar um novo documento, como antes. E a sensação é a mesma, certo? Poderíamos escrever, por exemplo,

14:33 novos recursos da OpenAI, certo? Digamos que eu estivesse fazendo um diagrama do Excalidraw. Posso fixar isso de lado e depois tocar duas vezes — o que ainda funciona — e digitar Codex. Depois, podemos digitar “logo do Codex” e pesquisar, transformá-lo em um adesivo e arrastá-lo direto para dentro. Isso é bem legal. Logo do Codex, logo do ChatGPT; transforma tudo em adesivo na hora. Pronto.

15:06 Depois, podemos fazer o mesmo com Sam Altman. Transformá-lo em um adesivo. Pronto. E aí está. A parte mais legal de tudo isso é que, agora que integramos um banco de dados com o Convex, podemos criar um link de compartilhamento. Posso criar um link de compartilhamento aqui, copiá-lo e enviar para um amigo. Certo? Estamos em um iPhone. Deveria aparecer uma opção. Não tenho contatos no simulador, mas, se estivéssemos usando meu iPhone Duo de verdade, eu

15:36 veria minhas mensagens de texto recentes aqui. E eu poderia abrir o Chrome e olhar isto. Posso colar este link, e ele nos deu um link para o site do Convex. Então é aí que todos eles estão. E olhe só. Está funcionando. O recurso de compartilhamento funciona. E adivinhe? Podemos ver as atualizações em tempo real. Então, se eu editar aqui, posso escrever ChatGPT. Olhe só. Assim que clico para o lado, aparece. Então, adicione um novo. ChatGPT. Nós

16:10 temos uma imagem do GPT. Assim que eu clicar para o lado, ela vai aparecer bem aqui. Veja só. Bum. Bem ali. Imagem do GPT 2. E posso transformar isso em um adesivo e colá-lo aqui. E olhe só. Posso movê-lo. Isso deveria ser somente para visualização. É mesmo. Mas posso compartilhar com outras pessoas, o que é muito legal. Certo. Então, obviamente, baixamos tudo de que precisávamos. Criamos um protótipo com um prompt e depois adicionamos outro prompt, que

16:41 adiciona um banco de dados e links de compartilhamento, e funcionou perfeitamente. Ele levou 50 minutos para acertar isso. Mas acabou funcionando. Agora, a etapa final para criar nosso app é testá-lo, iterar e deixá-lo perfeito. E é assim que vou fazer isso. Vou abrir o simulador aqui. Agora temos o app. Quero fazer algumas mudanças no design, porque não gosto muito da aparência. Vou abrir o Claude Code aqui e listar algumas coisas que quero

17:13 mudar. Primeiro, você pode, por favor, melhorar bastante a página principal que aparece aqui? Mantenha a criatividade, mas eu simplesmente não… Isso parece muito cafona e sem graça. Então, otimize o frontend deste site. Quando eu selecionar um personagem ou qualquer imagem para transformar em adesivo, quero que haja uma animaçãozinha no lado direito da tela, que pegue a imagem antes de ela virar um adesivo e a anime até ela ficar no formato de adesivo. Acho que seria uma coisinha divertida de ter. Além disso,

17:45 remova o textinho no topo que diz “Little things, very you”. Não gosto nem um pouco disso. E há botões demais aqui em cima. Se puder reduzir a quantidade de botões — talvez a gente só precise de um botão de tela cheia —, encontre um jeito de deixá-los um pouco mais compactos. E, sim, renomeie o app para Native Board. E, na barra de pesquisa, enquanto eu digito para procurar uma imagem de alguém, ela deve me mostrar os nomes dos adesivos. Então, estes

18:17 adesivos devem ter nomes associados a eles. E o nome associado é o nome que eu pesquisei, certo? Então, se eu gerar uma imagem do Sam Altman, quero que o nome dessa imagem seja salvo como o termo de pesquisa que usei originalmente. É assim que ela deve ser salva no banco de dados. Enquanto digito, os adesivos devem ser filtrados pelo que escrevi. Então, se eu digitar SAM, posso pressionar Enter para gerar a imagem, ou posso adicionar facilmente ao quadro as imagens que já gerei, sabe? Assim, não preciso ficar gerando

18:48 as mesmas imagens várias vezes se costumo usar os mesmos adesivos. E posso simplesmente pesquisar adesivos. Sabe o que quero dizer? Certo, são quatro grandes mudanças. Vamos mandar ver e acho que vai ficar bom. Acho que vamos ter nosso app pronto. Quer dizer, está muito, muito bom. Nem sei o que mais eu acrescentaria. Certo, olha só! Terminamos. Vamos criar um novo quadro. Podemos ver nossos adesivos aqui. Note que há menos abas no topo, exatamente o que queríamos. E podemos colocar em tela cheia. Se digitarmos Sam, ele aparece

19:21 na tela. Então, eu poderia escrever “como os LLMs funcionam” e digitar Satya Nadella. Não faço ideia de por que estou procurando Satya Nadella. Ele aparece. Ah, esqueci da animação. Espera, deveria haver uma animação quando selecionamos Satya. Espera, então podemos transformá-lo em um adesivo. Ah, aí está. Vamos lá. Isso é meio legal. Bum. Novos recursos do Copilot. Agora temos o Copilot, ou podemos

19:52 digitar Copilot. Ah, e note que, enquanto digito “co” — digitei “co” —, ChatGPT, Claude e Codex aparecem. Então, isso não só me permite pesquisar no Google Imagens, como também filtra minhas imagens existentes. Posso digitar Copilot. Bum. Aí está. E, quando digitamos “co”,

20:26 estes adesivos aparecem. Isso é muito legal. Está ficando bom. E eu poderia digitar “nova IA da Microsoft”. Depois podemos compartilhar este link de compartilhamento. Copiar este link. E posso colá-lo em um navegador. E pronto. Funciona em tempo real. Vamos fechar isto. Olhe só. Podemos adicionar outro Satya. Está acontecendo em tempo real porque estamos usando o Convex. Isso é incrível. É muito divertido. E pronto. É assim que

20:56 você cria um app no iPhone Duo. Certo. Agora, quando está na vertical, ele fica na vertical. Isso é bem legal. E podemos fechar… Vamos fechar nosso celular. Girá-lo. Pronto. É assim que se cria um app com o novo iPhone Duo. E vou tornar este app open source. Então, posso simplesmente dizer: “Ei, por favor, crie um novo repo público. Certifique-se de que nenhuma informação confidencial seja exposta nesse processo.” Ele deve ser público. Deve

21:26 se chamar Native Board. Deve ficar no GitHub do Riley Brown. Coloque-o lá, por favor. E inclua instruções de como configurar absolutamente tudo. Parta do princípio de que a pessoa nem sequer baixou o Xcode. Quero que ela descubra como pedir facilmente para o Claude configurar tudo. Então, quando você assistir a este vídeo, o código estará totalmente open source e disponível no GitHub. E pronto. Foi isso que fizemos hoje. Usamos o Opus 5.5, que sinceramente acredito ser o melhor

21:57 modelo do momento, para frontend e backend, provavelmente. Usamos o simulador do Xcode, e é assim que estamos executando isto aqui. É assim que podemos girá-lo. Podemos abri-lo etc. Usamos o Serper, a API — ou a SER API — para gerar as imagens. Também usamos o remove.bg, que nos permite remover o fundo. E o Opus descobriu como adicionar aquela borda branca em volta para criar o efeito de adesivo. Também

22:28 usamos o Convex para permitir o compartilhamento e armazenar os dados no banco de dados em tempo real. Depois, testamos e iteramos com alguns prompts. Foram cinco prompts no total e, então, publiquei o código como open source. Você encontra o link para o GitHub na descrição se quiser clonar este app. Fique à vontade. Foi muito divertido. Enfim, muito obrigado por assistir. Digam o que eu deveria criar quando finalmente receber meu iPhone Duo. Acho que só vou recebê-lo daqui a umas três semanas, mas quero fazer mais

22:58 experimentos. Digam o que eu deveria criar com ele.

Transcrição original

[00:00] Today we’re using Opus 5.5 to build an iOS app, but not an ordinary iOS app. We’re going to build an app for the iPhone Duo. This is the brand new Apple device that was just announced. And every time Apple releases a new device, a few people build the first great apps. And now you don’t need to know how to code to build a great iPhone app. Especially because Anthropic just released the best coding model in the world that’s actually affordable. Today I’m going to build an iPhone Duo app

[00:31] from scratch with Claude Opus 5.5 inside the Claude app. Even if you’ve never written a single line of code in your entire life, you can build a highquality app with Claude if you follow these four steps. The first step in building an iPhone Duo app is downloading everything you need to make it work. And if you’re following along with me to build an iPhone Duo app, here are the four things that you’re going to need. The first one is hardware. The next three are software programs that you can download on your computer. The first thing that you’re

[01:01] going to need is a Mac. I’m using a MacBook Pro M4, but I’m pretty sure any newer MacBook M1 and beyond will work just fine. And then to write all of the code and do all of the building, we’re going to be using the Claude app. And this is just the desktop app that I have on my computer. You can download this app. All you need to do is go to Google and type in download cla desktop and you can very easily find it right here and

[01:31] you can download it for MacOSS. The next app that you’re going to need is you’re going to need Xcode and this is going to allow us to test it on a simulator for the iPhone Duo. So this is an iPhone Duo simulator and we’re going to be using claw to generate the code. We’re going to be using the simulator to test and we can even rotate the Duo. We can open the Duo and we can open an app that I created yesterday which is a clone of Muse. And so this is why we

[02:03] need simulator. And so in order to get the simulator, you need to get Xcode. So you need to go to the Apple App Store on your computer and type in Xcode and you need to download it to your computer. And then once you have Xcode downloaded on your computer, you need to go up here on Claude and you need to navigate to this tab right here, which is Claude Code. And then inside Claude Code, you’re going to run this prompt. You’re going to say, “Please make sure we have simulator working. I want to be able to

[02:35] build an app, run the code, then let me test it on simulator. My main goal is to make an iPhone Duo app and run it in the simulator. Please make sure we have version 271 beta. It adds the Duo simulator. This is exactly how I set it up originally. And part of the simulator is something called devicehub that has all of the different devices. Here we have an iPhone 17 Pro. And here is the simulator for the Duo. And you need 27.1

[03:06] to get the Duo. The fourth thing is I’m using Convex for a database. And I’ll talk a little bit more about that later. This one you don’t actually need to get started building the app. This one is if you want your data stored somewhere so that you could in theory create a web app in the future that shares the same database. So that’s all you need to start building a Mac computer with Claude. We’re using Claude code and then you need Xcode downloaded on your computer and you’re now ready to get started building your app. So, the

[03:37] second step in building an iPhone Duo app is coming up with an idea and creating a prototype. So, here’s my idea for my iPhone Duo app. And this may seem like kind of a niche app, but bear with me here. I saw this on Twitter. This person is using the right side of their screen where they have access to stickers and on the left side of the screen, they have this little journal. And so my idea for an app will be similar to my desktop app in the sense that my desktop app allows me to search

[04:09] the internet for anything. Let’s say I needed an iPhone Duo image. I can search it really quickly. I can click on this and then I can remove the background and then I can copy it and paste it to Excaladraw. So, what I want to be able to do is have a sticker or image generator on the right and then Excaladraw on the left. And I want to be able to full screen them and go back and forth between these two except I want them in to be in one app. And I want to

[04:40] be able to generate stickers of anyone, right? I want to be able to look up Sam Alman and have a sticker for him. and I want to be able to generate it and create a sticker so that I can drag it over to the board and then add some context around it to create a board to better explain my ideas. Okay, so now that you understand my idea, I think it’s time for us to build our prototype. So again, we’re not going to be using Claude like the normal chat version. We’re going to be using Claude code. So

[05:12] you can come up here, click on Claude Code, and what we’re going to be doing is we’re just going to press commandN. and you can see the main interface of Claude Code. And so the first thing that I always do is I’m going to create a new folder for this project and we’re going to put it on our computer. So I’m going to come down here where it says agent native landing. We’re not going to be working out of this folder. We’re going to open up a new folder and I’m going to go ahead and I’m just going to store the folder where we’re writing all of this code. We are going to put it in the

[05:43] documents folder. So I’m going to click on documents and we’re going to hit open. Then what I’m going to do is I’m going to always start off with this prompt. We’re about to build an iPhone Duo app in Swift. Please make a basic Hello World app. Build it and then run it in the simulator. We’re going to build a full app right after that. I just want to get everything up and running and working. So Swift is the native language for iOS. Basically, what we’re building is an app, a plain app

[06:14] that just says hello world. What I want to do is establish in a connection. Make sure that everything’s working so that we can get the app running with this simulator right here. That should only take a couple of minutes. Then we’re going to use our first prompt to build the actual app that we’re building. Okay, so it says the Hello World is running on the iPhone simulator. I’m going to go ahead and move this back over. We’ll switch to the iPhone Duo. And there you go. a very basic Hello World app running on the iPhone Duo

[06:45] simulator. Okay, so now it’s time for our first prompt in building the actual app that we want to create. So here’s the app that I want to create. Build an app made for iPhone Duo. One thing I’m going to add here is search the internet and figure out how to design the best apps with the new iPhone Duo. And then it should be made to look good horizontally and it should be an app that allows me to make cool documents with stickers with real images. The right side of the app should be based on stickers. I’m giving it those two

[07:16] images. One of the screenshot of the app that I saw on Twitter and then one of the image that I just generated with AI. And we are using Opus 5.5. And for the first prompt, we are going to use high. So, it will use a little bit more tokens and might be slightly more expensive, but it’s still not that expensive with Opus 5.5. And the app should be like Excaladraw on the left and a sticker generation on the right. And I’m just giving some very basic information about the app and how I want it to behave.

[07:47] Now, what I’m going to say is everything should be stored perfectly inside a local database. We are going to add convex. So, we’re going to make this a database stored in the cloud later, but we’re starting off with a local database. So, every iPhone app that you create can have an a database that’s built into the iPhone. The problem is if you want to create like a team plan, no one else can see that data. It’s just you. And so, eventually we’re going to move this to the cloud. But for the prototype, we’re going to start off with the local database. So, you know how we’re actually going to be searching

[08:19] images that can be found on the internet? We actually need an API for this. And so for this, we’re going to be using the Google search engine API. And we’re going to be using SER API for this. And we’re we’re going to get an API key from this, which will allow us to generate images. And then to remove the background, we’re going to be using remove.bg. I create an account here. This one, I think I’m paying $5 or $10 a month for to generate unlimited images. And I’m going to get my API key from this as well. And so now we’re going to

[08:49] go back to Claude and I’m going to say for the image removal or for the image search and background removal we are using sir and remove.bg. I will paste the API keys below. This isn’t generally best practice but I do it anyway. And I’m going to just go ahead and run this. And then I’m going to paste it right here. I don’t want to do it on film because I want to keep my keys private. Okay, I’m not going to

[09:21] lie, that took forever. I think it took about 37 minutes to finish. But as you can see here, we now have this scrapbook app on our device. So, here it is closed. Here it is open. Let’s go ahead and take a look at this. Okay, so here’s our app. Okay, so here’s a new document. So, I can select this right here. And so I’m just going to say Claude 5.5. Okay, that is the same font.

[09:52] And so if I were to double tap on the screen right here, I could say Claude Opus 5.5. And then can I drag this? I can drag it around. Very cool. Now what I want to be able to do is I want to be able to search something. So can I type in Daario Amodai? Now we can search for it. Now, let’s turn him into a sticker. Hopefully, this works. Oh my god, this is insane. Look at this. We just generated this app in a

[10:23] single prompt. And I believe we can full screen it right here. So, here it is full screen. Look at this. We created this Excaladraw app. We can create stickers. I can full screen this. Ooh, that looks really good. A clawed logo. And now I can turn this into a sticker. There it is. Now I can open up the board and drag it in. Wow, one shot we created this. It took 37 minutes to generate, but we oneshot created this app for the iPhone Duo. And

[10:55] again, all of this data is just stored locally on the app right now. What we really want to have happen is we want this data to be stored in the cloud so that in theory we could share these with other people. We could make them sharable. So, we want to actually store them in a database in the cloud. And the easiest way to do this with Claude is using Convex, which brings me to the sponsor of today’s video. Every real app needs somewhere to store its data and keep it accurate for everyone using it. Convex is the back end I use for that,

[11:25] and it’s built for the way that we make apps now with AI agents. There’s an official Convex plugin for Claude Code. install it once and every time you ask Claude to build something, it can set up a real database, backend functions, and file storage for you. And everything is real time. When data changes, every screen using the app updates instantly. No refresh, no extra code. Normally, your agent would have to build the syncing, the caching, and all the rules that keep your data consistent. With

[11:57] Convex, that’s already done, so your agent can focus on the actual app. The plug-in also lets your agent see the app’s structure, logs, and back-end functions. So, when something breaks, it can see why and fix it. And because your data lives in Convex, not inside one app, you can start with an iPhone app today and add a web or desktop version later, all reading from the same database. Creating a Convex account is free. Ask your agent to build your next app with Convex. The link is in the

[12:27] description. Okay, back to the app. And so in order to create a database, and by the way, this database will be real time. So if you have a team account within our app and I were to move things around the board, it would actually happen in real time. Convex has a real-time database that like updates really fast. So this is going to be really cool. You’re going to go to convex.dev and you’re going to make sure you’ve signed up for an account. Then what you’re going to do is you’re going to go to cloud code. You’re going to go to customize. You’re going to go to plugins. And then you’re going to discover the convex plugin. And you can

[12:58] see that it should say convex by convex. This is a bundle design. We’re going to click on this and you’re going to make sure that this is downloaded. And now what we’re going to do is we’re going to come down here and I’m going to speak out this prompt real quick. Hey Cloud Code, I need you to actually make this a real time database cuz we’re going to add a team plan later. So I want this data to all be stored in a database real time. I want it to be perfect and I want to be able to make these boards sharable and send a link to someone with the with

[13:30] the code or with a link so that they can view my boards with those images as well. So, I want these to be sharable and viewable by friends and on my phone. So, please make the convex database however you think you need to do it. Do it perfectly and our app is going to be amazing once you’re done. And now we can fire this off. I’m going to go eat a little bit of food and come back and hopefully we’re going to have a database fully set up. Okay, just to give you a I’m just blown away by this. Look at this. It’s 57 minutes. It’s working. And

[14:02] I just said I’m testing it. It’s fine. So I I can’t wait to show you what it’s done. It’s just working for so long. So I’m just going to be like, please hurry up. It’s good. Like it’s fixing little things I didn’t ask it to fix, but it works. So just wait for this to stop and I will show you. So it’s finally done running. Look at the app that we created here. So look at this. So we can create a new document just like before. And it feels the same, right? We could say like

[14:33] open AI new features, right? Let’s say I was making a Excalibur diagram and I can pin this away and then I could double tap, which still works, and we could type codeex. And then we could just type codeex logo and I could search this up, turn it into a sticker, then just drag it directly in there. That’s kind of sick. Codeex logo chat GBT logo immediately sticker them. There we go.

[15:06] And then we can do Sam Alman. Turn him into a sticker. Boom. And there you go. The coolest part about all of this is now that we’ve integrated a database with Convex, we can now create a share link. So here I can create a share link and I can copy this link and I can send it to a friend. Right? So we’re in an iPhone. It should give us an option. I have no contacts in the simulator, but if we were using my actual iPhone Duo, I

[15:36] would see my recent text messages here. And I could go to Chrome and look at this. I can paste this link and it gave us a convex site link. So that’s where all of them are. And look at this. It is working. The share feature works. And guess what? We can see the updates in real time. So if I edit it on here, I could say chat GPT. Look at that. As soon as I click off to the side, it shows up. So add a new one. Chat GPT. We

[16:10] have a GPT image. As soon as I click off, it’s going to show up right here. Watch. Boom. Right there. GPT image 2. And I can c I can just turn this into a sticker and paste it on here. And look at that. I can move it around. This should be view only. It is. But I can share these with other people, which is really cool. Okay. So, we obviously have downloaded everything we needed. We created a prototype in one prompt and then we added another prompt which is

[16:41] adding a database and share links and it worked perfectly. It did work for 50 minutes to get this right. But it did end up working. Now the final step in building our app is just to test and iterate and make it perfect. And so here’s how I’m going to do that. So I’m going to open up the simulator right here. And now we have the app. I’m going to want to make some changes to the design here because I don’t love the way this looks. Now, I’m going to open up Claude Code right here, and I’m just going to say list of things I want to

[17:13] change. Now, I’m going to go one, can you please make the um main page that is shown here significantly better? Keep it creative, but I just don’t This looks very tacky and lame. So, just optimize the front end of this site. When I select a character to turn into or any image to turn into a sticker, I want that to be the little animation on the right side of the screen, which takes the image before it’s turned into a sticker and animates it into the sticker format. I think that would be like a fun little thing to have. Also,

[17:45] get rid of the little text at the top that says little things very you. I don’t like that at all. And then there’s too many buttons at the top here. If you can minimize the amount of buttons, like we might need only need like one full screen button. just figure out a way to like make those a little bit tighter. And yeah, rename the app to native board. And then in the search bar, right in the search bar, as I’m going to like look up an image of someone while I’m typing it out, it should show me the names of the stickers. So like these

[18:17] stickers should have names associated with them. And the name that is associated is the name that I search, right? So if I generate an image of Sam Alman, I actually want the name of that image to be saved as the search term that I originally searched for it. So that’s just how it should be saved in the database. As I’m typing them out, the stickers should filter by the things that I’ve typed in. So if I type in SAM, I can either press enter to generate it or ones that I’ve already generated I can very easily add to the board, you know, so I don’t have to like generate

[18:48] ones over and over again if I commonly use the same stickers. And I can just search for stickers. You know what I mean? Okay, those are four big changes. Let’s fire it off and then I think we’re going to be good. I think we’re gonna have our app created. I mean, it’s pretty pretty good. I don’t know what else I would even add to this. Okay, would you look at that? We are done. And let’s go ahead and create a new board. We can see our stickers here. Notice here there’s less tabs up top, which is exactly what we wanted. And we can full screen this. If we type in Sam, it pops

[19:21] up. So, I could say how LLM’s work and we could type in Satia Nadella. I have no idea why I’m looking up Satia Nadella. It pops up. Oh, I forgot about the animation. Wait, there should be an animation when we select Satia. Wait, so we can turn him into a sticker. Oh, there it is. Let’s go. That’s kind of cool. Bang. new co-opilot features. Now we have co-pilot or we can

[19:52] type co-pilot. Oh and notice here as I type co I type chat gbt cloud and codeex popup. So this is not only allows me to like search Google images but it also sorts through my existing images. So I could type in co-pilot Boom. There we go. And then as we type co,

[20:26] these stickers pop up. So this is really cool. This is looking good. And I could type uh Microsoft new AI. And then we can share this share link. Copy this link. And then I could paste it in a browser. And there you go. It works in real time. Let’s close this out. Look at that. We can add another Satia. It’s happening in real time because we’re using Convex. This is awesome. This is really fun. And there you go. That’s how

[20:56] you create an app on the iPhone Duo. Okay. So, now it’s vertical when it’s vertical. That’s pretty cool. And then we can go ahead and close Let’s go ahead and close our phone here. Rotate it. There you go. So, that’s how you create an app with the new iPhone Duo. And I’m going to go ahead and make this app open source. So, I can just say, “Hey, please make a new public repo. Make sure no sensitive information is leaked in this process.” It should be public. It should

[21:26] be called native board. It should be on Riley Brown’s GitHub. Please put it there. And instructions on how to set every single thing up. Assume someone has not even uh like doesn’t even have Xcode downloaded. I want them to figure out how they can very easily um get you Claude to set this up. So this by the time you see this video, this will be fully opensourced and we’ll have it up on GitHub. And there you have it. This is what we did today. We used Opus 5.5, which I genuinely believe is the best

[21:57] model right now, front end, backend, probably. We use the Xcode simulator, and that’s how we’re running this right here. here. That’s how we can turn it. We can open it etc. Uh we use Serper uh the the API to or SER API to give us the image generation. We also use remove.bg which allows us to remove the background. And then Opus figured out how to add that like white border around the edge for the sticker effect. We also

[22:28] use convex to allow us to create share features and it stores the data in the database in real time. And then we tested and iterated it for a few prompts. This is a total of five prompts and then I open sourced it. You can find the link in the description to the GitHub if you want to clone this app. Have at it. This was a lot of fun. Anyway, thank you guys so much for watching. Let me know what I should build when I actually get my iPhone Duo. I don’t think I’ll have it for about 3 weeks, but I want to do more

[22:58] experiments. Let me know what I should build with it.