Surveillance des performances des déploiements de fonctionnalités

1. Présentation

Dans cet atelier de programmation, vous allez apprendre à surveiller les performances de votre application lors du déploiement d'une fonctionnalité. Notre exemple d'application aura des fonctionnalités de base et sera configuré pour afficher une image d'arrière-plan différente en fonction d'un indicateur Firebase Remote Config. Nous allons voir comment instrumenter des traces pour surveiller les performances de l'application, déployer une modification de configuration dans l'application, surveiller l'effet et voir comment améliorer les performances.

Points abordés

  • Comment ajouter Firebase Performance Monitoring à votre application mobile pour obtenir des métriques prêtes à l'emploi (comme le temps de démarrage de l'application et les frames lents ou figés)
  • Ajouter des traces personnalisées pour comprendre les chemins de code critiques de vos parcours utilisateur
  • Utiliser le tableau de bord Performance Monitoring pour comprendre vos métriques et suivre les changements importants, comme le déploiement d'une fonctionnalité
  • Configurer des alertes de performances pour surveiller vos métriques clés
  • Déployer une modification Firebase Remote Config

Prérequis

  • Android Studio version 4.0 ou ultérieure
  • Un émulateur Android avec le niveau d'API 16 ou supérieur
  • Java version 8 ou ultérieure
  • Comprendre les principes de base de Firebase Remote Config

2. Configurer l'exemple de projet

Télécharger le code

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

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

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

Importez le projet sous 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 allez utiliser le plug-in Firebase Assistant pour enregistrer votre application Android dans 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 !

Associer votre application à Firebase

  1. Accédez à Android Studio/Aide > Rechercher les mises à jour pour vous assurer d'utiliser les dernières versions d'Android Studio et de l'assistant Firebase.
  2. Sélectionnez Tools > Firebase (Outils > Firebase) pour ouvrir le volet Assistant.
    c0e42ef063d21eab.png
  3. Sélectionnez Performance Monitoring pour l'ajouter à votre application, puis cliquez sur Premiers pas avec Performance Monitoring.
  4. Cliquez sur Connect to Firebase (Se connecter à Firebase) pour associer votre projet Android à Firebase. (La console Firebase s'ouvre dans votre navigateur.)
  5. Cliquez sur le bouton pour créer un projet, puis saisissez un nom (par exemple, Feature Rollout Performance Codelab).
  6. Cliquez sur Continuer.
  7. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase, puis cliquez sur Continuer.
  8. (Facultatif) Activez l'assistance IA dans la console Firebase (appelée "Gemini dans Firebase").
  9. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Google Analytics.
    Vous pouvez éventuellement activer Google Analytics, car il vous fournira des options de ciblage Remote Config étendues. Toutefois, cet atelier de programmation utilise une option de ciblage qui ne nécessite pas Google Analytics.
  10. Vous devriez ensuite voir une boîte de dialogue vous invitant à associer votre nouvelle application Firebase à votre projet Android Studio.
    51a549ebde2fe57a.png
  11. Cliquez sur Se connecter.
  12. Ouvrez Android Studio. Dans le volet Assistant, vous verrez la confirmation que votre application est connectée à Firebase.
    40c24c4a56a45990.png

Ajouter Performance Monitoring à votre application

Dans le volet Assistant d'Android Studio, cliquez sur Add Performance Monitoring to your app (Ajouter Performance Monitoring à votre application).

Une boîte de dialogue Accepter les modifications devrait s'afficher. Android Studio devrait ensuite synchroniser votre application pour s'assurer que toutes les dépendances nécessaires ont été ajoutées.

3046f3e1f5fea06f.png

Enfin, le message de confirmation devrait s'afficher dans le volet Assistant d'Android Studio, indiquant que toutes les dépendances sont correctement configurées.

62e79fd18780e320.png

En complément, 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écuter l'application

Un fichier google-services.json doit maintenant s'afficher 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 Run > Run 'app' (Exécuter > Exécuter l'application) pour compiler et exécuter l'application sur votre émulateur Android.

