Android App 開發實戰系列 Part 1. 概述

這「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 專案,首先第一個步驟是了解這個專案的需求是什麼。

  1. 介面有首頁、列表頁以及內容三種頁面而已,設計風格參考 Google Play 首頁的垂直 + 水平列表。
  2. 首頁呈現固定幾種不同分類的電影列表,每個分類可以左右滑動,滑到底可以自動載入下一頁資料。點擊 View All 可以顯示該分類的電影列表,
  3. 列表一樣可以下拉更新、滑到底載入更多,點擊電影進入詳細內容頁。
  4. 詳細頁面呈現電影完整資訊。

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 ⭐

8 thoughts on “Android App 開發實戰系列 Part 1. 概述

Add yours

  1. 期待你接下來一系列的教學文,對於新手入門很有幫助,希望會有 Coroutine 的範例,感謝。

    Like

  2. 您好!很高興您的分享,受益良多!先前也有類似的電影 App 構想,只是遇到一個比較難為的問題:資料來源;由於台灣的電影簡介由某些業者把持,又不像是國外的 TMDB 有比較好的 API 來源,可惜 TMDB 沒有中文資訊,後來就放棄了。

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