O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Monitoramento de desempenho do Firebase para web

Neste codelab, você aprenderá a usar o Firebase Performance Monitoring para medir o desempenho de um aplicativo da web de bate-papo. Visite https://fireperf-friendlychat.web.app/ para ver uma demonstração ao vivo.

3b1284f5144b54f6.png

O que você aprenderá

  • Como adicionar o monitoramento de desempenho do Firebase ao seu aplicativo da web para obter métricas prontas para uso (carregamento de página e solicitações de rede).
  • Como medir uma parte específica do código com rastreamentos personalizados.
  • Como registrar métricas personalizadas adicionais vinculadas a um rastreamento personalizado.
  • Como segmentar ainda mais seus dados de desempenho com atributos personalizados.
  • Como usar o painel de monitoramento de desempenho para entender o desempenho de seu aplicativo da web.

O que você precisará

  • O IDE ou editor de texto de sua escolha, como WebStorm , Atom , Sublime ou VS Code
  • Um terminal / console
  • Um navegador de sua escolha, como o Chrome
  • O código de amostra do codelab (consulte a próxima seção deste codelab para saber como obter o código).

Clone o repositório GitHub do codelab a partir da linha de comando:

git clone https://github.com/firebase/codelab-friendlychat-web

Alternativamente, se você não tiver o git instalado, você pode baixar o repo como um arquivo zip .

Importe o aplicativo inicial

Usando seu IDE, abra ou importe o diretório 📁 performance-monitoring-start do repositório clonado. Este 📁 diretório de performance-monitoring-start contém o código inicial para o codelab, que é um aplicativo da web de bate-papo.

Crie um projeto Firebase

  1. No Firebase console , clique em Adicionar projeto .
  2. Nomeie seu projeto do Firebase como FriendlyChat .

Lembre-se do ID do seu projeto Firebase.

  1. Clique em Criar projeto .

Adicionar um aplicativo da web Firebase ao projeto

  1. Clique no ícone da web 58d6543a156e56f9.png para criar um novo aplicativo da web do Firebase.
  2. Registre o aplicativo com o apelido Friendly Chat e marque a caixa ao lado de Também configurar o Firebase Hosting para este aplicativo .
  3. Clique em Registrar aplicativo .
  4. Clique nas etapas restantes. Você não precisa seguir as instruções na tela agora; eles serão abordados em etapas posteriores deste codelab.

ea9ab0db531a104c.png

Ative o login do Google para autenticação do Firebase

Para permitir que os usuários façam login no aplicativo de bate-papo com suas contas do Google, usaremos o método de login do Google .

Você precisará ativar o login do Google :

  1. No console do Firebase, localize a seção Desenvolver no painel esquerdo.
  2. Clique em Autenticação e na guia Método de login ( vá para o console ).
  3. Ative o provedor de login do Google e clique em Salvar .

d89fb3873b5d36ae.png

Ativar Cloud Firestore

O aplicativo da web usa o Cloud Firestore para salvar mensagens de bate-papo e receber novas mensagens de bate-papo.

Você precisará habilitar o Cloud Firestore:

  1. Na seção Desenvolver do Firebase console, clique em Banco de dados .
  2. Clique em Criar banco de dados no painel do Cloud Firestore.
  3. Selecione a opção Iniciar no modo de teste e clique em Ativar após ler o aviso de isenção de responsabilidade sobre as regras de segurança.

O código inicial para este codelab inclui regras mais seguras. Iremos implantá-los posteriormente no codelab.

24bd1a097492eac6.png

Habilitar Cloud Storage

O aplicativo da web usa Cloud Storage para Firebase para armazenar, fazer upload e compartilhar fotos.

Você precisará habilitar o Cloud Storage:

  1. Na seção Develop do Firebase console, clique em Storage .
  2. Clique em Primeiros passos .
  3. Leia a isenção de responsabilidade sobre as regras de segurança para seu projeto Firebase e clique em Entendi .

