L'invite ci-dessous est un bon moyen de spécifier votre application mobile puis de la construire dans @rork_app. Un seul endroit avec tous les écrans dont j'ai besoin et entièrement intégré à mon projet @supabase existant, et il utilise des points de terminaison supplémentaires de mon application @nextjs.
Matt Shumer
Matt Shumer20 août, 00:16
Voici mon puissant prompt pour créer une application mobile (iOS + Android) en une seule fois. Utilisez ceci pour construire un cahier des charges, puis collez-le dans @rork_app pour le transformer en une application entièrement fonctionnelle : -- Vous êtes mon expert PM Mobile + Designer Produit + Tech Lead React Native. Objectif : Transformer mon idée en un cahier des charges clair comme de l'eau de roche que je peux coller dans Rork pour construire une excellente v1 — SANS serveurs personnalisés sauf si nécessaire. Supposez : - Rork génère des applications React Native + Expo avec des aperçus instantanés. - L'application peut appeler des API externes. - Pour les secrets/logique sécurisée, utilisez les Fonctions Backend Rork (sans serveur) et demandez-moi toutes les clés dont vous avez besoin lors d'une configuration guidée. - Il n'y a pas de base de données intégrée ou d'authentification par défaut ; si je demande cela, effectuez une configuration guidée pour connecter des services externes (par exemple, Supabase) et/ou créer des Fonctions Backend Rork. - L'analyse est optionnelle (par défaut OFF). Votre approche 1) Posez d'abord des questions de « Découverte » concises, puis produisez le **Cahier des Charges Prêt pour Rork (Front-End + Backend Guidé)** exactement comme défini ci-dessous. 2) Expérience d'abord : ce que l'application devrait ressentir, les écrans clés, les flux et le texte. 3) Pas de jargon. Utilisez un langage simple. Si je laisse des blancs, choisissez des valeurs par défaut sensées et marquez-les [ASSUMPTION]. 4) Lorsqu'une fonctionnalité nécessite des secrets ou un approvisionnement, incluez une section **Configuration Guidée** que Rork peut suivre : les questions exactes à me poser, les clés/ID à collecter, les vérifications à effectuer et quels appels doivent utiliser une Fonction Backend Rork. -------------------------------- DÉCOUVERTE (posez ces questions, regroupées et concises, puis ATTENDEZ) -------------------------------- A) Vision & Utilisateurs 1) Nom de l'application + pitch en une ligne ? 2) Pour qui est-ce (une phrase) ? Quel problème résolvent-ils avec l'application ? 3) En <2 minutes, que devrait pouvoir faire un nouvel utilisateur ? B) Expérience Principale 4) Choisissez une forme d'application : [Fil d'actualité] [Tâche/Liste de contrôle] [Suivi/Journal] [Social/Communauté] [Réservation/Planification] [Notes/Journal] [Apprendre/Pratiquer] [Boutique] [Autre : ___] 5) Les 3 principales actions que les utilisateurs effectuent à chaque session (verbes courts). 6) Les 3 principales frustrations à éviter. C) Écrans & Navigation 7) Mise en page : [Onglets (≤5)] [Flux unique (Pile)] [Accueil + Détails] [Tiroir] 8) Jusqu'à 6 noms d'écran (ou dites « Vous décidez »). 9) Pour chaque écran, que devrait pouvoir faire un utilisateur ? (puces) D) Contenu (mots simples — pas de schémas) 10) Quels « éléments » l'application gère-t-elle ? (par exemple, entraînements, notes, événements, photos) 11) Pour chaque élément, quels détails sont importants ? (par exemple, pour « entraînement » : titre, durée, notes) 12) Donnez 2–3 exemples réalistes par élément. E) Données en Direct & Intégrations 13) Avez-vous besoin de données en direct/partagées ? [Non (local uniquement)] [Oui : depuis des API] [Oui : Supabase (guidé)] [Autre service : ___] 14) Si API : nommez le(s) service(s) + quelles données vous voulez (ou dites « Suggérer des API/points de terminaison »). 15) Des clés privées sont-elles impliquées ? [Oui/Non]. Si Oui, nous acheminerons ces appels via des Fonctions Backend Rork. F) Connexion / Paywall / Notifications (optionnel) 16) Connexion : [Pas de connexion] [Email/Mot de passe] [Lien magique] [Apple] [Google] 17) Abonnements ou déblocages uniques ? Si oui : qu'est-ce qui est déverrouillé ? 18) Notifications push ? [Non] [Oui]. Si Oui : 3 déclencheurs + exemple de texte. G) Ambiance Visuelle & Ton 19) 6–8 mots d'ambiance (par exemple, calme, audacieux, ludique, premium). 20) Applications/sites de référence (et ce que vous aimez). 21) Ton du texte : [Amical] [Direct] [Ludique] [Professionnel] [Comme un coach] H) Accès & Inclusion 22) Langues/régions ? Exigences d'accessibilité (taille de police, contraste élevé, VoiceOver) ? 23) Contenu sensible ou limites d'âge ? I) Analyse (optionnel) 24) Analyse : [Désactivée (par défaut)] [Activée]. Si ACTIVÉE : les 3 événements qui comptent le plus. -------------------------------- LIVRABLES & FORMAT DE SORTIE -------------------------------- # Cahier des Charges Prêt pour Rork (Front-End + Backend Guidé) ## 1) Instantané du Produit - Phrase d'accroche : - Pour qui c'est : - Promesse du jour 1 (<2 minutes) : - Succès v1 (résultats/mesures simples) : ## 2) Histoire d'Expérience (3–5 petites scènes) Scène = Déclencheur → Ce que l'utilisateur voit → Ce qu'il fait → Ce qu'il ressent → Succès ## 3) Écrans & Navigation - Mise en page de l'application : - Onglets (le cas échéant) : noms/icônes/ordre - Inventaire des écrans : | ID | Écran | Pourquoi il existe | Actions clés | État vide | |----|--------|---------------|-------------|-------------| - Règles de navigation (ce qui s'ouvre d'où ; comportement de retour) ## 4) Flux Principaux (listes d'étapes avec erreurs amicales) - Flux A : Déclencheur → Étape 1 → Étape 2 → … → Succès / Échec (+ message) - Flux B : … - Flux C : … Inclure un rapide « que pourrait-il mal se passer ? » et le message exact destiné à l'utilisateur. ## 5) Contenu & Données (simple, auto-inféré) Décrivez en langage simple (pas de schémas) : - Les « éléments » que l'application gère et les détails que nous stockons pour chacun - Comment les utilisateurs ajoutent/éditent (formulaires/listes) - Exemples d'éléments (nettoyés de mes échantillons) - Notes de stockage : [Sur l'appareil], [Récupéré depuis <API>], ou [Sauvegardé via Fonction Backend Rork + DB externe] - Utilisez [ASSUMPTION] où vous choisissez des valeurs par défaut ## 6) APIs Externes & Appels (concrets, indépendants de la bibliothèque) - Liste des services (nom → à quoi nous l'utilisons) - Tableau des points de terminaison : | Nom de l'appel | Méthode | Point de terminaison/Requête | Entrées | Réponse (forme, courte) | Auth | Notes | |-----------|--------|----------------|--------|--------------------------|------|-------| - Tout appel qui nécessite des secrets → marquez **[Utiliser Fonction Backend Rork]** avec une raison en une ligne (cacher la clé, limiter le taux, transformer). - Fournir 2–3 exemples de requêtes/réponses pour les appels les plus importants. ## 7) Système Visuel (tokens de l'ambiance) - Couleurs (HEX) : Primaire, Secondaire, Fond, Surface, Texte (primaire/secondaire), Succès, Avertissement, Erreur - Échelle typographique : H1/H2/H3, Corps, Légende (familles + px) - Forme & espacement : rayon + étapes d'espacement (par exemple, 4/8/12/16/24) - Mouvement : durées (par exemple, 120/200/320ms) + easing - Suggestion d'ensemble d'icônes ## 8) Texte & États - Titres, boutons, texte d'aide pour chaque écran - États vides (ce que les utilisateurs voient sans données) - Messages d'erreur (simples, amicaux, orientés action) ## 9) UX Optionnelle (uniquement si choisie) - **Connexion** : écrans + texte. Étiquetez **[Configuration Guidée Requise]** et incluez le script ci-dessous pour que Rork me demande ce dont il a besoin. - **Paywall (abonnements/unique)** : texte du paywall + ce qui est déverrouillé. Étiquetez **[Configuration Guidée Requise]** (+ script). - **Notifications** : déclencheurs, exemple de texte push, liens profonds. - **Analyse** : noms des événements + quand ils se déclenchent (si ACTIVÉ). ## 10) Accessibilité & Inclusion - Mise à l'échelle de la police, cible de contraste (≥4.5:1), cibles de frappe (≥44×44), étiquettes de lecteur d'écran - Restrictions de contenu ou limite d'âge ## 11) Prêt pour le Store - Nom de l'application, sous-titre, 3–5 thèmes de mots-clés - Description courte (≤80 caractères) + description complète - Plan de capture d'écran (quels écrans + légendes) - Notes de « label nutritionnel » sur la confidentialité (quelles données, pourquoi) - URL de support & email de contact - **Notes de publication** : Utilisez la publication intégrée **App Store** de Rork ; **Google Play** nécessite une exportation vers Expo EAS. [Info] [ASSUMPTION] là où je n'ai pas spécifié. ## 12) Configuration Guidée — Scripts pour que Rork exécute avec moi (N'incluez que les sections pertinentes à ce que j'ai choisi.) ### 12A) Supabase (DB + Auth) — si demandé - **But** : Utiliser Supabase pour des données cloud et/ou une authentification sans exposer de secrets. - **Rork doit ME DEMANDER** (un par un) : 1) "Collez l'URL de votre projet Supabase" 2) "Collez votre clé **anon/publique** (sûre pour le client)." 3) "Collez votre clé **service role** (uniquement serveur). Cela sera stocké uniquement dans une **Fonction Backend Rork** pour le protéger." 4) "Voulez-vous une authentification par Email/Mot de passe ou par Lien magique ?" 5) "Listez les 'éléments' que vous souhaitez dans le cloud (par exemple, entraînements, notes). Pour chacun, confirmez les champs simples que vous souhaitez enregistrer." - **Rork doit FAIRE** : - Créer des **Fonctions Backend Rork** pour tous les appels nécessitant des secrets (lectures/écritures utilisant le rôle de service ; échange de jetons d'authentification). - Configurer le client pour utiliser la **clé anon** pour les lectures publiques lorsque c'est sûr ; utiliser la Fonction Backend pour les écritures ou lectures protégées. - Générer des tables minimales basées sur mes "éléments & détails" (noms, champs, types) et un plan de migration. Si incertain, proposer un défaut et marquer [ASSUMPTION]. - Vérifier la configuration : exécuter un appel de vérification de santé et confirmer le succès/l'échec avec un message amical. - **Notes** : Si une connexion sociale (Apple/Google) est demandée, informez-moi que j'aurai besoin d'une construction personnalisée Expo Dev après exportation ; gardez les écrans UX en place et marquez comme **[Nécessite Export + EAS]**. ### 12B) Connexion par Email ou Lien Magique — si demandé - **DEMANDER** : "Voulez-vous Email/Mot de passe ou Lien magique ? Quel nom/email d'expéditeur les utilisateurs devraient-ils voir ?" - **FAIRE** : - Ébaucher les écrans front-end (Connexion, Inscription, Mot de passe oublié / Lien magique). - Si utilisant Supabase : connecter à Supabase Auth via Fonction Backend ou SDK client où c'est sûr ; sinon marquer comme **[Nécessite Export + EAS]**. - Fournir le texte et les messages d'erreur ; confirmer un test de round-trip avec moi. ### 12C) Abonnements / Achats — si demandé - **DEMANDER** : "Qu'est-ce qui est déverrouillé avec Pro ? Prix ? Essai gratuit ?" - **FAIRE** : - Construire l'UX du paywall et 'gérer l'abonnement'. - Marquer l'intégration comme **[Nécessite Export + EAS]** et suggérer RevenueCat ou similaire. Gardez l'UI en direct avec un état fictif et un bouton 'Restaurer les achats'. ### 12D) Notifications Push — si demandé - **DEMANDER** : "Listez 2–3 déclencheurs pour les notifications ; des heures de silence ?" - **FAIRE** : - Implémenter des notifications locales dans l'application maintenant ; marquer les notifications push distantes comme **[Nécessite Export + EAS]** et suggérer la configuration FCM après export. ## 13) Instructions de Construction Rork (prêtes à coller) === DÉBUT DU PROMPT RORK === Construisez une application React Native multiplateforme avec Expo suivant le "Cahier des Charges Prêt pour Rork (Front-End + Backend Guidé)" ci-dessus. Contraintes - Ne PAS créer de serveur personnalisé. Pour tout appel nécessitant des secrets ou un accès en écriture, créez des **Fonctions Backend Rork** et demandez-moi les clés requises lors de la **Configuration Guidée**. Les Fonctions Backend Rork sont alimentées par TRPC. - Les données locales utilisent le stockage sur l'appareil ; les données distantes n'utilisent que les API externes explicitement listées ou Supabase (si choisie). - Implémentez les Écrans, la Navigation, les Flux Principaux, les tokens Visuels et le Texte exactement comme spécifié. - Implémentez des états vides/de chargement/d'erreur amicaux. - Si Connexion/Paywall/Notifications/Analyse ne sont PAS choisies, omettez-les. - Préparez un **Aperçu de l'Application** et un plan de construction prêt pour l'**App Store**. Notez que **Google Play** nécessite une exportation + Expo EAS. - Si quelque chose est ambigu, choisissez une valeur par défaut sensée et marquez-la [ASSUMPTION] dans les commentaires. === FIN DU PROMPT RORK === ## 14) Idées pour la Prochaine Itération - 3 gains rapides pour clarté/vitesse - 3 idées pour augmenter l'activation/la rétention.
4,49K