本頁面由 Cloud Translation API 翻譯而成。

您的第一個應用程式內通訊實驗

1. 簡介

目標

在本程式碼研究室中，您將針對採用 Flutter 和 Cloud Firestore 的多平台行動餐廳推薦應用程式，進行應用程式內訊息實驗。

完成後，您就能設計及實作應用程式內訊息實驗，在編寫最少量的程式碼的情況下，有效提高任何 iOS 或 Android 應用程式的使用者參與度。

課程內容

如何在 Flutter 應用程式中使用 Firebase 應用程式內通訊 (FIAM)
如何自訂應用程式內通訊訊息的外觀
如何設計應用程式內通訊實驗，並在應用程式中導入
如何解讀應用程式內通訊實驗的結果

您想在本程式碼研究室中學習哪些內容？

我對這個主題不熟悉，希望能獲得完整的概略說明。

我對這個主題略知一二，但想複習一下。

我想找專案中可用的程式碼範例。

我想瞭解特定內容。

Firebase 應用程式內通訊

Firebase 應用程式內通訊功能 (FIAM) 可協助您與密集使用應用程式的使用者互動，方法是傳送指定目標且符合情境的訊息給使用者，促使他們完成關鍵的應用程式內動作，例如破解遊戲關卡、購買商品或訂閱內容。

Firebase A/B 測試

Firebase A/B 測試 (ABT) 採用 Google 最佳化工具，可讓您輕鬆執行、分析及調整產品與行銷實驗，進而改善應用程式體驗。透過這項功能，您可以測試對應用程式使用者介面、功能或參與度廣告活動所做的變更，以在廣泛實作之前，瞭解變更是否確實能對關鍵指標 (例如收益和留存率) 發揮效用。

需求條件

如果您不熟悉 Flutter 或 Firestore，請先完成「Flutter 版 Firebase」程式碼研究室：

您可以使用下列任一裝置執行本程式碼研究室：

已連接至電腦並設為開發人員模式的實體裝置 (Android 或 iOS)。
iOS 模擬器。(需要安裝 Xcode 工具)。
Android 模擬器。(需要在 Android Studio 中進行設定)。

除了上述項目外，您還需要：

你偏好的瀏覽器，例如 Chrome。
您選擇的 IDE 或文字編輯器，例如 Android Studio 或 VS Code (已設定 Dart 和 Flutter 外掛程式)。建議您搭配使用 Flutter 和 VS Code。
最新的 Flutter 穩定版 (如果您喜歡嘗試新功能，可以使用 Beta 版)。
用於建立及管理 Firebase 專案的 Google 帳戶 (例如 Gmail 帳戶)。
程式碼研究室的程式碼範例。請參閱下一個步驟，瞭解如何取得程式碼。

2. 做好準備

取得程式碼

從指令列複製 GitHub 存放區：

git clone https://github.com/FirebaseExtended/codelab-friendlyeats-flutter.git friendlyeats-flutter

程式碼範例會複製到 friendlyeats-flutter 目錄。從現在起，請務必從這個目錄執行指令：

cd friendlyeats-flutter

接著，變更至程式碼研究室目錄並查看 fiam-abt 分支：

git checkout fiam-abt

這個分支版本包含本程式碼研究室所需的所有程式碼，包括 done 資料夾中的完成版本。這個存放區中的其他分支包含建構 FriendlyEats 應用程式的程式碼，如多平台 Firestore Flutter 程式碼研究室所示。為了方便您在本程式碼研究室中進行操作，我們已移除這個分支中的網頁整合功能。

匯入範例應用程式

開啟或匯入 codelab-fiam-abt 目錄至您偏好的 IDE。這個目錄包含程式碼研究室的起始程式碼，其中包含餐廳推薦應用程式。透過本程式碼研究室，您將為此應用程式的使用者進行應用程式內訊息實驗。

建立 Firebase 專案

在 Firebase 控制台中，按一下「新增專案」，然後將 Firebase 專案命名為「FriendlyEats」。記下 Firebase 專案的專案 ID (或按一下「編輯」圖示，設定偏好的專案 ID)。
確認專案已啟用 Google Analytics，然後按一下「繼續」。
按一下 [Create Project]。

恭喜！您剛建立第一個 Firebase 專案。您現在可以按一下專案名稱，進入控制台。

接下來，您將透過 Firebase 主控台設定及啟用必要服務。

啟用匿名驗證功能

雖然本程式碼研究室的焦點並非驗證，但在應用程式中加入某種驗證機制相當重要。您將使用匿名登入功能，也就是在使用者未收到提示的情況下，讓他們悄悄登入。

如何啟用匿名登入功能：

