Formation Développement d'applications mobiles multiplateformes avec Ionic 8

Introduction à Ionic et au paysage du développement multiplateforme

• Qu'est-ce qu'Ionic et quand choisir cette solution plutôt que le natif ou Flutter
• Architecture des Web Components servant de moteur à l'interface utilisateur d'Ionic
• Support du framework au sein des écosystèmes Angular, React et Vue
• Cas d'utilisation concrets pour les PWA et les applications mobiles

Configuration de l'environnement de développement

• Installation et configuration de Node.js et npm
• Installation de la CLI Ionic
• Création et structuration d'un nouveau projet Ionic
• Lancement des applications dans le navigateur et en mode appareil connecté

Analyse approfondie de la structure du projet et de l'architecture

• Pages, modules et composants réutilisables
• Compréhension et configuration du système de routage
• Services et modèles d'injection de dépendances
• Répertoires assets et configuration de l'environnement

Composants UI de base et mise en page

• Utilisation des éléments ion-header, ion-toolbar et ion-content pour la structure de page
• Contrôles d'entrée : ion-input, ion-select, ion-checkbox
• Boutons, FAB (Floating Action Button), cartes, listes et système de grille
• Conventions modernes des contrôles de formulaires Ionic
• Mise en pratique : création d'une page de connexion et d'un tableau de bord

Stratégies de navigation et de routage

• Intégration du routeur Angular et de React Router
• Modèles de navigation entre pages et deep linking
• Chargement différé pour améliorer les performances
• Navigation par onglets et modèles de menus latéraux

Stylisation et thématisation

• Variables CSS et système colorimétrique d'Ionic
• Mise en œuvre du support du mode sombre
• Policies dynamiques et personnalisation de la palette dans Ionic 8
• Stylisation responsive entre les points d'arrêt des appareils

Formulaires et validation

• Cadre des formulaires réactifs pour Angular
• Hooks personnalisés et modèles de validation pour React
• Gestion des erreurs et retour visuel lors de la validation
• Création et validation de formulaires complexes multi-étapes

Services et intégration d'API

• Configuration du client HTTP et des intercepteurs
• Réalisation d'appels API RESTful et gestion des réponses
• Bonnes pratiques de gestion d'état
• Gestion des erreurs (error boundaries) et récupération en cas de défaillance réseau

Capacitor et fonctionnalités natives de l'appareil

• Compréhension du pont Capacitor et de l'écosystème des plugins
• Installation et configuration de Capacitor dans un projet existant
• Accès à l'appareil photo et au sélecteur d'images
• Géolocalisation et intégration de cartes
• Stockage natif et préférences
• Mise en pratique : capture d'images et stockage des données sur l'appareil

Composants UI avancés

• Modales, popovers et alertes dans les versions modernes d'Ionic
• Notifications toast et superpositions de chargement
• Améliorations apportées par Ionic 8 aux événements et à l'architecture des overlays
• Considérations relatives aux performances pour les superpositions UI complexes

Techniques d'optimisation des performances

• Partage du code et meilleures pratiques de chargement différé
• Réduction de la taille du bundle et avoidance des pièges courants
• Optimisation du rendu pour les listes et les grands ensembles de données

Progressive Web App (PWA) et pipeline de construction

• Conversion de l'application en Progressive Web App
• Configuration des service workers et des capacités hors ligne
• Manifeste de l'application et invitations à l'installation PWA

Procédés de build et déploiement

• Construction et groupage pour la production sur Android et iOS
• Configuration des exigences et métadonnées de soumission aux boutiques d'applications
• Gestion de la configuration environnementale entre les environnements de staging et de production

Projet final : développement d'une mini-application complète

• Conception de l'architecture de l'application et du flux de navigation
• Mise en place d'une page de connexion avec authentification
• Développement d'un tableau de bord avec intégration de données en temps réel
• Ajout d'une fonctionnalité caméra native via Capacitor
• Revue de code, tests et préparation au déploiement