Firebase Android 程式碼研究室：打造友善的聊天體驗

1. 總覽

螢幕截圖

圖片：友善的即時通訊應用程式。

歡迎來到「親切的聊天」程式碼研究室。在本程式碼研究室中，您將瞭解如何使用 Firebase 平台在 Android 上建立即時通訊應用程式。

課程內容

  • 如何使用 Firebase 驗證讓使用者登入。
  • 如何使用 Firebase 即時資料庫同步處理資料。
  • 如何在 Cloud Storage for Firebase 中儲存二進位檔案。
  • 如何使用 Firebase 本機模擬器套件，透過 Firebase 開發 Android 應用程式。

事前準備

  • 最新版 Android Studio
  • 搭載 Android 5.0 以上版本的 Android Emulator。
  • Node.js 10 以上版本 (以便使用模擬器套件)。
  • Java 8 以上版本。如要安裝 Java，請按照這些操作說明進行。如要確認您的版本，請執行 java -version。
  • 熟悉 Kotlin 程式設計語言。

2. 取得程式碼範例

複製存放區

從指令列複製 GitHub 存放區：

$ git clone https://github.com/firebase/codelab-friendlychat-android

匯入 Android Studio

在 Android Studio 中，選取「File」(檔案) >「開啟」，然後從您下載程式碼範例的目錄中選取 build-android-start 目錄 ( android_studio_folder)。

現在 Android Studio 應會開啟 build-android-start 專案。如果您看到關於缺少 google-services.json 檔案的警告，請不用擔心，這項功能會在後續步驟中新增。

檢查依附元件

在本程式碼研究室中，系統已為您新增需要的所有依附元件，但請務必瞭解如何在應用程式中加入 Firebase SDK：

build.gradle.kts

plugins {
    id("com.android.application") version "8.0.0" apply false
    id("com.android.library") version "8.0.0" apply false
    id("org.jetbrains.kotlin.android") version "1.8.20" apply false

    // The google-services plugin is required to parse the google-services.json file
    id("com.google.gms.google-services") version "4.3.15" apply false
}

app/build.gradle.kts

plugins {
    id("com.android.application")
    id("kotlin-android")
    id("com.google.gms.google-services")
}

android {
    // ...
}

dependencies {
    // ...

    // Google Sign In SDK
    implementation("com.google.android.gms:play-services-auth:20.5.0")

    // Firebase SDK
    implementation(platform("com.google.firebase:firebase-bom:32.0.0"))
    implementation("com.google.firebase:firebase-database-ktx")
    implementation("com.google.firebase:firebase-storage-ktx")
    implementation("com.google.firebase:firebase-auth-ktx")

    // Firebase UI Library
    implementation("com.firebaseui:firebase-ui-auth:8.0.2")
    implementation("com.firebaseui:firebase-ui-database:8.0.2")
}

3. 安裝 Firebase CLI

在本程式碼研究室中，您將使用 Firebase 模擬器套件在本機模擬 Firebase 驗證、即時資料庫和 Cloud Storage。這能提供安全快速且免付費的本機開發環境，協助您建構應用程式。

安裝 Firebase CLI

首先，您需要安裝 Firebase CLI。如果您使用的是 macOS 或 Linux，可以執行下列 cURL 指令：

curl -sL https://firebase.tools | bash

如果您使用的是 Windows，請參閱安裝操作說明，取得獨立二進位檔或透過 npm 進行安裝。

安裝 CLI 後，執行 firebase --version 應會回報 9.0.0 或更高的版本：

$ firebase --version
9.0.0

登入

執行 firebase login 將 CLI 連結至您的 Google 帳戶。這會開啟新的瀏覽器視窗，完成登入程序。請務必選擇先前建立 Firebase 專案時使用的帳戶。

4. 連結至 Firebase Emulator 套件

啟動模擬器

在終端機中，從本機 codelab-friendlychat-android 目錄的根目錄執行下列指令：

firebase emulators:start --project=demo-friendlychat-android

您應該會看到類似以下的記錄。通訊埠值已在 firebase.json 檔案中定義，該檔案包含在複製的程式碼範例中。

$ firebase emulators:start --project=demo-friendlychat-android
i  emulators: Starting emulators: auth, database, storage
i  emulators: Detected demo project ID "demo-friendlychat-android", emulated services will use a demo configuration and attempts to access non-emulated services for this project will fail.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI            │
├────────────────┼────────────────┼────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth     │
├────────────────┼────────────────┼────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database │
├────────────────┼────────────────┼────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage  │
└────────────────┴────────────────┴────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

使用網路瀏覽器前往 http://localhost:4000，檢視 Firebase 模擬器套件 UI：

模擬器套件 UI 首頁

請繼續執行程式碼研究室其餘部分，以便執行 emulators:start 指令。

連結應用程式

在 Android Studio 中開啟 MainActivity.kt，然後在 onCreate 方法中加入下列程式碼：

// When running in debug mode, connect to the Firebase Emulator Suite.
// "10.0.2.2" is a special IP address which allows the Android Emulator
// to connect to "localhost" on the host computer. The port values (9xxx)
// must match the values defined in the firebase.json file.
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

5. 執行範例應用程式

新增 google-services.json

如要讓 Android 應用程式連結至 Firebase，您必須在 Android 專案的 app 資料夾中新增 google-services.json 檔案。針對本程式碼研究室，我們提供了模擬 JSON 檔案，讓您連結至 Firebase Emulator 套件。

將 mock-google-services.json 檔案複製到 build-android-start/app 資料夾，做為 google-services.json：

cp mock-google-services.json build-android-start/app/google-services.json

在本程式碼研究室的最後一個步驟中，您將瞭解如何建立實際的 Firebase 專案和 Firebase Android 應用程式，以便將此模擬的 JSON 檔案替換為自己的設定。

執行應用程式

現在您已將專案匯入 Android Studio，並新增 Firebase 設定 JSON 檔案，可以開始執行應用程式了。

  1. 啟動 Android Emulator。
  2. 在 Android Studio 中，按一下工具列中的「Run」 ( execute)。

應用程式應該會在 Android Emulator 上啟動。此時您應該會看到空白訊息清單，而且無法收發郵件。在本程式碼研究室的下一個步驟中，您會驗證使用者身分，讓使用者能夠使用友善即時通訊。

6. 啟用驗證功能

這個應用程式會使用 Firebase 即時資料庫儲存所有即時通訊訊息。但在新增資料前，我們應先確認應用程式安全無虞，且只有通過驗證的使用者才能張貼訊息。在這個步驟中，我們會啟用 Firebase 驗證，並設定即時資料庫安全性規則。

新增基本登入功能

接著，我們要在應用程式中新增一些基本的 Firebase 驗證碼，藉此偵測使用者並實作登入畫面。

檢查目前的使用者

首先，將下列例項變數新增至 MainActivity.kt 類別：

MainActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

現在，讓我們修改 MainActivity，在使用者開啟應用程式且未經驗證的情況下，一律將使用者傳送至登入畫面。在 binding 附加至檢視區塊之後，將以下內容新增至 onCreate() 方法：

MainActivity.kt

// Initialize Firebase Auth and check if the user is signed in
auth = Firebase.auth
if (auth.currentUser == null) {
    // Not signed in, launch the Sign In activity
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
    return
}

我們還想檢查使用者是否在 onStart() 期間登入：

MainActivity.kt

public override fun onStart() {
    super.onStart()
    // Check if user is signed in.
    if (auth.currentUser == null) {
        // Not signed in, launch the Sign In activity
        startActivity(Intent(this, SignInActivity::class.java))
        finish()
        return
    }
}

接著實作 getUserPhotoUrl() 和 getUserName() 方法，傳回目前已驗證 Firebase 使用者的適當資訊：

MainActivity.kt

private fun getPhotoUrl(): String? {
    val user = auth.currentUser
    return user?.photoUrl?.toString()
}

private fun getUserName(): String? {
    val user = auth.currentUser
    return if (user != null) {
        user.displayName
    } else ANONYMOUS
}

接著實作 signOut() 方法來處理登出按鈕：

MainActivity.kt

private fun signOut() {
    AuthUI.getInstance().signOut()
    startActivity(Intent(this, SignInActivity::class.java))
    finish()
}

現在，我們有了所有邏輯，就能在必要時將使用者導向登入畫面。接下來，我們必須實作登入畫面，才能正確驗證使用者。

實作登入畫面

開啟 SignInActivity.kt 檔案。這個簡單的「登入」按鈕是用來啟動驗證程序。在本節中，您將使用 FirebaseUI 實作登入邏輯。

在 // Firebase instance variables 註解下的 SignInActivity 類別中，新增 Auth 例項變數：

SignInActivity.kt

// Firebase instance variables
private lateinit var auth: FirebaseAuth

接著，按照您在 MainActivity 中操作的方式，編輯 onCreate() 方法初始化 Firebase：

SignInActivity.kt

// Initialize FirebaseAuth
auth = Firebase.auth

將 ActivityResultLauncher 欄位新增至 SignInActivity：

SignInActivity.kt

// ADD THIS
private val signIn: ActivityResultLauncher<Intent> =
        registerForActivityResult(FirebaseAuthUIActivityResultContract(), this::onSignInResult)

override fun onCreate(savedInstanceState: Bundle?) {
    // ...
}

接下來，請編輯 onStart() 方法，以啟動 FirebaseUI 登入流程：

SignInActivity.kt

public override fun onStart() {
    super.onStart()

    // If there is no signed in user, launch FirebaseUI
    // Otherwise head to MainActivity
    if (Firebase.auth.currentUser == null) {
        // Sign in with FirebaseUI, see docs for more details:
        // https://firebase.google.com/docs/auth/android/firebaseui
        val signInIntent = AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setLogo(R.mipmap.ic_launcher)
                .setAvailableProviders(listOf(
                        AuthUI.IdpConfig.EmailBuilder().build(),
                        AuthUI.IdpConfig.GoogleBuilder().build(),
                ))
                .build()

        signIn.launch(signInIntent)
    } else {
        goToMainActivity()
    }
}

接下來，實作 onSignInResult 方法來處理登入結果。如果登入成功，請繼續執行 MainActivity：

SignInActivity.kt

private fun onSignInResult(result: FirebaseAuthUIAuthenticationResult) {
    if (result.resultCode == RESULT_OK) {
        Log.d(TAG, "Sign in successful!")
        goToMainActivity()
    } else {
        Toast.makeText(
                this,
                "There was an error signing in",
                Toast.LENGTH_LONG).show()

        val response = result.idpResponse
        if (response == null) {
            Log.w(TAG, "Sign in canceled")
        } else {
            Log.w(TAG, "Sign in error", response.error)
        }
    }
}

這樣就可以了！您已在幾個方法呼叫中透過 FirebaseUI 進行驗證，不需要管理任何伺服器端設定。

測試成果

在 Android Emulator 上執行應用程式。登入畫面應該會隨即顯示。輕觸「使用電子郵件登入」按鈕，然後建立帳戶。如果實作正確，應該會連到訊息畫面。

登入後，在瀏覽器中開啟 Firebase Emulator 套件 UI，然後按一下「Authentication」分頁標籤，查看第一個登入使用者帳戶。

7. 讀取訊息

在這個步驟中，我們將新增用於讀取和顯示即時資料庫訊息的功能。

匯入範例訊息

  1. 在 Firebase Emulator 套件 UI 中，選取「Realtime Database」分頁標籤。
  2. 將 initial_messages.json 檔案從程式碼研究室的本機副本拖曳到資料檢視器。

現在資料庫的 messages 節點下應該會顯示幾則訊息。

讀取資料

同步處理郵件

在本節中，我們將加入程式碼，透過以下方式同步處理新增的訊息至應用程式 UI：

  • 初始化 Firebase 即時資料庫並新增事件監聽器，用於處理資料變更。
  • 更新 RecyclerView 轉接程式，以便顯示新訊息。
  • 使用 MainActivity 類別中的其他 Firebase 執行個體變數，新增資料庫執行個體變數：

MainActivity.kt

// Firebase instance variables
// ...
private lateinit var db: FirebaseDatabase
private lateinit var adapter: FriendlyMessageAdapter

使用下方定義的程式碼，在註解 // Initialize Realtime Database and FirebaseRecyclerAdapter 中修改 MainActivity 的 onCreate() 方法。這段程式碼會從即時資料庫新增所有現有訊息，然後在 Firebase 即時資料庫的 messages 路徑下監聽新的子項目。這樣會為每則訊息在 UI 中新增元素：

MainActivity.kt

// Initialize Realtime Database
db = Firebase.database
val messagesRef = db.reference.child(MESSAGES_CHILD)

// The FirebaseRecyclerAdapter class and options come from the FirebaseUI library
// See: https://github.com/firebase/FirebaseUI-Android
val options = FirebaseRecyclerOptions.Builder<FriendlyMessage>()
    .setQuery(messagesRef, FriendlyMessage::class.java)
    .build()
adapter = FriendlyMessageAdapter(options, getUserName())
binding.progressBar.visibility = ProgressBar.INVISIBLE
manager = LinearLayoutManager(this)
manager.stackFromEnd = true
binding.messageRecyclerView.layoutManager = manager
binding.messageRecyclerView.adapter = adapter

// Scroll down when a new message arrives
// See MyScrollToBottomObserver for details
adapter.registerAdapterDataObserver(
    MyScrollToBottomObserver(binding.messageRecyclerView, adapter, manager)
)

接下來，FriendlyMessageAdapter.kt 類別會在內部類別 MessageViewHolder() 中實作 bind() 方法：

friendlyMessageAdapter.kt

inner class MessageViewHolder(private val binding: MessageBinding) : ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        binding.messageTextView.text = item.text
        setTextColor(item.name, binding.messageTextView)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
    ...
}

您也必須顯示是圖片的訊息，因此也請在內部類別 ImageMessageViewHolder() 中實作 bind() 方法：

friendlyMessageAdapter.kt

inner class ImageMessageViewHolder(private val binding: ImageMessageBinding) :
    ViewHolder(binding.root) {
    fun bind(item: FriendlyMessage) {
        loadImageIntoView(binding.messageImageView, item.imageUrl!!)

        binding.messengerTextView.text = if (item.name == null) ANONYMOUS else item.name
        if (item.photoUrl != null) {
            loadImageIntoView(binding.messengerImageView, item.photoUrl!!)
        } else {
            binding.messengerImageView.setImageResource(R.drawable.ic_account_circle_black_36dp)
        }
    }
}

最後，回到 MainActivity，開始及停止監聽 Firebase 即時資料庫的更新內容。請更新 MainActivity 中的 onPause() 和 onResume() 方法，如下所示：

MainActivity.kt

public override fun onPause() {
    adapter.stopListening()
    super.onPause()
}

public override fun onResume() {
    super.onResume()
    adapter.startListening()
}

測試同步處理訊息

  1. 按一下「Run」 ( execute)。
  2. 在模擬器套件 UI 中，返回「Realtime Database」分頁，然後手動新增訊息。確認訊息會顯示在您的 Android 應用程式中：

恭喜！您剛剛在應用程式中新增了即時資料庫！

8. 傳送訊息

實作簡訊傳送功能

在本節中，您將新增應用程式使用者能否傳送簡訊的功能。下列程式碼片段會監聽傳送按鈕的點擊事件，使用訊息欄位的內容建立新的 FriendlyMessage 物件，然後將訊息推送至資料庫。push() 方法會將自動產生的 ID 新增至已推送物件的路徑。這些 ID 會依照順序排列，如此可確保新訊息會加到清單末端。

在 MainActivity 類別的 onCreate() 方法中，更新傳送按鈕的點擊事件監聽器。此程式碼已位於 onCreate() 方法的底部。請更新 onClick() 主體，使其符合以下程式碼：

MainActivity.kt

// Disable the send button when there's no text in the input field
// See MyButtonObserver for details
binding.messageEditText.addTextChangedListener(MyButtonObserver(binding.sendButton))

// When the send button is clicked, send a text message
binding.sendButton.setOnClickListener {
    val friendlyMessage = FriendlyMessage(
        binding.messageEditText.text.toString(),
        getUserName(),
        getPhotoUrl(),
        null /* no image */
    )
    db.reference.child(MESSAGES_CHILD).push().setValue(friendlyMessage)
    binding.messageEditText.setText("")
}

實作圖片訊息傳送功能

在本節中，您將新增應用程式使用者傳送圖片訊息的功能。建立圖片訊息的步驟如下：

  • 選取圖片
  • 處理圖片選取作業
  • 將臨時圖片訊息寫入即時資料庫
  • 開始上傳所選圖片
  • 上傳完成後，更新上傳圖片的圖片訊息網址

選取圖片

本程式碼研究室會使用 Cloud Storage for Firebase，以便新增圖片。Cloud Storage 是儲存應用程式二進位資料的絕佳位置。

處理圖片選取作業及寫入臨時訊息

使用者選取圖片後，就會啟動映像檔選項 Intent。已在 onCreate() 方法結尾的程式碼中實作這個項目。完成後，它會呼叫 MainActivity 的 onImageSelected() 方法。您可使用下方的程式碼片段，撰寫訊息，並在訊息中提供指向資料庫的臨時圖片網址，指出正在上傳圖片。

MainActivity.kt

private fun onImageSelected(uri: Uri) {
    Log.d(TAG, "Uri: $uri")
    val user = auth.currentUser
    val tempMessage = FriendlyMessage(null, getUserName(), getPhotoUrl(), LOADING_IMAGE_URL)
    db.reference
            .child(MESSAGES_CHILD)
            .push()
            .setValue(
                    tempMessage,
                    DatabaseReference.CompletionListener { databaseError, databaseReference ->
                        if (databaseError != null) {
                            Log.w(
                                    TAG, "Unable to write message to database.",
                                    databaseError.toException()
                            )
                            return@CompletionListener
                        }

                        // Build a StorageReference and then upload the file
                        val key = databaseReference.key
                        val storageReference = Firebase.storage
                                .getReference(user!!.uid)
                                .child(key!!)
                                .child(uri.lastPathSegment!!)
                        putImageInStorage(storageReference, uri, key)
                    })
}

上傳圖片並更新訊息

將 putImageInStorage() 方法新增至 MainActivity。系統會在 onImageSelected() 中呼叫此方法，開始上傳所選圖片。上傳完成後，請更新訊息，改用適當的圖片。

MainActivity.kt

private fun putImageInStorage(storageReference: StorageReference, uri: Uri, key: String?) {
    // First upload the image to Cloud Storage
    storageReference.putFile(uri)
        .addOnSuccessListener(
            this
        ) { taskSnapshot -> // After the image loads, get a public downloadUrl for the image
            // and add it to the message.
            taskSnapshot.metadata!!.reference!!.downloadUrl
                .addOnSuccessListener { uri ->
                    val friendlyMessage =
                        FriendlyMessage(null, getUserName(), getPhotoUrl(), uri.toString())
                    db.reference
                        .child(MESSAGES_CHILD)
                        .child(key!!)
                        .setValue(friendlyMessage)
                }
        }
        .addOnFailureListener(this) { e ->
            Log.w(
                TAG,
                "Image upload task was unsuccessful.",
                e
            )
        }
}

測試訊息傳送功能

  1. 在 Android Studio 中，按一下 execute「Run」(執行) 按鈕。
  2. 在 Android Emulator 中輸入訊息，然後輕觸傳送按鈕。新訊息應該會顯示在應用程式 UI 和 Firebase Emulator 套件 UI 中。
  3. 在 Android Emulator 中，輕觸「+」圖片，從裝置中選取圖片。新訊息應先顯示預留位置圖片，再上傳圖片。完成後，系統會一併顯示所選圖片。新訊息也會顯示在模擬器套件 UI 中，特別是「即時資料庫」分頁中的物件，以及「Storage」分頁中的 blob。

9. 恭喜！

您剛使用 Firebase 建立了即時即時通訊應用程式！

您學到的內容

  • Firebase 驗證
  • Firebase 即時資料庫
  • Cloud Storage for Firebase

接著，請嘗試運用在本程式碼研究室中學到的知識，將 Firebase 加入自己的 Android 應用程式！如要進一步瞭解 Firebase，請前往 firebase.google.com。

如要瞭解如何設定「實際」的 Firebase 專案，並使用「實際」的 Firebase 資源 (而非示範專案和只模擬資源)，請繼續下一步。

注意：即使您已經設定實際的 Firebase 專案 (尤其在開始建構實際應用程式時更是如此)，我們建議您使用 Firebase 本機模擬器套件進行開發與測試。

10. 選用：建立及設定 Firebase 專案

在這個步驟中，您將建立要用於本程式碼研究室的 Firebase Android 專案和 Firebase Android 應用程式。此外，您也需要在應用程式中加入特定應用程式的 Firebase 設定。最後，請設定真正的 Firebase 資源，以便與應用程式搭配使用。

建立 Firebase 專案

  1. 透過瀏覽器前往 Firebase 控制台。
  2. 選取「新增專案」。
  3. 請選取或輸入專案名稱。名稱沒有硬性規定。
  4. 您不需要在本程式碼研究室中使用 Google Analytics，因此可以略過為專案啟用 Google Analytics。
  5. 按一下「建立專案」。專案準備就緒後，請點選「繼續」。

將 Firebase 新增至您的 Android 專案

在開始這個步驟前，請先取得應用程式的 SHA1 雜湊。從本機 build-android-start 目錄執行下列指令，判定偵錯金鑰的 SHA1：

./gradlew signingReport

