[App Inventor] LASS 測站資料查詢

LASS（Location Aware Sensing System）是一套開源和公益的「環境感測器網路系統」，是一群熱情的朋友針對空氣污染所建置的系統。由於空氣品質是小範圍的變化，例如校園內與十字路口可能只差50公尺，但空氣品質應該差很多吧！LASS就是讓有意願盡一份力的朋友，都能將感測器的資訊丟上LASS server，完全是 bottom-up 的概念，在一年多的時間之內就已經是相當知名的專案了。 LASS 針對許多物聯網開發板（Arduino、Raspberry Pi、LinkIt ONE、Realtek Ameba等等）都有現成的程式碼可以套用，裝置上線之後就能在LASS空汙地圖看到各個測站的狀態。也可以購買套件包喔！

本文將說明如何使用 App Inventor 取得 LASS 各測站的資料，格式為JSON，網址為http://nrl.iis.sinica.edu.tw/LASS/last-all-airbox.json

程式說明

App功能很簡單，取得資料之後把 JSON 轉成陣列（list）放入 Listpicker，點選某個站之後會把該站的資料顯示在畫面上，並可將該測站開啟於手機的 Google Map （透過 App Inventor 的 ActivityStarter 把測站經緯度資料傳給 Google Map）

{

"gps_lat": 25.04,

"gps_num": 9,

"s_t0": 24.75,

"SiteName": "74DA3895C458",

"timestamp": "2016-11-29T09:36:32Z",

"gps_lon": 121.614,

"s_d0": 40,

"s_h0": 73,

"device_id": "74DA3895C458"

}

緯度 GPS衛星數量溫度測站名稱（可自由設定）時間戳記精度 PM2.5濃度濕度裝置ID

Designer頁面

介面排版方式沒有特別規定，本app重點元件有

web：取得指定網頁內容，並將 JSON格式轉為陣列
ActivityStarter：將測站經緯度資料傳給手機上的 Google Map 來檢視該測站位置。並設定其屬性：
- Action: android.intent.action.VIEW
- ActivityClass: com.google.android.maps.MapsActivity
- ActivityPackage: com.google.android.apps.maps

Blocks頁面

宣告一個 temp 用來儲存 JsonTextDecode 之後的陣列。按下按鈕去取得LASS JSON網頁內容。Web元件會在爬完網頁之後，呼叫 Web.GotText事件，在此我們將 reponseContent（就是網頁文字）轉為陣列之後存入 temp。完成之後會把 Screen.Title 設為OK，代表做完了。

您可使用這個網站來檢視 JSON資料，別忘了電腦不需要看排版。 http://www.jsoneditoronline.org/?url=http%3A%2F%2Fnrl.iis.sinica.edu.tw%2FLASS%2Flast-all-airbox.json

指定 ListPicker內容

點選 ListPicker 之前，把其元素（Elements）指定為temp陣列內容。由於尚未取得資料，所以在此先把 Button_Map設為無法點選，否則開啟Google Map 會有錯誤。

點選後取出相關資訊

這一段看起來很可怕，其實就是剝洋蔥而已。在此要顯示五筆資料：測站名稱、PM2.5、溫度、濕度與測站座標（經度+緯度）。以測站名稱（Sitename）來說，就是先取得 temp 這個陣列的所點選項目編號（ListPicker.SelectionIndex，點第一項就是1號）接著再抽其1號元素（[Sitename, 台北市大直國小] 這個陣列）的2號（台北市大直國小），這樣就好了，其他欄位的做法完全一樣只是編號不同而已。請參照下圖即可。最後把 Button_Map 設為可點選，代表準備好把經緯度資料傳給 Google Map了。 4.開啟Google Map 按下[Button_Map] 就會將 ActivityStarter 的DataUri 設為 “geo:0,0?q=” + Label_loc.Text，就是把測站經緯度資料傳給 Google Map，這樣就可以把該測站的位置開啟於手機的 Google Map

操作

初始畫面如下，請點選[更新資料]按鈕，完成之後會在 Screen.Title 顯示OK，代表資料都爬回來了。

接著點選[選擇站點]就可以看到各個測站的內容。請注意App Inventor 會把JsonTextDecode結果按照字母排序，而非原本定義的順序。我覺得有點多餘啦，但總之它是這樣做了。點一個喜歡的站吧！以下是三組測站的執行結果，分別是在台中南屯、加拿大與台北市河堤國小。測站名稱為自訂，所以不一定可由測站名稱看出所在地，但是透過Google Map定位就很方便囉