Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Application mobile multi-plateformes avec PhoneGap/Cordova

Par Quentin SCHUELLER Publié le 14/08/2015 à 13:02:01 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Cet article a pour but de vous donner des pistes pour concevoir une application mobile multi-plateforme en utilisant le framework PhoneGap.

Contexte

La réalisation d'une application mobile multi-plateforme (Android, iOS, Windows Phone) n'est pas une chose aisée.

Une des première possibilité est d'écrire l'application dans son langage natif pour chaque plateforme:

  • JAVA pour du Android

  • .NET pour du Windows Phone

  • Objective-C pour de l'iOS

Dans ce premier cas de figure, plusieurs contraintes se posent :

  • la nécessité de maitriser différents langages de programmation plus ou moins différents.

  • le temps nécessaire au developpement est plus elevé.

  • le maintien à long terme, c'est à dire des corrections, des mises à jours et autres peut s'avérer complexe.

La deuxième possibilité qui s'offre à vous est d'utiliser Apache Cordova/PhoneGap. Il s'agit d'un framework en javascript qui permettra de réaliser une application mobile cross-plateform.

Note: Lorsqu'on parle d'application cross-platform, il s'agit de maintenir qu'une seule base de code qui peut s'éxécuter sur plusieurs système d'exploitations. Dans notre cas il s'agit de plusieurs mobiles. Le code sera lui en HTML/CSS/JavaScript.

L'intérêt d'un tel environnement est l'utilisation de technlogies web, le tout hébergé de manière locale sur le mobile. Les avantages sont alors multiples :

  • Utilisation d'HTML, CSS et de JavaScript pour l'écriture de l'application.

  • Programmation de l'application dans un seul langage.

  • Maintient a long-terme beaucoup plus facile.

Note: les applications qui sont developpées avec le framework de développement Cordova ne sont pas entièrement en HTML/CSS/JavaScript. Celles-ci sont des applications hybrides. En effet il faut au préalable compiler l'application avec les outils du SDK fournis pour l'installer sur mobile.

Le fait d'avoir un code unique qui s'adapte sur plusieurs plateformes est sans conteste le point le plus intéressant. Néanmoins prenez en considération que pour des applications vraiments grosses ou gourmandes, l'écriture de l'application en code natif sera toujours plus performante.

Différence entre Apache Cordova et PhoneGap

PhoneGap est un projet open-Source qui a vu naissance en 2009. Le but était de proposer une alternative aux developpeurs iOS en évitant l'Objective-C et sa syntaxe particulière...

Fin 2011, Adobe rachète le projet et le re-publie sous licence libre sous le nom d'Apache Cordova à travers la fondation Apache Software.

Cordova permet de réaliser des applications JavaScript en mode SPA (Single Page Applications) le tout en utilisant des frameworks de type Backbone, AngularJS, Ionic, ReactJS...

Principe et fonctionnement de Apache Cordova/Phonegap

Cordova est en réalité une surcouche, un wrapper, qui permet d'accéder aux différentes fonctionnalités du mobile à travers des API (Application Programming Interface).

En soi, l'affichage de l'application se fera à travers la WebView qui sert a afficher du contenu HTML. L'utilisation ou l'accès à la caméra, la géolocalisation, des contacts... se fera depuis les API cordova.

La puissance de Cordova est dû au faite que l'affichage de l'application se fera toujours en HTML dans une WebView. En effet tous les téléphones disposent d'un navigateur web qui permet d'afficher du HTML, et ce peu importe le language natif du téléphone!

Prérequis et installation

Le seul impératif avant de commencer à développer une application sous Apache Cordova sont de bonnes connaissances dans quelques langages Web : HTML, CSS et JavaScript. Vous devrez un peu manipuler du CLI (Command-Line Interface) pour la compilation

Installation des SDK

L'installation des SDK, c'est à dire des kits de développement, est nécessaire et ce pour chaque plateforme que vous souhaitez supporter. Par soucis de simplicité nous allons parler que de deux plate-formes principales: Android et iOS. Dans ces SDK vous trouverez une collection d'outils mis à votre disposition pour facilité la vie des développeurs.

  • iOS: Si vous souhaitez développer pour la plateforme iOS, sachez qu'il vous faudra un Mac pour utiliser xCode et surtout pour publier vos applications sur l'Apple Store. xCode est un éditeur de code qui embarque un simulateur iOS en plus de pas mal de frameworks et bibliothèques assez utiles. Vous pouvez bien entendu vous affranchir d'xCode et utiliser une autre IDE mais il faudra penser a activer le mode CLI pour piloter xCode en ligne de commande. Guide outils iOS

  • Android : contrairement à iOS, vous pouvez compiler les applications Android sur n'importe quel système d'exploitation (Windows, Linux, Mac). Google met a disposition un kit de développement déclinable en deux versions : Eclipse ADT (Android Developer Tools) ou la version Stand-alone SDK qui embarque juste les outils principaux pour le développement sous Android. Guide outils Android

Pour les autres plateformes, rendez-vous sur les guides correspondants.

Installation de Cordova CLI

L'installation de la CLI Cordova se fait depuis un package node.js.

  1. La première étape consiste à installer Node.js.

  2. Puis installer un client git

  3. Installer le module cordova depuis l'utilitaire npm en CLI :

