Performance Monitoring para lanzamientos de funciones

1. Descripción general

En este codelab, aprenderás a supervisar el rendimiento de tu app durante el lanzamiento de una función. Nuestra app de ejemplo tendrá una funcionalidad básica y está configurada para mostrar una imagen de fondo diferente basada en una marca de Firebase Remote Config. Revisaremos los seguimientos para supervisar el rendimiento de la app, implementaremos un cambio de configuración en la app, supervisaremos el efecto y veremos cómo podemos mejorar el rendimiento.

Qué aprenderás

• Cómo agregar Firebase Performance Monitoring a tu app para dispositivos móviles a fin de obtener métricas listas para usar (como la hora de inicio de la app y los fotogramas lentos o congelados)
• Cómo agregar seguimientos personalizados para comprender las rutas de código fundamentales de los recorridos de tus usuarios
• Cómo usar el panel de Performance Monitoring para comprender tus métricas y hacer un seguimiento de los cambios importantes, como el lanzamiento de una función
• Cómo configurar alertas de rendimiento para supervisar tus métricas clave
• Cómo lanzar un cambio de Firebase Remote Config

Requisitos previos

• Android Studio 4.0 o una versión posterior
• Un emulador de Android con nivel de API 16 o posterior
• Java 8 o versiones posteriores
• Conocimientos básicos sobre Firebase Remote Config

2. Configura el proyecto de muestra

Descarga el código

Ejecuta el siguiente comando para clonar el código de muestra de este codelab. Se creará una carpeta llamada codelab-perf-rc-android en tu máquina:

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

Si no tienes Git en tu máquina, también puedes descargar el código directamente desde GitHub.

Importa el proyecto en la carpeta firebase-perf-rc-android-start a Android Studio. Es probable que veas algunas excepciones de tiempo de ejecución o tal vez una advertencia sobre un archivo google-services.json faltante. Corregiremos esto en la siguiente sección.

En este codelab, usarás el complemento Firebase Assistant para registrar tu app para Android con un proyecto de Firebase y agregar los archivos de configuración, los complementos y las dependencias de Firebase necesarios al proyecto de Android, todo desde Android Studio.

Conecta tu app a Firebase.

1. Ve a Android Studio/Ayuda > Check for updates para asegurarte de estar usando las versiones más recientes de Android Studio y Firebase Assistant.
2. Selecciona Herramientas > Firebase para abrir el panel Asistente.

3. Elige Performance Monitoring para agregarlo a tu app y, luego, haz clic en Comenzar a usar Performance Monitoring.
4. Haz clic en Conectar a Firebase para conectar tu proyecto de Android con Firebase (se abrirá Firebase console en tu navegador).
5. En Firebase console, haz clic en Agregar proyecto y, luego, ingresa un nombre para el proyecto de Firebase (si ya tienes uno, puedes seleccionarlo). Haz clic en Continuar y acepta las condiciones para crear el proyecto y una app de Firebase nueva.

A continuación, deberías ver un diálogo para conectar la app de Firebase nueva al proyecto de Android Studio.

6. Haz clic en Conectar.
7. Abre Android Studio. En el panel Assistant, verás la confirmación de que tu app está conectada a Firebase.

Agrega Performance Monitoring a la app

En el panel Assistant de Android Studio, haz clic en Add Performance Monitoring to your app.

Deberías ver un diálogo para Aceptar cambios después del cual Android Studio deberá sincronizar tu app para asegurarse de que se hayan agregado todas las dependencias necesarias.

Por último, en el panel Assistant de Android Studio, deberías ver un mensaje de éxito que indica que todas las dependencias están configuradas correctamente.

Como paso adicional, sigue las instrucciones que se indican en el paso "Habilita el registro de depuración (opcional)" para habilitar el registro de depuración. Las mismas instrucciones también están disponibles en la documentación pública.

3. Ejecuta la app

Ahora deberías ver el archivo google-services.json en el directorio del módulo (nivel de app) de tu app, y esta debería compilarse. En Android Studio, haz clic en Run > Run 'app' para compilar y ejecutar la app en tu emulador de Android.

Cuando se esté ejecutando la app, primero deberías ver una pantalla de presentación como la siguiente:

Luego, después de unos segundos, se mostrará la página principal con la imagen predeterminada:

¿Qué está sucediendo en detalle?

