Débuter avec PhoneGap
dans Eclipse pour Android
Bosco Basabana Nsita
+234 89 772 39 66
PhoneGap est une plateforme extensible open source
qui permet de créer des applications pour appareils
mobiles.
Introduction
PhoneGap permet de créer des applications multi plates-formes mobiles. Il prend
actuellement en charge iOS, A...
Eclipse & Android
• Eclipse est un environnement de développement intégré libre (IDE), supportant de
nombreux langages de ...
Pré-requis:
• Connaissance des langages de programmations: HTML, JavaScript et CSS
• Avoir des notions en Java et XML.
• C...
Logiciels utilisés dans ce tutoriel:
Eclipse, Android SDK et PhoneGap
Installation d'Eclipse:
La première étape est la mis...
Mise en place des outils Android
Afin d'utiliser les outils de développement pour Android,
vous devez configurer votre env...
Téléchargement et installation de PhoneGap
1. Rendez-vous sur la page de téléchargement PhoneGap et cliquez sur le lien de...
Diverses informations sont alors à renseigner pour la création d'un nouveau
projet Android utilisable sous PhoneGap, celle...
3. Sélection de la version
Cet onglet permet de définir la version Android minimale, maximale et cible que
supportera l'ap...
4. Configurations supplémentaires
• Dans certains cas, Eclipse propose des configurations supplémentaires, qui
restent cep...
N.B: Il vous est proposé de créer une activité, dans certain des cas celle-ci
peut engendrer des problèmes lors de la créa...
5.Paramétrage de l'Activité avec l'interface d'Eclipse
Renseigner le nom de votre activité (celle-ci doit avoir une lettre...
Installation du projet pour utiliser PhoneGap
À ce stade, Eclipse a créé un projet vide Android. Cependant, il n'a pas
enc...
2. Pour copier les fichiers requis pour PhoneGap, localisez d'abord le répertoire
où vous avez téléchargé PhoneGap. Accéde...
3. Ensuite, dans le dossier www créez un fichier que vous nommerez index.html. Ce fichier sera utilisé
comme point d'entré...
5.Vous aurez besoin d'ajouter la bibliothèque cordova.jar au chemin de génération pour le projet Android:
Mise à jour de l...
2. Dans le fichier d'activité, ajoutez l'instruction d'import suivante:
import org.apache.cordova.DroidGap;
3. Ensuite, pr...
//Ne pas oublier ici de référencer le package en question
package com.macompagnie.monprojet ;
import org.apache.cordova.Dr...
Configuration des métadonnées du projet
Maintenant que l'on a configuré les fichiers du projet, la dernière étape
consiste...
2. Dans AndroidManifest.xml, ajouter la balise supports-screen qui suit, à
l'intérieur de la balise principale manifest:
<...
3. Maintenant, nous allons configurer les autorisations pour l'application PhoneGap. Copiez les
balises suivantes et les c...
• Les balises <uses-permission></uses-permission> identifient les
fonctionnalités que vous voulez activer pour votre appli...
5. Maintenant, vous devez créer une nouvelle balise <activity></activity> de la
classe org.apache.cordova.DroidGap. Insére...
6. Ensuite, il vous faut rajouter votre package dans le code, pour cela, il vous
suffit d'insérer le code suivant à l'inté...
Exécution de l'application
1. Avec l'émulateur
Pour lancer votre application PhoneGap dans l'émulateur Android:
• Si vous ...
Eclipse démarre automatiquement l'émulateur Android (si cela n'est pas déjà fait), déployer
votre application sur l'émulat...
2. Sur Mobile Android
• Il est recommandé de tester votre application sur un périphérique physique avant de la
déployer da...
f. Dans la boîte de dialogue Sélecteur de périphérique Android, vous pouvez
sélectionner un émulateur ou un périphérique A...
Merci
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Prochain SlideShare
Chargement dans…5
×

Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android

4 308 vues

Publié le

