Introdução ao React Native

O SDK do App Center usa uma arquitetura modular para que você possa usar qualquer um ou todos os serviços.

Vamos começar a configurar o SDK React Native do App Center em seu aplicativo para usar a Análise do App Center e falhas do App Center.

1. Pré-requisitos

Antes de começar, verifique se os seguintes pré-requisitos são cumpridos:

• Você está usando um projeto React Native que é executado React Native 0,34 ou posterior.
• Você está direcionando dispositivos que estão em execução no Android Versão 5.0/API nível 21 ou posterior ou iOS versão 9.0 ou posterior.
• Você não está usando nenhuma outra biblioteca que forneça a funcionalidade de Relatório de Falhas no iOS.
• Para iOS, a maneira padrão de usar o SDK requer CocoaPods. (Se você ainda não instalou o CocoaPods, siga os CocoaPods Introdução para fazer isso). No entanto, é possível vincular o SDK manualmente.

2. Criar seu aplicativo no Portal do App Center para obter o Segredo do Aplicativo

Se você já criou seu aplicativo no portal do App Center, ignore esta etapa.

1. Vá para appcenter.ms.
2. Inscreva-se ou faça logon e pressione o botão azul no canto superior direito do portal que diz Adicionar novo e selecione Adicionar novo aplicativo no menu suspenso.
3. Insira um nome e uma descrição opcional para seu aplicativo.
4. Selecione o sistema operacional apropriado (Android ou iOS) e selecione React Native como a plataforma.
5. Pressione o botão na parte inferior direita que diz Adicionar novo aplicativo.

Depois de criar um aplicativo, você pode obter seu Segredo do Aplicativo na página Configurações no Portal do App Center. No canto superior direito da página Configurações , clique nos pontos verticais triplos e selecione Copy app secret para obter o Segredo do Aplicativo.

3. Adicionar os módulos do SDK do App Center

A integração padrão do SDK usa CocoaPods para iOS. Se você não estiver usando o CocoaPods em seu aplicativo, precisará integrar o SDK do React Native manualmente para seu aplicativo iOS.

Abra um Terminal e navegue até a raiz do projeto React Native e insira a seguinte linha para adicionar Análise e Falhas do App Center ao aplicativo:

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

Caso prefira yarn em vez npmde , use o seguinte comando para instalar o App Center:

yarn add appcenter appcenter-analytics appcenter-crashes --exact

O SDK do App Center usa uma abordagem modular, na qual você apenas adiciona os módulos para os serviços do App Center que deseja usar. appcenter-analytics e appcenter-crashes fazem sentido adicionar a quase todos os aplicativos, pois eles fornecem valor sem nenhuma configuração adicional necessária. O appcenter fornece APIs do App Center de uso geral, úteis para vários serviços.

3.1 Integrar o SDK automaticamente para React Native 0,60

O uso do SDK do App Center com React Native pode ser feito de duas maneiras: Configurar o AppCenter-Config.plist para iOS e appcenter-config.json para Android ou chamando as funções de início nativas que aceitam o appSecret como um argumento.

3.1.1 Integrar React Native iOS

Execute pod install --repo-update no diretório do iOS para instalar dependências do CocoaPods.

3.1.1.1 Configuração da opção AppSecret 1: Configurando AppCenter-Config.plist

1. Crie um novo arquivo com o nome AppCenter-Config.plist com o conteúdo a seguir e substitua {APP_SECRET_VALUE} pelo valor do segredo do aplicativo. Não se esqueça de adicionar esse arquivo ao projeto Xcode (clique com o botão direito do mouse no aplicativo em Xcode e clique em Adicionar arquivos ao <AppName>...).

   <?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">
   <plist version="1.0">
       <dict>
       <key>AppSecret</key>
       <string>{APP_SECRET_VALUE}</string>
       </dict>
   </plist>
   

2. Modifique o arquivo AppDelegate.m ou AppDelegate.mm do aplicativo para incluir o código para iniciar o SDK.

   • Adicione as seguintes importações:

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

   • Adicione estas linhas ao application:didFinishLaunchingWithOptions: método :

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

