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 /fr/docs/mobile/first-feature.md (or send Accept: text/markdown).
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.
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.tsLire 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.
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.
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.