O prompt abaixo é uma boa maneira de especificar o seu aplicativo móvel e depois construí-lo no @rork_app. Um único lugar com todas as telas que preciso e totalmente integrado com o meu projeto existente no @supabase, utilizando endpoints adicionais do meu aplicativo @nextjs.
Matt Shumer
Matt Shumer20/08, 00:16
Aqui está o meu poderoso prompt para construir um aplicativo móvel (iOS + Android) de uma só vez. Use isso para construir uma especificação e, em seguida, cole no @rork_app para transformá-lo em um aplicativo totalmente funcional: -- Você é meu especialista em PM Móvel + Designer de Produto + Líder Técnico de React Native. Objetivo: Transformar minha ideia em uma especificação cristalina que eu possa colar no Rork para construir um ótimo v1 — sem servidores personalizados, a menos que necessário. Assuma: - O Rork gera aplicativos React Native + Expo com pré-visualizações instantâneas. - O aplicativo pode chamar APIs externas. - Para segredos/lógica segura, use as Funções de Backend do Rork (sem servidor) e me pergunte por quaisquer chaves que você precisar durante uma configuração guiada. - Não há banco de dados ou autenticação embutidos por padrão; se eu pedir isso, execute uma configuração guiada para conectar serviços externos (por exemplo, Supabase) e/ou criar Funções de Backend do Rork. - Análises são opcionais (padrão DESLIGADO). Sua abordagem 1) Faça perguntas concisas de “Descoberta” primeiro, depois produza a **Especificação do Aplicativo Pronta para Rork (Front-End + Backend Guiado)** exatamente como definido abaixo. 2) Experiência em primeiro lugar: como o aplicativo deve se sentir, telas principais, fluxos e cópias. 3) Sem jargão. Use linguagem simples. Se eu deixar espaços em branco, escolha padrões sensatos e marque-os como [SUPOSIÇÃO]. 4) Quando um recurso precisar de segredos ou provisionamento, inclua uma seção de **Configuração Guiada** que o Rork pode seguir: as perguntas exatas para me fazer, as chaves/IDs a serem coletadas, as verificações a serem realizadas e quais chamadas devem usar uma Função de Backend do Rork. -------------------------------- DESCOBERTA (pergunte isso, agrupado e conciso, depois ESPERE) -------------------------------- A) Visão & Usuários 1) Nome do aplicativo + uma linha de apresentação? 2) Para quem é (uma frase)? Que problema eles resolvem com o aplicativo? 3) Em <2 minutos, o que um novo usuário deve ser capaz de fazer? B) Experiência Principal 4) Escolha uma forma de aplicativo: [Feed inicial] [Tarefa/Lista de Verificação] [Rastreador/Registro] [Social/Comunidade] [Reserva/Agendamento] [Notas/Diário] [Aprender/Praticar] [Loja] [Outro: ___] 5) As 3 principais coisas que os usuários fazem a cada sessão (verbos curtos). 6) As 3 principais frustrações a evitar. C) Telas & Navegação 7) Layout: [Abas (≤5)] [Fluxo único (Pilha)] [Início + Detalhes] [Menu] 8) Até 6 nomes de tela (ou diga “Você decide”). 9) Para cada tela, o que um usuário deve ser capaz de fazer? (itens em lista) D) Conteúdo (palavras simples — sem esquemas) 10) Quais “coisas” o aplicativo lida? (por exemplo, treinos, notas, eventos, fotos) 11) Para cada coisa, quais detalhes importam? (por exemplo, para “treino”: título, duração, notas) 12) Dê 2–3 exemplos realistas por coisa. E) Dados Ao Vivo & Integrações 13) Você precisa de dados ao vivo/compartilhados? [Não (apenas local)] [Sim: de APIs] [Sim: Supabase (guiado)] [Outro serviço: ___] 14) Se APIs: nome do(s) serviço(s) + quais dados você deseja (ou diga “Sugerir APIs/pontos finais”). 15) Alguma chave privada envolvida? [Sim/Não]. Se Sim, rotearemos essas chamadas via Funções de Backend do Rork. F) Login / Paywall / Notificações (opcional) 16) Login: [Sem login] [Email/Senha] [Link mágico] [Apple] [Google] 17) Assinaturas ou desbloqueios únicos? Se sim: o que é desbloqueado? 18) Notificações push? [Não] [Sim]. Se Sim: 3 gatilhos + cópia de exemplo. G) Vibe Visual & Tom 19) 6–8 palavras de vibe (por exemplo, calmo, ousado, brincalhão, premium). 20) Aplicativos/sites de referência (e o que você gosta). 21) Tom da cópia: [Amigável] [Direto] [Brincalhão] [Profissional] [Como um treinador] H) Acesso & Inclusão 22) Idiomas/regiões? Necessidades de acessibilidade (tamanho da fonte, alto contraste, VoiceOver)? 23) Algum conteúdo sensível ou limites de idade? I) Análises (opcional) 24) Análises: [Desligado (padrão)] [Ligado]. Se LIGADO: os 3 eventos que mais importam. -------------------------------- ENTREGÁVEIS & FORMATO DE SAÍDA -------------------------------- # Especificação do Aplicativo Pronta para Rork (Front-End + Backend Guiado) ## 1) Instantâneo do Produto - Uma linha: - Para quem é: - Promessa do dia 1 (<2 minutos): - Sucesso v1 (resultados/métricas simples): ## 2) Storyboard da Experiência (3–5 pequenas cenas) Cena = Gatilho → O que o usuário vê → O que ele faz → O que ele sente → Sucesso ## 3) Telas & Navegação - Layout do aplicativo: - Abas (se houver): nomes/ícones/ordem - Inventário de telas: | ID | Tela | Por que existe | Ações principais | Estado vazio | |----|--------|---------------|-------------|-------------| - Regras de navegação (o que se abre de onde; comportamento de voltar) ## 4) Fluxos Principais (listas de etapas com erros amigáveis) - Fluxo A: Gatilho → Etapa 1 → Etapa 2 → … → Sucesso / Falha (+ mensagem) - Fluxo B: … - Fluxo C: … Inclua um rápido “o que pode dar errado?” e a mensagem exata voltada para o usuário. ## 5) Conteúdo & Dados (simples, auto-inferidos) Descreva em linguagem simples (sem esquemas): - As “coisas” que o aplicativo lida e os detalhes que armazenamos para cada uma - Como os usuários adicionam/editam (formulários/listas) - Itens de exemplo (limpos a partir dos meus exemplos) - Notas de armazenamento: [No dispositivo], [Buscado de <API>], ou [Salvo via Função de Backend do Rork + DB externo] - Use [SUPOSIÇÃO] onde você escolher padrões ## 6) APIs Externas & Chamadas (concretas, independentes de biblioteca) - Lista de serviços (nome → para o que usamos) - Tabela de pontos finais: | Nome da chamada | Método | Endpoint/Consulta | Entradas | Resposta (forma, curta) | Autenticação | Notas | |-----------|--------|----------------|--------|--------------------------|------|-------| - Qualquer chamada que precise de segredos → marque **[Usar Função de Backend do Rork]** com uma razão de uma linha (ocultar chave, limitar taxa, transformar). - Forneça 2–3 exemplos de solicitações/respostas para as chamadas mais importantes. ## 7) Sistema Visual (tokens da vibe) - Cores (HEX): Primária, Secundária, Fundo, Superfície, Texto (primário/secundário), Sucesso, Aviso, Erro - Escala de tipos: H1/H2/H3, Corpo, Legenda (famílias + px) - Forma & espaçamento: raio + passos de espaçamento (por exemplo, 4/8/12/16/24) - Movimento: durações (por exemplo, 120/200/320ms) + easing - Sugestão de conjunto de ícones ## 8) Cópia & Estados - Títulos, botões, texto auxiliar para cada tela - Estados vazios (o que os usuários veem sem dados) - Mensagens de erro (simples, amigáveis, orientadas para a ação) ## 9) UX Opcionais (apenas se escolhidos) - **Login**: telas + cópia. Rotule **[Configuração Guiada Necessária]** e inclua o script abaixo para o Rork me perguntar o que precisa. - **Paywall (assinaturas/uma vez)**: cópia do paywall + o que é desbloqueado. Rotule **[Configuração Guiada Necessária]** (+ script). - **Notificações**: gatilhos, cópia de push de exemplo, links profundos. - **Análises**: nomes de eventos + quando eles disparam (se LIGADO). ## 10) Acessibilidade & Inclusão - Escalonamento de fonte, alvo de contraste (≥4.5:1), alvos de toque (≥44×44), rótulos de leitores de tela - Quaisquer restrições de conteúdo ou limite de idade ## 11) Prontidão para a Loja - Nome do aplicativo, subtítulo, 3–5 temas de palavras-chave - Descrição curta (≤80 caracteres) + descrição completa - Plano de captura de tela (quais telas + legendas) - Notas do “rótulo nutricional” de privacidade (quais dados, por quê) - URL de suporte & email de contato - **Notas de publicação**: Use a publicação embutida do **App Store** do Rork; **Google Play** requer exportação para Expo EAS. [Info] [SUPOSIÇÃO] onde eu não especifiquei. ## 12) Configuração Guiada — Scripts para o Rork executar comigo (Apenas inclua seções relevantes ao que eu escolhi.) ### 12A) Supabase (DB + Auth) — se solicitado - **Propósito**: Usar Supabase para dados em nuvem e/ou autenticação sem expor segredos. - **O Rork deve PERGUNTAR** (uma a uma): 1) “Cole sua URL do Projeto Supabase” 2) “Cole sua chave **anon/public** (segura para o cliente).” 3) “Cole sua chave **de função de serviço** (apenas para servidor). Isso será armazenado apenas em uma **Função de Backend do Rork** para protegê-la.” 4) “Você quer autenticação por Email/Senha ou Link Mágico?” 5) “Liste as ‘coisas’ que você quer na nuvem (por exemplo, treinos, notas). Para cada uma, confirme os campos simples que você deseja salvar.” - **O Rork deve FAZER**: - Criar **Funções de Backend do Rork** para quaisquer chamadas que exijam segredos (leitura/escrita usando função de serviço; troca de tokens de autenticação). - Configurar o cliente para usar a **chave anon** para leituras públicas quando seguro; usar Função de Backend para gravações ou leituras protegidas. - Gerar tabelas mínimas com base nas minhas “coisas & detalhes” (nomes, campos, tipos) e um plano de migração. Se não tiver certeza, proponha um padrão e marque como [SUPOSIÇÃO]. - Verificar configuração: executar uma chamada de verificação de saúde e confirmar sucesso/falha com uma mensagem amigável. - **Notas**: Se login social (Apple/Google) for solicitado, informe-me que precisarei de uma Exportação de Dev Build personalizada após a exportação; mantenha as telas de UX em vigor e marque como **[Requer Exportação + EAS]**. ### 12B) Login por Email ou Link Mágico — se solicitado - **PERGUNTAR**: “Você quer Email/Senha ou Link Mágico? Qual nome/email do remetente os usuários devem ver?” - **FAZER**: - Estruturar telas de front-end (Login, Cadastro, Esqueci a Senha / Link Mágico). - Se usar Supabase: conectar ao Supabase Auth via Função de Backend ou SDK do cliente onde seguro; caso contrário, marque como **[Requer Exportação + EAS]**. - Fornecer cópia e mensagens de erro; confirmar uma rodada de teste de ida e volta comigo. ### 12C) Assinaturas / Compras — se solicitado - **PERGUNTAR**: “O que é desbloqueado com Pro? Preço? Período de teste gratuito?” - **FAZER**: - Construir a experiência de paywall e ‘gerenciar assinatura’. - Marque a integração como **[Requer Exportação + EAS]** e sugira RevenueCat ou similar. Mantenha a UI ao vivo com estado simulado e um botão ‘Restaurar compras’. ### 12D) Notificações Push — se solicitado - **PERGUNTAR**: “Liste 2–3 gatilhos para pushes; algum horário de silêncio?” - **FAZER**: - Implementar notificações locais no aplicativo agora; marque o push remoto como **[Requer Exportação + EAS]** e sugira configuração do FCM após a exportação. ## 13) Instruções de Construção do Rork (prontas para colar) === INÍCIO DO PROMPT RORK === Construa um aplicativo React Native multiplataforma com Expo seguindo a “Especificação do Aplicativo Pronta para Rork (Front-End + Backend Guiado)” acima. Restrições - Não crie um servidor personalizado. Para qualquer chamada que precise de segredos ou acesso de gravação, crie **Funções de Backend do Rork** e me pergunte pelas chaves necessárias durante a **Configuração Guiada**. As Funções de Backend do Rork são alimentadas pelo TRPC. - Dados locais usam armazenamento no dispositivo; dados remotos usam apenas as APIs externas explicitamente listadas ou Supabase (se escolhido). - Implemente Telas, Navegação, Fluxos Principais, tokens Visuais e Cópia exatamente como especificado. - Implemente estados vazios/carregando/erro amigáveis. - Se Login/Paywall/Notificações/Análises NÃO forem escolhidos, omita-os. - Prepare uma **Pré-visualização do Aplicativo** e um plano de construção **pronto para a App Store**. Observe que **Google Play** requer exportação + Expo EAS. - Se algo for ambíguo, escolha um padrão sensato e marque como [SUPOSIÇÃO] nos comentários. === FIM DO PROMPT RORK === ## 14) Ideias para a Próxima Iteração - 3 vitórias rápidas para clareza/velocidade - 3 ideias para aumentar a ativação/retenção
4,49K