CHAPTER 18 - Create Weather Apps by Linking to Weather Information (2)

After learning how to link to weather information at the Central Weather Bureau, next, we will introduce two other methods. Although weather information from the Central Weather Bureau is much more accurate when compared to others (because it is updated almost once every 15 to 30 minutes), having to do cross-domain could still be a bit troublesome (however, making it an app eliminates the issue). We will now introduce two methods that do not involve cross-domain- Yahoo Weather and EZoApp's own weather component.

Yahoo Weather actually is a Yahoo Weather API. It is one of the most commonly seen weather programs. Even the iPhone's weather data comes directly from this source. Thus, you can imagine just how popular it is. In addition, its API does not require cross-domain, since it uses RSS data format. Therefore, as long as you can take in RSS data, convert it, and then export it, you can use it directly. However, its disadvantage is that it only updates its data once every two or three hours. Thus, its data could be less accurate during the rainy or typhoon seasons when the weather changes quickly (that's probably the main reason why sometimes it says raining on the cellphone but there is no rain).

https://developer.yahoo.com/weather/documentation.html- this is the development document that we will use. The most important one is this: "http://weather.yahooapis.com/forecastrss?w=2502265&u=c". w represents the location; u=c, is Celsius (change it to f is Fahrenheit). 2502265 is the code number of the location. This code number seems weird, since it is neither the longitude nor the latitude, nor does it seem to represent any meaning; nevertheless, I finally figured out that it is a code assigned by Yahoo Weather itself. You can look up the code numbers from Yahoo Weather. Enter the location and look at the URL, then you will see! (Weather of Kaohsiung City: https://weather.yahoo.com/taiwan/kaohsiung-city/kaohsiung-city-2306180/)

However, you still have to look it up one by one. Here is a list of codes for locations in Taiwan to make it a bit more convenient for you:

2306179 Taipei (Neihu), 2306180 Kaohsiung (Zuoying), 2306181 Taichung (Xitun), 2306182 Tainan (Anping), 2306183 Changhua (Changhua City), 2306184 Taoyuan (Zhongli), 2306185 Hsinchu (East), 2306186 Taipei (Xindian), 2306187 Hualien (Hualien City), 2306188 Keelung (Qidu), 2306189 Pingtung (Pingtung City), 2306190 Taitung (Taitung City), 2306193 Tainan (Jiali), 2306194 Taichung (Qingshui), 2306195 Changhua (Erlin), 2306198 Yilan (Yilan City), 2306199 Kaohsiung (Gangshan), 2306200 Taoyuan (Guanyin), 2306201 Changhua (Lukang), 2306202 Taoyuan (Longtan), 2306203 Tainan (Madou), 2306204 Nantou (Nantou City), 2306206 Chiayi (Budai), 2306207 Taichung (Shigang), 2306208 Yilan (Su-ao), 2306209 Taoyuan (Dayuan), 2306210 Taichung (Dajia), 2306211 New Taipei City (Tamsui), 2306212 Yunlin (Dounan), 2306213 Pingtung (Donggang), 2306214 New Taipei City (Yingge), 2306217 Tainan (Xinhua), 2306218 Taichung (Xinshe), 2306223 New Taipei City (Jinshan), 2306224 Pingtung (Fangshan), 2306227 Taitung (Guanshan), 2306228 New Taipei City (Sanzhi), 2306229 Miaoli (Sanwan), 2306231 New Taipei City (Wanli), 2306232 Tainan (Yujing), 2306243 Yilan (Nan-ao), 2306250 Yunln (Huwei ), 2306251 New Taipei City (Shuangxi), 2306254 Taoyuan International Airpoty, 2306255 Kaohsiung International Airport

After we understand this, we can now start to practice writing the code. Because Yahoo Weather uses the method of RSS to display the information, we will try out EZoApp's RSS component:

When you drag-and-drop a RSS component onto the design screen, you will see a bunch of JS code appear. The most interesting part is this section:

http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + rowNum + '&callback=?&q=' + encodeURIComponent(FEED_URL)

This is Google's API specifically used to link RSS (refer to: https://developers.google.com/feed/v1/?hl=zh-TW). Since we are putting it in an RSS component, we must make the following changes:

$(function () {
  var weather,
    rss = 'http://weather.yahooapis.com/forecastrss?w=2306180&u=c',
    url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=' + encodeURIComponent(rss);
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    error: function (e) {
      console.log('oh no');
    },
    success: function (e) {
      var weather = $(e);
      console.log(weather);
    }
  });
});

In this way, you can now successfully grab data from http://weather.yahooapis.com/forecastrss?w=2306180 without having to worry about cross-domain! (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5716292640178176)

You might have a question here- why is it that when using Yahoo Weather there is no cross-domain issue, but if I change the rss to data from the Central Weather Bureau or the government's open data, I don't get any information? (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5749637692522496)

The reason is that RSS itself can be used across domains, and Google's feed function was originally designed only for RSS. Therefore, when we feed it files that are not in RSS format, the output naturally becomes "Feed could not be loaded."

The introduction above seems long, but, actually, you just need a few lines of code to link to Yahoo Weather, then you just have to display the contents. As we did before, let us show the RSS contents on the screen first. Here we should make good use of Chrome's development tool to carefully identify whether it is an object or a matrix in order to be able to read the contents correctly. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5746221851344896)

$(function () {
  var weather, feed, title, content,
    rss = 'http://weather.yahooapis.com/forecastrss?w=2306180&u=c',
    url = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=' + encodeURIComponent(rss);
  $.ajax({
    type: "GET",
    url: url,
    dataType: "json",
    error: function (e) {
      console.log('oh no');
    },
    success: function (e) {
      weather = $(e);
      feed = weather[0].responseData.feed;
      console.log(weather);
      console.log(feed);
      title = feed.title;
      content = feed.entries[0].content;
      $('h3').append(title);
      $('.ui-content').append(content);
    }
  });
});

Basically, you are ready to link to Yahoo Weather by this point. The rest is just beautification and page layout!

Next, let us quickly introduce EZoApp's own weather component. We briefly mentioned this component earlier, but did not show how to use it. It is pretty easy to use. You just need to drag-and-drop the component onto the screen, set the location and other properties, and you are done! Let us actually give it a try. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5660940980715520)

The two methods above, and the method linking to the Central Weather Bureau in the previous chapter, are the three methods of creating weather apps by linking to weather data. It is relatively fast to use the weather component, but you need to follow the rules of the component. If you use data from the Central Weather Bureau or Yahoo Weather, you can add more variations to the apps!

Continue reading CHAPTER 19 - Create News Apps by Linking to Apple Daily RSS
Or Return to Table of Contents