Surveillance des performances des déploiements de fonctionnalités

1. Vue d'ensemble

Dans cet atelier de programmation, vous apprendrez à surveiller les performances de votre application lors du déploiement d'une fonctionnalité. Notre exemple d'application aura des fonctionnalités de base et est configuré pour afficher une image d'arrière-plan différente basée sur un indicateur Firebase Remote Config. Nous passerons en revue les traces d'instrumentation pour surveiller les performances de l'application, déployer une modification de configuration dans l'application, surveiller l'effet et voir comment nous pouvons améliorer les performances.

Ce que vous apprendrez

  • Comment ajouter Firebase Performance Monitoring à votre application mobile pour obtenir des métriques prêtes à l'emploi (telles que l'heure de démarrage de l'application et les images lentes ou gelées)
  • Comment ajouter des traces personnalisées pour comprendre les chemins de code critiques de vos parcours utilisateur
  • Comment utiliser le tableau de bord de surveillance des performances pour comprendre vos métriques et suivre les changements importants comme le déploiement d'une fonctionnalité
  • Comment configurer des alertes de performances pour surveiller vos indicateurs clés
  • Comment déployer une modification de configuration à distance Firebase

Conditions préalables

  • Android Studio 4.0 ou supérieur
  • Un émulateur Android avec un niveau API 16 ou supérieur.
  • Java version 8 ou supérieure
  • Une compréhension de base de Firebase Remote Config

2. Configurer l'exemple de projet

Téléchargez le code

Exécutez la commande suivante pour cloner l'exemple de code pour cet atelier de programmation. Cela créera un dossier appelé codelab-perf-rc-android sur votre machine :

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

Si vous n'avez pas Git sur votre machine, vous pouvez également télécharger le code directement depuis GitHub.

Importez le projet dans le dossier firebase-perf-rc-android-start dans Android Studio. Vous verrez probablement des exceptions d'exécution ou peut-être un avertissement concernant un fichier google-services.json manquant. Nous corrigerons cela dans la section suivante.

Dans cet atelier de programmation, vous utiliserez le plug-in Firebase Assistant pour enregistrer votre application Android auprès d'un projet Firebase et ajouter les fichiers de configuration, plug-ins et dépendances Firebase nécessaires à votre projet Android, le tout depuis Android Studio !

Connectez votre application à Firebase

  1. Accédez à Android Studio / Aide > Rechercher les mises à jour pour vous assurer que vous utilisez les dernières versions d'Android Studio et de Firebase Assistant.
  2. Sélectionnez Outils > Firebase pour ouvrir le volet Assistant .

c0e42ef063d21eab.png

  1. Choisissez Performance Monitoring à ajouter à votre application, puis cliquez sur Démarrer avec Performance Monitoring .
  2. Cliquez sur Connecter à Firebase pour connecter votre projet Android à Firebase (cela ouvrira la console Firebase dans votre navigateur) .
  3. Dans la console Firebase, cliquez sur Ajouter un projet , puis saisissez un nom de projet Firebase (si vous avez déjà un projet Firebase, vous pouvez sélectionner ce projet existant à la place) . Cliquez sur Continuer et acceptez les conditions pour créer le projet Firebase et une nouvelle application Firebase.

Vous devriez ensuite voir une boîte de dialogue pour connecter votre nouvelle application Firebase à votre projet Android Studio.

51a549ebde2fe57a.png

  1. Cliquez sur Connecter .
  2. Ouvrez Android Studio. Dans le volet Assistant , vous verrez la confirmation que votre application est connectée à Firebase.

40c24c4a56a45990.png

Ajoutez la surveillance des performances à votre application

Dans le volet Assistant d'Android Studio, cliquez sur Ajouter une surveillance des performances à votre application .

Vous devriez voir une boîte de dialogue pour accepter les modifications, après quoi Android Studio doit synchroniser votre application pour garantir que toutes les dépendances nécessaires ont été ajoutées.

3046f3e1f5fea06f.png

Enfin, vous devriez voir le message de réussite dans le volet Assistant d'Android Studio indiquant que toutes les dépendances sont correctement configurées.

