Monitoramento de desempenho dos lançamentos de recursos

1. Visão geral

Neste codelab, você vai aprender a monitorar o desempenho do seu app durante o lançamento de um recurso. Nosso app de exemplo terá funcionalidade básica e está configurado para mostrar uma imagem de plano de fundo diferente com base em uma sinalização da Configuração remota do Firebase. Abordaremos a instrumentação de rastros para monitorar o desempenho do aplicativo, o lançamento de uma alteração de configuração no aplicativo, o monitoramento do efeito e a avaliação de como podemos melhorar o desempenho.

O que você vai aprender

• Como adicionar o Monitoramento de desempenho do Firebase ao seu app para dispositivos móveis e receber métricas prontas para uso, como horário de início do app e frames lentos ou congelados.
• Como adicionar rastros personalizados para entender os caminhos de código críticos das jornadas do usuário
• Como usar o painel do Monitoramento de desempenho para entender suas métricas e acompanhar alterações importantes, como o lançamento de um recurso.
• Como configurar alertas de desempenho para monitorar suas principais métricas
• Como implementar uma alteração na Configuração remota do Firebase

Pré-requisitos

• Android Studio 4.0 ou mais recente
• Um Android Emulator com o nível 16 da API ou mais recente.
• Java versão 8 ou mais recente
• Conhecimento básico da Configuração remota do Firebase

2. Configurar o projeto de exemplo

Fazer o download do código

Execute o comando a seguir para clonar o código de exemplo deste codelab. Isso vai criar uma pasta chamada codelab-perf-rc-android na sua máquina:

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

Se você não tiver o Git na sua máquina, também poderá fazer o download do código diretamente do GitHub.

Importe o projeto na pasta firebase-perf-rc-android-start para o Android Studio. Você provavelmente vai encontrar algumas exceções de execução ou talvez um aviso sobre um arquivo google-services.json ausente. Vamos corrigir isso na próxima seção.

Neste codelab, você vai usar o plug-in do Firebase Assistente para registrar seu app Android com um projeto do Firebase e adicionar os arquivos de configuração, plug-ins e dependências necessários ao seu projeto do Android. Tudo isso no Android Studio.

Conectar seu app ao Firebase

1. Acesse Android Studio/Help > Verifique se há atualizações para confirmar se você está usando as versões mais recentes do Android Studio e do Firebase Assistente.
2. Selecione Ferramentas > Firebase para abrir o painel do Assistente.

3. Escolha Monitoramento de desempenho para adicionar ao seu app e clique em Começar a usar o Monitoramento de desempenho.
4. Clique em Conectar ao Firebase para conectar seu projeto Android ao Firebase (isso vai abrir o console do Firebase no seu navegador).
5. No Console do Firebase, clique em Adicionar projeto e digite o nome de um projeto do Firebase (se você já tiver um projeto do Firebase, selecione-o). Clique em Continuar e aceite os termos para criar o projeto e um novo app do Firebase.

Em seguida, uma caixa de diálogo vai aparecer para conectar o novo app do Firebase ao projeto do Android Studio.

6. Clique em Conectar.
7. Abra o Android Studio. No painel Assistente, você verá a confirmação de que o app está conectado ao Firebase.

Adicionar o Monitoramento de desempenho ao seu app

No painel Assistente do Android Studio, clique em Adicionar o Monitoramento de desempenho ao seu app.

Uma caixa de diálogo Aceitar mudanças vai aparecer. Depois disso, o Android Studio vai sincronizar seu app para garantir que todas as dependências necessárias foram adicionadas.

Por fim, você vai encontrar a mensagem de êxito no painel do Assistente no Android Studio informando que todas as dependências estão configuradas corretamente.

Como etapa adicional, ative a geração de registros de depuração seguindo as instruções na etapa "(Opcional) Ativar a geração de registros de depuração". As mesmas instruções também estão disponíveis na documentação pública.

3. Execute o aplicativo

Agora você verá o arquivo google-services.json no diretório do módulo (nível do app) do app, que será compilado. No Android Studio, clique em Run > Execute "app" para criar e executar o app no Android Emulator.