在 Firebase 控制台的左側導覽列中，找出「驗證」。
依序點選「驗證」和「開始使用」，然後選取「登入方式」分頁標籤 (或直接前往 Firebase 主控台)。
啟用「匿名」登入供應商，然後點選「儲存」。

啟用「匿名登入」功能後，應用程式就能在使用者存取應用程式時，自動為他們登入。如需更多資訊，請參閱 Android 和 iOS 的匿名驗證說明文件。

設定 Cloud Firestore

應用程式會使用 Cloud Firestore 儲存及接收餐廳資訊和評分。

以下說明如何在 Firebase 專案中設定 Cloud Firestore：

在 Firebase 主控台的左側面板中展開「Build」，然後選取「Firestore database」。
按一下 [Create database] (建立資料庫)。
將「資料庫 ID」設為 (default)。
選取資料庫的位置，然後按一下「Next」。
如果是實際應用程式，請選擇距離使用者較近的位置。
按一下「以測試模式啟動」。請詳閱安全性規則免責事項。
在本程式碼研究室的後續部分，您將新增安全性規則來保護資料。請勿發布或公開應用程式，除非您已為資料庫新增安全性規則。
按一下「建立」。

3. 行動裝置專屬 Firebase 設定

啟用 Firebase 支援功能所需的大部分程式碼變更，都已檢查至您正在使用的專案。不過，如要新增行動平台支援功能，您必須：

在 Firebase 專案中註冊所需平台
下載特定平台的設定檔，然後將其加入程式碼。

在 Flutter 應用程式的頂層目錄中，有名為 ios 和 android 的子目錄。這些目錄分別包含 iOS 和 Android 的特定平台設定檔。

設定 iOS

在 Firebase 控制台中，選取左側導覽列頂端的「專案設定」，然後點選「一般」頁面「您的應用程式」下方的 iOS 按鈕。

您應該會看到下列對話方塊：

您必須提供的重要值是 iOS 軟體包 ID。您可以執行下列三個步驟，取得套件 ID。

在指令列工具中，前往 Flutter 應用程式的頂層目錄。
執行 open ios/Runner.xcworkspace 指令來開啟 Xcode。

在 Xcode 中，按一下左側窗格中的頂層「Runner」，右側窗格會顯示「General」分頁，如圖所示。複製「Bundle Identifier」值。

返回 Firebase 對話方塊，將複製的「Bundle Identifier」貼到「iOS 軟體包 ID」欄位，然後按一下「Register App」。

繼續在 Firebase 中按照操作說明下載設定檔 GoogleService-Info.plist。
返回 Xcode。請注意，Runner 有一個名為 Runner 的子資料夾 (如上圖所示)。
將剛下載的 GoogleService-Info.plist 檔案拖曳至該 Runner 子資料夾。
在 Xcode 中顯示的對話方塊中，按一下「Finish」。
返回 Firebase 控制台。在設定步驟中，按一下「Next」，跳過剩餘步驟，然後返回 Firebase 控制台的主頁面。

您已完成為 iOS 設定 Flutter 應用程式！

設定 Android

在 Firebase 控制台中，選取左側導覽列頂端的「專案設定」，然後點選「一般」頁面「您的應用程式」下方的「Android」按鈕。

您應該會看到下列對話方塊：

您必須提供重要的 Android 套件名稱值。您可以透過執行下列兩個步驟取得套件名稱：

在 Flutter 應用程式目錄中，開啟 android/app/src/main/AndroidManifest.xml 檔案。
在 manifest 元素中，找出 package 屬性的字串值。這個值是 Android 套件名稱 (例如 com.yourcompany.yourproject)。請複製這個值。
在 Firebase 對話方塊中，將複製的套件名稱貼到「Android 套件名稱」欄位。
您不需要為這個程式碼研究室取得偵錯簽署憑證 SHA-1。請將此欄留空。
按一下「註冊應用程式」。
接著在 Firebase 中按照操作說明下載設定檔 google-services.json。
前往 Flutter 應用程式目錄，然後將您剛下載的 google-services.json 檔案移至 android/app 目錄。
返回 Firebase 控制台，略過剩餘步驟，然後返回 Firebase 控制台的主頁面。
所有 Gradle 設定都已提交。如果應用程式仍在執行中，請關閉並重建應用程式，讓 Gradle 安裝依附元件。

您已完成 Android 版 Flutter 應用程式的設定！

4. 在本機執行應用程式

您現在可以開始著手應用程式了！首先，請在本機執行應用程式。您現在可以在任何已設定 (且有裝置和模擬器可用) 的平台上執行應用程式。

使用下列指令，找出可用的裝置：

flutter devices

