監控功能發布作業的效能

1. 總覽

在這個程式碼研究室中，您將瞭解如何在功能推出期間監控應用程式效能。我們的範例應用程式提供基本功能，並可根據 Firebase 遠端設定旗標顯示不同的背景圖片。我們將介紹如何檢測追蹤記錄來監控應用程式效能、為應用程式推出設定變更、監控效果，以及探索可以如何改善效能。

課程內容

  • 如何將 Firebase Performance Monitoring 新增至行動應用程式，以取得立即可用的指標，例如應用程式啟動時間、緩慢影格或凍結影格數
  • 如何新增自訂追蹤記錄，瞭解使用者歷程的關鍵程式碼路徑
  • 如何使用 Performance Monitoring 資訊主頁查看指標，並追蹤重要異動 (例如推出某項功能)
  • 如何設定成效快訊來監控重要指標
  • 如何推出 Firebase 遠端設定變更

事前準備

  • Android Studio 4.0 以上版本
  • 搭載 API 級別 16 以上的 Android 模擬器。
  • Java 8 以上版本
  • 對 Firebase 遠端設定的基本概念

2. 設定範例專案

下載程式碼

執行下列指令，複製本程式碼研究室的程式碼範例。這項操作會在你的電腦上建立名為 codelab-perf-rc-android 的資料夾：

$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git

如果您的機器上沒有 Git，您也可以直接從 GitHub 下載程式碼。

將 firebase-perf-rc-android-start 資料夾下的專案匯入 Android Studio。您可能會看到一些執行階段例外狀況，或是缺少 google-services.json 檔案的相關警告。我們將在下一節修正這個問題。

在本程式碼研究室中，您將使用 Firebase Assistant 外掛程式向 Firebase 專案註冊 Android 應用程式，並將必要的 Firebase 設定檔、外掛程式和依附元件加入 Android 專案 — 只需在 Android Studio 中操作即可！

將應用程式連結至 Firebase

  1. 前往「Android Studio」/「Help」(說明) >請檢查更新，確保您使用的是最新版的 Android Studio 和 Firebase Assistant。
  2. 選取「工具」>Firebase，開啟「Assistant」窗格。

c0e42ef063d21eab.png

  1. 選擇「Performance Monitoring」新增到應用程式，然後按一下「開始使用 Performance Monitoring」。
  2. 按一下「連結至 Firebase」，將 Android 專案連結至 Firebase (這會在瀏覽器中開啟 Firebase 控制台)。
  3. 在 Firebase 控制台中按一下「新增專案」，然後輸入 Firebase 專案名稱(如果您已有 Firebase 專案，可以改為選取該現有專案)。按一下「繼續」並接受條款，以建立 Firebase 專案和新的 Firebase 應用程式。

接著您應該會看到一個對話方塊，將新的 Firebase 應用程式連結至 Android Studio 專案。

51a549ebde2fe57a.png

  1. 點選「連線」。
  2. 開啟 Android Studio。「Assistant」窗格中會顯示確認訊息，指出應用程式已連結至 Firebase。

40c24c4a56a45990.png

在應用程式中新增 Performance Monitoring

在 Android Studio 的「Assistant」窗格中，按一下「Add Performance Monitoring to app」。

系統應會顯示「Accept Changes」對話方塊，然後 Android Studio 應同步處理應用程式，以確保已新增所有必要的依附元件。

3046f3e1f5fea06f.png

最後，Android Studio 的「Assistant」窗格應會顯示成功訊息，指出所有依附元件皆已正確設定。

62e79fd18780e320.png

另外，請按照「(選用) 啟用偵錯記錄功能」步驟中的操作說明啟用偵錯記錄功能。公開說明文件也提供相同的操作說明。

3. 執行應用程式

您現在應該能在應用程式的模組 (應用程式層級) 目錄中看到 google-services.json 檔案，而應用程式現在應可編譯。在 Android Studio 中，按一下「Run」(執行) >執行「app」，在 Android 模擬器上建構及執行應用程式。

應用程式執行期間，您應該先看到如下的啟動畫面：

ffbd413a6983b205.png

幾秒後，主頁面會顯示預設圖片：

d946cab0df319e50.png

後來發生了什麼事？

