gnome-devel-docs 3.28.0-1 / usr / share / help / gl / gnome-devel-demos / weatherGeonames.js.page

<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" style="task" id="weatherGeonames.js" xml:lang="gl">
  <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 its:translate="no">ihmis.suski@gmail.com</email>
      <years>2012</years>
    </credit>

    <desc/>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Fran Dieguez</mal:name>
      <mal:email>frandieguez@gnome.org</mal:email>
      <mal:years>2012-2013.</mal:years>
    </mal:credit>
  </info>

  <title>Biblioteca de geoNames local</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>Biblioteca global para obter o tempo</title>
  <p>Para isto precisamos un novo ficheiro que será a nosa biblioteca local.</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>Nas primeiras liñas precisamos importar e inicializar as bibliotecas que precisamos usar nesta biblioteca local. Soup xestiona todas as solicitudes que facemos con http.</p>
  </section>

  <section id="geonamesfunction">
  <title>Crear a función GeoNames</title>
  <code mime="application/javascript" style="numbered"><![CDATA[
function GeoNames(station) {
  this.station = station;
}

GeoNames.prototype = {

}
]]></code>
  <p>Aquí podemos crear a función GeoNames que xestionará a recollida do tempo por nós. JavaScript permítenos crear as funcións que terán pouco dentro delas ao principio pero que crecerán máis tarde. Isto farase dentro das chaves {} de GeoNames.prototype</p>
  </section>

  <section id="geonamesmethods">
  <title>Métodos para 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>The first method for GeoNames is getWeather and the second getIcon. In getWeather we make a http request with soup, handle errors and then parse the information from the request to form we can use it. In getIcon we simply compare the results we got from getWeather to the switch we have in order to get the icon matching current weather. Now that we have our local library ready, it's time to make use of it.</p>
  </section>


  <section id="geonames.js">
  <title>geonames.js</title>
  <p>Aquí está o código completo para a nosa biblioteca global. O ficheiro do programa principal chamará a isto de forma asíncrona.</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>