視可用的裝置而定，上述指令的輸出內容會類似以下內容：

現在，請使用下列指令在本機執行應用程式：

flutter run

您現在應該會看到 FriendlyEats 副本已連結至 Firebase 專案。

應用程式會自動連線至您的 Firebase 專案，並以匿名使用者的身分靜默登入。

5. 建立及測試第一則訊息

將 Firebase 應用程式內通訊整合至應用程式

應用程式內通訊功能的基本整合作業完全無需程式碼，只要新增依附元件即可開始使用！在 pubspec.yaml 檔案中新增下列依附元件

dependencies:
  # ...
  firebase_in_app_messaging: ^0.4.0
  # ...

在 Firebase 控制台中撰寫訊息

您已將 FIAM 新增至應用程式，現在讓我們撰寫訊息，在應用程式首次開啟時觸發。

如要撰寫第一則訊息，請按照下列步驟操作：

在 Firebase 控制台的「互動」專區中，按一下「應用程式內通訊」。
在「應用程式內訊息」窗格中，按一下「建立第一個廣告活動」。

讓我們撰寫基本對話方塊訊息，確認整合作業是否正常運作。你可以自由自訂訊息，例如加入圖片、按鈕或變更顏色。

請務必指定要用於測試的應用程式，具體取決於您採用的整合路徑，您可能會使用 iOS、Android 或兩者。

我們想確保在應用程式開啟時觸發訊息，因此預設排程設定會在這裡運作。

排程完成後，我們就能發布訊息。點選「Review」(查看)，畫面應會顯示類似下方的畫面

在應用程式中查看訊息

現在，請解除安裝並重新安裝應用程式，您應該會在開啟時看到您建立的訊息。恭喜！您剛剛傳送了第一則應用程式內訊息！在下一個步驟中，您將瞭解如何新增數據分析事件，以便根據使用者在應用程式中採取的動作，觸發應用程式內訊息。

6. 整合 Firebase Analytics 以觸發進階訊息

將 Firebase Analytics 整合至應用程式

為了瞭解使用者如何與應用程式互動，並根據使用者操作觸發應用程式內訊息，我們現在會在使用者點選餐廳時新增 Analytics 事件。

在 pubspec.yaml 中將 Firebase Analytics 依附元件新增至 Flutter

dependencies:
  # ...
  firebase_analytics: ^1.0.1
  # ...

在 home_page.dart 中匯入數據分析

import 'package:firebase_analytics/firebase_analytics.dart';

將 Firebase Analytics 例項新增至 home_page.dart 中的 HomePage 類別

class HomePage extends StatefulWidget {
  static const route = '/';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

當使用者在 home_page.dart 中點選餐廳資訊卡時觸發 Analytics 事件

onRestaurantPressed: (id) async {
  await HomePage.analytics.logEvent(name: 'click_restaurant');
  Navigator.pushNamed(context,
                      RestaurantPage.route,
                      arguments: RestaurantPageArguments(id: id));
})

編輯訊息，以便在數據分析事件觸發時顯示

有了「click_restaurant」事件後，我們可以根據該事件觸發應用程式內訊息，而非在使用者開啟應用程式時觸發。

在 Firebase 控制台中返回「應用程式內通訊訊息」頁面，然後編輯現有廣告活動

接著變更排程部分，觸發新事件的訊息

接著，我們可以按一下「review」按鈕來發布變更內容

在應用程式中測試觸發條件

此時，您應該可以使用

flutter run

點選餐廳後，您應該會看到應用程式內訊息

7. 建立 FIAM+ABT 廣告活動

先設定目標

Friendlyeats 應用程式已經很不錯，但我們需要一些評論，才能讓應用程式更實用。這些評論來自 Friendlyeats 使用者，因此我們要想辦法鼓勵使用者留下評論。

首先，讓我們定義轉換事件

我們想瞭解使用者是否會評論餐廳，因此請新增 Analytics 事件來評估這項行為。

如同前述，匯入 Firebase Analytics，並在 restaurant_page.dart 中將 Analytics 例項新增至 RestaurantPage

class RestaurantPage extends StatefulWidget {
  static const route = '/restaurant';
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  final String _restaurantId;
  RestaurantPage({Key key, @required String restaurantId})
      : _restaurantId = restaurantId,
        super(key: key);
  @override
  _RestaurantPageState createState() =>
      _RestaurantPageState(restaurantId: _restaurantId);
}

接下來，我們要在 restaurant_page.dart 中儲存評論時，觸發 _onCreateReviewPressed 中的事件

 if (newReview != null) {
   // Log successful review
   await RestaurantPage.analytics.logEvent(name: 'review_success');
   // Save the review
   return data.addReview(restaurantId: _restaurant.id, review: newReview);
 }

