Monitoramento de desempenho de lançamentos de recursos

1. Visão Geral

Neste codelab, você aprenderá a monitorar o desempenho do seu app durante o lançamento de um recurso. Nosso aplicativo de exemplo terá funcionalidades básicas e está configurado para exibir uma imagem de plano de fundo diferente com base em um sinalizador do Firebase Remote Config. Analisaremos a instrumentação de rastreamentos para monitorar o desempenho do aplicativo, implementando uma alteração de configuração no aplicativo, monitorando o efeito e vendo como podemos melhorar o desempenho.

O que você aprenderá

• Como adicionar o Firebase Performance Monitoring ao seu aplicativo móvel para obter métricas prontas para uso (como horário de início do aplicativo e frames lentos ou congelados)
• Como adicionar rastreamentos personalizados para entender os caminhos de código críticos das jornadas do usuário
• Como usar o painel Monitoramento de desempenho para entender suas métricas e rastrear mudanças importantes, como a implementação 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 superior
• Um emulador Android com API de nível 16 ou superior.
• Java versão 8 ou superior
• Uma compreensão básica do Firebase Remote Config

2. Configure o projeto de amostra

Baixe o código

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

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

Caso não tenha o Git em sua máquina, você também pode baixar o código diretamente do GitHub.

Importe o projeto na firebase-perf-rc-android-start para o Android Studio. Você provavelmente verá algumas exceções de tempo de execução ou talvez um aviso sobre a falta de um arquivo google-services.json . Corrigiremos isso na próxima seção.

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

Conecte seu aplicativo ao Firebase

1. Acesse Android Studio / Ajuda > Verificar atualizações para ter certeza de que está usando as versões mais recentes do Android Studio e do Firebase Assistant.
2. Selecione Ferramentas > Firebase para abrir o painel Assistente .

3. Escolha Monitoramento de Desempenho para adicionar ao seu aplicativo e clique em Começar com Monitoramento de Desempenho .
4. Clique em Conectar ao Firebase para conectar seu projeto Android ao Firebase (isso abrirá o console do Firebase em seu navegador) .
5. No console do Firebase, clique em Adicionar projeto e insira um nome de projeto do Firebase (se você já tiver um projeto do Firebase, poderá selecionar esse projeto existente) . Clique em Continuar e aceite os termos para criar o projeto Firebase e um novo aplicativo Firebase.

Em seguida, você verá uma caixa de diálogo para conectar seu novo aplicativo Firebase ao seu projeto Android Studio.

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

Adicione o monitoramento de desempenho ao seu aplicativo

No painel Assistente do Android Studio, clique em Adicionar monitoramento de desempenho ao seu aplicativo .

Você deverá ver uma caixa de diálogo para Aceitar alterações , após a qual o Android Studio deverá sincronizar seu aplicativo para garantir que todas as dependências necessárias foram adicionadas.

Por fim, você deverá ver a mensagem de sucesso no painel Assistente do Android Studio informando que todas as dependências estão configuradas corretamente.

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

3. Execute o aplicativo

Agora você deve ver o arquivo google-services.json no diretório do módulo (nível do aplicativo) do seu aplicativo, e seu aplicativo agora deve ser compilado. No Android Studio, clique em Executar > Executar 'app' para criar e executar o aplicativo em seu emulador Android.

Quando o aplicativo estiver em execução, você deverá ver primeiro uma tela inicial como esta:

Então, após alguns segundos, a página principal com a imagem padrão será exibida:

O que está acontecendo sob o capô?

A tela inicial é implementada em SplashScreenActivity e faz o seguinte:

1. Em onCreate() , inicializamos as configurações do Configuração remota do Firebase e buscamos os valores de configuração que você definirá no painel do Configuração remota posteriormente neste codelab.
2. Em executeTasksBasedOnRC() , lemos o valor de configuração do sinalizador seasonal_image_url . Se uma URL for fornecida pelo valor de configuração, baixamos a imagem de forma síncrona.
3. Assim que o download for concluído, o aplicativo navega para MainActivity e chama finish() para encerrar SplashScreenActivity .