Lorsque l'application est en cours d'exécution, un écran de démarrage semblable à celui-ci doit s'afficher :

ffbd413a6983b205.png

Au bout de quelques secondes, la page principale s'affiche avec l'image par défaut :

d946cab0df319e50.png

Que se passe-t-il en coulisses ?

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

  1. Dans onCreate(), nous initialisons les paramètres Firebase Remote Config et récupérons les valeurs de configuration que vous définirez dans le tableau de bord Remote Config plus loin 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 mettre fin à 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 en arrière-plan de la page principale. Sinon, l'image par défaut (affichée ci-dessus) s'affichera.

4. Configurer Remote Config

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

  1. Dans le panneau de gauche de la console Firebase, recherchez 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 la description suivante : Shows a seasonal image (replaces default) in the main page when the restaurant list is empty..
  4. Cliquez sur Ajouter > Valeur conditionnelle > Créer une 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 devez laisser la fonctionnalité désactivée jusqu'à ce que vous soyez prêt à la déployer lors d'une étape ultérieure.)
  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 de création de votre premier paramètre et recherchez le champ Valeur pour le déploiement d'images saisonnières. Saisissez l'URL à partir de laquelle l'image saisonnière sera téléchargée : https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. Laissez la valeur par défaut sous la forme d'une chaîne vide. Cela signifie que l'image par défaut du code source sera affichée au lieu d'une image téléchargée à partir d'une URL.
  3. Cliquez sur Enregistrer.

99e6cd2ebcdced.png

Vous pouvez constater que la nouvelle configuration a été créée en tant que brouillon.

  1. Cliquez sur Publier les modifications et confirmez les modifications en haut de l'écran 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. Il est préférable que vos utilisateurs n'attendent pas trop longtemps sur cet écran. Il est donc généralement utile de surveiller la durée d'affichage de l'écran de démarrage.

Firebase Performance Monitoring vous permet de le faire. Vous pouvez instrumenter des traces de code personnalisé 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 le Activity qui implémente l'écran de démarrage.

  1. Initialisez, créez et démarrez une trace de code personnalisé 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. Mettez fin à 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 allez ajouter une deuxième trace de code personnalisée qui suivra le temps supplémentaire que votre fonctionnalité a ajouté à SplashScreenActivity.

  1. Initialisez, créez et démarrez une trace de code personnalisé 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. Mettez fin au traçage 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. Un message de journalisation contenant Logging trace metric: splash_screen_trace, suivi de la durée de la trace, doit s'afficher. Vous ne verrez pas de message de journal pour splash_seasonal_image_processing, car vous n'avez pas encore activé la nouvelle fonctionnalité.

6. Ajouter un attribut personnalisé à la trace

