Expo : un générateur de quiz Cyber
Dans cette série, vous allez créer pas à pas une véritable application mobile (Android, iOS) et Web : un générateur de quiz sur la cybersécurité.
Le joueur choisit un thème (mots de passe, hameçonnage, réseaux et Wi-Fi), un niveau et un nombre de questions : l'application génère alors un quiz unique, tiré au hasard, corrige chaque réponse, calcule le score et l'enregistre dans un classement.
- Expo et React Native : créer une application mobile avec JavaScript et TypeScript ;
- les composants, l'état (
useState,useReducer) et les effets (useEffect) ; - la navigation entre écrans avec Expo Router ;
- une base de données Supabase (PostgreSQL) sécurisée par la RLS et des fonctions SQL ;
- le code asynchrone robuste : chargement, erreurs, annulation des requêtes, double-clic... ;
- Git et GitHub : commits, branches, Pull Requests ;
- la mise en ligne de la version Web et la création d'une application Android.
Les écrans de l'application
| Générateur de quiz | Question corrigée | Classement |
|---|---|---|
 |  |  |
Une approche « faire d'abord, comprendre ensuite »
Dans la plupart des séances, vous commencez par le TP : vous écrivez le code, vous le faites fonctionner, puis la partie Notions théoriques explique en détail ce que vous venez de faire. Lorsque la notion est trop nouvelle pour être pratiquée « à l'aveugle » (modélisation de la base de données, sécurité...), la théorie passe en premier.
Un quiz de cybersécurité se doit d'être... sécurisé ! Tout au long de la série, vous apprendrez à ne jamais faire confiance aux données reçues, à protéger la base de données, à empêcher la triche sur le score et à éviter les bugs liés aux requêtes réseau (réponses dans le désordre, double envoi...).
Les tutoriels de la série
| Tutoriel | Contenu |
|---|---|
| 1. Démarrer avec Expo | installer Expo, créer le projet, Git et GitHub |
| 2. TypeScript pour le quiz | types, données locales, fonctions pures, tests, mélange de Fisher-Yates |
| 3. Composants et styles | branches Git, JSX, composants, listes, Flexbox, images |
| 4. État et interactions | useState, score, machine à états useReducer, useEffect |
| 5. Navigation avec Expo Router | écrans, générateur de quiz, paramètres d'URL validés |
| 6. La base de données Supabase | MCD, tables, données, RLS, connexion |
| 7. Données asynchrones robustes | chargement, erreurs, AbortController, Storage |
| 8. Joueurs et sécurité | connexion anonyme, pseudo, fonctions SQL, score calculé par le serveur |
| 9. Le classement | fonction SQL de classement, FlatList |
| 10. Qualité et déploiement | recette, mise en ligne Web, application Android |
| 11. Aller plus loin | accessibilité, retour haptique, proposer des questions |
Prérequis
- les bases de JavaScript (variables, fonctions, tableaux, objets) ;
- un ordinateur avec Node.js (version 22.13 ou plus récente), Git et VS Code ;
- un compte GitHub et, plus tard, un compte Supabase (gratuits) ;
- idéalement un téléphone Android ou iOS avec l'application Expo Go (sinon, le navigateur suffit).
Cette série s'inspire du projet Un quiz sur la Cyber !, réalisé avec Next.js : ici, l'application est mobile et chaque étape est plus détaillée.