O código inicial inclui uma regra de segurança básica, que implementaremos posteriormente no codelab.

A interface de linha de comando (CLI) do Firebase permite que você use o Firebase Hosting para servir seu aplicativo da web localmente, bem como para implantar seu aplicativo da web em seu projeto do Firebase.

  1. Instale a CLI seguindo estas instruções nos documentos do Firebase.
  2. Verifique se a CLI foi instalada corretamente executando o seguinte comando em um terminal:
firebase --version

Certifique-se de que sua versão da Firebase CLI é v8.0.0 ou posterior.

  1. Autorize a Firebase CLI executando o seguinte comando:
firebase login

Configuramos o modelo de aplicativo da web para extrair a configuração do seu aplicativo para Firebase Hosting do diretório local do seu aplicativo (o repositório que você clonou anteriormente no codelab). Mas para obter a configuração, precisamos associar seu aplicativo ao projeto Firebase.

  1. Certifique-se de que sua linha de comando está acessando o diretório local performance-monitoring-start seu aplicativo.
  2. Associe seu aplicativo ao projeto do Firebase executando o seguinte comando:
firebase use --add
  1. Quando solicitado, selecione o ID do seu projeto e, em seguida, atribua um alias ao projeto do Firebase.

Um alias é útil se você tiver vários ambientes (produção, teste, etc). No entanto, para este codelab, vamos apenas usar o alias de default .

  1. Siga as instruções restantes em sua linha de comando.

Existem várias maneiras de integração com o Firebase Performance Monitoring SDK para web (consulte a documentação para obter detalhes). Neste codelab, vamos habilitar o monitoramento de desempenho de URLs de hospedagem .

Adicionar monitoramento de desempenho e inicializar Firebase

  1. Abra o arquivo public/index.html e, em seguida, adicione a seguinte linha abaixo do TODO para incluir o Firebase Performance Monitoring SDK.

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. Também precisamos inicializar o Firebase SDK com um objeto de configuração que contém informações sobre o projeto Firebase e o aplicativo da web que queremos usar. Como estamos usando o Firebase Hosting, você pode importar um script especial que fará essa configuração para você. Para este codelab, já adicionamos a seguinte linha para você na parte inferior do arquivo public/index.html , mas verifique se ela está lá.

index.html

<script src="/__/firebase/init.js"></script>
  1. No arquivo public/scripts/main.js , adicione a seguinte linha abaixo do TODO para inicializar o monitoramento de desempenho.

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

O Monitoramento de desempenho agora coletará automaticamente o carregamento da página e as métricas de solicitação de rede para você quando os usuários usarem seu site! Consulte a documentação para saber mais sobre os rastreamentos de carregamento automático de página.

Adicione a primeira biblioteca de polyfill de atraso de entrada

O atraso na primeira entrada é útil, pois o navegador que responde a uma interação do usuário dá aos usuários suas primeiras impressões sobre a capacidade de resposta do seu aplicativo.

O primeiro atraso de entrada começa quando o usuário interage pela primeira vez com um elemento na página, como clicar em um botão ou hiperlink. Ele para imediatamente depois que o navegador consegue responder à entrada, o que significa que o navegador não está ocupado carregando ou analisando seu conteúdo.

Esta biblioteca polyfill é opcional para integração de monitoramento de desempenho.

Abra o arquivo public/index.html e remova o comentário da seguinte linha.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Neste ponto, você concluiu a integração com o Firebase Performance Monitoring em seu código!

Nas etapas a seguir, você aprenderá a adicionar traces personalizados usando o Firebase Performance Monitoring. Se você deseja apenas coletar os rastros automáticos, vá para a seção "Implementar e começar a enviar imagens".

