1<?xml version='1.0' encoding='UTF-8'?>
2<page xmlns="http://projectmallard.org/1.0/"
3      xmlns:its="http://www.w3.org/2005/11/its"
4      type="topic" style="task"
5      id="weatherGeonames.js">
6  <info>
7    <link type="guide" xref="weatherApp.js#main"/>
8    <revision version="0.1" date="2012-03-09" status="stub"/>
9
10    <credit type="author copyright">
11      <name>Susanna Huhtanen</name>
12      <email its:translate="no">ihmis.suski@gmail.com</email>
13      <years>2012</years>
14    </credit>
15
16    <desc></desc>
17  </info>
18
19  <title>Local library geoNames</title>
20  <synopsis>
21    <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>
22
23    <list>
24      <item><p> <link xref="#geonamesimports">Local library for getting the weather</link></p></item>
25      <item><p> <link xref="#geonamesfunction">Creating function geoNames</link></p></item>
26      <item><p> <link xref="#geonamesmethods">Methods for geoNames</link></p></item>
27      <item><p> <link xref="#geonames.js">geonames.js </link></p></item>
28    </list>
29  </synopsis>
30
31  <section id="geonamesimports">
32  <title>Local library for getting the weather</title>
33  <p>For this we need a new file that will be our local library.</p>
34  <code mime="application/javascript" style="numbered"><![CDATA[
35const Soup = imports.gi.Soup;
36const _httpSession = new Soup.SessionAsync();
37Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
38]]></code>
39  <p>In the first lines we'll import and initialize the libraries we need to use in this local library. Soup handles all the requests we have to make with http.</p>
40  </section>
41
42  <section id="geonamesfunction">
43  <title>Creating function GeoNames</title>
44  <code mime="application/javascript" style="numbered"><![CDATA[
45function GeoNames(station) {
46  this.station = station;
47}
48
49GeoNames.prototype = {
50
51}
52]]></code>
53  <p>Here we create the function GeoNames that will handle getting weather for us. JavaScript allows us to create functions that have little inside at first and later expand them. This will be done inside the GeoNames.prototype curly braces{}</p>
54  </section>
55
56  <section id="geonamesmethods">
57  <title>Methods for GeoNames</title>
58  <code mime="application/javascript" style="numbered"><![CDATA[
59getWeather: function(callback) {
60    var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station + '&username=demo');
61    _httpSession.queue_message(request, function(_httpSession, message) {
62      if (message.status_code !== 200) {
63        callback(message.status_code, null);
64        return;
65      }
66      var weatherJSON = request.response_body.data;
67      var weather = JSON.parse(weatherJSON);
68      callback(null, weather);
69      });
70},
71
72getIcon: function(weather){
73    switch (weather.weatherObservation.weatherCondition){
74    case "drizzle":
75    case "light showers rain":
76    case "light rain":
77      return "weather-showers-scattered.svg";
78    case "rain":
79      return "weather-showers.svg";
80    case "light snow":
81    case "snow grains":
82      return "weather-snow.svg";
83    }
84    switch (weather.weatherObservation.clouds){
85      case "few clouds":
86      case "scattered clouds":
87        return "weather-few-clouds.svg";
88      case "clear sky":
89        return "weather-clear.svg"
90      case "broken clouds":
91      case "overcast":
92        return "weather-overcast.svg";
93    }
94    return "weather-fog.svg";
95}
96]]></code>
97  <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>
98  </section>
99
100
101  <section id ="geonames.js">
102  <title>geonames.js</title>
103  <p>Here is the entire code for our local library. The main program file calls this asynchronously.</p>
104  <code mime="application/javascript" style="numbered"><![CDATA[
105const Soup = imports.gi.Soup;
106const _httpSession = new Soup.SessionAsync();
107Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
108
109function GeoNames(station) {
110  this.station = station;
111}
112
113GeoNames.prototype = {
114  getWeather: function(callback) {
115    var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station + '&username=demo');
116    _httpSession.queue_message(request, function(_httpSession, message) {
117      if (message.status_code !== 200) {
118        callback(message.status_code, null);
119        return;
120      }
121      var weatherJSON = request.response_body.data;
122      var weather = JSON.parse(weatherJSON);
123      callback(null, weather);
124      });
125    },
126
127  getIcon: function(weather){
128    switch (weather.weatherObservation.weatherCondition){
129    case "drizzle":
130    case "light showers rain":
131    case "light rain":
132      return "weather-showers-scattered.svg";
133    case "rain":
134      return "weather-showers.svg";
135    case "light snow":
136    case "snow grains":
137      return "weather-snow.svg";
138    }
139    switch (weather.weatherObservation.clouds){
140      case "few clouds":
141      case "scattered clouds":
142        return "weather-few-clouds.svg";
143      case "clear sky":
144        return "weather-clear.svg"
145      case "broken clouds":
146      case "overcast":
147        return "weather-overcast.svg";
148    }
149    return "weather-fog.svg";
150    }
151}
152}  ]]></code>
153  </section>
154
155</page>
156