La pantalla de presentación se implementa en SplashScreenActivity y hace lo siguiente:

1. En onCreate(), inicializamos los parámetros de configuración de Firebase Remote Config y recuperamos los valores de configuración que establecerás en el panel de Remote Config más adelante en este codelab.
2. En executeTasksBasedOnRC(), leemos el valor de configuración de la marca seasonal_image_url. Si el valor de configuración proporciona una URL, descargamos la imagen de forma síncrona.
3. Una vez que se completa la descarga, la app navega a MainActivity y llama a finish() para finalizar SplashScreenActivity.

En MainActivity, si seasonal_image_url se define mediante Remote Config, se habilitará la función y se mostrará la imagen descargada como fondo de la página principal. De lo contrario, se mostrará la imagen predeterminada (que se muestra arriba).

4. Configura Remote Config

Ahora que la app se está ejecutando, puedes configurar la marca de función nueva.

1. En el panel izquierdo de Firebase console, busca la sección Participación y, luego, haz clic en Remote Config.
2. Haz clic en el botón Crear configuración para abrir el formulario de configuración y agrega seasonal_image_url como la clave del parámetro.
3. Haz clic en Agregar descripción y, luego, ingresa esta descripción: Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
4. Haz clic en Agregar nueva -> Valor condicional -> Crear condición nueva.
5. Para el nombre de la condición, ingresa Seasonal image rollout.
6. En la sección Applies if..., selecciona User in random percentile <= 0%. Deja inhabilitada la función hasta que puedas realizar el lanzamiento en un paso posterior.
7. Haz clic en Crear condición. Usarás esta condición más adelante para lanzar la nueva función para tus usuarios.

7. Abre el formulario de creación de tu primer parámetro y busca el campo Valor para el lanzamiento de imágenes de temporada. Ingresa la URL donde se descargará la imagen de temporada: https://images.unsplash.com/photo-1552691021-7043334e0b51
8. Deja el valor predeterminado como una cadena vacía. Esto significa que se mostrará la imagen predeterminada en la base de código en lugar de una imagen descargada desde una URL.
9. Haz clic en Guardar.

Puedes ver que la configuración nueva se creó como borrador.

10. Haz clic en Publicar cambios y confirma los cambios en la parte superior para actualizar la app.

5. Agrega supervisión para el tiempo de carga de los datos

Tu app precarga algunos datos antes de mostrar MainActivity y muestra una pantalla de presentación para ocultar este proceso. No es conveniente que los usuarios esperen demasiado tiempo en esta pantalla, por lo que se recomienda controlar el tiempo en que se muestra la pantalla de presentación.

Firebase Performance Monitoring proporciona una manera de lograrlo. Puedes instrumentar seguimientos de código personalizado para supervisar el rendimiento de código específico en tu app, como el tiempo de carga de los datos y el de procesamiento de la función nueva.

Para realizar un seguimiento del tiempo en que se muestra la pantalla de presentación, agregarás un seguimiento de código personalizado a SplashScreenActivity, que es el Activity que implementa la pantalla de presentación.

1. Inicializa, crea y, luego, inicia un seguimiento de código personalizado llamado 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");
    
    // ...
}

2. Finaliza el registro en el método onDestroy() de SplashScreenActivity:

SplashScreenActivity.java:

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

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

Dado que la nueva función descarga y procesa una imagen, agregarás un segundo seguimiento de código personalizado que realizará un seguimiento del tiempo adicional que la función agregó a SplashScreenActivity.

1. Inicializa, crea y, luego, inicia un seguimiento de código personalizado llamado 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");

        // ...
    }
}

2. Finaliza el registro en los métodos onLoadFailed() y 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();

Ahora que agregaste seguimientos de código personalizado para hacer un seguimiento de la duración de la pantalla de presentación (splash_screen_trace) y el tiempo de procesamiento de la nueva función (splash_seasonal_image_processing), vuelve a ejecutar la app en Android Studio. Deberías ver un mensaje de registro que contenga Logging trace metric: splash_screen_trace, seguido de la duración del seguimiento. No verás un mensaje de registro para splash_seasonal_image_processing porque aún no habilitaste la nueva función.

6. Cómo agregar un atributo personalizado al seguimiento