O Monitoramento de desempenho permite que você crie rastreamentos personalizados . Um rastreamento personalizado é um relatório para a duração de um bloco de execução em seu aplicativo. Você define o início e o fim de um rastreio customizado usando as APIs fornecidas pelo SDK.

  1. No arquivo public/scripts/main.js , obtenha um objeto de desempenho e, em seguida, crie um rastreamento personalizado para fazer upload de uma mensagem de imagem.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
  1. Para gravar um rastreio personalizado, você precisa especificar o ponto de partida e o ponto de parada do rastreio. Você pode pensar em um rastreamento como um cronômetro.

main.js

// TODO: Start the "timer" for the custom trace.
trace.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    trace.stop();

Você definiu com sucesso um rastreamento personalizado! Depois de implantar seu código, a duração do rastreamento personalizado será registrada se um usuário enviar uma mensagem de imagem. Isso lhe dará uma ideia de quanto tempo leva para os usuários do mundo real enviarem imagens em seu aplicativo de bate-papo.

Você pode configurar ainda mais um rastreamento personalizado para registrar métricas personalizadas para eventos relacionados ao desempenho que ocorrem dentro de seu escopo. Por exemplo, você pode usar uma métrica para investigar se o tempo de upload é afetado pelo tamanho de uma imagem para o rastreamento personalizado que definimos na última etapa.

  1. Localize o rastreio customizado da etapa anterior (definido em seu arquivo public/scripts/main.js ).
  2. Adicione a seguinte linha abaixo do TODO para registrar o tamanho da imagem enviada.

main.js

 ...

// TODO: Record image size.
trace.putMetric('imageSize', file.size);

 ...

Essa métrica permite que o monitoramento de desempenho registre a duração do rastreamento personalizado, bem como o tamanho da imagem carregada.

Com base nas etapas anteriores, você também pode coletar atributos personalizados em seus rastreios personalizados . Atributos personalizados podem ajudar na segmentação de dados por categorias específicas para seu aplicativo. Por exemplo, você pode coletar o tipo MIME do arquivo de imagem para investigar como o tipo MIME pode afetar o desempenho.

  1. Use o rastreio customizado definido em seu arquivo public/scripts/main.js
  2. Adicione a seguinte linha abaixo do TODO para registrar o tipo MIME da imagem carregada.

main.js

 ...

// TODO: Record image MIME type.
trace.putAttribute('imageType', file.type);

 ...

Este atributo permite que o monitoramento de desempenho categorize a duração do rastreamento personalizado com base no tipo de imagem carregada.

O Firebase Performance Monitoring SDK foi projetado para que pudesse ser carregado de forma assíncrona e não impactasse negativamente o desempenho dos aplicativos da web durante o carregamento da página. Antes de o SDK ser carregado, a API Firebase Performance Monitoring não está disponível. Nesse cenário, você ainda pode adicionar rastreamentos personalizados usando a API de velocidade do usuário . O SDK de desempenho do Firebase pegará as durações de measure () e as registrará como rastros personalizados.

Vamos medir a duração do carregamento de scripts de estilo de aplicativo usando a API de tempo do usuário.

  1. No arquivo public/index.html , adicione a seguinte linha para marcar o início do carregamento dos scripts de estilo do aplicativo.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Adicione as seguintes linhas para marcar o fim do carregamento dos scripts de estilo do aplicativo e para medir a duração entre o início e o fim.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

A entrada que você criou aqui será coletada automaticamente pelo Firebase Performance Monitoring. Mais tarde, você poderá encontrar um rastreamento personalizado chamado loadStyling no console de desempenho do Firebase.

Implantar no Firebase Hosting

Depois de adicionar o Firebase Performance Monitoring ao seu código, siga estas etapas para implantar seu código no Firebase Hosting:

  1. Certifique-se de que sua linha de comando está acessando o diretório local performance-monitoring-start seu aplicativo.
  2. Implante seus arquivos no projeto do Firebase executando o seguinte comando:
firebase deploy
  1. O console deve exibir o seguinte:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Visite seu aplicativo da web que agora está totalmente hospedado usando o Firebase Hosting em dois de seus próprios subdomínios do Firebase: https://<projectId>.firebaseapp.com e https://<projectId>.web.app .

Verifique se o monitoramento de desempenho está habilitado

Abra o console do Firebase e vá para a guia Desempenho . Se você vir uma mensagem de boas-vindas mostrando "SDK detectado", significa que integrou-se com êxito ao Firebase Performance Monitoring

ac917a089e9c89d1.png

Enviar mensagem de imagem

Gere alguns dados de desempenho enviando imagens em seu aplicativo de bate-papo.

  1. Depois de entrar em seu aplicativo de bate-papo, clique no botão de upload de imagem 13734cb66773e5a3.png .
  2. Selecione um arquivo de imagem usando o seletor de arquivos.
  3. Tente enviar várias imagens (algumas amostras são armazenadas em public/images/ ) para que você possa testar a distribuição de métricas e atributos personalizados.

Novas mensagens devem ser exibidas na IU do aplicativo junto com as imagens selecionadas.

Depois de implantar seu aplicativo da web e enviar mensagens de imagem como um usuário, você pode revisar os dados de desempenho no painel de monitoramento de desempenho (no console do Firebase).

Acesse seu painel

  1. No Firebase console , selecione o projeto que contém seu aplicativo Friendly Chat .
  2. No painel esquerdo, localize a seção Qualidade e clique em Desempenho .

Analise os dados no dispositivo

Depois que o monitoramento de desempenho processou os dados do seu aplicativo, você verá guias na parte superior do painel. Verifique novamente mais tarde se ainda não encontrar dados ou guias.

  1. Clique na guia No dispositivo .
  • A tabela de carregamentos de página mostra as várias métricas de desempenho que o monitoramento de desempenho coleta automaticamente enquanto sua página está carregando.
  • A tabela Durações mostra todos os rastros personalizados que você definiu no código do seu aplicativo.
  1. Clique em saveImageMessage na tabela Durações para revisar métricas específicas para o rastreamento.

e28758fd02d9ffac.png

  1. Clique em Agregar para revisar a distribuição dos tamanhos das imagens. Você pode ver a métrica que adicionou para medir o tamanho da imagem para este traço personalizado.

c3cbcfc0c739a0a8.png

  1. Clique em Com o tempo, próximo a Agregar na etapa anterior. Você também pode ver a duração do rastreamento personalizado. Clique em Exibir mais para revisar os dados coletados com mais detalhes.

16983baa31e05732.png

  1. Na página que é aberta, você pode segmentar os dados de duração por tipo de imagem MIME clicando em imageType . Esses dados específicos foram registrados por causa do atributo imageType que você adicionou ao rastreamento personalizado.

8e5c9f32f42a1ca1.png

Analise os dados da rede

Uma solicitação de rede HTTP / S é um relatório que captura o tempo de resposta e o tamanho da carga útil das chamadas de rede.

  1. Volte para a tela principal do painel de monitoramento de desempenho.
  2. Clique na guia Rede para ver uma lista de entradas de solicitação de rede para seu aplicativo da web.
  3. Navegue por eles para identificar solicitações lentas e comece a trabalhar em uma correção para melhorar o desempenho do seu aplicativo!

1ab598284eea6581.png

Você ativou o Firebase SDK para monitoramento de desempenho e coletou traces automáticos e personalizados para medir o desempenho do seu aplicativo de chat no mundo real!

O que cobrimos:

  • Adicionar o Firebase Performance Monitoring SDK ao seu aplicativo da web.
  • Adicionando rastros personalizados ao seu código.
  • Registro de métricas customizadas vinculadas ao rastreamento customizado.
  • Segmentando dados de desempenho usando atributos customizados.
  • Compreender como usar o painel de monitoramento de desempenho para obter insights sobre o desempenho do seu aplicativo.

Saber mais: