Hello PhoneGap Tuto n°3 - Atelier WebMobile - Insat Android Club 2011-2012

1. Med Tahar Zwawa
1
Atelier WebMobile : Tutoriel n°3
Hello PhoneGap
Objectifs
Comprendre la notion des applications hybrides;
Découvrir le Framework PhoneGap.
Les applications hybrides
L’inconvénient de l’application 100% web est qu’elle ne permet pas un accès à
la majorité des capacités des périphériques, comme le camera, vibreur &
l’accéléromètre… D’ici, on peut définir les applications hybrides, qui unissent les
avantages de l’application web et celles de la native.
Parmi les Frameworks de développement des applications hybrides, on trouve
Phonegap qui offre au développeur un moyen de construire des applications sur une
seule plateforme et les déployer sur n’importe quel Appareil mobile (Android, WP,
iOS…).
Exemple simple avec PhoneGap
Dans ce paragraphe, nous allons suivre les étapes ci-dessous pour finir avec
un HelloPhoneGap ☺
1- Accéder au site officiel de PhoneGap ;
2- Télécharger le Framework PhoneGap ;
3- Accéder dans le répertoire phonegap-1.1.0
Rq : à la date d’écriture de ce tuto, nous avons la version 1.1.0 de PhoneGap.

2. Med Tahar Zwawa
2
4- Remarquer que PhoneGap offre la possibilité de travailler sur tous les
plateformes mobiles :
5- Accéder au répertoire Android ;
6- Maintenant, ouvrir eclipse (il faut installer l’environnement Android dans
eclipse pour cela, consulter le n°1 de l’IAC magazine) et créer un nouveau
projet Android :

3. Med Tahar Zwawa
3

4. Med Tahar Zwawa
4
7- Créer deux nouveaux répertoires dans le répertoire source du projet:
a. /libs
b. /assets/www
8- Copier Phonegap.js de votre PhoneGap téléchargé toute à l’heure dans
/assets/www;
9- Copier Phonegap.jar de votre PhoneGap dans /libs puis cliquer sur
Phonegap.jar avec le bouton droit et puis Build Path -> Add to Build Path
10-Copiez le répertoire xml de votre PhoneGap dans /res;
11- Faire les changements suivants dans le fichier Hello.java
a. public class Hello extends DroidGap
b. Remplacer setContentView(R.layout.main); avec
super.loadUrl("file:///android_asset/www/index.html");
c. Ajouter import com.phonegap.DroidGap;
Hello.java

5. Med Tahar Zwawa
5
12- Créer index.html dans /assets/www/
Index.html
13- Modifier le manifest.xml

6. Med Tahar Zwawa
6
Nous avons terminé maintenant l’élaboration de notre HelloPhoneGap, voilà ci-
dessous ce que donne l’exécution du projet sur un Androphone :
On clique sur l’icône généré, on obtient :

7. Med Tahar Zwawa
7
Liens utiles
http://www.phonegap.com
http://en.wikipedia.org/wiki/PhoneGap
http://docs.phonegap.com/en/1.1.0/index.html
******************************
Dans ce tutoriel, nous avons introduit le Framework PhoneGap, mais à titre
indicatif, il existe d’autres Frameworks de ce genre comme Titanium-mobile…
Dans les prochains tutoriels, nous présentons un plus de sujets motivants ☺