啟動畫面是在 SplashScreenActivity 中實作，並執行下列操作：

  1. 在 onCreate() 中，我們會初始化 Firebase 遠端設定設定，並擷取您將在本程式碼研究室後續的遠端設定資訊主頁中設定的設定值。
  2. 在 executeTasksBasedOnRC() 中，我們會讀取 seasonal_image_url 旗標的設定值。如果設定值是由網址提供，我們會同步下載圖片。
  3. 下載完成後，應用程式會前往 MainActivity，並呼叫 finish() 結束 SplashScreenActivity。

在 MainActivity 中，如果透過遠端設定定義 seasonal_image_url，系統就會啟用這項功能，並將下載的圖片顯示為主頁面的背景。否則會顯示預設圖片 (如上所示)。

4. 設置遠端設定

現在應用程式正在執行，您可以設定新功能旗標。

  1. 在 Firebase 控制台的左側面板中找到「Engage」部分，然後按一下「Remote Config」。
  2. 按一下「Create configuration」按鈕開啟設定表單，並將 seasonal_image_url 新增為參數鍵。
  3. 按一下「新增說明」，然後輸入說明：Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. 按一下「新增」->條件值 ->建立新條件。
  5. 在條件名稱部分，輸入 Seasonal image rollout。
  6. 在 Applies if... 部分選取 User in random percentile <= 0%。(您可以讓這項功能保持停用狀態，直到您準備好在後續步驟中推出為止。)
  7. 按一下「建立條件」。您稍後將使用這個條件向使用者推出新功能。

7a07526eb9e81623.png

  1. 開啟「建立您的第一個參數表單」，找出「季節性圖片推出作業的值」欄位。輸入要下載季節性圖片的網址：https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. 將預設值保留為空白字串。這表示系統會顯示程式碼集的預設圖片，而不是從網址下載的圖片。
  3. 按一下 [儲存]。

99e6cd2ebcdced.png

您可以看到新設定已建立草稿。

  1. 按一下「發布變更」並確認頂端的變更，即可更新應用程式。

39cd3e96d370c7ce.png

5. 新增資料載入時間的監控功能

您的應用程式會在顯示 MainActivity 前預先載入部分資料，並顯示啟動畫面來隱藏這項程序。您不希望使用者在這個畫面上等候的時間過長，因此通常最好能監控啟動畫面的顯示時間。

Firebase 效能監控功能可滿足您的需求。您可以檢測自訂程式碼追蹤記錄，監控應用程式中特定程式碼的成效，例如資料的載入時間和新功能的處理時間。

如要追蹤啟動畫面的顯示時間長度，您必須在 SplashScreenActivity 中新增自訂程式碼追蹤記錄，這是實作啟動畫面的 Activity。

  1. 初始化、建立及啟動名為 splash_screen_trace 的自訂程式碼追蹤記錄：

SplashScreenActivity.java

// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...

public class SplashScreenActivity extends AppCompatActivity {

    private static final String TAG = "SplashScreenActivity";
    private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";

    // TODO: Initialize splash_screen_trace
    private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
    
    // ...
}
  1. 在 SplashScreenActivity 的 onDestroy() 方法中結束追蹤記錄：

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

由於新功能會下載並處理圖片，因此您需要新增第二個自訂程式碼追蹤記錄，以追蹤功能新增至 SplashScreenActivity 的時間。

  1. 初始化、建立及啟動名為 splash_seasonal_image_processing 的自訂程式碼追蹤記錄：

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    if (!seasonalImageUrl.isEmpty()) {
        // TODO: Start the splash_seasonal_image_processing here
        final Trace seasonalImageProcessingTrace = FirebasePerformance
            .startTrace("splash_seasonal_image_processing");

        // ...
    }
}
  1. 在 RequestListener 的 onLoadFailed() 和 onResourceReady() 方法中結束追蹤記錄：

SplashScreenActivity.java

Glide.with(SplashScreenActivity.this.getApplicationContext())
    .asBitmap()
    .load(seasonalImageUrl)
    .signature(new ObjectKey(Utils.getCacheUUID()))
    .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(
            @Nullable GlideException e,
            Object model, Target<Bitmap> target,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model,
            Target<Bitmap> target, DataSource dataSource,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }
     })
     .preload();

