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 según una marca de Firebase Remote Config. Revisaremos la instrumentación de seguimientos para supervisar el rendimiento de la app, el lanzamiento de un cambio de configuración en la app, la supervisión del efecto y la observación de cómo podemos mejorar el rendimiento.

Qué aprenderás

• Cómo agregar Firebase Performance Monitoring a tu app para dispositivos móviles para 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 instrucciones de código críticas de tus recorridos del usuario
• 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 superior
• Java 8 o superior
• Conocimientos básicos sobre Firebase Remote Config

2. Configura el proyecto de ejemplo

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 de 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. Lo corregiremos 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 > Comprueba si hay actualizaciones para asegurarte de que estás usando las versiones más recientes de Android Studio y Firebase Assistant.
2. Selecciona Herramientas > Firebase para abrir el panel de Assistant.

3. Selecciona Performance Monitoring para agregarlo a tu app y, luego, haz clic en Comenzar a usar Performance Monitoring.
4. Haz clic en Conectarse 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 (si ya tienes uno, puedes seleccionarlo). Haz clic en Continuar y acepta las condiciones para crear el proyecto de Firebase y una nueva app de Firebase.

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

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

Agrega Performance Monitoring a tu 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, Android Studio debería sincronizar tu app para asegurarse de que se hayan agregado todas las dependencias necesarias.

Por último, deberías ver el mensaje de éxito en el panel Assistant en Android Studio que indica que todas las dependencias se configuraron correctamente.

Como paso adicional, habilita el registro de depuración siguiendo las instrucciones del paso "Habilita el registro de depuración (opcional)". 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 > Ejecuta "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é sucede bajo la superficie?

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

1. En onCreate(), inicializamos la 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 a través de Remote Config, se habilitará la función y la imagen descargada se mostrará 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 tu app se está ejecutando, puedes configurar la nueva marca de función.

1. En el panel izquierdo de Firebase console, busca la sección Engage y, luego, haz clic en Remote Config.
2. Haz clic en el botón Create configuration 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 nuevo -> Valor condicional -> Crea una condición nueva.
5. En el nombre de la condición, ingresa Seasonal image rollout.
6. En la sección Applies if..., selecciona User in random percentile <= 0%. (Debes dejar la función inhabilitada hasta que tengas todo listo para lanzarla en un paso posterior).
7. Haz clic en Crear condición. Más adelante, usarás esta condición para lanzar la nueva función a 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 a la que 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 de una URL.
9. Haz clic en Guardar.

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

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

5. Agrega la supervisión del 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 querrás que los usuarios esperen demasiado en esta pantalla, por lo que, por lo general, es beneficioso supervisar el tiempo que se muestra la pantalla de presentación.

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

Para realizar un seguimiento del tiempo que se muestra la pantalla de presentación, deberás agregar 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 seguimiento 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 hará un seguimiento del tiempo adicional que el atributo se 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 seguimiento 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 registros de código personalizados 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. Agrega 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 nueva función. Un factor que puede afectar esta duración es si la imagen que se muestra es la predeterminada o si debe descargarse desde una URL. Y quién sabe, tal vez con el tiempo tengas diferentes URLs desde las que descargues una imagen.

Por lo tanto, agreguemos un atributo personalizado que represente la URL de la imagen de temporada a 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 contiene 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 el panel de Performance Monitoring

Configura el panel para supervisar la función

En Firebase console, selecciona el proyecto que tenga la app de Friendly Eats.

En el panel izquierdo, busca la sección Lanzamiento y supervisión 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 en cuestión de minutos después de la recopilación.

En este panel, puedes hacer un seguimiento de las métricas clave de tu app. La vista predeterminada incluye la duración del seguimiento del tiempo de inicio de la app, pero puedes agregar las métricas que más te interesen. Dado que estás haciendo un seguimiento de la nueva función que agregaste, puedes adaptar tu panel para que muestre la duración del seguimiento de código personalizado splash_screen_trace.

1. Haz clic en uno de los cuadros vacíos Seleccionar una métrica (Select a metric).
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 y deberías 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, de modo que puedas ver rápidamente cómo cambia su rendimiento con el paso del tiempo y hasta con diferentes lanzamientos.

El panel de métricas es una herramienta potente para hacer un seguimiento del rendimiento de las métricas clave que experimentan tus usuarios. En este codelab, tienes un pequeño conjunto de datos en un período acotado, por lo que usarás otras vistas de panel que te ayudarán a comprender el rendimiento del lanzamiento de funciones.

8. Lanza tu 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 porcentaje de usuarios de tu condición de segmentación. Normalmente, lanzarás funciones nuevas para una pequeña parte de los usuarios y las aumentarás solo cuando estés seguro de que no hay problemas con ellas. Sin embargo, en este codelab, eres el único usuario de la app, por lo que puedes cambiar el porcentaje 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 al 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 función nueva. Después de la pantalla de presentación, deberías ver la nueva pantalla principal del estado vacío.

