Ce document présente un guide pour débuter avec PhoneGap dans Eclipse pour le développement d'applications Android, en détaillant les pré-requis, l'installation des outils nécessaires et la configuration du projet. PhoneGap permet de créer des applications multiplateformes avec des langages web comme HTML5, JavaScript et CSS, et le passage de l'ancien nom 'Callback' à 'Apache Cordova' après son acquisition par Adobe est mentionné. En outre, le document explique les étapes nécessaires pour préparer et exécuter l'application à la fois sur un émulateur et un appareil Android physique.

1. Débuter avec PhoneGap
dans Eclipse pour Android
Bosco Basabana Nsita
+234 89 772 39 66

2. PhoneGap est une plateforme extensible open source
qui permet de créer des applications pour appareils
mobiles.

3. Introduction
PhoneGap permet de créer des applications multi plates-formes mobiles. Il prend
actuellement en charge iOS, Android, HP webOS, BlackBerry et Symbian. Celles-ci
sont développées en HTML5, Javascript et CSS et sont hybrides, ce qui signifie
qu'elles ne sont ni vraiment natives, ni purement basées sur le Web.
Cette outil permet ainsi de construire des applications sur chacune des plates-formes,
sans avoir à apprendre l'Objective-C, Java ou autre langage de programmation.
PhoneGap prend également en charge tous les cadres ouverts avec lesquels on a
l'habitude de travailler, comme jQuery, Sencha,....
PhoneGap a été développé par Nitobi lors d'un événement (l'iOSDevCamp à San
Francisco) et va continuer à avoir du succès à la conférence O'Reilly Média. Ce
Software fut ensuite racheté le 4 octobre 2011 par Adobe Systems.
Désormais connu depuis son rachat sous le nom de Apache Callback et plus récent
sous le nom de Apache Cordova (le nom "Callback" ayant été jugé comme trop
générique), ce dernier continue encore à attirer les développeurs.

4. Eclipse & Android
• Eclipse est un environnement de développement intégré libre (IDE), supportant de
nombreux langages de programmation. Il produit et fournit des outils pour la réalisation de
logiciels, englobant les activités de programmation, de modélisation, de conception, de
test et de reporting.
• Android quant à lui est un système d'exploitation Open Source utilisant le noyau Linux,
pour smartphones, PDA, terminaux mobiles ainsi que de nombreux autres appareils. Il a été
conçu par Android, une startup rachetée par Google et son support est réalisé en Java.
• Le développement d'applications Android fait cependant appel à un certain nombre de pré-
requis en programmation:

5. Pré-requis:
• Connaissance des langages de programmations: HTML, JavaScript et CSS
• Avoir des notions en Java et XML.
• Connaissances du logiciel Eclipse

6. Logiciels utilisés dans ce tutoriel:
Eclipse, Android SDK et PhoneGap
Installation d'Eclipse:
La première étape est la mise en place de l'environnement de développement
en téléchargeant et en installant l'IDE Eclipse:
1. Téléchargez le package Eclipse Classic* correspondant à votre système
d'exploitation, ici.
2. Décompressez l'archive téléchargée sur votre disque dur local.
3. Lancez Eclipse en double-cliquant sur l'application Eclipse.
*PhoneGap étant une plateforme extensible, il est donc compatible avec de
nombreux packages d'installation pour Eclipse. Ces packages proposés par
Eclipse étant quant à eux très nombreux, nous vous recommandons donc le
package Eclipse Classic car il comprend déjà des outils dont nous aurons besoin
pour démarrer et développer des applications PhoneGap.

7. Mise en place des outils Android
Afin d'utiliser les outils de développement pour Android,
vous devez configurer votre environnement Eclipse.
Différentes étapes sont alors nécessaires:

8. Téléchargement et installation de PhoneGap
1. Rendez-vous sur la page de téléchargement PhoneGap et cliquez sur le lien de
téléchargement.
2. Décompressez l'archive téléchargée sur votre système de fichiers local.
Vous êtes maintenant prêt à créer votre premier projet PhoneGap pour Android dans
Eclipse.
Remarque: Les étapes qui suivent sont pour PhoneGap 2.9, mais le processus devrait être
similaire pour toutes les versions de PhoneGap et pourra donc être appliqué quelque soit votre
version.
Mise en place du projet Android dans Eclipse
1. Création du nouveau projet Android
Choisissez Nouveau
Android Project .
Important: dans les anciennes versions d'Eclipse, il vous est possible de choisir entre 3
catégories de projet Android. Dans notre cas il s'agit de "android Application project":

10. Diverses informations sont alors à renseigner pour la création d'un nouveau
projet Android utilisable sous PhoneGap, celles-ci sont détaillées dans les étapes
qui suivent.
2. Configuration du projet
Dans la boîte de dialogue "Nouvelle Application Android", y renseigner:
oLe nom de votre application
oLe nom de votre projet
ole nom de votre package.
Le nom du package doit être représentatif de la structure de celui-ci (par
exemple: com.overacdemy.votreprojet).