62e79fd18780e320.png

Comme étape supplémentaire, activez la journalisation du débogage en suivant les instructions de l'étape « (Facultatif) Activer la journalisation du débogage ». Les mêmes instructions sont également disponibles dans la documentation publique .

3. Exécutez l'application

Vous devriez maintenant voir le fichier google-services.json dans le répertoire du module (au niveau de l'application) de votre application, et votre application devrait maintenant se compiler. Dans Android Studio, cliquez sur Exécuter > Exécuter « application » pour créer et exécuter l'application sur votre émulateur Android.

Lorsque l'application est en cours d'exécution, vous devriez d'abord voir un écran de démarrage comme celui-ci :

ffbd413a6983b205.png

Puis, après quelques secondes, la page principale avec l'image par défaut s'affichera :

d946cab0df319e50.png

Que se passe-t-il sous le capot ?

L'écran de démarrage est implémenté dans SplashScreenActivity et effectue les opérations suivantes :

  1. Dans onCreate() , nous initialisons les paramètres de Firebase Remote Config et récupérons les valeurs de configuration que vous définirez dans le tableau de bord Remote Config plus tard dans cet atelier de programmation.
  2. Dans executeTasksBasedOnRC() , nous lisons la valeur de configuration de l'indicateur seasonal_image_url . Si une URL est fournie par la valeur de configuration, nous téléchargeons l'image de manière synchrone.
  3. Une fois le téléchargement terminé, l'application accède à MainActivity et appelle finish() pour terminer SplashScreenActivity .

Dans MainActivity , si seasonal_image_url est défini via Remote Config, la fonctionnalité sera activée et l'image téléchargée sera affichée comme arrière-plan de la page principale. Sinon, l'image par défaut (montrée ci-dessus) sera affichée.

4. Configurer la configuration à distance

Maintenant que votre application est en cours d'exécution, vous pouvez configurer le nouvel indicateur de fonctionnalité.

  1. Dans le panneau de gauche de la console Firebase , localisez la section Engage , puis cliquez sur Remote Config .
  2. Cliquez sur le bouton Créer une configuration pour ouvrir le formulaire de configuration et ajoutez seasonal_image_url comme clé de paramètre.
  3. Cliquez sur Ajouter une description , puis saisissez cette description : Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. Cliquez sur Ajouter nouveau -> Valeur conditionnelle -> Créer une nouvelle condition .
  5. Pour le nom de la condition, saisissez Seasonal image rollout .
  6. Pour la section Applies if... , sélectionnez User in random percentile <= 0% . (Vous souhaitez laisser la fonctionnalité désactivée jusqu'à ce que vous soyez prêt à la déployer ultérieurement.)
  7. Cliquez sur Créer une condition . Vous utiliserez cette condition ultérieurement pour déployer la nouvelle fonctionnalité auprès de vos utilisateurs.

7a07526eb9e81623.png

  1. Ouvrez le formulaire Créer votre premier paramètre et localisez le champ de déploiement de l'image Valeur pour la saison . Saisissez l'URL où l'image saisonnière sera téléchargée : https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. Laissez la valeur par défaut sous forme de chaîne vide. Cela signifie que l'image par défaut dans la base de code sera affichée plutôt qu'une image téléchargée à partir d'une URL.
  3. Cliquez sur Enregistrer .

99e6cd2ebcdced.png

Vous pouvez voir que la nouvelle configuration est créée en tant que brouillon.

  1. Cliquez sur Publier les modifications et confirmez les modifications en haut pour mettre à jour votre application.

39cd3e96d370c7ce.png

5. Ajouter une surveillance du temps de chargement des données

Votre application précharge certaines données avant d'afficher MainActivity et affiche un écran de démarrage pour masquer ce processus. Vous ne voulez pas que vos utilisateurs attendent trop longtemps sur cet écran, il est donc normalement avantageux de surveiller la durée d'affichage de l'écran de démarrage.

Firebase Performance Monitoring fournit un moyen de faire exactement cela. Vous pouvez instrumenter des traces de code personnalisées pour surveiller les performances d'un code spécifique dans votre application, comme le temps de chargement des données et le temps de traitement de votre nouvelle fonctionnalité.

Pour suivre la durée d'affichage de l'écran de démarrage, vous allez ajouter une trace de code personnalisée à SplashScreenActivity , qui est l' Activity qui implémente l'écran de démarrage.

  1. Initialisez, créez et démarrez une trace de code personnalisée nommée 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. Terminez la trace dans la méthode onDestroy() de SplashScreenActivity :

SplashScreenActivity.java

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

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

Étant donné que votre nouvelle fonctionnalité télécharge et traite une image, vous ajouterez une deuxième trace de code personnalisé qui suivra le temps supplémentaire ajouté par votre fonctionnalité à SplashScreenActivity .

  1. Initialisez, créez et démarrez une trace de code personnalisée nommée 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. Terminez la trace dans les méthodes onLoadFailed() et onResourceReady() de 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();

Maintenant que vous avez ajouté des traces de code personnalisées pour suivre la durée de l'écran de démarrage ( splash_screen_trace) et le temps de traitement de la nouvelle fonctionnalité ( splash_seasonal_image_processing ), exécutez à nouveau l'application dans Android Studio. Vous devriez voir un message de journalisation contenant Logging trace metric: splash_screen_trace , suivi de la durée de la trace. Vous ne verrez pas de message de journal pour splash_seasonal_image_processing car vous n'avez pas encore activé la nouvelle fonctionnalité.

6. Ajoutez un attribut personnalisé à la trace

Pour les traces de code personnalisé, Performance Monitoring enregistre automatiquement les attributs par défaut (métadonnées communes telles que la version de l'application, le pays, l'appareil, etc.) afin que vous puissiez filtrer les données de la trace dans la console Firebase . Vous pouvez également ajouter et surveiller des attributs personnalisés .

Dans votre application, vous venez d'ajouter deux traces de code personnalisées pour surveiller la durée de l'écran de démarrage et le temps de traitement de la nouvelle fonctionnalité. Un facteur qui peut affecter ces durées est de savoir si l'image affichée est l'image par défaut ou si l'image doit être téléchargée à partir d'une URL. Et qui sait, vous pourriez éventuellement avoir différentes URL à partir desquelles vous téléchargez une image.

Ajoutons donc un attribut personnalisé représentant l'URL de l'image saisonnière à ces traces de code personnalisé. De cette façon, vous pourrez filtrer les données de durée en fonction de ces valeurs ultérieurement.

  1. Ajoutez l'attribut personnalisé ( seasonal_image_url_attribute ) pour splash_screen_trace au début de la méthode 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. Ajoutez le même attribut personnalisé pour splash_seasonal_image_processing juste après l'appel 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);

    // ...
}

