> Formations > Technologies numériques > Technologies Web > Développement Front-End > Formation Ionic, développement de Web Components

Formation : Ionic, développement de Web Components

Ionic, développement de Web Components

Télécharger au format pdf Partager cette formation par e-mail 2

Télécharger au format pdf Partager cette formation par e-mail 2

Cette formation vous permettra de maîtriser la dernière version du framework/SDK Ionic basé sur Cordova ou Capacitor. Vous développerez des applications mobile et multi-plateformes en utilisant et concevant des Web Components portables pour les frameworks leaders du marché (Angular, React, Vue...).


Inter
Intra
Sur mesure

Cours pratique en présentiel ou en classe à distance

Réf. NVK
Prix : Nous contacter
  4j - 28h00




Cette formation vous permettra de maîtriser la dernière version du framework/SDK Ionic basé sur Cordova ou Capacitor. Vous développerez des applications mobile et multi-plateformes en utilisant et concevant des Web Components portables pour les frameworks leaders du marché (Angular, React, Vue...).

Objectifs pédagogiques
À l’issue de la formation, le participant sera en mesure de :
  • 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

Public concerné
Architectes, développeurs et chefs de projets Web.

Prérequis
Bonnes connaissances des technologies du Web et des outils modernes de développement Front-End. Connaissances de base de JavaScript.
Vérifiez que vous avez les prérequis nécessaires pour profiter pleinement de cette formation en faisant  ce test.

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.


Modalités pratiques
Travaux pratiques
Réalisation d'une application mobile/desktop multiplateforme.
Méthodes pédagogiques;
Développement d'applications mobiles. 50% de théorie illustrée par 50% de pratique.

Modalités d'évaluation
Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…
Le participant complète également un test de positionnement en amont et en aval pour valider les compétences acquises.