Tutoriel pour apprendre à créer sa première application mobile multiplateforme avec Apache Cordova

Wajdi Ben Rabah

Apache Cordova est un ensemble d'interfaces de programmation qui permettent la création d'applications mobiles, tout en se basant sur les piliers de la programmation Web (HTML5, JavaScript et CSS). Nous allons voir comment installer tout ça, pour ensuite mettre en place, compiler et exécuter une application mobile avec cette solution.

Pour réagir au contenu de ce tutoriel, un espace de dialogue vous est proposé sur le forum Commentez .

- Titre : Tutoriel pour apprendre à créer sa première application mobile multiplateforme avec Apache Cordova

- Auteur : Wajdi Ben Rabah

- Parution : 13 novembre 2017

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2016 Wajdi Ben Rabah. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Installation de Cordova

- I-A. Prérequis

- I-B. Installation

- II. Développons notre application

- II-A. Mise en place du projet

- II-B. Compilation et exécution

- III. Tests et rendu

- IV. Conclusion

- V. Remerciements

I - Installation de Cordova

I-A - Prérequis

Téléchargez et configurez les SDK des plateformes cibles. Par exemple, pour Android, vous devez installer le SDK Android.

Pour s'assurer qu'Android est bel et bien installé, configuré et prêt à l'utilisation, vous pouvez essayer cette commande sur votre terminal : $ android. Oui, tout simplement. Si tout est bien en place, vous aurez le « Android SDK Manager » qui va se lancer comme suit :

En cas de non-reconnaissance de la commande “android”, veuillez ajouter le path du SDK aux variables d'environnement. L'article a été réalisé sous Mac, et dans l'image ci-dessus vous pouvez trouver la commande qui corrige ce problème (veuillez remplacer le chemin par l'emplacement de l'installation de votre SDK Android).

Téléchargez et installez Node.js (je vous recommande de télécharger le fichier .msi et de suivre l'installation ou le .dmg si vous travaillez sur Mac).

I-B - Installation

Il est temps d'installer Cordova : une fois Node.js installé, vous aurez la main sur la commande “npm”. Pour s'assurer de son bon fonctionnement, essayez de taper “npm” dans votre terminal.

Pour l'installer, veuillez entrer :

1. $ npm install -g cordova

Il peut arriver d'être confronté à une erreur de type “npm ERR! code 1”. Dans ce cas, essayez de nettoyer le cache avec la commande :

1. $ npm cache clean

II - Développons notre application

II-A - Mise en place du projet

Une fois tout en place, créons un projet avec cette ligne de commande :

1. $ cordova create sfeir com.cordova.sfeir SfeirCordovaProject

Explication : on a créé un dossier nommé « sfeir » comportant le projet « SfeirCordovaProject » et ayant comme id le package com.cordova.sfeir.

Très simple, non ? Vous pouvez essayer votre projet en accédant au répertoire “www” sous le dossier “sfeir” généré. Lancez ensuite le fichier “index.html” (souvenez-vous toujours que Cordova nous fabrique une application Web et le fonctionnement est très proche de celui d'un site classique).

Nous avons pour le moment une application Web classique. Rien de particulier. Afin d'ajouter une plateforme cible, veuillez vous déplacer dans le répertoire de l'application générée au départ (“cd sfeir”). Maintenant, ajoutez la plateforme (je prends en exemple Android) :

1. $ cordova platform add android

Vous aurez la possibilité d'ajouter ces plateformes :

- cordova platform add ios ;

- cordova platform add amazon-fireos ;

- cordova platform add android ;

- cordova platform add blackberry10 ;

- cordova platform add firefoxos.

II-B - Compilation et exécution

Nous sommes presque au bout ! Ne vous inquiétez pas, la première configuration est évidemment plus longue, vos prochaines applications prendront beaucoup moins de temps à mettre en place.

Il nous faut maintenant construire l'application (création/compilation), puis la lancer sur un émulateur ou un smartphone connecté. Pour ce faire, vous n'avez qu'à taper :

1. $ cordova build android

(Sans oublier d'être dans le bon répertoire !)

Il se peut qu'une erreur de ce type vienne perturber votre compilation :

Dans ce cas, il suffit de télécharger la dernière version du SDK Android et de faire une mise à jour.

La commande $ cordova build android devrait cette fois passer sans souci.

Comme je suis sur Mac, j'ai essayé un build sur iOS au passage et voilà le résultat :

III - Tests et rendu

La dernière étape est de cibler le smartphone ou l'émulateur (si vous n'avez pas de smartphone Android sous la main). Il suffit de lancer la commande adaptée. Pour l'émulateur :

1. $ cordova emulate android

Pour le smartphone (sans oublier d'ajouter les drivers dans votre OS et d'autoriser les applications de sources inconnues depuis le menu réglage !) :

1. $ cordova run android

Je vous conseille d'essayer Genymotion comme émulateur. Après installation, téléchargez un appareil virtuel et lancez-le en appuyant sur la touche "play".

Note : les appareils virtuels de Genymotions sont perçus comme étant de vrais téléphones par le système. Il faut donc faire un “cordova run android” pour lancer son application.

Pour exécuter votre application sur iOS, utilisez la commande :

1. $ cordova emulate ios

Il se peut que vous ayez un message vous demandant d'installer “ios-sim” pour que l'émulateur fonctionne. C'est un utilitaire qui permet d'installer les applications iOS depuis la ligne de commande. Pour l'installer, utilisez la commande :

1. $ sudo npm install -g ios-sim

Dans ce cas, relancez votre application à travers la commande $ cordova emulate ios une fois ios-sim installé. Vous devriez avoir ce résultat sur iPhone 6 :

IV - Conclusion

C'est une plateforme qui se base sur les technologies Web pour permettre un développement mobile sous la forme de Webviews. C'est très efficace, mais ne vous leurrez pas : si vous cherchez la performance et le look&feel des téléphones Android/iOS, il faudra développer en natif et supporter la longue courbe d'apprentissage que ça implique si vous n'avez aucune expérience avec ces systèmes.

À noter : il existe également une distribution d'Apache Cordova nommée PhoneGap. Vous en apprendrez plus sur leurs similitudes et différences avec ce lien.

V - Remerciements

Cet article a été publié avec l'aimable autorisation de Sfeir.

Nous tenons à remercier jacques_jean pour la relecture orthographique de cet article et Mickael Baron pour la mise au gabarit.