Store: /Users/<username>/.android/debug.keystore
Alias: AndroidDebugKey
MD5: A5:88:41:04:8F:06:59:6A:AE:33:76:87:AA:AD:19:23
SHA1: A7:89:F5:06:A8:07:A1:22:EC:90:6A:A6:EA:C3:D4:8B:3A:30:AB:18
SHA-256: 05:A2:2A:35:EE:F2:51:23:72:4D:72:67:A5:6A:8A:58:22:2C:00:A6:AB:F6:45:D5:A1:82:D8:90:A4:69:C8:FE
Valid until: Wednesday, August 10, 2044

您應該會看到類似上述的輸出內容。重要的是 SHA1 雜湊。如果找不到 SHA1 雜湊，請參閱這個網頁瞭解詳情。

返回 Firebase 控制台，然後按照下列步驟向 Firebase 專案註冊 Android 專案：

  1. 在新專案的總覽畫面中按一下 Android 圖示，即可啟動設定工作流程：新增 Android 應用程式
  2. 在下一個畫面中，輸入 com.google.firebase.codelab.friendlychat 做為應用程式的套件名稱。
  3. 按一下「Register App」，然後點選「Download google-services.json」下載 Firebase 設定檔。
  4. 將 google-services.json 檔案複製到 Android 專案的 app 目錄。
  5. 略過控制台設定工作流程顯示的後續步驟 (相關步驟已在 build-android-start 專案中完成)。
  6. 將專案與 Gradle 檔案同步處理，確保應用程式可以使用所有依附元件。在 Android Studio 工具列中，選取「File」(檔案) >將專案與 Gradle 檔案同步處理。您可能還需要執行「Build/Clean Project」和「Build/Rebuild Project」，設定變更才會生效。

設定 Firebase 驗證

您必須先啟用 Firebase 驗證和您要在應用程式中使用的登入供應商，您的應用程式才能代表使用者存取 Firebase Authentication API。

  1. 在 Firebase 控制台，選取左側導覽面板中的「驗證」。
  2. 選取「Sign-in method」(登入方式) 分頁標籤。
  3. 按一下「電子郵件/密碼」，然後將切換按鈕切換為「啟用」(藍色)。
  4. 按一下「Google」，將切換按鈕設為啟用 (藍色)，並設定專案支援電子郵件。

如果稍後在本程式碼研究室中發生錯誤，並顯示「CONFIGURATION_NOT_FOUND」訊息，請返回此步驟並仔細檢查工作。

設定即時資料庫

本程式碼研究室中的應用程式會將即時通訊訊息儲存在 Firebase 即時資料庫。在本節中，我們會建立資料庫，並透過名為「Firebase 安全性規則」的 JSON 設定語言設定資料庫的安全性。

  1. 在 Firebase 控制台，選取左側導覽面板中的「即時資料庫」。
  2. 按一下「建立資料庫」，建立新的即時資料庫執行個體。收到系統提示時，請選取 us-central1 區域，然後按一下「Next」(下一步)。
  3. 當系統顯示安全性規則提示時，請選擇「鎖定模式」，然後按一下「啟用」。
  4. 建立資料庫執行個體後，請選取「Rules」分頁標籤，然後將規則設定更新為以下內容：
     {
   "rules": {
     "messages": {
       ".read": "auth.uid != null",
       ".write": "auth.uid != null"
     }
   }
 }

如要進一步瞭解安全性規則的運作方式 (包括「auth」變數說明文件)，請參閱即時資料庫安全性說明文件。

設定 Cloud Storage for Firebase

  1. 在 Firebase 控制台，選取左側導覽面板中的「Storage」(儲存空間)。
  2. 按一下「開始使用」，為專案啟用 Cloud Storage。
  3. 按照對話方塊中的步驟，使用建議的預設值來設定值區。

連結至 Firebase 資源

在本程式碼研究室的先前步驟中，您已將以下內容新增至 MainActivity.kt。這個條件式區塊會將您的 Android 專案連結至 Firebase Emulator 套件。

// REMOVE OR DISABLE THIS
if (BuildConfig.DEBUG) {
    Firebase.database.useEmulator("10.0.2.2", 9000)
    Firebase.auth.useEmulator("10.0.2.2", 9099)
    Firebase.storage.useEmulator("10.0.2.2", 9199)
}

如要將應用程式連結至新的「實際」Firebase 專案及其「實際」Firebase 資源，您可以移除這個區塊，或是在發布模式下執行應用程式，讓 BuildConfig.DEBUG 為 false。