使用 Firebase 和 Jetpack Compose 建立 Android 應用

一、簡介

最後更新: 2022-11-16

使用 Firebase 和 Jetpack Compose 建立 Android 應用

在此 Codelab 中,您將建立一個名為Make It So的 Android 應用程式。該應用程式的 UI 完全使用Jetpack Compose構建,Jetpack Compose 是Android 用於構建本機UI 的現代工具包- 它非常直觀,並且比編寫.xml 文件並將其綁定到Activity、Fragment 或View 所需的代碼更少。

了解 Firebase 和 Jetpack Compose 如何協同工作的第一步是了解現代 Android 架構。良好的架構使系統易於理解、易於開發和維護,因為它使組件的組織方式和相互溝通的方式變得非常清晰。在 Android 世界中,建議的架構稱為Model - View - ViewModel模型代表存取應用程式中資料的層。 View是 UI 層,不應該了解業務邏輯。而ViewModel是業務邏輯應用的地方,有時需要ViewModel呼叫Model層。

我們強烈建議您閱讀本文,了解如何將模型 - 視圖 - ViewModel應用於使用 Jetpack Compose 構建的 Android 應用程序,因為這將使程式碼庫更易於理解,後續步驟也更容易完成。

你將建構什麼

Make It So是一個簡單的待辦事項清單應用程序,允許使用者新增和編輯任務、新增標誌、優先順序和截止日期,並將任務標記為已完成。下圖顯示了該應用程式的兩個主頁:任務建立頁面和包含已建立任務清單的主頁。

讓它如此 新增任務螢幕讓它如此主螢幕

您將添加此應用程式中缺少的一些功能:

  • 使用電子郵件和密碼對使用者進行身份驗證
  • 在 Firestore 集合中新增偵聽器並使 UI 對變更做出反應
  • 新增自訂追蹤以監控應用程式中特定程式碼的效能
  • 使用遠端配置建立功能切換並使用分階段推出來啟動它

你將學到什麼

  • 如何在現代 Android 應用程式中使用 Firebase 驗證、效能監控、遠端設定和 Cloud Firestore
  • 如何讓 Firebase API 適合 MVVM 架構
  • 如何在 Compose UI 中反映使用 Firebase API 所做的更改

你需要什麼

2. 取得範例應用程式並設定 Firebase

取得範例應用程式的程式碼

從命令列克隆 GitHub 儲存庫:

git clone https://github.com/FirebaseExtended/make-it-so-android.git

設定 Firebase

您需要做的第一件事是前往Firebase 控制台並透過點擊「+ 新增項目」按鈕來建立一個 Firebase 項目,如下所示:

Firebase 控制台

請依照螢幕上的步驟完成專案建立。

在每個 Firebase 專案中,您可以建立不同的應用程式:適用於 Android、iOS、Web、Flutter 和 Unity。選擇 Android 選項,如下所示:

Firebase 專案概述

然後依照下列步驟操作:

  1. 輸入com.example.makeitso作為套件名稱,並可以選擇輸入暱稱。對於此 Codelab,您不需要新增偵錯簽章憑證。
  2. 按一下「下一步」註冊您的應用程式並造訪 Firebase 設定檔。
  3. 點擊下載 google-services.json下載設定檔並將其保存在make-it-so-android/app目錄中。
  4. 點擊下一步。由於 Firebase SDK 已包含在範例專案的build.gradle檔案中,因此按一下Next跳至後續步驟
  5. 按一下繼續控制台以完成。

為了讓Make it So應用程式正常運作,在跳到程式碼之前,您需要在控制台中執行兩件事:啟用身份驗證提供者並建立 Firestore 資料庫。首先,讓我們啟用身份驗證,以便用戶可以登入應用程式:

  1. 「建置」功能表中,選擇「身份驗證」 ,然後按一下「開始」
  2. 「登入方法」卡中,選擇「電子郵件/密碼」 ,然後啟用它。
  3. 接下來,點擊新增提供者並選擇並啟用Anonymous