您已新增自訂程式碼追蹤記錄來追蹤啟動畫面持續時間 (splash_screen_trace) 和新功能的處理時間 (splash_seasonal_image_processing)，請在 Android Studio 中再次執行應用程式。您應該會看到包含 Logging trace metric: splash_screen_trace 和追蹤記錄時間長度的記錄訊息。由於您尚未啟用新功能，因此不會看到 splash_seasonal_image_processing 的記錄訊息。

6. 將自訂屬性新增至追蹤記錄

如果是自訂程式碼追蹤記錄，Performance Monitoring 會自動記錄預設屬性 (如應用程式版本、國家/地區、裝置等常見的中繼資料)，方便您在 Firebase 控制台篩選追蹤記錄資料。您也可以新增及監控自訂屬性。

您剛剛在應用程式中新增兩個自訂程式碼追蹤記錄，可以監控新功能的啟動畫面持續時間，以及新功能的處理時間。而影響這些時間長度的因素可能是顯示的圖片是否為預設圖片，還是必須透過網址下載。因此，您最終可能會擁有不同的網址下載圖片。

因此，我們要在自訂程式碼追蹤記錄中新增代表季節性圖片網址的自訂屬性。如此一來，您日後就能依這些值篩選時間長度資料。

  1. 在 executeTasksBasedOnRC 方法的開頭，為 splash_screen_trace 新增自訂屬性 (seasonal_image_url_attribute)：

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
    if (seasonalImageUrl.isEmpty()) {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
    } else {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
    }

    // ...
}
  1. 請在 startTrace("splash_seasonal_image_processing") 呼叫後方，為 splash_seasonal_image_processing 新增相同的自訂屬性：

SplashScreenActivity.java

if (!seasonalImageUrl.isEmpty()) {
    // TODO: Start the splash_seasonal_image_processing here
    final Trace seasonalImageProcessingTrace = FirebasePerformance
        .startTrace("splash_seasonal_image_processing");

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
    seasonalImageProcessingTrace
        .putAttribute("seasonal_image_url_attribute", seasonalImageUrl);

    // ...
}

您已為這兩種自訂追蹤記錄 (splash_screen_trace 和 splash_seasonal_image_processing) 新增自訂屬性 (seasonal_image_url_attribute)，請在 Android Studio 中再次執行應用程式。您應該會看到一則記錄訊息，內含 Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. 您尚未啟用遠端設定參數 seasonalImageUrl，因此屬性值為 unset。

Performance Monitoring SDK 會收集追蹤記錄資料並傳送至 Firebase。您可以在 Firebase 控制台的「效能資訊主頁」中查看資料，我們將在程式碼研究室的下一個步驟中詳細說明。

7. 設定 Performance Monitoring 資訊主頁

設定資訊主頁來監控功能

在 Firebase 主控台中，選取包含 friendly Eats 應用程式的專案。

在左側面板中，找到「發布與」監控部分，然後按一下效能。

您應該會看到「Performance」資訊主頁，以及指標板中的第一個資料點！Performance Monitoring SDK 會收集應用程式的效能資料，並在收集後的幾分鐘內顯示資料。

f57e5450b70034c9.png

這個指標板可用來追蹤應用程式的重要指標。預設檢視畫麵包含應用程式開始時間追蹤記錄的時間長度，但您可以新增您最重視的指標。由於您正在追蹤新增的功能，因此可以自訂資訊主頁，顯示自訂程式碼追蹤 splash_screen_trace 的持續時間。

  1. 在空白的「選取指標」方塊中按一下。
  2. 在對話方塊視窗中，選取「Custom traces」的追蹤記錄類型，以及追蹤記錄名稱 splash_screen_trace。

1fb81f4dba3220e0.png

  1. 按一下「選取指標」，資訊主頁上就會顯示 splash_screen_trace 的時間！

您可以按照同樣的步驟新增您重視的其他指標，方便自己快速掌握指標成效隨時間變化，即使發布不同版本也沒問題。

1d465c021e58da3b.png

指標板是一項強大的工具，用於追蹤使用者所體驗主要指標的成效。在本程式碼研究室中，您只會取得少量資料，這些資料在狹窄的時間範圍內，因此將使用其他資訊主頁檢視畫面，協助您瞭解功能發布的成效。

8. 推出功能

