Objectifs de la formation

• Maîtriser l'environnement de développement hybride
• Comprendre les Web Components
• Mettre en œuvre les applications multi-plateforme
• Développer une application mobile basée sur Ionic
• Exploiter les outils de productivité proposés par Node.js

---

Programme de la formation

Configurer un environnement de développement moderne.

• Choix de l'éditeur et socle des bonnes pratiques.
• Node.js et l'API REST/JSON. Paramétrer un "workflow" mobile.
• Développement avec TypesScript. Le "scaffoldeur"de projet Ionic/CLI.

Travaux pratiques

Configurer un environnement de développement.

Ionic SDK : présentation et mise en œuvre

• L'offre de services Ionic.
• Les frameworks de développement "hybride".
• Les composants. Compatibilité cross-framework et technologie.
• Configurer une application.

Travaux pratiques

Mise en œuvre d'un projet d'application.

APIs HTML 5, les applications hybrides

• Le "Data Life Cycle et la stratégie "offline first".
• Solution de stockage embarqué.
• Optimiser les Progressive Web App.
• Manifeste applicatif. Gestion du temps réel.
• BaaS : Backend As A Service. Les services d'authentification.

Travaux pratiques

Création d'une architecture de service de données.

Web Component : créer des composants Web autonomes et réutilisables

• La norme des Web Components.
• Rappels DOM & AJAX. Template HTML à chargement différé.
• Shadow DOM, et CSS, les fragments de documents.
• CSS : le besoin d'encapsulation.Custom Elements.
• StencilJS le compilateur de Web Component proposé par Ionic.

Travaux pratiques

Création de Web Component et distribution avec StencilJS.

Le framework Ionic en profondeur

• Présentation des composants selon leur API et leur usage ergonomique.
• Personnalisation ciblée de la plateforme (IOS/Android).
• Gestion du contenu. Gestion de la navigation.
• Composants interactifs. Création des formulaires efficaces.
• Gestuelle utilisateur : "swipe, slide, tap...".

Travaux pratiques

Réalisation d'une application basée sur Ionic.

Réutilisation des composants cross-frameworks

• Développement de composants "cross-plateformes/cross-projet".
• Les solutions du marché. Angular, le choix par défaut.
• Intégration avec React et VueJS.

Travaux pratiques

Développement applicatif avec React Angular Vue.

Préparer le "build" et le déploiement

• L'environnement selon la plateforme.
• Le choix de Capacitor.
• La création des icônes et écrans de démarrage.
• "Ionic Platform".
• "Build" service de compilation. Le déploiement continu.

Travaux pratiques

Préparation multiplateforme et déploiement de l'application.