Premier essai de PhoneGap

20 Oct 2011

Dernièrement j’avais à développer une application mobile sans grosse difficulté technique. J’ai donc eu envie d’essayer de la réaliser avec PhoneGap.

Je ne vais pas faire d’article pour expliquer comment fonctionne PhoneGap car beaucoup l’on déjà fait mieux que je ne peux le faire (comme octo par exemple) mais juste faire un petit retour d’expérience.

La base de PhoneGap c’est de pouvoir faire des applications mobiles mutliplate-forme en développement en HTML/CSS/Javascript.

Je ne suis vraiment pas un spécialiste du HTML et encore moins du Javascript. Mais je pense qu’il est grand temps de s’y mettre et ce petit projet est une bonne occasion.

Je débute donc et rapidement je tombe sur un premier problème : le titre dans la nav bar en haut de page est tronqué. J’ai rapidement trouvé où changer le CSS pour corriger cela. Ouf :)

Je développe avec Dreamweaver et c’est assez agréable. En effet il supporte JQuery et PhoneGap. Ca me permet d’avoir un aperçu direct du rendu de mon code et en 2 cliques ça me génère un projet XCode et lance directement le simulateur iPhone pour tester l’application.

Par contre on arrive vite aux limites de Dreamweaver au moment où on utilise du javascript PhoneGap. Par exemple, j’avais besoin de gérer le changement d’état de l’application (passage en background, retour au premier plan..). Pour ça il faut utiliser la méthode :

document.addEventListener("resume", onResume, false);

Mais impossible de le tester dans un navigateur ou dans Dreamweaver. Ca ne fonctionne bien sûr que sur l’iPhone.

Et là, re-problème, ma méthode onResume ne se lance jamais :(Je suis donc parti sur une longue demi-journée de debug à base de alert(“je passe là”) pour finir par comprendre que Dreamweaver utilise une ancienne version de PhoneGap ne gérant pas l’évènement “resume”. Impossible de trouver le numéro de version PhoneGap utilisé ! Et pas d’explication non plus sur comment utiliser une autre version. J’ai même bêtement intégré le fichier phonegap-1.1.0.js dans mon projet : marche pas car c’est la lib PhoneGap du projet XCode généré qu’il faut changer.

J’ai donc fini par abandonner la génération PhoneGap intégré par DreamWeaver. J’utilise PhoneGap normalement dans XCode et Dream ne me sert que d’éditeur de texte car la complétion et l’aperçu c’est quand même bien pratique.

J’avais l’impression d’avoir réalisé le plus dur. Il me restait à ouvrir une simple petite fenêtre popup. Et là, catastrophe, le rendu sur un navigateur est différent de celui sur l’iPhone. Plus grave la transition au moment de la fermeture de la popup fonctionne si elle est ouverte depuis la première page mais pas depuis les autres. Je pense que c’est un problème JQuery et pas PhoneGap puisque je constate le même problème sur un navigateur.

Comment faire pour débugger ??

C’était trop pour moi, j’ai préféré abandonner et repasser sur de l’Objective-C. En une journée j’ai refait ce que j’avais mis 3 jours à faire en Javascript (normal, je maitrise mieux) et hop ça marche !

Donc non PhoneGap ne m’a pas convaincu. En fait pour être plus juste, c’est plus le Javascript qui m’a bloqué. Déjà je n’ai pas assez d’expérience avec ce langage, mais c’est surtout une vraie galère à débugger !