Quando o app estiver em execução, você vai encontrar primeiro uma tela de apresentação como esta:

Depois de alguns segundos, a página principal com a imagem padrão vai aparecer:

O que está acontecendo nos bastidores?

A tela de apresentação é implementada em SplashScreenActivity e faz o seguinte:

1. Em onCreate(), inicializamos as configurações da Configuração remota do Firebase e buscamos os valores que você vai definir no painel da Configuração remota mais adiante neste codelab.
2. Em executeTasksBasedOnRC(), lemos o valor de configuração da flag seasonal_image_url. Se um URL for fornecido pelo valor de configuração, faremos o download da imagem de forma síncrona.
3. Quando o download for concluído, o app navegará para MainActivity e chamará finish() para finalizar SplashScreenActivity.

Em MainActivity, se seasonal_image_url for definido pela Configuração remota, o recurso será ativado e a imagem salva será exibida como plano de fundo da página principal. Caso contrário, a imagem padrão (mostrada acima) será exibida.

4. Definir a Configuração remota

Agora que o app está em execução, configure a nova flag de recurso.

1. No painel esquerdo do Console do Firebase, localize a seção Engajar e clique em Configuração remota.
2. Clique no botão Criar configuração para abrir o formulário de configuração e adicione seasonal_image_url como a chave de parâmetro.
3. Clique em Adicionar descrição e digite esta descrição: Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
4. Clique em Adicionar novo -> Valor condicional -> Criar nova condição.
5. Para o nome da condição, insira Seasonal image rollout.
6. Na seção Applies if..., selecione User in random percentile <= 0%. (Deixe o recurso desativado até que esteja tudo pronto para o lançamento em uma etapa posterior.)
7. Clique em Criar condição. Você usará essa condição posteriormente para lançar o novo recurso para seus usuários.

7. Abra o formulário Criar seu primeiro parâmetro e localize o campo Valor para lançamento sazonal da imagem. Insira o URL de onde será feito o download da imagem sazonal: https://images.unsplash.com/photo-1552691021-7043334e0b51
8. Deixe o valor padrão como uma string vazia. Isso significa que a imagem padrão da base de código será mostrada em vez de uma imagem transferida por download de um URL.
9. Clique em Salvar.

A nova configuração é criada como um rascunho.

10. Clique em Publicar alterações e confirme as mudanças na parte de cima para atualizar o app.

5. Adicionar monitoramento para o tempo de carregamento de dados

O app pré-carrega alguns dados antes de mostrar MainActivity e mostra uma tela de apresentação para ocultar esse processo. Você não quer que os usuários esperem muito nessa tela. Portanto, normalmente é vantajoso monitorar por quanto tempo a tela de apresentação é exibida.

O Monitoramento de desempenho do Firebase oferece uma maneira de fazer exatamente isso. É possível instrumentar traces de código personalizados para monitorar o desempenho de um código específico no app, como o tempo de carregamento de dados e o tempo de processamento do novo recurso.

Para monitorar por quanto tempo a tela de apresentação é mostrada, adicione um trace de código personalizado ao SplashScreenActivity, que é o Activity que implementa a tela de apresentação.

1. Inicialize, crie e inicie um trace de código personalizado com o nome splash_screen_trace:

SplashScreenActivity.java (link em inglês)

// ...
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. Encerre o trace no método onDestroy() de SplashScreenActivity:

SplashScreenActivity.java (link em inglês)

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

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

Como o novo recurso faz o download e processa uma imagem, você vai adicionar um segundo trace de código personalizado que vai rastrear o tempo adicional que o recurso adicionou a SplashScreenActivity.

1. Inicialize, crie e inicie um trace de código personalizado com o nome splash_seasonal_image_processing:

SplashScreenActivity.java (link em inglês)

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. Encerre o rastro nos métodos onLoadFailed() e onResourceReady() da RequestListener:

SplashScreenActivity.java (link em inglês)

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

Agora que você adicionou rastros de código personalizados para acompanhar a duração da tela de apresentação (splash_screen_trace)) e o tempo de processamento do novo recurso (splash_seasonal_image_processing), execute o app no Android Studio novamente. Você vai encontrar uma mensagem de registro que contém Logging trace metric: splash_screen_trace, seguida pela duração do rastreamento. Você não verá uma mensagem de registro para splash_seasonal_image_processing porque ainda não ativou o novo recurso.