接下來,設定 Firestore。您將使用 Firestore 儲存登入使用者的任務。每個使用者都將在資料庫集合中獲得自己的文件

  1. 「建置」功能表中,選擇「Firestore」 ,然後按一下「建立資料庫」
  2. 保持「在生產模式下啟動」處於啟用狀態,然後按一下「下一步」
  3. 出現提示時,選擇 Cloud Firestore 資料的儲存位置。開發生產應用程式時,您會希望應用程式位於靠近大多數使用者的區域,並且與其他 Firebase 服務(例如 Functions)相同。對於此 Codelab,您可以保留預設區域或選擇離您最近的區域。
  4. 按一下「啟用」以設定您的 Firestore 資料庫。

讓我們花點時間為 Firestore 資料庫建立強大的安全規則。開啟 Firestore 儀表板並前往「規則」標籤。然後更新安全性規則,如下所示:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow create: if request.auth != null;
      allow read, update, delete: if request.auth != null && resource.data.userId == request.auth.uid;
    }
  }
}

這些規則基本上表明應用程式的任何登入使用者都可以在任何集合中為自己建立文件。然後,一旦創建,只有創建該文件的使用者才能查看、更新或刪除該文件。

運行應用程式

現在您可以運行該應用程式了!在 Android Studio 中開啟make-it-so-android/start資料夾並執行應用程式(可以使用 Android 模擬器或真實的 Android 裝置來完成)。

3.Firebase身份驗證

您要新增哪個功能?

Make It So範例應用程式的當前狀態下,使用者無需先登入即可開始使用該應用程式。它使用匿名身份驗證來實現此目的。但是,匿名帳戶不允許使用者在其他裝置上甚至在將來的會話中存取其資料。儘管匿名驗證對於熱引導很有用,但您應始終為使用者提供轉換為其他登入形式的選項。考慮到這一點,在此 Codelab 中,您將向Make It So應用程式添加電子郵件和密碼身份驗證。

是時候編碼了!

使用者透過輸入電子郵件和密碼建立帳戶後,您需要向 Firebase 驗證 API 請求電子郵件憑證,然後將新憑證連結到匿名帳戶。在 Android Studio 中開啟AccountServiceImpl.kt檔案並更新linkAccount函數,使其如下所示:

模型/服務/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String) {
    val credential = EmailAuthProvider.getCredential(email, password)
    auth.currentUser!!.linkWithCredential(credential).await()
}

現在開啟SignUpViewModel.kt並在onSignUpClick函數的launchCatching區塊內呼叫服務linkAccount函數:

螢幕/sign_up/SignUpViewModel.kt

launchCatching {
    accountService.linkAccount(email, password)
    openAndPopUp(SETTINGS_SCREEN, SIGN_UP_SCREEN)
}

首先,它嘗試進行身份驗證,如果呼叫成功,它將進入下一個畫面( SettingsScreen )。當您在launchCatching區塊內執行這些呼叫時,如果第一行發生錯誤,異常將被捕獲並處理,並且根本不會到達第二行。

再次開啟SettingsScreen後,您需要確保「登入」「建立帳戶」選項消失,因為現在使用者已經通過身份驗證。為此,我們讓SettingsViewModel監聽目前使用者的狀態(在AccountService.kt中可用),以檢查該帳戶是否是匿名的。為此,請更新SettingsViewModel.kt中的uiState ,如下所示:

螢幕/設定/SettingsViewModel.kt

val uiState = accountService.currentUser.map {
    SettingsUiState(it.isAnonymous)
}

您需要做的最後一件事是更新SettingsScreen.kt中的uiState以收集SettingsViewModel發出的狀態:

螢幕/設定/SettingsScreen.kt

val uiState by viewModel.uiState.collectAsState(
    initial = SettingsUiState(false)
)

現在,每次使用者變更時, SettingsScreen都會重新組合以根據使用者的新驗證狀態顯示選項。

測試時間到了!

運行Make it So並透過點擊螢幕右上角的齒輪圖示導航至設定。從那裡,點擊建立帳戶選項:

讓它如此設定螢幕Make it So 註冊畫面

輸入有效的電子郵件和強密碼來建立您的帳戶。它應該可以工作,您應該被重定向到設定頁面,您將在其中看到兩個新選項:登出和刪除您的帳戶。您可以透過點擊「使用者」標籤來檢查在 Firebase 控制台的「驗證」儀表板中建立的新帳戶。

4.雲端Firestore

您要新增哪個功能?

對於 Cloud Firestore,您將在 Firestore 集合中新增偵聽器,該集合儲存表示Make it So中顯示的任務的文件。新增此偵聽器後,您將收到對此集合所做的每個更新。

是時候編碼了!

StorageServiceImpl.kt中的可用Flow更新為如下所示:

模型/服務/impl/StorageServiceImpl.kt

override val tasks: Flow<List<Task>>
    get() =
      auth.currentUser.flatMapLatest { user ->
        firestore.collection(TASK_COLLECTION).whereEqualTo(USER_ID_FIELD, user.id).dataObjects()
      }

此程式碼根據user.id將偵聽器新增至任務集合。每個任務都由名為tasks集合中的一個文件表示,並且每個任務都有一個名為userId的欄位。請注意,如果currentUser的狀態發生變化(例如透過登出),將發出新的Flow

現在您需要讓TasksViewModel.kt中的Flow反映與服務中相同的流:

螢幕/任務/TasksViewModel.kt

val tasks = storageService.tasks

最後一件事是使TasksScreens.kt中代表 UI 的composable function了解此流程並將其收集為狀態。每次狀態變更時,可組合函數都會自動重組並向使用者顯示最新的狀態。將其加入到TasksScreen composable function中:

螢幕/任務/TasksScreen.kt

val tasks = viewModel
    .tasks
    .collectAsStateWithLifecycle(emptyList())

一旦可組合函數可以存取這些狀態,您就可以更新LazyColumn (這是用於在螢幕上顯示清單的結構),如下所示:

螢幕/任務/TasksScreen.kt

LazyColumn {
    items(tasks.value, key = { it.id }) { taskItem ->
        TaskItem( [...] )
    }
}

測試時間到了!

為了測試它是否有效,請使用該應用程式新增一個新任務(透過點擊螢幕右下角的新增按鈕)。任務建立完成後,它應該會顯示在 Firestore 控制台的 Firestore 集合中。如果您使用相同帳戶在其他裝置上登入Make it So ,您將能夠編輯您的待辦事項並觀看它們在所有裝置上即時更新。

5. 效能監控

您要新增哪個功能?

性能是需要注意的一個非常重要的事情,因為如果性能不好,用戶很可能會放棄使用你的應用程序,並且他們需要花費太多時間來使用它來完成一個簡單的任務。這就是為什麼有時收集有關用戶在應用程式中進行的特定旅程的一些指標很有用。為了幫助您實現這一點,Firebase 效能監控提供了自訂追蹤。請依照後續步驟新增自訂追蹤並測量Make it So中不同程式碼段的效能。

是時候編碼了!

如果開啟Performance.kt文件,您將看到一個名為 Trace 的內聯函數。此函數呼叫效能監控 API 建立自訂追蹤,並將追蹤名稱作為參數傳遞。您看到的另一個參數是您希望監視的程式碼區塊。為每個追蹤收集的預設指標是完全運行所需的時間:

模型/服務/Performance.kt

inline fun <T> trace(name: String, block: Trace.() -> T): T = Trace.create(name).trace(block)

您可以選擇您認為需要測量的程式碼庫部分並向其中添加自訂追蹤。以下是為您先前在此 Codelab 中看到的linkAccount函數(在AccountServiceImpl.kt中)新增自訂追蹤的範例:

模型/服務/impl/AccountServiceImpl.kt

override suspend fun linkAccount(email: String, password: String): Unit =
  trace(LINK_ACCOUNT_TRACE) {
      val credential = EmailAuthProvider.getCredential(email, password)
      auth.currentUser!!.linkWithCredential(credential).await()
  }

現在輪到你了!將一些自訂追蹤添加到Make it So應用程序,然後繼續下一部分以測試它是否按預期工作。

測試時間到了!

添加自訂跡線後,請執行應用程式並確保多次使用您想要測量的功能。然後前往 Firebase 控制台並前往Performance 儀表板。在螢幕底部,您將找到三個選項卡:網頁請求自訂追蹤螢幕渲染

轉到“自訂追蹤”選項卡,檢查您在程式碼庫中新增的追蹤是否顯示在那裡,並且您可以看到執行這些程式碼片段通常需要多少時間。

6. 遠端配置

您要新增哪個功能?

遠端配置有多種用例,從遠端變更應用程式的外觀到為不同的使用者群體配置不同的行為。在此 Codelab 中,您將使用遠端設定建立功能切換,該功能將在Make it So應用程式上顯示或隱藏新的編輯任務功能。

是時候編碼了!

您需要做的第一件事是在 Firebase 控制台中建立配置。為此,您需要導航至遠端配置儀表板並按一下新增參數按鈕。根據下圖填寫欄位:

遠端配置建立參數對話框

填寫完所有欄位後,您可以按一下「儲存」按鈕,然後按一下「發布」 。現在參數已建立並可用於您的程式碼庫,您需要新增將取得新值到您的應用程式的程式碼。開啟ConfigurationServiceImpl.kt檔案並更新這兩個函數的實作:

模型/服務/impl/ConfigurationServiceImpl.kt

override suspend fun fetchConfiguration(): Boolean {
  return remoteConfig.fetchAndActivate().await()
}

override val isShowTaskEditButtonConfig: Boolean
  get() = remoteConfig[SHOW_TASK_EDIT_BUTTON_KEY].asBoolean()

第一個函數從伺服器取得值,並在應用程式啟動後立即呼叫SplashViewModel.kt中的函數。這是確保從一開始就在所有螢幕中提供最新值的最佳方法。如果稍後當用戶正在做某事時更改 UI 或應用程式的行為,這不是一個好的用戶體驗!

第二個函數會傳回為您剛剛在控制台中建立的參數所發布的布林值。您需要透過將以下內容新增至loadTaskOptions函數來在TasksViewModel.kt中檢索此資訊:

螢幕/任務/TasksViewModel.kt

fun loadTaskOptions() {
  val hasEditOption = configurationService.isShowTaskEditButtonConfig
  options.value = TaskActionOption.getOptions(hasEditOption)
}

您正在檢索第一行的值,並使用它來載入第二行任務項目的選單選項。如果值為false ,則表示選單將不包含編輯選項。現在您已經有了選項列表,您需要讓 UI 正確顯示它。當您使用 Jetpack Compose 建立應用程式時,您需要尋找聲明TasksScreen UI 外觀的可composable function 。因此,開啟TasksScreen.kt檔案並更新LazyColum以指向TasksViewModel.kt中可用的選項:

螢幕/任務/TasksScreen.kt

val options by viewModel.options

LazyColumn {
  items(tasks.value, key = { it.id }) { taskItem ->
    TaskItem(
      options = options,
      [...]
    )
  }
}

TaskItem是另一個composable function ,它宣告單一任務的 UI 應該是什麼樣子。每個任務都有一個選單,其中包含當使用者點擊其末尾的三點圖示時顯示的選項。

測試時間到了!

現在您可以運行該應用程式了!檢查您使用 Firebase 控制台發布的值是否與應用程式的行為相符:

  • 如果為false ,則單擊三點圖示時您應該只會看到兩個選項;
  • 如果是true ,則點擊三點圖示時您應該會看到三個選項;

嘗試在控制台中更改該值幾次並重新啟動應用程式。這就是使用遠端配置在您的應用程式中啟動新功能是多麼容易!

7. 恭喜

恭喜,您已成功使用 Firebase 和 Jetpack Compose 建置了 Android 應用程式!

您將 Firebase 驗證、效能監控、遠端設定和 Cloud Firestore 新增至完全使用 Jetpack Compose 建置 UI 的 Android 應用程式中,並使其適合推薦的 MVVM 架構!

進一步閱讀

參考文檔