.
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 :
$ 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 :
$ 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 :
$ 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) :
$ 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 :
$ 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 :
$ 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 !) :
$ 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 :
$ 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 :
$ 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.