
使用 App Inventor 爬取 i郵箱據點
最近開始有在使用 i郵箱 寄東西,因為運費很便宜,所以除了貨到付款外,基本上只要不是易碎品,我都會選擇寄 i郵箱;上次經過一間超市,發現它門口旁也有一台 i郵箱,我才知道原來不是只有郵局才有 i郵箱,後來就想到,應該可以用 App Inventor 做一個搜尋 i郵箱 的 App,在網路上查了一下,果然有公開資料可以用,所以這次就來教如何爬取 i郵箱;跟之前找 YouBike 不同的是,這次資料比較好爬 (格式簡單很多),而且這次不將資料個別存到清單,直接用爬取到的二維清單來做資料的解析!
2022/07/05 更新
1. 因為七月一號測試發現 JSON 的資料不見了!所以 App 在下載資料時會跳出錯誤
更新版文章和 aia 檔案目前已更新
2. 剛剛發現 JSON 資料格式已新增回來,此 App 能正常執行。
1. 先到政府資料開放平台找到「i郵箱據點」
點選資料資源下載網址旁的「檢視資料」

右鍵點選在多元格式參考資料旁的「JSON」,將網址先複製到記事本。
https://quality.data.gov.tw/dq_download_json.php?nid=52779&md5_url=fb1f60aa1ebe91e977a7e0e02fe89571

2. 進到 Code Beautify 的 JSON Viewer
點選網頁中間的 Load Url 按鈕,輸入剛剛複製的網址後,再按 Load 按鈕。

然後就可以在網頁右方看到資料格式

這個資料的最外層就是陣列,裡面的每一筆資料,就是存放 i郵箱 的資訊,這樣的格式最好爬了!直接用清單迴圈和鍵值找關鍵字方塊就可以了。
3. 開啟 App Inventor 並新增一個專案 iPost
所需元件如下:
主要可視元件:按鈕 x 2、下拉式選單 x 2、清單顯示器 x 1、標籤 x 1
非可視元件:網路 x 1、對話框 x 1、Activity x 1


來簡單介紹一下此 App
點按鈕下載資料
選擇要查詢的縣市、區域和 i郵箱
顯示查詢結果
點導航按鈕,開啟 Google 地圖 導航。
好了之後切換到程式設計
新增以下變數方塊:


別被這麼多變數嚇到了!全部都很簡單,往下實作時再一併介紹各個變數的用途。
增加下載按鈕被點選的方塊,實作內容如下圖:
先判斷變數回應程式碼是否為 200,否的話就設定網路元件的網址,並執行 GET 請求,取得資料。

接著拖拉當網路元件取得文字的方塊,實作內容如下圖:
此處會用到兩個副程式方塊,先拉個空的擺著。
P.S. 「縣市字串」副程式是一個可傳值過去,且可回傳值的副程式喔~

程式解析:
當取得文字後,我們判斷回應碼是否為 200,200 就是成功。
記得回傳的回應碼要先設定給變數回應程式碼喔~
然後變數 datas 存放,用 JSON 解碼方塊解碼後的回應內容。
記得剛剛在 CodeBeautify 看到的格式嗎?最外層是迴圈,所以我們用一個清單迴圈,旁邊放 datas,它有 2398 筆資料,所以迴圈會跑 2398 次。
在迴圈裡我們要設定「縣市下拉式選單」的內容,但因為我們的縣市數量沒有那麼多,所以要用判斷方塊,判斷縣市清單裡,是否已有存在的資料,例如高雄市已經加進去了,那麼就不要再重複加入。
副程式「縣市字串」會回傳縣市的名稱
變數「名稱」會存放所有的 i郵箱的名稱,也就是一開始還沒有選擇縣市和區域時,預設會顯示所有 i郵箱名稱給使用者看。
最後就是設定清單的元素
接著實作剛剛用到的兩個副程式,實作內容如下圖:


