Android : Installation de PhoneGap

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)
Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn

Phonegap permettant de développer des 'web apps' permet d'accéder aux capteurs du périphérique et ce, sur la plupart des plateformes mobiles. On utilise ici HTML5, javascript et CSS.

Le tutorial suivant vous montre le code nécessaire pour une mise en oeuvre rapide.

1. La plateforme

android Android

2. Les pré-requis

Eclipse 3.4+

3. Installation du SDK et de PhoneGap

eclipse Téléchargez et installez Eclipse Classic
android Télécharger et installer Android SDK
android Téléchargez et installez ADT Plugin
phonegap Télécharger la dernière version de PhoneGap et extraire son contenu. Nous allons travailler avec le répertoire Android. Site Internet de PhoneGap : http://www.phonegap.com

4. Créer un nouveau projet dans Éclipse

  • Lancez Eclipse, puis dans le menu File, sélectionnez New > Android Project

capture

capture-1

  • Dans le répertoire racine du projet, créez deux nouveaux répertoires :
    • /libs
    • /assets/www
  • Copiez Phonegap.js de votre téléchargement précédent dans /assets/www
  • Copiez Phonegap.jar de votre téléchargement précédent dans /libs
  • Procédez à quelques ajustements dans le projet principal ou se trouve App.java le dossier src d'Eclipse (regardez l'imageci-dessous) :
    • Remplacer la classe extend Activity par DroidGap
    • Remplacez la ligne comportant setContentView() par super.loadUrl("file:///android_asset/www/index.html");
    • Ajoutez import com.phonegap.*;

capture-2

  • Ici, vous pouvez rencontrer une erreur, où Eclipse ne peut pas trouver phonegap.jar. Dans ce cas, faites un clic droit sur le dossier /libs et cliquez Build Patchs> Configure Build Paths. Puis, dans l'onglet Bibliothèques, ajouter phonegap.jar au projet. Si Eclipse est capricieux, vous pourriez avoir besoin de rafraîchir (F5).
  • Faites un clic droit sur AndroidManifest.xml et sélectionnez Open With > Text Editor
  • Collez les autorisations suivantes en dessous de versionName (regardez l'image ci-dessous) :
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

capture-3

  • Ajouter android:configChanges="orientation|keyboardHidden" à la balise activity dans le fichier AndroidManifest (voir la capture d'écran ci-dessus).

5. Hello World

Maintenant, créer et ouvrir un nouveau fichier nommé index.html dans le répertoire /assets/www. Collez le code suivant :

<!DOCTYPE HTML>
<html>
<head>
  <title>PhoneGap</title>
  <script type="text/javascript" charset="utf-8" src="/phonegap.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

capture-4

6.A. Déploiement d'un simulateur

  • Clic droit sur le projet et aller sur Run As, puis cliquez sur Android Application.
  • Eclipse vous demandera de sélectionner un AVD appropriées. S'il n'y en a pas, alors vous aurez besoin de le créer.

6.B. Déploiement sur la cible

  • Assurez-vous que le débogage USB est activé sur votre appareil et branchez-le sur votre système. (Settings > Applications > Development)
  • Clic droit sur le projet et aller sur Run As, puis cliquez sur Android Application
Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn