SlideShare une entreprise Scribd logo
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 ☺

Contenu connexe

Similaire à Hello PhoneGap

Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidBosco Basabana
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto PhonegapSUN
 
Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapMakina Corpus
 
Phonegap
PhonegapPhonegap
PhonegapVISEO
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS AppceleratorTiyab K.
 
Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8Jean-Sébastien Dupuy
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google androidThierry Gayet
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceKorteby Farouk
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013jeromevdl
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutterJulien Saumande
 
RapportProjetLibre-CrossplateformeMobiledev (1)
RapportProjetLibre-CrossplateformeMobiledev (1)RapportProjetLibre-CrossplateformeMobiledev (1)
RapportProjetLibre-CrossplateformeMobiledev (1)Cyril Sabbagh
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React NativeCocoaHeads France
 
Hibernate JPA : télécharger et configurer
Hibernate JPA : télécharger et configurerHibernate JPA : télécharger et configurer
Hibernate JPA : télécharger et configurerProfLibre
 
Hibernate Native : télécharger et configurer
Hibernate Native : télécharger et configurerHibernate Native : télécharger et configurer
Hibernate Native : télécharger et configurerProfLibre
 

Similaire à Hello PhoneGap (20)

Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto Phonegap
 
Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
 
Prez web mobile_01
Prez web mobile_01Prez web mobile_01
Prez web mobile_01
 
Phonegap
PhonegapPhonegap
Phonegap
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS Appcelerator
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8Introduction au développement Windows Phone 8
Introduction au développement Windows Phone 8
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open source
 
Apache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéroApache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéro
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutter
 
RapportProjetLibre-CrossplateformeMobiledev (1)
RapportProjetLibre-CrossplateformeMobiledev (1)RapportProjetLibre-CrossplateformeMobiledev (1)
RapportProjetLibre-CrossplateformeMobiledev (1)
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
 
Android wear
Android wearAndroid wear
Android wear
 
Hibernate JPA : télécharger et configurer
Hibernate JPA : télécharger et configurerHibernate JPA : télécharger et configurer
Hibernate JPA : télécharger et configurer
 
Hibernate Native : télécharger et configurer
Hibernate Native : télécharger et configurerHibernate Native : télécharger et configurer
Hibernate Native : télécharger et configurer
 

Hello PhoneGap

  • 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 :
  • 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 ☺