Compartilhe:


Bem meus amigos, hoje resolvi voltar um pouco as raízes e com isso fazer algo um pouco diferente.

E o que seria diferente?

Montar a minha primeira app em React Native e de cara já integrá lo ao Dynatrace para acompanhar todas as métricas do usuário 😮

Incrível não é mesmo

Mãos a massa então Sayajin

Primeiro como vou focar na questão de integração então parto do pressuposto que você já tenha um aplicativo em React Native criado, caso não tenha tem um video legal do Canal Programador BR no YouTube, então segue o pessoal e monta a sua App beleza!

Inicialmente vamos precisar instalar o plugin do Dynatrace na aplicação.

No terminal na pasta raiz do app (no meu caso estou usando o terminal a partir do vscode).

Digite: npm i @dynatrace/react-native-plugin

Aguarde até terminar o download do plugin.

Exemplo da saída

Versões

Para versão: 0.60.0 ou superior: npm install @dynatrace/react-native-plugin

Versão inferior a 0.60.0: react-native install @dynatrace/react-native-plugin

No meu exemplo estou na 0.62

Na sequência rode o comando: npm install @dynatrace/react-native-plugin

Exemplo da saída

Registrar o Dynatrace no transformer

No diretório raiz do seu projeto, crie ou estenda (> = RN 0.59) metro.config.js (> = RN 0.57 – 0.58) rn-cli.config.js para que ele contenha a propriedade transformer.babelTransformerPath.

Abra o metro.config.js e adicione o Dynatrace conforme indicado abaixo:

babelTransformerPath: require.resolve(‘@dynatrace/react-native-plugin/lib/dynatrace-transformer’)

reporter: require(“@dynatrace/react-native-plugin/lib/dynatrace-reporter”)

Por fim agora precisamos obter o arquivo com as definições da própria instalação do seu Dynatrace.

No dynatrace, vá até Deploy e em Mobile app monitoring

Clique em Set up mobile monitoring 

Coloque um nome para o aplicativo no meu exemplo deixei testeReact

Clique em Create mobile app

Essa é a tela inicial, aqui é possível definir thresholds da aplicação e quantidade de dados capturados por Default vem definido em 100% aqui recomendo ajustar conforme a necessidade do negócio, atente se que quanto maior a captura maior o custo.

Em seguida clique em Instrumentation wizard 

Em seguida em React Native

Em seguida o que interessa para nós é o terceiro passo

Clique em Download dynatrace.config.js para fazer o Download do Arquivo.

Importe!

O arquivo já vem configurado para o seu enviroment do Dynatrace na qual já está definido o nome da aplicação e informações da instância da ferramenta.

Copie o arquivo para a raiz do projeto.

NOTA: Caso o mesmo já exista devido a instalação do plugin apenas substitua.

Ok, vamos o build e rodar o app

Digite no terminal: npm run instrumentDynatrace

Em seguida: npx react-native run-android

Aguarde até terminar

Finalizado, agora o seu aplicativo já está configurado.

Vamos ver os resultados.

Em aplicações na console Dynatrace localize a App que criou

Acesse e veja os dados aparecendo.

Agora é só aguardar.

Porém ainda é possível melhorar o Dynatrace permite adicionar ações personalizada para o aplicativo e ir muito além em suas analises.

Porém esse ponto vou deixar para outro tutorial futuro.

Espero que tenha contribuído mais um pouco com a comunidade e qualquer dúvida podem perguntar

Abraços e sucesso pessoal.

Compartilhe: