Leistungsüberwachung von Feature-Rollouts

1. Übersicht

In diesem Codelab erfahren Sie, wie Sie die Leistung Ihrer App während einer Funktionseinführung überwachen. Unsere Beispiel-App verfügt über grundlegende Funktionen und ist so eingerichtet, dass sie basierend auf einem Firebase Remote Config-Flag ein anderes Hintergrundbild anzeigt. Wir gehen die Instrumentierungsspuren durch, um die Leistung der App zu überwachen, führen eine Konfigurationsänderung an der App durch, überwachen die Auswirkung und sehen, wie wir die Leistung verbessern können.

Was Sie lernen werden

  • So fügen Sie Firebase Performance Monitoring zu Ihrer mobilen App hinzu, um sofort einsatzbereite Metriken zu erhalten (z. B. App-Startzeit und langsame oder eingefrorene Frames)
  • So fügen Sie benutzerdefinierte Traces hinzu, um kritische Codepfade Ihrer User Journeys zu verstehen
  • So verwenden Sie das Performance Monitoring-Dashboard, um Ihre Kennzahlen zu verstehen und wichtige Änderungen wie die Einführung einer Funktion zu verfolgen
  • So richten Sie Leistungswarnungen ein, um Ihre wichtigsten Kennzahlen zu überwachen
  • So führen Sie eine Firebase-Remote-Konfigurationsänderung durch

Voraussetzungen

  • Android Studio 4.0 oder höher
  • Ein Android-Emulator mit API-Level 16 oder höher.
  • Java-Version 8 oder höher
  • Ein grundlegendes Verständnis von Firebase Remote Config

2. Richten Sie das Beispielprojekt ein

Laden Sie den Code herunter

Führen Sie den folgenden Befehl aus, um den Beispielcode für dieses Codelab zu klonen. Dadurch wird auf Ihrem Computer ein Ordner namens codelab-perf-rc-android erstellt:

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

Wenn Sie Git nicht auf Ihrem Computer haben, können Sie den Code auch direkt von GitHub herunterladen.

Importieren Sie das Projekt im Ordner firebase-perf-rc-android-start in Android Studio. Sie werden wahrscheinlich einige Laufzeitausnahmen oder vielleicht eine Warnung über eine fehlende google-services.json -Datei sehen. Wir werden dies im nächsten Abschnitt korrigieren.

In diesem Codelab verwenden Sie das Firebase Assistant- Plugin, um Ihre Android-App bei einem Firebase-Projekt zu registrieren und die erforderlichen Firebase-Konfigurationsdateien, Plugins und Abhängigkeiten zu Ihrem Android-Projekt hinzuzufügen – alles in Android Studio !

Verbinden Sie Ihre App mit Firebase

  1. Gehen Sie zu Android Studio / Hilfe > Nach Updates suchen, um sicherzustellen, dass Sie die neuesten Versionen von Android Studio und dem Firebase Assistant verwenden.
  2. Wählen Sie „Extras“ > „Firebase“ , um den Assistentenbereich zu öffnen.

c0e42ef063d21eab.png

  1. Wählen Sie „Leistungsüberwachung“ aus, um sie Ihrer App hinzuzufügen, und klicken Sie dann auf „Erste Schritte mit der Leistungsüberwachung“ .
  2. Klicken Sie auf „Mit Firebase verbinden“ , um Ihr Android-Projekt mit Firebase zu verbinden (dadurch wird die Firebase-Konsole in Ihrem Browser geöffnet) .
  3. Klicken Sie in der Firebase-Konsole auf Projekt hinzufügen und geben Sie dann einen Firebase-Projektnamen ein (wenn Sie bereits ein Firebase-Projekt haben, können Sie stattdessen dieses vorhandene Projekt auswählen) . Klicken Sie auf „Weiter“ und akzeptieren Sie die Bedingungen, um das Firebase-Projekt und eine neue Firebase-App zu erstellen.

Als nächstes sollte ein Dialogfeld zum Verbinden Ihrer neuen Firebase-App mit Ihrem Android Studio-Projekt angezeigt werden.

51a549ebde2fe57a.png

  1. Klicken Sie auf „Verbinden“ .
  2. Öffnen Sie Android Studio. Im Assistentenbereich sehen Sie die Bestätigung, dass Ihre App mit Firebase verbunden ist.