Pour les traces de code personnalisé, Performance Monitoring enregistre automatiquement les attributs par défaut (métadonnées courantes 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é pour surveiller la durée de l'écran de démarrage et le temps de traitement de la nouvelle fonctionnalité. La durée d'affichage peut varier selon que l'image affichée est l'image par défaut ou si elle doit être téléchargée à partir d'une URL. Qui sait, vous aurez peut-être un jour différentes URL à partir desquelles télécharger une image.

Ajoutons donc un attribut personnalisé représentant l'URL de l'image saisonnière à ces traces de code personnalisé. Vous pourrez ainsi 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 seasonalImageUrl. C'est pourquoi la valeur de l'attribut est unset.

Le SDK Performance Monitoring collecte les données de trace et les envoie à Firebase. Vous pouvez afficher les données dans le tableau de bord Performances de la console Firebase, que nous vous expliquerons en détail dans la prochaine étape de l'atelier de programmation.

7. Configurer votre tableau de bord Performance Monitoring

Configurer 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 (Publier et surveiller), puis cliquez sur Performance (Performances).

Vous devriez voir votre tableau de bord Performances avec vos tout premiers points de données dans le tableau des métriques. Le SDK Performance Monitoring 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 du temps de démarrage de votre application, mais vous pouvez ajouter les métriques qui vous intéressent le plus. Étant donné que 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 de code personnalisé splash_screen_trace.

  1. Cliquez sur l'une des zones vides Sélectionner une métrique.
  2. Dans la boîte 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 une métrique. La durée de splash_screen_trace devrait s'afficher dans votre tableau de bord.

Vous pouvez suivre les mêmes étapes pour ajouter d'autres métriques qui vous intéressent. Vous pourrez ainsi voir rapidement comment leurs performances évoluent au fil du temps et même avec différentes versions.

1d465c021e58da3b.png

Le tableau des métriques est un outil puissant qui vous permet de suivre les performances des métriques clés pour vos utilisateurs. Pour cet atelier de programmation, vous disposez d'un petit ensemble de données dans une plage de temps limitée. Vous utiliserez donc d'autres vues du tableau de bord qui vous aideront à comprendre les performances du déploiement de la fonctionnalité.

8. Déployer votre fonctionnalité

Maintenant que vous avez configuré la 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, revenez à la page Remote Config de la console Firebase afin d'augmenter le centile d'utilisateurs de votre condition de ciblage. Normalement, vous déployez de nouvelles fonctionnalités auprès d'une petite partie des utilisateurs et n'augmentez cette part que lorsque vous êtes sûr qu'il n'y a aucun problème. Toutefois, dans cet atelier de programmation, vous êtes le seul utilisateur 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. Définissez le centile sur 100 %.
  4. Cliquez sur Save condition (Enregistrer la condition).
  5. Cliquez sur Publier les modifications, puis 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 vide.

b0cc91b6e48fb842.png

9. Vérifier les variations de performances

Examinons maintenant les performances du 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 allez utiliser différentes sections du tableau de bord pour afficher les données sur les performances.

  1. Dans l'onglet principal Tableau de bord, faites défiler la page 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 des traces prêtes à l'emploi.
  2. Maintenant que vous avez activé la nouvelle fonctionnalité, recherchez la trace de code personnalisé splash_seasonal_image_processing, qui a mesuré le temps nécessaire pour télécharger et traiter l'image. La valeur Duration (Durée) de la trace indique que le téléchargement et le traitement prennent beaucoup de temps.

439adc3ec71805b7.png

  1. Comme 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 précédemment, cliquez sur l'une des cases vides Sélectionner une métrique. Dans la boîte de dialogue, sélectionnez le type de trace Traces personnalisées et le nom de la trace splash_seasonal_image_processing. Enfin, cliquez sur Sélectionner une métrique pour l'ajouter au tableau des métriques.

7fb64d2340410576.png

  1. Pour confirmer ces différences, vous pouvez examiner plus en détail les données pour splash_screen_trace. Cliquez sur la fiche splash_screen_trace dans le tableau des métriques, puis sur Afficher les détails de la métrique.

b1c275c30679062a.png

  1. Sur la page "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 à 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 par rapport à l'utilisation de l'image par défaut (représentée par "unset").

Dans cet atelier de programmation, la raison de cette durée plus longue peut être simple, mais dans une application réelle, elle peut ne pas être aussi évidente. Les données de durée collectées proviendront de différents appareils exécutant l'application dans diverses conditions de connexion réseau, qui peuvent être moins bonnes que prévu. Voyons comment vous pourriez résoudre ce problème dans une situation réelle.

  1. Cliquez sur Performances en haut de la page pour revenir à l'onglet principal Tableau de bord : 640b696b79d90103.png
  2. Dans le tableau des traces en bas de la page, cliquez sur l'onglet Requêtes réseau. Ce tableau présente toutes les requêtes réseau de votre application agrégées en 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 des images (c'est-à-dire la durée de la trace splash_seasonal_image_processing), vous pouvez constater qu'une grande partie du temps est consacrée au téléchargement de l'image.

6f92ce0f23494507.png

