Formation Ionic

Développer des applications mobile et des PWA avec Ionic

+700 apprenants

Objectifs de la formation

Créer et publier des applications mobiles hybrides.
Déployer des progressive web app
Interagir avec les fonctionnalités natives du mobile avec Cordova

Votre formateur

Frederic Lossignol

Expert Angular et NodeJS depuis 2016.

Public concerné

Développeur, intégrateur, chef de projet, agence web ou webmaster

Niveau requis

Maîtriser HTML/CSS, avoir connaissance de javascript

Programme

PARTIE 1 Cordova : accéder au hardware du téléphone

Installer Cordova
Ajouter un plugin Cordova et l'utiliser
Debugger votre application sur votre device

PARTIE 2 Les solutions de développement mobile et le positionnement de Ionic

Comprendre les différences entre les solutions Hybrid - Native - Cross plateform
Les frameworks et solutions du marché
Avantages et inconvénients de Ionic

PARTIE 3 Rappels sur Typescript / Angular

Qu'est-ce que Typescript ?
Utiliser les type natifs
Créer vos modèles de données avec les interfaces
Interface ou class pour typer vos donnnées ?

PARTIE 4 Installer l'environnement et le CLI Ionic

Choix de l'éditeur : VSCode et les autres
Installer nodeJS et npm
Installer CLI Ionic
Créer une application avec le CLI / les commandes principales

PARTIE 5 Comprendre l'architecture d'un projet Ionic

Tour des fichiers et dossiers d'une application
Les outils et la configuration d'une application
Scaffolder une application avec le CLI
Les pages
Le routing par défaut de ionic et le lazzy-loading
Les autres ressources à notre disposition : page, component, service, pipe

PARTIE 6 Pages : template, data-binding, events, et directives

Les pages : fichiers et structure d'une page HTML
Les composants Ionic
Exercice : designer une page en utilisant les composants Ionic
Le data-binding : lier des données au template HTML
Exercice : afficher des données dans le template HTML
Gérer les évènements
Comprendre la détection de changement
Exercice : mettre en place des boutons d'action
Moteur de template : les syntaxes
Exercice : utiliser les directives de structure *ngIf et *ngFor
Les directives ngClass et ngStyle

PARTIE 7 Le routing

Comprendre le système de routing
Routing et performance
Le routing lazy-loading : chargement des modules par navigation
Exercice : créer une page et la route associée
Exercice : passer de l'information via le routing

PARTIE 8 TP : créer une page d'application mobile type liste/détail

Créer une page qui affiche une liste d'éléments d'après une donnée
Créer la page de détail
Passer de l'information via le routing
Créer un service qui requête une API REST

PARTIE 9 Bonnes pratiques, déploiement, rappels généraux et QCM

Rappels sur les étapes de développement de la création au déploiement
Compiler une application Ionic pour la production et la déployer
QCM / vérificaiton des connaissance
Session questions/réponses avec le formateur

Modalités pratiques

Travaux pratiques
Création d'une application fil rouge avec les derniers standards : standalone components, l'API Signal pour gérer la réactivité, la syntaxe de control flow.

Méthodes pédagogiques
Chaque nouveau concept théorique sera appliqué immédiatement de façon pratique.