Traductions pour la plateforme Java

Combiner HTML 5, les APIs de géolocalisation et des web services pour créer des mashups mobiles

Article d'origine: 

Trouver et tracer les coordonnées géographiques pour les utiliser avec toutes sortes de web services

Résumé: 

Dans la première des cinq parties de cette série, vous utiliserez une plus populaires des nouvelles technologies disponibles pour les applications web mobiles: la géolocalisation. Les smartphones haut de gamme incluent tous un GPS, et vous verrez comment le mettre à profit dans une application web. Vous comprendrez comment vous servir de différentes facettes du standard de géolocalisation et comment l'associer à un web service bien connu pour créer un mashup mobile intéressant.

Prérequis

Au cours de cet article, vous allez développer des applications web utilisant les technologies les plus récentes. Le plus gros du code est constitué de HTML, de Javascript et de CSS - les technologies de base de tout développeur web. Ce dont vous aurez vraiment besoin, ce sont des navigateurs pour tester tout çà. Pour cet article, il est recommandé d'utiliser Mozilla Firefox 3.5+, puisque ce navigateur supporte la géolocalisation. Bien sûr, il faut tester sur des navigateurs mobiles également, et vous vous servirez des dernières versions des SDKs iPhone et Android pour ce faire. Pour cet article, les SDKs iPhone 3.1.3 et Android 2.1 ont été utilisés. Voir les Ressources pour les liens.

Les bases: se repérer

La géolocalisation en elle-même est quelque chose d'assez nouveau. Cela permet de déterminer où l'utilisateur se trouve. Cependant, obtenir cette information pour la redonner à l'utilisateur ne serait pas très utile. Qui se soucie de sa latitude et de sa longitude exacte ? C'est quand on commence à l'utiliser en combinaison avec d'autres données et des services qui en font usage que l'on obtient des résultats intéressants. La plupart de ces services demandent qu'on leur fournisse entre autres la latitude et la longitude de l'utilisateur. Souvent c'est tout ce dont vous aurez besoin, voyons donc comment obtenir ces informations. Le Listing 1 montre l'API Javascript standard pour ceci.

Listing 1. Repérer un utilisateur : getCurrentPosition

navigator.geolocation.getCurrentPosition(
    successCallback, errorCallback, options);

C'est l'API de base de la géolocalisation. Pour un grand nombre d'applications, c'est la seule chose dont vous aurez jamais besoin. L'objet geolocation est partie intégrante de l'objet navigator standard. Il expose quelques méthodes, mais la plus utilisée est getCurrentPosition. Accéder à la position d'un utilisateur est une opération couteuse (il est possible que vous deviez contacter un satellite pour cela !) et qui requiert le consentement de l'utilisateur, c'est pourquoi il s'agit d'une opération asynchrone. Ses paramètres sont des callbacks: un pour le succès, l'autre pour l'échec.

La fonction appelée en cas de succès sera appelée avec un seul paramètre de type Position. Cet objet a deux propriétés: une propriété d' horodatage et une propriété coords de type Coordinates. Un objet Coordinates possède plusieurs propriétés:

  • latitude
  • longitude
  • altitude
  • accuracy
  • altitudeAccuracy
  • heading
  • speed

Toutes ces propriétés ne sont pas disponibles sur tous les appareils, à l'exception de latitude, longitude et accuracy. Si l'API de géolocalisation est supportée et que l'appareil arrive à déterminer sa position, vous pouvez compter sur ces trois là.

Le callback d'erreur est appelé avec un seul paramètre de type PositionError. Une instance de PositionError a deux propriétés:code et message. Le message est spécifique à l'appareil, et est utile pour débugger. Le code devrait avoir une de ces trois valeurs:

  • PERMISSION_DENIED (1)
  • POSITION_UNAVAILABLE (2)
  • TIMEOUT (3)

Votre application devrait se fier à ce code pour afficher à l'utilisateur un message d'erreur adapté.

Il est à noter que la spécification du W3C permet aussi de passer un troisième paramètre constitué d'options. Elles incluent des choses comme un délai maximal de réponse à la demande de géolocalisation. Cependant, ce n'est pas encore supporté par des appareils tels que l'iPhone et son utilisation n'est donc pas recommandée. Maintenant que nous avons vu l'API en détail, voyons sur un exemple simple comment l'utiliser.

Intégration avec Twitter

En ce moment, le "hello world" des mashups consiste à utiliser Twitter d'une manièr ou d'une autre. Pour ce premier exemple, nous allons utiliser l'API de recherche de Twitter. Elle permet de chercher les tweets émis dans un certain rayon autour d'une position donnée. Le Listing 2 montre comment utiliser cette recherche Twitter.

Listing 2. Recherche de tweets autour d'une position

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width"/>
<title>Local Twitter Search</title>
<script type="text/javascript">
    function startSearch(){
        var gps = navigator.geolocation;
        if (gps){
            gps.getCurrentPosition(searchTwitter, 
                   function(error){
                alert("Got an error, code: " + error.code + " message: " 
+ error.message);
             });
        } else {
            searchTwitter();
        }
    }
    function searchTwitter(position){
        var query = 
            "http://search.twitter.com/search.json?callback=showResults&q=";
        query += $("kwBox").value;
        if (position){
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            query += "&geocode=" + escape(lat + "," + long + ",50mi");
        }
        var script = document.createElement("script");
        script.src = query;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
</script>
</head>
<body>
    <div id="main">
        <label for="kwBox">Search Twitter:</label>
        <input type="text" id="kwBox"/>
        <input type="button" value="Go!" onclick="startSearch()"/>
    </div>
    <div id="results">
    </div>
</body>
</html>

L'utilisateur saisit un terme à rechercher dans la zone de texte. Un clic sur le bouton appelle la fonction startSearch. C'est là que l'API de géolocalisation est utilisée. D'abord on teste sa disponibilité. Si c'est le cas, on appelle la fonction getCurrentPosition. Le callback de succès est la fonction searchTwitter. Le callback d'erreur est une simple fermeture qui affiche un message d'information.

La fonction searchTwitter est appelée quand la navigateur a réussi à déterminer la position. On utilise la position passée à la fonction pour ajouter un paramètre geocode à la requête de recherche Twitter. L'exemple du Listing 2 recherche les tweets postés à moins de 50 miles du lieu déterminé. Pour appeler Twitter, on utilise un tag de script inséré dynamiquement, une technique souvent appelée JSONP (JSON with Padding). Cette technique est supportée par l'API de recherche de Twitter, et vous permet de faire une recherche Twitter directement de votre navigateur, sans aucun appel serveur. On peut le voir au paramètre callback de la requête. Notez qu'il est positionné à showResults qui est le nom de la fonction à invoquer. On ne la voit pas dans le Listing 2, car ça fait partie de l'IHM, mais vous pouvez la trouver dans le code source de cet article (voir les Ressources). La Figure 1 est une capture d'écran du code du Listing 2 tournant sur un iPhone.

Figure 1. Recherche Twitter depuis un iPhone

Recherche Twitter depuis un iPhone

Cette application, comme beaucoup d'autres applications gérant la position, n'a besoin d'y accéder qu'une seule fois. Cependant, d'autres applications auront besoin de tracer les utilisateurs pendant leurs déplacements. Ces applications nécessiteront l'utilisation de l'autre API de géolocalisation, plus avancée.

Une utilisation plus avancée: le traçage

Parfois, l'application n'a pas seulement besoin de la position courante de l'utilisateur, mais doit aussi être avertie des déplacements de l'utilisateur. Il existe pour cela une API appelée watchPosition. Elle est très similaire à getCurrentPosition, car elle prend les mêmes paramètres. La seule différence majeure est qu'elle retourne un ID. Cet ID est utilisé en conjonction avec la dernière API de géolocalisation, clearWatch. Cette fonction prend en entrée l'ID obtenu avec watchPosition. En fait, quand on appelle watchPosition, le navigateur continue à envoyer des mises à jour au callback de succès que vous lui avez passé, jusqu'à ce que clearWatch soit appelée. Récupérer continuellement la position d'un utilisateur tire beaucoup sur la batterie d'un appareil mobile, il faut donc utiliser ces APIs avec précaution. Voyons maintenant un exemple.

Intégration avec Google Maps

Dans cet exemple, nous allons interagir avec les APIs Map de Google. Elle sont optimisées pour une utilisation à partir de mobiles, et plus particulièrement pour les plateformes iPhone et Android. Cela les rend très attrayantes pour les développeurs Web mobile, surtout si vous créez des applications utilisant la géolocalisation. L'application d'exemple va tout simplement montrer où se trouve l'utilisateur sur une carte, en la mettant à jour à chaque déplacement de l'utilisateur. Le Listing 3 montre le code qui permet cela.

Listing 3. Application de localisation sur une carte

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>I'm tracking you!</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
     sensor=true"></script> 
<script type="text/javascript">
    var trackerId = 0;
    var geocoder;
    var theUser = {};
    var map = {};
    function initialize() {
        geocoder = new google.maps.Geocoder();
        if (navigator.geolocation){
            var gps = navigator.geolocation;
            gps.getCurrentPosition(function(pos){
                var latLng = new google.maps.LatLng(pos.coords.
latitude,pos.coords.longitude);
                var opts = {zoom:12, center:latLng, mapTypeId: 
google.maps.MapTypeId.ROADMAP};
                map = new google.maps.Map($("map_canvas"), opts);
                theUser = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: "You!"
                });
                showLocation(pos);
            });
            trackerId = gps.watchPosition(function(pos){
                var latLng = new google.maps.LatLng(pos.coords.latitude,pos.
coords.longitude);
                map.setCenter(latLng);
                theUser.setPosition(latLng);
                showLocation(pos);
            });
        }
  }
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <div id="superbar">      
        <span class="msg">Current location: 
              <span id="location"></span>
          </span>
          <input type="button" value="Stop tracking me!" 
onclick="stopTracking()"/>
      </div>
  <div id="map_canvas" style="width:100%; height:90%; float:left; 
border: 1px solid black;">
  </div> 
</body> 
</html>

Quand le corps du document est chargé, la fonction initialize est appelée. Cette fonction vérifie que la géolocalisation est supportée par le navigateur. Si c'est le cas, elle appelle getCurrentPosition, d'une manière similaire à ce qui est fait dans l'exemple du Listing 2. Quand une position est déterminée, elle crée une carte en utilisant l'API Google Map. Remarquez que la latitude et la longitude servent à créer une instance de google.maps.LatLng. Cet objet permet de centrer la carte. Ensuite, on crée un marqueur sur la carte qui représente la position courante de l'utilisateur. Encore une fois, le marqueur utilise la latitude et la longitude transmises par l'API de géolocalisation.

Une fois qu'on a créé la carte et placé un marqueur dessus, on commence à pister l'utilisateur. On enregistre l'ID retourné par watchPosition. Quand la position a changé, on recentre la carte sur cette nouvelle position et on déplace le marqueur à cette position. Le Listing 4 montre deux fonctions supplémentaires qu'il est intéressant d'examiner.

Listing 4. Fonctions de géoréférencement et d'annulation du traçage

function showLocation(pos){
    var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
    if (geocoder) {
        geocoder.geocode({'latLng': latLng}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                $("location").innerHTML = results[1].formatted_address;
            } 
          } 
        });
      }        
}
function stopTracking(){
    if (trackerId){
        navigator.geolocation.clearWatch(trackerId);
    }
}