Em MainActivity , se seasonal_image_url for definido por meio do Remote Config, o recurso será habilitado e a imagem baixada será exibida como plano de fundo da página principal. Caso contrário, a imagem padrão (mostrada acima) será exibida.

4. Configure a Configuração remota

Agora que seu aplicativo está em execução, você pode configurar o novo sinalizador 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 adicionar seasonal_image_url como chave de parâmetro.
3. Clique em Adicionar descrição e insira 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. Para a seção Applies if... , selecione User in random percentile <= 0% . (Você deseja deixar o recurso desativado até estar pronto para implementá-lo em uma etapa posterior.)
7. Clique em Criar condição . Você usará essa condição posteriormente para distribuir o novo recurso aos seus usuários.

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

Você pode ver que a nova configuração foi criada como um rascunho.

10. Clique em Publicar alterações e confirme as alterações na parte superior para atualizar seu aplicativo.

5. Adicione monitoramento para o tempo de carregamento de dados

Seu aplicativo pré-carrega alguns dados antes de mostrar MainActivity e exibe uma tela inicial para ocultar esse processo. Você não quer que seus usuários esperem muito nesta tela, então normalmente é benéfico monitorar por quanto tempo a tela inicial é exibida.

O Monitoramento de desempenho do Firebase oferece uma maneira de fazer exatamente isso. Você pode instrumentar rastreamentos de código personalizados para monitorar o desempenho de código específico em seu aplicativo, como o tempo de carregamento de dados e o tempo de processamento de seu novo recurso.

Para acompanhar por quanto tempo a tela inicial é exibida, você adicionará um rastreamento de código personalizado a SplashScreenActivity , que é a Activity que implementa a tela inicial.

1. Inicialize, crie e inicie um rastreamento de código personalizado chamado 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. Finalize o rastreamento no método onDestroy() de SplashScreenActivity :

SplashScreenActivity.java

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

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

Como seu novo recurso baixa e processa uma imagem, você adicionará um segundo rastreamento de código personalizado que rastreará o tempo adicional que seu recurso adicionou a SplashScreenActivity .

1. Inicialize, crie e inicie um rastreamento de código personalizado chamado 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. Finalize o rastreamento nos métodos onLoadFailed() e onResourceReady() do 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();

Agora que você adicionou rastreamentos de código personalizados para rastrear a duração da tela inicial ( splash_screen_trace) e o tempo de processamento do novo recurso ( splash_seasonal_image_processing ), execute o aplicativo no Android Studio novamente. Você deverá ver 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 log para splash_seasonal_image_processing porque ainda não ativou o novo recurso.

6. Adicione um atributo personalizado ao rastreamento

Para rastreamentos de código personalizados, o Monitoramento de desempenho registra automaticamente atributos padrão (metadados comuns, como versão do aplicativo, país, dispositivo etc.) para que você possa filtrar os dados do rastreamento no Console do Firebase . Você também pode adicionar e monitorar atributos personalizados .

No seu aplicativo, você acabou de adicionar dois rastreamentos de código personalizados para monitorar a duração da tela inicial e o tempo de processamento do novo recurso. Um fator que pode afetar essas durações é se a imagem exibida é a imagem padrão ou se a imagem precisa ser baixada de um URL. E quem sabe – você pode eventualmente ter URLs diferentes dos quais baixa uma imagem.

Então, vamos adicionar um atributo personalizado que representa o URL da imagem sazonal a esses rastreamentos de código personalizados. Dessa forma, você poderá filtrar os dados de duração por esses valores posteriormente.

1. Adicione o atributo personalizado ( seasonal_image_url_attribute ) para splash_screen_trace no início do 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. Adicione o mesmo atributo personalizado para splash_seasonal_image_processing logo após a chamada 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);

    // ...
}

Agora que você adicionou um atributo personalizado ( seasonal_image_url_attribute ) para ambos os rastreamentos personalizados ( splash_screen_trace e splash_seasonal_image_processing ), execute o aplicativo no Android Studio novamente. Você deverá ver uma mensagem de registro que contém Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. Você ainda não ativou o parâmetro seasonImageUrl do Configuração remota e é por isso que o valor do atributo não está unset .

O SDK do Monitoramento de desempenho coletará os dados de rastreamento e os enviará ao Firebase. Você pode visualizar os dados no painel de desempenho do console do Firebase, que explicaremos detalhadamente na próxima etapa do codelab.

7. Configure seu painel de monitoramento de desempenho

Configure seu painel para monitorar seu recurso

No console do Firebase , selecione o projeto que contém seu aplicativo Friendly Eats.

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

Você deverá ver o painel de desempenho com os primeiros pontos de dados no quadro de métricas! O SDK do Monitoramento de desempenho coleta dados de desempenho do seu aplicativo e os exibe minutos após a coleta.

Este quadro de métricas é onde você pode acompanhar as principais métricas do seu aplicativo. A visualização padrão inclui a duração do rastreamento do horário de início do seu aplicativo, mas você pode adicionar as métricas que mais lhe interessam. Como você está rastreando o novo recurso adicionado, você pode personalizar seu painel para exibir a duração do rastreamento de código personalizado splash_screen_trace .

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

3. Clique em Selecionar métrica e você verá a duração de splash_screen_trace adicionada ao seu painel!

Você pode usar essas mesmas etapas para adicionar outras métricas de seu interesse, para que possa ver rapidamente como seu desempenho muda ao longo do tempo e até mesmo com versões diferentes.

O quadro de métricas é uma ferramenta poderosa para monitorar o desempenho das principais métricas experimentadas por seus usuários. Neste codelab, você tem um pequeno conjunto de dados em um intervalo de tempo restrito. Portanto, usará outras visualizações de painel que ajudarão você a entender o desempenho da implementação do recurso.

8. Implemente seu recurso

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

Para implementar uma alteração, você retornará à página Configuração remota no Console do Firebase para aumentar o percentil de usuário da sua condição de segmentação. Normalmente, você lançaria novos recursos para uma pequena parcela dos usuários e os aumentaria somente quando tivesse certeza de que não há problemas com eles. Neste codelab, porém, vocês são os únicos usuários do app, então podem alterar o percentil para 100%.

1. Clique na guia Condições na parte superior da página.
2. Clique na condição Seasonal image rollout que você adicionou anteriormente.
3. Altere o percentil para 100%.
4. Clique em Salvar condição .
5. Clique em Publicar alterações e confirme as alterações.

De volta ao Android Studio, reinicie o aplicativo no emulador para ver o novo recurso. Após a tela inicial, você deverá ver a nova tela principal com estado vazio!

9. Verifique as mudanças de desempenho

Agora vamos verificar o desempenho do carregamento da tela inicial usando o painel de desempenho no console do Firebase. Nesta etapa do codelab, você usará diferentes partes do painel para visualizar dados de desempenho.

1. Na guia Painel principal, role para baixo até a tabela de rastreamentos e clique na guia Rastreamentos personalizados . Nesta tabela, você verá os rastreamentos de código personalizados adicionados anteriormente, além de alguns rastreamentos prontos para uso .
2. Agora que você ativou o novo recurso, procure o rastreamento de código personalizado splash_seasonal_image_processing , que mediu o tempo necessário para baixar e processar a imagem. No valor de Duração do rastreamento, você pode ver que esse download e processamento levam um tempo significativo.

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

Semelhante a antes, clique em uma das caixas vazias Selecione uma métrica . Na janela de diálogo, selecione o tipo de rastreamento Rastreamentos personalizados e o nome do rastreamento splash_seasonal_image_processing . Por fim, clique em Selecionar métrica para adicionar esta métrica ao quadro de métricas.

4. Para confirmar ainda mais as diferenças, você pode dar uma olhada mais de perto nos dados de splash_screen_trace . Clique no cartão splash_screen_trace no quadro de métricas e clique em Visualizar detalhes da métrica .

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

6. Os valores de duração da tela inicial provavelmente serão um pouco diferentes daqueles da captura de tela acima, mas você deverá ter uma duração mais longa quando a imagem for baixada de um URL em vez de usar a imagem padrão (representada por "não definido").

