décembre 2013 - Gaël Billon

Afficher un indicateur de progression de téléchargement avec PhoneGap

décembre 19, 2013/1 Commentaire/dans Applications mobiles /par Gaël Billon

C’est pas très compliqué avec la propriété onprogress de l’objet fileTransfer de PhoneGap, il suffit de quelques lignes :

var fileTransfer = new FileTransfer();

// Affichage du message "téléchargement... xx%"
fileTransfer.onprogress = function(progressEvent) {
    if (progressEvent.lengthComputable) {
        var pourcentage = Math.floor(progressEvent.loaded / progressEvent.total * 100);
        console.log(pourcentage + "% téléchargés...";
    } else {
        console.log('.');
    }
};

// Téléchargement
fileTransfer.download(
    uri,
    filePath,
    function(entry) {
        console.log('le fichier à été téléchargé');
    },
    function(error) {
        console.log("problème avec le fichier source : " + error.source);
        console.log("problème avec le fichier cible : " + error.target);
        console.log("code d'erreur : " + error.code);
    },
    false
);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

var fileTransfer = new FileTransfer();

// Affichage du message "téléchargement... xx%"

fileTransfer.onprogress = function(progressEvent) {

if (progressEvent.lengthComputable) {

var pourcentage = Math.floor(progressEvent.loaded / progressEvent.total * 100);

console.log(pourcentage + "% téléchargés...";

} else {

console.log('.');

}

};

// Téléchargement

fileTransfer.download(

uri,

filePath,

function(entry) {

console.log('le fichier à été téléchargé');

},

function(error) {

console.log("problème avec le fichier source : " + error.source);

console.log("problème avec le fichier cible : " + error.target);

console.log("code d'erreur : " + error.code);

},

false

);

Et si vous avez besoin d’inspiration pour l’indicateur de progression, il y’a quelques beaux exemples ici.

Intercepter un évènement swipe sur un panel avec Sencha Touch

décembre 19, 2013/dans Applications mobiles /par Gaël Billon

element.on({
     swipe: function(e, node, options){
         if(e.direction == "left") {
              console.log('swipe left');
         } else if(e.direction == "right"){
              console.log('swipe right');
         }
     }
 });

1

2

3

4

5

6

7

8

9

element.on({

swipe: function(e, node, options){

if(e.direction == "left") {

console.log('swipe left');

} else if(e.direction == "right"){

console.log('swipe right');

}

});

Et avec Sencha Architect, il faudra utiliser au préalable l’évènement onPanelPainted :

Essayez l’API geolocalisation HTML5 en 30 secondes dans votre navigateur

décembre 19, 2013/dans Uncategorized /par Gaël Billon

C’est très simple,

1. Ouvrir la console javascript

⌘ + ⌥ + J sur Chrome/Mac OS
Ctrl + Shift + J sur Chrome/Windows
⌘ + ⌥ + K sur Firefox/Mac OS
Ctrl + Shift + K sur Firefox/Windows
voir ici pour les autres.

2. Copier/coller ce code dans la console

navigator.geolocation.getCurrentPosition(
  function (pos) {
    var crd = pos.coords;

    console.log('Votre position est :');
    console.log('Latitude : ' + crd.latitude);
    console.log('Longitude: ' + crd.longitude);
    console.log('A plus ou moins ' + crd.accuracy + ' mètres.');
  },
  function (err) {
    console.warn('ERROR(' + err.code + '): ' + err.message);
  },
  {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
  }
);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

navigator.geolocation.getCurrentPosition(

function (pos) {

var crd = pos.coords;

console.log('Votre position est :');

console.log('Latitude : ' + crd.latitude);

console.log('Longitude: ' + crd.longitude);

console.log('A plus ou moins ' + crd.accuracy + ' mètres.');

},

function (err) {

console.warn('ERROR(' + err.code + '): ' + err.message);

},

{

enableHighAccuracy: true,

timeout: 5000,

maximumAge: 0

}

);

3. Autoriser le partage de la position

Votre position devrait maintenant s’afficher dans la console :

Votre position est :
Latitude : 45.174001
Longitude: 5.802064
A plus ou moins 20 mètres.

1

2

3

4

Votre position est :

Latitude : 45.174001

Longitude: 5.802064

A plus ou moins 20 mètres.

L’API geolocation est disponible sur tout les principaux navigateurs, sauf Opera Mini. caniuse.com/#feat=geolocation

Debugger facilement des applications & sites mobiles

décembre 9, 2013/dans Applications mobiles /par Gaël Billon

Pour débugger des applications PhoneGap ou des sites mobiles en temps réel avec l’inspecteur Webkit, rien de plus simple.

debug.phonegap.com

La première solution, très simple, c’est d’utiliser debug.phonegap.com, tout est expliqué sur la page.

Mais debug.phonegap.com peut desfois s’avérer très lent.

Weinre

On peut alors utiliser la même chose que phonegap, ça s’appel Weinre (à prononcer comme le mot « winery » ou « weiner » en anglais, au choix).

C’est très simple à mêtre ne place :

Si ce n’est pas déja fait, Il faut installer Node.js, par ici http://nodejs.org/download

Une fois que Node.js est installé, sur mac ou linux, ouvrir le terminal et copier/coller ceci

sudo npm install -g weinre

-g signifie installation globale, c’est plus judicieux, vu qu’il s’agit d’un outil qui resservira très probablement pour d’autres projets

ça y’est weinre est installé on peut lancer le serveur en tapant

weinre --boundHost -all-

–boundHost -all- pour pouvoir accéder au serveur depuis un appareil qui n’aura pas la même IP. L’appareil doit se trouver sur le même réseau local.

Il ne reste plus qu’a insérer ceci dans la page qu’on veut débugger (index.html par exemple)

puis de se rendre à l’adresse

http://localhost:8080/client/#anonymous

On peut remplacer #anonymous par n’importe quoi, du moment qu’on le change dans l’adresse du script et dans l’url.

Et voila on peut maintenant facilement débugger un site mobileou une application Phonegap ou Trigger.io

Tapez alert('test') dans la console pour essayer.

Et si o nsouhaite pouvoir fermer le terminal sans arrêter le serveur Weinre, nohup est là pour ça.

nohup weinre --boundHost -all-

Adobe Edge Inspect

La troisième solution, un tout petit peu plus simple mais aussi la plus chère, est d’utiliser Adobe Edge Inspect qui consiste en une application windows, mac , accompagnée d’une application iOS, Android ou Kindle et d’une extension Chrome. (Nécessite de s’inscrire à Adobe Creative Cloud. 1mois gratuit puis 60€/par mois).