40c24c4a56a45990.png

Fügen Sie Ihrer App Leistungsüberwachung hinzu

Klicken Sie im Assistentenbereich von Android Studio auf Leistungsüberwachung zu Ihrer App hinzufügen .

Es sollte ein Dialogfeld zum Akzeptieren von Änderungen angezeigt werden. Anschließend sollte Android Studio Ihre App synchronisieren, um sicherzustellen, dass alle erforderlichen Abhängigkeiten hinzugefügt wurden.

3046f3e1f5fea06f.png

Abschließend sollten Sie im Assistentenbereich von Android Studio die Erfolgsmeldung sehen, dass alle Abhängigkeiten korrekt eingerichtet sind.

62e79fd18780e320.png

Aktivieren Sie als zusätzlichen Schritt die Debug-Protokollierung , indem Sie den Anweisungen im Schritt „(Optional) Debug-Protokollierung aktivieren“ folgen. Die gleichen Anweisungen sind auch in der öffentlichen Dokumentation verfügbar.

3. Führen Sie die App aus

Sie sollten jetzt die Datei google-services.json im Modulverzeichnis (App-Ebene) Ihrer App sehen und Ihre App sollte jetzt kompiliert werden. Klicken Sie in Android Studio auf „Ausführen “ > „App ausführen“, um die App auf Ihrem Android-Emulator zu erstellen und auszuführen.

Wenn die App ausgeführt wird, sollte zunächst ein Begrüßungsbildschirm wie dieser angezeigt werden:

ffbd413a6983b205.png

Dann wird nach einigen Sekunden die Hauptseite mit dem Standardbild angezeigt:

d946cab0df319e50.png

Was passiert unter der Haube?

Der Begrüßungsbildschirm ist in SplashScreenActivity implementiert und führt Folgendes aus:

  1. In onCreate() initialisieren wir die Firebase Remote Config-Einstellungen und rufen die Konfigurationswerte ab, die Sie später in diesem Codelab im Remote Config-Dashboard festlegen.
  2. In executeTasksBasedOnRC() lesen wir den Konfigurationswert des Flags seasonal_image_url aus. Wenn durch den Konfigurationswert eine URL bereitgestellt wird, laden wir das Bild synchron herunter.
  3. Sobald der Download abgeschlossen ist, navigiert die App zu MainActivity und ruft finish() auf, um SplashScreenActivity zu beenden.

Wenn in MainActivity seasonal_image_url über Remote Config definiert ist, wird die Funktion aktiviert und das heruntergeladene Bild wird als Hintergrund der Hauptseite angezeigt. Andernfalls wird das Standardbild (siehe oben) angezeigt.

4. Richten Sie die Remote-Konfiguration ein

Da Ihre App nun ausgeführt wird, können Sie das neue Feature-Flag einrichten.

  1. Suchen Sie im linken Bereich der Firebase-Konsole den Abschnitt „Engage“ und klicken Sie dann auf „Remote-Konfiguration“ .
  2. Klicken Sie auf die Schaltfläche „Konfiguration erstellen“ , um das Konfigurationsformular zu öffnen, und fügen Sie seasonal_image_url als Parameterschlüssel hinzu.
  3. Klicken Sie auf Beschreibung hinzufügen und geben Sie dann diese Beschreibung ein: Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. Klicken Sie auf Neu hinzufügen -> Bedingter Wert -> Neue Bedingung erstellen .
  5. Geben Sie als Bedingungsnamen Seasonal image rollout ein.
  6. Wählen Sie für den Abschnitt Applies if... die Option User in random percentile <= 0% aus. (Sie möchten die Funktion deaktiviert lassen, bis Sie sie in einem späteren Schritt einführen können.)
  7. Klicken Sie auf Bedingung erstellen . Sie werden diese Bedingung später verwenden, um die neue Funktion für Ihre Benutzer bereitzustellen.

7a07526eb9e81623.png

  1. Öffnen Sie das Formular „Erstellen Sie Ihren ersten Parameter“ und suchen Sie das Rollout-Feld „Wert für saisonales Bild“ . Geben Sie die URL ein, unter der das saisonale Bild heruntergeladen wird: https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. Belassen Sie den Standardwert als leere Zeichenfolge. Dies bedeutet, dass das Standardbild in der Codebasis angezeigt wird und nicht ein von einer URL heruntergeladenes Bild.
  3. Klicken Sie auf Speichern .

