15 chapitres5 h 8 minIntermédiaire
Développement mobile
Cours de développement mobile pour le BTS SIO SLAM : React Native et Expo, navigation, API, stockage, capteurs, PWA, publication. Exercices corrigés.
Par Josselyn C., prof de BTS SIO. Mis à jour le .
L'essentiel
Le développement mobile consiste à créer des applications qui s'exécutent sur un smartphone ou une tablette : elles s'installent depuis un magasin d'applications, utilisent l'écran tactile, l'appareil photo, la position ou l'empreinte digitale, et continuent de fonctionner quand le réseau coupe. Au BTS SIO, c'est l'une des quatre situations que l'annexe II.E du référentiel attend dans tes réalisations de l'option SLAM (« du code exécuté sur un terminal mobile »), et l'écrit de cybersécurité (E7 depuis la session 2025, E6 auparavant) interroge sur la sécurité des applications mobiles, comme le sujet SLAM de 2024 et son authentification biométrique.
Ce cours utilise React Native avec Expo, la solution que recommande la documentation officielle de React Native pour démarrer un projet. Tu réutilises ce que tu sais de React et de JavaScript, et une seule base de code produit une application Android et une application iOS.
Avant ce cours : les bases de JavaScript (fonctions, tableaux, objets, async et await), puis le cours React (composants, props, état, useEffect, Context). Pour les chapitres 6 à 9, il te faut une API à appeler : le cours API REST explique comment elle fonctionne, le cours Node.js construit sa base (routes, MySQL, connexion par JWT), et le chapitre 15 donne les routes que l'application mobile ajoute (rafraîchissement, déconnexion, idempotence, appareils).
À la fin de ce cours, tu sauras :
- choisir entre une application native, multiplateforme ou une PWA, et justifier ce choix ;
- créer une application React Native avec Expo, la lancer sur ton téléphone et sur un émulateur ;
- construire ses écrans : composants, styles, navigation par pile et par onglets, listes et formulaires ;
- la relier à une API REST avec une authentification par jeton, et la faire fonctionner hors ligne ;
- écrire côté serveur, en Node.js, les routes qu'elle attend : rafraîchissement du jeton, idempotence, appareils ;
- utiliser l'appareil photo, la géolocalisation, les notifications et la biométrie en respectant les permissions et le RGPD ;
- tester l'application, générer un APK et la publier sur le Play Store ou l'App Store ;
- vérifier sa sécurité avec l'OWASP MASVS et répondre aux questions d'application mobile de l'E6 et de l'E7.
Les versions du cours. Expo SDK 58 (octobre 2026), qui embarque React Native 0.88 et React 19.3, avec Expo Router pour la navigation ; Node.js 24 LTS sur ton poste. Le code est en TypeScript, comme dans le cours React, et c'est le langage du modèle de projet d'Expo : si tu viens de JavaScript, le chapitre 2 te donne le minimum pour le lire. Expo publie un nouveau SDK plusieurs fois par an : les commandes et les concepts restent, quelques noms de fonctions changent. Un encadré le signale quand c'est le cas.
Le fil rouge. Tout le cours construit AppliFrais Mobile, l'application des visiteurs médicaux du laboratoire GSB, un contexte que tu retrouves dans beaucoup d'ateliers de professionnalisation. En déplacement, Lucas Martin, visiteur médical, consulte ses fiches de frais, ajoute un repas avec la photo du ticket, même dans un train sans réseau, et reçoit une notification quand le comptable valide sa fiche. L'application appelle l'API REST d'AppliFrais, celle du cours API REST, à l'adresse https://api.gsb.example/v1 (le domaine .example est réservé à la documentation : il n'existe pas).
Comment travailler. Crée le projet au chapitre 2 et complète-le chapitre après chapitre : chaque extrait de code est le vrai fichier de l'application, vérifié avec le compilateur TypeScript, les tests et une API de démonstration. Chaque chapitre se termine par des exercices dont la réponse est masquée : cherche d'abord, ouvre ensuite.
| Ton objectif | Chapitres à travailler en priorité |
|---|---|
| Découvrir le développement mobile | 1 à 5 |
| Construire l'application mobile de ta réalisation E6 | 2 à 9, puis 11 et 12 |
| Rendre ton application web installable, sans store | 1 et 10 |
| Préparer l'E7 SLAM | 7, 9, 13 et 14 |
| Préparer l'heure de réalisation de l'E6 | 5, 6, 11 et 14 |
Sommaire
Développement mobile
0 chapitre sur 15
- Chapitre 1 : Application native, multiplateforme ou PWA : que choisir ?15 min
- Chapitre 2 : Installer Expo et créer ta première application React Native17 min
- Chapitre 3 : Composants et styles React Native : View, Text, Flexbox20 min
- Chapitre 4 : Navigation avec Expo Router : pile, onglets et paramètres15 min
- Chapitre 5 : FlatList et formulaires : afficher et saisir des données26 min
- Chapitre 6 : Appeler une API REST depuis l'application : fetch, jetons et erreurs39 min
- Chapitre 7 : Stocker des données sur le téléphone : SecureStore, SQLite et mode hors ligne24 min
- Chapitre 8 : Caméra, photos et géolocalisation : les permissions18 min
- Chapitre 9 : Notifications push et authentification biométrique20 min
- Chapitre 10 : PWA : manifest, service worker et installation18 min
- Chapitre 11 : Tester une application mobile : Jest, émulateur et téléphone21 min
- Chapitre 12 : Générer l'APK et publier sur le Play Store et l'App Store15 min
- Chapitre 13 : Sécurité d'une application mobile : l'OWASP MASVS appliqué16 min
- Chapitre 14 : Une application mobile à l'E6 et à l'E7 SLAM19 min
- Chapitre 15 : Refresh token, idempotence et notifications : l'API Node.js d'une application mobile24 min
Questions fréquentes
C'est quoi le développement mobile ?
Le développement mobile consiste à créer des applications qui s'exécutent sur un smartphone ou une tablette, Android ou iPhone. Elles s'installent depuis un magasin d'applications ou un fichier, utilisent l'écran tactile et les capteurs du téléphone (appareil photo, position, empreinte), et doivent fonctionner avec un réseau intermittent. On les construit en natif (Kotlin, Swift), en multiplateforme (React Native, Flutter, .NET MAUI) ou sous forme de PWA (comparer les approches).
Quelle est la différence entre une application native, hybride et une PWA ?
Une application native est écrite dans le langage de chaque système (Kotlin pour Android, Swift pour iOS) et utilise directement ses composants. Une application hybride affiche une application web dans une WebView, emballée dans une application installable (Capacitor). Une PWA est un site web avec un manifeste et un service worker, installé depuis le navigateur, sans magasin. React Native et Flutter forment une quatrième famille, le multiplateforme : un seul code produit de vraies applications natives pour Android et iOS (le chapitre 1).
React Native ou Flutter : lequel choisir ?
Les deux produisent des applications Android et iOS de qualité, avec des performances comparables pour une application de gestion. React Native utilise JavaScript ou TypeScript et React : c'est le choix naturel en BTS SIO SLAM, où tu apprends déjà React, et il pilote les composants natifs du système. Flutter utilise le langage Dart et dessine lui-même son interface ; il convient si ton entreprise d'alternance l'utilise ou si tu veux apprendre un nouveau langage.
Faut-il un Mac pour développer une application iPhone ?
Pas avec Expo. Tu testes sur ton iPhone avec l'application Expo Go, et Expo Build compile l'application iOS dans le cloud, sans Xcode. En revanche, le simulateur iOS et la compilation locale demandent un Mac, et toute publication sur l'App Store demande l'adhésion au programme Apple Developer, à 99 dollars par an (publier sur l'App Store).
C'est quoi Expo et Expo Go ?
Expo est le framework recommandé pour créer une application React Native : il fournit l'outil de création de projet, la navigation par fichiers (Expo Router), des modules pour le matériel du téléphone et des services pour compiler et publier. Expo Go est une application gratuite pour Android et iPhone qui exécute ton projet sans le compiler : tu scannes un QR code et ton application s'ouvre. Pour des modules natifs absents d'Expo Go, ou les notifications push sur Android, tu passes à un development build (Expo Go ou development build).
Comment tester une application React Native sur son téléphone ?
Installe Expo Go depuis le Play Store ou l'App Store, lance npx expo start dans le dossier du projet, puis scanne le QR code affiché dans le terminal. Le téléphone et l'ordinateur doivent être sur le même réseau Wi-Fi ; sur un réseau d'établissement qui isole les appareils, lance npx expo start --tunnel. Chaque enregistrement d'un fichier met l'application à jour en moins d'une seconde (premiers pas avec Expo).
Comment générer un APK avec Expo ?
Ajoute à eas.json un profil avec "distribution": "internal" et "android": { "buildType": "apk" }, puis lance eas build --platform android --profile preview. Expo Build compile l'application dans le cloud et donne un lien et un QR code pour télécharger l'APK, à installer directement sur un téléphone ou un émulateur. Pour Google Play, on produit à la place un AAB avec le profil de production (compiler avec Expo Build).
Combien coûte la publication d'une application sur le Play Store et l'App Store ?
Google Play demande 25 dollars, payés une seule fois, pour ouvrir un compte développeur. Apple demande 99 dollars par an (99 € en France) pour le programme Apple Developer. Pour un compte Google Play personnel créé après novembre 2023, il faut en plus un test fermé avec au moins 12 testeurs pendant 14 jours avant la mise en production (publier sur Google Play).
Où stocker un jeton d'authentification dans une application mobile ?
Dans le stockage sécurisé du système, le trousseau sur iOS et le Keystore sur Android, auquel expo-secure-store donne accès. Jamais dans AsyncStorage, un fichier ou une base SQLite, qui sont lisibles en clair sur un téléphone rooté ou dans une sauvegarde. Le jeton d'accès court peut rester en mémoire ; seul le jeton de rafraîchissement a besoin d'être conservé (SecureStore).
Une application mobile compte-t-elle pour l'E6 du BTS SIO SLAM ?
Oui : l'annexe II.E du référentiel demande, dans tes réalisations, au moins trois des quatre situations « code exécuté sur un poste fixe, dans un navigateur, sur un terminal mobile, sur un serveur ». Une application React Native couvre la situation « terminal mobile », et l'API qu'elle appelle la situation « serveur ». Une PWA, elle, s'exécute dans le navigateur du téléphone : vérifie avec ton enseignant avant de compter dessus pour le terminal mobile (l'application mobile à l'E6).