Pour le développement d’applications mobiles hybrides sur plusieurs plateformes, nous aimons utiliser Phonegap chez AdFab Connect.

Le 19 juillet dernier la version 3.0 de Phonegap est sortie, avec une refonte complète de son utilisation.

Petite présentation des nouveautés.

Qu’est-ce que Phonegap ?

Pour ceux qui ne connaitraient pas Phonegap, il s’agit d’un Framework open source permettant de développer des applications hybrides (natif + html) sur différentes plateformes (iOS, Android, Blackberry…). Ce Framework initialement détenu par Adobe a été cédé à la communauté Apache l’année dernière, gage de qualité (pour les connaisseurs, Phonegap a d’ailleurs été pour l’occasion renommé Cordova, mais personne ne s’y fait, aussi utiliserons-nous le nom Phonegap dans la suite de l’article).

On développe ses applications en langages web :

• html pour les vues
• css pour la mise en page
• JavaScript pour les interactions
• et si besoin ajax pour récupérer des données distantes via webservices.

Le tout encapsulé dans le Framework, pour ne coder qu’une fois son application pour la déployer sur tous types d’appareils.

L’intérêt de Phonegap, c’est qu’il est cross-plateform et qu’il ne nécessite pas de connaitre le langage natif de chaque OS mobile :  En clair, on va plus vite et on réduit les coûts !

Pour plus d’informations, le site officiel est très bien documenté : http://phonegap.com/

Réorganisation des dossiers

Avec la version 3.0, l’arborescence a été entièrement revue pour une plus grande simplicité d’utilisation.

La nouvelle organisation est composée de 4 dossiers :

• platforms: c’est là qu’on installe chaque OS que l’on veut gérer via les lignes de commande ( phonegap add <platform>). Par rapport à la version 2.x peu de choses changent dans les dossiers générés, mis à part qu’on ne code plus dans les dossiers www de chaque plate-forme. Ce qui en soit est déjà une grande amélioration : finis les svn:external ou les duplications de code entre chaque plate-forme!
• www: le nouveau dossier dans lequel on développe son application côté web. Quand on lance un build en ligne de commande (phonegap build <platform>), le contenu de ce dossier est reporté dans le dossier www de la plate-forme qu’on met à jour. Les dossiers www des plateformes sont donc entièrement écrasés à chaque build, inutile de mettre des fichiers spécifiques à une plate-forme dedans. Pour gérer les différences entre les OS, il y a le dossier merges( cf. paragraphe suivant). Le fichier config.xml présent dans www est commun aux plateformes, et phonegap prend la configuration commune et spécifique nécessaire à chaque build.
• merges: dans ce dossier on créé un sous dossier avec le nom des plateformes (iOS, android…). Ensuite le contenu de chacun des dossiers sera mis dans le dossier www lors du build, en écrasant les fichiers du www ou en s’y ajoutant. Ca permet de faire facilement des css spécifiques aux dimensions de chaque plate-forme par exemple.
• plugins: c’est ici qu’on installe les plugins qu’on souhaite utiliser.

Pour résumer, on n’a plus à coder dans les dossiers « www » de chaque plate-forme et dupliquer ou faire des external de son code grâce au nouveau dossier. Quand on a une donnée ou une mise en page spécifique à une plate-forme, on le met dans le dossier « merges ». Et les plugins ont leur propre dossier pour une plus grande clarté.

Que du bonheur!

Refonte du système de plugins

Avec la version 3.0 le système de plugins a été entièrement revu. Phonegap a été rendu plus léger, avec un certain nombre d’options qui sont devenues des plugins. Leur installation se fait en ligne de commande, tout est indiqué dans la doc. Ca peut dérouter au début de ne plus pouvoir utiliser certaines fonctionnalités qu’on avait de base dans les versions 2.x, mais l’installation est tellement rapide, avec un gros gain de performances vu que l’on n’installe que les features dont on a besoin.

Avant on avait Phonegap avec ses APIs et des plugins développés par la communauté autour. Maintenant il y a le cœur de Phonegap (enfin Cordova) avec des plugins officiels et ceux de la communauté. L’inconvénient de cette refonte est que les plugins ne sont plus compatibles, les développeurs doivent les adapter pour les faire fonctionner avec les versions 3.x

En conclusion

Pour résumer, la version 3.0 de Phonegap simplifie énormément le code entre chaque plate-forme en évitant toute duplication et avec un dossier merges pour faire certaines parties spécifiques comme on souhaite.

Avec la refonte du système de plugins, Phonegap est plus léger, plus rapide, plus personnalisable donc mieux ! Phonegap est devenu incontournable pour tout développement d’appli mobile multi-plateforme à moindre coût.

Dans une prochaine série d’articles nous verrons :

• Comment optimiser le développement cross-platform pour avoir une css commune qui gère toutes les résolutions entre les plateformes ?
• Comment développer son application avec un navigateur sans avoir à compiler à chaque modification ?
• Comment configurer son projet pour avoir des applications fluides avec une bonne expérience utilisateurs sur chaque écran.