Débuter avec PhoneGapdans 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 prendactuellement en charge iOS, Android, HP webOS, BlackBerry et Symbian. Celles-cisont développées en HTML5, Javascript et CSS et sont hybrides, ce qui signifiequ'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 al'habitude de travailler, comme jQuery, Sencha,....

PhoneGap a été développé par Nitobi lors d'un événement (l'iOSDevCamp à SanFrancisco) et va continuer à avoir du succès à la conférence O'Reilly Média. CeSoftware 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écentsous le nom de Apache Cordova (le nom "Callback" ayant été jugé comme tropgénérique), ce dernier continue encore à attirer les développeurs.

Eclipse & Android

• Eclipse est un environnement de développement intégré libre (IDE), supportant denombreux langages de programmation. Il produit et fournit des outils pour la réalisation delogiciels, englobant les activités de programmation, de modélisation, de conception, detest 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éveloppementen téléchargeant et en installant l'IDE Eclipse:

1. Téléchargez le package Eclipse Classic* correspondant à votre systèmed'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 denombreux packages d'installation pour Eclipse. Ces packages proposés parEclipse étant quant à eux très nombreux, nous vous recommandons donc lepackage Eclipse Classic car il comprend déjà des outils dont nous aurons besoinpour démarrer et développer des applications PhoneGap.

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:

Téléchargement et installation de PhoneGap1. Rendez-vous sur la page de téléchargement PhoneGap et cliquez sur le lien deté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 dansEclipse.Remarque: Les étapes qui suivent sont pour PhoneGap 2.9, mais le processus devrait êtresimilaire pour toutes les versions de PhoneGap et pourra donc être appliqué quelque soit votreversion.

Mise en place du projet Android dans Eclipse1. Création du nouveau projet AndroidChoisissez NouveauAndroid Project .Important: dans les anciennes versions d'Eclipse, il vous est possible de choisir entre 3catégories de projet Android. Dans notre cas il s'agit de "android Application project":

Diverses informations sont alors à renseigner pour la création d'un nouveauprojet Android utilisable sous PhoneGap, celles-ci sont détaillées dans les étapesqui 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

o le nom de votre package.

Le nom du package doit être représentatif de la structure de celui-ci (parexemple: com.overacdemy.votreprojet).

3. Sélection de la version

Cet onglet permet de définir la version Android minimale, maximale et cible quesupportera l'application que l'on va créer. Dans notre cas, nous vous recommandonsles 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 compilateurpour que celui-ci réalise un appel au SDK Android 2.2 et fasse en sorte que votreapplication PhoneGap puisse travailler sur les appareils fonctionnant sous Android 2.2et les versions ultérieures du système d'exploitation.

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.

N.B: Il vous est proposé de créer une activité, dans certain des cas celle-cipeut engendrer des problèmes lors de la création de votre projet. Dans cecas, il vous est préconisé de décocher la case de création de l'activité et decréer celle-ci manuellement.

5.Paramétrage de l'Activité avec l'interface d'EclipseRenseigner 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 projetChoisissez le type de navigation.

Installation du projet pour utiliser PhoneGap

À ce stade, Eclipse a créé un projet vide Android. Cependant, il n'a pasencore été configuré pour utiliser PhoneGap. Nous ferons cela à l'étapesuivante, en attendant:

1. Créer un dossier "www" (qui sera a placer dans le dossier "assets") etun dossier "libs" à l'intérieur de votre nouveau projet Android.Tout le code HTML et JavaScript de votre interface de l'applicationPhoneGap va se trouver dans le dossier "assets/www".

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.

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 ledé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>

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 à utiliserPhoneGap.

1. Ouvrez votre fichier d'activité créé précédement. Si cela n'est pas le cas, créer unnouveau 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 setrouve dans le package com.macompagnie.monprojet qui est spécifié dans la boîtede dialogue comme nouveau projet Android.

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:

//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ésdans 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.

Configuration des métadonnées du projet

Maintenant que l'on a configuré les fichiers du projet, la dernière étapeconsiste à 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 à laracine de votre projet en utilisant l'éditeur de texte Eclipse:

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.

3. Maintenant, nous allons configurer les autorisations pour l'application PhoneGap. Copiez lesbalises suivantes et les coller dans le fichier AndroidManifest.xml à l'intérieur de la baliseprincipale <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" />

• Les balises <uses-permission></uses-permission> identifient lesfonctionnalités que vous voulez activer pour votre application. Les lignes ci-dessus activent toutes les autorisations nécessaires à l'ensemble desfonctionnalités de PhoneGap pour qu'il puisse fonctionner.

• Une fois que vous avez construit votre application, vous pouvez supprimertoutes les autorisations qui ne vous sont pas réellement utiles (ainsi lesavertissements de sécurité lors de l'installation de l'application seronssupprimés). Pour en savoir plus sur les autorisations Android et ces balises, vouspouvez 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'attributsuivant:

android:configChanges="orientation|keyboardHidden"

5. Maintenant, vous devez créer une nouvelle balise <activity></activity> de laclasse org.apache.cordova.DroidGap. Insérez celle-ci à la suite de la première baliseactivity mais rester dans la balise <application>. Une fois celle-ci mise en place, intégrez y lecode suivant:

<activity

android:name="org.apache.cordova.DroidGap"

android:label="@string/app_name"

android:configChanges="orientation|keyboardHidden">

<intent-filter></intent-filter>

</activity>

6. Ensuite, il vous faut rajouter votre package dans le code, pour cela, il voussuffit 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 projetPhoneGap pour Android. Si vous rencontrez des problèmes, vérifiez votreconfiguration avec l'exemple fourni ici .

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.

Eclipse démarre automatiquement l'émulateur Android (si cela n'est pas déjà fait), déployervotre application sur l'émulateur et lancer l'application.

2. Sur Mobile Android

• Il est recommandé de tester votre application sur un périphérique physique avant de ladéployer dans des environnements de production. En effet, les dispositifs physiques onttoujours des capacités de calcul et des paramètres différents des émulateurs. Ainsi, cedispositif de test permet de déceler les problèmes éventuels qui n'auraient pas été détectésdans l'environnement émulateur. Si vous souhaitez donc tester votre application sur un mobileAndroid, 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 dedialogue) Exécuter les configurations.

d. Cliquez sur l'onglet Cible, puis sélectionnez Manuel comme mode de sélection de déploiementcible.

e. Lorsque vous êtes prêt à lancer votre application, cliquez sur Exécuter.

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.

Merci