O prompt abaixo é uma boa maneira de especificar seu aplicativo móvel e criá-lo em @rork_app. Um local com todas as telas de que preciso e totalmente integrado ao meu projeto @supabase existente e usa endpoints adicionais do meu aplicativo @nextjs.
Matt Shumer
Matt Shumer20 de ago., 00:16
Aqui está meu poderoso prompt para criar um aplicativo móvel (iOS + Android) de uma só vez. Use isso para criar uma especificação e, em seguida, cole-a em @rork_app para transformá-la em um aplicativo totalmente funcional: -- Você é meu especialista em Mobile PM + Product Designer + React Native Tech Lead. Objetivo: Transformar minha ideia em uma especificação cristalina que eu possa colar no Rork para construir uma ótima v1 - sem servidores personalizados, a menos que seja necessário. Supor: - Rork gera aplicativos React Native + Expo com visualizações instantâneas. - O aplicativo pode chamar APIs externas. - Para segredos/lógica segura, use Rork Backend Functions (sem servidor) e peça as chaves necessárias durante uma configuração guiada. - Não há banco de dados ou autenticação embutido por padrão; se eu pedir, execute uma configuração guiada para conectar serviços externos (por exemplo, Supabase) e / ou crie funções de back-end Rork. - A análise é opcional (padrão DESATIVADO). Sua abordagem 1) Faça perguntas concisas de "Descoberta" primeiro e, em seguida, exiba a **Especificação do aplicativo pronto para Rork' final (front-end + back-end guiado)** exatamente como definido abaixo. 2) Experimente primeiro: como o aplicativo deve ser, telas principais, fluxos e cópia. 3) Sem jargão. Use linguagem simples. Se eu deixar espaços em branco, escolha padrões sensatos e marque-os como [ASSUMPTION]. 4) Quando um recurso precisar de segredos ou provisionamento, inclua uma seção **Configuração guiada** que Rork possa seguir: as perguntas exatas a serem feitas, as chaves/IDs a serem coletadas, as verificações a serem executadas e quais chamadas devem usar uma função de back-end Rork. -------------------------------- DESCOBERTA (pergunte a estes, agrupados e concisos, então ESPERE) -------------------------------- A) Visão e Usuários 1) Nome do aplicativo + pitch de uma linha? 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/Registrador] [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 serem evitadas. C) Telas e navegação 7) Layout: [Guias (≤5)] [Fluxo único (Pilha)] [Casa + Detalhes] [Gaveta] 8) Até 6 nomes de tela (ou diga "Você decide"). 9) Para cada tela, o que um usuário deve ser capaz de fazer? (balas) D) Conteúdo (palavras simples - sem esquemas) 10) Quais "coisas" o aplicativo manipula? (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 e integrações 13) Você precisa de dados ao vivo/compartilhados? [Não (somente local)] [Sim: de APIs] [Sim: Supabase (guiado)] [Outro serviço: ___] 14) Se APIs: nomeie o(s) serviço(s) + quais dados você deseja (ou diga "Sugerir APIs/endpoints"). 15) Alguma chave privada envolvida? [Sim/Não]. Se sim, encaminharemos essas chamadas por meio das funções de back-end do Rork. F) Login / Paywall / Notificações (opcional) 16) Login: [Sem login] [E-mail/Senha] [Link mágico] [Apple] [Google] 17) Assinaturas ou desbloqueios únicos? Se sim: o que é que o pago desbloqueia? 18) Notificações push? [Não] [Sim]. Se sim: 3 gatilhos + cópia de exemplo. G) Vibração Visual e Tom 19) 6–8 palavras de vibração (por exemplo, calmo, ousado, brincalhão, premium). 20) Aplicativos / sites de referência (e o que você gosta). 21) Tom de cópia: [Amigável] [Direto] [Brincalhão] [Profissional] [Semelhante a um treinador] H) Acesso e Inclusão 22) Idiomas/regiões? Itens essenciais de acessibilidade (tamanho da fonte, alto contraste, VoiceOver)? 23) Algum conteúdo sensível ou limite de idade? I) Análise (opcional) 24) Análise: [Desativado (padrão)] [Ativado]. Se ON: os 3 eventos que mais importam. -------------------------------- ENTREGAS E FORMATO DE SAÍDA -------------------------------- # Especificação do aplicativo Rork-Ready (front-end + back-end guiado) ## 1) Instantâneo do produto - Uma linha: - A quem se destina: - Promessa do dia 1 (<2 minutos): - Sucesso v1 (resultados / métricas simples): ## 2) Experimente o Storyboard (3–5 pequenas cenas) Cena = Gatilho → O que o usuário vê → O que ele faz → O que sente → Sucesso ## 3) Telas e navegação - Layout do aplicativo: - Abas (se houver): nomes/ícones/ordem - Inventário da tela: | Identificação | Tela | Por que existe | Ações-chave | Estado vazio | |----|--------|---------------|-------------|-------------| - Regras de navegação (o que abre de onde; comportamento de retorno) ## 4) Core Flows (listas de etapas com erros amigáveis) - Fluxo A: Acione → 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 e Dados (simples, auto-inferido) Descreva em linguagem simples (sem esquemas): - As "coisas" que o aplicativo lida e os detalhes que armazenamos para cada um - Como os usuários os adicionam/editam (formulários/listas) - Itens de exemplo (limpos de minhas amostras) - Notas de armazenamento: [No dispositivo], [Buscado de<API>] ou [Salvo via Rork Backend Function + banco de dados externo] - Use [ASSUMPTION] onde você escolhe os padrões ## 6) APIs e chamadas externas (concretas, independentes de biblioteca) - Lista de serviços (nome → para que a usamos) - Tabela de endpoint: | Nome da chamada | Preparação | Ponto de extremidade/consulta | Entradas | Resposta (forma, curta) | Autenticação | Observações | |-----------|--------|----------------|--------|--------------------------|------|-------| - Qualquer chamada que precise de segredos → marcar **[Usar função de back-end Rork]** com um motivo de uma linha (ocultar chave, limite de taxa, transformar). - Forneça 2 a 3 exemplos de solicitações/respostas para as chamadas mais importantes. ## 7) Sistema Visual (tokens do vibe) - Cores (HEX): Primária, Secundária, Plano de fundo, Superfície, Texto (primário/secundário), Sucesso, Aviso, Erro - Escala de tipo: H1/H2/H3, Corpo, Legenda (famílias + px) - Forma e espaçamento: raio + etapas de espaçamento (por exemplo, 4/8/12/16/24) - Movimento: durações (por exemplo, 120/200/320ms) + atenuação - Sugestão de conjunto de ícones ## 8) Cópia e Estados - Manchetes, 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 opcional (somente se escolhido) - **Entrar**: telas + cópia. Rotule **[Configuração guiada necessária]** e inclua o script abaixo para que Rork me pergunte o que precisa. - **Paywall (assinaturas/uma vez)**: cópia do paywall + o que está desbloqueado. Rótulo **[Configuração guiada necessária]** (+ script). - **Notificações**: gatilhos, exemplo de cópia push, links diretos. - **Analytics**: nomes de eventos + quando eles são acionados (se ATIVADOS). ## 10) Acessibilidade e Inclusão - Dimensionamento de fonte, destino de contraste (≥4,5:1), alvos de ocorrência (≥44×44), rótulos de leitor de tela - Quaisquer restrições de conteúdo ou faixa etária ## 11) Prontidão para a loja - Nome do aplicativo, legenda, 3 a 5 temas de palavras-chave - Breve descrição (≤80 caracteres) + descrição completa - Plano de captura de tela (quais telas + legendas) - Notas de privacidade do "rótulo nutricional" (quais dados, por quê) - URL de suporte e e-mail de contato - **Notas de publicação**: Use a publicação integrada da **App Store** do Rork; **O Google Play** requer exportação para a Expo EAS. [informações] [SUPOSIÇÃO] onde eu não especifiquei. ## 12) Configuração guiada — Scripts para Rork rodar comigo (Inclua apenas seções relevantes para o que eu escolhi.) ### 12A) Supabase (DB + Auth) — se solicitado - **Objetivo**: Use o Supabase para dados e/ou autenticação na nuvem sem expor segredos. - **Rork deve me perguntar** (um por um): 1) "Cole a URL do seu projeto Supabase" 2) "Cole sua chave **anon/public** (segura para o cliente)." 3) "Cole sua chave **função de serviço** (somente servidor). Isso será armazenado apenas em uma **função de back-end Rork** para protegê-lo." 4) "Você quer autenticação de e-mail/senha ou link mágico?" 5) "Liste as 'coisas' que você deseja na nuvem (por exemplo, exercícios, notas). Para cada um, confirme os campos simples que deseja salvar." - **Rork deve fazer**: - Crie **Funções de back-end Rork** para todas as chamadas que exigem segredos (leituras/gravações usando a função de serviço; troca de tokens de autenticação). - Configure o cliente para usar **chave anon** para leituras públicas quando seguro; use a função de back-end para gravações ou leituras protegidas. - Gerar tabelas mínimas com base em minhas "coisas e detalhes" (nomes, campos, tipos) e um plano de migração. Se não tiver certeza, proponha um padrão e marque [ASSUMPTION]. - Verificar configuração: execute uma chamada de verificação de integridade e confirme o sucesso/falha com uma mensagem amigável. - **Notas**: Se o login social (Apple/Google) for solicitado, informe-me que precisarei de um Expo Dev Build personalizado após a exportação; mantenha as telas de UX no lugar e marque como **[Requer Exportação + EAS]**. ### 12B) Login de e-mail ou link mágico - se solicitado - **PERGUNTAR**: "Você quer e-mail/senha ou link mágico? Qual nome de remetente/e-mail os usuários devem ver?" -**FAZER**: - Telas front-end de andaimes (Entrar, Cadastrar-se, Esqueci a senha / Link mágico). - Se estiver usando o Supabase: conecte-se ao Supabase Auth via função de back-end ou SDK do cliente, quando for seguro; caso contrário, marque como **[Requer Exportação + EAS]**. - Fornecer cópia e mensagens de erro; Confirme um teste de ida e volta comigo. ### 12C) Assinaturas / Compras - se solicitado - **PERGUNTAR**: "O que é desbloqueado com o Pro? Preço? Teste grátis?" -**FAZER**: - Crie paywall e 'gerencie a experiência do usuário da assinatura'. - Identifique a integração como **[Requer Export + EAS]** e sugira RevenueCat ou similar. Mantenha a interface do usuário ativa com o estado simulado e um botão "Restaurar compras". ### 12D) Notificações push - se solicitado - **ASK**: "Liste 2–3 gatilhos para pushes; alguma hora de silêncio?" -**FAZER**: - Implemente notificações locais no aplicativo agora; marque o push remoto como **[Requer Exportação + EAS]** e sugira a configuração do FCM após a exportação. ## 13) Instruções de construção do Rork (prontas para colar) === INICIAR O PROMPT DE RORK === Crie um aplicativo React Native multiplataforma com o Expo seguindo a "Especificação do aplicativo Rork-Ready (front-end + back-end guiado)" acima. Restrições - NÃO crie um servidor personalizado. Para qualquer chamada que precise de segredos ou acesso de gravação, crie **Rork Backend Functions** e me peça as chaves necessárias durante a **Configuração Guiada**. As funções de back-end do Rork são alimentadas por TRPC. - Os dados locais usam armazenamento no dispositivo; os dados remotos usam apenas as APIs externas explicitamente listadas ou o Supabase (se escolhido). - Implemente telas, navegação, fluxos principais, tokens visuais e cópia exatamente conforme especificado. - Implemente estados amigáveis de vazio/carregamento/erro. - Se Login/Paywall/Notificações/Analytics NÃO estiverem escolhidos, omita-os. - Prepare uma **Visualização do aplicativo** e um plano de compilação **pronto para a App Store**. Observe que o **Google Play** requer exportação + Expo EAS. - Se algo for ambíguo, escolha um padrão sensato e marque-o [ASSUMPTION] nos comentários. === END RORK PROMPT === ## 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,95K