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.
No responses yet