Dans le Listing 3, la fonction showLocation est appelée quand la carte est dessinée la première fois et quand on reçoit une mise à jour de la position de l'utilisateur. On voit cette fonction dans le Listing 4. Elle utilise une instance de google.maps.Geocoder (créée au début de la fonction initialize du Listing 3). Cette API sert à faire du géoréférencement, c'est à dire transformer une adresse en coordonnées géographiques (latitude et longitude). Elle sait aussi faire du géoréférencement inverse — prendre des coordonnées géographiques et retourner une adresse physique. Dans notre cas, nous utilisons l'API de Google Maps pour faire du géoréférencement inverse à partir des coordonnées produites par l'API de géolocalisation. Le résultat est ensuite affiché à l'écran.

Dans le Listing 4, on voit en dernier lieu la fonction stopTracking. Elle est appelée quand l'utilisateur clique sur le bouton créé par le code HTML du Listing 3. On utilise ici le trackerId  obtenu lors de l'appel précédent à la fonction watchPosition. On le passe simplement à la fonction clearWatch et à partir de là le navigateur cessera de récupérer la position de l'utilisateur et d'appeler le code Javascript. La Figure 2 montre une capture d'écran de l'application de traçage en fonctionnement.

Figure 2. Application de traçage

Application de traçage

Bien entendu, pour vraiment tester le traçage, il faut se déplacer. Google App Engine peut être un outil utile pour cela, car il permet de transférer l'application web à un endroit atteignable par tous. Vous pouvez ensuite tester directement depuis votre appareil pourvu que vous disposiez d'une bonne connexion. A cette condition, vous pouvez prendre les transports publics ou vous faire conduire par quelqu'un et regarder votre application web répondre à vos déplacements.

Conclusion

Cet article vous a montré comment utiliser les APIs de géolocalisation dans une application web mobile. Utiliser le GPS pourrait sembler sexy, mais compliqué. Cependant, comme vous l'avez vu, le standard du W3C pour la géolocalisation fournit une API très simple. Il est facile de récupérer la position de l'utilisateur et de le tracer dans ses déplacements. A partir de là, vous pouvez passer ces coordonnées à une grande variété de Web Services qui utilsent le positionnement, ou peut-être à votre propre service en cours de développement. Dans la seconde partie de cette série, vous verrez comment tirer parti du stockage local pour améliorer les performances des applications Web mobiles.

Commentaires

Intéressant

Intéressant effectivement dans le principe, mais ne peut plus être utilisé depuis la nouvelle version de l'API Twitter (qui nécessite des clefs d'autorisations, donc déconseillées en JS...)
Mais doit pouvoir s'adapter a bon compte pour d'autres flux qui transmettent des coordonnées...

listing 3. Application de localisation sur une carte

Bonjour et merci pour ces explications 
 
Je recontre un probléme j 'ai testé le listing 3 mais la carte ne s'affiche pas sur mon iphone3 gs 
aurais je loupé qq chose
 
Bien à vous

aucune carte s'affiche - listing 3

Bonjour, 
 
Je rencontre le même problème, un conseil ? 
 
Bonne journée 

Nouvelle application utilisant la géolocalisation

Prenez le temps de visiter ce site : http://www.atipi.tv/
Il s'agit d'une toute nouvelle application gratuite pour tablette/smartphone liée au tourisme mettant l'accent sur la qualité des informations diffusées...
 
Nous réalisons un sondage sur ce sujet, pourquoi ne pas y répondre ?
https://docs.google.com/spreadsheet/viewform?hl=fr&formkey=dDdWazRsQTljNjhjdWQ2NG5YVmhFaVE6MQ#gid=0

Intéressant

Intéressante application en effet. Merci pour le lien !

conception d'une application de geolocalisation des pharmacies

j'aime bien votre programme et j'aimerai bien que vous m'aidiez a realiser une application de geolocation des pharmacies sous plate forme android .