Ionic est un framework permettant de construire des applications natives à l’aide des technologies Web. Basé en partie sur AngularJS et Cordova, Ionic vous permet de créer des Progressive Web Applications pour mobile (iPhone et Android) proches des applications natives en utilisant HTML, CSS et JavaScript.
Description
Durée : 28 heures
Modalités techniques d’évaluation : Évaluation des connaissances par QCM, évaluation des compétences au travers de travaux pratiques et de cas d’études. Contrôle de l’acquisition des connaissances et des compétences pendant la formation par le formateur.
Moyens pédagogiques : Apports théoriques réalisés en classe et complétés par de nombreux travaux pratiques permettent aux participants de disposer d’une expérience concrète. A l’issue des sessions magistrales, réalisation de cas d’études tutorés.
Objectifs pédagogiques
À l’issue de la formation, le participant sera en mesure de :
- Configurer un environnement de développement hybride
- Développer une application mobile basée sur Ionic et Angular
- Maîtriser les outils de productivité proposés par Node.js
- Intégrer un Backend Mobile
- Préparer le build et le déploiement d’une application
Travaux pratiques
Méthodes pédagogiques
Configurer un environnement de développement moderne
- Choix de l’éditeur, les plug-ins indispensables.
- Socle des bonnes pratiques : mobile et « Web-platform ».
- Node.js utilitaire de développement. Synchronisation « multi-device ».
- Choisir et paramétrer un « workflow » mobile.
- Yeoman. Utiliser un « scaffoldeur » de projet.
Travaux pratiques
Configuration des outils.
Ionic SDK : présentation et mise en oeuvre
- Présentation de l’offre de services Ionic.
- Framework de développement « hybride », positionnement.
- Composantes : Utilitaires, CSS, JavaScript, Services.
- Technologies : services cloud, Cordova, le choix d’Angular.
- Démarrer, émuler et débugger une application.
- Apport du Framework CSS.
Travaux pratiques
Mise en œuvre d’un projet d’application.
Ionic + Angular : initiation au Framework de Google
- Structure d’une application Angular.
- Identifier les ressources : Services, Components, Directives, Pipe.
- Ajax : consommation de services Web.
- SPA (Single Page Application) routes et navigation.
- Les composants mobiles Ionic.
- Utilisation indépendante du Framework CSS Ionic.
Démonstration
Structure d’une application Angular.
Le Framework Ionic en profondeur
- Personnalisation ciblée de la plateforme (IOS/Android).
- Gestion du contenu : listes, chargement, « scroll », « pull to refresh ».
- Gestion de la navigation : menu, route et persistance.
- Composant interactifs : « modal, action sheet, popover »
- Créer des formulaires efficaces.
- Gestuelle utilisateur : « swipe, slide, tap… ».
Travaux pratiques
Réalisation d’une application basée sur Ionic et Angular.
Gérer la persistance des données utilisateur
- Ionic Native : utilisation des plugins Cordova.
- Adopter une stratégie « offline first ».
- Les API pour la sauvegarde locale : IndexDB localStorage.
- Centraliser les données : redéfinir le cycle UX.
- Quelles fonctionnalités attendre d’un Backend Mobile ?
- Les services d’authentification et de « push notification ».
Travaux pratiques
Intégration d’un « Backend Cloud ».