監控設定完畢後，您現在可以推出 Firebase 遠端設定變更 (先前設定的 seasonal_image_url))。

如要推出變更，請返回 Firebase 控制台的遠端設定頁面，提高指定條件的使用者百分位數。通常，您會向一小部分使用者推出新功能，並等到您確定一切沒有問題後，再增加新功能。在本程式碼研究室中，您是應用程式唯一的使用者，因此您可以將百分位數變更為 100%。

  1. 按一下頁面頂端的「條件」分頁標籤。
  2. 按一下您先前新增的 Seasonal image rollout 條件。
  3. 將百分位數變更為 100%。
  4. 按一下 [Save Condition]。
  5. 按一下「發布變更」並確認變更。

70f993502b27e7a0.png

返回 Android Studio，在模擬器中重新啟動應用程式，即可查看新功能。啟動畫面後，您應該會看到新的空白狀態主畫面！

b0cc91b6e48fb842.png

9. 檢查成效變化

現在，讓我們透過 Firebase 控制台的「效能資訊主頁」查看啟動畫面載入的效能。在程式碼研究室的這個步驟中，您將使用資訊主頁的不同部分查看效能資料。

  1. 在主要「資訊主頁」分頁中，向下捲動至追蹤記錄表格，然後按一下「自訂追蹤記錄」分頁標籤。在這個表格中，您會看到之前新增的自訂程式碼追蹤記錄，以及一些立即可用的追蹤記錄。
  2. 現在您已啟用新功能，請找出自訂程式碼追蹤記錄 splash_seasonal_image_processing，也就是評估下載及處理圖片所需的時間。在追蹤記錄的「Duration」值中，可以看到這項下載和處理作業需要大量時間。

439adc3ec71805b7.png

  1. 由於您擁有 splash_seasonal_image_processing 的資料，因此可以將這個追蹤記錄的時間長度加到「資訊主頁」分頁頂端的指標看板。

和先前一樣，勾選其中一個空白的「選取指標」方塊。在對話方塊中，選取追蹤記錄類型「自訂追蹤記錄」和追蹤記錄名稱 splash_seasonal_image_processing。最後，按一下「選取指標」將這項指標加入指標板。

7fb64d2340410576.png

  1. 為了進一步確認差異，你可以進一步查看 splash_screen_trace 的資料。按一下指標面板中的 splash_screen_trace 資訊卡，然後點選「查看指標詳細資料」。

b1c275c30679062a.png

  1. 詳細資料頁面的左下方會顯示屬性清單，包括您之前建立的自訂屬性。按一下自訂屬性 seasonal_image_url_attribute，即可在右側查看每個季節性圖片網址的啟動畫面持續時間：

8fa1a69019bb045e.png

  1. 啟動畫面持續時間值可能與上方螢幕截圖中有些許不同，但相較於使用預設圖片 (以「未設定」表示)，從網址下載圖片時，您需要設定較長的持續時間。

