Contexte
La mobilité est devenue incontournable et les appareils mobiles sont de plus en plus puissants et pratiques pour les utilisateurs. Pour répondre à cette demande, les entreprises doivent adapter leurs contenus aux tailles des terminaux et à leurs spécificités.
Pour cela, des technologies génériques telles que HTML5, CSS 3 et JavaScript ont émergé, ainsi que des frameworks permettant de générer du code natif et d’avoir des performances et un rendu optimal. Cette formation vous donne les connaissances et les outils pour développer des applications natives multi plateformes de grande qualité et adaptées à vos besoins.
Objectifs
A l’issue de la formation « Développer une application mobile », le stagiaire sera capable :
- Savoir développer une application mobile native multiplateforme.
- Savoir utiliser Cordova d’abord sans framework afin de porter un code web existant vers une application mobile puis Cordova avec le framework Ionic
- Savoir maîtriser React Native.
Public
Cette formation s’adresse aux professionnels de l’informatique qui cherchent à acquérir les compétences nécessaires pour développer des applications mobiles natives multiplateformes. Elle est destinée aux ingénieurs logiciels, aux développeurs et aux chefs de projet qui souhaitent se perfectionner dans ce domaine.
Prérequis
Pour participer à cette formation vous devez maîtriser au moins un langage de programmation et avoir une bonne compréhension de HTML5, CSS3 et JavaScript.
Programme de la formation
Concepts et architecture d’une application pour mobile
- Bien comprendre le rôle de chaque technologie (HTML, CSS, JavaScript…)
- Définition de « Application Ajax » ?
- Quelles différences avec un développement en Java (Android) ou Swift (IOS) ?
- Comparaison avec les applications Web traditionnelles
Comment faire du cross-platform ?
- Application non autonome (accessible d’un navigateur web) :
- Le Site Web Responsive
- La WebApp
- Le Site Mobile
- Application autonome :
- Application native générée (React Native, Xamarin…)
- Application hybride (Cordova, Ionic…)
Rappel des fondamentaux
- Quelques rappels sur les fondamentaux des langages du Web :
- HTML
- CSS3
- JavaScript
- Ajax et jQuery
Configurer votre espace de travail
- Les outils de développement (IDE) à utiliser pour développer des applications :
- Hybride (HTML5 / CSS3 / JavaScript…)
- Native généré (JavaScript, C# …)
- Qu’est-ce qu’un gestionnaire de dépendances ? Présentation de npm
- Qu’est-ce que l’intégration continue ?
Zoom sur le HTML5 : les nouveautés qui vont nous être utiles. La sémantique, structures et sections du document
- Les améliorations apportées au contrôle des formulaires et aux iframes
- Nouveaux éléments graphiques (SVG, Canvas)
- Manipuler des contenus multimédia (audio et vidéo)
- Les APIs (Application Programming Interfaces) :
- Géolocalisation
- Drag and Drop
- Local Storage
- Application Cache
- Web Workers (traitement arrière-plan)
Allons plus loin avec les feuilles CSS
- Le CSS RWD (Responsive Web Design) : ViewPort, GridView, Media…
- Dynamisez votre CSS avec des variables paramétrables : présentation de Sass
- Les frameworks CSS Bootstrap, Foundation…
ES2015 : les nouvelles normes JavaScript
- Babel
- ES6 ( let et cont, Fat Arrow functions, Destructuring, imports et exports, Classes, Dynamic Object Keys, Array spread )
- ES7 et au-delà (object spread, async await, static class properties, bound instance methods)
- npm et yarn : installer des packages
- Travaux Pratiques : Utilisation de nouvelles fonctionnalités ES6 / ES201X
Transformer son application web en application mobile avec Apache Cordova
- Présentation de Cordova
- Faire en sorte que son application ne soit plus « web dépendante »
- Que gagne-t-on à utiliser une application native ?
- L’exemple du SDK pour le développement Android
- Téléchargement, installation, et prérequis pour utiliser Cordova
- Utilisation des simulateurs Android et iPhone
- Architecture Cordova & Plugins :
- WebView
- Interface JavaScript
- API Natives (Camera, Accéléromètre…)
- Plugins
- Interface de ligne de commande Cordova
- Gestion des images de l’appareil photo
- Travaux Pratique : À partir d’une application web existante d’offres d’emplois, nous la porterons pour différents types de téléphones (Android, iPhone…) à l’aide du framework Cordova. Déploiement de l’application vers Android, iOS.
Ionic : Quand Angular rencontre Cordova
- Présentation de Ionic, de ses outils (Ionic Lab, Ionic Creator, Ionic View & Ionic Backend…)
- Installer, configurer et exécuter une application Ionic
- Découverte d’Angular :
- Routage & Single Page Application
- Les Directives : Architecture MVC (Contrôleurs, Cycle de vie des vues, Services…)
- Les composants Ionic (Composant graphique, Navigation, Gestion des données…)
- Gestion des thèmes avec Sass
- Ajout des plugins : Ng-Cordova le terminal (batterie, GPS, Bluetooth, appareil photo)
- Automatisation des compilations avec Gulp
- Interface de ligne de commande Ionic CLI
- Travaux Pratiques : Création d’une application mobile à l’aide du framework Ionic : Nous prendrons le même sujet que lors du précédent TP : plateforme de gestion d’offres de travail, comprenant un menu, une liste des offres et un détail sur chacune des offres. Déploiement de l’application vers Android et iOS.
React Native : le meilleur des deux mondes ?
- Qu’est ce que React Native ?
- Les bases de React Native/React
- Les composants de base de React Native
- Créer son premier composant
- Utilisation de create-react-native-app
- La navigation
- Comment construire une application
- Récupérer des données distantes
- Construire des listes et comparaison avec Cordova
- Utiliser des APIs natives
- Mise à jour à distance
- Travaux Pratiques : Création d’une application mobile à l’aide du framework React Native : Nous prendrons le même sujet que lors du précédent TP : plateforme de gestion d’offres de travail, comprenant un menu, une liste des offres et un détail sur chacune des offres. Déploiement de l’application vers Android et iOS.
Déployer votre application
- Définition d’un store ?
- Quels sont les stores existant sur Internet (Apple, Google, Windows) ?
- Soumettre son application au grand public (AppStore & Google Store)
Étude de Cas – Application d’offre d’emploi :
Ce cours est volontairement axé sur l’aspect pratique. De très nombreux travaux pratiques seront réalisés par les participants.
Nous avons volontairement choisi de faire la même application dans des technologies différentes afin que le participant puisse faire une comparaison des outils pour faire le bon choix dans son entreprise.
La maquette avec le site web est fournie aux participants au début de la formation, de même pour les templates HTML / CSS3 / JavaScript fournis, pour un résultat professionnel
- Portage de l’application web Offre d’emploi avec Cordova
À partir d’une application web existante d’offres d’emplois, nous la porterons pour différents types de téléphones (Android, iPhone…) à l’aide du framework Cordova.puis déploiement de l’application vers Android, iOS
- Création d’une application mobile à l’aide du framework Ionic
Nous prendrons le même sujet que lors du précédent TP : plateforme de gestion d’offres de travail, comprenant un menu, une liste des offres et un détail sur chacune des offres. Déploiement de l’application vers Android et iOS.
- Création d’une application mobile à l’aide du framework React Native
Nous prendrons le même sujet que lors du précédent TP : plateforme de gestion d’offres de travail, comprenant un menu, une liste des offres et un détail sur chacune des offres. Déploiement de l’application vers Android et iOS.
Durée
5 jours
Dates et délais
Sur demande
Modalités
Lieu
Lieu à définir
Tarif
3120 € TTC