iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
3

第一個 web API project ,就先從最簡單的天氣 API 做起吧。

在 ProgrammableWeb 裡面,天氣 API 是最受歡迎的類別之一。

如果因為 API 太多,覺得無從選起,可以看看 Summary Tab 裡面

有個最受歡迎 API 的列表:

Weather Channel 跟 Yahoo Weather 好像是受到許多人歡迎的兩個 API , 我兩個都試了。但在嘗試使用 Weather Channel 的時候,註冊之後一直沒辦法登入取得 API Key , Yahoo Weather 則是因為 Documentation 讓我有點困惑,所以就放棄而選用了 OpenWeatherMap 。

src: http://openweathermap.org/api

OpenWeatherMap 有提供各種不同天氣資訊,從當下天氣狀況到每段時間的天氣預測都有。不過,我做這個天氣 App 的目的,主要是練習 Web API 的使用,只要能夠接通 API 就好。所以這個最基本的天氣 APP 只會有一個功能:顯示台北當下的天氣狀況。

src: http://openweathermap.org/appid

想要使用 Open Weather Map 的API 必須申請帳號來取得 API Key 。根據 How to start 頁面的說明,一個 API Call 的連結是這樣的:

API call:
http://api.openweathermap.org/data/2.5/forecast?id=524901&APPID={APIKEY}

在取得 API Key 之後把裡面的 { APIKEY } 換成你申請帳號所得到的 Key ,這個連結就可以拿來使用了。

在上面兩個頁面裡,OpenWeatherMap 都提醒說啟用 API 需要10分鐘左右的時間,但就我使用的經驗來看,似乎更長一點。所以如果得到 API 之後立刻放進自己的 code 裡面而出現錯誤的話,很可能不是自己這邊的問題而是因為 API 還尚未啟用完成。

現在我們得到了 API ,建立一個新的 HTML 檔案,
在 裡面 放上一個 id = “weather” 的 tag` , 然後在 裡面放上一個基本的 XHR object 的 function 。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
</head>
<body>
  <div id="weather"></div>
  <script>
  
    function makeRequest() {
      xhr = new XMLHttpRequest();
      xhr.onload= function() {
        // 這邊處理傳回來的東西
      }
      xhr.open('GET','https://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=9c39fa3ce9d953fdd507d7d9f77093ef', true )  
      xhr.send()
      }
      makeRequest();
  </script>
</body>
</html>

為了先搞清楚會拿到什麼樣的 Response ,我在 onload method 裡面把 responseText ,也就是傳回來的值,log 出來:

      xhr.onload= function() {
        // 這邊處理傳回來的東西
        console.log(this.responseText)
      }

把此 HTML 檔案在瀏覽器裡面開啟,然後打開 Console 就可以看到以下畫面:

如果可以看到這個畫面而不是 error 的話,就表示 API 有接上了!
但好像有點怪怪的? 此時如果在 Console 裡面輸入 console.log(typeof(xhr.responseText));
就會發現傳回來的東西是字串,所以為了要 access 裡面 property 的值,要把 string 轉回 object 。
宣告一個叫做 response 的 variable 來放這個 object 。

      xhr.onload= function() {
        var response = JSON.parse(this.responseText);
        console.log(response);
      }

這樣一來,我們就可以用 bracket notation 或 dot notaion的方法把我們想要的資訊挖出來。一個天氣 App 至少要顯示所在位置、溫度、天氣狀況吧。在把 response object打開來翻一翻之後,可以看到 city.name 是 “Moscow” 莫斯科,city.country 是”RU” 俄羅斯,等等再改成台北。
list 裡面是一個放了40個 object 的 array ,每個 object 裡面是到不同時間點的天氣狀況,我們拿第一個出來用就好。
天氣狀況跟氣溫都在 list 裡面,氣溫、氣壓、濕度等等的資訊都在 main 這個 property裡面,天氣狀況則是在 weather 裡面。

現在整理一下我們想要的資訊的取得路徑:

  • 城市:response.city.name
  • 國家:response.city.country
  • 天氣狀況:response.list[0].weather[0].main
  • 氣溫:response.list[0].main.temp

只要把上面這些東西放進 HTML 裡面,就可以讓天氣資訊顯示在網頁上面了

      xhr.onload= function() {
        var response = JSON.parse(this.responseText);
        var city = response.city.name + ", " +response.city.country;
        var weatherTitle = response.list[0].weather[0].main;
        var temp = response.list[0].main.temp + "°";
        
        var weatherContainer = document.querySelector('#weather')
        weatherContainer.innerHTML= city + "<br/>"+ weatherTitle + "<br/>"+temp ;
      }

不過現在城市所在地還是在莫斯科、溫度單位也是華氏,我們來把他分別改成台北跟攝氏。仔細看 API 的 Documentation , 可以用兩種方式選擇城市,在api.openweathermap.org/data/2.5/weather後面加上

  • ?q=城市名,國家縮寫 (舉例: ?q=taipei,tw)
  • ?id=城市id (舉例:?id=1668341)

想改溫度單位就在 api 上面加上

  • 華氏 units=imperial
  • 攝氏 units=metric

想改語言設定可以加上

  • lang=zh-tw

以上不同的設定要用&連接起來,所以我們的 API 連結現在長這樣:

https://api.openweathermap.org/data/2.5/forecast?q=Taipei,tw&APPID=9c39fa3ce9d953fdd507d7d9f77093ef&lang=zh_tw&units=metric

不過我發現這個 API 並沒有中文化的很完全,所以還是設定成英文吧….

醜陋的成品:

附上 Codepen Demo
以上是過於詳盡的第一個 API 教學。


上一篇
[30apis] Day 0 : 前言 + 基礎XHR
下一篇
[30apis] Day 2 : Google Map Geolocation API
系列文
我每天都接一個API30

尚未有邦友留言

立即登入留言