6. Adicionar um atributo personalizado ao trace

Em relação a traces de código personalizados, o Monitoramento de desempenho registra automaticamente os atributos padrão (metadados comuns, como versão do app, país, dispositivo etc.) para que você possa filtrar os dados do trace no Console do Firebase. Também é possível adicionar e monitorar atributos personalizados.

Você acabou de adicionar dois traces de código personalizados no app para monitorar a duração da tela de apresentação e o tempo de processamento do novo recurso. Um fator que pode afetar essas durações é se a imagem exibida é a padrão ou se ela precisa ser transferida por download a partir de um URL. E, quem sabe, você pode acabar com URLs diferentes dos quais você faz o download de uma imagem.

Então, vamos adicionar um atributo personalizado que representa o URL sazonal da imagem a esses traces de código personalizados. Dessa forma, é possível filtrar os dados de duração por esses valores mais tarde.

1. Adicione o atributo personalizado (seasonal_image_url_attribute) para splash_screen_trace no início do método executeTasksBasedOnRC:

SplashScreenActivity.java (link em inglês)

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. Adicione o mesmo atributo personalizado para splash_seasonal_image_processing logo após a chamada de startTrace("splash_seasonal_image_processing"):

SplashScreenActivity.java (link em inglês)

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

    // ...
}

Agora que você adicionou um atributo personalizado (seasonal_image_url_attribute) para os dois traces personalizados (splash_screen_trace e splash_seasonal_image_processing), execute o app no Android Studio novamente. Você verá uma mensagem de geração de registros com Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'.. Você ainda não ativou o parâmetro da Configuração remota seasonalImageUrl. Por isso, o valor do atributo é unset.

O SDK do Monitoramento de desempenho coletará os dados de trace e os enviará ao Firebase. É possível ver os dados no painel Desempenho do Console do Firebase, que vamos explicar em detalhes na próxima etapa do codelab.

7. Configurar o painel de monitoramento de desempenho

Configurar o painel para monitorar o recurso

No Console do Firebase, selecione o projeto que tem o app Friendly Eats.

No painel esquerdo, localize a seção Liberar e Monitorar e em Desempenho.

O painel Desempenho será exibido com seus primeiros pontos de dados no quadro de métricas. O SDK do Monitoramento de desempenho coleta dados de desempenho do seu app e os exibe minutos após a coleta.

Nesse quadro, você pode acompanhar as principais métricas do seu app. A visualização padrão inclui a duração do trace do horário de início do app, mas você pode adicionar as métricas mais importantes para você. Como você está acompanhando o novo recurso adicionado, pode personalizar seu painel para mostrar a duração do trace de código personalizado splash_screen_trace.

1. Clique em uma das caixas vazias Selecionar uma métrica.
2. Na janela de diálogo, selecione o tipo de trace Traces personalizados e o nome do trace splash_screen_trace.

3. Clique em Selecionar métrica. A duração de splash_screen_trace vai aparecer no seu painel.

Use essas mesmas etapas para adicionar outras métricas importantes para você conferir rapidamente como o desempenho delas muda ao longo do tempo e mesmo com versões diferentes.

O painel de métricas é uma ferramenta poderosa para acompanhar a performance das principais métricas dos usuários. Neste codelab, você tem um pequeno conjunto de dados em um período curto. Portanto, você vai usar outras visualizações do painel que ajudarão a entender o desempenho do lançamento do recurso.

8. Lance seu recurso

Agora que você configurou seu monitoramento, está tudo pronto para implementar a alteração da Configuração remota do Firebase (seasonal_image_url) que você configurou anteriormente.

Para lançar uma alteração, volte à página Configuração remota no Console do Firebase para aumentar o percentil de usuários da sua condição de segmentação. Normalmente, você lança novos recursos para uma pequena parte dos usuários e aumenta esse número somente quando tem certeza de que não há problemas. Neste codelab, no entanto, você é o único usuário do app, então pode mudar o percentil para 100%.