99e6cd2ebcdced.png

Sie können sehen, dass die neue Konfiguration als Entwurf erstellt wird.

  1. Klicken Sie auf Änderungen veröffentlichen und bestätigen Sie die Änderungen oben, um Ihre App zu aktualisieren.

39cd3e96d370c7ce.png

5. Fügen Sie eine Überwachung der Datenladezeit hinzu

Ihre App lädt vor der Anzeige von MainActivity einige Daten vor und zeigt einen Begrüßungsbildschirm an, um diesen Vorgang auszublenden. Sie möchten nicht, dass Ihre Benutzer zu lange auf diesem Bildschirm warten. Daher ist es normalerweise sinnvoll, zu überwachen, wie lange der Begrüßungsbildschirm angezeigt wird.

Firebase Performance Monitoring bietet eine Möglichkeit, genau das zu tun. Sie können benutzerdefinierte Code-Traces instrumentieren, um die Leistung eines bestimmten Codes in Ihrer App zu überwachen – beispielsweise die Ladezeit für Daten und die Verarbeitungszeit Ihrer neuen Funktion.

Um zu verfolgen, wie lange der Begrüßungsbildschirm angezeigt wird, fügen Sie einen benutzerdefinierten Code-Trace zu SplashScreenActivity hinzu, der Activity , die den Begrüßungsbildschirm implementiert.

  1. Initialisieren, erstellen und starten Sie einen benutzerdefinierten Code-Trace mit dem Namen 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. Beenden Sie den Trace in der onDestroy() Methode von SplashScreenActivity :

SplashScreenActivity.java

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

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

Da Ihre neue Funktion ein Bild herunterlädt und verarbeitet, fügen Sie einen zweiten benutzerdefinierten Code-Trace hinzu, der die zusätzliche Zeit verfolgt, die Ihre Funktion zu SplashScreenActivity hinzugefügt hat.

  1. Initialisieren, erstellen und starten Sie einen benutzerdefinierten Code-Trace mit dem Namen 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. Beenden Sie den Trace in den Methoden onLoadFailed() und onResourceReady() des 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();

Nachdem Sie nun benutzerdefinierte Code-Traces hinzugefügt haben, um die Dauer des Begrüßungsbildschirms ( splash_screen_trace) und die Verarbeitungszeit der neuen Funktion ( splash_seasonal_image_processing ) zu verfolgen, führen Sie die App erneut in Android Studio aus. Es sollte eine Protokollierungsmeldung angezeigt werden, die Logging trace metric: splash_screen_trace enthält, gefolgt von der Dauer der Ablaufverfolgung. Für splash_seasonal_image_processing wird keine Protokollmeldung angezeigt, da Sie die neue Funktion noch nicht aktiviert haben.

6. Fügen Sie der Ablaufverfolgung ein benutzerdefiniertes Attribut hinzu

Bei benutzerdefinierten Code-Traces protokolliert Performance Monitoring automatisch Standardattribute (allgemeine Metadaten wie App-Version, Land, Gerät usw.), sodass Sie die Daten für den Trace in der Firebase-Konsole filtern können. Sie können auch benutzerdefinierte Attribute hinzufügen und überwachen.

In Ihrer App haben Sie gerade zwei benutzerdefinierte Code-Traces hinzugefügt, um die Dauer des Begrüßungsbildschirms und die Verarbeitungszeit der neuen Funktion zu überwachen. Ein Faktor, der diese Dauer beeinflussen kann, ist, ob das angezeigte Bild das Standardbild ist oder ob das Bild von einer URL heruntergeladen werden muss. Und wer weiß – vielleicht haben Sie irgendwann andere URLs, von denen Sie ein Bild herunterladen.

Fügen wir diesen benutzerdefinierten Code-Traces also ein benutzerdefiniertes Attribut hinzu, das die saisonale Bild-URL darstellt. Auf diese Weise können Sie die Dauerdaten später nach diesen Werten filtern.

  1. Fügen Sie das benutzerdefinierte Attribut ( seasonal_image_url_attribute ) für splash_screen_trace am Anfang der Methode executeTasksBasedOnRC hinzu:

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. Fügen Sie das gleiche benutzerdefinierte Attribut für splash_seasonal_image_processing “ direkt nach dem Aufruf startTrace("splash_seasonal_image_processing") hinzu:

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);

    // ...
}

Nachdem Sie nun ein benutzerdefiniertes Attribut ( seasonal_image_url_attribute ) für Ihre beiden benutzerdefinierten Ablaufverfolgungen ( splash_screen_trace und splash_seasonal_image_processing ) hinzugefügt haben, führen Sie die App erneut in Android Studio aus. Sie sollten eine Protokollmeldung sehen, die Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. Sie haben den Remote-Config-Parameter saisonaleImageUrl noch nicht aktiviert, weshalb der Attributwert unset ist.

Das Performance Monitoring SDK sammelt die Trace-Daten und sendet sie an Firebase. Sie können die Daten im Performance- Dashboard der Firebase-Konsole anzeigen, was wir im nächsten Schritt des Codelabs ausführlich erläutern.

7. Konfigurieren Sie Ihr Performance Monitoring-Dashboard

Konfigurieren Sie Ihr Dashboard, um Ihre Funktion zu überwachen

Wählen Sie in der Firebase-Konsole das Projekt aus, das Ihre Friendly Eats-App enthält.

Suchen Sie im linken Bereich den Abschnitt „Veröffentlichung und Überwachung“ und klicken Sie dann auf „Leistung“ .

Sie sollten Ihr Leistungs- Dashboard mit Ihren allerersten Datenpunkten in Ihrem Metrik-Board sehen! Das Performance Monitoring SDK sammelt Leistungsdaten von Ihrer App und zeigt sie innerhalb von Minuten nach der Erfassung an.

f57e5450b70034c9.png

In diesem Metrik-Board können Sie wichtige Metriken für Ihre App verfolgen. Die Standardansicht umfasst die Dauer Ihrer App-Startzeitverfolgung, Sie können jedoch die Metriken hinzufügen, die Ihnen am wichtigsten sind. Da Sie die von Ihnen hinzugefügte neue Funktion verfolgen, können Sie Ihr Dashboard so anpassen, dass die Dauer des benutzerdefinierten Code-Trace splash_screen_trace angezeigt wird.

  1. Klicken Sie auf eines der leeren Felder „Metrik auswählen“ .
  2. Wählen Sie im Dialogfenster den Trace-Typ „Benutzerdefinierte Traces“ und den Trace-Namen splash_screen_trace aus.

1fb81f4dba3220e0.png

  1. Klicken Sie auf „Metrik auswählen“ und Sie sollten die Dauer von splash_screen_trace sehen, die zu Ihrem Dashboard hinzugefügt wurde!

Sie können dieselben Schritte verwenden, um andere Metriken hinzuzufügen, die Ihnen wichtig sind, sodass Sie schnell erkennen können, wie sich deren Leistung im Laufe der Zeit und sogar bei verschiedenen Versionen ändert.

1d465c021e58da3b.png

Das Metrik-Board ist ein leistungsstarkes Tool zum Verfolgen der Leistung wichtiger Kennzahlen, die Ihre Benutzer erleben. Für dieses Codelab verfügen Sie über einen kleinen Datensatz in einem engen Zeitbereich, sodass Sie andere Dashboard-Ansichten verwenden, die Ihnen helfen, die Leistung des Feature-Rollouts zu verstehen.

8. Führen Sie Ihre Funktion ein

Nachdem Sie nun Ihre Überwachung eingerichtet haben, können Sie die Firebase Remote Config-Änderung ( seasonal_image_url) einführen, die Sie zuvor eingerichtet haben.

Um eine Änderung einzuführen, kehren Sie zur Seite „Remote-Konfiguration“ in der Firebase-Konsole zurück, um den Benutzerperzentil Ihrer Targeting-Bedingung zu erhöhen. Normalerweise würden Sie neue Funktionen für einen kleinen Teil der Benutzer bereitstellen und sie nur erweitern, wenn Sie sicher sind, dass es keine Probleme damit gibt. In diesem Codelab sind Sie jedoch die einzigen Benutzer der App, sodass Sie das Perzentil auf 100 % ändern können.

  1. Klicken Sie oben auf der Seite auf die Registerkarte „Bedingungen“ .
  2. Klicken Sie auf die Seasonal image rollout , die Sie zuvor hinzugefügt haben.
  3. Ändern Sie das Perzentil auf 100 %.
  4. Klicken Sie auf Bedingung speichern .
  5. Klicken Sie auf Änderungen veröffentlichen und bestätigen Sie die Änderungen.

