Application mobile multiplateforme avec Cordova

Apache_Cordova1

Dans le domaine des développements mobiles, le principal problème rencontré par les développeurs est la multiplication des plate-formes cibles existantes de nos jours. Il n'est plus vraiment idéal de limiter une application à un seul système d'exploitation, que ce soit iOS d'Apple (sur iPhone, iPod, iPad), Android de Google (sur mobiles HTC et Samsung, Galaxy Tab et autres), ou bien encore BlackBerry OS de RIM.

Heureusement, une solution existe pour résoudre ce problème. C’est les frameworks de développements mobiles. Il existe plusieurs frameworks de développements mobiles. Les plus utilisés sont Adobe Air, PhoneGap et Titanium qui permettent en un seul développement de générer des applications sur tous les supports mobiles.

Dans cet article, je vous propose un guide complet sur la création d'une application mobile multiplateforme avec Cordova (PhoneGap).

Sous Cordova, le développement de l'application se fait grâce aux langages HTML, CSS, Javascript et un peu de XML. La plupart des développeurs web sont donc capables de créer une application avec cet outil. La difficulté se situe principalement au niveau de la configuration du poste de travail car les outils requis sont nombreux.

Ici on prend comme exemple le développement d’une application Android sous Windows 7 (64 bits), mais on pourra faire la même chose sous Mac Os ou Linux pour créer une copie qui fonctionne sur iPhone ou Windows Phone.

Les outils de base  JAVA

Pour fonctionner, nous avons besoin d’utiliser des outils nécessitant la machine virtuelle JAVA. C'est le cas notamment d'Eclipse qui nécessite JRE (Java Runtine Environment) et le compilateur Android qui nécessite JDK (Java Development Kit).

Il vous faudra donc installer ces deux outils sur votre PC :

Une fois que les deux packages sont installés, vous devrez ajuster votre configuration pour qu'ils soient accessibles depuis n'importe quel répertoire. Pour cela vous devez ajouter les répertoires dans la variable PATH :

  • Faites un clic droit sur « Ordinateur » puis Propriétés, une fenêtre apparaît
  • Sur la nouvelle fenêtre cliquez sur « paramètres système avancés » à « variables d’environnement » ;
  • Sur « variables système » choisissez « path » sur la liste déroulante et cliquez sur Modifier. Une autre fenêtre sera affichée.
  • Dans « Valeur de la variable » vous devez rajouter les répertoires où sont installés le JRE et le JDK, séparés par des points virgules. Dans mon cas j'ai rajouté « ;C:\Program Files (x86)\Java\jre7\bin;C:\Program Files (x86)\Java\jdk1.7.0_17\bin », puis enregistrez en cliquant sur OK

Ensuite vous devez créer une variable d’environnement nommée «JAVA_HOME ».

Pour ce faire:

  • Faites un clic droit sur « Ordinateur » puis Propriétés, une fenêtre apparaît
  • Sur la nouvelle fenêtre cliquez sur « paramètres système avancés » à « variables d’environnement » ;
  • Cliquez sur « Nouvelles »
  • Nom de la variable : JAVA_HOME
  • Valeur de la variable : C:\Program Files (x86)\Java\jdk1.7.0_17\bin (ou adaptez comme dans la variable Path).

C'est tout pour Java, mais nous reviendrons par la suite à la configuration du Path pour ajouter d'autres bibliothèques.

Environnement de travail

Pour commencer, nous avons besoin d'un IDE performant, on choisira Eclipse. Vous devez vous rendre ici pour le télécharger: https://eclipse.org/downloads/index-developer.php.

Une fois téléchargé et installé, vous devriez pouvoir l'exécuter. Si ce n'est pas le cas, votre machine virtuelle JAVA n'est pas correctement installée, donc veuillez revoir l'étape précédente pour régler le problème.

Apache ANT

Pour les opérations répétitives telles que la compilation ou la génération d'une architecture de projet de base, nous aurons besoin d'un logiciel appelé ANT.