En el caso de los seguimientos de código personalizado, Performance Monitoring registra automáticamente los atributos predeterminados (metadatos comunes, como la versión de la app, el país, el dispositivo, etc.) para que puedas filtrar los datos del seguimiento en Firebase console. También puedes agregar y supervisar atributos personalizados.

En tu app, acabas de agregar dos seguimientos de código personalizado para supervisar la duración de la pantalla de presentación y el tiempo de procesamiento de la función nueva. Un factor que podría afectar estas duraciones es si la imagen que se muestra es la predeterminada o si la imagen se debe descargar desde una URL. Y quién sabe... es posible que en algún momento tengas distintas URLs desde las que descargas una imagen.

Por lo tanto, agregaremos un atributo personalizado que represente la URL de imagen de temporada para estos seguimientos de código personalizado. De esa manera, puedes filtrar los datos de duración por estos valores más adelante.

1. Agrega el atributo personalizado (seasonal_image_url_attribute) para splash_screen_trace al comienzo del método 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);
    }

    // ...
}

2. Agrega el mismo atributo personalizado para splash_seasonal_image_processing justo después de la llamada a 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);

    // ...
}

Ahora que agregaste un atributo personalizado (seasonal_image_url_attribute) para ambos seguimientos personalizados (splash_screen_trace y splash_seasonal_image_processing), vuelve a ejecutar la app en Android Studio. Deberías ver un mensaje de registro que contenga Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'.. Aún no habilitaste el parámetro de Remote Config seasonalImageUrl, por lo que el valor del atributo es unset.

El SDK de Performance Monitoring recopilará los datos de seguimiento y los enviará a Firebase. Puedes ver los datos en el panel Rendimiento de Firebase console, que explicaremos en detalle en el siguiente paso del codelab.

7. Configura tu panel de Performance Monitoring

Configura tu panel para supervisar la función

En Firebase console, selecciona el proyecto que tiene tu app de Friendly Eats.

En el panel izquierdo, busca la sección Versión y monitor y, luego, haz clic en Rendimiento.

Deberías ver el panel Rendimiento con los primeros datos en el panel de métricas. El SDK de Performance Monitoring recopila datos de rendimiento de tu app y los muestra pocos minutos después de su recopilación.

En este panel de métricas, puedes realizar un seguimiento de las métricas clave de tu app. La vista predeterminada incluye la duración del seguimiento de la hora de inicio de la app, pero puedes agregar las métricas que más te interesan. Dado que realizas el seguimiento de la función nueva que agregaste, puedes adaptar el panel para mostrar la duración del seguimiento de código personalizado splash_screen_trace.

1. Haz clic en uno de los cuadros vacíos de la opción Seleccionar una métrica.
2. En la ventana de diálogo, selecciona el tipo de seguimiento de Seguimientos personalizados y el nombre de seguimiento splash_screen_trace.

3. Haz clic en Seleccionar métrica para ver la duración de splash_screen_trace agregada a tu panel.

Puedes usar estos mismos pasos para agregar otras métricas que te interesen y ver rápidamente cómo cambia su rendimiento a lo largo del tiempo y también con diferentes versiones.

El panel de métricas es una herramienta eficaz para hacer un seguimiento del rendimiento de las métricas clave que experimentan tus usuarios. En este codelab, tendrás un conjunto pequeño de datos en un intervalo de tiempo limitado, por lo que usarás otras vistas de panel que te ayudarán a comprender el rendimiento del lanzamiento de la función.

8. Lanza la función

Ahora que configuraste la supervisión, está todo listo para implementar el cambio de Firebase Remote Config (seasonal_image_url) que configuraste antes.

Para lanzar un cambio, deberás volver a la página de Remote Config en Firebase console para aumentar el percentil de usuarios de tu condición de segmentación. Normalmente, lanzarías nuevas funciones para una pequeña parte de los usuarios y las aumentarías solo cuando estés seguro de que no presentan problemas. En este codelab, sin embargo, eres los únicos usuarios de la app, por lo que puedes cambiar el percentil al 100%.

1. Haz clic en la pestaña Condiciones en la parte superior de la página.
2. Haz clic en la condición Seasonal image rollout que agregaste antes.
3. Cambia el percentil a 100%.
4. Haz clic en Guardar condición.
5. Haz clic en Publicar cambios y confirma los cambios.

En Android Studio, reinicia la app en el emulador para ver la nueva función. Después de la pantalla de presentación, deberías ver la nueva pantalla principal de estado vacío.