70f993502b27e7a0.png

Zurück in Android Studio starten Sie die App in Ihrem Emulator neu, um die neue Funktion anzuzeigen. Nach dem Begrüßungsbildschirm sollten Sie den neuen Hauptbildschirm mit leerem Status sehen!

b0cc91b6e48fb842.png

9. Überprüfen Sie Leistungsänderungen

Schauen wir uns nun die Leistung beim Laden des Begrüßungsbildschirms mithilfe des Performance- Dashboards in der Firebase-Konsole an. In diesem Schritt des Codelabs verwenden Sie verschiedene Teile des Dashboards, um Leistungsdaten anzuzeigen.

  1. Scrollen Sie auf der Hauptregisterkarte des Dashboards nach unten zur Traces-Tabelle und klicken Sie dann auf die Registerkarte Benutzerdefinierte Traces . In dieser Tabelle sehen Sie die benutzerdefinierten Code-Traces, die Sie zuvor hinzugefügt haben, sowie einige sofort einsatzbereite Traces .
  2. Nachdem Sie die neue Funktion aktiviert haben, suchen Sie nach dem benutzerdefinierten Code-Trace splash_seasonal_image_processing “, der die Zeit gemessen hat, die zum Herunterladen und Verarbeiten des Bildes benötigt wurde. Anhand des Werts „Dauer “ der Ablaufverfolgung können Sie erkennen, dass dieser Download und die Verarbeitung viel Zeit in Anspruch nehmen.

439adc3ec71805b7.png

  1. Da Sie über Daten für splash_seasonal_image_processing verfügen, können Sie die Dauer dieser Ablaufverfolgung zu Ihrer Metriktafel oben auf der Registerkarte „Dashboard“ hinzufügen.

Klicken Sie ähnlich wie zuvor auf eines der leeren Felder „Metrik auswählen“ . Wählen Sie im Dialogfenster den Trace-Typ Benutzerdefinierte Traces und den Trace-Namen splash_seasonal_image_processing aus. Klicken Sie abschließend auf „Metrik auswählen“ , um diese Metrik zum Metrik-Board hinzuzufügen.

7fb64d2340410576.png

  1. Um die Unterschiede weiter zu bestätigen, können Sie sich die Daten für splash_screen_trace genauer ansehen. Klicken Sie im Metrik-Board auf die Karte splash_screen_trace und dann auf „Metrikdetails anzeigen“ .

b1c275c30679062a.png

  1. Auf der Detailseite sehen Sie unten links eine Liste mit Attributen, einschließlich des benutzerdefinierten Attributs, das Sie zuvor erstellt haben. Klicken Sie auf das benutzerdefinierte Attribut seasonal_image_url_attribute , um die Begrüßungsbildschirmdauer für jede saisonale Bild-URL auf der rechten Seite anzuzeigen:

8fa1a69019bb045e.png

  1. Die Werte für die Dauer Ihres Begrüßungsbildschirms unterscheiden sich wahrscheinlich etwas von denen im Screenshot oben, Sie sollten jedoch eine längere Dauer haben, wenn das Bild von einer URL heruntergeladen wird, anstatt das Standardbild (dargestellt durch „unset“) zu verwenden.

