Utilisation multiplateforme de PhoneGap

Comme évoqué dans un précédent billet PhoneGap est un framework permettant d’encapsuler une application HTML/CSS/JS dans une application native. On parle bien de PhoneGap : comme indiqué sur leur blog, Adobe/Nitobi a effectué une donation à la fondation Apache dans le cadre du projet Cordova. Phonegap peut donc être considéré comme une distribution de Cordova (à l’image de Chrome avec Webkit). Nous allons voir dans ce billet comment l’utiliser pour mutualiser les sources des fichiers HTML/CSS/JS quand on veut développer un projet multiplateforme. Dans l’exemple nous nous concentrerons sur Android et iOS ; l’utilisation de PhoneGap peut alors être intéressante dans le cas d’une application qui prend le parti d’avoir une ergonomie très personnalisée. Nous allons dans un premier temps créer les projets Android et iOS. Puis nous allons voir comment factoriser la partie HTML/CSS/JS.

Projet Android

Pour la partie Java nous allons faire une petite variante du tutorial officiel en utilisant IntelliJ Idea.

En prérequis, il faut donc:

• Avoir l’environnement Android installé et à jour.
• Avoir la dernière version d’intelliJ Idea, configurée pour utiliser Android.
• Avoir téléchargé PhoneGap.

Commençons par créer le projet Android : Mettons ensuite à jour le projet pour l’adapter à PhoneGap :

• S’ils n’existent pas, créer les répertoires /libs et /assets/www.
• Depuis le dossier lib/android de PhoneGap, copier les fichiers suivants : fichier cordova-2.1.0.js dans le répertoire /assets/www/ et le fichier cordova-2.1.0.jar dans le répertoire /libs.
• Ajouter la librairie cordova-2.1.0.jar dans le classpath du projet (clic droit sur le projet  → Open Module Settings → Librairies).
• Créer le fichier res/xml/config.xml. Vous pouvez le copier à partir du dossier PhoneGap lib /android/example/res/xml/config.xml. Personnellement j’ai modifié le fichier pour ne déclarer que les plugins nécessaires à mon utilisation.
• Modifier le fichier AndroidManifest.xml pour prendre en compte les écrans et orientations supportés, ainsi que les permissions nécessaires. Chaque plugin PhoneGap décrit dans le fichier config.xml utilise des permissions Android, il faut donc avoir les permissions nécessaires à l’utilisation de ces plugins. Il faut aussi penser à ne pas mettre tous les plugins, mais les ajouter si nécessaire au fil de votre développement. On réduit ainsi le nombre de permissions nécessaires et on améliore la sécurité et le sérieux de l’application.
• Mettre à jour l’activité de notre projet pour qu’elle hérite de DroidGap et qu’elle charge le fichier html :

Créons ensuite les fichiers html de notre projet web :

• /assets/www/main.js :

• /assets/www/index.html :

Tout est maintenant en place, il ne nous reste plus qu’à charger notre projet dans un émulateur ou un device physique. Vous devriez obtenir quelque chose d’approchant :     Pour la suite du projet nous allons utiliser un outil de gestion de configuration (svn ou git). De mon côté j’ai mis mes sources sur mon  repository github, vous y trouverez une  page wiki pour vous aider dans cette démarche.

Projet iOS

Voici la liste des prérequis:

• Xcode 4.3+
• Xcode Command Line Tools
• Mac OS X Lion au minimum (10.7+)
• Phonegap >= 2.1.0 pour IOS6
• Nécessaire au déploiement sur un device: un device (forcément !),  iOS developer certificate

Pour créer le projet faites glisser le répertoire phonegap-2.1.0/lib/ios/bin sur l’icône du Terminal (l’application Mac OS). Dans la fenêtre qui apparaît, lancer la commande create (exemple : ./create /Users/nicolasguillot/Documents/ideaWorkspace/phonegap-sencha/Phonegap-sencha-ios fr.ippon.phonegap-sencha-ios Phonegap-sencha-ios). Et c’est tout! Il ne vous reste plus qu’à ouvrir le projet en cliquant sur le fichier « .xcodeproj ». Vous pouvez adapter le projet à vos besoins, celui qui est créé est universel, c’est à dire qu’il peut être installé sur iPad ou iPhone. Lorsque vous lancez celui-ci sur un émulateur iPhone vous obtenez :   De la même façon que pour le projet Android, il faut utiliser un outil de gestion de configuration. A titre d’exemple vous trouverez ici une page expliquant son  insertion sous github.

Mutualisation de la partie web

Pour parvenir à nos fins, on doit effectuer les tâches suivantes :

1. Mutualiser le code HTML/CSS/JS.
2. Charger le fichier cordova-2.1.0.js selon l’OS du device. En effet ce fichier, permet d’utiliser les parties natives du device, il est donc propre à chaque  OS.

Nous allons nous appuyer sur le wiki de phonegap pour organiser ainsi nos projets: Phonegap-sencha-www |- www <—————–code commun   Phonegap-sencha-ios |- code spécifique à IOS |- www <—————–sous module git (ou utilisation des “svn externals”) pour inclure le projet web   Phonegap-sencha-android |- code spécifique à android |- www <—————–sous module git (ou utilisation des “svn externals”) pour inclure le projet web   Le projet “Phonegap-sencha-www” n’est là que pour centraliser le code. Celui-ci étant inclus dans les sous projets iOS et Android, les développeurs peuvent ne travailler que sur ceux-ci. A condition bien entendu de comprendre le fonctionnement des sous modules git pour ceux qui utilisent git.   Pour créer le projet web (Phonegap-sencha-www), nous allons suivre les étapes suivantes :

1. Créer un nouveau répertoire (ex : Phonegap-sencha-www) pour votre projet web.
2. Copier le fichier cordova-2.1.0.js du projet Android dans le projet web sous le nom cordova-2.1.0-android.js.
3. Copier le fichier cordova-2.1.0.js du projet iOS dans le projet web sous le nom cordova-2.1.0-ios.js.
4. Créer le fichier cordova-loader.js (todo présenter le code dans le blog).
5. Créer (ou copier) une  page html simple validant l’utilisation de la librairie PhoneGap.
6. Insérer votre projet dans votre outil de gestion de configuration.

Le projet web est créé et il permet le chargement de la librairie PhoneGap selon l’environnement. Il ne nous reste plus qu’à l’utiliser dans nos projets Android et iOS. Pour cela on peut utiliser les  sous-modules de git ou les “svn externals” comme décrit dans le wiki de PhoneGap.   Une fois cette étape effectuée on devrait constater l’affichage d’une pop-up « Our first PhoneGap app » lors du lancement du projet dans nos différents environnements:   Voilà, il ne vous reste maintenant plus qu’à coder votre propre application ! Vous pourrez toujours la personnaliser en fonction de l’environnement en chargeant les fichiers CSS ou Javascript appropriés. Le but étant de mutualiser un maximum de choses entre les différentes plateformes.   Dans un prochain billet nous présenterons  Sencha Touch et verrons comment l’utiliser avec PhoneGap.