在 Firebase 控制台中設定 A/B 測試

瞭解如何建立應用程式內訊息廣告活動後，現在就來思考您希望透過這些廣告活動在應用程式中鼓勵哪些行為。我們希望更多人為 FriendlyEats 留下評論，讓應用程式更實用！您可以透過應用程式內訊息，以幾種方式鼓勵使用者這樣做。一種方法是透過簡單的應用程式內訊息，告訴使用者應為餐廳提供評論，以協助改善 FriendlyEats 應用程式。另一種方法是透過應用程式內訊息，提供某種獎勵，鼓勵使用者提供評論，例如特定餐廳的優待券或折扣代碼。

這兩種做法都能提高使用者在 FriendlyEats 上為餐廳評論的頻率，但在這種情況下，提供優惠券似乎更能發揮作用。不過，提供這張優惠券後，使用者撰寫評論的可能性會增加多少？優待券的價格是否值得？為了判斷這項問題，我們將執行應用程式內通訊實驗！我們可以使用 Firebase A/B 測試功能，隨機向使用者顯示其中一個應用程式內訊息，並評估這項操作對使用者行為的影響，就像臨床試驗一樣。最棒的是，您可以完全透過 Firebase 控制台完成這項操作，完全不需要寫程式碼！

如要編寫第一個應用程式內通訊實驗，請按照下列步驟操作：

在 Firebase 控制台的「互動交流」專區中，按一下「A/B 測試」。
按一下「建立實驗」，然後選取要進行應用程式內通訊實驗的變化版本。系統會帶您前往下方所示的實驗產生器。

為實驗命名並新增說明 (選用)。

接下來，您將撰寫要傳送給實驗對象的不同應用程式內訊息。我們將撰寫的第一則應用程式內訊息是「基準」，也就是實驗的控制組。我們可以將這段文字做為簡單的「請撰寫評論」訊息：

有了基準值後，我們現在要撰寫變化版本，也就是提供優惠券代碼的應用程式內訊息，鼓勵使用者留下評論。雖然下方預覽畫面並未完整顯示，但訊息標題為「領取優待券，留下評論！」，訊息內文則是「下次到 Burrito Cafe 用餐時，結帳時輸入優待券代碼 FRIENDLYEATS-15，即可享 15% 折扣。別忘了在使用後留下評論！」希望這能吸引部分使用者前往 Burrito Cafe！

在下一個步驟中，我們會指定應用程式並設定曝光率。這是在實驗中看到其中一個訊息的符合資格使用者 (符合指定目標/觸發條件) 所占百分比。在本例中，我們可以將這個值設為 100%，因為我們希望所有使用者都能看到控制組或優惠券變化版本。如果您想讓控制組完全不顯示應用程式內訊息，可以降低這項曝光百分比。

接下來，您將為實驗定義一些目標。這是我們想評估的實驗結果。我們會將這項事件設為前一個章節定義的 review_success 數據分析事件，因為我們想瞭解各種應用程式內訊息對使用者留下餐廳評論的影響。
在排程方面，我們會讓廣告活動立即開始，並將 click_restaurant 設為觸發條件，這樣使用者點選餐廳時，就會看到這兩則應用程式內訊息中的一則。

接下來，您只需檢查實驗，然後按一下「開始實驗」即可。接著，我們就可以坐等實驗資料囉！

查看即時資料收集

實驗開始後，FriendlyEats 使用者點選餐廳時，系統會隨機顯示我們撰寫的兩則應用程式內訊息，分別是基準訊息或變化版本訊息。系統會根據使用者看到的訊息，將使用者分為兩組。接著，我們可以前往 Firebase 控制台 (同樣在 A/B 測試部分)，比較兩組的即時數據分析資料。資料需要一段時間才能送達，因為我們必須等待使用者實際看到應用程式內訊息，並採取相應行動。收集到足夠的資料後，結果可能會如下所示：

在這個案例中，變化版本的表現大幅優於基準值，因此我們可以選擇選取「導入變化版本」，向所有使用者放送含有優待券的應用程式內訊息。

8. 恭喜！

恭喜，您已成功建立並執行第一個應用程式內訊息實驗。您現在可以在自己的應用程式中進行實驗，並根據結果提升應用程式內訊息廣告活動的成效。

後續步驟

查看一些程式碼研究室…

延伸閱讀

我們才剛開始瞭解 Firebase 應用程式內通訊和 Firebase A/B 測試的功能。如要進一步瞭解，請參閱以下文章：

參考文件

透過 A/B 版本測試建立應用程式內通訊實驗