Pour le télécharger, rendez-vous sur http://ant.apache.org/bindownload.cgi. Il s'agit d'une simple archive qu'il faudra extraire sur votre machine. Il est conseillé d'utiliser un répertoire simple à la racine du disque. Dans mon cas ce sera « C:\Apps » et ANT sera extrait dans le répertoire « C:\Apps\apache-ant-1.9.4 ».

Il faudra ajouter le répertoire « C:\Apps\apache-ant-1.9.4\bin » à la fin de votre variable Path comme nous avons fait pour JRE et JDK.

Spécificités Android

Afin de pouvoir développer des applications mobiles, Cordova aura besoin de connaître tous les détails d'une API, par exemple celle d'Android. Cela se passe par l'installation du SDK. Dans le cas d'Android on parle d'ailleurs de SDK, car chaque version du système apporte de nouvelles fonctionnalités.

Aujourd'hui nous sommes à l'API n°21 d’Android SDK, celle qui est associée à la version 5.0 d'Android. Mais si vous voulez cibler un maximum de terminaux vous devrez vous positionner à une version inférieure. En effet, même si cette dernière offre moins de fonctionnalités elle sera supportée par un plus grand nombre de mobiles. La norme actuellement se situera autour de l'API n°8 qui correspond à Android 2.2 soit 98% des mobiles compatibles.

Pour télécharger l’Android SDK Manager, qui vous permettra de récupérer les SDK de votre choix, rendez-vous sur cette page http://developer.android.com/sdk/index.html

Une fois téléchargé, double-cliquez sur l'exécutable pour l'installer. Lorsqu'il vous est demandé le répertoire dans lequel sera installé le(s) SDK, je vous suggère donc de définir un répertoire simple, du type « C:\Apps\android-sdk-windows ». Une fois l'installation terminée, vous aurez accès à l'interface ci-dessous :

and_sdk_manager

Cochez simplement le dossier « Tools » complet, le dossier Android de votre choix (la version minimum que vous souhaitez maintenir), et « Google USB Driver » dans la rubrique Extras, puis cliquez sur Install packages.

Une fois encore, vous devrez informer Windows de l'existence de ces outils en mettant à jour votre Path, ajoutez ;C:\Apps\android-sdk-windows\platform-tools;C:\Apps\android-sdk-windows\tools à la fin de sa valeur.

Vérifications

Normalement tout doit être correctement configuré pour utiliser Cordova. Pour vérifier cela, affichez l'invite de commandes.

Vous allez entrer chacune de ces commandes successivement, aucune ne doit vous renvoyer la terrible phrase « 'xxx' n'est pas reconnue en tant que commande interne ou externe, un programme exécutable ou un fichier de commandes. ».

  • java (si erreur, se reporter à la section Java - JRE)
  • javac (si erreur, se reporter à la section Java - JDK)
  • ant (si erreur, se reporter à la section ANT)
  • adb (si erreur, se reporter à la section Android)
  • android (si erreur, se reporter à la section Android)

Astuce : En cas d'erreur, c'est la variable PATH et/ou JAVA_HOME qui est mal renseignée. N'hésitez pas à copier la longue liste de répertoires de variable path dans un fichier texte pour tout visualiser d'un coup. Vérifiez bien que les différents répertoires sont séparés par des points-virgules (;) et non des virgules simples, et que les chemins sont les bons.

Toutes ces commandes doivent être fonctionnelles sinon vous devez revoir la partie correspondante.

Si tout est OK, on peut continuer.

ADT

Lancez Eclipse. Il faudra installer une dernière chose: le plugin ADT (Android Development Tools) qui nous permettra de consulter les logs de notre appareil Android.

Pour cela, sous Eclipse, cliquez sur Help > Install new software. Dans la barre du haut, saisissez l'adresse « http://dl-ssl.google.com/android/eclipse » puis cochez tous les éléments et cliquez sur Next puis Finish pour les installer.

