Phonegap sample project

copier l'exemple phonegap

Ce projet est une bonne démonstration des fonctionnalités auxquelles phonegap permet d'accéder. Le projet se trouve sous H:/callback-phonegap-9f0856d/Android/Sample. Il faut le copier sous I:/work.

exécuter l'application

exécuter dans l'émulateur ripple

Ouvrir chrome à cette adresse: file:///I:/work/Sample/assets/www/index.html. Un click droit ouvre un menu avec Emulator, choisir enable.

importer le projet dans eclipse

1. dans le projet Sample, effacer project.properties. Ce fichier est automatiquement généré par eclipse.
2. File>New>Other
3. Android>Android project
4. name: Sample, (x) Create project from existing source, Location: H:/work/Sample
5. next version Android 4.0, next minimum SDK 10(10 Android 4.0), finish
6. il y a des erreurs de compilation
7. dans l'arborescence Sample>libs>phonegap-1.1.0.jar, click droit Build Path>Add to Build Path
8. L'erreur de compilation disparait

(A un moment j'ai eu problème avec project.properties, il a fallu écrire à la main la valeur target=android-14. Mais ce problème ne s'est pas reproduit)

construire l'application et l'exécuter sur un téléphone android

1. installer le driver usb pour adb de l'appareil
2. le brancher le téléphone sur usb
3. (si on a rooté son appareil, on peut travailler sans usb avec l'app adbWireless)
4. autoriser le débogage sur le téléphone: Réglages>Applications>Développement>Débogage USB
5. dans eclipse, click droit sur Sample, Run As>1 Android Application
6. l'application démarre sur le téléphone

Une autre solution:

1. Autoriser l'installation d'applications ne provenant pas d'Android Market: Réglages > Applications > Sources inconnues
2. dans eclipse, click droit sur Sample, Run As>1 Android Application. L'application est construite sous la forme du fichier bin/Sample.apk
3. copier le fichier bin/Sample.apk sur le téléphone, par exemple dans le répertoire download.
4. ouvrir un explorateur et appuyer sur Sample.apk
5. accepter l'installation

Une autre solution pour construire le fichier apk

1. mettre tous les fichiers du répertoire assets/www dans une archive zip
2. ouvrir un compte sur https://build.phonegap.com/
3. uploader le fichier zip.
4. attendre un peu
5. télécharger le fichier apk.

examiner l'exemple

Les fichiers de l'application sont sous Sample/assets/www/ index.html

• inclut les autres fichiers: phonegap.js, main.js, master.css
• appelle des fonctions javascript dans body onload et a onclick

main.css

• définit les styles des éléments

main.js

• contient les fonctions javascript appelées dans index.html

Le code javascript utilise des objets javascript créés par phonegap.js comme device, navigator.accelerometer. Ces objets ne sont disponible qu'après l'initialisation de phonegap, qui est signalée par l'événement deviceready

init

La fonction init, appelée au chargement d'index.html fait en sorte que la fonction deviceInfo n'est appelée que quand phonegap est prêt. La fonction deviceInfo lit des propriétés de l'objet device, comme device.platform etc... <source lang="javascript"> function init() {

   document.addEventListener("deviceready", deviceInfo, true);

} </source>

beep

Les autres fonctions, comme beep, sont appelées lorsqu'on clique sur un bouton. <source lang="html5"> <a href="#" class="btn large" onclick="beep();">Beep</a> </source>

beep est une fonction très simple: <source lang="javascript"> var beep = function() {

   navigator.notification.beep(2);

}; </source>

show_pic

show_pic est plus compliquée, elle passe à getPicture les fonctions dump_pic et fail. fail est appelée s'il y a eu un problème. <source lang="javascript"> function show_pic() {

   navigator.camera.getPicture(dump_pic, fail, {
       quality : 50
   });

} </source>

dump_pic