9. Cómo verificar los cambios en el rendimiento

Ahora, verifiquemos el rendimiento de la carga de la pantalla de presentación con el panel Rendimiento de Firebase console. En este paso del codelab, usarás diferentes partes del panel para ver los datos de rendimiento.

1. En la pestaña principal Panel, desplázate hacia abajo hasta la tabla de seguimientos y haz clic en la pestaña Seguimientos personalizados. En esta tabla, verás los seguimientos de código personalizado que agregaste antes y algunos seguimientos listos para usar.
2. Ahora que habilitaste la nueva función, busca el seguimiento de código personalizado splash_seasonal_image_processing, que mide el tiempo que se tardó en descargar y procesar la imagen. En el valor Duration del seguimiento, puedes ver que esta descarga y este procesamiento tardan una cantidad significativa de tiempo.

3. Como tienes datos de splash_seasonal_image_processing, puedes agregar la duración de este seguimiento al panel de métricas en la parte superior de la pestaña Panel.

Al igual que antes, haz clic en uno de los cuadros vacíos de Seleccionar una métrica. En la ventana de diálogo, selecciona el tipo de seguimiento Seguimientos personalizados y el nombre de seguimiento splash_seasonal_image_processing. Por último, haz clic en Seleccionar métrica para agregarla al panel de métricas.

4. Para confirmar con más detalle las diferencias, puedes observar con más detalle los datos de splash_screen_trace. Haz clic en la tarjeta splash_screen_trace del panel de métricas y, luego, en Ver detalles de la métrica.

5. En la página de detalles, verás una lista de atributos en la parte inferior izquierda, incluido el atributo personalizado que creaste anteriormente. Haz clic en el atributo personalizado seasonal_image_url_attribute para ver a la derecha la duración de la pantalla de presentación de cada URL de imagen de temporada:

6. Es probable que los valores de duración de la pantalla de presentación sean un poco diferentes a los de la captura de pantalla anterior, pero los valores deberían tener una duración más larga cuando la imagen se descarga desde una URL en comparación con el uso de la imagen predeterminada (representada como "sin establecer").

En este codelab, el motivo de esta duración más larga puede ser sencillo, pero, en una app real, podría no ser tan obvio. Los datos sobre la duración recopilados provendrán de diferentes dispositivos que ejecutan la app en diversas condiciones de conexión de red, y estas condiciones podrían ser peores de lo que esperabas. Veamos cómo investigarías el problema si se tratara de una situación real.

