機能ロールアウトのパフォーマンス監視

1。概要

このコードラボでは、機能のロールアウト中にアプリのパフォーマンスを監視する方法を学習します。サンプルアプリには基本的な機能があり、Firebase RemoteConfigフラグに基づいて異なる背景画像を表示するように設定されています。インストルメンテーショントレースを調べてアプリのパフォーマンスを監視し、アプリの構成変更をロールアウトし、効果を監視して、パフォーマンスを改善する方法を確認します。

あなたが学ぶこと

  • モバイルアプリにFirebasePerformance Monitoringを追加して、すぐに使用できる指標(アプリの開始時間や遅いフレームやフリーズしたフレームなど)を取得する方法
  • カスタムトレースを追加して、ユーザージャーニーの重要なコードパスを理解する方法
  • パフォーマンス監視ダッシュボードを使用してメトリックを監視し、機能のロールアウトなどの重要な変更を追跡する方法
  • Firebase RemoteConfigの変更をロールアウトする方法

前提条件

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アシスタントのAndroid Studio内からのすべて- Firebaseのプロジェクトで私たちのAndroidアプリを登録して、私のAndroidプロジェクトに必要なFirebase設定ファイル、プラグイン、および依存関係を追加するプラグインを!

アプリをFirebaseに接続します

  1. 更新は、あなたは、Android StudioとFirebaseアシスタントの最新バージョンを使用していることを確認するためにチェック> Androidのメーカー/ヘルプに移動します。
  2. [ツール]> [Firebaseは、アシスタントのペインを開きます。

2fe37593d5b76c7.png

  1. あなたのアプリに追加するパフォーマンスの監視を選択し、クリックがパフォーマンス監視を使ってみましょう
  2. Firebase(これはブラウザでFirebaseコンソールを開きます)とあなたのAndroidプロジェクトを接続するためにFirebaseに接続]クリックします。
  3. Firebaseコンソールで、クリックFirebaseプロジェクト名を入力します(すでにFirebaseプロジェクトを持っている場合、あなたが代わりにその既存のプロジェクトを選択することができます)、その後、プロジェクトを追加します。クリックして続行しFirebaseプロジェクトと新しいFirebaseアプリケーションを作成するために、条件を受け入れます。
  1. あなたは、次のあなたのAndroid Studioプロジェクトに新しいFirebaseアプリケーションを接続するためのダイアログが表示されます。

38e2c00493a8d4d4.png

  1. 戻るのAndroid Studioで、アシスタントペインで、あなたのアプリがFirebaseに接続されていることを確認が表示されるはずです。

dda8bdd9488167a0.png

アプリにパフォーマンスモニタリングを追加する

アンドロイドStudioのアシスタントペインで、あなたのアプリケーションにパフォーマンスの監視を追加]をクリックします。

あなたはすべての必要な依存関係が追加されていることを確認するには、Android Studioのアプリを同期する必要があり、その後、変更を受け入れ、ダイアログが表示されるはずです。

9b58145acc4be030.png

最後に、あなたはすべての依存関係が正しく設定されていることのAndroid Studioのアシスタントペインに成功メッセージが表示されるはずです。

378356b65be49df8.png

追加のステップとして、「(オプション)デバッグログを有効にする」ステップの指示に従うことによって、デバッグログを有効にします。同じ命令もで利用可能なパブリックのドキュメント

3.アプリを実行します

あなたは今見るべきgoogle-services.jsonのアプリのモジュール(アプリレベル)ディレクトリ内のファイルを、そしてあなたのアプリが今コンパイルする必要があります。 Androidのメーカーでは、あなたのAndroidエミュレータでアプリをビルドして実行するファイル名を指定して実行>実行「アプリ」をクリックしてください。

アプリの実行中は、最初に次のようなスプラッシュ画面が表示されます。

843a786fe3f42d0f.png

次に、数秒後、デフォルトの画像を含むメインページが表示されます。

e4b8dac61e405c61.png

内部で何が起こっているのですか?

