Apache Cordova : créez votre première application mobile multiplateforme !


 

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.

Installation de Cordova

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 :

cordova_1

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).

cordova_2

Installation:

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

cordova_3
Pour l’installer, veuillez entrer :

npm install -g cordova

cordova_4

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

Développons notre application

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

cordova_5

Explication : On a créé un dossier nommé « sfeir » comportant le projet « SfeirCordovaProject » 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).

cordova_6

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

cordova_7

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

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 “builder” l’application (création / compilation), puis la lancer sur un émulateur ou un smartphone connecté . Pour se 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 :

cordova_8

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

cordova_9

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

cordova_10

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

cordova_11

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 téléphone (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.

cordova_12

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

cordova_13

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 :

cordova_14

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.

Vous aimerez aussi...