這「Android App 開發實戰系列」一系列的文章,我們將會實作一個完整的電影 App – MovieHunt(且開源和大家一同切磋學習),這專案使用 The Movie Database API 當作資料來源,講解裡面使用到的技術、套件。
文章章節篇幅如下,大概一到兩週會完成一 Part 並發佈,敬請鎖定這一系列文:
- Part 1. 需求、設計、架構和套件。(本篇)
- Part 2. 資料來源、API
- Part 3. Paging + Repository
- Part 4. ViewModel + View observe
- Part 5. Epoxy Model + Controller & data binding(即將來臨)
- Part 6. Room: 資料庫(即將來臨)
- Part 7. Paging: Local + Remote DataSource(即將來臨)
起源
做這個專案有兩個主要原因:1. 做為我個人的學習成果驗收和筆記 2. 因為過去我的文章都只提供片段的程式碼,後來收到很多人私訊或者寫信來問說有沒有完整的程式碼可以看,所以這次想要呈現一個完整、可運行的範例,讓大家可以了解觀念也同時有完整範例可以看,後續也在這專案加上新套件或新技術,後面的文章也都會基於此專案去延伸當範例跟講解。
完整程式碼在這:https://github.com/enginebai/MovieHunt 歡迎 Fork + Star ⭐
這專案內容和程式碼僅供學習用途,嚴禁任何營利、商業以及衍生性的行為,轉載請註明出處。
功能需求
廢話不多說,讓我們就來開始這 App 專案,首先第一個步驟是了解這個專案的需求是什麼。

- 介面有首頁、列表頁以及內容三種頁面而已,設計風格參考 Google Play 首頁的垂直 + 水平列表。
- 首頁呈現固定幾種不同分類的電影列表,每個分類可以左右滑動,滑到底可以自動載入下一頁資料。點擊 View All 可以顯示該分類的電影列表,
- 列表一樣可以下拉更新、滑到底載入更多,點擊電影進入詳細內容頁。
- 詳細頁面呈現電影完整資訊。
Flow Chart
這個 App 的流程是非常地簡單,開啟首頁後,可以進入列表頁或者詳細內容頁。

套件和架構
這一系列我們主要使用和介紹 Google 官方推出的 Architecture Components,以及一些 Android 開發較常見知名、廣泛使用的第三方套件(以下依照章節篇幅介紹順序列出:
- 專案結構採用 Gradle Kotlin DSL 且使用 :base 做為基底模組。(可以參考我之前的文章介紹和開源專案)
- HTTP + RESTful API 的存取是 Android 最常見的 Retrofit + OkHttp 套件(個人覺得應該直接納入官方套件才對)
- Paging 來做列表分頁資料的載入,讓我們可以更優雅地載入列表下一頁。
- ViewModel 作為 UI 和資料端的互動元件,提供 UI 所需要的資料串流。
- LiveData 當作資料串流,可以依照正確的元件生命週期,觀察資料的變更。
- Data Binding 讓我們在 XML 裡面直接綁定資料,減少設定資料的程式碼。
- Epoxy 來做複雜的列表介面,簡化 RecyclerView + Adapter 需要支援多種型別的套件。
- Room 當作本機端的資料庫,當資料有變更的時候,UI 會自動收到變更通知然後更新。
- 依賴注入 (Dependency Injection, DI)的部份是使用 Koin,這系列的文章不會介紹Koin 的使用方式,之後考慮寫一篇獨立的文章做依賴注入的介紹。
- // TODO 單一 Activity 架構,然後採用 Navigation 來做頁面切換、導頁的動作。(近期會完成)
- // TODO 未來會導入 Kotlin Coroutines 做執行續的切換做非同步的操作,再請拭目以待。
架構
架構的部分,我們主要依照 Google 的 Guide to App Architecture 作為設計原則,採用主推的 MVVM 架構,搭配 RxJava / LiveData 的觀察者模式來達成 Reactive UI。 MVVM Architecture 模式分層元件的職責如下:

- View: Activity / Fragment 單純只做介面的事情或邏輯。
- ViewModel: 處理非介面的邏輯,同時提供資料串流讓 View 去觀察變更。
- Model: 我們採用 Repository 模式作為資料提供的統一窗口,讓 ViewModel 可以取得資料而不用關注底層資料怎麼來的,資料的取得和處理全部都在 Model 裡面實作。
這邊有一個重要的原則:所有資料流向統一都從 Model → ViewModel → View,就是 View 訂閱 ViewModel、ViewModel 訂閱 Model。
而依賴方向則是 View → ViewModel → Model,表示說 View 使用 ViewModel,View 知道 ViewModel,知道用哪一個 ViewModel、但是 ViewModel 不曉得哪一個 View 正在使用它。 同樣,Model 也是一樣的道理,它不曉得是哪一個 ViewModel 在使用。
專案目錄架構
com.enginebai.moviehunt # Root Package
├── data # For data modeling layer
│ ├── local # Local persistence database
| │ ├── dao # Data Access Object for Room
| | ├── model # Model classes
│ ├── remote # Remote data source
│ └── repo # Repositories for single source of data
|
├── di # Dependency injection modules
│
├── ui # Fragment / View layer
│ ├── list # List screen Fragment and ViewModel
│ ├── home # Main screen Fragment and ViewModel
| │ ├── controller # Epoxy controller for RecyclerView
| │ └── models # Epoxy models for RecyclerView
│ └── details # Detail screen Fragment and ViewModel
|
├── utils # Utility Classes / Kotlin extensions
├── MainActivity # Single activity
├── AppContext # Application
└── NavigationRouter # Navigation controller
Part 1. 就到這邊,這部份講解我們的需求,以整體性、概括性地講解我們使用的工具以及規劃的架構,Part 2. 開始我們就會直接深入專案,以資料來源作為開始實作。
如果你有任何和此專案相關的疑問,歡迎留言給我交流或討論。
完整程式碼:https://github.com/enginebai/MovieHunt 歡迎 Fork + Star ⭐
終於有範例專案了,感謝。
真的很感謝你的教學,我從中學到很多
推一個用心的專案和教學文章。
期待你接下來一系列的教學文,對於新手入門很有幫助,希望會有 Coroutine 的範例,感謝。
Coroutine 未來會出,不過會等我把原本這一系列的文章寫完後才會出,敬請期待。
很好的應用,nice
您好!很高興您的分享,受益良多!先前也有類似的電影 App 構想,只是遇到一個比較難為的問題:資料來源;由於台灣的電影簡介由某些業者把持,又不像是國外的 TMDB 有比較好的 API 來源,可惜 TMDB 沒有中文資訊,後來就放棄了。
嗨 Eason,其實我最一開始 v1 版本的時候是有從 Yahoo 電影抓資料,可以參考 https://github.com/enginebai/MovieHunt/tree/master 結合 PTT 電影的好雷負雷,本來要上架後來被 Google 下架就索性開源出來,直到現在有了 v2 版本,台灣我就沒研究有沒有好的中文資料來源了。