12. 3. Sélection de la version
Cet onglet permet de définir la version Android minimale, maximale et cible que
supportera l'application que l'on va créer. Dans notre cas, nous vous recommandons
les paramètres suivants:
• Version minimal: Android 2.2
• Version cible: Android 4.2
• Compilation avec: Android 4.3
• Thème: au choix de l'utilisateur
Remarque: Le choix de la version Android 2.2 permet de configurer le compilateur
pour que celui-ci réalise un appel au SDK Android 2.2 et fasse en sorte que votre
application PhoneGap puisse travailler sur les appareils fonctionnant sous Android 2.2
et les versions ultérieures du système d'exploitation.

14. 4. Configurations supplémentaires
• Dans certains cas, Eclipse propose des configurations supplémentaires, qui
restent cependant optionnelles:
• la création d'un icone de lancement
• la création d'une activité
• la configuration de l'icone de lancement,...
• L'ensemble de ces configurations restants aux choix de l'utilisateur, il vous
est cependant conseillé de vérifier si le chemin d'accès vers votre projet,
pointe bien vers celui-ci.

15. N.B: Il vous est proposé de créer une activité, dans certain des cas celle-ci
peut engendrer des problèmes lors de la création de votre projet. Dans ce
cas, il vous est préconisé de décocher la case de création de l'activité et de
créer celle-ci manuellement.

16. 5.Paramétrage de l'Activité avec l'interface d'Eclipse
Renseigner le nom de votre activité (celle-ci doit avoir une lettre majuscule au début) Remplir le
champs Layout Name par activity_ précédé du nom de votre projet
Choisissez le type de navigation.

17. Installation du projet pour utiliser PhoneGap
À ce stade, Eclipse a créé un projet vide Android. Cependant, il n'a pas
encore été configuré pour utiliser PhoneGap. Nous ferons cela à l'étape
suivante, en attendant:
1. Créer un dossier "www" (qui sera a placer dans le dossier "assets") et
un dossier "libs" à l'intérieur de votre nouveau projet Android.
Tout le code HTML et JavaScript de votre interface de l'application
PhoneGap va se trouver dans le dossier "assets/www".

18. 2. Pour copier les fichiers requis pour PhoneGap, localisez d'abord le répertoire
où vous avez téléchargé PhoneGap. Accédez au sous-répertoire "lib/android"
et copiez les fichiers suivants pour les coller aux emplacements défini ci-
dessous:
• cordova.js dans le dossier assets/www.
• cordova.jar dans le dossier libs.
• dossier xml dans le dossier res.

19. 3. Ensuite, dans le dossier www créez un fichier que vous nommerez index.html. Ce fichier sera utilisé
comme point d'entré principal pour l'interface de votre application PhoneGap.
4. Ajoutez le code HTML suivant dans le fichier index.html, celui ci vous servira de point de départ pour le
développement de votre interface:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova.js">
</script>
</head>
<body>
<h1>Hello PhoneGap</h1>
</body>
</html>

20. 5.Vous aurez besoin d'ajouter la bibliothèque cordova.jar au chemin de génération pour le projet Android:
Mise à jour de la classe Activity
Maintenant vous êtes prêts à mettre à jour le projet Android et à commencer à utiliser
PhoneGap.
1. Ouvrez votre fichier d'activité créé précédement. Si cela n'est pas le cas, créer un
nouveau fichier dans votre dossier src et donné lui le même nom que votre projet,
suivi du mot Activity, pour exemple:
• Ici, nous avons appelé notre projet "MonProjet".
• Le fichier d'activité est donc nommé "android MonProjetActivity.java" et se
trouve dans le package com.macompagnie.monprojet qui est spécifié dans la boîte
de dialogue comme nouveau projet Android.

