SlideShare une entreprise Scribd logo

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

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:

1  sur  34
Télécharger pour lire hors ligne
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, 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 & 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:
Pré-requis:
• Connaissance des langages de programmations: HTML, JavaScript et CSS
• Avoir des notions en Java et XML.
• Connaissances du logiciel Eclipse
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.
Publicité

Recommandé

Phonegap
PhonegapPhonegap
PhonegapVISEO
 
Tuto Phonegap
Tuto PhonegapTuto Phonegap
Tuto PhonegapSUN
 
[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGapThomas Bassetto
 
PhoneGap VS Appcelerator
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS AppceleratorTiyab K.
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
 
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
 
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKitConstruire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKituncatcrea
 

Contenu connexe

Tendances

Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybridesekino
 
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapBenjamin LUPU
 
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Raphaël Kueny
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobileMartin Arvisais
 
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Loïc Knuchel
 
Devoxx 2015, ionic chat
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chatLoïc Knuchel
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Microsoft
 
Devoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic frameworkDevoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic frameworkStéphanie Moallic
 
MobileDay - Parcours 1 Hybride (Cordova)
MobileDay - Parcours 1 Hybride  (Cordova)MobileDay - Parcours 1 Hybride  (Cordova)
MobileDay - Parcours 1 Hybride (Cordova)Cellenza
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Webekino
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?ekino
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkStéphanie Moallic
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutterJulien Saumande
 
HTML 5, applications natives ou hybrides : comment choisir ?
HTML 5, applications natives ou hybrides :  comment choisir ?HTML 5, applications natives ou hybrides :  comment choisir ?
HTML 5, applications natives ou hybrides : comment choisir ?Philippe Dumont
 
Introduction à Xamarin
Introduction à XamarinIntroduction à Xamarin
Introduction à XamarinPatrice Cote
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - AlloyMeetup Mobile Montpellier
 
CocoaHeads Toulouse - Présentation Windows Phone 7 - ClevLab
CocoaHeads Toulouse - Présentation Windows Phone 7 - ClevLabCocoaHeads Toulouse - Présentation Windows Phone 7 - ClevLab
CocoaHeads Toulouse - Présentation Windows Phone 7 - ClevLabCocoaHeads France
 

Tendances (20)

Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
 
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGap
 
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
 
Native script
Native scriptNative script
Native script
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
 
Java Fx
Java FxJava Fx
Java Fx
 
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
 
Devoxx 2015, ionic chat
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chat
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
 
Devoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic frameworkDevoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic framework
 
MobileDay - Parcours 1 Hybride (Cordova)
MobileDay - Parcours 1 Hybride  (Cordova)MobileDay - Parcours 1 Hybride  (Cordova)
MobileDay - Parcours 1 Hybride (Cordova)
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic Framework
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutter
 
HTML 5, applications natives ou hybrides : comment choisir ?
HTML 5, applications natives ou hybrides :  comment choisir ?HTML 5, applications natives ou hybrides :  comment choisir ?
HTML 5, applications natives ou hybrides : comment choisir ?
 
Introduction à Xamarin
Introduction à XamarinIntroduction à Xamarin
Introduction à Xamarin
 
Paug aosp ice-creamsandwich_20120119
Paug aosp ice-creamsandwich_20120119Paug aosp ice-creamsandwich_20120119
Paug aosp ice-creamsandwich_20120119
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
 
CocoaHeads Toulouse - Présentation Windows Phone 7 - ClevLab
CocoaHeads Toulouse - Présentation Windows Phone 7 - ClevLabCocoaHeads Toulouse - Présentation Windows Phone 7 - ClevLab
CocoaHeads Toulouse - Présentation Windows Phone 7 - ClevLab
 

En vedette

Android - Open Source Bridge 2011
Android - Open Source Bridge 2011Android - Open Source Bridge 2011
Android - Open Source Bridge 2011sullis
 
A python web service
A python web serviceA python web service
A python web serviceTemian Vlad
 
Building an API with Django and Django REST Framework
Building an API with Django and Django REST FrameworkBuilding an API with Django and Django REST Framework
Building an API with Django and Django REST FrameworkChristopher Foresman
 
Applications multi plateformes avec Cordova, HTML5 et Javascript
Applications multi plateformes avec Cordova, HTML5 et JavascriptApplications multi plateformes avec Cordova, HTML5 et Javascript
Applications multi plateformes avec Cordova, HTML5 et JavascriptMicrosoft
 
REST Easy with Django-Rest-Framework
REST Easy with Django-Rest-FrameworkREST Easy with Django-Rest-Framework
REST Easy with Django-Rest-FrameworkMarcel Chastain
 
Python et les bases de données non sql
Python et les bases de données non sqlPython et les bases de données non sql
Python et les bases de données non sqlbchesneau
 
Application mobile bancaire sous la plateforme Android
Application mobile bancaire sous la plateforme AndroidApplication mobile bancaire sous la plateforme Android
Application mobile bancaire sous la plateforme AndroidKhaled Fayala
 
Développement d’une application mobile bancaire pour QNB Tunisie
Développement d’une application mobile bancaire pour QNB TunisieDéveloppement d’une application mobile bancaire pour QNB Tunisie
Développement d’une application mobile bancaire pour QNB TunisieKhaled Fayala
 
Construire son application web de gestion de contenu d'annuaire LDAP
Construire son application web de gestion de contenu d'annuaire LDAPConstruire son application web de gestion de contenu d'annuaire LDAP
Construire son application web de gestion de contenu d'annuaire LDAPClément OUDOT
 
Python et son intégration avec Odoo
Python et son intégration avec OdooPython et son intégration avec Odoo
Python et son intégration avec OdooHassan WAHSISS
 
Alphorm.com Formation WebDev 22 avancé
Alphorm.com Formation WebDev 22 avancéAlphorm.com Formation WebDev 22 avancé
Alphorm.com Formation WebDev 22 avancéAlphorm
 
Alphorm.com Support de la Formation PHP MySQL
Alphorm.com Support de la Formation PHP MySQLAlphorm.com Support de la Formation PHP MySQL
Alphorm.com Support de la Formation PHP MySQLAlphorm
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebHarrathi Mohamed
 
Mobile Growth: Best Strategies, Tools and Tactics
Mobile Growth: Best Strategies, Tools and TacticsMobile Growth: Best Strategies, Tools and Tactics
Mobile Growth: Best Strategies, Tools and TacticsAdrien Montcoudiol
 
Create responsive websites with Django, REST and AngularJS
Create responsive websites with Django, REST and AngularJSCreate responsive websites with Django, REST and AngularJS
Create responsive websites with Django, REST and AngularJSHannes Hapke
 
AEI - Formation de base "recherche d'informations sur le web"
AEI - Formation de base "recherche d'informations sur le web"AEI - Formation de base "recherche d'informations sur le web"
AEI - Formation de base "recherche d'informations sur le web"VINCIT SPRL - STRATEGY
 

En vedette (20)

Android - Open Source Bridge 2011
Android - Open Source Bridge 2011Android - Open Source Bridge 2011
Android - Open Source Bridge 2011
 
Phonegap
PhonegapPhonegap
Phonegap
 
Django by mrjmad
Django by mrjmadDjango by mrjmad
Django by mrjmad
 
A python web service
A python web serviceA python web service
A python web service
 
Building an API with Django and Django REST Framework
Building an API with Django and Django REST FrameworkBuilding an API with Django and Django REST Framework
Building an API with Django and Django REST Framework
 
All About Phonegap
All About Phonegap All About Phonegap
All About Phonegap
 
Applications multi plateformes avec Cordova, HTML5 et Javascript
Applications multi plateformes avec Cordova, HTML5 et JavascriptApplications multi plateformes avec Cordova, HTML5 et Javascript
Applications multi plateformes avec Cordova, HTML5 et Javascript
 
REST Easy with Django-Rest-Framework
REST Easy with Django-Rest-FrameworkREST Easy with Django-Rest-Framework
REST Easy with Django-Rest-Framework
 
Python et les bases de données non sql
Python et les bases de données non sqlPython et les bases de données non sql
Python et les bases de données non sql
 
Application mobile bancaire sous la plateforme Android
Application mobile bancaire sous la plateforme AndroidApplication mobile bancaire sous la plateforme Android
Application mobile bancaire sous la plateforme Android
 
Développement d’une application mobile bancaire pour QNB Tunisie
Développement d’une application mobile bancaire pour QNB TunisieDéveloppement d’une application mobile bancaire pour QNB Tunisie
Développement d’une application mobile bancaire pour QNB Tunisie
 
Construire son application web de gestion de contenu d'annuaire LDAP
Construire son application web de gestion de contenu d'annuaire LDAPConstruire son application web de gestion de contenu d'annuaire LDAP
Construire son application web de gestion de contenu d'annuaire LDAP
 
Python et son intégration avec Odoo
Python et son intégration avec OdooPython et son intégration avec Odoo
Python et son intégration avec Odoo
 
Alphorm.com Formation WebDev 22 avancé
Alphorm.com Formation WebDev 22 avancéAlphorm.com Formation WebDev 22 avancé
Alphorm.com Formation WebDev 22 avancé
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 
Alphorm.com Support de la Formation PHP MySQL
Alphorm.com Support de la Formation PHP MySQLAlphorm.com Support de la Formation PHP MySQL
Alphorm.com Support de la Formation PHP MySQL
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site Web
 
Mobile Growth: Best Strategies, Tools and Tactics
Mobile Growth: Best Strategies, Tools and TacticsMobile Growth: Best Strategies, Tools and Tactics
Mobile Growth: Best Strategies, Tools and Tactics
 
Create responsive websites with Django, REST and AngularJS
Create responsive websites with Django, REST and AngularJSCreate responsive websites with Django, REST and AngularJS
Create responsive websites with Django, REST and AngularJS
 
AEI - Formation de base "recherche d'informations sur le web"
AEI - Formation de base "recherche d'informations sur le web"AEI - Formation de base "recherche d'informations sur le web"
AEI - Formation de base "recherche d'informations sur le web"
 

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

Android Studio, premier contact
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contactJasmine Conseil
 
Android Studio, premier contact
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contactJasmine Conseil
 
Hackathon Android Abidjan
Hackathon Android  AbidjanHackathon Android  Abidjan
Hackathon Android AbidjanBacely YoroBi
 
Tutorial android - créer des apps
Tutorial android - créer des appsTutorial android - créer des apps
Tutorial android - créer des appsNoé Breiss
 
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
 
Cours android
Cours androidCours android
Cours androidAd Hafsa
 
Initiation au développement mobile sous Android
Initiation au développement mobile sous AndroidInitiation au développement mobile sous Android
Initiation au développement mobile sous AndroidAbdelkader Rhouati
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierDamien Laureaux
 

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

Chap android
Chap androidChap android
Chap android
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Hello droid
Hello droidHello droid
Hello droid
 
Android Studio, premier contact
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contact
 
Android Studio, premier contact
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contact
 
Hello PhoneGap
Hello PhoneGapHello PhoneGap
Hello PhoneGap
 
Hackathon Android Abidjan
Hackathon Android  AbidjanHackathon Android  Abidjan
Hackathon Android Abidjan
 
Tutorial android - créer des apps
Tutorial android - créer des appsTutorial android - créer des apps
Tutorial android - créer des apps
 
Tutorial android
Tutorial androidTutorial android
Tutorial android
 
Android wear
Android wearAndroid wear
Android wear
 
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
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open source
 
Cours android
Cours androidCours android
Cours android
 
Initiation au développement mobile sous Android
Initiation au développement mobile sous AndroidInitiation au développement mobile sous Android
Initiation au développement mobile sous Android
 
Xamarin notes- en français
Xamarin notes- en françaisXamarin notes- en français
Xamarin notes- en français
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
openFrameworks
openFrameworksopenFrameworks
openFrameworks
 
1-android.pdf
1-android.pdf1-android.pdf
1-android.pdf
 

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

  • 1. Débuter avec PhoneGap dans Eclipse pour Android Bosco Basabana Nsita +234 89 772 39 66
  • 2. PhoneGap est une plateforme extensible open source qui permet de créer des applications pour appareils mobiles.
  • 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. 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. Pré-requis: • Connaissance des langages de programmations: HTML, JavaScript et CSS • Avoir des notions en Java et XML. • Connaissances du logiciel Eclipse
  • 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. 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. 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":
  • 10. 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).
  • 12. 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.
  • 14. 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.
  • 15. 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.
  • 16. 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.
  • 17. 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".
  • 18. 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.
  • 19. 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>
  • 20. 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.
  • 21. 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:
  • 22. //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.
  • 23. 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:
  • 24. 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.
  • 25. 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" />
  • 26. • 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"
  • 27. 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>
  • 28. 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 .
  • 29. 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.
  • 30. 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.
  • 31. 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.
  • 33. 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.
  • 34. Merci