Maintenant que vous avez ajouté un attribut personnalisé ( seasonal_image_url_attribute ) pour vos deux traces personnalisées ( splash_screen_trace et splash_seasonal_image_processing ), exécutez à nouveau l'application dans Android Studio. Vous devriez voir un message de journalisation contenant Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. Vous n'avez pas encore activé le paramètre Remote Config seasonImageUrl , c'est pourquoi la valeur de l'attribut n'est unset .

Le SDK de surveillance des performances collectera les données de trace et les enverra à Firebase. Vous pouvez afficher les données dans le tableau de bord Performances de la console Firebase, que nous expliquerons en détail dans la prochaine étape de l'atelier de programmation.

7. Configurez votre tableau de bord de surveillance des performances

Configurez votre tableau de bord pour surveiller votre fonctionnalité

Dans la console Firebase , sélectionnez le projet qui contient votre application Friendly Eats.

Dans le panneau de gauche, recherchez la section Release & Monitor , puis cliquez sur Performances .

Vous devriez voir votre tableau de bord des performances avec vos tout premiers points de données dans votre tableau de métriques ! Le SDK de surveillance des performances collecte les données de performances de votre application et les affiche quelques minutes après la collecte.

f57e5450b70034c9.png

Ce tableau de métriques vous permet de suivre les métriques clés de votre application. La vue par défaut inclut la durée de la trace de l'heure de démarrage de votre application, mais vous pouvez ajouter les métriques qui vous intéressent le plus. Puisque vous suivez la nouvelle fonctionnalité que vous avez ajoutée, vous pouvez personnaliser votre tableau de bord pour afficher la durée de la trace du code personnalisé splash_screen_trace .

  1. Cliquez sur l’une des cases vides Sélectionner une métrique .
  2. Dans la fenêtre de dialogue, sélectionnez le type de trace Traces personnalisées et le nom de trace splash_screen_trace .

