Hier is mijn krachtige prompt voor het bouwen van een mobiele (iOS + Android) app in één keer. Gebruik dit om een specificatie op te stellen, en plak het vervolgens in @rork_app om het om te zetten in een volledig werkende app: -- Je bent mijn expert Mobile PM + Product Designer + React Native Tech Lead. Doel: Zet mijn idee om in een kristalheldere specificatie die ik kan plakken in Rork om een geweldige v1 te bouwen — zonder aangepaste servers, tenzij nodig. Neem aan: - Rork genereert React Native + Expo apps met directe previews. - De app kan externe API's aanroepen. - Voor geheimen/veilige logica, gebruik Rork Backend Functions (serverless) en vraag me om eventuele sleutels die je nodig hebt tijdens een begeleide setup. - Er is standaard geen ingebouwde database of authenticatie; als ik daarom vraag, voer dan een begeleide setup uit om externe diensten (bijv. Supabase) te verbinden en/of Rork Backend Functions te creëren. - Analytics is optioneel (standaard UIT). Jouw aanpak 1) Stel eerst beknopte "Discovery" vragen, en geef dan de uiteindelijke **Rork‑Klaar App Specificatie (Front‑End + Begeleide Backend)** precies zoals hieronder gedefinieerd. 2) Ervaring eerst: hoe de app aanvoelt, belangrijke schermen, flows en teksten. 3) Geen jargon. Gebruik eenvoudige taal. Als ik lege plekken laat, kies dan verstandige standaardwaarden en markeer ze [AANNAME]. 4) Wanneer een functie geheimen of provisioning nodig heeft, voeg dan een **Begeleide Setup** sectie toe die Rork kan volgen: de exacte vragen die je me moet stellen, de sleutels/ID's die je moet verzamelen, de controles die moeten worden uitgevoerd, en welke aanroepen een Rork Backend Function moeten gebruiken. -------------------------------- ONTDEKKING (stel deze, gegroepeerd & beknopt, en WACHT) -------------------------------- A) Visie & Gebruikers 1) App naam + één-regel pitch? 2) Voor wie is het (één zin)? Welk probleem lossen ze op met de app? 3) In <2 minuten, wat moet een nieuwe gebruiker kunnen doen? B) Kernervaring 4) Kies een app-vorm: [Home feed] [Taak/Checklist] [Tracker/Logger] [Sociaal/Gemeenschap] [Boeking/Planning] [Notities/Dagboek] [Leren/Oefenen] [Winkelen] [Overig: ___] 5) Top 3 dingen die gebruikers elke sessie doen (korte werkwoorden). 6) Top 3 frustraties om te vermijden. C) Schermen & Navigatie 7) Indeling: [Tabs (≤5)] [Enkele flow (Stack)] [Home + Details] [Lade] 8) Tot 6 schermnamen (of zeg "Jij beslist"). 9) Voor elk scherm, wat moet een gebruiker kunnen doen? (bullets) D) Inhoud (gewone woorden — geen schema's) 10) Welke "dingen" behandelt de app? (bijv. workouts, notities, evenementen, foto's) 11) Voor elke ding, welke details zijn belangrijk? (bijv. voor "workout": titel, duur, notities) 12) Geef 2–3 realistische voorbeelden per ding. E) Live Data & Integraties 13) Heb je live/gedeelde data nodig? [Nee (lokaal‑alleen)] [Ja: van API's] [Ja: Supabase (begeleide)] [Andere dienst: ___] 14) Als API's: noem de dienst(en) + welke data je wilt (of zeg "Stel API's/eindpunten voor"). 15) Zijn er privé-sleutels betrokken? [Ja/Nee]. Als Ja, zullen we die aanroepen via Rork Backend Functions. F) Aanmelden / Betaalmuur / Meldingen (optioneel) 16) Aanmelden: [Geen login] [E-mail/Wachtwoord] [Magische link] [Apple] [Google] 17) Abonnementen of eenmalige ontgrendelingen? Als ja: wat wordt er betaald ontgrendeld? 18) Pushmeldingen? [Nee] [Ja]. Als Ja: 3 triggers + voorbeeldtekst. G) Visuele Sfeer & Toon 19) 6–8 sfeerwoorden (bijv. kalm, gedurfd, speels, premium). 20) Referentie-apps/sites (en wat je leuk vindt). 21) Teksttoon: [Vriendelijk] [Direct] [Speels] [Professioneel] [Coach-achtig] H) Toegang & Inclusie 22) Talen/regio's? Toegankelijkheid must-haves (lettergrootte, hoog contrast, VoiceOver)? 23) Zijn er gevoelige inhoud of leeftijdsgrenzen? I) Analytics (optioneel) 24) Analytics: [Uit (standaard)] [Aan]. Als AAN: de 3 gebeurtenissen die het belangrijkst zijn. -------------------------------- LEVERINGEN & UITVOERFORMAT -------------------------------- # Rork‑Klaar App Specificatie (Front‑End + Begeleide Backend) ## 1) Product Snapshot - Eén-regel: - Voor wie het is: - Dag‑1 belofte (<2 minuten): - v1 succes (eenvoudige uitkomsten/metrics): ## 2) Ervaringsverhaal (3–5 kleine scènes) Scène = Trigger → Wat de gebruiker ziet → Wat ze doen → Wat ze voelen → Succes ## 3) Schermen & Navigatie - App-indeling: - Tabs (indien aanwezig): namen/iconen/volgorde - Scherminventaris: | ID | Scherm | Waarom het bestaat | Belangrijke acties | Lege staat | |----|--------|---------------|-------------|-------------| - Navigatieregels (wat opent van waar; teruggedrag) ## 4) Kernflows (staplijsten met vriendelijke fouten) - Flow A: Trigger → Stap 1 → Stap 2 → … → Succes / Fout (+ bericht) - Flow B: … - Flow C: … Inclusief snelle "wat kan er misgaan?" en het exacte gebruikersgerichte bericht. ## 5) Inhoud & Data (eenvoudig, automatisch afgeleid) Beschrijf in gewone taal (geen schema's): - De "dingen" die de app behandelt en de details die we voor elk opslaan - Hoe gebruikers ze toevoegen/bewerken (formulieren/lijsten) - Voorbeelditems (schoongemaakt van mijn monsters) - Opslagnotities: [Op apparaat], [Opgehaald van <API>], of [Opgeslagen via Rork Backend Function + externe DB] - Gebruik [AANNAME] waar je standaardwaarden kiest ## 6) Externe API's & Aanroepen (concreet, bibliotheek-onafhankelijk) - Dienstenlijst (naam → waarvoor we het gebruiken) - Eindpunt tabel: | Aanroepnaam | Methode | Eindpunt/Query | Invoer | Antwoord (vorm, kort) | Auth | Notities | |-----------|--------|----------------|--------|--------------------------|------|-------| - Elke aanroep die geheimen nodig heeft → markeer **[Gebruik Rork Backend Function]** met een één-regel reden (verberg sleutel, rate-limit, transformeer). - Geef 2–3 voorbeeldverzoeken/antwoorden voor de belangrijkste aanroepen. ## 7) Visueel Systeem (tokens van sfeer) - Kleuren (HEX): Primair, Secundair, Achtergrond, Oppervlak, Tekst (primair/secundair), Succes, Waarschuwing, Fout - Typografie: H1/H2/H3, Lichaam, Bijschrift (families + px) - Vorm & ruimte: straal + ruimte stappen (bijv. 4/8/12/16/24) - Beweging: duur (bijv. 120/200/320ms) + easing - Suggestie voor iconenset ## 8) Tekst & Staten - Koppen, knoppen, hulplijn voor elk scherm - Lege staten (wat gebruikers zien zonder data) - Foutmeldingen (eenvoudig, vriendelijk, actiegericht) ## 9) Optionele UX (alleen als gekozen) - **Aanmelden**: schermen + tekst. Label **[Begeleide Setup Vereist]** en voeg het script hieronder toe zodat Rork me kan vragen wat het nodig heeft. - **Betaalmuur (abonnementen/eens)**: betaalmuur tekst + wat ontgrendeld is. Label **[Begeleide Setup Vereist]** (+ script). - **Meldingen**: triggers, voorbeeld push tekst, diepe links. - **Analytics**: gebeurtenisnamen + wanneer ze afgaan (als AAN). ## 10) Toegankelijkheid & Inclusie - Lettergrootte, contrastdoel (≥4.5:1), hit targets (≥44×44), schermlezerlabels - Eventuele inhoudsbeperkingen of leeftijdsgrens ## 11) Store-Klaarheid - App naam, ondertitel, 3–5 sleutelwoordthema's - Korte beschrijving (≤80 tekens) + volledige beschrijving - Screenshotplan (welke schermen + bijschriften) - Privacy "voedingslabel" notities (welke data, waarom) - Ondersteunings-URL & contact e-mail - **Publicatienotities**: Gebruik Rork’s ingebouwde **App Store** publicatie; **Google Play** vereist export naar Expo EAS. [Info] [AANNAME] waar ik niet heb gespecificeerd. ## 12) Begeleide Setup — Scripts voor Rork om met mij uit te voeren (Neem alleen secties op die relevant zijn voor wat ik heb gekozen.) ### 12A) Supabase (DB + Auth) — als gevraagd - **Doel**: Gebruik Supabase voor clouddata en/of auth zonder geheimen bloot te stellen. - **Rork moet Mij VRAAG** (één voor één): 1) "Plak je Supabase Project URL" 2) "Plak je **anon/public** sleutel (client-veilig)." 3) "Plak je **service rol** sleutel (server-alleen). Dit zal alleen worden opgeslagen in een **Rork Backend Function** om het te beschermen." 4) "Wil je E-mail/Wachtwoord of Magische Link auth?" 5) "Lijst de 'dingen' die je in de cloud wilt (bijv. workouts, notities). Bevestig voor elk de eenvoudige velden die je wilt opslaan." - **Rork moet DOEN**: - Maak **Rork Backend Functions** voor alle aanroepen die geheimen vereisen (lezen/schrijven met service rol; auth tokens uitwisseling). - Configureer de client om de **anon sleutel** te gebruiken voor openbare lezingen wanneer veilig; gebruik Backend Function voor schrijfacties of beschermde lezingen. - Genereer minimale tabellen op basis van mijn "dingen & details" (namen, velden, types) en een migratieplan. Als je niet zeker bent, stel dan een standaard voor en tag [AANNAME]. - Verifieer setup: voer een gezondheidscontrole uit en bevestig succes/fout met een vriendelijk bericht. - **Notities**: Als sociale login (Apple/Google) wordt gevraagd, informeer me dat ik een aangepaste Expo Dev Build nodig heb na export; houd UX-schermen op hun plaats en tag als **[Vereist Export + EAS]**. ### 12B) E-mail Aanmelden of Magische Link — als gevraagd - **VRAAG**: "Wil je E-mail/Wachtwoord of Magische Link? Welke afzender naam/e-mail moeten gebruikers zien?" - **DOEN**: - Scaffold front-end schermen (Aanmelden, Aanmelden, Wachtwoord Vergeten / Magische Link). - Als je Supabase gebruikt: verbind met Supabase Auth via Backend Function of client SDK waar veilig; anders tag als **[Vereist Export + EAS]**. - Geef tekst en foutmeldingen; bevestig een test rondreis met mij. ### 12C) Abonnementen / Aankopen — als gevraagd - **VRAAG**: "Wat wordt ontgrendeld met Pro? Prijs? Gratis proefperiode?" - **DOEN**: - Bouw betaalmuur en 'beheers abonnement' UX. - Tag integratie als **[Vereist Export + EAS]** en stel RevenueCat of vergelijkbaar voor. Houd UI live met mockstaat en een 'Herstel aankopen' knop. ### 12D) Pushmeldingen — als gevraagd - **VRAAG**: "Lijst 2–3 triggers voor pushes; zijn er stille uren?" - **DOEN**: - Implementeer in-app lokale meldingen nu; tag externe push als **[Vereist Export + EAS]** en stel FCM setup voor na export. ## 13) Rork Bouwinstructies (plak-klaar) === BEGIN RORK PROMPT === Bouw een cross-platform React Native app met Expo volgens de "Rork‑Klaar App Specificatie (Front‑End + Begeleide Backend)" hierboven. Beperkingen - Maak GEEN aangepaste server. Voor elke aanroep die geheimen of schrijfrechten nodig heeft, maak **Rork Backend Functions** en vraag me om de vereiste sleutels tijdens de **Begeleide Setup**. Rork Backend Functions worden aangedreven door TRPC. - Lokale data gebruikt opslag op het apparaat; externe data gebruikt alleen de expliciet vermelde externe API's of Supabase (indien gekozen). - Implementeer Schermen, Navigatie, Kernflows, Visuele tokens, en Tekst precies zoals gespecificeerd. - Implementeer vriendelijke lege/laden/foutstaten. - Als Aanmelden/Betaalmuur/Meldingen/Analytics NIET zijn gekozen, laat ze dan weg. - Bereid een **App Voorbeeld** en een **App Store-klaar** bouwplan voor. Merk op dat **Google Play** export + Expo EAS vereist. - Als iets onduidelijk is, kies dan een verstandige standaard en markeer het [AANNAME] in opmerkingen. === EINDE RORK PROMPT === ## 14) Ideeën voor de Volgende Iteratie - 3 snelle winsten voor duidelijkheid/snelheid - 3 ideeën om activatie/retentie te verhogen.