スプラッシュ画面がで実装されSplashScreenActivityと次の処理を行います。

  1. onCreate()我々はFirebaseリモートコンフィグ設定を初期化し、後でこのコードラボでのリモートコンフィグダッシュボードに設定されただろうと設定値を取得します。
  2. executeTasksBasedOnRC()我々は、の設定値読みseasonal_image_urlフラグを。設定値でURLが指定されている場合は、画像を同期的にダウンロードします。
  3. ダウンロードが完了したら、アプリへのナビゲートMainActivityと呼び出しはfinish()エンドにSplashScreenActivity

MainActivity場合、 seasonal_image_urlリモートコンフィグによって定義され、機能が有効になり、ダウンロードした画像は、メインページの背景として表示されます。それ以外の場合は、デフォルトの画像(上に表示)が表示されます。

4.リモート構成を設定します

アプリが実行されたので、新しい機能フラグを設定できます。左側のパネルでFirebaseコンソールリモートコンフィグをクリックし、セクションをエンゲージ見つけます。

パラメータカードを追加で:

  1. 追加seasonal_image_urlパラメータキーとして。
  2. クリックして、説明を追加し、この説明を入力します。 Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  3. クリックして条件の値を追加します- > [新しい条件を定義します
  4. 条件名の場合は、入力します。 Seasonal image rollout
  5. 以下のためApplies if...セクション、選択User in random percentile <= 0%(後のステップで展開する準備ができるまで、この機能を無効のままにしておきます。)
  6. 条件の作成]クリックします。後でこの条件を使用して、ユーザーに新機能を展開します。

11547904ae42262d.png

  1. 戻るパラメータカード追加し季節の画像ロールアウトフィールドの値では、季節の画像をダウンロードするところからURLを入力してくださいで: https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. デフォルト値は空の文字列のままにします。これは、URLからダウンロードされた画像ではなく、コードベースのデフォルトの画像が表示されることを意味します。
  3. 追加パラメータをクリックします。 45933b3f09e69849.png
  4. 新しい構成がドラフトとして作成されたことがわかります。クリックして変更を公開し、我々のアプリを更新するために、上部の変更を確認。

38aa4cbe87bc58d3.png

5.データ読み込み時間の監視を追加します

我々のアプリ、プリロードいくつかのデータを示す前にMainActivityこのプロセスを非表示にして表示スプラッシュスクリーンを。ユーザーがこの画面で長時間待機することは望ましくないため、通常、スプラッシュ画面が表示される時間を監視することは有益です。

Firebase Performance Monitoringは、まさにそれを行う方法を提供します。あなたは楽器できるカスタムコードのトレースは、データのロード時間と私たちの新しい機能の処理時間のように-あなたのアプリ内の特定のコードのパフォーマンスを監視します。

スプラッシュ画面が表示されているどのくらいの時間を追跡するために、我々はにカスタムコードのトレースを追加します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. トレース終了onDestroy()のメソッドSplashScreenActivity

SplashScreenActivity.java

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

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

私たちの新しい機能のダウンロードので、画像を処理し、我々は我々の機能が追加している追加の時間を追跡します2番目のカスタムコードのトレース追加します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. 両方のトレースを終了onLoadFailed()onResourceReady()のメソッドRequestListener

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.カスタム属性をトレースに追加します

あなたは、トレース用のデータをフィルタリングできるように、カスタムコードのトレースのために、パフォーマンスの監視が自動的にデフォルトの属性(などのアプリのバージョン、国、デバイス、などの共通メタデータ)を記録しますFirebaseコンソール。また、追加して監視することができますカスタム属性を

このアプリでは、スプラッシュ画面の継続時間と新機能の処理時間を監視するために、2つのカスタムコードトレースを追加しました。これらの期間に影響を与える可能性のある要因は、表示される画像がデフォルトの画像であるかどうか、または画像をURLからダウンロードする必要があるかどうかです。そして、誰が知っているか–私たちは最終的に画像をダウンロードするための異なるURLを持つかもしれません。

それでは、季節の画像のURLを表すカスタム属性をこれらのカスタムコードトレースに追加しましょう。そうすれば、後でこれらの値で期間データをフィルタリングできます。

  1. カスタム属性(追加seasonal_image_url_attributeするために) splash_screen_traceの初めにexecuteTasksBasedOnRC方法:

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. 以下のために同じカスタム属性の追加splash_seasonal_image_processing右後startTrace("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);

    // ...
}

今、あなたはカスタム属性(追加したことをseasonal_image_url_attributeカスタムトレース(の両方のために) splash_screen_tracesplash_seasonal_image_processing )、再びのAndroid Studioでアプリを実行します。あなたは含まれていログメッセージが表示されるはずですSetting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'.私たちは、まだリモートコンフィグパラメータを有効にしていないseasonalImageUrl属性値がある理由でunset

Performance Monitoring SDKは、トレースデータを収集し、Firebaseに送信します。あなたには、データを表示することができ、パフォーマンスダッシュボード、我々はコードラボの次の段階で詳細に説明しますFirebaseコンソール、の。

7.パフォーマンスモニタリングダッシュボードを構成します

機能を監視するようにダッシュボードを構成する

Firebaseコンソール、あなたのフレンドリー食べるアプリを持っているプロジェクトを選択します。

左側のパネルで、リリース&モニターセクションを見つけ、クリックしパフォーマンスを

あなたの評価指標のボードにあなたの非常に最初のデータポイントを使用してパフォーマンスのダッシュボードが表示されるはずです! Performance Monitoring SDKは、アプリからパフォーマンスデータを収集し、収集後数分以内に表示します。

16d8b0db35956361.png

このメトリクスボードは、アプリの主要なメトリクスを追跡できる場所です。デフォルトのビューには、アプリの開始時間トレースの期間が含まれますが、最も気になる指標を追加できます。我々は我々が追加した新機能を追跡しているので、私たちは、カスタムコードのトレースの期間表示するには、私たちのダッシュボードをカスタマイズすることができsplash_screen_trace

  1. 空の選択メトリックのボックスのいずれかをクリックしてください。
  2. ダイアログウィンドウでは、カスタム・トレースのトレース・タイプとトレース名の選択splash_screen_trace

f3735b336c8c4b8.png

  1. メトリックを選択しクリックすると、期間中表示されるはずですsplash_screen_traceダッシュボードに追加します!

これらの同じ手順を使用して、関心のある他のメトリックを追加できるため、時間の経過とともに、リリースが異なっていても、パフォーマンスがどのように変化するかをすばやく確認できます。

e7ac31d452e95dba.png

メトリックボードがある強力なツールをユーザーが経験した主要指標のパフォーマンスを追跡します。このコードラボでは、狭い時間範囲のデータセットが少ないため、機能のロールアウトのパフォーマンスを理解するのに役立つ他のダッシュボードビューを使用します。

8.機能を展開します

今、私たちは私たちの監視を設定したことを、私たちはFirebaseリモートコンフィグ変更(ロールアウトする準備が整いましたseasonal_image_url)我々は以前に設定していることを。

変更ロールアウトのために、我々はに戻って行くよリモートコンフィグページ当社のターゲット条件のユーザーパーセンタイルを高めるためにFirebaseコンソールで。通常、新しい機能を一部のユーザーに公開し、問題がないと確信できる場合にのみ機能を増やします。ただし、このコードラボでは、アプリのユーザーは私たちだけなので、パーセンタイルを100%に変更できます。

  1. ページの上部にある[条件]タブをクリックします。
  2. クリックしてSeasonal image rollout以前に追加した状態を。
  3. パーセンタイルを100%に変更します。
  4. 保存状態]クリックします。
  5. クリックして変更を公開して、変更を確定します。

83b527dd7918d288.png

Android Studioに戻り、エミュレーターでアプリを再起動して、新機能を確認します。スプラッシュ画面の後に、新しい空の状態のメイン画面が表示されます。

c4ad503bda164ab6.png

9.パフォーマンスの変化を確認します

今スプラッシュスクリーン搭載のパフォーマンスアウトのチェックを使用してみましょうパフォーマンスダッシュボードFirebaseコンソールでを。コードラボのこのステップでは、ダッシュボードのさまざまな部分を使用してパフォーマンスデータを表示します。

  1. メインダッシュボード]タブで、その後、トレーステーブルにスクロールダウンカスタムトレース]タブをクリックします。この表では、あなたは私たちが前に追加したカスタムコードのトレースに加えて、いくつか表示されますすぐにトレースを
  2. 今、私たちは新しい機能を有効にしていることを、カスタムコードのトレースのために見てsplash_seasonal_image_processingそれはダウンロードして、画像を処理するのにかかった時間を測定し、。トレースのDuration値から、我々は、このダウンロードと処理はかなりの時間を要していることがわかります。

ccb4e5762dfc4abb.png

  1. 我々はデータを持っているのでsplash_seasonal_image_processing 、我々は、ダッシュボード]タブの上部にある私たちのメトリクスボードにこのトレースの期間を追加することができます。

前と同様に、空の選択の1つのメトリックのボックスをクリックしてください。ダイアログウィンドウでは、トレース型のカスタムトレースとトレース名を選択splash_seasonal_image_processing 。最後に、メトリクスボードにこのメトリックを追加するためにメトリック選択]をクリックします。

c0768ce8f147336a.png

  1. 違いはさらに確認するために、我々はのためのデータを詳しく見てとることができsplash_screen_trace 。クリックしてsplash_screen_traceメトリックボードにカード、[表示メトリック詳細]クリックします。

637c29b428a4b98c.png

  1. 詳細ページの左下に、前に作成したカスタム属性を含む属性のリストが表示されます。カスタム属性をクリックしseasonal_image_url_attribute右上の各季節の画像URLのスプラッシュ画面の時間を表示します:

f809ac2f7fc095fb.png

  1. あなたのスプラッシュ画面期間の値は、おそらく上記のスクリーンショットに比べてビット異なるものになりますが、画像は(「未設定」によって表される)デフォルトの画像を使用して対URLからダウンロードされたとき、あなたは長い期間が必要です。

