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

Image non disponible

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 Donner une note à l'article (5).

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 :

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

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.

cordova_3

Pour l'installer, veuillez entrer :

 
Sélectionnez
1.
$ 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 :

 
Sélectionnez
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 :

 
Sélectionnez
1.
$ cordova create sfeir com.cordova.sfeir SfeirCordovaProject
cordova_5

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

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

 
Sélectionnez
1.
$ 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.

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 :

 
Sélectionnez
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 :

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

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 :

 
Sélectionnez
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 !) :

 
Sélectionnez
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.

cordova_12

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

 
Sélectionnez
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 :

 
Sélectionnez
1.
$ 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

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.