Neste codelab, o motivo dessa duração mais longa pode ser simples, mas em um app real pode não ser tão óbvio. Os dados de duração coletados virão de diferentes dispositivos, executando o aplicativo em diversas condições de conexão de rede, e essas condições podem ser piores do que a sua expectativa. Vejamos como você investigaria esse problema se esta fosse uma situação do mundo real.

7. Clique em Desempenho na parte superior da página para voltar à guia principal do Painel :
8. Na tabela de rastreamentos 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 aplicativo 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 necessário para download e processamento da imagem (ou seja, a duração do rastreamento splash_seasonal_image_processing ), poderá ver que uma grande quantidade de tempo é gasta no download da imagem.

Descobertas de desempenho

Usando o Firebase Performance Monitoring, você percebeu o seguinte impacto nos usuários finais com o novo recurso habilitado:

1. O tempo gasto no SplashScreenActivity aumentou.
2. A duração do splash_seasonal_image_processing foi muito grande.
3. O atraso deveu-se ao tempo de resposta para o download da imagem e ao correspondente tempo de processamento necessário para a imagem.

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

10. Reverta o recurso

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

Como uma atenuação rápida, você redefinirá o percentil de implementação para 0 para que todos os usuários vejam a imagem padrão novamente:

1. Volte para a página Configuração remota no console do Firebase.
2. Clique em Condições no topo da página.
3. Clique na condição Seasonal image rollout que você adicionou anteriormente.
4. Altere o percentil para 0%.
5. Clique em Salvar condição .
6. Clique em Publicar alterações e confirme as alterações.

Reinicie o aplicativo no Android Studio e você verá a tela principal original em estado vazio:

11. Corrija os problemas de desempenho

Você descobriu anteriormente no codelab que o download de uma imagem para a tela inicial estava causando lentidão no aplicativo. Olhando mais de perto a imagem baixada, você verá que está usando a resolução original da imagem, que era superior a 2 MB! Uma solução rápida para seu problema de desempenho é reduzir a qualidade para uma resolução mais apropriada para que o download da imagem demore menos.

Implemente o valor do Configuração remota novamente

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

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

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

12. Teste a correção e configure alertas

Execute o aplicativo localmente

Com o novo valor de configuração definido para usar um URL de imagem de download diferente, execute o aplicativo novamente. Desta vez, você deve notar que o tempo gasto na tela inicial é menor do que antes.

Veja o desempenho das mudanças

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

1. Desta vez, você usará a tabela de rastreamentos para navegar até a página de detalhes. Na tabela de rastreamentos, na guia Rastreamentos personalizados , clique no rastreamento personalizado splash_seasonal_image_processing para ver novamente uma visão mais detalhada de sua métrica de duração.

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

3. Agora que melhorou o desempenho da tela inicial, você pode configurar alertas para notificá-lo quando um rastreamento exceder um limite definido. Abra o painel de desempenho e clique no ícone do menu flutuante (três pontos) para splash_screen_trace e clique em Configurações de alerta .

4. Clique no botão de alternância para ativar o alerta de duração . Defina o valor do limite um pouco acima do valor que você estava vendo para que, se seu splash_screen_trace exceder o limite, você receba um e-mail.

5. Clique em Salvar para criar seu alerta. Role para baixo até a tabela de rastreamentos e clique na guia Rastreamentos personalizados para ver se seu alerta está ativado!

13. Parabéns!

Parabéns! Você ativou o SDK do Firebase Performance Monitoring e coletou traces para medir o desempenho de um novo recurso. Você monitorou as principais métricas de desempenho para a implementação 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 o Remote Config e monitorar problemas de desempenho em tempo real.

O que cobrimos

• Adicionando o SDK do Firebase Performance Monitoring ao seu aplicativo
• Adicionar um rastreamento de código personalizado ao seu código para medir um recurso específico
• Configurar um parâmetro do Configuração remota e um valor condicional para controlar/implementar um novo recurso
• Noções básicas sobre como usar o painel de monitoramento de desempenho para identificar problemas durante uma implementação
• Configurar alertas de desempenho para notificá-lo quando o desempenho do seu aplicativo ultrapassar um limite definido por você

Saber mais

• firebase.google.com
• Comece com o Monitoramento de desempenho para Android
• Primeiros passos com a Configuração remota do Firebase