PhoneGap permet de créer des applications multi plates-formes mobiles. Il prend actuellement en charge iOS, Android, HP webOS, BlackBerry et Symbian. Celles-ci sont développées en HTML5, Javascript et CSS et sont hybrides, ce qui signifie qu'elles ne sont ni vraiment natives, ni purement basées sur le Web.
Cette outil permet ainsi de construire des applications sur chacune des plates-formes, sans avoir à apprendre l'Objective-C, Java ou autre langage de programmation. PhoneGap prend également en charge tous les cadres ouverts avec lesquels on a l'habitude de travailler, comme jQuery, Sencha,....
PhoneGap a été développé par Nitobi lors d'un événement (l'iOSDevCamp à San Francisco) et va continuer à avoir du succès à la conférence O'Reilly Média. Ce Software fut ensuite racheté le 4 octobre 2011 par Adobe Systems.
Désormais connu depuis son rachat sous le nom de Apache Callback et plus récent sous le nom de Apache Cordova (le nom "Callback" ayant été jugé comme trop générique), ce dernier continue encore à attirer les développeurs.

Eclipse est un environnement de développement intégré libre (IDE), supportant de nombreux langages de programmation. Il produit et fournit des outils pour la réalisation de logiciels, englobant les activités de programmation, de modélisation, de conception, de test et de reporting.
Android quant à lui est un système d'exploitation Open Source utilisant le noyau Linux, pour smartphones, PDA, terminaux mobiles ainsi que de nombreux autres appareils. Il a été conçu par Android, une startup rachetée par Google et son support est réalisé en Java.
Le développement d'applications Android fait cependant appel à un certain nombre de pré-requis en programmation:

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