Résultats sur les performances

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

  1. Le temps passé sur SplashScreenActivity a augmenté.
  2. La durée de splash_seasonal_image_processing était très longue.
  3. Ce délai é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.

Dans l'étape suivante, vous allez atténuer l'impact sur les performances en rétablissant la fonctionnalité et en identifiant comment améliorer son implémentation.

10. Restaurez la fonctionnalité.

Il n'est pas souhaitable d'augmenter le temps d'attente de vos utilisateurs pendant l'écran de démarrage. L'un des principaux avantages de Remote Config est la possibilité de mettre en pause et d'annuler votre déploiement sans avoir à publier une autre version pour vos utilisateurs. Cela vous permet de réagir rapidement aux problèmes (comme ceux de performances que vous avez découverts à la dernière étape) et de minimiser le nombre d'utilisateurs insatisfaits.

Pour une atténuation rapide, vous allez rétablir le pourcentage de déploiement sur 0 afin que tous vos utilisateurs voient à nouveau l'image par défaut :

  1. Revenez à la page Remote Config de 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. Définissez le centile sur 0 %.
  5. Cliquez sur Save condition (Enregistrer la condition).
  6. Cliquez sur Publier les modifications, puis confirmez les modifications.

18c4f1cbac955a04.png

Redémarrez l'application dans Android Studio. L'écran principal d'origine avec l'état vide devrait s'afficher :

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 ralentissait votre application. En examinant de plus près l'image téléchargée, vous constatez que vous utilisez la résolution d'origine de l'image, qui était supérieure à 2 Mo. Pour résoudre rapidement votre problème de performances, réduisez la qualité à une résolution plus appropriée afin que l'image prenne moins de temps à télécharger.

Déployer à nouveau la valeur Remote Config

  1. Revenez à la page Remote Config de la console Firebase.
  2. Cliquez sur l'icône Modifier pour le paramètre seasonal_image_url.
  3. Définissez la valeur de déploiement des images saisonnières 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 d'images saisonnières, puis redéfinissez le pourcentage sur 100 %.
  3. Cliquez sur Save condition (Enregistrer la condition).

1974fa3bb789f36c.png

  1. Cliquez sur le bouton Publier les modifications.

12. Tester la correction et configurer des alertes

Exécuter l'application en local

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

b0cc91b6e48fb842.png

Consulter les performances des modifications

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

  1. Cette fois, vous allez utiliser le tableau des traces pour accéder à la page d'informations. Dans le 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 afficher à nouveau la répartition des attributs personnalisés. Si vous pointez sur les URL, vous verrez une valeur correspondant à la nouvelle URL de l'image redimensionnée : https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (avec ?w=640 à la fin). La valeur de durée associée à cette image est considérablement plus courte que celle 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 des performances, puis cliquez sur l'icône de menu à trois points pour splash_screen_trace et sur Paramètres des alertes.

4bd0a2a1faa14479.png

  1. Cliquez sur le bouton pour activer l'alerte Durée. Définissez une valeur de seuil légèrement supérieure à celle que vous avez observée. Vous recevrez ainsi un e-mail si votre splash_screen_trace dépasse le seuil.
  1. Cliquez sur Enregistrer pour créer votre alerte. Faites défiler la page jusqu'au tableau des traces, puis cliquez sur l'onglet Traces personnalisées pour vérifier que votre alerte est activée.

2bb93639e2218d1.png

13. Félicitations !

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 métriques de performances clés lors du déploiement d'une nouvelle fonctionnalité et réagi rapidement lorsqu'un problème de performances a été détecté. Tout cela a été possible grâce à la possibilité de modifier la configuration avec Remote Config et de surveiller les problèmes de performances en temps réel.

Points abordés

  • Ajouter le SDK Firebase Performance Monitoring à votre application
  • Ajouter une trace de code personnalisée à votre code pour mesurer une fonctionnalité spécifique
  • Configurer un paramètre Remote Config et 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
  • Configurer des alertes de performances pour être averti lorsque les performances de votre application dépassent un seuil que vous avez défini

En savoir plus