In diesem Codelab ist der Grund für diese längere Dauer möglicherweise klar, in einer echten App ist er jedoch möglicherweise nicht so offensichtlich. Die gesammelten Dauerdaten stammen von verschiedenen Geräten, auf denen die App unter verschiedenen Netzwerkverbindungsbedingungen ausgeführt wird. Diese Bedingungen können schlechter sein als erwartet. Schauen wir uns an, wie Sie dieses Problem untersuchen würden, wenn es sich um eine reale Situation handeln würde.

  1. Klicken Sie oben auf der Seite auf „Leistung“ , um zur Hauptregisterkarte „Dashboard“ zurückzukehren: 640b696b79d90103.png
  2. Klicken Sie in der Traces-Tabelle unten auf der Seite auf die Registerkarte Netzwerkanforderungen . In dieser Tabelle sehen Sie alle Netzwerkanfragen Ihrer App , zusammengefasst in URL-Mustern , einschließlich des URL-Musters images.unsplash.com/** . Wenn Sie den Wert dieser Antwortzeit mit der Gesamtzeit vergleichen, die für das Herunterladen und Verarbeiten des Bildes benötigt wird (d. h. die Dauer der Spur splash_seasonal_image_processing “), können Sie erkennen, dass ein großer Teil der Zeit für das Herunterladen des Bildes aufgewendet wird.

6f92ce0f23494507.png

Leistungsbefunde

Bei Verwendung der Firebase-Leistungsüberwachung konnten Sie bei aktivierter neuer Funktion die folgenden Auswirkungen auf die Endbenutzer feststellen:

  1. Die für SplashScreenActivity aufgewendete Zeit hat zugenommen.
  2. Die Dauer für splash_seasonal_image_processing war sehr lang.
  3. Die Verzögerung war auf die Reaktionszeit beim Herunterladen des Bildes und die entsprechende Verarbeitungszeit für das Bild zurückzuführen.

Im nächsten Schritt mindern Sie die Auswirkungen auf die Leistung, indem Sie die Funktion zurücksetzen und ermitteln, wie Sie die Implementierung der Funktion verbessern können.

10. Setzen Sie die Funktion zurück

Es ist nicht wünschenswert, die Wartezeit Ihrer Benutzer während des Begrüßungsbildschirms zu verlängern. Einer der Hauptvorteile von Remote Config ist die Möglichkeit, Ihren Rollout anzuhalten und rückgängig zu machen, ohne eine andere Version für Ihre Benutzer freigeben zu müssen. Dadurch können Sie schnell auf Probleme reagieren (z. B. die Leistungsprobleme, die Sie im letzten Schritt entdeckt haben) und die Anzahl unzufriedener Benutzer minimieren.

Als schnelle Abhilfemaßnahme setzen Sie das Rollout-Perzentil wieder auf 0 zurück, sodass alle Ihre Benutzer wieder das Standardbild sehen:

  1. Gehen Sie zurück zur Seite „Remote-Konfiguration“ in der Firebase-Konsole.
  2. Klicken Sie oben auf der Seite auf Bedingungen .
  3. Klicken Sie auf die Seasonal image rollout die Sie zuvor hinzugefügt haben.
  4. Ändern Sie das Perzentil auf 0 %.
  5. Klicken Sie auf Bedingung speichern .
  6. Klicken Sie auf Änderungen veröffentlichen und bestätigen Sie die Änderungen.

18c4f1cbac955a04.png

Starten Sie die App in Android Studio neu und Sie sollten den ursprünglichen Hauptbildschirm mit leerem Zustand sehen:

d946cab0df319e50.png

11. Beheben Sie die Leistungsprobleme

Sie haben zuvor im Codelab festgestellt, dass das Herunterladen eines Bildes für Ihren Begrüßungsbildschirm zu einer Verlangsamung Ihrer App geführt hat. Wenn Sie sich das heruntergeladene Bild genauer ansehen, sehen Sie, dass Sie die Originalauflösung des Bildes verwenden, die über 2 MB lag! Eine schnelle Lösung für Ihr Leistungsproblem besteht darin, die Qualität auf eine angemessenere Auflösung zu reduzieren, damit das Herunterladen des Bildes weniger Zeit in Anspruch nimmt.

Führen Sie den Remote Config-Wert erneut aus

  1. Gehen Sie zurück zur Seite „Remote-Konfiguration“ in der Firebase-Konsole.
  2. Klicken Sie auf das Symbol „Bearbeiten“ für den Parameter seasonal_image_url .
  3. Aktualisieren Sie den Rollout „Wert für saisonales Bild“ auf https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 und klicken Sie dann auf Speichern .

828dd1951a2ec4a4.png

  1. Klicken Sie oben auf der Seite auf die Registerkarte „Bedingungen“ .
  2. Klicken Sie auf das Rollout „Saisonales Bild“ und setzen Sie dann das Perzentil wieder auf 100 %.
  3. Klicken Sie auf Bedingung speichern .

1974fa3bb789f36c.png

  1. Klicken Sie auf die Schaltfläche Änderungen veröffentlichen .

12. Testen Sie den Fix und richten Sie Warnungen ein

Führen Sie die App lokal aus

Wenn der neue Konfigurationswert so eingestellt ist, dass eine andere Download-Bild-URL verwendet wird, führen Sie die App erneut aus. Dieses Mal sollten Sie feststellen, dass die Verweildauer auf dem Begrüßungsbildschirm kürzer ist als zuvor.

b0cc91b6e48fb842.png

Sehen Sie sich die Leistung der Änderungen an

Kehren Sie zum Performance- Dashboard in der Firebase-Konsole zurück, um zu sehen, wie die Metriken aussehen.

  1. Dieses Mal verwenden Sie die Traces-Tabelle, um zur Detailseite zu navigieren. Klicken Sie unten in der Traces-Tabelle auf der Registerkarte „Benutzerdefinierte Traces“ auf den benutzerdefinierten Trace splash_seasonal_image_processing “, um erneut eine detailliertere Ansicht seiner Dauermetrik anzuzeigen.

2d7aaca03112c062.png

  1. Klicken Sie auf das benutzerdefinierte Attribut seasonal_image_url_attribute , um die Aufschlüsselung der benutzerdefinierten Attribute noch einmal anzuzeigen. Wenn Sie mit der Maus über die URLs fahren, wird ein Wert angezeigt, der der neuen URL für das verkleinerte Bild entspricht: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (mit ?w=640 Am Ende). Der mit diesem Bild verbundene Dauerwert ist erheblich kürzer als der Wert für das vorherige Bild und für Ihre Benutzer akzeptabler!

10e30c037a4237a2.png

  1. Nachdem Sie nun die Leistung Ihres Begrüßungsbildschirms verbessert haben, können Sie Benachrichtigungen einrichten, die Sie benachrichtigen, wenn eine Ablaufverfolgung einen von Ihnen festgelegten Schwellenwert überschreitet. Öffnen Sie das Performance- Dashboard , klicken Sie auf das Überlaufmenüsymbol (drei Punkte) für „splash_screen_trace“ und dann auf „Warnungseinstellungen“ .

4bd0a2a1faa14479.png

  1. Klicken Sie auf den Schalter, um die Dauerwarnung zu aktivieren. Stellen Sie den Schwellenwert so ein, dass er etwas über dem angezeigten Wert liegt, sodass Sie eine E-Mail erhalten, wenn Ihr „splash_screen_trace“ den Schwellenwert überschreitet.
  1. Klicken Sie auf Speichern , um Ihre Benachrichtigung zu erstellen. Scrollen Sie nach unten zur Traces-Tabelle und klicken Sie dann auf die Registerkarte „Benutzerdefinierte Traces“ , um zu sehen, dass Ihre Warnung aktiviert ist!

2bb93639e2218d1.png

13. Herzlichen Glückwunsch!

Glückwunsch! Sie haben das Firebase Performance Monitoring SDK aktiviert und Traces gesammelt, um die Leistung einer neuen Funktion zu messen! Sie haben wichtige Leistungskennzahlen für die Einführung einer neuen Funktion überwacht und schnell reagiert, wenn ein Leistungsproblem entdeckt wurde. Möglich wurde dies alles durch die Möglichkeit, Konfigurationsänderungen mit Remote Config vorzunehmen und Leistungsprobleme in Echtzeit zu überwachen.

Was wir abgedeckt haben

  • Hinzufügen des Firebase Performance Monitoring SDK zu Ihrer App
  • Hinzufügen einer benutzerdefinierten Codeverfolgung zu Ihrem Code, um eine bestimmte Funktion zu messen
  • Einrichten eines Remote-Konfigurationsparameters und eines Bedingungswerts zur Steuerung/Einführung einer neuen Funktion
  • Verstehen, wie Sie das Leistungsüberwachungs-Dashboard verwenden, um Probleme während eines Rollouts zu identifizieren
  • Richten Sie Leistungswarnungen ein, um Sie zu benachrichtigen, wenn die Leistung Ihrer App einen von Ihnen festgelegten Schwellenwert überschreitet

Erfahren Sie mehr