React Native - Analytics, Crashlytics e Acessibilidade

Conforme a evolução da tecnologia, tem se tornado fundamental gerar inteligência com os dados adquiridos, métricas estabelecidas, informações de ações dos usuários. Como se comportam, por onde navegam dentro do seu sistema. Seu sistema parou? Pane? O que houve?

Também vou abordar neste artigo uma visão simplificada sobre acessibilidade e como implementar no React Native.

E para este artigo seguiremos os seguintes passos:

• Criar um projeto RN com CLI;
• Desenvolver um sistema simples de Login e Dashboard;
• Instalar o React Native Firebase;
• Instalar e configurar o Crashlytics;
• Instalar e configurar o Analytics para termos tracks de tela e logEvents (ações do usuário);
• Implementar acessibilidade.

Criar um projeto RN com CLI

Executaremos o comando para inicialização de um projeto com typescript: npx react-native init RNFirebaseExample --template react-native-template-typescript e git init (dentro da pasta do projeto)

Desenvolver um sistema simples de Login e Dashboard

Vou começar instalando a nossa lib de navegação. Somente seguindo a própria documentação: https://reactnavigation.org/docs/getting-started

Um pouco de código aqui e ali… Puff! Pronto!

Instalar o React Native Firebase

Para esta etapa, vamos utilizar a biblioteca: react-native-firebase.

Nesta etapa teremos três responsabilidades:

• Instalar a biblioteca;
• Criar projeto no Firebase;
• Configurar nativamente o Firebase no projeto.

Para instalar a biblioteca no nosso projeto basta utilizar o comando abaixo:

yarn add @react-native-firebase/app

Android não precisamos fazer mais nada, para iOS precisaremos dar um pod install. cd ios && pod install && cd ..

Para criar um projeto no Firebase só acessar o console do Firebase: https://console.firebase.google.com/

Clicar em “Adicionar projeto”, no nome do projeto vou deixar o mesmo que criei ao dar init: “RNFirebaseExample”. Vou desativar o Analytics por enquanto… E clicar em “Criar projeto”.

Se tudo ocorrer bem, você dará em uma tela parecida com a minha. Vou clicar no ícone do Android primeiramente.

O package name, vou até o AndroidManifest.xml, na pasta android. Vou gerar uma SHA-1, como aqui é debug, com este comando: cd android %% ./gradlew signingReport e por fim, clicar em “Registrar app”.

Agora farei o download do arquivo da etapa 2. “google-services.json” e vou colocá-lo na pasta App, dentro da pasta Android.

Finalizando a configuração, agora teremos que acessar /android/build.gradle e adicionar a seguinte linha de código:

Agora dentro do /android/app/build.gradle (atente-se pois é dentro da pasta app). Adicionaremos uma linha:

E finalizamos para Android.

Agora vamos clicar no ícone do iOS. Para descobrir o Bundle Identifier, vamos abrir o Xcode no nosso projeto, na aba General, procuramos pelo campo “Bundle Identifier” e copiar seu conteúdo e clicar em registrar app:

Ao clicar, faremos download do arquivo “GoogleService-Info.plist” e seguiremos a doc: https://rnfirebase.io/#generating-ios-credentials.

Para finalizar a configuração, seguiremos essa doc: https://rnfirebase.io/#configure-firebase-with-ios-credentials

Ao término, rode mais um pod install só por garantia e teremos as duas plataformas cadastradas.

Instalação do Analytics

Precisamos instalar a lib exclusiva do analytics: yarn add @react-native-firebase/analytics para iOS precisamos rodar o pod install novamente.

Na primeira etapa vamos fazer o Screen Tracking

Como estamos utilizando o React Navigation, o processo é mais simples. Devemos ir no nosso arquivo de rotas, dentro do NavigationContainer e colocar o código abaixo:

(Vou deixar o código da página inteira para auxiliar no entendimento)

Na segunda etapa vamos fazer o logEvents do Analytics

LogEvents são utilizados para mapear o uso da sua aplicação. Cliques em botões, ações do usuário dentro da app. Neste caso dependerá muito do que você deseja mapear. Não há uma regra clara. E mantenha a calma, os primeiros dados começarão a chegar dentro de 24h!!!

* Caso queira testar antes se a conexão foi bem sucedida pode instalar a lib do realtime e jogar algum dado lá. Assim terá certeza que a comunicação foi estabelecida com sucesso.

Exemplo da página de Login:

Exemplo da página de Dashboard:

Visão do Analytics pelo Firebase:

(os eventos começaram a chegar depois de 24h)

Instalação do Crashlytics

Digamos que o Crashlytics atua no “core” da sua aplicação, logo precisaremos de mais alguns passos de instalação e configuração. Novamente seguindo a implementação da própria biblioteca (aqui).

Atente-se que para o Android, serão necessários mais alguns passos. (clique aqui)

Para habilitar o Crashlytics para o ambiente de Dev, vou criar um arquivo firebase.json na raiz do projeto e colocar a seguinte instrução:

Neste meu exemplo, usarei o Crashlytics somente para Logs sobre telas montadas, vale lembrar que o mesmo gerará logs de crash automáticos, não precisa setar mais nada se para você isso já servir.

Login/index.tsx
// Resto da página
useEffect(() => {
    crashlytics().log('Login mounted.');
}, []);// Resto da página

Configurando Acessibilidade

Usaremos o Label para toda parte de acessibilidade (clique aqui). No React Native você tem que declarar no componente pai que ele inteiro terá elementos de acessibilidade. Geralmente em uma View que estará encapsulando todo o resto, e basta colocarmos: accessible={true};

Agora, nos elementos que desejamos que tenham alguma interação com os aplicativos de acessibilidade, adicionamos o accessibilityLabel e o valor que desejamos que seja lido. Geralmente seria o TalkBack para Android e VoiceOver para iOS.

Exemplo do Login com acessibilidade:

Com poucas linhas de código, já conseguimos, não de forma integral, atingir um público maior de usuários e tornar nosso aplicativo mais inteligente, acessível e de fácil manutenção.