and_dev_tools

Il vous propose ensuite de redémarrer Eclipse, faites-le. Au redémarrage, il vous sera demandé de préciser le dossier dans lequel sont stockés les SDK Android, indiquez lui «C:\Apps\android-sdk-windows ».

Préparation de votre mobile

Si vous voulez débugger directement sur votre mobile ou tablette, vous devez activer le débogage USB, et l'installation d'applications de  « source inconnues » (qui ne proviennent pas de Play Store).

Il faut également que le PC reconnaisse votre appareil mobile. Pour vérifier cela, dans Eclipse, cliquez sur « Window > Open Perspective > >Other...>DDMS » après avoir connecté votre mobile. Dans la partie gauche de l'écran vous devriez voir un cadre appelé « Devices » où votre mobile apparaît, et au bas de l'écran un bloc « LogCat » qui affiche les logs de votre appareil.

and_dev_tools

log_cat

Si vous n'avez pas ces éléments, vous devez chercher les pilotes spécifiques à votre appareil pour qu'il soit reconnu dans Eclipse avant de poursuivre. La plupart du temps, il vous suffira de télécharger le logiciel tout-en-un fourni par le fabricant de votre smartphone (par ex. HTC Sync Manager ou Samsung Kies pour ne citer qu'eux).

Installation du Cordova Command CLI

Maintenant que tout est prêt, nous pouvons installer Cordova. Pour installer Cordova command line :

  • Téléchargez et installez Node.js dans cette adresse : http://nodejs.org/ . Apres l’installation, vous devez être capable d’exécuter les commandes node et npm via votre ligne de commande
  • Téléchargez et installez git client si vous ne l’avez pas encore installé dans votre machine. Après l’installation, vous devez être capable d’exécuter la commande git dans votre ligne de commande
  • Installez le module Cordova en utilisant l’utilitaire npm de Node.js. Le module Cordova sera téléchargé automatiquement par cet utilitaire. Pour ce faire, ouvrez la ligne de commande et tapez la commande suivante :

npm install –g cordova

            Le –g signifie l’installation de Cordova globalement

Vous devez ajouter le répertoire du npm dans votre variable d’environnement. Faites la même chose comme nous avons fait pour JDK et SDK.

Votre première application Cordova

Maintenant le temps est venu pour nous de créer notre première application. Ne vous inquiétez pas, c’est plus facile que vous l’imaginiez !

Allez dans le répertoire où vous souhaitiez conserver votre code source (dans mon cas j’ai choisi « D:\Wamp\www\projets »), et exécuter la commande suivante:

cordova create nom_repertoire id_project nom_projet

Dans mon cas j’ai choisi « hello » comme nom du repertoire, « com.exemple.hello » comme id et « HelloWord » comme nom du projet. Donc pour moi, la commande sera :

cordova create hello com.exemple.hello HelloWord

Le traitement de cette commande peut prendre beaucoup de temps, donc soyez patient.

Le premier argument « hello » spécifie un répertoire à générer pour votre projet. Ce répertoire ne devrait pas exister, Cordova le créera pour vous. Le sous-répertoire www contient la page d'accueil de votre application, ainsi que les diverses ressources css, js, et img, qui suivent les conventions de nommage des fichiers de développement web. Le fichier config.xml contient d'importantes métadonnées nécessaires pour générer et distribuer l'application.

Le deuxième argument « com.example.hello » fournit à votre projet un identifiant. Cet argument est facultatif, mais uniquement si vous effacez également le troisième argument. Vous pouvez modifier cette valeur plus tard dans le fichier config.xml, mais soyez conscient qu'il peut y avoir des codes générés à part de config.xml qui utilise cette valeur, tels que les noms de packages Java. La valeur par défaut est io.cordova.hellocordova, mais il est recommandé que vous sélectionniez une valeur appropriée. De même pour le troisième argument.

Le troisième argument « HelloWorld » fournit le titre d'affichage de l'application. Cet argument est facultatif. La valeur par défaut est HelloCordova, mais il est recommandé que vous sélectionniez une valeur appropriée.

Ajout plates-formes

Toutes les commandes suivantes doivent être exécutées dans le répertoire du projet, ou dans tous les sous-répertoires d'application.

Alors :

  • Entrez dans le répertoire de votre projet :

 cd hello

  • Exécutez la commande :

cordova platform add android

Sous mac vous pouvez faire :

cordova platform add ios

pour ajouter la plate-forme IOS dans votre projet.

Faites la même chose pour les autres plateformes mais vous devez l’exécuter à partir d’une machine qui prend en charge le SDK de la plate-forme selon les combinaisons suivantes :

  • IOS (Mac)
  • Amazon Fire OS (Mac, Linux, Windows)
  • Android (Mac, Linux, Windows)
  • BlackBerry 10 (Mac, Linux, Windows)
  • Windows Phone 8 (Windows)
  • Windows (Windows)
  • Firefox OS (Mac, Linux, Windows)

Eclipse : édition et compilation

Votre projet est maintenant créé, nous allons l' importer dans Eclipse, lui apporter quelques modifications et voir le résultat directement sur votre mobile.

Dans Eclipse, vous devez avoir sur la partie gauche la vue « Project Explorer » depuis laquelle vous devez faire un clic droit > New > Project. Ensuite, choisissez dans le dossier « Android » la ligne « Android Project from Existing Code » et cliquez sur « Next ». Allez pointer dans le répertoire créé dans l'étape précédente (voir exemple ci-dessous) et cliquez sur « Finish ».

eclipse_import_project2

Votre projet va alors apparaître dans la colonne de gauche, et vous êtes prêt à développer.

Nous allons faire une première compilation pour voir ce que cela donne, car Cordova créé une source de base en même temps que le projet.

Pour compiler, sélectionnez votre projet dans la colonne de gauche et cliquez sur « Debug as > Android Application » comme sur l'écran ci-dessous.

eclipse_run_project1

Pour la première fois, une fenêtre va apparaître pour vous demander de choisir votre mobile.

Dans la console au bas de la page, vous pouvez suivre le processus de compilation et d'installation sur votre mobile de l'application. Une fois installée, celle-ci démarre automatiquement. Vous trouverez également l'application compilée dans le répertoire « bin » du projet, dans notre cas, il s'agit d'un fichier avec l'extension APK propre à Android.

cordova_app_project

Conclusion

Nous avons finalement crée une application avec Cordova en partant de zéro.

Vous pouvez maintenant l'adapter à vos besoins, simplement en modifiant les fichiers qui se trouvent dans le répertoire www de votre projet, puis recompiler le projet après chaque modification à l’aide de la commande suivant :

cordova build android

Sinon votre modification ne sera pas prise en compte lors du prochain test. Cette commande sert à réinitialiser les contenus du répertoire D:\wamp\www\projets\hello\platforms\android de notre exemple, ce qui n’est qu’une copie du projet dédié spécialement pour le support Android. Alors si vous avez ajouté la plate-forme IOS à partir d’un mac bien sûr, vous devez avoir dans votre projet un répertoire D:\wamp\www\projets\hello\platforms\ios, de même pour tous les autres supports.

Dans un premier temps, essayez de manipuler les fichiers « index.html » et « js/index.js » en changeant par exemple les textes qui apparaissent ou en ajoutant un alert().

4 commentaires

  1. La vie actuelle sans les applis est inimaginable, les codes et les mis à jour sont indispensables. C’est pourquoi Popfax, a annoncé le lancement de son application PopCompanion sur les téléphones Windows.

  2. Salut votre tutoriel est très clair et m’a permis d’installer correctement tous les outils. Grand merci à toi.

  3. j’ai des difficultés dans cordova, comment peux_je afficher une table du base de données avec wamp sur cordova (dans index :sublime texte ? y’at’il un code c’est urgent s’il vous plait

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.