picto Télécom - Mobile

Formation Développement d'applications pour mobiles multiplateformes (iOS, Android, Windows Phone...)

APACHE CORDOVA, SENCHA TOUCH 2, ANGULARJS (IONIC)

Référence

TDAM

Durée

5 JOURS

Tarif

2490 € HT

NIVEAU

Intermédiaire

Cours à distance

Partiellement

éligible CPF

OUI

Bestseller

Objectifs de la formation Développement d'applications pour mobiles multiplateformes (iOS, Android, Windows Phone...)

La mobilité s’est imposée dans le quotidien des consommateurs avec l’arrivée des smartphones toujours plus puissants et plus pratiques pour l’utilisateur.
Les applications mobile font partie de notre quotidien que l'on soit client (BtoC), fournisseur (BtoB) ou collaborateur (BtoE).
Il est devenu nécessaire pour les entreprises voulant gagner en visibilité, non seulement d’adapter les contenus à la taille des terminaux (smartphones, tablettes…) mais aussi à leurs spécificités (caméra, GPS…).
Aussi, il est devenu courant d’initier des projets spécifiques à chaque plateforme cible, multipliant ainsi les projets et les coûts.
La solution idéale pour mutualiser les développements étant d’utiliser des technologies génériques que sont le HTML5, le CSS 3, le JavaScript et le Framework Cordova (PhoneGAP) va permettre de rendre accessibles les composants spécifiques des terminaux à partir du JavaScript.
Avec Cordova, il sera donc possible de mutualiser les charges de développement des différentes plateformes en s’appuyant sur un code unique en HTML/CSS/JavaScript.

L'utilisation de ces langages dans un contexte mobile et la prise en main des principaux frameworks JavaScript du moment, comme Sencha Touch ou AngularJS, vous permettront de développer de véritables applications professionnelles pour mobile en étant capable de choisir le bon framework pour vos besoins. Une attention particulière sera portée à Ionic qui s’appuie sur AngularJS et qui connaît un succès grandissant.

Afin de couvrir tout le cycle projet des développements mobile, nous vous présenterons également les actions à mettre en œuvre pour :

  • Déposer votre application sur l'AppStore (Apple Store) et/ou le Play Store (Google Store)
  • Créer un mini store d’entreprise pour mettre à disposition vos Apps
  • Faire vivre votre application au quotidien grâce à la mise en place d’un backoffice avec des webservices pour l’alimenter avec des données.


Ainsi, vous disposerez d’une vue complète et opérationnelle du développement mobile multiplateformes et développerez avec de bonnes pratiques une interface utilisateur de grande qualité et de véritables applications professionnelles pour mobile en étant capable de choisir le bon Framework pour vos besoins.

Pré-Requis

La mobilité s’est imposée dans le quotidien des consommateurs avec l’arrivée des smartphones toujours plus puissants et plus pratiques pour l’utilisateur.
Les applications mobile font partie de notre quotidien que l'on soit client (BtoC), fournisseur (BtoB) ou collaborateur (BtoE).
Il est devenu nécessaire pour les entreprises voulant gagner en visibilité, non seulement d’adapter les contenus à la taille des terminaux (smartphones, tablettes…) mais aussi à leurs spécificités (caméra, GPS…).
Aussi, il est devenu courant d’initier des projets spécifiques à chaque plateforme cible, multipliant ainsi les projets et les coûts.
La solution idéale pour mutualiser les développements étant d’utiliser des technologies génériques que sont le HTML5, le CSS 3, le JavaScript et le Framework Cordova (PhoneGAP) va permettre de rendre accessibles les composants spécifiques des terminaux à partir du JavaScript.
Avec Cordova, il sera donc possible de mutualiser les charges de développement des différentes plateformes en s’appuyant sur un code unique en HTML/CSS/JavaScript.

L'utilisation de ces langages dans un contexte mobile et la prise en main des principaux frameworks JavaScript du moment, comme Sencha Touch ou AngularJS, vous permettront de développer de véritables applications professionnelles pour mobile en étant capable de choisir le bon framework pour vos besoins. Une attention particulière sera portée à Ionic qui s’appuie sur AngularJS et qui connaît un succès grandissant.

Afin de couvrir tout le cycle projet des développements mobile, nous vous présenterons également les actions à mettre en œuvre pour :

  • Déposer votre application sur l'AppStore (Apple Store) et/ou le Play Store (Google Store)
  • Créer un mini store d’entreprise pour mettre à disposition vos Apps
  • Faire vivre votre application au quotidien grâce à la mise en place d’un backoffice avec des webservices pour l’alimenter avec des données.


Ainsi, vous disposerez d’une vue complète et opérationnelle du développement mobile multiplateformes et développerez avec de bonnes pratiques une interface utilisateur de grande qualité et de véritables applications professionnelles pour mobile en étant capable de choisir le bon Framework pour vos besoins.

Public

Cette formation Développement mobile s'adresse aux développeurs et aux chefs de projets.