3.1.1.2 Configuração da opção AppSecret 2: Configurando no código

Modifique o arquivo AppDelegate.m ou AppDelegate.mm do aplicativo para incluir o código para iniciar o SDK.

• Adicione as seguintes importações:

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

• Adicione estas linhas ao application:didFinishLaunchingWithOptions: método :

[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Integrar React Native Android

Modifique os res/values/strings.xml do aplicativo para incluir as seguintes linhas:

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

3.1.2.1 Configuração da opção AppSecret 1: Configurando appcenter-config.json

Crie um novo arquivo com o nome appcenter-config.json com android/app/src/main/assets/ o conteúdo a seguir e substitua {APP_SECRET_VALUE} pelo valor do segredo do aplicativo.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Observação: se a pasta denominada ativos não existir, ela deverá ser criada em "project_root/android/app/src/main/assets".

3.1.2.2 Configuração da opção AppSecret 2: Configurando no código

Adicione a seguinte linha dentro da classe de atividade main do aplicativo emCreate-callback para usar a Análise do App Center e falhas do App Center:

AppCenter.start(getApplication(), "{Your App Secret}", Analytics.class, Crashes.class);

AppCenter.start(application, "{Your App Secret}", Analytics::class.java, Crashes::class.java)

3.2 Integrar o SDK automaticamente para React Native inferior a 0,60

1. Vincule os plug-ins ao aplicativo React Native usando o comando react-native link.

   react-native link appcenter
   react-native link appcenter-analytics
   react-native link appcenter-crashes
   

   Para iOS, ele tentará baixar o SDK do App Center para iOS e macOS do CocoaPods, se você vir um erro como:

   Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
   Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version}) 
   

   Execute o comando a seguir:

   pod repo update
   

   Em seguida, tente executar react-native linknovamente .

   Observação

   O SDK do App Center não configura simulações automaticamente para módulos do App Center durante o processo de vinculação. Se você estiver usando a estrutura de teste Jest em seu aplicativo e tiver erros causados pelo SDK do App Center durante a execução de testes com Jest, adicione o seguinte à seção jest de package.json arquivo (inclua apenas módulos em uso):

   "setupFiles": [
      "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
      "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
      "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
   ]
   

   Observação

   Se o processamento de falhas é automático ou disparado por métodos Javascript, as falhas são sempre processadas após a reinicialização do aplicativo. Falhas não podem ser processadas no momento em que o aplicativo falha.

2. Edite o do projeto e substitua o YOUR_APP_SECRET valor do android/app/src/main/assets/appcenter-config.json espaço reservado pelo segredo do aplicativo do projeto do App Center.

3. Edite o arquivo do ios/{YourAppName}/AppCenter-Config.plist projeto e substitua o valor do YOUR_APP_SECRET espaço reservado pelo segredo do aplicativo do projeto do App Center. Se AppCenter-Config.plist já existir, mas não fizer parte do projeto Xcode, você deverá adicioná-lo ao projeto Xcode manualmente (clique com o botão direito do mouse no aplicativo em XCode e clique em Adicionar arquivos ao <Nome> do Aplicativo...).

3.3 [somente iOS] Integrar o SDK manualmente para React Native sem link react-native ou CocoaPods

Faça essa integração, se você não quiser usar CocoaPods. É altamente recomendável integrar o SDK por meio do CocoaPods, conforme descrito acima. No entanto, também é possível integrar o SDK nativo do iOS manualmente.

1. Baixe o SDK do App Center para React Native estruturas fornecidas como um arquivo zip e descompacte-o.

2. Você verá uma pasta chamada AppCenterReactNativeShared que contém uma única estrutura para a ponte React Native iOS necessária.

3. Baixe o SDK correspondente do App Center para estruturas do iOS fornecidas como um arquivo zip e descompacte-o.

4. Você verá uma pasta chamada AppCenter-SDK-Apple/iOS que contém estruturas diferentes para cada serviço do App Center. A estrutura chamada AppCenter é necessária no projeto, pois contém código compartilhado entre os diferentes módulos.

