Orsys

Ionic, développement de Web Components

Par Orsys

Objectifs

  • 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

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.

Pédagogie

Réalisation d'une application mobile/desktop multiplateforme.

Développement d'applications mobiles. 50% de théorie illustrée par 50% de pratique.

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.

PDF

Imprimer

Envoyer

Envoyer la page à :

Formations de la même catégories (5)

Arkesys
Ionic - Développer des applications mobiles multiplateformes avec Cordova et AngularPar Arkesys
  • Développer rapidement et efficacement des applications mobiles multiplateformes sur la base de Cordova et Angular, avec Ionic ;
  • Mettre en œuvre la gestion de la navigation dans l'application ;
  • Ajouter des traitements dynamiques asynchrones et interagir avec des services Web REST ;
  • Tirer les bénéfices de l'utilisation de plugins ;
  • Appliquer des bonnes pratiques dans la conception des applications Ionic pour optimiser les performances.
Openska
IonicPar Openska

Ionic 4+ est un framework pour créer et distribuer facilement des applications mobiles, tablettes et maintenant bureau. Il fonctionne comme une surcouche à Angular : nous verrons donc d’abord tous les fondamentaux d’Angular, avant d’aborder les aspects spécifiques à Ionic, notamment Cordova et son remplaçant Capacitor, jusqu’aux builds permettant de déployer aussi bien sur l’AppStore ou le Play Store.

Ziggourat
FileMaker Pro InitiationPar Ziggourat

Cette formation permet de maîtriser les bases du logiciel de bases de données FileMaker Pro, de concevoir et gérer des bases de données relationnelles, de créer des modèles de présentations selon ses besoin et d'automatiser des actions grâce à la mise en place de boutons.

Dawan
Vue.js : ApprofondissementPar Dawan

Réaliser des applications front-end avec Vue.js

ENI SERVICE
React Native – Développer des applications mobiles multiplateformesPar ENI SERVICE

Dans cette formation, vous apprendrez à développer par la pratique des applications Android et iOS réalisées à l'aide de React Native. Cette formation permet aux développeurs Web de monter en compétence sur le développement d'applications mobiles, sans avoir recours au développement natif en Java ou Swift.

Nous utilisons les cookies afin de fournir les services et fonctionnalités proposés sur notre site et afin d’améliorer l’expérience de nos utilisateurs. En cliquant sur ”J’ai compris”, vous acceptez l’utilisation de ces cookies.