For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /de/docs/mobile/first-feature.md (or send Accept: text/markdown).
Dein erstes Feature bauen
Ein End-to-End-Weg von einem neuen Bildschirm zu serverseitig geprüften Daten.
Schritt-für-Schritt für Einsteiger
Voraussetzungen: Lesen Sie die beiden Anfänger-Handbücher unten, schließen Sie die lokale Mobile-Einrichtung ab und öffnen Sie dieses Repository im Editor an seinem Stamm. Mobile-Einstellungen gehören in apps/mobile/.env.local; Expo liest die Stamm-.env nicht. Die Vorschau benötigt ein erreichbares Backend für echte Daten.
Kurze Begriffe: Ein Arbeitsbereich umfasst die einzelnen Benutzer, Daten und Einstellungen eines Teams. Der Server ist das vertrauenswürdige Backend; Halten Sie Anbieterschlüssel aus Browser- und Telefoncodes fern. Eine Migration ist eine versionierte Datenbankänderung, die Tabellen erstellt oder aktualisiert. Ein KI-Modell ist der Motor, der antwortet; Der Modellkatalog ist die Liste der verfügbaren Modell-IDs und Preise des Servers. Ein Anbieter ist ein externer Dienst wie ein KI-, E-Mail- oder Abrechnungsdienst. Eine Berechtigung ist eine Bewilligung, die einem Arbeitsbereich die Nutzung einer Funktion ermöglicht. Ein Webhook ist eine Nachricht, die ein Dienst an den URL eines anderen Dienstes sendet.
1. Öffnen Sie .agents/skills/add-a-mobile-screen/SKILL.md — oder bitten Sie Ihren Coding-Agenten, ihr zu folgen — und erstellen Sie einen kleinen Bildschirm, zum Beispiel apps/mobile/app/(app)/ideas.tsx mit seiner Logik in apps/mobile/src/ideas/.
2. Öffnen Sie den neuen Bildschirm auf Ihrem Gerät über die laufende Vorschau und bestätigen Sie, dass er für ein angemeldetes Mitglied rendert.
3. Prüfen Sie ein abgemeldetes Konto und ein Konto eines zweiten Workspaces — alles, was privat bleiben muss, muss verweigert zurückkommen oder fehlen, weil der Server die Grenze durchsetzt.
Nennen Sie für eigenen Code den Bildschirm, die Daten, die er zeigt, wer ihn sehen darf und die zu behandelnden Fehler. Geben Sie Ihrem Coding-Agenten diese Aufgabe und bitten Sie ihn, AGENTS.md, .ai/PROJECT_CONTEXT.md und die .ai/-Spiegel der Dateien zu lesen, die er anfassen wird; lassen Sie ihn Dateien und Prüfungen vor dem Bearbeiten auflisten und Ihnen den Diff zeigen. Verwenden Sie Beispielwerte; fügen Sie niemals ein echtes Geheimnis ein.
Den Bildschirm erstellen
Fügen Sie eine Routendatei unter apps/mobile/app/(app)/ hinzu — Expo Router macht die Datei zu einem Bildschirm im angemeldeten Stapel. Setzen Sie ihn aus apps/mobile/src/ui-Primitives zusammen (Screen, Card, Title, Detail, AppButton), damit er Abstände, Typografie und Farben der App erbt.
apps/mobile/app/(app)/ideas.tsx
apps/mobile/src/ideas/index.ts
apps/mobile/src/ideas/index.test.tsÜber den typisierten Client lesen und schreiben
Fetchen Sie über apps/mobile/src/api/client.ts, der die gespeicherte Sitzung an jede Anfrage gegen EXPO_PUBLIC_API_URL anhängt und typisierte Fehler zurückgibt. Halten Sie Payloads identisch zum Web-Vertrag — dieselben Endpunkte bedienen beide Clients.
Wenn der Bildschirm Workspace-Daten liest, umschließen Sie den Aufruf mit den Helfern in apps/mobile/src/offline/, damit ein Netzwerkfehler auf die zwischengespeicherte Kopie zurückfallen kann — nur bei einem Netzwerkfehler, niemals nach einem Auth- oder Berechtigungsfehler.
Zugriff und Wiederherstellung prüfen
Prüfen Sie ein angemeldetes Mitglied, ein Mitglied eines anderen Workspaces, eine abgemeldete Sitzung und den Flugmodus: Mitgliedsdaten erscheinen, fremde Daten werden verweigert, ein abgemeldetes Gerät kehrt zur Anmeldung zurück, und die Offline-Kopie wird nur bei einem Netzwerkfehler ausgeliefert.
Die Zustände auspolieren
Geben Sie dem Bildschirm Lade-, Leer- und Fehlerzustände über die gemeinsamen Primitives, fügen Sie jede neue Zeichenfolge allen vier i18n-Katalogen hinzu und verdrahten Sie die Route in die Home- oder Einstellungs-Navigation, damit ein Mitglied sie tatsächlich findet.