Bouw je eerste feature

Walkthrough voor beginners

Vereisten: lees de twee beginnersgidsen hieronder, voltooi de lokale Mobile-setup en open deze repository bij zijn root in je editor. Mobile-instellingen horen in apps/mobile/.env.local; Expo leest de root-.env niet. De preview heeft een bereikbare backend nodig voor echte gegevens.

Korte termen: een werkruimte bestaat uit de afzonderlijke gebruikers, gegevens en instellingen van één team. De server is de vertrouwde backend; houd providersleutels uit de browser- en telefooncode. Een migratie is een versiebeheer van de database, waarbij tabellen worden gemaakt of bijgewerkt. Een AI-model is de motor die antwoord geeft; de modelcatalogus is de serverlijst met beschikbare model-ID's en prijzen. Een provider is een externe service, zoals een AI-, e-mail- of factureringsservice. Een recht is een subsidie ​​waarmee een werkruimte een functie kan gebruiken. Een webhook is een bericht dat de ene service naar de URL van een andere service verzendt.

1. Open .agents/skills/add-a-mobile-screen/SKILL.md — of vraag je coding-agent hem te volgen — en maak één klein scherm, bijvoorbeeld apps/mobile/app/(app)/ideas.tsx met zijn logica in apps/mobile/src/ideas/.

2. Open het nieuwe scherm op je apparaat via de draaiende preview en bevestig dat het rendert voor een ingelogd lid.

3. Controleer een uitgelogd account en een tweede-workspace-account — alles wat privé moet blijven moet geweigerd terugkomen of afwezig zijn, omdat de server de grens afdwingt.

Noem voor eigen code het scherm, de gegevens die het toont, wie het mag zien en de te behandelen fouten. Geef je coding-agent deze taak en vraag hem AGENTS.md, .ai/PROJECT_CONTEXT.md en de .ai/-spiegels van de bestanden te lezen die hij zal aanraken; laat hem bestanden en controles opsommen voor het bewerken; en laat hem je de diff tonen. Gebruik voorbeeldwaarden; plak nooit een echt geheim.

• Voordat u begint
• Basisbeginselen van de terminal
• Mobiele lokale installatie
• Agentprompts en projectgeheugen

Het scherm maken

Voeg een routebestand toe onder apps/mobile/app/(app)/ — Expo Router maakt van het bestand een scherm in de ingelogde stack. Stel het samen uit apps/mobile/src/ui-primitives (Screen, Card, Title, Detail, AppButton) zodat het de spatiëring, typografie en kleuren van de app erft.

apps/mobile/app/(app)/ideas.tsx
apps/mobile/src/ideas/index.ts
apps/mobile/src/ideas/index.test.ts

Lezen en schrijven via de getypte client

Fetch via apps/mobile/src/api/client.ts, die de opgeslagen sessie aan elk verzoek tegen EXPO_PUBLIC_API_URL vastmaakt en getypte fouten teruggeeft. Houd payloads identiek aan het webcontract — dezelfde endpoints bedienen beide clients.

Als het scherm workspace-gegevens leest, wikkel dan de aanroep met de helpers in apps/mobile/src/offline/ zodat een netwerkfout kan terugvallen op de gecachte kopie — alleen bij een netwerkfout, nooit na een auth- of rechtenfout.

De server over eigendom laten beslissen

De server lost het ingelogde lid en de actieve workspace op en scopeert elke record op workspaceId. De app toont wat de server teruggeeft; hij stuurt nooit een workspace-id die de server zou moeten vertrouwen.

Als de gegevens die je nodig hebt geen endpoint hebben, voeg die dan eerst toe op de backend — bedrijfsregels leven op de server. Een verborgen knop in de app dwingt geen toegang af.

Controleer toegang en herstel

Controleer een ingelogd lid, een lid van een andere workspace, een uitgelogde sessie en vliegtuigmodus: ledengegevens verschijnen, vreemde gegevens worden geweigerd, een uitgelogd apparaat keert terug naar aanmelden, en de offline kopie wordt alleen geserveerd bij een netwerkfout.

• Offline leescache
• Mobile-beveiligingschecklist

De toestanden polijsten

Geef het scherm laad-, leeg- en fouttoestanden via de gedeelde primitives, voeg elke nieuwe tekenreeks toe aan alle vier de i18n-catalogi en verdraad de route in de home- of instellingennavigatie zodat een lid het echt kan vinden.