
查詢 YouBike 站點資料
從高雄市政府的資料開放平台,讀取 YouBike 的租賃站點即時資訊!再使用 App Inventor 的元件,顯示在 App 上。
1. 點選以下網址,進入高市政府的 YouBike 公開資料。
高雄YouBike2.0公共自行車租賃站即時資訊 – 資料集 – 高雄市政府資料開放 (kcg.gov.tw)

2. 點選預覽按鈕,選擇前往存取資源,把網址列的網址先複製到記事本。

3. 新增一個 Inventor 專案,需要使用到的元件如下:
搜尋按鈕、下拉式選單、清單選擇器、標籤、對話框和網路元件

4. 切換到程式設計,首先拖拉四個變數,還有當搜尋按鈕點選時的方塊。

網路元件的網址設為,剛剛複製到記事本的那個網址。
5. 接著拖拉當網路元件取得文字時的方塊,如下:

先拉一個可傳值的程序方塊,取名為解析資料,此資料格式為 JSON,所以傳過去的資料,要先用 JSON 解碼方塊。
6. 再來,我們先透過以下網站,來看看此 JSON 的格式,請點擊以下網站,並點選 JSON Viewer,然後選擇中間的 Load Url 按鈕,把 YouBike 資料的網址輸入後,按 Load。
Free Online Tools For Developers – to Beautify, Validate, Minify, Analyse, Convert JSON, XML, JavaScript, CSS, HTML, Excel (codebeautify.org)

7. 從右邊的區域,我們可以看到,有六個鍵值,而我們要的資料在 data 底下。

data 底下的 updated_at 是資料更新時間、retVal 存放各個站點的資料,要讀取這些資料需要使用在鍵值找關鍵字的方塊,而在各個站點資料那裡,就用迴圈清單一個一個讀取、存放至變數。
8. 撰寫解析資料方塊的內容,首先清空變數資料,並設定更新時間的標籤如下:

從最外層資料開始,用鍵值找關鍵字的方塊,慢慢往下搜尋。
9. 拖拉清單迴圈方塊,要放的清單就是找 data 底下的 retVal。

10. 把各個租賃站的一些資料存到變數

要存放的資料分別為:
sna | 場站名稱 |
sarea | 行政區 |
ar | 地址 |
tot | 總車位 |
sbi | 可借車輛 |
bemp | 可還車輛 |
lat | 緯度 |
lng | 經度 |
經緯度可以搭配地圖使用 (App Inventor 導航元件簡易應用),再運用位置感測器,就可以做一個簡易版的導航了!
11. 設定兩個元件的元素字串的變數

元素字串的各個資料間要用逗號隔開
清單元素字串,要設定為各個站點的名稱,但因為每個站點名稱前都有個「YouBike2.0_」,整體名稱看起來太長了!所以用取代的方塊,把 YouBike2.0_ 去掉。
下拉式選單的元素字串,要設定為行政區的名稱,但是我們要先檢查,行政區是不是已經存在元素字串的變數裡了!?如果沒有檢查,資料就會重複很多,例如,假設鼓山區有九個站點,這個變數就會有九筆鼓山區。
12. 設定元素字串,將方塊放在清單迴圈方塊的下面。

解析資料方塊:

13. 接著撰寫當下拉式選單,選完行政區後的方塊如下:

每當選擇一個行政區,就要把變數先清空,因為要篩選行政區的站點,所以清單顯示器的元素字串要重新設定,裡面主要是判斷,各個站點的行政區,是否跟我們選擇的一樣,是的話就把站點名稱加到元素字串變數。
14. 最後,當清單顯示器選擇完成的方塊如下:

用清單迴圈方塊一筆一筆尋找,找到後將資料顯示給標籤,記得找完後要 break 跳出迴圈。
至此,整個 App 已撰寫完畢!
App 完整程式碼:

App Inventor 專案 aia 檔案下載
App 執行範例:
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊


7 則留言
樂咩
我下載了你的aia檔,打開以後他顯示 無法正確加載代碼,程式那邊整個亂掉了。
JamesBang
你好!會發生這種情況,我想應該是近期,App Inventor 更新的關係
「http://appinventor.mit.edu/ai2/ReleaseNotes.html」
我剛剛開啟專案,也是顯示「无法正确加载代码」,程式方塊基本上都不見了。不過我把頁面改成英文版後,就又恢復正常了!你可以試試看,如果還是不行可以來留言,我用英文版重新做一次 App 後,再重新上傳。
樂咩
可以了 非常感謝
JamesBang
小事一件 😎
樂咩
我發現11.的 檢查文字…是否包含字串…
這串被中文版的inventor被刪除了(英文版的還有)
請問有甚麼其他的替代方法嗎
JamesBang
可以用 可回傳值的副程式方塊,然後帶入兩個參數,分別是「下拉式字串元素字串」和「各個租賃站資訊找 sarea」,然後副程式裡,對「下拉式字串元素字串」用分隔文字方塊 (符號用逗號) 拆開,給清單迴圈,然後再一個一個跟 sarea 對比,如果已有資料就回傳 True。
晚點我如果有空,再寫一次更新上來。
JamesBang
剛剛發現,你切換成簡體中文就可以正常顯示了!😂