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

1. 總覽

螢幕截圖

圖片:Friendly Chat 應用程式正在運作。

歡迎使用 Friendly Chat 程式碼研究室。在本程式碼研究室中,您將瞭解如何使用 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」 >「Open」,然後從下載範例程式的目錄中選取 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 模擬器套件

啟動模擬器

在終端機中,從本機 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 模擬器套件。

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 上啟動。此時,您應該會看到空白的訊息清單,且無法傳送及接收訊息。在本程式碼研究室的下一個步驟中,您將驗證使用者,讓他們能夠使用 Friendly Chat。

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 Suite UI,然後按一下「Authentication」分頁標籤,查看這個已登入的使用者帳戶。

7. 讀取訊息

在這個步驟中,我們會新增功能,用於讀取及顯示儲存在 Realtime Database 中的訊息。

匯入範例訊息

  1. 在 Firebase 模擬器套件 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

請使用下方定義的程式碼,修改 MainActivity 的 onCreate() 方法 (位於註解 // Initialize Realtime Database and FirebaseRecyclerAdapter 下方)。這個程式碼會新增即時資料庫中的所有現有訊息,然後監聽 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. 在 Emulator Suite 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() 方法結尾的程式碼中實作。完成後,系統會呼叫 MainActivityonImageSelected() 方法。您將使用下方程式碼片段,將含有臨時圖片網址的訊息寫入資料庫,表示圖片正在上傳。

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 中,按一下「Run」按鈕 execute
  2. 在 Android Emulator 中輸入訊息,然後輕觸傳送按鈕。應用程式 UI 和 Firebase Emulator Suite UI 中,應該會顯示新訊息。
  3. 在 Android Emulator 中,輕觸「+」圖示,即可從裝置中選取圖片。新訊息應先顯示預留位置圖片,然後在圖片上傳完成後顯示所選圖片。新的訊息也應會顯示在模擬器套件 UI 中,具體來說,就是「Realtime Database」分頁中的物件,以及「Storage」分頁中的 Blob。

9. 恭喜!

您剛剛使用 Firebase 建構即時通訊應用程式!

學習內容

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

接下來,請嘗試運用本程式碼研究室中的學習成果,將 Firebase 新增至您自己的 Android 應用程式!如要進一步瞭解 Firebase,請造訪 firebase.google.com

如要瞭解如何設定實際 Firebase 專案並使用實際 Firebase 資源 (而非示範專案和僅限模擬的資源),請繼續進行下一個步驟。

注意:即使您已設定實際的 Firebase 專案,尤其是在開始建構實際應用程式時,建議您使用 Firebase 本機模擬器套件進行開發和測試。

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

在這個步驟中,您將建立實際的 Firebase 專案和 Firebase Android 應用程式,以便與本程式碼研究室搭配使用。您也會在應用程式中新增應用程式專屬的 Firebase 設定。最後,您將設定實際的 Firebase 資源,以便與應用程式搭配使用。

建立 Firebase 專案

  1. 在瀏覽器中前往 Firebase 主控台
  2. 選取「新增專案」
  3. 選取或輸入專案名稱。您可以使用任何名稱。
  4. 這個程式碼研究室不需要 Google Analytics,因此您可以略過為專案啟用這項服務。
  5. 按一下「建立專案」。專案完成後,按一下「繼續」

升級 Firebase 定價方案

如要使用 Cloud Storage for Firebase,您的 Firebase 專案必須採用即付即用 (Blaze) 定價方案,也就是說已連結至 Cloud Billing 帳戶

  • 您必須提供付款方式 (例如信用卡),才能建立 Cloud Billing 帳戶。
  • 如果您是 Firebase 和 Google Cloud 的新手,請確認您是否符合$300 美元的抵免額和免費試用 Cloud Billing 帳戶的資格。
  • 如果您是為了參加活動而進行這個程式碼研究室,請向活動主辦單位詢問是否有任何 Cloud 抵用金。

如要將專案升級至 Blaze 方案,請按照下列步驟操作:

  1. 在 Firebase 控制台中,選取「升級方案」
  2. 選取 Blaze 方案。按照畫面上的指示將 Cloud Billing 帳戶連結至專案。
    如果您需要在升級過程中建立 Cloud Billing 帳戶,可能需要返回 Firebase 控制台的升級流程,才能完成升級。

將 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 控制台,然後按照下列步驟將 Android 專案註冊至 Firebase 專案:

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

設定 Firebase 驗證

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

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

如果您在稍後的程式碼研究室中收到「CONFIGURATION_NOT_FOUND」錯誤訊息,請返回這個步驟,仔細檢查您的工作。

設定即時資料庫

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

  1. 在 Firebase 主控台的左側面板中,展開「建構」,然後選取「即時資料庫」
  2. 按一下 [Create database] (建立資料庫)。
  3. 選取資料庫的位置,然後按一下「Next」
    如果是實際應用程式,請選擇距離使用者較近的位置。
  4. 按一下「以測試模式啟動」。詳閱安全性規則免責事項。
    在本程式碼研究室的後續步驟中,您將新增安全性規則來保護資料。請勿發布或公開應用程式,除非您已為資料庫新增安全性規則。
  5. 按一下「建立」
  6. 建立資料庫執行個體後,請選取「Rules」分頁,然後使用下列規則設定進行更新:
     {
       "rules": {
         "messages": {
           ".read": "auth.uid != null",
           ".write": "auth.uid != null"
         }
       }
     }
    

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

設定 Cloud Storage for Firebase

  1. 在 Firebase 主控台的左側面板中,展開「Build」,然後選取「Storage」
  2. 按一下「開始使用」
  3. 選取預設儲存體值區的位置。
    US-WEST1US-CENTRAL1US-EAST1 中的值區可使用 Google Cloud Storage 的「永遠免費」方案。其他所有位置的值區都會遵循 Google Cloud Storage 的定價和用量
  4. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
    在本程式碼研究室的後續部分,您將新增安全性規則來保護資料。請勿發布或公開應用程式,否則請為儲存空間值區新增安全規則。
  5. 按一下「建立」

連結至 Firebase 資源

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

// 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.DEBUGfalse