Adicionando o plugin do App Center em uma aplicação React Native – 20 dias com App Center / Dia 13

Este é o Dia 13 da série de artigos “20 dias com App Center”. Neste artigo irei demonstrar como adicionar o plugin do App Center em uma aplicação React Native.

Se você está chegando agora e ainda não leu os artigos anteriores da série “20 dias com App Center”, recomendo começar lendo o “Dia 01 – Criando uma conta“.

 

Adicione o SDK ao projeto

No terminal de comandos, navegue até a pasta raiz do projeto e execute o comando a seguir, para instalar o App Center, App Center Analytics e App Center Crashes.

npm install appcenter appcenter-analytics appcenter-crashes –save-exact

view raw
command
hosted with ❤ by GitHub

Android

Dentro da pasta Android, crie um arquivo com o seguinte nome: appcenter-config.json e adicione a propriedade app_secret. O valor referente a propriedade, é possível obter acessando a página Overview do seu projeto no App Center.

{
"app_secret": "d1cc8793-cbfb-4eae-b64a-c48960781c97"
}

strings.xml

3

Adicione ao arquivo strings.xml as linhas referentes ao App Center Crashes e App Center Analytics, como demonstrado no exemplo a seguir:

<resources>
<string name="app_name">Sample</string>
<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
</resources>

view raw
strings.xml
hosted with ❤ by GitHub

 

iOS

Para integrar o App Center ao projeto iOS do React Native, é pré requisito ter instalado o CocoaPods. Execute o comando a seguir dentro da pasta do projeto iOS.

pod install –repo-update

view raw
command
hosted with ❤ by GitHub

Dentro da pasta iOS crie um arquivo com o seguinte nome: AppCenter-Config.plist e adicione o AppSecret, como demonstrado a seguir:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd"&gt;
<plist version="1.0">
<dict>
<key>AppSecret</key>
<string>0f00eef5-4c10-41c6-bb94-240fa3f86194</string>
</dict>
</plist>

 

AppDelegate.m4

Edite o arquivo AppDelegate.m e adicione os seguintes importes:

#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

view raw
AppDelegate.m
hosted with ❤ by GitHub

Ainda no arquivo AppDelegate, dentro de didFinishLaunchingWithOptions adicione as seguintes linhas:

[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

view raw
AppDelegate.m
hosted with ❤ by GitHub

Finalização

Após a realização desses passos, basta realizar o commit dessas modificações e gerar um novo build do seu projeto.

 

Acompanhe todos os artigos da série em: julianocustodio.com/category/appcenter

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s