npm install -g cordova 

[Note: l'option -g permet d'installer cordova de manière globale et non seulement dans le dossier node_modules.]

Pour vérifier que l'installation s'est bien déroulée, utiliser la commande cordova pour voir si l'aide s'affiche.

Création de l'application

Naviguez jusqu'au dossier où vous souhaitez maintenir votre code source et exécuter la commande suivante en CLI :

$ cordova create hello com.example.hello HelloWorld 
  • - hello correspond au dossier de votre application. Dedans vous trouverez un fichier config.xml qui sert a la compilation et a la distribution de l'application. Des sous-dossiers nommés www, css, js et img qui correspondent aux conventions standards de nommage Web sont également créés.

  • - com.example.hello correspond à l'identifiant du projet

  • - HelloWorld nom d'affichage de l'application. Cet argument est optionnel.

Si vous ouvez avec votre navigateur web le fichier index.html contenu dans le répertoire www, vous constaterez que l'application indique un magnifique "CONNECTING TO DEVICE". Ce qui est normal car on affiche l'application dans une page web et non sur un mobile. Nous allons voir un peu après comment faire pour le lancer sur un émulateur.

Note: Sur le screenshot, vous pouvez voir que j'utilise Ripple Emulator, une extension chrome qui permet d'émuler un environnement mobile en HTML5. Bien entendu les API ne sont pas pour autant supportés comme sur un simulateur...

Ajouter des plateformes au projet

Pour ajouter des plateformes au projet il faut se placer dans le dossier du projet. Vu que le dossier du mon projet HelloWorld est hello :

$ cd hello

On va rajouter 3 plateformes : iOS, Windows Phone et Android

$ cordova platform add ios 
$ cordova platform add wp8 
$ cordova platform add android 

Pour vérifier l'ensemble des plateformes supportées :

 $ cordova platforms ls 

Pour supprimer une plateforme (Windows Phone par exemple)

$ cordova platform rm wp8

Build de l'application

Par défaut le script cordova create génère un squelette d'application du projet et le fichier d'accueil du projet : www/index.html. Toute initialisation doit se faire dans l'event handler deviceready présent dans www/js/index.js

La commande suivante permet de builder le projet pour toutes les plateformes que vous avez ajoutés précédemment:

$ cordova build 

Tester l'application sur un emulateur ou un mobile

Si vous avez installé le SDK Android vous pouvez directement lancer l'emulateur android:

$ cordova emulate android

Vous remarquerez que la connexion Cordova s'effectue: "DEVICE IS READY" est affiché cette fois-ci.

Note: l'émulateur android est souvent très lent et il est préférable de lancer l'application sur votre téléphone android si vous en avez un :

$ cordova run android 

Ajouter des plugins

Lors de la création de l'application, celle-ci n'embarque par défaut aucun plugin.

Les plugins vous permettront d'utiliser les fonctionnalités du téléphone depuis les API Cordova. Nous allons à présent parler de quelques plugins disponibles :

Note: Il est bien entendu possible d'écrire vos propres plugins. Dans ce cas il faudra écrire le plugin dans son language natif pour chaque plateformes.

L'ajout d'un plugin se fait toujours depuis la commande

cordova plugin add

Voici quelques exemples de commandes pour ajouter des fonctionnalités à vos applications:

  • Camera :

    $ cordova plugin add cordova-plugin-camera 
  • Contacts :

    $ cordova plugin add cordova-plugin-contacts 
  • Accès aux fichiers du téléphone :

    $ cordova plugin add cordova-plugin-file 
  • SplashScreen :

    $ cordova plugin add cordova-plugin-splashscreen 

Je vous invite a consulter la liste complète de plugins disponibles.

Pour afficher la liste de plugins installés :

$ cordova plugin ls 

Pour supprimer un plugin :

$ cordova plugin rm lenomduplugin

Les frameworks externes

Je vais rapidement parler des frameworks externes et autres bibliothèques qui sont très pratiques pour le développement de votre application Apache Cordova.

On peut distinguer deux types de bibliothèques :

  1. Les bibliothèques JavaScript à proprement parler.

  2. Les bibliothèques UI (User Interface), c'est à dire l'interface graphiques.

  • Pour les bibliothèques JavaScript on peut citer AngularJS, Backbone, jQuery, Sencha Touch... J'ai une petite préférence pour AngularJS. Ce cours ne faisant pas l'objet des frameworks JS, je vous laisse l'opportunité de chercher par vous mêmes le framework qui vous convient le mieux.

  • Pour les bibliothèques UI : jQuery Mobile, Ionic, OnSenUI...

Dans tous les cas, dans le choix de votre framework, prenez en considération :

  • la communauté : plus elle est importante plus vous pourrez facilement trouver de l'aide.

  • la compatibilité : évitez de mélanger des frameworks

  • les performances

Conclusion

C'est ici que s'achève ce tutoriel très rapide sur Apache Cordova. Il y aurait encore énormément à écrire sur ce sujet mais vous avez eu déjà un petit aperçu de la puissance que peut représenter les applications hybrides sous certaines conditions.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels