OpenWeatherMap天氣API實例參考 By Chiaroluna

　　話說大魯蛇這幾天都在找「API」的應用實例，做為設計「號碼凶吉測算」APP的參考，總算皇天不負苦心人，終於在作者Chiaroluna的「[30apis] Day 1 : OpenWeatherMap」這篇文章中，找到了答案。

　　作者Chiaroluna做這個天氣App的目的，主要是練習Web API的使用，只要能夠接通OpenWeatherMap的API就好。所以這個最基本的天氣APP只會有一個功能：「顯示台北當下的天氣狀況」(Demo示範請點我)。

　　而大魯蛇做號碼凶吉測算App的目的，也只是要能夠接通好友Jason開發的命理資料庫API就好。號碼凶吉測算App也只會有一個功能：「顯示當事人輸入號碼的吉凶狀況」，不論輸入的是電話號碼還是車牌號碼。

　　大魯蛇找到這個實例之後，趕緊和好友聯絡，確認這個範例的實用參考價值。好友說差不多就是這樣，就等他請工程師準備好API的規格說明文件，以及生成、驗證API Key的機制，後面就可以正式撰寫程式來做實做了。

　　不過，這個範例還缺少一個功能，那就是使用者「輸入號碼」的部分，所以這需要我自己去找實例來補齊。基本上，他認為應該不會很困難，要我再加一把勁，如果Web API 能做的到，那 APP 就不遠了！

　　此時大魯蛇臉上三條線，事情有這麼簡單就好了！

　　不管怎麼說，既然有現成的範例可以參考，總比瞎子摸象要來的好。基本上，大魯蛇就等好友把API相關前置作業準備妥當，接下來就會先做一個Web API的應用，然後嵌入到大魯蛇的網站裡頭，提供給網友免費試用「號碼吉凶測算」的功能。

　　等到一切都沒有問題之後，大魯蛇再將Web API設計成APP，並加入AdMob廣告功能，最後再上架到Google Play Store，進行廣告營利創收的可能性探索。

　　所謂「關關難過關關過」，大魯蛇是程式設計素人，在沒有人可以請教之下，我也只能自己硬著頭皮往前走。目前還算順利，大魯蛇希望早日能將成果端出來，讓網友們可以免費試用這個「號碼測吉凶」功能，看看究竟有沒有市場需求存在。

　　以下，就是大魯蛇的實例模仿試作。

一、註冊OpenWeather，申請API key。

二、修改作者程式碼，改城市為Tainan並替換成大魯蛇的API Key，其餘不變。

三、程式執行如下。

　　程式在CodePen執行良好，但大魯蛇試著拷貝程式碼到文章裡，不論區塊是用自定義HTML、還是程式碼嵌入(下面範例即是)，但都沒有辦法正確的顯示結果。如果有程式高手，也請您指點一下大魯蛇問題是出在哪裡？

　@只貼JS程式碼

function makeRequest() {
  xhr = new XMLHttpRequest();

  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;
  };
  xhr.open(
    "GET",
    "https://api.openweathermap.org/data/2.5/forecast?q=Tainan,tw&APPID=d79b2310e9aa9004a8ac3066ddac6d5a&lang=zh_tw&units=metric",
    true
  );
  xhr.send();
}
makeRequest();

　@自定義HTML