本範例由本年度實習生鄭秉恩設計並編寫,說明如何取得行政院環保署所提供的即時的空氣品質汙染指標資料,格式為 JSON。政府ˋ提供的空氣汙染來源: http://opendata2.epa.gov.tw/AQI.json 您可使用 http://www.jsoneditoronline.org/ 這樣的網站幫助您更快理解 json 架構, 它會把 raw data 排版完成 一共有 75 個站點可供查詢。您還可以結合 Sharing 元件,將空氣品質的狀況寄發 email 或是發佈到 Facebook 喔。或者用藍牙傳給 Arduino 或樂高機器人也是有趣的專題呢! 操作方式如下
2. 點選 [選取縣市] 清單選取器,會開啟縣市清單讓您點選想要檢視的觀測站。請注意這是原始資料中的 而不是 County。 3. 點選您想要的縣市就會顯示當地的空氣品質 Designer 頁面配置 相當簡單,記得 Web 元件是用來抓取網頁與進行 Json decode | 程式碼 1.宣告的變數 把所需用到的東西宣告為0或者為一個空的清單 2.按鈕更新最新的空氣品質資料 當觸碰到按鈕時 確認再 all_city清單是否為空的,如果清單為空,就要求 web 元件去抓,否則就先清空 all_city 清單之後再抓資料以免重複抓取。 當碰到”清單選擇器1”時將elements裡的東西設為all_city裡面的資料(講白了就是把web裡的資料料抓到表單裡),並在執行之後把select(選取項) & city_num(選取向索引)在抓取web資料 4.解析網頁資料,並根據所點選的觀測站來顯示該站的縣市的空氣品質 1.從web裡抓到資料丟到all_city之後建立一個清單 2.抓取web 中的json 並把json轉換成jsontext(如下圖) 3. 確定清單長度並開始抓取資料 註1. 這裡的2 2的意思是第2個第2列(如下圖) 4.抓取PM10的資料 它在上上圖中的第9個並丟入 city_num的表單。 5.抓取PM2.5的資料 它在上上圖中的第10個並丟入 city_num的表單。 6.抓取CO的資料 它在上上圖中的第1個並丟入 city_num的表單。 7.抓取NO的資料 它在上上圖中的第5個並丟入 city_num的表單。 8.抓取NO2的資料 它在上上圖中的第6個並丟入 city_num的表單。 9.抓取O3的資料 它在上上圖中的第8個並丟入 city_num的表單。
City(縣市)>>select(我們選擇的城市) PM10 >> 數值(PM10裡的資料) PM2.5 >> 數值(PM2.5裡的資料) CO >> 數值(CO裡的資料) NO >> 數值(NO裡的資料) NO2 >> 數值(NO2裡的資料) O3 >> 數值(O3裡的資料) |