5. [Opcional] Crie um subdiretório para bibliotecas de terceiros.

   • Como prática recomendada, as bibliotecas de terceiros geralmente residem dentro de um subdiretório (geralmente é chamado de Fornecedor), portanto, se você não tiver seu projeto organizado com um subdiretório para bibliotecas, crie um subdiretório Vendor agora (no diretório ios do seu projeto).
   • Crie um grupo chamado Vendor dentro de seu projeto Xcode para imitar sua estrutura de arquivos no disco.

6. Abra o Finder e copie as pastas AppCenter-SDK-Apple/iOS e AppCenterReactNativeShared descompactadas anteriormente na pasta do projeto no local em que você deseja que ele resida.

7. Adicione as estruturas do SDK ao projeto no Xcode:

   • Verifique se o Project Navigator está visível (⌘+1).
   • Arraste e solte os arquivos AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework e AppCenterReactNativeShared.framework do Finder (no local da etapa anterior) para o Navegador de Projetos do Xcode. Os arquivos AppCenter.framework e AppCenterReactNativeShared.framework são necessários para iniciar o SDK, verifique se eles foram adicionados ao seu projeto, caso contrário, os outros módulos não funcionarão e seu aplicativo não será compilado.
   • Uma caixa de diálogo será exibida, verifique se o destino do aplicativo está marcado e clique em Concluir.

8. Vincular projetos de plug-ins do AppCenter React Native ao projeto do aplicativo:

   • Verifique se o Project Navigator está visível (⌘+1).

   • Para cada plug-in do AppCenter React Native navegue até a pasta que contém o código-fonte. Os caminhos, respectivamente, serão

     • /node_modules/appcenter/ios
     • /node_modules/appcenter-analytics/ios
     • /node_modules/appcenter-crashes/ios

   • Arraste e solte .xcodeproj arquivos do Localizador para o Navegador de Projeto do Xcode. Normalmente, em Grupo bibliotecas .

9. Vincular bibliotecas para plug-ins do AppCenter React Native. Abra as configurações do projeto e, na guia Geral , na seção Estruturas e Bibliotecas Vinculadas , adicione novos itens referenciando bibliotecas de destino adicionadas na etapa anterior:

   • libAppCenterReactNative.a
   • libAppCenterReactNativeAnalytics.a
   • libAppCenterReactNativeCrashes.a

10. Modifique caminhos de pesquisa de cabeçalho para localizar cabeçalhos dos projetos de plug-ins do AppCenter React Native. Abra as configurações do projeto e, na guia Configurações de Build , na seção Caminhos de Pesquisa de Cabeçalho , adicione novos locais para arquivos de cabeçalho:

• $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
• $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
• $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes

11. Modifique o arquivo AppDelegate.m ou AppDelegate.mm do aplicativo para incluir o código para iniciar o SDK:

    • Adicione as seguintes importações:

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

    • Adicionar essas linhas ao application:didFinishLaunchingWithOptions: método

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

12. Crie um novo arquivo com o nome AppCenter-Config.plist com o conteúdo a seguir e substitua {APP_SECRET_VALUE} pelo valor do segredo do aplicativo. Não se esqueça de adicionar esse arquivo ao projeto XCode (clique com o botão direito do mouse no aplicativo em XCode e clique em Adicionar arquivos ao <Nome> do Aplicativo...).

    <?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">
    <plist version="1.0">
        <dict>
        <key>AppSecret</key>
        <string>{APP_SECRET_VALUE}</string>
        </dict>
    </plist>
    

13. Desabilite o autolink para React Native 0,60 e superior:

    • Dentro da pasta node_modules em cada pacote do App Center, abra react-native.config.js e defina dependency.platforms.ios como null:

    module.exports = {
      dependency: {
        platforms: {
          ios: null,
          ...
        }
      }
    };
    

14. Modifique caminhos de pesquisa de cabeçalho para encontrar cabeçalhos React Native dos projetos de plug-ins do React Native do App Center:

    • Verifique se o Project Navigator está visível (⌘+1).
    • Para cada projeto de plug-ins do AppCenter React Native que você adicionou ao grupo Bibliotecas na etapa 8:
      • Selecione o projeto e, na guia Configurações de Build , na seção Caminhos de Pesquisa de Cabeçalho , adicione novos locais para arquivos de cabeçalho com uma recursive opção: ${SRCROOT}/../../../ios/Pods/Headers

