gnome-devel-docs 3.8.1-1 / usr / share / help / fr / gnome-devel-demos / weatherGeonames.js.page

<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" style="task" id="weatherGeonames.js" xml:lang="fr">
  <info>
    <link type="guide" xref="weatherApp.js#main"/>
    <revision version="0.1" date="2012-03-09" status="stub"/>

    <credit type="author copyright">
      <name>Susanna Huhtanen</name>
      <email>ihmis.suski@gmail.com</email>
      <years>2012</years>
    </credit>

    <desc/>
  </info>

  <title>Bibliothèque locale geoNames</title>
  <synopsis>
    <p>In this part of the guide we'll construct the local library geoNames using asynchronous calls. Weather information in this example is fetched from geonames.org and the application is using the <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">ICAO codes </link> to place your weather request. To write and run all the code examples yourself, you need an editor to write code in, Terminal and GNOME 3 or higher installed into your computer. In this guide we'll go through the following parts:</p>

    <list>
      <item><p> <link xref="#geonamesimports">Local library for getting the weather</link></p></item>
      <item><p> <link xref="#geonamesfunction">Creating function geoNames</link></p></item>
      <item><p> <link xref="#geonamesmethods">Methods for geoNames</link></p></item>
      <item><p> <link xref="#geonames.js">geonames.js </link></p></item>
    </list>
  </synopsis>

  <section id="geonamesimports">
  <title>Bibliothèque locale pour obtenir la météo</title>
  <p>Pour cela, nous avons besoin d'un nouveau fichier qui sera notre bibliothèque locale.</p>
  <code mime="application/javascript" style="numbered"><![CDATA[
const Soup = imports.gi.Soup;
const _httpSession = new Soup.SessionAsync();
Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
]]></code>
  <p>Dès les premières lignes, nous importons et initialisons les bibliothèques dont nous avons besoin dans cette bibliothèque locale. « Soup » prend en charge toutes les requêtes que nous devons faire avec http.</p>
  </section>

  <section id="geonamesfunction">
  <title>Création de la fonction GeoNames</title>
  <code mime="application/javascript" style="numbered"><![CDATA[
function GeoNames(station) {
  this.station = station;
}

GeoNames.prototype = {

}
]]></code>
  <p>Ici, nous créons la fonction GeoNames qui prendra en charge l'obtention de la météo pour nous. Le JavaScript nous permet de créer des fonctions qui, au départ contiennent peu de code et de les étendre ensuite. Cela se fait à l'intérieur des accolades {} de GeoNames.prototype.</p>
  </section>

  <section id="geonamesmethods">
  <title>Méthodes pour GeoNames</title>
  <code mime="application/javascript" style="numbered"><![CDATA[
getWeather: function(callback) {
    var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station + '&username=demo');
    _httpSession.queue_message(request, function(_httpSession, message) {
      if (message.status_code !== 200) {
        callback(message.status_code, null);
        return;
      }
      var weatherJSON = request.response_body.data;
      var weather = JSON.parse(weatherJSON);
      callback(null, weather);
      });
},

getIcon: function(weather){
    switch (weather.weatherObservation.weatherCondition){
    case "drizzle":
    case "light showers rain":
    case "light rain":
      return "weather-showers-scattered.svg";
    case "rain":
      return "weather-showers.svg";
    case "light snow":
    case "snow grains":
      return "weather-snow.svg";
    }
    switch (weather.weatherObservation.clouds){
      case "few clouds":
      case "scattered clouds":
        return "weather-few-clouds.svg";
      case "clear sky":
        return "weather-clear.svg"
      case "broken clouds":
      case "overcast":
        return "weather-overcast.svg";
    }
    return "weather-fog.svg";
}
]]></code>
  <p>La première méthode de GeoNames est getWeather et la seconde getIcon. Dans getWeather, une requête http est effectuée avec « soup », nous prenons en charge les erreurs puis analysons les informations à partir de la requête vers une forme que nous pouvons utiliser. Dans getIcon, vous comparons tout simplement les résultats obtenus avec getWeather à l'aide de l'instruction switch afin d'obtenir l'icône correspondant au temps actuel. Notre bibliothèque locale est prête et nous pouvons maintenant l'utiliser.</p>
  </section>


  <section id="geonames.js">
  <title>geonames.js</title>
  <p>Voici le code complet pour notre bibliothèque locale. Le fichier principal du programme l'appelle de manière asynchrone.</p>
  <code mime="application/javascript" style="numbered"><![CDATA[
const Soup = imports.gi.Soup;
const _httpSession = new Soup.SessionAsync();
Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());

function GeoNames(station) {
  this.station = station;
}

GeoNames.prototype = {
  getWeather: function(callback) {
    var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station + '&username=demo');
    _httpSession.queue_message(request, function(_httpSession, message) {
      if (message.status_code !== 200) {
        callback(message.status_code, null);
        return;
      }
      var weatherJSON = request.response_body.data;
      var weather = JSON.parse(weatherJSON);
      callback(null, weather);
      });
    },

  getIcon: function(weather){
    switch (weather.weatherObservation.weatherCondition){
    case "drizzle":
    case "light showers rain":
    case "light rain":
      return "weather-showers-scattered.svg";
    case "rain":
      return "weather-showers.svg";
    case "light snow":
    case "snow grains":
      return "weather-snow.svg";
    }
    switch (weather.weatherObservation.clouds){
      case "few clouds":
      case "scattered clouds":
        return "weather-few-clouds.svg";
      case "clear sky":
        return "weather-clear.svg"
      case "broken clouds":
      case "overcast":
        return "weather-overcast.svg";
    }
    return "weather-fog.svg";
    }
}
}  ]]></code>
  </section>

</page>