21. 2. Dans le fichier d'activité, ajoutez l'instruction d'import suivante:
import org.apache.cordova.DroidGap;
3. Ensuite, procédez à des modifications de la classe Activity en la faisant
hériter de DroidGap à l'aide du mot extends, ce qui nous donne :
public class MonProjet_Activity extends DroidGap {
4. Remplacez l'appel à setContentView() avec une référence vers le
ficihierandroid_asset/www/index.html(cela permet de charger l'interface
PhoneGap):
super.loadUrl("file:///android_asset/www/index.html");
L'ensemble des ces instructions nous donne alors le code suivant:

22. //Ne pas oublier ici de référencer le package en question
package com.macompagnie.monprojet ;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class MonProjet_Activity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Remarque: Dans les projets de PhoneGap, vous pouvez référencer les fichiers situés
dans le répertoire assets avec un url de référence:
file:///android_asset "suivi du nom de chemin d'accès au fichier"
> Le file:///android_asset étant l'URI de la cartes du dossier assets.

23. Configuration des métadonnées du projet
Maintenant que l'on a configuré les fichiers du projet, la dernière étape
consiste à paramétrer les métadonnées de celui-ci, pour permettre à
PhoneGap de démarer.
1. Commencez par ouvrir le fichier AndroidManifest.xml qui se trouve à la
racine de votre projet en utilisant l'éditeur de texte Eclipse:

24. 2. Dans AndroidManifest.xml, ajouter la balise supports-screen qui suit, à
l'intérieur de la balise principale manifest:
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"/>
La balise supports-screen identifie les tailles d'écrans qui sont prises en charge par votre
application.
Vous pouvez ainsi changer d'écran et varier la taille du support en modifiant le
contenu de cette balise. Pour en savoir plus, visitez le lien suivant: Support screen sur Android.

25. 3. Maintenant, nous allons configurer les autorisations pour l'application PhoneGap. Copiez les
balises suivantes et les coller dans le fichier AndroidManifest.xml à l'intérieur de la balise
principale <manifest> :
<uses-permission
android:name="android.permission.CAMERA" />
<uses-permission
android:name="android.permission.VIBRATE" />
<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission
android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission
android:name="android.permission.READ_PHONE_STATE" />
<uses-permission
android:name="android.permission.INTERNET" />
<uses-permission
android:name="android.permission.RECEIVE_SMS" />
<uses-permission
android:name="android.permission.RECORD_AUDIO" />
<uses-permission
android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission
android:name="android.permission.READ_CONTACTS" />
<uses-permission
android:name="android.permission.WRITE_CONTACTS" />
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission
android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission
android:name="android.permission.GET_ACCOUNTS" />
<uses-permission
android:name="android.permission.BROADCAST_STICKY" />

26. • Les balises <uses-permission></uses-permission> identifient les
fonctionnalités que vous voulez activer pour votre application. Les lignes ci-
dessus activent toutes les autorisations nécessaires à l'ensemble des
fonctionnalités de PhoneGap pour qu'il puisse fonctionner.
• Une fois que vous avez construit votre application, vous pouvez supprimer
toutes les autorisations qui ne vous sont pas réellement utiles (ainsi les
avertissements de sécurité lors de l'installation de l'application serons
supprimés). Pour en savoir plus sur les autorisations Android et ces balises, vous
pouvez visiter le lien suivant: L'utilisation des permission sur Android.
4. Après avoir configuré les autorisations d'applications, vous devez modifier la balise<activity> existante.
Localisez celle-ci, qui devrait se trouver à l'intérieur de la balise<application>, puis ajoutez lui l'attribut
suivant:
android:configChanges="orientation|keyboardHidden"

27. 5. Maintenant, vous devez créer une nouvelle balise <activity></activity> de la
classe org.apache.cordova.DroidGap. Insérez celle-ci à la suite de la première balise
activity mais rester dans la balise <application>. Une fois celle-ci mise en place, intégrez y le
code suivant:
<activity
android:name="org.apache.cordova.DroidGap"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter></intent-filter>
</activity>

28. 6. Ensuite, il vous faut rajouter votre package dans le code, pour cela, il vous
suffit d'insérer le code suivant à l'intérieur de la balise <manifest>:
<manifest package="mon package">
et ajouter l'atribut suivant dans la balise <activity>, crée précédement:
<activity android:name="com.example.monprojet.MonprojetActivity">
À ce stade, votre projet est configuré pour s'exécuter en tant que projet
PhoneGap pour Android. Si vous rencontrez des problèmes, vérifiez votre
configuration avec l'exemple fourni ici .

29. Exécution de l'application
1. Avec l'émulateur
Pour lancer votre application PhoneGap dans l'émulateur Android:
• Si vous n'avez pas tous les périphériques Android virtuels mis en place, vous serez invité à les
configurer.
• Pour en savoir plus sur cette configuration, visitez le guide du développeur pour les appareils
Android.

30. Eclipse démarre automatiquement l'émulateur Android (si cela n'est pas déjà fait), déployer
votre application sur l'émulateur et lancer l'application.

31. 2. Sur Mobile Android
• Il est recommandé de tester votre application sur un périphérique physique avant de la
déployer dans des environnements de production. En effet, les dispositifs physiques ont
toujours des capacités de calcul et des paramètres différents des émulateurs. Ainsi, ce
dispositif de test permet de déceler les problèmes éventuels qui n'auraient pas été détectés
dans l'environnement émulateur. Si vous souhaitez donc tester votre application sur un mobile
Android, suivez les étapes suivantes:
a. Assurez-vous que l'appareil est connecté à votre ordinateur via USB.
b. Choisissez Exécuter
c. Sélectionnez votre application sous Application Android (côté gauche de la boîte de
dialogue) Exécuter les configurations.
d. Cliquez sur l'onglet Cible, puis sélectionnez Manuel comme mode de sélection de déploiement
cible.
e. Lorsque vous êtes prêt à lancer votre application, cliquez sur Exécuter.

33. f. Dans la boîte de dialogue Sélecteur de périphérique Android, vous pouvez
sélectionner un émulateur ou un périphérique Android connecté.Tous les
appareils connectés seront affichés dans cette liste.
g. Sélectionnez le périphérique que vous souhaitez utiliser , puis cliquez
sur OK.

34. Merci