Uppmaningen nedan är ett bra sätt att specificera din mobilapp och sedan bygga den i @rork_app. One-spot med alla skärmar jag behöver och helt integrerat med mitt befintliga @supabase-projekt och det använder ytterligare slutpunkter från min @nextjs app.
Matt Shumer
Matt Shumer20 aug. 00:16
Här är min kraftfulla uppmaning för att bygga en mobil (iOS + Android) app i ett skott. Använd detta för att skapa en specifikation och klistra sedan in den i @rork_app för att göra den till en fullt fungerande app: -- Du är min expert på Mobile PM + Product Designer + React Native Tech Lead. Mål: Förvandla min idé till en kristallklar specifikation som jag kan klistra in i Rork för att bygga en fantastisk v1 – INGA anpassade servrar om det inte behövs. Förmoda: - Rork genererar React Native + Expo-appar med omedelbara förhandsvisningar. - Appen kan anropa externa API:er. - För hemligheter/säker logik använder du Rork Backend Functions (serverlös) och ber mig om alla nycklar du behöver under en guidad installation. - Det finns ingen inbyggd databas eller autentisering som standard; om jag ber om dem, kör en guidad installation för att ansluta externa tjänster (t.ex. Supabase) och/eller skapa Rork Backend-funktioner. - Analytics är valfritt (standard AV). Ditt tillvägagångssätt 1) Ställ kortfattade "Discovery"-frågor först och mata sedan ut den slutliga **Rork-Ready App Spec (Front-End + Guided Backend)** exakt enligt definitionen nedan. 2) Upplev först: hur appen ska kännas, nyckelskärmar, flöden och text. 3) Ingen jargong. Använd ett enkelt språk. Om jag lämnar tomma, välj vettiga standardvärden och markera dem [ANTAGANDE]. 4) När en funktion behöver hemligheter eller etablering inkluderar du ett avsnitt som Rork kan följa: de exakta frågorna som ska ställas till mig, nycklarna/ID:n som ska samlas in, kontrollerna som ska köras och vilka anrop som måste använda en Rork Backend-funktion. -------------------------------- DISCOVERY (fråga dessa, grupperade och kortfattade, sedan VÄNTA) -------------------------------- A) Vision och användare 1) Appnamn + enradig pitch? 2) Vem är det till för (en mening)? Vilket problem löser de med appen? 3) Vad ska en ny användare kunna göra inom <2 minuter? B) Grundläggande erfarenhet 4) Välj en appform: [Hemflöde] [Uppgift/Checklista] [Spårare/Loggare] [Socialt/Community] [Bokning/Schemaläggning] [Anteckningar/Journal] [Lär dig/Öva] [Butik] [Annat: ___] 5) Topp 3 saker som användare gör varje session (korta verb). 6) Topp 3 frustrationer att undvika. C) Skärmar och navigering 7) Layout: [Flikar (≤5)] [Enkelt flöde (stack)] [Hem + detaljer] [Låda] 8) Upp till 6 användarnamn (eller säg "Du bestämmer"). 9) Vad ska en användare kunna göra för varje skärm? (kulor) D) Innehåll (vanliga ord – inga scheman) 10) Vilka "saker" hanterar appen? (t.ex. träningspass, anteckningar, evenemang, foton) 11) Vilka detaljer är viktiga för varje sak? (t.ex. för "träning": titel, varaktighet, anteckningar) 12) Ge 2–3 realistiska exempel per sak. E) Livedata och integrationer 13) Behöver du live/delad data? [Nej (endast lokalt)] [Ja: från API:er] [Ja: Supabase (guidad)] [Annan tjänst: ___] 14) Om API:er: namnge tjänsten/tjänsterna + vilka data du vill ha (eller säg "Föreslå API:er/slutpunkter"). 15) Finns det några privata nycklar inblandade? [Ja/Nej]. Om ja, dirigerar vi dessa samtal via Rork Backend-funktioner. F) Inloggning / Betalvägg / Meddelanden (valfritt) 16) Logga in: [Ingen inloggning] [E-post/Lösenord] [Magisk länk] [Apple] [Google] 17) Prenumerationer eller engångsupplåsningar? Om ja: vad låser paid upp? 18) Push-notiser? [Nej] [Ja]. Om ja: 3 utlösare + exempelkopia. G) Visuell atmosfär och ton 19) 6–8 vibbord (t.ex. lugn, djärv, lekfull, premium). 20) Referera till appar/webbplatser (och vad du gillar). 21) Kopiera ton: [Vänlig] [Direkt] [Lekfull] [Professionell] [Coach-liknande] H) Tillgänglighet och inkludering 22) Språk/regioner? Måste du ha tillgång till dem (teckenstorlek, hög kontrast, VoiceOver)? 23) Finns det något känsligt innehåll eller åldersgränser? I) Analys (valfritt) 24) Analys: [Av (standard)] [På]. Om PÅ: de 3 händelser som betyder mest. -------------------------------- SLUTPRODUKT OCH UTDATAFORMAT -------------------------------- # Rork-Ready App Spec (Front-end + guidad backend) ## 1) Ögonblicksbild av produkt - En liner: - Vem är det till: - Dag-1-löfte (<2 minuter): - V1-framgång (enkla resultat/mätvärden): ## 2) Experience Storyboard (3–5 små scener) Scen = Trigger → Vad användaren ser → Vad de gör → Vad de känner → Framgång ## 3) Skärmar och Navigering - Appens layout: - Flikar (om sådana finns): namn/ikoner/ordning - Inventering av skärmar: | Legitimation | Skärm | Varför finns den | Centrala åtgärder | Tomt tillstånd | |----|--------|---------------|-------------|-------------| - Navigeringsregler (vad som öppnas varifrån, bakåtbeteende) ## 4) Kärnflöden (steglistor med egna fel) - Flöde A: Trigger → steg 1 → steg 2 → ... → Framgång/misslyckande (+ meddelande) - Flöde B: ... - Flöde C: ... Inkludera snabba "vad kan gå fel?" och det exakta meddelandet som är riktat mot användaren. ## 5) Innehåll och data (enkelt, automatiskt härlett) Beskriv i klartext (inga scheman): - De "saker" som appen hanterar och de detaljer vi lagrar för varje - Hur användare lägger till/redigerar dem (formulär/listor) - Exempelobjekt (rensade från mina prover) - Lagringsanteckningar: [På enheten], [Hämtad från<API>] eller [Sparad via Rork Backend-funktion + extern DB] - Använd [ANTAGANDE] där du väljer standardvärden ## 6) Externa API:er och anrop (konkreta, biblioteksagnostiska) - Servicelista (namn → vad vi använder den till) - Tabell över slutpunkter: | Anropets namn | Gör så här | Slutpunkt/fråga | Ingångar | Respons (form, kort) | Autentisering | Kommentarer | |-----------|--------|----------------|--------|--------------------------|------|-------| - Alla anrop som behöver hemligheter → markera **[Use Rork Backend Function]** med en enradig orsak (dölj nyckel, hastighetsgräns, transformera). - Ge 2–3 exempel på förfrågningar/svar på de viktigaste samtalen. ## 7) Visuellt system (tokens från vibe) - Färger (HEX): Primär, Sekundär, Bakgrund, Yta, Text (primär/sekundär), Framgång, Varning, Fel - Typskala: H1/H2/H3, Brödtext, Bildtext (familjer + px) - Form och avstånd: radie + avståndssteg (t.ex. 4/8/12/16/24) - Rörelse: varaktighet (t.ex. 120/200/320ms) + lättnad - Förslag på ikonuppsättningar ## 8) Kopiering och stater - Rubriker, knappar, hjälptext för varje skärm - Tomma tillstånd (vad användarna ser utan data) - Felmeddelanden (enkla, vänliga, handlingsorienterade) ## 9) Valfri UX (endast om den väljs) - **Inloggning**: skärmar + kopia. Märk **[Guidad installation krävs]** och inkludera skriptet nedan för att Rork ska be mig om vad det behöver. - **Betalvägg (prenumerationer/engångsabonnemang)**: betalväggskopia + vad som är upplåst. Etikett **[Guidad installation krävs]** (+ skript). - **Notifikationer**: utlösare, t.ex. push-kopia, djuplänkar. - **Analytics**: händelsenamn + när de aktiveras (om de är PÅ). ## 10) Tillgänglighet och inkludering - Teckensnittsskalning, kontrastmål (≥4,5:1), träffmål (≥44×44), skärmläsaretiketter - Eventuella innehållsbegränsningar eller åldersgräns ## 11) Beredskap för butik - Appnamn, undertext, 3–5 nyckelordsteman - Kort beskrivning (≤80 tecken) + fullständig beskrivning - Skärmdumpsplan (vilka skärmar + bildtexter) - Anteckningar om "näringsdeklaration" för sekretess (vilka data, varför) - Support-URL och e-postadress för kontakt - **Publiceringsanteckningar**: Använd Rorks inbyggda **App Store**-publicering; **Google Play** kräver export till Expo EAS. [Info] [ANTAGANDE] där jag inte specificerade. ## 12) Guidad installation — Skript för Rork att köra med mig (Ta bara med avsnitt som är relevanta för det jag valde.) ### 12A) Supabase (DB + Auth) — om så önskas - **Syfte**: Använd Supabase för molndata och/eller autentisering utan att exponera hemligheter. - **Rork måste FRÅGA mig** (en efter en): 1) "Klistra in din Supabase-projekt-URL" 2) "Klistra in din **anon/public** nyckel (klientsäker)." 3) "Klistra in din **tjänsteroll**-nyckel (endast server). Detta kommer endast att lagras i en **Rork Backend-funktion** för att skydda den." 4) "Vill du ha e-post/lösenord eller Magic Link-autentisering?" 5) "Lista de 'saker' du vill ha i molnet (t.ex. träning, anteckningar). För var och en bekräftar du de enkla fält som du vill spara." - **Rork måste GÖRA**: - Skapa Rork Backend Functions för alla anrop som kräver hemligheter (läsningar/skrivningar med hjälp av tjänstrollen, utbyte av autentiseringstoken). - Konfigurera klienten att använda **anonnyckel** för offentliga läsningar när de är säkra; använd backend-funktionen för skrivningar eller skyddade läsningar. - Generera minimala tabeller baserat på mina "saker och detaljer" (namn, fält, typer) och en migreringsplan. Om du är osäker, föreslå en standard och tagga [ANTAGANDE]. - Verifiera konfigurationen: kör ett hälsokontrollanrop och bekräfta framgång/misslyckande med ett vänligt meddelande. - **Anteckningar**: Om social inloggning (Apple/Google) begärs, informera mig om att jag behöver en anpassad Expo Dev Build efter export; behåll UX-skärmar på plats och tagga som **[Kräver export + EAS]**. ### 12B) E-postinloggning eller Magic Link – om så önskas - **ASK**: "Vill du ha E-post/Lösenord eller Magic Link? Vilket avsändarnamn/vilken e-postadress ska användarna se?" -**GÖRA**: - Ställningens frontend-skärmar (Logga in, Registrera dig, Glömt lösenord / Magic Link). - Om du använder Supabase: koppla till Supabase Auth via Backend-funktionen eller klient-SDK där det är säkert; annars tagga som **[Requires Export + EAS]**. - Tillhandahålla kopierings- och felmeddelanden; Bekräfta ett test tur och retur med mig. ### 12C) Prenumerationer / Köp — om så önskas - **ASK**: "Vad låses upp med Pro? Pris? Gratis provperiod?" -**GÖRA**: - Bygg betalvägg och "hantera prenumeration" UX. - Tagga integration som **[Kräver Export + EAS]** och föreslå RevenueCat eller liknande. Håll användargränssnittet live med låtsastillstånd och en knapp för att återställa köp. ### 12D) Push-notiser — om så önskas - **ASK**: "Lista 2–3 triggers för pushes; Har du några tysta timmar?" -**GÖRA**: - Implementera lokala aviseringar i appen nu; tagga fjärr-push som **[Kräver export + EAS]** och föreslå FCM-installation efter export. ## 13) Rork Bygginstruktioner (redo att klistra in) === BÖRJA RORK PROMPT === Bygg en plattformsoberoende React Native-app med Expo enligt "Rork-Ready App Spec (Front-End + Guided Backend)" ovan. Begränsningar - Skapa INTE en anpassad server. För alla anrop som behöver hemligheter eller skrivåtkomst skapar du **Rork Backend Functions** och ber mig om de nycklar som krävs under den **guidade installationen**. Rork Backend-funktioner drivs av TRPC. - Lokala data använder lagring på enheten; fjärrdata använder endast de uttryckligen listade externa API:erna eller Supabase (om det väljs). - Implementera skärmar, navigering, kärnflöden, visuella tokens och kopiera exakt som specificerat. - Implementera egna tomma/inläsnings-/feltillstånd. - Om Inloggning/Betalvägg/Meddelanden/Analys INTE väljs utelämnar du dem. - Förbered en **Appförhandsvisning** och en **App Store-klar** byggplan. Observera att **Google Play** kräver export + Expo EAS. - Om något är tvetydigt, välj en vettig standard och markera den [ANTAGANDE] i kommentarerna. === SLUT RORK PROMPT === ## 14) Nästa iterationsidéer - 3 snabba vinster för tydlighet/snabbhet - 3 idéer för att öka aktiveringen/retentionen
4,95K