查詢 YouBike 站點資料
App Inventor

查詢 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 則留言

發表迴響