在本程式碼研究室中，延長持續時間的原因可能很簡單，但在實際應用程式中，這可能並不明顯。收集到的時間長度資料來自不同的裝置，在不同網路連線條件下執行應用程式，這些條件可能比您的預期還差。讓我們看看在發生現實生活的情況下，你如何調查這個問題。

  1. 按一下頁面頂端的「成效」，返回「資訊主頁」主分頁：640b696b79d90103.png
  2. 在頁面底部的追蹤記錄表格中，按一下「網路要求」分頁標籤。在這個表格中，您會看到應用程式發出的所有網路要求匯總為網址模式，包括 images.unsplash.com/** 網址模式。如果比較這個回應時間的值與圖片下載及處理所需的總時間 (例如 splash_seasonal_image_processing 追蹤記錄的時間長度)，您會發現下載圖片上花費了大量時間。

6f92ce0f23494507.png

效能發現項目

使用 Firebase 效能監控功能後，您發現啟用新功能對使用者的影響如下：

  1. SplashScreenActivity的使用時間已增加。
  2. splash_seasonal_image_processing的持續時間太大。
  3. 這些延遲是由於圖片下載的回應時間，加上相應的圖片處理時間。

在下一個步驟中，您將復原功能，並決定如何改善此功能的實作方式，從而降低對效能的影響。

10. 復原功能

增加使用者不適合啟動啟動畫面的等待時間。遠端設定的主要優點之一，就是能夠暫停及復原推出作業，而不必向使用者發布其他版本。這可讓您快速回應問題 (例如您在上一個步驟中發現的效能問題)，並盡量減少不愉快的使用者人數。

如要快速解決這個問題，您可以將推出百分位數重設回 0，讓所有使用者再次看到預設映像檔：

  1. 返回 Firebase 控制台的「遠端設定」頁面。
  2. 按一下頁面頂端的「條件」。
  3. 按一下您先前新增的 Seasonal image rollout 條件。
  4. 將百分位數變更為 0%。
  5. 按一下 [Save Condition]。
  6. 按一下「發布變更」並確認變更。

18c4f1cbac955a04.png

在 Android Studio 中重新啟動應用程式，接著應該會看到原始的空白狀態主畫面：

d946cab0df319e50.png

11. 修正效能問題

您先前在程式碼研究室中發現，為啟動畫面下載圖片會導致應用程式速度變慢。仔細查看已下載的圖片，發現使用的是圖片原始解析度，檔案大小超過 2 MB！如要快速修正效能問題，請將畫質降低至合適的解析度，以減少下載圖片所需的時間。

重新推出遠端設定值

  1. 返回 Firebase 控制台的「遠端設定」頁面。
  2. 按一下 seasonal_image_url 參數的「Edit」圖示。
  3. 將季節性圖片推出的值更新為 https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640，然後按一下「儲存」。

828dd1951a2ec4a4.png

  1. 按一下頁面頂端的「條件」分頁標籤。
  2. 按一下「季節性圖片推出」，然後將百分位數回去 100%。
  3. 按一下 [Save Condition]。

1974fa3bb789f36c.png

  1. 按一下「發布變更」按鈕。

12. 測試修正結果並設定快訊

在本機執行應用程式

將新設定值設為使用其他下載圖片網址後，請再次執行應用程式。這次，您會發現啟動畫面停留的時間比之前還短。

b0cc91b6e48fb842.png

查看變更的成效

返回 Firebase 控制台的「效能」資訊主頁，查看指標的外觀。

  1. 這次您將使用追蹤記錄表格前往詳細資料頁面。在追蹤記錄表格的「自訂追蹤記錄」分頁中，按一下自訂追蹤記錄 splash_seasonal_image_processing，再次查看更詳細的時間長度指標詳細資料。

2d7aaca03112c062.png

  1. 按一下自訂屬性 seasonal_image_url_attribute，即可再次查看自訂屬性的細目。如果將滑鼠遊標懸停在網址上，系統會顯示與縮減尺寸圖片 (https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640) (結尾為 ?w=640) 相符的值。與這張圖片相關聯的時間長度值遠小於上一張圖片的值，對使用者而言比較可接受！

10e30c037a4237a2.png

  1. 現在，您已提升啟動畫面的效能，可以設定快訊，在追蹤記錄超過所設門檻時收到通知。開啟「效能」資訊主頁，然後按一下 splash_screen_trace 的溢位選單 (三點) 圖示，然後按一下「快訊設定」。

4bd0a2a1faa14479.png

  1. 按一下切換按鈕啟用「時間長度」快訊。將門檻值設為略高於您看到的值，這樣當 splash_screen_trace 超過門檻時，你會收到電子郵件通知。
  1. 按一下「儲存」即可建立快訊。向下捲動至「追蹤記錄表格」，然後按一下「自訂追蹤」分頁標籤，即可看到快訊是否已啟用！

2bb93639e2218d1.png

13. 恭喜！

恭喜！您已啟用 Firebase Performance Monitoring SDK 和收集的追蹤記錄，以評估新功能的成效！您監控了新功能推出後的主要成效指標，並在發現效能問題時迅速採取因應措施。這一切都能透過遠端設定進行變更，即時監控效能問題。

涵蓋內容

  • 在應用程式中加入 Firebase Performance Monitoring SDK
  • 在程式碼中加入自訂的追蹤記錄，即可評估特定功能
  • 設定遠端設定參數和條件值，以控制/推出新功能
  • 瞭解如何使用效能監控資訊主頁，找出推出期間的問題
  • 設定效能快訊，讓系統在應用程式效能超過您設定的門檻時通知您

瞭解詳情