Développement d'une application Android avec PhoneGap Olivier Dommange Avant-propos PhoneGap permet le développement d'applications pour plusieurs systèmes d'exploitations de smartphones et tablettes (ios, Android, Blackberry, Windows Phone, Symbian et WebOs). Dans le présent document, il est question de démarrer le développement d'une application Android. Ce choix arbitraire est simplement dû à deux facteurs : 1. La publication d'application est gratuite. 2. Le système d'exploitation est le répandu avec ios. Toutefois pour connaître les outils à installer et la démarche pour engager le développement d'une application autre que Android, il suffit de visiter la page (http://phonegap.com/start). Au préalable, il est nécessaire d'avoir installé : 1. Java JDK (environnement de développement Java) 2. Eclipse Classic (logiciel de développement) 3. Android SDK (outils de développement et de visualisation) 4. Le plugin ADT (plugin Eclipse) 5. PhoneGap (décompresser le dossier) Utile à savoir : Le développement d'une application se fait depuis le logiciel Eclipse. Le SDK Android offre les outils pour visualiser les développements dans un téléphone virtuel et les outils de développements à Eclipse grâce au plug-in ADT. PhoneGap n'a pas être installé. Il s'agit d'un modèle de fichiers (framework) qui servira au développement de notre application pour les différents systèmes d'exploitation. En jetant un oeil dans le dossier [lib] de PhoneGap on s'aperçoit qu'un dossier est réservé pour chaque système d'exploitation. A l'intérieur de ceux-ci se trouvent les fichiers utiles au développement spécifiquement pour ce système d'exploitation. En jetant un oeil dans le dossier [doc] on accède à la documentation complète de PhoneGap. En plus de retrouver ce qu'il y a sur le site Internet, des exemples d'utilisation des fonctions de l'api de PhoneGap sont présentés. Ces fonctions javascript permettront à notre application d'utiliser les ressources du système d'exploitation (la géolocalisation, par exemple) en plus des nouvelles fonctionnalité HTML 5 (l'archivage de données storage, par exemple). 0. Organiser le développement Avec autant de logiciels et d'outils à installer, il est difficile de s'y retrouver les premiers temps. Il peut donc s'avérer utile de définir un dossier contenant nos développements ainsi que PhoneGap. Ainsi sur le disque [C:], créer un dossier [Mobiles], dans lequel on glissera le dossier [phonegap]. Toujours dans le dossier [Mobiles], on créer un dossier [applications]. Ce dernier servira pour chaque nouveau projet d'application mobile. Ouvrir le logiciel Eclipse. A l'ouverture, Eclipse demande un dossier de travail qu'il appelle «Workspace». Le dossier [C:\Mobiles\applications] servira de dossier de travail. Dans le cas où le dossier de travail est déjà défini. Il est possible d'en définir de nouveaux dans le menu [File/Switch Workspace/Other...]. Cette démarche à l'avantage de synchroniser (et localiser) un dossier directement aux projets qu'on développe avec Eclipse. 1. Nouveau projet Dans Eclipse, créer un nouveau projet [File/New/Project...]. Dans la fenêtre proposée, indiquer «Android project». Puis cliquer sur «Next». Développement d'une application Android avec PhoneGap Olivier Dommange 1
Indiquer les paramètres concernant le nouveau développement dans la fenêtre suivante. 1. Indiquer le nom du projet. Automatiquement, ce nom sera donné au dossier qui sera créer dans le dossier de travail [C:\Mobiles\applications]. 2. Désigner la version du système d'exploitation d'android qui servira de référence pour l'application en développement. 3. Indiquer le nom de l'application. Celui-ci a sans doute été indiqué lorsque le nom du projet a été spécifié. Il peut être modifié si c'est souhaité. 4. Le nom du paquet Java qui contiendra les scripts de l'application provenant de PhoneGap. Indiquer [com.phonegap.nomdelapplication] (pas d'espace ni de majuscules). 5. Une classe «Activity» doit être créée pour le projet. Celle-ci a sans doute été indiqué lorsque le nom du projet a été spécifié (elle ne doit pas contenir d'espace). 6. Cliquer sur «Finish». Cette opération a permis à Eclipse de créer un dossier [Mon Application] dans le dossier [C:\Mobiles\applications]. Pour visualiser le projet sur le point d'être développé, aller dans le menu [Window/Show View/Project Explorer]. Développement d'une application Android avec PhoneGap Olivier Dommange 2
2. Paramétrage de l'application Créer un dossier [libs] à la racine du projet. En cliquant sur le bouton droit de la souris sur le nom du projet ou d'un dossier, il est possible d'indiquer la création d'un dossier ou d'un fichier à l'aide du menu contextuel. Puis un dossier [www] dans le dossier [assets] (déjà présent) Utiliser les fichiers PhoneGap utiles à l'application. Allez dans le dossier [C:\Mobiles\phonegap\lib\android] 1. Copier le dossier [xml] dans le dossier [Mon Application\res]. 2. Copier le fichier [cordova-xxx.jar] dans le dossier [Mon Application\libs]. 3. Copier le fichier [cordova-xxx.js] dans le dossier [Mon Application\assets\www] Désigner la librairie Java «cordora-xxx.jar» (de PhoneGap) au projet. 1. Cliquer avec le bouton droit de la souris sur le dossier [libs], puis choisir «Build Path», puis «Configure Build Path...». 2. Cliquer sur l'onglet «Librairies». 3. Cliquer sur le bouton «Add JARs...». 4. Indentifier le chemin pour accéder à la librairie [Mon Application/libs/condoraxxx.jar]. 5. Cliquer sur le bouton [OK]. Développement d'une application Android avec PhoneGap Olivier Dommange 3
3. Mettre à jour les fichiers clés de l'application Dans le projet cliquer sur le fichier [Mon Application/src/com.phonegap.monapplication/MonApplicationActivity.java] Les opérations suivantes sont à faire dans le code de ce fichier (comme indiquer dans l'image) : Remplacer la ligne «import adroid.app.activity;» par «import android.os.bundle;». Remplacer l'extension «Activity» de la classe MonApplicationActivity par «DroidGap». Remplacer la ligne «setcontentview(r.layout.main);» par «super.loadurl("file:///android_asset/www/index.html");». Modifier le fichier AndroidManifest.xml, cliquer sur le fichier avec le bouton droit de la souris et choisir [Open With/Text Editor]. Le fichier AndroidManifest.xml est un indicateur de ce que l'application contient et sera installer sur le support mobile (téléphone ou tablette). Dans cette opération, les lignes de code ajoutées indiqueront qu'il s'agit d'une application qui utilisera toutes les ressources (géolocalisation, internet, contacts, réseau,...) du support que l'application pourrait accéder grâce à PhoneGap. Une fois l'application terminée, il serait judicieux de revoir la liste des outils afin qu'elle corresponde au ressources réellement utilisées par l'application. Plusieurs modifications sont à appliquer au fichier AndroidManifest.xml (consulter l'image pour visualiser les modifications). <activity android:name="org.apache.cordova.droidgap" android:label="@string/app_name" android:configchanges="orientation keyboardhidden"> <intent-filter> </intent-filter> </activity> Ajouter ces lignes à la fin du fichier avant la balise fermée </application> android:configchanges="orientation keyboardhidden" Ajouter cet attribut à la balise <activity> qui contient déjà deux attributs «android:name» et «android:label» Développement d'une application Android avec PhoneGap Olivier Dommange 4
<supports-screens android:largescreens="true" android:normalscreens="true" android:smallscreens="true" android:resizeable="true" android:anydensity="true" /> Ajouter ces lignes après la balise ouverte de <manifest xmlns:android[...] > <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" /> Le fichier AndroidManifest.xml une fois transformé. 4. C'est parti! Tout est en place pour démarrer le projet. Créer un fichier index.html dans le dossier [Mon Application/assets/www]. Le fichier index.html est la porte d'entrée de votre application, comme pour un site Web. D'ailleurs, à partir de maintenant vous utiliser le HTML et le CSS connu pour la conception de sites. Vous pouvez ainsi créer dans le dossier [Mon Application/assets/www] toute la structure du site en HTML, CSS, Javascript et images. Développement d'une application Android avec PhoneGap Olivier Dommange 5
Que doit contenir ce fichier index.html? Du HTML 5... car l'application que l'on souhaite développer utilise le framework PhoneGap et des ressources de supports mobiles accessibles grâce à cette version du HTML. <!DOCTYPE HTML> <html> <head> </html> </head> <body> </body> <title>mon Application</title> <script type="text/javascript" charset="utf-8" src="condova-1.5.0.js"></script> <script type="text/javascript" charset="utf-8" src="js/monscript.js"></script> <link href="css/style.css" rel="stylesheet" type="text/css" /> <div id="page"> <h1>mon application</h1> <h2>conçue en HTML et CSS</h2> </div> Liens directs avec HTML Certaines fonctionnalités du support mobile son facilement accessible avec très peu de code : Il est possible d'accéder directement au téléphone par un simple lien <a href="tel:0212212211">appeler</a>. Il est possible d'accéder directement à la boîte mail par un simple lien <a href="mailto:nom@domaine.com">contact</a>. Qu'est ce que le fichier condova-xxx.js? Ce fichier javascript dispose des fonctions qui permettent d'accéder aux outils et aux ressources du support mobile. Pour avoir une idée de comment employer ce fichier, il peut être intéressant de consulter l'exemple disponible avec PhoneGap dans les fichiers [index.html] et [main.js] du dossier [C:\Mobiles\phonegap\lib\android\example\assets\www]. La documentation téléchargée de PhoneGap donne des indications précises et plus d'exemple sur comment utiliser les ressources [C:\Mobiles\phonegap\lib\android\doc\index.html]. 5. La publication Le SDK de Android met à disposition un simulateur qui permet de visualiser l'application en cours de développement. Pour y accéder, il suffit de cliquer avec le bouton droit de la souris sur le projet et choisir [Run As/Android Application]. La simulation prend du temps avant de s'afficher... dès fois même beaucoup de temps... donc patience. Surtout à la première exécution. Afficher sur un support mobile (smartphone ou tablette) Pour vivre l'expérience sur un vrai support mobile, il suffit de le connecter par câble USB. En faisant la même opération [Run As/Android Application], une fenêtre proposera de le publier sur le support mobile branché. Note : Il est nécessaire que l'option de débogage USB (USB debugging ) est activée sur le support mobile. Pour ce faire, il faut aller dans la rubrique [Paramètres/Applications/Developpement]. Développement d'une application Android avec PhoneGap Olivier Dommange 6
6. Modifier l'icône de l'application Afin de créer une identité authentique à notre application, il est nécessaire de créer une icône spécifique qui apparaîtra sur le bureau du support mobile une fois l'application installée. Il est ainsi nécessaire de créer une image avec trois (3) dimensions (en pixels) différentes au format PNG-24 (la transparence est encouragée) : [res/drawable-hdpi] : 72x72 [res/drawable-lddpi] : 36x36 [res/drawable-mdpi] : 48x48 7. Générer une application Android (.apk) Cliquer avec le bouton droit de la souris sur le projet et choisir [Export]. 1. Des différents formats proposés, il suffit de choisir Android/Export Android Application. 2. Il est nécessaire de créer une clé qui servira pour les applications. Il faut d'abord localiser un endroit de sauvegarde et définir un mot de passe. 3. Compléter les informations en spécifiant un «Alias», un mot de passe, une durée de validité et le nom du propriétaire. Le reste est facultatif. 4. Définir un lieu de sauvegarde de l'application. Développement d'une application Android avec PhoneGap Olivier Dommange 7