1fb81f4dba3220e0.png

  1. Cliquez sur Sélectionner la métrique et vous devriez voir la durée de splash_screen_trace ajoutée à votre tableau de bord !

Vous pouvez utiliser ces mêmes étapes pour ajouter d'autres métriques qui vous intéressent afin de pouvoir voir rapidement comment leurs performances évoluent au fil du temps et même avec différentes versions.

1d465c021e58da3b.png

Le tableau de métriques est un outil puissant pour suivre les performances des métriques clés rencontrées par vos utilisateurs. Pour cet atelier de programmation, vous disposez d'un petit ensemble de données sur une période étroite. Vous utiliserez donc d'autres vues de tableau de bord qui vous aideront à comprendre les performances du déploiement des fonctionnalités.

8. Déployez votre fonctionnalité

Maintenant que vous avez configuré votre surveillance, vous êtes prêt à déployer la modification Firebase Remote Config ( seasonal_image_url) que vous avez configurée précédemment.

Pour déployer une modification, vous reviendrez à la page de configuration à distance dans la console Firebase pour augmenter le centile d'utilisateurs de votre condition de ciblage. Normalement, vous déploieriez de nouvelles fonctionnalités auprès d’une petite partie des utilisateurs et ne les augmenteriez que lorsque vous êtes sûr qu’elles ne posent aucun problème. Cependant, dans cet atelier de programmation, vous êtes les seuls utilisateurs de l'application. Vous pouvez donc définir le centile sur 100 %.

  1. Cliquez sur l'onglet Conditions en haut de la page.
  2. Cliquez sur la condition Seasonal image rollout que vous avez ajoutée précédemment.
  3. Changez le centile à 100 %.
  4. Cliquez sur Enregistrer la condition .
  5. Cliquez sur Publier les modifications et confirmez les modifications.

70f993502b27e7a0.png

De retour dans Android Studio, redémarrez l'application dans votre émulateur pour voir la nouvelle fonctionnalité. Après l'écran de démarrage, vous devriez voir le nouvel écran principal d'état vide !

b0cc91b6e48fb842.png

9. Vérifiez les changements de performances

Voyons maintenant les performances de chargement de l'écran de démarrage à l'aide du tableau de bord Performances de la console Firebase. Dans cette étape de l'atelier de programmation, vous utiliserez différentes parties du tableau de bord pour afficher les données de performances.

  1. Dans l'onglet principal du tableau de bord , faites défiler jusqu'au tableau des traces, puis cliquez sur l'onglet Traces personnalisées . Dans ce tableau, vous verrez les traces de code personnalisé que vous avez ajoutées précédemment ainsi que quelques traces prêtes à l'emploi .
  2. Maintenant que vous avez activé la nouvelle fonctionnalité, recherchez le code personnalisé trace splash_seasonal_image_processing , qui mesure le temps nécessaire au téléchargement et au traitement de l'image. À partir de la valeur Durée de la trace, vous pouvez voir que ce téléchargement et ce traitement prennent beaucoup de temps.

439adc3ec71805b7.png

  1. Puisque vous disposez de données pour splash_seasonal_image_processing , vous pouvez ajouter la durée de cette trace à votre tableau de métriques en haut de l'onglet Tableau de bord .

Comme auparavant, cliquez sur l’une des cases vides Sélectionner une métrique . Dans la fenêtre de dialogue, sélectionnez le type de trace Traces personnalisées et le nom de trace splash_seasonal_image_processing . Enfin, cliquez sur Sélectionner une métrique pour ajouter cette métrique au tableau des métriques.