7. Haz clic en Rendimiento en la parte superior de la página para volver a la pestaña principal Panel:
8. En la tabla de seguimientos ubicada en la parte inferior de la página, haz clic en la pestaña Solicitudes de red. En esta tabla, verás todas las solicitudes de red de tu app agrupadas en patrones de URL, incluido el patrón de URL images.unsplash.com/**. Si comparas el valor de este tiempo de respuesta con el tiempo total que tarda la descarga y el procesamiento de imágenes (es decir, la duración del seguimiento splash_seasonal_image_processing), podrás ver que se dedica una gran cantidad de tiempo a descargar la imagen.

Hallazgos sobre el rendimiento

Con Firebase Performance Monitoring, notaste el siguiente impacto en los usuarios finales cuando habilitaste la nueva función:

1. Aumentó el tiempo dedicado a SplashScreenActivity.
2. La duración de splash_seasonal_image_processing fue muy extensa.
3. La demora se debió al tiempo de respuesta de la descarga de la imagen y al tiempo de procesamiento correspondiente necesario para la imagen.

En el siguiente paso, mitigarás el impacto en el rendimiento revirtiendo la función e identificando cómo puedes mejorar su implementación.

10. Revierte la función

No es conveniente aumentar el tiempo de espera de los usuarios durante la pantalla de presentación. Uno de los beneficios clave de Remote Config es la capacidad de pausar y revertir el lanzamiento sin necesidad de lanzar otra versión para los usuarios. Esto te permite reaccionar rápidamente ante los problemas (como los de rendimiento que descubriste en el último paso) y minimizar la cantidad de usuarios insatisfechos.

Como mitigación rápida, restablecerás el percentil de lanzamiento a 0 para que todos tus usuarios vuelvan a ver la imagen predeterminada:

1. Regresa a la página de Remote Config en Firebase console.
2. Haz clic en Condiciones en la parte superior de la página.
3. Haz clic en la condición Seasonal image rollout que agregaste antes.
4. Cambia el percentil a 0%.
5. Haz clic en Guardar condición.
6. Haz clic en Publicar cambios y confirma los cambios.

Reinicia la app en Android Studio. Deberías ver la pantalla principal original en estado vacío:

11. Corrige los problemas de rendimiento

Anteriormente en el codelab, descubriste que descargar una imagen para la pantalla de presentación causaba una demora en la app. Si observas con más detalle la imagen descargada, notarás que usas la resolución original de la imagen, que supera los 2 MB. Una solución rápida para tu problema de rendimiento es reducir la calidad a una resolución más adecuada, de modo que la imagen tarde menos tiempo en descargarse.

Vuelve a lanzar el valor de Remote Config

1. Regresa a la página de Remote Config en Firebase console.
2. Haz clic en el ícono Editar del parámetro seasonal_image_url.
3. Actualiza el Valor del lanzamiento de imágenes de temporada a https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 y, luego, haz clic en Guardar.

4. Haz clic en la pestaña Condiciones en la parte superior de la página.
5. Haz clic en Lanzamiento de imágenes por temporada y, luego, vuelve a establecer el percentil en 100%.
6. Haz clic en Guardar condición.

7. Haz clic en el botón Publicar cambios.

12. Prueba la corrección y configura alertas

Ejecuta la app de manera local

Con el nuevo valor de configuración configurado para usar una URL de imagen de descarga diferente, vuelve a ejecutar la app. Esta vez, notarás que el tiempo en la pantalla de presentación es más breve que antes.

Cómo consultar el rendimiento de los cambios

Regresa al panel Rendimiento de Firebase console para ver cómo se ven las métricas.

1. Esta vez, usarás la tabla de seguimientos para navegar a la página de detalles. En la tabla de seguimientos, en la pestaña Seguimientos personalizados, haz clic en el seguimiento personalizado splash_seasonal_image_processing para volver a obtener una vista más detallada de su métrica de duración.

2. Haz clic en el atributo personalizado seasonal_image_url_attribute para volver a ver el desglose de estos atributos. Si colocas el cursor sobre las URLs, verás un valor que coincidirá con la URL nueva de la imagen de tamaño reducido: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (con ?w=640 al final). El valor de duración asociado con esta imagen es considerablemente más corto que el de la imagen anterior y más aceptable para los usuarios.

3. Ahora que mejoraste el rendimiento de la pantalla de presentación, puedes configurar alertas para recibir notificaciones cuando un seguimiento supere el umbral que configuraste. Abre el panel Rendimiento y haz clic en el ícono de menú ampliado (de tres puntos) de splash_screen_trace y en Configuración de alertas.

4. Haz clic en el botón de activación para habilitar la alerta de Duración. Establece el valor del umbral un poco por encima del valor que estabas viendo, de modo que recibas un correo electrónico si tu splash_screen_trace supera el umbral.

5. Haz clic en Guardar para crear la alerta. Desplázate hacia abajo hasta la tabla de seguimientos y, luego, haz clic en la pestaña Seguimientos personalizados para ver que la alerta esté habilitada.

13. ¡Felicitaciones!

¡Felicitaciones! Habilitaste el SDK de Firebase Performance Monitoring y recopilaste registros para medir el rendimiento de una función nueva. Supervisó las métricas clave de rendimiento para el lanzamiento de una función nueva y reaccionó rápidamente cuando se descubrió un problema de rendimiento. Todo esto fue posible gracias a la capacidad de realizar cambios en la configuración con Remote Config y supervisar los problemas de rendimiento en tiempo real.

Temas abordados

• Agrega el SDK de Firebase Performance Monitoring a tu app
• Cómo agregar un seguimiento de código personalizado a tu código para medir una función específica
• Configuración de un parámetro y un valor condicional de Remote Config para controlar o lanzar una función nueva
• Comprender cómo usar el panel de control de rendimiento para identificar problemas durante un lanzamiento
• Configurar alertas de rendimiento para recibir notificaciones cuando el rendimiento de tu app supere el umbral que configuraste

Más información

• firebase.google.com.mx
• Primeros pasos con Performance Monitoring para Android
• Comienza a usar Firebase Remote Config