Formation Ionic avec Capacitor et React

Programme de formation Ionic avec Capacitor et React

[Jour 1 – Matin]

Positionnement et prise en main

• Positionner Ionic dans l’écosystème mobile 2026 : Cordova en fin de vie, React Native, Flutter, PWA et applications hybrides
• Utiliser une decision matrix pour identifier quand choisir Ionic et Capacitor selon le contexte projet
• Comprendre le rôle de Capacitor : bridge natif, architecture WebView et accès aux fonctionnalités mobiles
• Installer et configurer l’environnement de développement : Ionic CLI, Android Studio, Xcode et émulateurs
• Explorer la structure d’un projet Ionic + Capacitor + React : pages, App.tsx, capacitor.config.ts et package.json
• Atelier pratique : créer et lancer une première application Ionic avec React, exécuter le projet sur navigateur et émulateur Android, puis valider le hot reload

[Jour 1 – Après-midi]

Composants, navigation et thèmes Ionic

• Utiliser les composants UI d’Ionic : IonTabBar, IonMenu, IonModal, IonCard, IonList et IonToggle
• Gérer la navigation et les routes avec React Router, IonRouter et les paramètres de route
• Créer une navigation mobile avec onglets, menu latéral, liens internes et vues modales
• Personnaliser l’interface via les variables CSS Ionic, les couleurs primaires, secondaires et les thèmes
• Mettre en place un dark mode avec prefers-color-scheme et une bascule light/dark
• Atelier pratique : construire une application 4 pages avec navigation par onglets, menu latéral, modale, passage de paramètres et thème personnalisé

Accès natif avec Capacitor

• Découvrir les API Capacitor : Camera, Geolocation, Filesystem et plugins natifs
• Ajouter et configurer des plugins natifs dans une application Ionic React
• Configurer les permissions Android et iOS avec AndroidManifest.xml et Info.plist
• Gérer les demandes, refus et retours utilisateur liés aux permissions mobiles
• Comprendre les usages du Deep Linking, Universal Links et App Links pour OAuth callback, notifications et partage
• Atelier pratique : implémenter une fonctionnalité caméra avec capture et affichage, géolocalisation temps réel, lien Maps et gestion des permissions refusées

[Jour 2 – Matin]

Données, stockage local et synchronisation offline

• Structurer le state management avec React, useReducer, Context ou Zustand
• Mettre en place un stockage local avec @capacitor/preferences
• Utiliser SQLite avec @capacitor-community/sqlite pour une persistance locale plus robuste
• Synchroniser les données avec une API REST, json-server, JSONPlaceholder ou une API projet
• Gérer le mode offline avec @capacitor/network, détection réseau, queue de synchronisation et indicateur de statut
• Atelier pratique : développer une To-Do List avec persistance locale, synchronisation API REST, mode offline, queue de synchronisation et indicateur visuel

[Jour 2 – Après-midi]

Performance et optimisation d’une application Ionic

• Identifier les principaux leviers de performance : lazy loading, tree-shaking, réduction du bundle et chargement à la demande
• Analyser un bundle avec source-map-explorer et identifier les modules les plus lourds
• Mettre en place React.lazy, Suspense et fallback IonSpinner sur des routes Ionic
• Comprendre l’intérêt de la virtualisation pour les listes longues avec IonVirtualScroll
• Utiliser Chrome DevTools Performance tab pour repérer les re-renders inutiles et les ralentissements
• Atelier pratique : optimiser une application Ionic avec analyse de bundle, lazy loading sur plusieurs routes et comparaison avant/après

Déploiement, publication et monitoring

• Comprendre le déploiement mobile avec Fastlane : Appfile, Matchfile, Fastfile et rôle de chaque fichier
• Gérer les secrets de publication : keystore Android, certificats iOS via Match, clé App Store Connect API et clé Google Play
• Utiliser les lanes Android : bump, android build, android internal, android beta et android production
• Comprendre les lanes iOS : certificats, build, beta et publication via deliver vers TestFlight
• Mettre en place le monitoring de production avec Sentry ou Firebase Crashlytics, symbolication des stack traces et alerting
• Atelier pratique : générer un AAB signé avec Fastlane et publier l’application sur la track Internal Testing du Play Store

[Jour 3 – Matin]

Tests unitaires, e2e et qualité logicielle

• Écrire des tests unitaires avec Jest pour fonctions utilitaires, hooks custom et composants React
• Tester les composants avec @testing-library/react, render, fireEvent, waitFor et renderHook
• Mocker les plugins Capacitor dans les tests : Camera, Geolocation et autres APIs natives
• Mettre en place des tests end-to-end avec Playwright : scénarios complets, configuration et sélecteurs robustes
• Comprendre les limites de Playwright pour les interactions natives et découvrir Maestro, Appium, UI Automator et XCUITest
• Atelier pratique : créer une suite de tests unitaires et e2e pour un flow complet, avec mocks Capacitor, couverture et pipeline CI sur GitHub Actions

[Jour 3 – Après-midi]

Tests assistés par IA et accessibilité mobile

• Utiliser un LLM pour générer des scénarios de test depuis des user stories
• Structurer des prompts pour produire des cas nominaux, cas limites, erreurs réseau et erreurs API
• Relire, corriger et intégrer les tests générés dans une suite Jest ou Playwright existante
• Comprendre les approches de computer control et UI autonome : Claude computer use, Playwright MCP et agent-driven testing
• Appliquer les bases d’accessibilité mobile : WCAG 2.2, aria-label, focus trapping, contraste, axe-core et Accessibility Inspector
• Atelier pratique : générer des cas de test par LLM, les valider, les corriger et les intégrer dans la suite Jest/Playwright existante

Fonctionnalités avancées, authentification et industrialisation

• Intégrer les Push Notifications avec @capacitor/push-notifications et Firebase Cloud Messaging
• Mettre en place une authentification complète avec JWT, stockage sécurisé, refresh token automatique et route guards
• Configurer OAuth2 Google Sign-In natif avec @codetrix-studio/capacitor-google-auth et deep link callback OAuth
• Ajouter l’authentification biométrique Face ID / Touch ID avec @capacitor-community/fingerprint-auth selon l’avancement du groupe
• Structurer un projet pour le travail en équipe : conventions, arborescence, environnements DEV/TEST/PROD, sécurité du code et secrets
• Atelier pratique : implémenter un login JWT avec route guards et refresh token automatique, puis mettre en place un pipeline CI/CD avec tests sur PR et déploiement web automatique