7fb64d2340410576.png

  1. Pour confirmer davantage les différences, vous pouvez examiner de plus près les données de splash_screen_trace . Cliquez sur la carte splash_screen_trace dans le tableau des métriques, puis cliquez sur Afficher les détails des métriques .

b1c275c30679062a.png

  1. Dans la page de détails, vous verrez une liste d'attributs en bas à gauche, y compris l'attribut personnalisé que vous avez créé précédemment. Cliquez sur l'attribut personnalisé seasonal_image_url_attribute pour afficher la durée de l'écran de démarrage pour chaque URL d'image saisonnière sur la droite :

8fa1a69019bb045e.png

  1. Les valeurs de durée de votre écran de démarrage seront probablement un peu différentes de celles de la capture d'écran ci-dessus, mais vous devriez avoir une durée plus longue lorsque l'image est téléchargée à partir d'une URL plutôt que d'utiliser l'image par défaut (représentée par "non définie").

Dans cet atelier de programmation, la raison de cette durée plus longue peut être simple, mais dans une application réelle, cela peut ne pas être aussi évident. Les données de durée collectées proviendront de différents appareils, exécutant l'application dans diverses conditions de connexion réseau, et ces conditions pourraient être pires que vos attentes. Voyons comment vous étudieriez ce problème s'il s'agissait d'une situation réelle.

  1. Cliquez sur Performances en haut de la page pour revenir à l'onglet principal du tableau de bord : 640b696b79d90103.png
  2. Dans le tableau des traces en bas de la page, cliquez sur l'onglet Demandes réseau . Dans ce tableau, vous verrez toutes les requêtes réseau de votre application regroupées dans des modèles d'URL , y compris le modèle d'URL images.unsplash.com/** . Si vous comparez la valeur de ce temps de réponse au temps global nécessaire au téléchargement et au traitement de l'image (c'est-à-dire la durée de la trace splash_seasonal_image_processing ), vous pouvez voir qu'une grande partie du temps est consacrée au téléchargement de l'image.

6f92ce0f23494507.png

Résultats des performances

Grâce à Firebase Performance Monitoring, vous avez constaté l'impact suivant sur les utilisateurs finaux avec la nouvelle fonctionnalité activée :

  1. Le temps passé sur SplashScreenActivity a augmenté.
  2. La durée de splash_seasonal_image_processing était très longue.
  3. Le retard était dû au temps de réponse pour le téléchargement de l’image et au temps de traitement correspondant nécessaire pour l’image.

À l'étape suivante, vous atténuerez l'impact sur les performances en annulant la fonctionnalité et en identifiant comment vous pouvez améliorer la mise en œuvre de la fonctionnalité.

10. Restaurer la fonctionnalité

Augmenter le temps d'attente de vos utilisateurs lors de l'écran de démarrage n'est pas souhaitable. L'un des principaux avantages de Remote Config est la possibilité de suspendre et d'annuler votre déploiement sans avoir à proposer une autre version à vos utilisateurs. Cela vous permet de réagir rapidement aux problèmes (comme les problèmes de performances que vous avez découverts à la dernière étape) et de minimiser le nombre d'utilisateurs mécontents.

À titre d'atténuation rapide, vous réinitialiserez le centile de déploiement à 0 afin que tous vos utilisateurs voient à nouveau l'image par défaut :

  1. Revenez à la page Remote Config dans la console Firebase.
  2. Cliquez sur Conditions en haut de la page.
  3. Cliquez sur la condition Seasonal image rollout que vous avez ajoutée précédemment.
  4. Remplacez le centile par 0 %.
  5. Cliquez sur Enregistrer la condition .
  6. Cliquez sur Publier les modifications et confirmez les modifications.

18c4f1cbac955a04.png

Redémarrez l'application dans Android Studio et vous devriez voir l'écran principal vide d'origine :

d946cab0df319e50.png

11. Résoudre les problèmes de performances

Vous avez découvert plus tôt dans l'atelier de programmation que le téléchargement d'une image pour votre écran de démarrage provoquait le ralentissement de votre application. En regardant de plus près l'image téléchargée, vous voyez que vous utilisez la résolution originale de l'image, qui était supérieure à 2 Mo ! Une solution rapide à votre problème de performances consiste à réduire la qualité à une résolution plus appropriée afin que le téléchargement de l'image prenne moins de temps.

Déployez à nouveau la valeur Remote Config

  1. Revenez à la page Remote Config dans la console Firebase.
  2. Cliquez sur l'icône Modifier pour le paramètre seasonal_image_url .
  3. Mettez à jour le panneau déroulant Valeur pour l'image saisonnière sur https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 , puis cliquez sur Enregistrer .

828dd1951a2ec4a4.png

  1. Cliquez sur l'onglet Conditions en haut de la page.
  2. Cliquez sur Déploiement des images saisonnières , puis redéfinissez le centile sur 100 %.
  3. Cliquez sur Enregistrer la condition .

1974fa3bb789f36c.png

  1. Cliquez sur le bouton Publier les modifications .

12. Testez le correctif et configurez des alertes

Exécutez l'application localement

Avec la nouvelle valeur de configuration définie pour utiliser une URL d'image de téléchargement différente, exécutez à nouveau l'application. Cette fois, vous devriez remarquer que le temps passé sur l’écran de démarrage est plus court qu’auparavant.

b0cc91b6e48fb842.png

Afficher les performances des modifications

Revenez au tableau de bord Performances dans la console Firebase pour voir à quoi ressemblent les métriques.

  1. Cette fois, vous utiliserez le tableau des traces pour accéder à la page de détails. En bas du tableau des traces, dans l'onglet Traces personnalisées , cliquez sur la trace personnalisée splash_seasonal_image_processing pour afficher à nouveau une vue plus détaillée de sa métrique de durée.

2d7aaca03112c062.png

  1. Cliquez sur l'attribut personnalisé seasonal_image_url_attribute pour voir à nouveau la répartition des attributs personnalisés. Si vous survolez les URL, vous verrez une valeur qui correspond à la nouvelle URL de l'image de taille réduite : https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (avec le ?w=640 à la fin). La valeur de durée associée à cette image est considérablement plus courte que la valeur de l'image précédente et plus acceptable pour vos utilisateurs !

10e30c037a4237a2.png

  1. Maintenant que vous avez amélioré les performances de votre écran de démarrage, vous pouvez configurer des alertes pour vous avertir lorsqu'une trace dépasse un seuil que vous avez défini. Ouvrez le tableau de bord Performances , cliquez sur l'icône du menu de débordement (trois points) pour splash_screen_trace et cliquez sur Paramètres d'alerte .

4bd0a2a1faa14479.png

  1. Cliquez sur le bouton pour activer l'alerte de durée . Définissez la valeur du seuil pour qu'elle soit légèrement supérieure à la valeur que vous voyiez afin que si votre splash_screen_trace dépasse le seuil, vous recevrez un e-mail.
  1. Cliquez sur Enregistrer pour créer votre alerte. Faites défiler jusqu'au tableau des traces , puis cliquez sur l'onglet Traces personnalisées pour voir que votre alerte est activée !

2bb93639e2218d1.png

13. Félicitations !

Toutes nos félicitations! Vous avez activé le SDK Firebase Performance Monitoring et collecté des traces pour mesurer les performances d'une nouvelle fonctionnalité ! Vous avez surveillé les indicateurs de performances clés pour le déploiement d'une nouvelle fonctionnalité et réagi rapidement lorsqu'un problème de performances a été découvert. Tout cela a été possible grâce à la possibilité d'apporter des modifications à la configuration avec Remote Config et de surveiller les problèmes de performances en temps réel.

Ce que nous avons couvert

  • Ajout du SDK Firebase Performance Monitoring à votre application
  • Ajout d'une trace de code personnalisée à votre code pour mesurer une fonctionnalité spécifique
  • Configuration d'un paramètre Remote Config et d'une valeur conditionnelle pour contrôler/déployer une nouvelle fonctionnalité
  • Comprendre comment utiliser le tableau de bord de surveillance des performances pour identifier les problèmes lors d'un déploiement
  • Configuration d'alertes de performances pour vous avertir lorsque les performances de votre application dépassent un seuil que vous avez défini

Apprendre encore plus