gnome-devel-docs 3.28.0-1 / usr / share / help / es / 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="es">
  <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>Daniel Mustieles</mal:name>
      <mal:email>daniel.mustieles@gmail.com</mal:email>
      <mal:years>2011 - 2017</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Nicolás Satragno</mal:name>
      <mal:email>nsatragno@gmail.com</mal:email>
      <mal:years>2012 - 2013</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Jorge González</mal:name>
      <mal:email>jorgegonz@svn.gnome.org</mal:email>
      <mal:years>2011</mal:years>
    </mal:credit>
  </info>

  <title>Biblioteca local geoNames</title>
  <synopsis>
    <p>En esta parte de la guía se construirá la biblioteca local geoNames usando llamadas asíncronas. En este ejemplo, la información del clima se obtiene de geonames.org y la aplicación usa los <link href="http://en.wikipedia.org/wiki/List_of_airports_by_ICAO_code:_E">códigos ICAO</link> para responder a las peticiones. Para escribir y ejecutar todos los ejemplos de código necesita un editor de texto en el que escribir el código, una terminal y GNOME 3 o superior instalado en su equipo. En esta guía se verán las siguientes partes:</p>

    <list>
      <item><p><link xref="#geonamesimports">Biblioteca local para obtener el clima</link></p></item>
      <item><p><link xref="#geonamesfunction">Crear la función «geoNames»</link></p></item>
      <item><p><link xref="#geonamesmethods">Métodos para «geoNames»</link></p></item>
      <item><p><link xref="#geonames.js">geonames.js </link></p></item>
    </list>
  </synopsis>

  <section id="geonamesimports">
  <title>Biblioteca local para obtener el clima</title>
  <p>Para esto se necesita un archivo nueva que será nuestra biblioteca local.</p>
  <code mime="application/javascript" style="numbered">
const Soup = imports.gi.Soup;
const _httpSession = new Soup.SessionAsync();
Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
</code>
  <p>En las primeras líneas se importan y se inicializan las bibliotecas que necesitamos usar en esta biblioteca local. Soup maneja todas las peticiones que se hagan con http.</p>
  </section>

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

GeoNames.prototype = {

}
</code>
  <p>Aquí se crea la función GeoNames, que manejará la obtención del clima. JavaScript permite crear funciones sencillas al principio para ampliarlas más tarde. Esto se hará dentro de las llaves de GeoNames.prototype.</p>
  </section>

  <section id="geonamesmethods">
  <title>Métodos para geoNames</title>
  <code mime="application/javascript" style="numbered">
getWeather: function(callback) {
    var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station + '&amp;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>El primer método de GeoNames es getWeather, y el segundo es getIcon. En getWeather se realiza una solicitud http con soup, se gestionan los errores y se analiza la información de la solicitud para saber que se puede usar. En getIcon simplemente se comparan los resultados obtenidos en getWeather con el selector para obtener el icono que representa el clima actual. Ahora que la biblioteca local está lista, es el momento de usarla.</p>
  </section>


  <section id="geonames.js">
  <title>geonames.js</title>
  <p>Aquí está el código completo de la biblioteca. El archivo de programa principal la llama de manera asíncrona.</p>
  <code mime="application/javascript" style="numbered">
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 + '&amp;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>