本範例由本年度實習生鄭秉恩設計並編寫,說明如何取得行政院環保署所提供的即時的空氣品質汙染指標資料,格式為 JSON。
http://opendata.epa.gov.tw/ws/Data/REWXQA/?$orderby=SiteName&$skip=0&$top=1000&format=json
您可使用 http://www.jsoneditoronline.org/ 這樣的網站幫助您更快理解 json 架構,它會把 raw data 排版完成
aia 原始碼下載請點我
一共有 75 個站點可供查詢。您還可以結合 Sharing 元件,將空氣品質的狀況寄發 email 或是發佈到 Facebook 喔。或者用藍牙傳給 Arduino 或樂高機器人也是有趣的專題呢
操作方式如下
- 點選 [取得縣市清單]按鈕,會呼叫Web元件去爬一次上述網址取得最新資料。程式初始畫面如下
2. 點選 [選取縣市] 清單選取器,會開啟縣市清單讓您點選想要檢視的觀測站。請注意這是原始資料中的 而不是 County。
3. 點選您想要的縣市就會顯示當地的空氣品質
Designer 頁面配置
相當簡單,記得 Web 元件是用來抓取網頁與進行 Json decode
程式碼
1.宣告的變數
把所需用到的東西宣告為0或者為一個空的清單
2.按鈕更新最新的空氣品質資料
當觸碰到按鈕時 確認再 all_city清單是否為空的,假如是去抓web的資料,假如不是就清空all_city的資料並抓取web的資料。
當碰到”清單選擇器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的表單。
- 主要是把label裡的文字替換成我們所要出現的數值
City(縣市)>>select(我們選擇的城市)
PM10 >> 數值(PM10裡的資料)
PM2.5 >> 數值(PM2.5裡的資料)
CO >> 數值(CO裡的資料)
NO >> 數值(NO裡的資料)
NO2 >> 數值(NO2裡的資料)
O3 >> 數值(O3裡的資料)