Contenu du cours Développement d'applications pour mobiles multiplateformes (iOS, Android, Windows Phone...)

Concepts et architecture d'une application pour mobile

Bien comprendre le rôle de chaque technologie (HTML, CSS, XML, JavaScript...)
Qu'entend-on par « Application Ajax » (Asynchronous JavaScript and XML) ?
Quelles différences avec un développement en Java (Android) ou Objective C (iPhone) ?
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 (Titanium, Xamarin…)
- application hybride (PhoneGap/Cordova, Ionic…)

Rappel des fondamentaux

Le glossaire du digital (UX, UI, IoT…)
Etat des lieux sur les navigateurs
Les spécificités des Webrowser Engine (WebKit, Gecko, Trident, Blink…)
Quelques rappels sur les fondamentaux des langages du Web :
- HTML
- CSS3
- JavaScript et JavaScript POO
- XML
- Ajax et JQuery

Configurer votre espace de travail

Quels outils de développement (IDE) utiliser pour développer des applications :
- native généré (JavaScript, C#, .NET...)
- hybride (HTML5 / CSS3 / JavaScript…) ?  
Qu’est-ce qu’un gestionnaire de dépendances ? Parmi les solutions du marché (NodeJS, NPM, Bower, Gulp, etc.), quel gestionnaire choisir pour votre projet?
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)
- SSE (Server-Sent Events)

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 LESS/SCSS
- présentation de SASS
- SCSS vs SASS
- le framework Compass (framework SASS)
Les frameworks CSS Bootstrap, Web Starter Kit, Foundation…

Sencha Touch 2 : Structure d’une application MVC

Présentation du framework Sencha Touch
Concepts fondamentaux (Système de classes & Instanciation des objets)
Architecture MVC :
- structure d’une application Sencha MVC
- déclaration de l’application
- définition des Controller, View & Model dans l’application
Gestion des évènements (Scope, Single, Buffer)
Composants Graphiques :
- positionnement des objets avec les Layout & Conteneur
- formulaires : définition, chargement, submit et validation
- listes : DataView, List, Nested List…
Gestion des données : le Package Data :
- les models & Proxy
- les Stores (Reader et Writer, Filtre & Trie des données, Source de données JSON & RSS)
Interface de ligne de commande Sencha Cmd

Travaux Pratiques

Liste des offres d’emploi d’un flux RSS
Visualisation du détail, recherche par critère

Ionic : Quand AngularJS 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’AngularJS :
- 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
Automatisation des compilations avec Gulp
Ajout des plugins : Ng-Cordova pour les avec le terminal (batterie, GPS, Bluetooth, appareil photo)
Interface de ligne de commande Ionic CLI

Travaux Pratiques

Création d’une application mobile à l’aide du Framework AngularJS :
Un menu
Une liste, une visualisation du détail
Une webview (appel à une autre page internet)
Un formulaire avec un bouton pour appeler et un autre pour envoyer un email

Transformer son application web en application mobile avec Apache Cordova (PhoneGAP)

Présentation de PhoneGap/Cordova
Comment 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
Cordova vs PhoneGap
Téléchargement, installation, et prérequis pour utiliser Cordova
Utilisation des simulateurs Android et iPhone  
Architecture PhoneGap/Cordova & Plugins :
- WebView
- interface Javascript
- API Natives (Camera, Accéléromètre…)
- plugins
- interface de ligne de commande Cordova
Ajouter du contenu HTML (TPs précédents) :
- identifications des limites
- point sur les problèmes constatés
Tests de portage du code HTML/CSS/JavaScript pour différents types de téléphones (Android, iPhone...)
Comparaison entre une application native et sa version « distante »  
Les aspects administratifs (iPhone Developer Program, Certificats...)
Les classiques : gestion du GPS et de l'accéléromètre, gérer le vibreur, comment bien gérer le son, gestion des images de l'appareil photo….

Travaux Pratiques

Liste des offres d’emploi et visualisation du détail
Création de l’application multiplateforme à l’aide du framework Cordova
Déploiement de l’application vers Android, iOS et Windows Phone

Notre application mobile au quotidien

Administrer les données de l’application avec un backoffice
Exemple de mise en œuvre avec WordPress
Récupérer les données grâce aux Web Services (JSON)

Travaux Pratiques

Reprise des Travaux pratiques précédents (liste des offres d’emplois)
Interconnexion avec WordPress

Déployer votre application

Qu’est-ce qu’un store ?
Quels sont les stores existant sur Internet (Apple, Google, Windows) ?
Soumettre son application au grand public (AppStore & Google Store).
Qu’est-ce qu’un store d’entreprise ?
- particularité Apple sur le déploiement Inhouse
- qu’est-ce que le MDM, MAM ?
Créer un mini store d’entreprise pour mettre à disposition vos Apps
- autodétection de l’OS
- lien spécifique pour installer un IPA (Apple)
- gérer les interactions avec le téléphone (sources inconnues, gestion de la version)

Travaux Pratiques

Création d’un store privé.