Dans le domaine des applications mobiles, la principale problématique que rencontrent les développeurs est la multiplication des supports. Aujourd'hui, il n'est pas vraiment envisageable 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.
Pour pallier à ce problème, une solution existe : les frameworks de développement mobile. Les plus répandus actuellement, Adobe Air, PhoneGap et Titanium sont des outils qui permettent en un seul développement de générer des applications sur tous ces supports.
Aujourd'hui, nous vous proposons un tutoriel complet (et en français !) sur la création d'une application mobile avec PhoneGap !
Sous Cordova (le nouveau nom de PhoneGap depuis qu'il a été repris par la fondation Apache), 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 davantage au niveau de la configuration du poste de travail car les outils requis sont nombreux.
Notre fil rouge sera le développement d'une application Android sous Windows 7 (64 bits), mais ce serait sensiblement la même chose sous Mac OS ou Linux pour en créer une identique et fonctionnant sur iPhone ou Windows Phone.
La base : JAVA
Durant ce tutoriel, nous allons utiliser des outils qui nécessitent la machine virtuelle JAVA pour fonctionner. 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 :
- JRE : http://www.java.com/fr/download/
- JDK : http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
Une fois les deux packages 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, et suivez les étapes de la capture ci-dessous.
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.
Puis sur la fenêtre notée 3 ci-dessus cliquez sur le bouton « Nouvelle... » dans le 2è cadre et saisissez :
- 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, vous devez vous munir d'un IDE (Integrated Development Environment - Environnement de développement intégré) performant, nous choisirons Eclipse, ou plus précisément Aptana Studio qui représente Eclipse + un plugin de développement web. Pour le télécharger vous devez vous rendre ici : http://www.aptana.com.
Une fois que vous l'avez téléchargé et installé, vous devriez pouvoir l'exécuter et obtenir l'affichage suivant, si ce n'est pas le cas, votre machine virtuelle JAVA n'est pas correctement installée, veuillez revoir l'étape précédente.
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 petit 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, pour plus de clarté 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.0 ».
Il faudra ajouter le répertoire « C:\Apps\apache-ant-1.9.0\bin » à la fin de votre variable Path (comme pour JRE et JDK, ajouter simplement un point virgule et le chemin ci-dessous à la suite du reste et enregistrez les modifications).
Spécificités Android
Afin de pouvoir développer des applications mobiles, PhoneGap aura besoin de connaitre tous les détails d'une API, par exemple celle d'Android. Cela passe par l'installation du SDK (Software Developement Kit - Kit de développement logiciel). Dans le cas d'Android on parle d'ailleurs de SDK au pluriel, car chaque version du système apporte de nouvelles fonctionnalités.
Aujourd'hui nous en sommes à l'API n°17, celle qui est associée à la version 4.2.2 d'Android (Jelly Bean), mais si vous voulez cibler un maximum de terminaux vous devrez vous cantonner à 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 mobile. La norme actuellement se situerai autour de l'API n°8 qui correspond à Android 2.2 (soit 98% des mobiles compatibles).
Pour connaitre le taux d'utilisation de chaque version d'Android en temps réél (données fournies par Google), vous pouvez consulter cette page : http://developer.android.com/about/dashboards/index.html.
Pour télécharger le 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 (passez par l'option « USE AN EXISTING IDE » pour récupérer uniquement l'outil qui nous intéresse).
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 :
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.
Dernières vérifications
Normalement tout doit être correctement configuré pour utiliser PhoneGap, pour vérifier cela, utilisez la touche « WINDOWS + R », saisissez « cmd » et validez pour afficher l'invite de commandes.
Vous allez entrer chacune de ces commandes successivement, aucune ne doit vous renvoyer la terrible phrase « 'xxx' n'est pas reconnu en tant que commande interne ou externe, un programme exécutable ou un fichier de commandes. ».
- java (si erreur, se repporter à la section Java - JRE)
- javac (si erreur,se repporter à la section Java - JDK)
- ant (si erreur,se repporter à la section ANT)
- adb (si erreur,se repporter à la section Android)
- android (si erreur,se repporter à la section Android)
Astuce : bien souvent en cas d'erreur, c'est la variable PATH (et/ou JAVA_HOME) qui a mal été renseignée. Pour plus de lisibilité, n'hésitez pas à copier la longue liste de répertoires dans un fichier texte du bloc-notes 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 (allez au chemin indiqué avec votre explorateur de fichiers).
Si pour une de ces commandes, la phrase citée plus haut apparait, vous devez revoir la partie correspondante, si tout est OK, on peut y aller, lancez Eclipse ! :)
De retour sur Eclipse
Une fois celui-ci lancé, il faudra installer une dernière chose : le plugin ADT (Android Development Tools) qui nous permettra, entre autres, de consulter les logs de notre appareil Android.
Pour cela, 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.
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 donc « C:\Apps\android-sdk-windows ».
Si lors de l'installation du plugin ADT vous faîtes face à l'erreur suivante :
Cannot complete the install because one or more required items could not be found. Software being installed: Android Development Tools 15.0.0.v201110251216-213216 (com.android.ide.eclipse.adt.feature.group 15.0.0.v201110251216-213216) Missing requirement: Android Development Tools 15.0.0.v201110251216-213216 (com.android.ide.eclipse.adt.feature.group 15.0.0.v201110251216-213216) requires 'org.eclipse.wst.sse.core 0.0.0' but it could not be found
vous devez installer un package supplémentaire préalablement. A nouveau, passez par Help > Install new software, et saisissez cette fois « http://download.eclipse.org/releases/indigo/ ».
Parmi les éléments proposés, cochez uniquement « Web, XML, Java EE and OSGi Enterprise Development > WST Server Adapters » puis lancez son installation. Par la suite vous pourrez reprendre l'installation de ADT.
Préparez votre mobile !
Pour pouvoir 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 > DDMS » après avoir connecté votre mobile. Dans la partie gauche de l'écran vous devriez voir une cadre appelé « Devices » où votre mobile apparait, et au bas de l'écran un bloc « LogCat » qui affiche les logs de votre appareil.
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).
N'hésitez pas à nous demander de l'aide avec un commentaire au bas de la page ou sur notre page Facebook !
PhoneGap : votre première application !
Tout est maintenant prêt pour accueillir (enfin) PhoneGap. Allez télécharger la dernière version à cette adresse : http://phonegap.com/download.
Dézippez le contenu téléchargé dans un répertoire simple, par exemple « C:\Apps\phonegap-2.5.0 ».
Ouvrez l'invite de commandes et saisissez la commande suivante : « cd C:\Apps\phonegap-2.5.0\lib\android\bin » (adaptez si besoin à vos répertoires).
Ensuite vous pouvez saisir cette nouvelle commande qui vous permettra de générer le squelette de votre première application : « create MonAppli fr.company.monappli MonAppli ». On appelle donc le binaire create avec 3 paramètres : le répertoire à créer, l'ID de l'application suivant la convention de nommage fr.company.xxx et le nom de l'application.
Si tout ce passe bien, vous devez avoir ce rapport :
Microsoft (R) Windows Script Host Version 5.8
Copyright (C) Microsoft Corporation 1996-2001. Tous droits réservés.
Creating new android project...
Copying template files...
Copying js, jar & config.xml files...
Copying cordova command tools...
Updating AndroidManifest.xml and Main Activity...
Sinon... il va falloir creuser ! N'hésitez pas à nous signaler un blocage par le biais de commentaires au bas de la page ou sur notre page Facebook.
Vous pouvez alors prendre le répertoire qui a été créé « C:\Apps\phonegap-2.5.0\lib\android\bin\MonAppli » et le placer où vous le souhaitez sur votre machine. La suite va se passer dans Eclipse, où nous allons compiler notre projet !
Eclipse : édition et compilation !
Votre projet (du moins la base) est maintenant créé sur votre machine, nous allons 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 le répertoire créé dans l'étape précédente (voir exemple ci-dessous) et cliquez sur « Finish ».
Votre projet va alors apparaitre dans la colonne de gauche, et vous êtes prêt à développer !!
Pour commencer, nous allons supprimer les erreurs que PhoneGap fournit avec ses projets :) (à vrai dire, il s'agit dans mon cas de l'utilisation de paramètres qui ne sont pas disponible à mon niveau de SDK - j'ai choisi le SDK 8).
Dans le fichier « AndroidManifest.xml » supprimez les attributs qui signalent des erreurs (notamment android:hardwareAccelerated).
Nous allons faire une première compilation pour voir ce que cela donne, car PhoneGap 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.
La première fois, une fenêtre va apparaitre pour vous demander où débugguer, choisissez 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.
Fin du turorial
Nous avons finalement compilé une application avec PhoneGap en partant de rien (ou presque).
Vous pouvez maintenant l'adapter à vos besoin, simplement en modifiant les fichiers qui se trouvent dans assets/www. Dans un premier temps, essayez de manipuler les fichiers « index.html » et « js/index.js » en changeant par exemple les textes qui apparaissent !
J'espère que ce tutoriel vous sera utile, si c'est le cas n'hésitez pas à le partager et à venir le commenter sur notre page Facebook ... cliquez ici !