Aucun téléchargement
Vues
Nombre de vues
4 308
Sur SlideShare
0
Issues des intégrations
0
Intégrations
39
Actions
Partages
0
Téléchargements
286
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android

  1. 1. Débuter avec PhoneGap dans Eclipse pour Android Bosco Basabana Nsita +234 89 772 39 66
  2. 2. PhoneGap est une plateforme extensible open source qui permet de créer des applications pour appareils mobiles.
  3. 3. Introduction PhoneGap permet de créer des applications multi plates-formes mobiles. Il prend actuellement en charge iOS, Android, HP webOS, BlackBerry et Symbian. Celles-ci sont développées en HTML5, Javascript et CSS et sont hybrides, ce qui signifie qu'elles ne sont ni vraiment natives, ni purement basées sur le Web. Cette outil permet ainsi de construire des applications sur chacune des plates-formes, sans avoir à apprendre l'Objective-C, Java ou autre langage de programmation. PhoneGap prend également en charge tous les cadres ouverts avec lesquels on a l'habitude de travailler, comme jQuery, Sencha,.... PhoneGap a été développé par Nitobi lors d'un événement (l'iOSDevCamp à San Francisco) et va continuer à avoir du succès à la conférence O'Reilly Média. Ce Software fut ensuite racheté le 4 octobre 2011 par Adobe Systems. Désormais connu depuis son rachat sous le nom de Apache Callback et plus récent sous le nom de Apache Cordova (le nom "Callback" ayant été jugé comme trop générique), ce dernier continue encore à attirer les développeurs.
  4. 4. Eclipse & Android • Eclipse est un environnement de développement intégré libre (IDE), supportant de nombreux langages de programmation. Il produit et fournit des outils pour la réalisation de logiciels, englobant les activités de programmation, de modélisation, de conception, de test et de reporting. • Android quant à lui est un système d'exploitation Open Source utilisant le noyau Linux, pour smartphones, PDA, terminaux mobiles ainsi que de nombreux autres appareils. Il a été conçu par Android, une startup rachetée par Google et son support est réalisé en Java. • Le développement d'applications Android fait cependant appel à un certain nombre de pré- requis en programmation:
  5. 5. Pré-requis: • Connaissance des langages de programmations: HTML, JavaScript et CSS • Avoir des notions en Java et XML. • Connaissances du logiciel Eclipse
  6. 6. Logiciels utilisés dans ce tutoriel: Eclipse, Android SDK et PhoneGap Installation d'Eclipse: La première étape est la mise en place de l'environnement de développement en téléchargeant et en installant l'IDE Eclipse: 1. Téléchargez le package Eclipse Classic* correspondant à votre système d'exploitation, ici. 2. Décompressez l'archive téléchargée sur votre disque dur local. 3. Lancez Eclipse en double-cliquant sur l'application Eclipse. *PhoneGap étant une plateforme extensible, il est donc compatible avec de nombreux packages d'installation pour Eclipse. Ces packages proposés par Eclipse étant quant à eux très nombreux, nous vous recommandons donc le package Eclipse Classic car il comprend déjà des outils dont nous aurons besoin pour démarrer et développer des applications PhoneGap.
  7. 7. Mise en place des outils Android Afin d'utiliser les outils de développement pour Android, vous devez configurer votre environnement Eclipse. Différentes étapes sont alors nécessaires:
  8. 8. Téléchargement et installation de PhoneGap 1. Rendez-vous sur la page de téléchargement PhoneGap et cliquez sur le lien de téléchargement. 2. Décompressez l'archive téléchargée sur votre système de fichiers local. Vous êtes maintenant prêt à créer votre premier projet PhoneGap pour Android dans Eclipse. Remarque: Les étapes qui suivent sont pour PhoneGap 2.9, mais le processus devrait être similaire pour toutes les versions de PhoneGap et pourra donc être appliqué quelque soit votre version. Mise en place du projet Android dans Eclipse 1. Création du nouveau projet Android Choisissez Nouveau Android Project . Important: dans les anciennes versions d'Eclipse, il vous est possible de choisir entre 3 catégories de projet Android. Dans notre cas il s'agit de "android Application project":
  9. 9. Diverses informations sont alors à renseigner pour la création d'un nouveau projet Android utilisable sous PhoneGap, celles-ci sont détaillées dans les étapes qui suivent. 2. Configuration du projet Dans la boîte de dialogue "Nouvelle Application Android", y renseigner: oLe nom de votre application oLe nom de votre projet ole nom de votre package. Le nom du package doit être représentatif de la structure de celui-ci (par exemple: com.overacdemy.votreprojet).
  10. 10. 3. Sélection de la version Cet onglet permet de définir la version Android minimale, maximale et cible que supportera l'application que l'on va créer. Dans notre cas, nous vous recommandons les paramètres suivants: • Version minimal: Android 2.2 • Version cible: Android 4.2 • Compilation avec: Android 4.3 • Thème: au choix de l'utilisateur Remarque: Le choix de la version Android 2.2 permet de configurer le compilateur pour que celui-ci réalise un appel au SDK Android 2.2 et fasse en sorte que votre application PhoneGap puisse travailler sur les appareils fonctionnant sous Android 2.2 et les versions ultérieures du système d'exploitation.
  11. 11. 4. Configurations supplémentaires • Dans certains cas, Eclipse propose des configurations supplémentaires, qui restent cependant optionnelles: • la création d'un icone de lancement • la création d'une activité • la configuration de l'icone de lancement,... • L'ensemble de ces configurations restants aux choix de l'utilisateur, il vous est cependant conseillé de vérifier si le chemin d'accès vers votre projet, pointe bien vers celui-ci.
  12. 12. N.B: Il vous est proposé de créer une activité, dans certain des cas celle-ci peut engendrer des problèmes lors de la création de votre projet. Dans ce cas, il vous est préconisé de décocher la case de création de l'activité et de créer celle-ci manuellement.
  13. 13. 5.Paramétrage de l'Activité avec l'interface d'Eclipse Renseigner le nom de votre activité (celle-ci doit avoir une lettre majuscule au début) Remplir le champs Layout Name par activity_ précédé du nom de votre projet Choisissez le type de navigation.
  14. 14. Installation du projet pour utiliser PhoneGap À ce stade, Eclipse a créé un projet vide Android. Cependant, il n'a pas encore été configuré pour utiliser PhoneGap. Nous ferons cela à l'étape suivante, en attendant: 1. Créer un dossier "www" (qui sera a placer dans le dossier "assets") et un dossier "libs" à l'intérieur de votre nouveau projet Android. Tout le code HTML et JavaScript de votre interface de l'application PhoneGap va se trouver dans le dossier "assets/www".
  15. 15. 2. Pour copier les fichiers requis pour PhoneGap, localisez d'abord le répertoire où vous avez téléchargé PhoneGap. Accédez au sous-répertoire "lib/android" et copiez les fichiers suivants pour les coller aux emplacements défini ci- dessous: • cordova.js dans le dossier assets/www. • cordova.jar dans le dossier libs. • dossier xml dans le dossier res.
  16. 16. 3. Ensuite, dans le dossier www créez un fichier que vous nommerez index.html. Ce fichier sera utilisé comme point d'entré principal pour l'interface de votre application PhoneGap. 4. Ajoutez le code HTML suivant dans le fichier index.html, celui ci vous servira de point de départ pour le développement de votre interface: <!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova.js"> </script> </head> <body> <h1>Hello PhoneGap</h1> </body> </html>
  17. 17. 5.Vous aurez besoin d'ajouter la bibliothèque cordova.jar au chemin de génération pour le projet Android: Mise à jour de la classe Activity Maintenant vous êtes prêts à mettre à jour le projet Android et à commencer à utiliser PhoneGap. 1. Ouvrez votre fichier d'activité créé précédement. Si cela n'est pas le cas, créer un nouveau fichier dans votre dossier src et donné lui le même nom que votre projet, suivi du mot Activity, pour exemple: • Ici, nous avons appelé notre projet "MonProjet". • Le fichier d'activité est donc nommé "android MonProjetActivity.java" et se trouve dans le package com.macompagnie.monprojet qui est spécifié dans la boîte de dialogue comme nouveau projet Android.
  18. 18. 2. Dans le fichier d'activité, ajoutez l'instruction d'import suivante: import org.apache.cordova.DroidGap; 3. Ensuite, procédez à des modifications de la classe Activity en la faisant hériter de DroidGap à l'aide du mot extends, ce qui nous donne : public class MonProjet_Activity extends DroidGap { 4. Remplacez l'appel à setContentView() avec une référence vers le ficihierandroid_asset/www/index.html(cela permet de charger l'interface PhoneGap): super.loadUrl("file:///android_asset/www/index.html"); L'ensemble des ces instructions nous donne alors le code suivant:
  19. 19. //Ne pas oublier ici de référencer le package en question package com.macompagnie.monprojet ; import org.apache.cordova.DroidGap; import android.os.Bundle; public class MonProjet_Activity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } } Remarque: Dans les projets de PhoneGap, vous pouvez référencer les fichiers situés dans le répertoire assets avec un url de référence: file:///android_asset "suivi du nom de chemin d'accès au fichier" > Le file:///android_asset étant l'URI de la cartes du dossier assets.
  20. 20. Configuration des métadonnées du projet Maintenant que l'on a configuré les fichiers du projet, la dernière étape consiste à paramétrer les métadonnées de celui-ci, pour permettre à PhoneGap de démarer. 1. Commencez par ouvrir le fichier AndroidManifest.xml qui se trouve à la racine de votre projet en utilisant l'éditeur de texte Eclipse:
  21. 21. 2. Dans AndroidManifest.xml, ajouter la balise supports-screen qui suit, à l'intérieur de la balise principale manifest: <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true"/> La balise supports-screen identifie les tailles d'écrans qui sont prises en charge par votre application. Vous pouvez ainsi changer d'écran et varier la taille du support en modifiant le contenu de cette balise. Pour en savoir plus, visitez le lien suivant: Support screen sur Android.
  22. 22. 3. Maintenant, nous allons configurer les autorisations pour l'application PhoneGap. Copiez les balises suivantes et les coller dans le fichier AndroidManifest.xml à l'intérieur de la balise principale <manifest> : <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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
  23. 23. • Les balises <uses-permission></uses-permission> identifient les fonctionnalités que vous voulez activer pour votre application. Les lignes ci- dessus activent toutes les autorisations nécessaires à l'ensemble des fonctionnalités de PhoneGap pour qu'il puisse fonctionner. • Une fois que vous avez construit votre application, vous pouvez supprimer toutes les autorisations qui ne vous sont pas réellement utiles (ainsi les avertissements de sécurité lors de l'installation de l'application serons supprimés). Pour en savoir plus sur les autorisations Android et ces balises, vous pouvez visiter le lien suivant: L'utilisation des permission sur Android. 4. Après avoir configuré les autorisations d'applications, vous devez modifier la balise<activity> existante. Localisez celle-ci, qui devrait se trouver à l'intérieur de la balise<application>, puis ajoutez lui l'attribut suivant: android:configChanges="orientation|keyboardHidden"
  24. 24. 5. Maintenant, vous devez créer une nouvelle balise <activity></activity> de la classe org.apache.cordova.DroidGap. Insérez celle-ci à la suite de la première balise activity mais rester dans la balise <application>. Une fois celle-ci mise en place, intégrez y le code suivant: <activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>
  25. 25. 6. Ensuite, il vous faut rajouter votre package dans le code, pour cela, il vous suffit d'insérer le code suivant à l'intérieur de la balise <manifest>: <manifest package="mon package"> et ajouter l'atribut suivant dans la balise <activity>, crée précédement: <activity android:name="com.example.monprojet.MonprojetActivity"> À ce stade, votre projet est configuré pour s'exécuter en tant que projet PhoneGap pour Android. Si vous rencontrez des problèmes, vérifiez votre configuration avec l'exemple fourni ici .
  26. 26. Exécution de l'application 1. Avec l'émulateur Pour lancer votre application PhoneGap dans l'émulateur Android: • Si vous n'avez pas tous les périphériques Android virtuels mis en place, vous serez invité à les configurer. • Pour en savoir plus sur cette configuration, visitez le guide du développeur pour les appareils Android.
  27. 27. Eclipse démarre automatiquement l'émulateur Android (si cela n'est pas déjà fait), déployer votre application sur l'émulateur et lancer l'application.
  28. 28. 2. Sur Mobile Android • Il est recommandé de tester votre application sur un périphérique physique avant de la déployer dans des environnements de production. En effet, les dispositifs physiques ont toujours des capacités de calcul et des paramètres différents des émulateurs. Ainsi, ce dispositif de test permet de déceler les problèmes éventuels qui n'auraient pas été détectés dans l'environnement émulateur. Si vous souhaitez donc tester votre application sur un mobile Android, suivez les étapes suivantes: a. Assurez-vous que l'appareil est connecté à votre ordinateur via USB. b. Choisissez Exécuter c. Sélectionnez votre application sous Application Android (côté gauche de la boîte de dialogue) Exécuter les configurations. d. Cliquez sur l'onglet Cible, puis sélectionnez Manuel comme mode de sélection de déploiement cible. e. Lorsque vous êtes prêt à lancer votre application, cliquez sur Exécuter.
  29. 29. f. Dans la boîte de dialogue Sélecteur de périphérique Android, vous pouvez sélectionner un émulateur ou un périphérique Android connecté.Tous les appareils connectés seront affichés dans cette liste. g. Sélectionnez le périphérique que vous souhaitez utiliser , puis cliquez sur OK.
  30. 30. Merci

×