3.4 [somente Android] Integrar o SDK manualmente para React Native inferior a 0,60 sem link nativo do react

Etapas de integração sem o react-native link comando .

1. Abra o arquivo android/settings.gradle e insira as linhas a seguir. Inclua as dependências desejadas em seu projeto. Cada módulo do SDK precisa ser adicionado como uma dependência separada nesta seção. Se você quiser usar a Análise e falhas do App Center, adicione as seguintes linhas:

     include ':appcenter-crashes'
     project(':appcenter-crashes').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-crashes/android')
     include ':appcenter-analytics'
     project(':appcenter-analytics').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-analytics/android')
     include ':appcenter'
     project(':appcenter').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter/android')
   

2. Abra o arquivo build.gradle no nível do aplicativo do projeto (android/app/build.gradle) e adicione as seguintes linhas à dependencies seção:

   dependencies {
       implementation project(':appcenter-crashes')
       implementation project(':appcenter-analytics')
       implementation project(':appcenter')
       ...
   }
   

3. Modifique o arquivo MainApplication.java do aplicativo para incluir código para iniciar o SDK:

   • Adicionar essas linhas à seção de importação

   import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
   import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
   import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
   

   • Adicionar pacotes do AppCenter ao List<ReactPackage> getPackages() método

   @Override
   protected List<ReactPackage> getPackages() {
     return Arrays.<ReactPackage>asList(
         new MainReactPackage(),
           new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appCenterCrashes_whenToSendCrashes)),
           new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appCenterAnalytics_whenToEnableAnalytics)),
           new AppCenterReactNativePackage(MainApplication.this)
     );
   }
   

4. Abra strings.xml arquivo (android/app/src/main/res/values) e adicione as seguintes linhas dentro <resources></resources> de marcas:

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

5. Crie um novo arquivo com o nome appcenter-config.json com android/app/src/main/assets/ o conteúdo a seguir e substitua APP_SECRET_VALUE pelo valor do segredo do aplicativo.

   {
       "app_secret": "APP_SECRET_VALUE"
   }
   

3.5 Se você usar o backup automático para evitar obter informações incorretas sobre o dispositivo, siga as próximas etapas:

a. Crie appcenter_backup_rule.xml arquivo na pasta android/app/src/main/res/xml.

b. Abra o arquivo AndroidManifest.xml do projeto. Adicione o android:fullBackupContent atributo ao <application> elemento . Ele deve apontar para o arquivo de recurso appcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Adicione as seguintes regras de backup ao arquivo appcenter_backup_rule.xml :

<full-backup-content xmlns:tools="http://schemas.android.com/tools">
    <exclude domain="sharedpref" path="AppCenter.xml"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence-journal"/>
    <exclude domain="file" path="error" tools:ignore="FullBackupContent"/>
    <exclude domain="file" path="appcenter" tools:ignore="FullBackupContent"/>
</full-backup-content>

4. Iniciar o SDK

Agora você pode criar e iniciar seu aplicativo na linha de comando ou no Xcode/Android Studio.

4.1 Compilar e executar seu aplicativo na linha de comando

Você pode criar e iniciar seu aplicativo iOS pelo seguinte comando:

react-native run-ios

Você pode criar e iniciar seu aplicativo Android pelo seguinte comando:

react-native run-android

4.2 Compilar e executar seu aplicativo no Xcode ou no Android Studio

Para iOS, abra o arquivo ou ios/{appname}.xcodeproj do ios/{appname}.xcworkspace projeto no Xcode e compile a partir daí.

Para Android, importe seu projeto android no Android Studio e compile a partir daí.

Você está pronto para visualizar dados de Análise e Falhas no portal que o SDK coleta automaticamente. Não há nenhuma configuração adicional necessária. Examine a seção Análise e Falhas para obter guias de APIs e instruções passo a passo para saber o que o App Center pode fazer.