Formation Ionic 8 - Développement d'applications multiplateformes pour mobiles

Jour 1 - Matin

Introduction et installation de Ionic 8

• Présentation de l'offre Ionic 8
• Le développement hybride
• Rôle de Capacitor dans une application Ionic 8
• Création d'applications mobiles avec Ionic 8
• Installation de Ionic 8
• Configuration de Ionic 8
• Evolution des versions Ionic
• Mettre à jour une application Ionic 7 vers la 8
• Ionic 8 et React
• Ionic 8 et Vue
• Ionic 8 et Angular

Création d'une application avec Ionic 8

• L'environnement de développement
• Installation de Ionic CLI
• Installation et activation de GitHub Copilot dans Visual Studio Code
• Utilisation de l'interface CLI et dépendances
• Structure du projet Ionic 8
• Exécution d'une application

Exemples de travaux pratiques (à titre indicatif)

• Création d'une petite application en utilisant le scaffolding, lancement de l'émulateur, test et debug
• Utiliser GitHub Copilot pour générer le scaffolding du projet Ionic 8 choisi (Angular ou React), puis demander à l'IA d'expliquer chaque fichier généré et la structure de l'application

Jour 1 - Après-midi

Ionic 8 et React 19

• Structure d'une application React SPA (Single-Page Application)
• Intégration d'une application React au sein d'une application Ionic 8
• Générer un composant fonctionnel React avec hooks (useState, useEffect) intégré dans une page Ionic via Copilot

Exemples de travaux pratiques (à titre indicatif)

• Démonstration d'une application React embarquée dans une application Ionic 8
• Générer via GitHub Copilot un composant IonPage React complet (header, content, footer) avec navigation et types TypeScript, puis l'intégrer dans l'application Ionic

Ionic 8 et Angular 21

• Structure d'une application Angular SPA (Single-Page Application)
• Intégration d'une application Angular au sein d'une application Ionic 8
• Générer un module Angular standalone avec composants, services et routing Ionic via GitHub Copilot

Exemples de travaux pratiques (à titre indicatif)

• Démonstration d'une application Angular embarquée dans une application Ionic 8
• Générer via GitHub Copilot un module Angular standalone avec une page Ionic (IonContent, IonHeader, IonToolbar) et un service de données, puis tester dans l'émulateur

Jour 2 - Matin

Les composants Ionic 8

• Les composants de Ionic 8
• Réutilisation des composants
• Menus
• Navigation entre pages
• Les sliders
• Thèmes pour une plateforme cible
• Personnaliser un thème
• Les composants propres à une plateforme
• Décrire une interface utilisateur en langage naturel et générer les composants Ionic correspondants (IonCard, IonList, IonModal, IonSlides) via Copilot

Exemples de travaux pratiques (à titre indicatif)

• Poursuite du développement des applications Ionic / Angular et Ionic / React en intégrant des composants graphiques proposés par la plateforme
• Générer via GitHub Copilot les composants principaux des deux applications (menu, liste, modal, slider) et le thème personnalisé, puis affiner le rendu iOS / Android avec l'aide de l'IA

Jour 2 - Après-midi

Gestion des opérations CRUD avec Ionic

• Gestion des listes avec Ionic / React
• Gestion des listes avec Ionic / Angular
• Gestion des formulaires avec Ionic / React
• Gestion des formulaires avec Ionic / Angular
• Générer un formulaire Ionic complet avec validation (React Hook Form ou Angular Reactive Forms) à partir d'une description des champs

Exemples de travaux pratiques (à titre indicatif)

• Reprise des deux applications créées et ajout des fonctionnalités CRUD
• Générer via Copilot les formulaires de création / édition et la logique CRUD pour les deux applications (React et Angular), avec gestion des erreurs et feedback utilisateur (IonToast, IonAlert)

Solutions de persistance des données dans Ionic 8

• Les requêtes HTTP
• Appel d'API REST et récupération JSON
• Récupération des données d'un BackEnd avec les Promises
• Stockage des données dans les storages locaux
• Accès à une base de données SQLite

Exemples de travaux pratiques (à titre indicatif)

• Reprise des deux applications créées en intégrant la persistance des données locales et à distance
• Générer la couche de persistance complète des deux applications (service HTTP REST et stockage local Ionic Storage) via GitHub Copilot, en intégrant la gestion des erreurs réseau et le cache local

Jour 3 - Matin

Authentification et notifications avec Ionic 8

• Création d'une page de connexion
• Authentification auprès des providers externes
• Utiliser Facebook et Google pour l'authentification
• Gestion des notifications sur iOS et Android
• Utiliser l'IA pour générer le flow d'authentification OAuth2 (Google Sign-In via Capacitor) avec gestion des tokens JWT

Tester et déboguer une application Ionic 8

• Les différentes possibilités de débogage
• Ajout des tests unitaires dans une application Ionic 8

Exemples de travaux pratiques (à titre indicatif)

• Démonstration d'une application Ionic 8 utilisant l'authentification externe
• Générer via GitHub Copilot la page de connexion et le service d'authentification Google (Capacitor Google Auth) et intégrer la gestion des notifications push FCM dans l'application
• Utiliser GitHub Copilot pour générer automatiquement les tests unitaires (Jest et Testing Library) des composants et services créés
• Générer des mocks de services Ionic (HttpClient, Ionic Storage, Capacitor Plugins) via l'IA pour isoler les couches

Jour 3 - Après-midi

Publier une application Ionic 8

• Préparation d'un projet pour la publication
• Signer une application iOS et Android
• Publier une application sur l'App Store et Google Play
• Le versioning des mises à jour sur les Stores

Exemples de travaux pratiques (à titre indicatif)

• Signature et préparation des fichiers pour déploiement de l'application Ionic 8
• Générer via ChatGPT la checklist de publication App Store / Google Play adaptée au projet, puis utiliser Copilot pour générer les scripts de build et la configuration Firebase App Distribution