1. Clique na guia Condições na parte de cima da página.
2. Clique na condição Seasonal image rollout adicionada anteriormente.
3. Mude o percentil para 100%.
4. Clique em Salvar condição.
5. Clique em Publicar alterações e confirme as mudanças.

De volta ao Android Studio, reinicie o app no emulador para conferir o novo recurso. Após a tela de apresentação, a nova tela principal de estado vazio vai aparecer.

9. Verificar mudanças de performance

Agora, vamos verificar o desempenho do carregamento da tela de apresentação usando o painel Desempenho no Console do Firebase. Nesta etapa do codelab, você vai usar diferentes partes do painel para visualizar dados de desempenho.

1. Na guia principal Painel, role para baixo até a tabela de traces e clique na guia Traces personalizados. Nesta tabela, você vai encontrar os traces de código personalizados que adicionou anteriormente, além de alguns traces prontos para uso.
2. Agora que você ativou o novo recurso, procure o trace de código personalizado splash_seasonal_image_processing, que mediu o tempo necessário para fazer o download e processar a imagem. Pelo valor de Duração do rastreamento, é possível notar que esse download e processamento leva um tempo significativo.

3. Como você tem dados para splash_seasonal_image_processing, é possível adicionar a duração desse trace ao quadro de métricas na parte superior da guia Painel.

Assim como antes, clique em uma das caixas vazias Selecionar uma métrica. Na janela de diálogo, selecione o tipo de trace Traces personalizados e o nome do trace splash_seasonal_image_processing. Por fim, clique em Selecionar métrica para adicioná-la ao quadro de métricas.

4. Para confirmar melhor as diferenças, analise mais de perto os dados de splash_screen_trace. Clique no card splash_screen_trace no quadro de métricas e depois em Ver detalhes das métricas.

5. Na página de detalhes, há uma lista de atributos no canto inferior esquerdo, incluindo o atributo personalizado que você criou anteriormente. Clique no atributo personalizado seasonal_image_url_attribute para conferir a duração da tela de apresentação de cada URL de imagem sazonal à direita:

6. Os valores de duração da tela de apresentação provavelmente serão um pouco diferentes dos mostrados na captura de tela acima, mas você vai precisar de uma duração mais longa quando a imagem for transferida por download de um URL em vez de usar a imagem padrão (representada por "não definido").

Neste codelab, o motivo dessa maior duração pode ser simples, mas em um app real, isso pode não ser tão óbvio. Os dados de duração coletados vêm de diferentes dispositivos que executam o app em várias condições de conexão de rede, e essas condições podem ser piores do que você espera. Vejamos como você investigaria esse problema se essa fosse uma situação real.

