> ## Documentation Index > Fetch the complete documentation index at: https://supastack.dev/llms.txt > Use this file to discover all available pages before exploring further. > For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt # Construire votre première fonctionnalité Un parcours de bout en bout, d'un nouvel écran à des données vérifiées par le serveur. ## Parcours pas à pas pour débuter Prérequis : lisez les deux guides débutants ci-dessous, terminez la configuration locale Mobile et ouvrez ce dépôt à sa racine dans votre éditeur. Les paramètres Mobile vont dans `apps/mobile/.env.local` ; Expo ne lit pas le .env racine. L'aperçu a besoin d'un backend accessible pour les données réelles. Termes rapides : un espace de travail est constitué des utilisateurs, des données et des paramètres distincts d'une équipe. Le serveur est le backend de confiance ; gardez les clés du fournisseur hors du code du navigateur et du téléphone. Une migration est une modification de base de données versionnée qui crée ou met à jour des tables. Un modèle d'IA est le moteur qui répond ; le catalogue de modèles est la liste du serveur des identifiants de modèles et des prix disponibles. Un fournisseur est un service externe tel qu'un service d'IA, de messagerie ou de facturation. Un droit est une subvention qui permet à un espace de travail d'utiliser une fonctionnalité. Un webhook est un message qu'un service envoie au URL d'un autre service. 1. Ouvrez `.agents/skills/add-a-mobile-screen/SKILL.md` — ou demandez à votre agent de codage de le suivre — et créez un petit écran, par exemple `apps/mobile/app/(app)/ideas.tsx` avec sa logique dans `apps/mobile/src/ideas/`. 2. Ouvrez le nouvel écran sur votre appareil via l'aperçu en cours et confirmez qu'il se rend pour un membre connecté. 3. Vérifiez un compte déconnecté et un compte d'un second workspace — tout ce qui doit rester privé doit revenir refusé ou absent, car le serveur impose la frontière. Pour du code personnalisé, nommez l'écran, les données qu'il affiche, qui peut le voir et les erreurs à gérer. Donnez cette tâche à votre agent de codage et demandez-lui de lire `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` et les miroirs `.ai/` des fichiers qu'il touchera ; de lister les fichiers et les vérifications avant de modifier ; et de vous montrer le diff. Utilisez des valeurs d'exemple ; ne collez jamais un vrai secret. [Avant de commencer](https://supastack.dev/fr/docs/mobile/before-you-start.md) [Bases du terminal](https://supastack.dev/fr/docs/mobile/terminal-basics.md) [Configuration locale mobile](https://supastack.dev/fr/docs/mobile/ship-in-5-minutes.md) [Invites de l'agent et mémoire du projet](https://supastack.dev/fr/docs/mobile/agents.md) ## Créer l'écran Ajoutez un fichier de route sous `apps/mobile/app/(app)/` — Expo Router transforme le fichier en écran dans la pile connectée. Composez-le à partir des primitives `apps/mobile/src/ui` (Screen, Card, Title, Detail, AppButton) pour qu'il hérite de l'espacement, de la typographie et des couleurs de l'application. ``` apps/mobile/app/(app)/ideas.tsx apps/mobile/src/ideas/index.ts apps/mobile/src/ideas/index.test.ts ``` ## Lire et écrire via le client typé Faites vos fetch via `apps/mobile/src/api/client.ts`, qui attache la session stockée à chaque requête vers `EXPO_PUBLIC_API_URL` et retourne des erreurs typées. Gardez les payloads identiques au contrat web — les mêmes endpoints servent les deux clients. Si l'écran lit des données de workspace, enveloppez l'appel avec les helpers de `apps/mobile/src/offline/` pour qu'une panne réseau puisse retomber sur la copie en cache — uniquement sur une erreur réseau, jamais après une erreur d'authentification ou de permission. ## Laisser le serveur décider de la propriété Le serveur résout le membre connecté et le workspace actif et borne chaque enregistrement par `workspaceId`. L'application affiche ce que le serveur retourne ; elle n'envoie jamais un id de workspace auquel le serveur devrait faire confiance. Si les données dont vous avez besoin n'ont pas d'endpoint, ajoutez-le d'abord dans le backend — les règles métier vivent sur le serveur. Un bouton caché dans l'application n'impose pas l'accès. ## Vérifier les accès et la récupération Vérifiez un membre connecté, un membre d'un autre workspace, une session déconnectée et le mode avion : les données du membre apparaissent, les données étrangères sont refusées, un appareil déconnecté retourne à la connexion, et la copie hors ligne n'est servie que sur une erreur réseau. [Cache de lecture hors ligne](https://supastack.dev/fr/docs/mobile/offline.md) [Checklist de sécurité Mobile](https://supastack.dev/fr/docs/mobile/security.md) ## Polir les états Donnez à l'écran des états de chargement, vide et erreur via les primitives partagées, ajoutez chaque nouvelle chaîne aux quatre catalogues i18n et branchez la route dans la navigation d'accueil ou des paramètres pour qu'un membre puisse réellement la trouver. ## Suivant [Construire avec un agent de code](https://supastack.dev/fr/docs/mobile/agents.md)