接下來是當我們選完要查詢的縣市後,要執行的功能,實作內容如下圖:
上面如果還沒消化完,就先去運個動讓腦袋舒緩一下,回來再繼續。
副程式「鄉鎮市區字串」先拉個空的吧

程式解析
如果仔細看的話就會發現,這段程式和網路元件取得文字那裡非常像,也是用一個清單迴圈依序去判斷,而這裡要判斷的是,data 的縣市是否為我們所選擇的,如果是的話,就將 data 的鄉鎮市區資料存到變數「鄉鎮市區」,當然也要判斷,這個鄉鎮市區的資料是否已存在變數裡,例如已經將高雄市的鼓山區加到變數裡,那麼再次搜尋到有鼓山區的 i郵箱 時,就不要再把鼓山區重複加入。
副程式「鄉鎮市區字串」會回傳鄉鎮市區的名稱,例如:鼓山區、那瑪夏區…… 等等
最後也是要設定清單的元素
P.S. 變數「名稱」是要設定給元件「i郵箱清單」的,當選取到不同的縣市後,因為顯示的名稱會不同,所以要先清空,不然資料就會一直累加。
接著是副程式「鄉鎮市區字串」,實作內容如下:

程式解析
老師,為什麼不要像副程式「縣市字串」一樣擷取就好?
Ans:因為鄉鎮市區不是固定都三個字的,像高雄的那瑪夏區啦、台中的東區…… 等等,都不是固定三個字的。
在這個副程式裡,拖拉一個區域變數 String,這是我們要回傳的資料,鄉鎮市區的名稱會給這個變數。
String 初始值的資料為:data 的地址的第四個字開始,提取長度為 4 的字串。

Ans:因為前面三個字固定是縣市名稱,鄉鎮市區名稱從第四個字開始,長度我最多只看過四個的,沒印象有五個字的!?
再來要重新設定字串 String
因為剛剛已經擷取過一次了!所以現在 String 的第一個字是我們要的沒錯,只是不知道要擷取多長而已?
所以我們用條件判斷,「鄉」和「區」的判斷方式是一樣的,先判斷有沒有在字串 String 裡,有的話再用找文字位置的方塊即可,例如資料是「東區」的話,找到的文字位置為 2,剛好就是要擷取 2 的長度就好、而如果是「那瑪夏區」的話,找到的文字位置為 4,當然擷取長度就是 4,而剩下的「鎮」和「市」,我印象中都是三個字,所以剩下的就不用判斷了,直接回傳 3 就好。
再來是當鄉鎮市區的選單選擇完成,實作內容如下:
如果以上都看得懂的話,那這裡就完全沒問題了~~
讓我懶惰一點,這一段跳過講解吧 哈哈哈

再來是當 i郵箱清單 選擇完成後,要執行的功能,實作內容如下:
這一段也超簡單,要比對 data 的名稱是否和我們選中的一樣,是的話就設定座標給經緯度變數,底下查詢結果的文字設定有點長,懶的話跳過也沒關係,最重要的是它底下的「中斷」,這是中斷迴圈用的,如果有找到資料,就要中斷迴圈不要再繼續執行下去,雖然不中斷也能正常執行,因為條件不成立也不會改變已設定好的值,只是這樣迴圈就會完整跑完才結束程式。
妳想想喔,假設妳抓的資料剛好在第一筆,那妳比對完後不中斷,後面就還要再條件判斷兩千多次……

這樣就能成功搜尋了!來測試看看吧

喔~~ 原來我老家那也有 i郵箱,每次經過我都沒看到 😅

當導航按鈕被點選,實作內容如下:

最後當對話框選擇完成後,要啟動地圖 App。

開啟的不一定是 Google Map,要看妳手機有裝什麼導航的 App,像我有導航王,我也可以選擇用導航王開啟。

OK 那麼這次的教學就到這邊,有任何不太了解的都歡迎留言詢問。
完整程式方塊

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