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.

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 :

Med Tahar Zwawa 3

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

Med Tahar Zwawa 5

12- Créer index.html dans /assets/www/

Index.html

13- Modifier le manifest.xml

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 :

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 ☺