Développement mobile Ionic et Flutter

Le développement mobile a pris une place prépondérante dans le monde du numérique, et les solutions hybrides sont de plus en plus populaires pour créer des applications multiplateformes. Il permet de réduire les coûts et le temps de développement, tout en facilitant la maintenance et la mise à jour des applications. Ionic et Flutter sont les deux principaux Framework utilisés dans le monde technologique moderne pour créer des applications multiplateformes performantes.

Objectifs pédagogiques

À l’issue de la formation, le participant sera en mesure de :

• Découvrir les fonctionnalités des Framework Ionic & Flutter.
• Développer des applications mobiles en utilisant les technologies Web avec Ionic & Flutter.
• Créez un site Web mobile ainsi que des applications natives Android et iOS à partir de la même base de code.
• Accéder aux API natives et aux services de la plateforme via une bibliothèque de plugins prêts à l’emploi.
• Maîtriser le back-end et la gestion de données.

Public concerné

S'adresse aux développeurs mobile débutants ou expérimentés.

Prérequis

Avoir des connaissances en développement Web moderne : HTML, CSS, JavaScript, npm.

Programme de la formation

Explorer les applications mobiles multiplateformes

• Analyser l’écosystème mobile d’aujourd’hui.
• Comparer différentes façons de développer sur mobile.
• Native vs hybrid vs web.
• Appréhender les webviews.

Io​nic

Découvrir Angular

• Liste des frameworks compatibles avec Ionic.
• Assimiler le langage TypeScript.
• Utiliser les outils pour TypeScript.
• Installer les modules et dépendances Ionic.
• Créer un projet Ionic.
• Découvrir le projet Ionic par défaut.
• Présentation d’Angular.
• Comprendre le principe de Composants et Templates.
• Comprendre le data Binding.
• Utiliser les directives d’Angular.
• Découvrir les formulaires.
• Utiliser les pipes et le formatage.
• Comprendre le principe des routes.

Utiliser Ionic

• Découvrir Ionic.
• Lister les apports de Ionic à Cordova et Angular.
• Utiliser les commandes CLI.
• Découvrir la bibliothèque UI.
• Maîtriser la mise en page (Layout).
• Maîtriser l’emploi des composants UI de base.
• Utiliser les composants Ionic pour créer un formulaire.
• Personnaliser le style et thème.

Interagir avec la plateforme native avec Capacitor

• Découvrir Capacitor.
• Différences entre Cordova et Capacitor.
• Installer l’environnement de développement.
• Répertorier les commandes usuelles.
• Découvrir les plugins de Capacitor.
• Manipuler le HardWare de l’appareil.
• Installer des plugins.
• Analyser plus en profondeur le plugin de GPS.
• Prendre des photos avec l’appareil photo.
• Sauvegarder et charger des photos.
• Stocker des données en local.
• Géolocaliser l’utilisateur.

Communiquer avec http

• Comprendre la notion de services.
• Découvrir la gestion des Services par Angular.
• Comprendre l’injection de dépendances.
• Créer des services injectables.
• Découvrir la programmation asynchrone.
• Revoir les bases d’HTTP et REST.
• Communiquer avec un serveur http.
• Photos.

Builder et déployer sur mobile

• Automatiser la création des icônes et écrans de démarrage.
• Découvrir les services de la "Ionic Platform".
• Compiler l’application grâce à la commande "Build".
• Publication hors store.
• Publication sur les stores.

Notions avancées

• Bonnes pratiques.
• Optimisations et performances.

Flutter

Introduction à flutter

• Historique et typologie des frameworks multiplateformes.
• Intérêts et limites de Flutter.

Créer son premier projet 

• Installation et découverte de l’environnement de développement Android Studio.
• Création d’un projet vierge, analyse de sa structure.
• Présentation du langage Dart.

Développer son premier écran 

• Présentation des widgets stateless et statefull.
• Savoir designer un écran en declarative UI.
• Créer un écran de détails avec des données en dur.

Afficher une liste

• Découverte de la ListView et des ListTile.
• Mise en pratique : “Affichage des données à l’écran”.

Naviguer d’un écran à l’autre 

• Intercepter les actions utilisateur.
• Utiliser le Navigator pour transmettre des données d'un écran à l'autre.

Récupérer des données depuis Internet 

• Consommer efficacement un webservice avec Flutter.
• Focus sur l’asynchronisme.
• Mise en pratique : “Modifier son application pour afficher de vraies données provenant d’un webservice”.

Déploiement sur les stores 

• Packager et déployer son application Flutter sur le Google Play Store.
• Packager et déployer son application Flutter sur l’app Store Connect.

Moyens pédagogiques

Ateliers pratiques .