串接Open Data並用RecyclerView呈現 ~ 以台北市立動物園為例
串接Open Data並用RecyclerView呈現
~ 以台北市立動物園為例
作者：YiKai Chuang
前言：
本篇是使用台北市資料大平台的公開資料【參考來源1 】，以台北市立動物園的館區簡介和植物資料為例，基於MVC（Model–view–controller）架構並且利用RecyclerView來實作的Android app。
一、MVC架構簡介【參考來源2 】：
-
Model：業務邏輯 (business logic) 的處理，譬如：數據資料的存取、資料庫、網路連線、耗時的任務處理...等。
-
View：呈現與使用者互動的結果畫面，譬如：XML佈局文件。
-
Controller ：決定如何與 Model互動，產生新的邏輯結果，並且更新 View 的介面，譬如：Android本身的Activity、Fragment...等。
MVC的優點
1.將View層和Model層分離出來、各自管理，可以降低各模組之間程式碼的相互影響。
2.可擴充性提高，降低bug出現的機率。
3.各模組的職責劃分明確，利於程式碼的後續維護。
開發流程：
本範例的整合開發環境(IDE)是Android Studio 3.5
compileSdkVersion是29
minSdkVersion是23
targetSdkVersion是29
-
首先，在app層級的bundle.gradle加上引用
-
接著，在XML文件開始使用RecyclerView
-
在Fragment做RecyclerView的初始化，因為是基於MVC架構，所以我依自己的習慣建了controller、model、view、adapter...等資料夾)
-
本範例所使用的資料來自台北市資料大平台，網址是
由於首頁要呈現的畫面是台北市立動物園的各館區簡介，所以點擊【臺北市立動物園_館區簡介】
-
進到館區簡介頁面後，右上方有個【API】選項
-
點擊右上方的【API】之後，就可以看到所需的API網址
-
在model資料夾先建立之後可能會用到的類別，用以接收資料
-
用OkHttp套件的GET方法取得後台所傳回的Json格式的資料，接著再用Gson套件將結果轉成先前建立好的類別
-
建立item_view.xml，用來作為RecyclerView中各item的view
-
接著建立Adapter來控管每個item，我自訂了AreaRecyclerAdapter類別(繼承RecyclerView.Adapter)，用以顯示各館區的資料
-
AreaRecyclerAdapter相關覆寫的方法說明如下：
1.自訂一個命名為ViewHolder的類別(繼承RecyclerView.ViewHolder)，並在此處定義每個item的介面與邏輯。
2.在onCreateViewHolder指定item所使用的view，轉換成AreaRecyclerAdapter.ViewHolder的物件之後回傳
3.透過自定義的方法(refreshData)將資料清單(areaList)傳進來
4.在getItemCount回傳資料清單的數量
5.在onBindViewHolder透過 position參數指定每個item所用到的資料。如果需要顯示圖檔，在本範例是使用Glide套件
6.各館區的植物簡介也是依相同的邏輯來實作，處理完畢之後基本上就大功告成。
若需要完整的程式碼請參考以下網址
https://github.com/PeterChuang0730/peterRepository.git
手機的執行結果
1.主畫面(臺北市立動物園的館區列表)
2.使用者所選取的館區的詳細介紹
3.使用者所選取的館區的植物資料
4.使用者所選取的植物的詳細介紹
最後總結：
依照Android的官網文件【參考來源3 】，相較於傳統的ListView，RecyclerView不僅更先進、更具彈性，同時也適用於大量資料的處理。在做客戶專案時我曾碰過呼叫完API、載入圖片後，偶爾會發生畫面出現稍微閃爍的情況，後來調整setHasStableIds參數，就獲得改善。也許新釋出的開發元件一開始或多或少難免會踩到坑，但如果花點時間深入研究，根據不同應用的需求加以優化，相信應該可以讓畫面更加順暢，做出更高效率的app。
參考來源：
1. https://data.taipei/#/dataset?keyword=%E5%8B%95%E7%89%A9%E5%9C%92
2. https://windsuzu.github.io/learn-android-architecture-pattern/
3. https://developer.android.com/guide/topics/ui/layout/recyclerview
