在APP Inventor中解析XML資料的方法

在使用政府公開資訊的時候如果有JSON或是CSV資料可以使用，那是非常幸運的事，然而，並非每次都是那麼好運。如果，不小心遇到了XML資料，而你又要在APP Inventor中運用的話，那真的是一件很麻煩的事。不過，還是可以啦，只是在操作的時候，真的是很像在剝洋蔥一樣，你得一層一層處理。在這篇文章中，作者就以高雄市政府公開資訊平台的公車即時到站資訊做例子，說明如何取得其中所需要的資料。

首先，我們使用的網址是：http://ibus.tbkc.gov.tw/xmlbus/GetEstimateTime.xml?routeIds=100，它的說明網頁：https://data.kcg.gov.tw/dataset/department-of-transportation14，頁面如下所示：

進入XML網址之後，即可以看到此XML資料的基本架構，預設顯示的是100號公車的到站資訊，如下圖所示：

在APP Inventor的Web組件中，只要取得了這個網址進行XML解析之後，就會把它們變成一層一層的列表List資料，在程式積木中得一層一層處理進去才行。以這個例子，第一層是BusDynInfo，第二層是BusInfo，第三層是Route，依此類推。為了示範這個解析的過程，我們建立了一個專案，其介面佈局及元件內容如下所示：

在按下取得資料之後，分別可以顯示指定的站牌名稱（在這裡以第一站為例，同學們可以把該站用變數來取代，如此就可以讓使用者選擇想要檢視的站牌資訊）、到站時間、以及車牌號碼。執行的畫面如下：

這個按鈕本身的功用很簡單，就是設定好網址然後讓Web組件去取得資訊而已。其程式積木內容如下：

其它所有的程式積木，全部都在GotText事件方法中，如下所示：

就是一層一層解析進去，最後得到的esti是一個列表的型式，因此要取得這個列表的內容，只要找出想要的資料在列表中的索引位置，透過select list from list方法就可以把想要的內容拿出來了。需要解析XML資料的同學，一定要動手試試看。

如果更進一步想要取出最終在esti清單中的資料，執行像是如何所示的樣子：

也就是在解析之後把所有的站牌資料（站牌名稱、到站時間、以及即將到站公車 的車牌號碼）取出放在各自的清單中，並且放在ListView的元素裡面，在使用者點選其中一個站牌的時號，就更新上方的到站資料，則首先要設定3個個別用來諸存資料的清單，如下所示：

在此分別把它們命名為allStops、AllCarID、allComeTime，一開始先清空其中的內容。然後就是依照esti這個串列的長度，逐一取出這些資料，程式積木如下所示：

在上面的這個迴圈中進行的工作就是從esti這個清單中，逐一找出每一個項目中的StopName、comeCarid、comeTime這幾個key，然而取出其值加入到我們事先準備好的清單中。有了上述的三個清單，就可以把所有站名放到ListView的元素中以供後續的選用，然後上方的標籤則是先個別顯示第一站的資料，如下所示：

而當使用者選擇了ListView中的某一個項目時，就要執行更新上述標籤的工作，程式積木如下：