Hello PhoneGap

553 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
553
Sur SlideShare
0
Issues des intégrations
0
Intégrations
57
Actions
Partages
0
Téléchargements
18
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Hello PhoneGap

  1. 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. 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. 3. Med Tahar Zwawa 3
  4. 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. 5. Med Tahar Zwawa 5 12- Créer index.html dans /assets/www/ Index.html 13- Modifier le manifest.xml
  6. 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. 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 ☺

×