行政院環保署即時空污指標查詢 PM2.5

本範例由本年度實習生鄭秉恩設計並編寫,說明如何取得行政院環保署所提供的即時的空氣品質汙染指標資料,格式為 JSON。政府ˋ提供的空氣汙染來源:

http://opendata2.epa.gov.tw/AQI.json

您可使用 http://www.jsoneditoronline.org/ 這樣的網站幫助您更快理解 json 架構它會把 raw data 排版完成


一共有 75 個站點可供查詢。您還可以結合 Sharing 元件,將空氣品質的狀況寄發 email 或是發佈到 Facebook 喔。或者用藍牙傳給 Arduino 或樂高機器人也是有趣的專題呢!

操作方式如下

  1. 點選 [取得縣市清單]按鈕,會呼叫Web元件去爬一次上述網址取得最新資料。程式初始畫面如下

2.  點選 [選取縣市清單選取器,會開啟縣市清單讓您點選想要檢視的觀測站。請注意這是原始資料中的   而不是 County

3. 點選您想要的縣市就會顯示當地的空氣品質


Designer 頁面配置

相當簡單,記得 Web 元件是用來抓取網頁與進行 Json decode


程式碼

1.宣告的變數

把所需用到的東西宣告為0或者為一個空的清單

2.按鈕更新最新的空氣品質資料

當觸碰到按鈕時 確認再 all_city清單是否為空的,如果清單為空,就要求 web 元件去抓,否則就先清空 all_city 清單之後再資料以免重複抓取。

3.更新清單內容

當碰到清單選擇器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的表單。

  1. 主要是把label裡的文字替換成我們所要出現的數值

      City(縣市)>>select(我們選擇的城市)

      PM10    >> 數值(PM10裡的資料)

      PM2.5   >> 數值(PM2.5裡的資料)

      CO   >> 數值(CO裡的資料)

      NO   >> 數值(NO裡的資料)

      NO2     >> 數值(NO2裡的資料)

      O3   >> 數值(O3裡的資料)


曾吉弘,
2016年11月27日 下午6:11
v.1
曾吉弘,
2021年3月11日 晚上7:53
v.1