Formation Développement d'applications mobiles cross-platform avec Ionic 8

Introduction à Ionic et au paysage cross-platform

• Qu'est-ce qu'Ionic et quand choisir cette solution plutôt que du natif ou Flutter
• Architecture des Web Components soutenant l'UI d'Ionic
• Support des frameworks dans les écosystèmes Angular, React et Vue
• Cas d'utilisation concrets pour les PWA ainsi que les applications mobiles

Mise en place de l'environnement de développement

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

Architecture et structure du projet en profondeur

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

Composants UI principaux et mise en page

• Utilisation de ion-header, ion-toolbar et ion-content pour la structure des pages
• Contrôles de saisie : ion-input, ion-select, ion-checkbox
• Boutons, FAB, cartes, listes et système de grille
• Conventions modernes des contrôles de formulaire 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 d'Angular Router et React Router
• Patterns de navigation entre pages et deep linking
• Lazy loading pour optimiser les performances
• Navigation par onglets et patterns de menu latéral

Stylisation et thème

• Variables CSS et système colorimétrique d'Ionic
• Mise en œuvre du support du mode sombre
• Polices dynamiques et personnalisation de la palette dans Ionic 8
• Stylisation responsive à travers les breakpoints des appareils

Formulaires et validation

• Framwork de formulaires réactifs pour Angular
• Custom hooks et patterns de validation pour React
• Gestion des erreurs et feedback UI de validation
• Création et validation de formulaires complexes multi-étapes

Services et intégration aux APIs

• Configuration du client HTTP et des intercepteurs
• Réalisation d'appels API RESTful et gestion des réponses
• Meilleures pratiques de gestion d'état
• Boundary d'erreurs et reprise après échec réseau

Capacitor et fonctionnalités natives de l'appareil

• Compréhension du bridge Capacitor et de son écosystème de 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 des 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

• Modals, popovers et alerts dans la version moderne d'Ionic
• Notifications toast et superpositions de chargement
• Améliorations d'Ionic 8 concernant les événements et l'architecture des overlays
• Considérations de performance pour les superpositions UI complexes

Techniques d'optimisation des performances

• Meilleures pratiques de code splitting et lazy loading
• Réduction de la taille du bundle et avoidance des pièges courants
• Optimisation du rendu pour les listes et grands ensembles de données

Pipeline de construction Progressive Web App

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

Processus de construction et déploiement

• Construction et bundling pour Android et iOS en production
• Configuration des exigences de soumission aux stores d'applications et des métadonnées
• Gestion de la configuration de l'environnement entre les environnements de staging et de production

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

• Conception de l'architecture de l'application et du flux de navigation
• Mise en œuvre d'une page de connexion avec authentification
• Création d'un tableau de bord avec intégration de données en temps réel
• Ajout d'une fonctionnalité appareil photo native via Capacitor
• Revue de code, tests et préparation au déploiement