7. Clique em Desempenho na parte de cima da página para voltar à guia principal do Painel:
8. Na tabela de traces na parte inferior da página, clique na guia Solicitações de rede. Nesta tabela, você verá todas as solicitações de rede do seu app agregadas em padrões de URL, incluindo o padrão de URL images.unsplash.com/**. Se você comparar o valor desse tempo de resposta com o tempo total de download e processamento da imagem (ou seja, a duração do trace splash_seasonal_image_processing), vai perceber que uma grande parte do tempo é gasto no download da imagem.

Descobertas de desempenho

Ao usar o Monitoramento de desempenho do Firebase, você observou o seguinte impacto sobre os usuários finais com o novo recurso ativado:

1. O tempo gasto no app SplashScreenActivity aumentou.
2. A duração de splash_seasonal_image_processing foi muito longa.
3. Isso ocorreu devido ao tempo de resposta para o download da imagem e ao tempo de processamento correspondente necessário para a imagem.

Na próxima etapa, você vai reduzir o impacto no desempenho revertendo o recurso e identificando como pode melhorar a implementação dele.

10. Reverter o recurso

Aumentar o número de usuários o tempo de espera durante a tela de apresentação não é desejável. Um dos principais benefícios da Configuração remota é a capacidade de pausar e reverter o lançamento sem precisar lançar outra versão para os usuários. Isso permite reagir rapidamente a problemas (como os problemas de desempenho que você descobriu na última etapa) e minimizar o número de usuários insatisfeitos.

Como uma mitigação rápida, você redefinirá o percentil de lançamento de volta para 0. Assim, todos os usuários verão a imagem padrão novamente:

1. Volte para a página Configuração remota no Console do Firebase.
2. Clique em Condições na parte de cima da página.
3. Clique na condição Seasonal image rollout adicionada anteriormente.
4. Mude o percentil para 0%.
5. Clique em Salvar condição.
6. Clique em Publicar alterações e confirme as mudanças.

Reinicie o app no Android Studio. A tela principal original com o estado vazio vai aparecer:

11. Corrigir os problemas de desempenho

Você descobriu anteriormente no codelab que o download de uma imagem para a tela de apresentação estava causando lentidão no app. Analisando mais de perto a imagem transferida por download, você verá que está usando a resolução original da imagem, que tinha mais de 2 MB. Uma solução rápida para o problema de desempenho é reduzir a qualidade a uma resolução mais adequada, de modo que o download da imagem leve menos tempo.

Lance o valor da Configuração remota novamente

1. Volte para a página Configuração remota no Console do Firebase.
2. Clique no ícone Editar do parâmetro seasonal_image_url.
3. Atualize o Valor do lançamento sazonal da imagem para https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 e clique em Salvar.

4. Clique na guia Condições na parte de cima da página.
5. Clique em Lançamento sazonal de imagens e defina o percentil novamente para 100%.
6. Clique em Salvar condição.

7. Clique no botão Publicar alterações.

12. Testar a correção e configurar alertas

Executar o app localmente

Com o novo valor de configuração definido para usar um URL de imagem de download diferente, execute o app novamente. Desta vez, o tempo gasto na tela de apresentação será menor do que antes.

Ver o desempenho das mudanças

Volte ao painel Desempenho no Console do Firebase para ver a aparência das métricas.

1. Desta vez, você vai usar a tabela de traces para navegar até a página de detalhes. Na tabela de traces, na guia Traces personalizados, clique no trace personalizado splash_seasonal_image_processing para ter uma visão mais detalhada da métrica de duração novamente.

2. Clique no atributo personalizado seasonal_image_url_attribute para conferir o detalhamento dos atributos personalizados novamente. Se você passar o cursor sobre os URLs, verá um valor que corresponde ao novo URL da imagem em tamanho reduzido: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (com ?w=640 no final). O valor de duração associado a essa imagem é consideravelmente menor do que o da imagem anterior e mais aceitável para os usuários.

3. Agora que você melhorou o desempenho da tela inicial, é possível configurar alertas para receber notificações quando um rastro ultrapassar um limite definido por você. Abra o painel Desempenho, clique no ícone do menu flutuante (três pontos) do splash_screen_trace e clique em Configurações de alerta.

4. Clique no botão para ativar o alerta Duração. Defina o valor do limite um pouco acima do mostrado. Assim, se o splash_screen_trace exceder esse valor, você receberá um e-mail.

5. Clique em Salvar para criar o alerta. Role para baixo até a tabela de traces e clique na guia Traces personalizados para conferir se o alerta está ativado.

13. Parabéns!

Parabéns! Você ativou o SDK do Monitoramento de desempenho do Firebase e coletou traces para medir o desempenho de um novo recurso. Você monitorou as principais métricas de desempenho para o lançamento de um novo recurso e reagiu rapidamente quando um problema de desempenho foi descoberto. Tudo isso foi possível com a capacidade de fazer alterações de configuração com a Configuração remota e monitorar problemas de desempenho em tempo real.

O que vimos

• Adicionar o SDK do Monitoramento de desempenho do Firebase ao seu app
• Como adicionar um trace de código personalizado ao código para medir um recurso específico
• Definir um parâmetro da Configuração remota e um valor condicional para controlar/lançar um novo recurso
• Entender como usar o painel de monitoramento de desempenho para identificar problemas durante um lançamento
• Configure alertas de desempenho para receber notificações quando o desempenho do app ultrapassar um limite estabelecido por você

Saiba mais

• firebase.google.com (link em inglês)
• Começar a usar o Monitoramento de desempenho para Android
• Introdução à Configuração remota do Firebase