このコードラボでは、この長い期間の理由は簡単かもしれませんが、実際のアプリでは、それほど明白ではない場合があります。収集される期間データは、さまざまなネットワーク接続条件でアプリを実行しているさまざまなデバイスから取得されます。これらの条件は、予想よりも悪い場合があります。これが現実の状況である場合、この問題をどのように調査するかを見てみましょう。

  1. ダッシュボードのメインタブに戻り、ページの上部にパフォーマンスをクリックします。 103568148fde6aeb.png
  2. ページの下部にトレーステーブルでは、ネットワークの要求]タブをクリックします。この表では、アプリからのすべてのネットワーク要求表示されますURLパターンに集約含め、 images.unsplash.com/** URLパターンを。あなたはそれが画像のダウンロードや処理にかかる全体的な時間に、この応答時間の値を比較した場合(すなわち、の期間splash_seasonal_image_processingトレースが)、私たちは多くの時間が画像をダウンロードに費やされていることがわかります。

d629934fc7ad4903.png

パフォーマンスの調査結果

Firebase Performance Monitoringを使用すると、新機能を有効にしたエンドユーザーに次のような影響が見られました。

  1. 費やす時間SplashScreenActivity増加しています。
  2. 以下のための期間splash_seasonal_image_processing非常に大きかったです。
  3. 遅延は、イメージのダウンロードの応答時間と、イメージに必要な対応する処理時間によるものでした。

次のステップでは、機能をロールバックし、機能の実装を改善する方法を特定することで、パフォーマンスへの影響を軽減します。

10.機能をロールバックします

スプラッシュ画面中のユーザーの待機時間を増やすことは望ましくありません。 Remote Configの主な利点の1つは、ユーザーに別のバージョンをリリースしなくても、ロールアウトを一時停止して元に戻すことができることです。これにより、問題(前のステップで発見したパフォーマンスの問題など)に迅速に対応し、不幸なユーザーの数を最小限に抑えることができます。

速い緩和として、我々はパーセンタイルバックに展開をリセットします0すべてのユーザーの皆様には再びデフォルトの画像が表示されますので、こと:

  1. 戻るリモートコンフィグページFirebaseコンソールで。
  2. ページの上部にある条件をクリックします。
  3. クリックしてSeasonal image rollout先ほど追加条件。
  4. 0%にパーセンタイルを変更します
  5. 保存状態]クリックします。
  6. クリックして変更を公開して、変更を確定します。

9ed5808f15d2432.png

Android Studioでアプリを再起動すると、元の空の状態のメイン画面が表示されます。

e4b8dac61e405c61.png

11.パフォーマンスの問題を修正します

以前、コードラボで、スプラッシュ画面の画像をダウンロードするとアプリの速度が低下することがわかりました。ダウンロードした画像を詳しく見ると、我々は2メガバイトを超えていた画像の元の解像度を使用していることを参照してください!パフォーマンスの問題に対する簡単な解決策の1つは、品質をより適切な解像度に下げて、画像のダウンロードにかかる時間を短縮することです。

RemoteConfig値を再度ロールアウトします

  1. 戻るリモートコンフィグページFirebaseコンソールで。
  2. 編集アイコンをクリックしseasonal_image_urlパラメータを。
  3. 季節のイメージの展開のための価値更新https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 、[更新]クリックします。

79ff14f179636316.png

  1. ページの上部にある[条件]タブをクリックします。
  2. 季節のイメージ展開をクリックし、その後、100%にパーセンタイルバックを設定します。
  3. 保存状態]クリックします。

4578d491f02708a5.png

  1. 変更内容を公開ボタンをクリックします。

12.モニタリングを使用してアプリをテストします

アプリをローカルで実行する

別のダウンロードイメージURLを使用するように設定された新しい構成値を使用して、アプリを再実行します。今回は、スプラッシュ画面に費やす時間が以前よりも短くなっていることに注意してください。

c4ad503bda164ab6.png

変更のパフォーマンスを表示する

私たちは、に戻ることができ、パフォーマンスダッシュボード、当社の指標がどのように見えるか確認するためにFirebaseコンソールで。

  1. 今回は、トレーステーブルを使用して詳細ページに移動します。トレース・テーブルの下には、カスタムトレース]タブでは、カスタムトレースクリックsplash_seasonal_image_processing再びメトリックその期間のより詳細な図を参照してください。

71f13ad560bbddba.png

  1. カスタム属性をクリックしseasonal_image_url_attribute再びカスタム属性の内訳を見るために。 :URLを超えるホバーあなたがいる場合は、縮小画像のための新しいURLと一致するものが表示されますhttps://images.unsplash.com/photo-1552691021-7043334e0b51?w=640して( ?w=640で終わり)。この画像に関連付けられている期間の値は、前の画像の値よりもかなり短く、ユーザーにとってより受け入れやすいものです。

e522b4f0f315ce3f.png

13.おめでとうございます!

おめでとう! Firebase Performance Monitoring SDKを有効にし、トレースを収集して、新機能のパフォーマンスを測定しました。新機能のロールアウトに関する主要なパフォーマンスメトリックを監視し、パフォーマンスの問題が発見されたときに迅速に対応することができました。これはすべて、Remote Configを使用して構成を変更し、パフォーマンスの問題をリアルタイムで監視する機能によって可能になりました。

何をカバーしましたか?

  • Firebase Performance MonitoringSDKをアプリに追加する
  • 特定の機能を測定するためにコードにカスタムコードトレースを追加する
  • 新しい機能を制御/ロールアウトするためのRemoteConfigパラメーターと条件値の設定
  • パフォーマンス監視ダッシュボードを使用してロールアウト中に問題を特定する方法を理解する

もっと詳しく知る