Ionic - Aller plus loin dans le développement d’application mobiles multiplateformes avec Angular et Capacitor
Besoin d’adapter cette formation à vos besoins ?
N’hésitez pas à nous contacter afin d’obtenir un devis sur mesure !
Formation créée le 10/05/2023. Dernière mise à jour le 28/10/2024.
Version du programme : 1
Programme de la formation
Ionic est un framework Javascript permettant de développer des applications mobiles hybrides (Android et iOS) facilement grâce à une librairie de composants graphiques et de plugins natifs. Avec cette formation, vous découvrirez comment aller plus loin avec Ionic et Angular en créant des composants génériques et réutilisables, exécuter des tâches de fond avec les Services Workers, protéger votre application avec les Guards et écrire des tests unitaires. Durée : 5 jours (formation possible en présentiel ou distanciel). Le programme de cette formation est présenté ici avec Capacitor : il est possible de l'adapter pour remplacer Capacitor par Cordova sur l'ensemble du programme.
Objectifs de la formation
- Mettre en place une architecture permettant la réutilisation et la mutualisation des composants et des services d’une application
- Tirer parti des Observables pour maîtriser plus finement les mécanismes asynchrones
- Exécuter des tâches de fond avec les Services Workers
- Mettre en place des mécanismes de sécurité simples côté front
- Tester son code avec différentes méthodes de test
Profil des bénéficiaires
- Développeurs Web
- Développeurs Mobile
- Chefs de projets techniques
- Bonnes connaissances Angular
- Bonne connaissances Javascript ou Typescript
- Avoir suivi une formation sur les bases de Ionic (par exemple la formation "Ionic - Développer des applications mobiles multiplateformes avec Capacitor (ou Cordova) et Angular" que nous proposons)
- Si pas de formation sur les bases de Ionic suivi, avoir pratiqué Ionic sur des projets professionnels ou personnels
Contenu de la formation
-
Créer des composants génériques et réutilisables
- Rappel sur la notion de composant dans Angular
- Rappel sur l’utilisation de la “Ionic CLI” pour générer des composants
- Utiliser @Input pour transmettre des données du composant parent vers le composant enfant
- Utiliser de @Output pour transmettre des données du composant enfant vers le composant parent
- Etudier des exemples de composants génériques et réflexion sur les limites de la généricité
-
Aller plus loin dans la programmation asynchrone avec les Observables
- Rappel sur les différences fondamentales entre les Promesses et les Observables
- Créer et s’abonner à un Observable
- Utiliser les Observables dans un composant pour créer des formulaires réactifs
- Utiliser les Observables dans un service pour transmettres des événements à des composants (Websocket par exemple ou plugin de géolocalisation)
- Etudier des exemples d’Observables et réflexion sur leurs limites
-
Exécuter des tâches de fond avec les Services Worker
- Rappel sur les limites de Javascript en terme de multi-threading
- Comprendre le fonctionnement des Services Workers
- Créer et configurer un Service Worker
- Découvrir le cycle de vie d’un Service Worker
- Etudier des exemples de Services Worker et réflexion sur leur limites
-
Mutualiser du code avec les intercepteurs
- Rappel sur les requêtes HTTP avec Angular
- Comprendre l’intérêt des intercepteurs
- Créer et configurer un intercepteur
- Ajouter des headers à une requête HTTP avec un intercepteur
- Renouveler un automatiquement un token lors de la réception d’une erreur avec un intercepteur
- Etudier des exemples d’intercepteurs et réflexion sur leurs limites
-
Protéger son application avec les Guards
- Rappel sur la navigation dans Angular et Ionic
- Comprendre le fonctionnement des Guards
- Découvrir les différents types de Guards
- Créer et configurer un Guard
- Protéger des pages si l’utilisateur n’est pas connecté
- Protéger des pages si l’utilisateur n’est pas administrateur
- Etudier des exemples de Guard et réflexion sur leurs limites
-
Tester son code avec les tests unitaires
- Rappel sur le concept des tests unitaires
- Rappel sur la différence entre un test unitaire, un test d’intégration et un test End-To-End
- Découvrir les différents moteurs de tests unitaires (Karma, Jasmine)
- Créer et développer un test unitaire
- Tester un composant Angular avec des dépendances
- Tester un service Angular
- Tester un service ou un composant en simulant des comportements externes grâce aux mocks
- Etudier des exemples de Tests Unitaires et réflexion sur leurs limites
-
Tester son application avec les tests “End-to-End”
- Créer un test “End-to-End” simple
- Tester un composant en simulant un comportement utilisateur
- Tester un composant en simulant des retours serveurs
- Etudier des exemples de tests “End-to-End” et réflexion sur leurs limites
Cédric MILLAURIAUX est développeur depuis plus de 12 ans. Il a dans un premier temps travaillé pour le ministère des finances et pour le ministère de l’intérieur avant de devenir développeur mobile à son propre compte en 2015. Il travaille principalement sur des applications dans le domaine de la santé et des objets connectés. Il développe des applications mobiles pour le compte de ses clients dans des domaines d’application variés : vote institutionnel, pilotage de drones, suivi de patients à domicile, serious game, etc.
- Feuilles de présence
- Questions orales ou écrites (QCM)
- Mise en pratique sous forme de TP via un projet d’application “fil rouge” complété tout au long de la formation
- Formulaires d'évaluation de la formation
- Certificat de réalisation de l’action de formation
- Accueil des apprenants dans une salle dédiée à la formation (si présentiel)
- Présentation du support via vidéoprojecteur (ou partage visio)
- Cours théoriques avec des présentations de cas d’exemple
- Live-coding
- Mise en pratique sous forme de TP via un projet d’application “fil rouge” complété tout au long de la formation
- Support PDF remis en fin de formation ainsi que documents créés lors des mises en pratique