Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Hello PhoneGap

589 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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 ☺

×