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

1. 總覽

螢幕截圖

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

歡迎使用 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 Emulator Suite。

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. 讀取訊息

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

匯入範例訊息

  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

請使用下方定義的程式碼,修改 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. 在模擬器套件 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 中,按一下 execute「Run」(執行) 按鈕。
  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,因此可以略過為專案啟用 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. 按一下「Register App」,然後點選「Download 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 Authentication 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. 選取預設 Storage 值區的位置。
    US-WEST1US-CENTRAL1US-EAST1 中的值區可以利用 Google Cloud Storage 的「一律免費」方案。其他所有位置的值區都會按照 Google Cloud Storage 的定價和用量收費。
  4. 按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
    在本程式碼研究室中,您將新增安全性規則來保護資料。請勿發布或公開應用程式,否則請為儲存空間值區新增安全規則。
  5. 按一下「建立」

連結至 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.DEBUGfalse