Une multitude d’outils

En matière d’outils de debug et de développement, le choix ne manque pas. Que vous utilisiez Linux, Windows ou MacOsX vous êtes libre de choisir les outils.

Adobe, bien qu’étant spécialiste des IDE et solutions complètes de développement, ne nous fournit pas encore un outil digne du nom d’IDE. A part la ligne de commande et une petite interface permettant d’appeler ces commandes (voir l’article), nous sommes loin des solutions auxquelles a pu nous habituer Adobe.

C’est donc à nous développeurs, de trouver le moyen le plus efficace de créer des projets, de les éditer, de les tester et de les livrer. Plusieurs solutions, libres dans la plupart des cas, vont nous aider à pallier à ce manque.

Le navigateur, un des outils les plus efficaces

Que ce soit Firefox, Chrome, Safari, ou encore IE (et oui c’est encore utilisé ;-)), le navigateur reste l’outil le plus pratique pour debugguer votre application. Bien sûr vous ne pourrez pas tester les appels aux plugins, mais c’est un must pour de la mise en page, animations, et l’inspection des variables.

Oui mais alors, comment déclencher l’évènement deviceready ?

Plusieurs solutions sont possibles et sont décrites sur stackoverflow. Le plus simple est d’utiliser le code suivant :

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { 
    document.addEventListener(“deviceready”, onDeviceReady, false);
} else {
    onDeviceReady();
}

L’idée est de détecter que l’on se trouve sur un appareil mobile pour s’abonner à cet évènement. Dans les autres cas, cela signifie que nous sommes sur un navigateur et que nous ne sommes pas en mesure d’avoir cet évènement, nous devons donc appeler la fonction onDeviceReady.

Ripple emulator

Ripple emulator est un plugin fonctionnant avec Firefox et/ou Chrome, il permet de visualiser le rendu de votre application dans votre navigateur.

Ripple emulator permet d’émuler certains composants d’un appareil mobile, tels que l’orientation du matériel, la géolocalisation, la détection de mouvement, parfait pour simuler un cas d’utilisation réel.

C’est une solution très efficace, pour autant qu’on utilise les versions de Phonegap compatibles avec Ripple.

Phonegap developer app

Cette application qui embarque tous les plugins de base, permet d’utiliser toutes les fonctionnalités de l’appareil. Cette application va de paire avec une instance de serveur Phonegap qu’on lance depuis sa machine.

La première chose à faire est de télécharger l’application Phonegap app developer

$ phonegap serve

[phonegap] starting app server…
[phonegap] listening on 192.168.1.12:3000
[phonegap] 
[phonegap] ctrl-c to stop the server
[phonegap]

Une fois connecté, l’application est automatiquement rechargée lors de l’édition des sources. C’est un bon début pour être efficace mais il manque :

• cruellement la possibilité d’utiliser le remote debugging,
• aussi la possibilité d’utiliser des plugins tiers.

Pour résumer, c’est un moyen assez efficace pour tester son application, mais pas pour la debugguer.

Chrome Web Tools

Le remote debugging avec Chrome est l’un des meilleurs outils à mon sens, si ce n’est le meilleur. Pour l’activer, il faut avoir activer le mode développeur sur l’appareil, avoir déployé votre application, et connecter votre appareil en usb.

Pour accéder à la console javascript de votre application , il faut ouvrir Chrome, et accéder à chrome://inspect

Attention : pensez à cocher la case ‘Discover usb devices’.

En cliquant sur le lien ‘inspect’, une console javascript s’ouvre et permet d’inspecter directement l’application, idéal pour mettre des points d’arrêts et monitorer les performances.

Nodejs et live reload

La solution qui me plait le plus en terme de productivité reste le live reload de l’application lors de modification des sources.

L’idée est de ne pas embarquer les sources html/javascript dans l’application Phonegap mais de les servir depuis un serveur Nodejs avec Grunt ou Gulp (voir l’article)

Un seul fichier est embarqué dans l’application (index.html), et redirige vers notre serveur Nodejs.

<html>
<head>
<meta http-equiv=”refresh” content=”1; URL=http://192.168.1.12:3000”>
</head>
<body>
    Redirecting …
</body>
</html>

Seul l’ajout ou modification de plugins nécessite un redéploiement de l’application sur l’appareil.

On bénéficie alors du remote debugging et du live reload, mais surtout on teste sur du vrai matériel.

Conclusion

Pour résumer, Phonegap laisse le développeur dans l’embarras du choix concernant l’outillage et le processus de développement. La communauté Phonegap / Cordova est active ces derniers temps et laisse présager de beaux jours (belles nuits) de développement pour l’année à venir !

Dans un prochain article, nous aborderons le framework ngCordova qui marie Cordova et AngularJS.