dump_pic s'occupe de la photo en cas de succès. Elle reçoit en argument les données de la photo. <source lang="javascript"> function dump_pic(data) {

   //...
   document.getElementById("test_img").src = "data:image/jpeg;base64," + data;

} </source>

Pour savoir exactement comment utiliser ces fonctions, on peut aussi consulter l'excellente documentation de phonegap http://docs.phonegap.com/en/1.2.0/phonegap_camera_camera.md.html#Camera

Pour chaque fonctionnalité, la documentation indique aussi sur quels plateformes elle est disponible.

toggleAccel

toggleAccel est la plus compliquée des fonctions de l'exemple

<source lang="javascript"> var accelerationWatch = null;

function updateAcceleration(a) {

   document.getElementById('x').innerHTML = roundNumber(a.x);
   document.getElementById('y').innerHTML = roundNumber(a.y);
   document.getElementById('z').innerHTML = roundNumber(a.z);

}

var toggleAccel = function() {

   if (accelerationWatch !== null) {
       navigator.accelerometer.clearWatch(accelerationWatch);
       updateAcceleration({
           x : "",
           y : "",
           z : ""
       });
       accelerationWatch = null;
   } else {
       var options = {};
       options.frequency = 1000;
       accelerationWatch = navigator.accelerometer.watchAcceleration(
               updateAcceleration, 
               function(ex) {
                   alert("accel fail (" + ex.name + ": " + ex.message + ")");
               }, options);
   }

}; </source>

Ici c'est plus simple de regarder d'abord la documentation. http://docs.phonegap.com/en/1.2.0/phonegap_accelerometer_accelerometer.md.html#Accelerometer Phonegap fournit trois méthodes pour l'accéléromètre, et ce code n'en utilise que deux: watchAcceleration et clearWatch.

• watchAcceleration fait en sorte qu' à intervalle régulier updateAcceleration est appelée avec les données de l'accéléromètre
• L'appel à watchAcceleration retourne une variable d'identification appelée dans l'exemple accelerationWatch . Pour interrompre les mesures d'accélération, on peut appeler clearWatch(accelerationWatch)
• On voit que la fonction toggleAccel déclenche la mesure de l'accélération la première fois qu'elle est appelée. A l'appel suivant elle interrompt la mesure, et à l'appel d'après elle le remet en marche etc...

exercices

1. Cette application n'utilise pas la fonction de la boussole (Compass). Ajoutez un bouton qui indique l'angle que fait le téléphone avec le nord. Afficher la valeur de l'angle avec la fonction notification.alert fournie par phonegap.
2. Ce n'est pas pratique d'avoir le nord que quand on appuie un bouton. Modifiez la fonction pour qu'elle affiche l'angle à intervalle régulier, d'une manière similaire à toggleAccel.

solutions

autres fonctionnalités de phonegap

Comme on peut voir dans la documentation, phonegap donne l'accès à d'autres fonctionnalités du téléphone:

• Capture permet d'enregistrer de l'audio, des vidéos et des photos
• Connection permet de savoir si l'appareil est connecté à internet
• Contacts donne accès au carnet d'adresses
• Events permet de réagir à des évènements propres au téléphone. Nous avons déjà vu
  • deviceready est lancé quand phonegap est initialisé.
  • pause/resume sont déclenchés quand l'application est mise en arrière/avant-plan.
  • online/offline signalent la connexion/deconnexion à internet
  • batterycritical, batterylow, batterystatus réagissent à des changement du niveau de batterie.
  • backbutton, menubutton, searchbutton etc... signalent qu'un bouton a été pressé sur le téléphone, et ne sont disponibles que sur les téléphones qui ont ces boutons
• File permet d'écrire et de lire des fichiers sur le téléphone.
• Geolocation donne la latitude et longitude du téléphone. (Cette information est aussi disponibles au pages web).
• Media permet d'enregistrer et de lire des fichiers audio.
• Storage donne l'accès à une base de donnée relationnelle avec laquelle on peut communiquer avec le langage SQL.