9. Verifica los cambios de rendimiento

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

1. En la pestaña principal Panel, desplázate hacia abajo hasta la tabla de seguimientos y, luego, haz clic en la pestaña Seguimientos personalizados. En esta tabla, verás los seguimientos de código personalizados que agregaste antes, además de 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 medía el tiempo que se tardó en descargar y procesar la imagen. En el valor Duration del seguimiento, puedes ver que esta descarga y procesamiento tardan una cantidad significativa de tiempo.

3. Como tienes datos de splash_seasonal_image_processing, puedes agregar la duración de este seguimiento a tu 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 Seleccionar una métrica (Select a metric). En la ventana de diálogo, selecciona el tipo de registro Registros personalizados y el nombre del registro splash_seasonal_image_processing. Por último, haz clic en Seleccionar métrica para agregar esta métrica al panel.

4. Para confirmar con más detalle las diferencias, puedes analizar 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 las métricas.

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

6. Es probable que los valores de duración de la pantalla de presentación sean un poco diferentes de los de la captura de pantalla anterior, pero deberías tener una duración más larga cuando la imagen se descargue desde una URL en lugar de usar la imagen predeterminada (representada por "unset").

En este codelab, el motivo de esta duración más larga puede ser sencillo, pero en una app real, es posible que no sea tan obvio. Los datos de duración recopilados provendrán de diferentes dispositivos que ejecuten la app en diferentes condiciones de conexión de red, las cuales podrían ser peores de lo que esperabas. Veamos cómo investigarías este problema si esta fuera una situación del mundo 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, 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 agregadas 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 se tarda en descargar y procesar imágenes (es decir, la duración del seguimiento splash_seasonal_image_processing), puedes ver que se dedica una gran cantidad de tiempo a descargar la imagen.

Hallazgos de rendimiento

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

1. El tiempo dedicado a SplashScreenActivity aumentó.
2. La duración de splash_seasonal_image_processing fue muy alta.
3. La demora se debió al tiempo de respuesta de la descarga de la imagen y al tiempo de procesamiento correspondiente que se necesitaba para la imagen.

En el siguiente paso, mitigarás el impacto en el rendimiento mediante la reversión de la función y la identificación de cómo puedes mejorar su implementación.

10. Revertir 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 tener que lanzar otra versión para los usuarios. Esto te permite reaccionar rápidamente a los problemas (como los problemas 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 Remote Config de Firebase console.
2. En la parte superior de la página, haz clic en Condiciones.
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 y deberías ver la pantalla principal del estado vacío original:

11. Corrige los problemas de rendimiento

Antes en el codelab, descubriste que descargar una imagen para la pantalla de presentación causaba la ralentización de la app. Si observas con mayor detalle la imagen descargada, verás que estás usando la resolución original de la imagen, que era de más de 2 MB. Una solución rápida para el problema de rendimiento es reducir la calidad a una resolución más apropiada para que la imagen tarde menos tiempo en descargarse.

Vuelve a lanzar el valor de Remote Config

1. Regresa a la página Remote Config de Firebase console.
2. Haz clic en el ícono Editar del parámetro seasonal_image_url.
3. Actualiza el Valor para el 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 de 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 solución y configura alertas

Ejecuta la app de manera local

Con el nuevo valor de configuración establecido para usar una URL de imagen de descarga diferente, vuelve a ejecutar la app. Esta vez, deberías notar que el tiempo que se pasa en la pantalla de presentación es más corto que antes.

Consulta 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 parte inferior de la tabla de seguimientos, en la pestaña Seguimientos personalizados, haz clic en el seguimiento personalizado splash_seasonal_image_processing para volver a ver 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. Si colocas el cursor sobre las URLs, verás un valor que coincide con la URL nueva para 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 menor 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 que te notifiquen cuando un seguimiento supere un umbral que establezcas. Abre el panel Rendimiento y haz clic en el ícono del menú ampliado (de tres puntos) de splash_screen_trace y, luego, 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 para que sea un poco superior al valor que ves, de modo que, si tu splash_screen_trace lo supera, recibas un correo electrónico.

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. Supervisaste las métricas de rendimiento clave para el lanzamiento de una función nueva y reaccionaste rápidamente cuando se descubrió un problema de rendimiento. Todo esto fue posible gracias a la capacidad de realizar cambios de 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
• Agrega un seguimiento de código personalizado a tu código para medir una función específica
• Cómo configurar 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 supervisión del rendimiento para identificar problemas durante un lanzamiento
• Configurar alertas de rendimiento para que te notifiquen cuando el rendimiento de tu app supere un umbral que establezcas

Más información

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