Introdução com React Native

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

Vamos começar a configurar o SDK App Center React Native em seu aplicativo para usar App Center Analytics e App Center Falhas.

1. Pré-requisitos

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

  • Você está usando um projeto React Native que executa 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 fornece a funcionalidade 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 o Ponto de Partida CocoaPods para fazer isso). No entanto, é possível vincular o SDK manualmente.

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

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

  1. Vá para o appcenter.ms.
  2. Inscreva-se ou faça logoff e clique no 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. Clique no 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 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 App Center SDK

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

Abra um Terminal e navegue até a raiz do seu projeto React Native, em seguida, insira a seguinte linha para adicionar App Center Analytics e Falhas ao aplicativo:

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

Caso prefira , use o seguinte comando para instalar o yarn npm App Center:

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

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

3.1 Integrar o SDK automaticamente para React Native 0,60

3.1.1 Integrar React Native iOS

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

  2. Crie um novo arquivo com o nome AppCenter-Config.plist com o conteúdo a seguir e substitua pelo valor do segredo do {APP_SECRET_VALUE} aplicativo. Não se esqueça de adicionar esse arquivo ao projeto do Xcode (clique com o botão direito do mouse no aplicativo no Xcode e clique em Adicionar arquivos a <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>
    
  3. Modifique o arquivo AppDelegate.m do aplicativo para incluir código para iniciar o SDK:

    • Adicione estas linhas para importar a seção acima da declaração #if DEBUG ou #ifdef FB_SONARKIT_ENABLED (se presente):
    #import <AppCenterReactNative.h>
    #import <AppCenterReactNativeAnalytics.h>
    #import <AppCenterReactNativeCrashes.h>
    
    • Adicione essas linhas ao didFinishLaunchingWithOptions método
    [AppCenterReactNative register];
    [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
    [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
    

3.1.2 Integrar React Native Android

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

    {
        "app_secret": "{APP_SECRET_VALUE}"
    }
    

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

  1. Modifique as 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.2 Integrar o SDK automaticamente para React Native inferior a 0,60

Observação

Se você tiver seus módulos React vinculados usando o caminho relativo dentro de seu Podfile, mas não referenciado no projeto, o script de vinculação falhará porque ele vincula App Center usando versões de pod estático. Você deve seguir as etapas da seção React Native solução de problemas se já tiver executado o script de vinculação ou vinculá-lo por conta própria

  1. Vincule os plug-ins ao React Native aplicativo 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 seguinte comando:

    pod repo update
    

    E, em seguida, repetir a execução react-native link de .

    Observação

    App Center SDK não configura simulações automaticamente para App Center módulos 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 o Jest, adicione o seguinte à seção jest do arquivo package.json (inclua apenas os 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 for automático ou disparado por métodos Javascript, as falhas sempre serão 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 valor do espaço reservado pelo android/app/src/main/assets/appcenter-config.json YOUR_APP_SECRET App Center do seu projeto.

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

Faça essa integração se você não quiser usar o CocoaPods. É 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.

Observação

O SDK App Center React Native mais recente não depende necessariamente do SDK do iOS do App Center mais recente, pois o SDK do iOS é atualizado e liberado antes do React Native um.

A consequência é que você deve saber de qual versão do SDK do iOS o SDK do React Native depende.

  1. Baixe o App Center SDK para React Native estruturas fornecidas como um arquivo zip e descompanha-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 App Center correspondente para estruturas do iOS fornecidas como um arquivo zip e descompanha-o.

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

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

    • Como melhor prática, 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 Fornecedor dentro do projeto do Xcode para imitar sua estrutura de arquivos no disco.
  6. Abra o Finder e copie as pastas AppCenter-SDK-Apple/iOS e AppCenterReactNativeShared previamente descompactadas para a pasta do projeto no local em que você deseja que ele resida.

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

    • Certifique-se de Project Navegador está visível (⌘+1).
    • Arraste e solte os arquivos AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework e AppCenterReactNativeShared.framework do Localizador (no local da etapa anterior) no Navegador Project do Xcode. Os arquivos AppCenter.framework e AppCenterReactNativeShared.framework são necessários para iniciar o SDK, certifique-se de que 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, certifique-se de que o destino do aplicativo está marcado e clique em Concluir.
  8. Vincule React Native de plug-ins do AppCenter ao projeto do aplicativo:

    • Certifique-se de Project Navegador está visível (⌘+1).

    • Para cada plug-in React Native AppCenter, 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 arquivos do Finder no navegador .xcodeproj Project Xcode. Normalmente, no grupo Bibliotecas.

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

    • libAppCenterReactNative.a
    • libAppCenterReactNativeAnalytics.a
    • libAppCenterReactNativeCrashes.a
  10. Modifique Caminhos de Pesquisa de Header para encontrar os headers dos projetos React Native plug-ins do AppCenter. Abra as configurações do projeto e, na guia Criar Configurações na seção Caminhos de Pesquisa de Header, adicione novos locais para arquivos de header:

  • $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
  • $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
  • $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes
  1. Modifique o arquivo AppDelegate.m do aplicativo para incluir código para iniciar o SDK:

    • Adicione estas linhas à seção de importação acima da #if DEBUG #ifdef FB_SONARKIT_ENABLED declaração ou (se houver):
    #import <AppCenterReactNative/AppCenterReactNative.h>
    #import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
    #import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    
    • Adicionar essas linhas ao didFinishLaunchingWithOptions método
    [AppCenterReactNative register];
    [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
    [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
    
  2. Crie um novo arquivo com o nome AppCenter-Config.plist com o conteúdo a seguir e substitua {APP_SECRET_VALUE} pelo valor secreto do aplicativo. Não se esqueça de adicionar esse arquivo ao projeto do XCode (clique com o botão direito do mouse no aplicativo no XCode e clique em Adicionar arquivos a <App Name> ...).

    <?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>
    

Observação

as próximas duas etapas são apenas para os aplicativos que usam o React Native 0,60 e posterior.

  1. desabilite a vinculação de link para o React Native 0,60 e superior:

    • Dentro da pasta node_modules em cada pacote de App Center, abra react-native.config.js e defina dependency.platforms.ios como null :
    module.exports = {
      dependency: {
        platforms: {
          ios: null,
          ...
        }
      }
    };
    
  2. modifique os caminhos de pesquisa de cabeçalho para localizar React Native cabeçalhos dos projetos App Center React Native plug-ins:

    • verifique se o navegador Project está visível (⌘ + 1).
    • para cada projeto AppCenter de plug-ins React Native que você adicionou ao grupo de bibliotecas na etapa 8:
      • selecione o projeto e, na guia criar Configurações 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

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 que você deseja em seu projeto. Cada módulo do SDK precisa ser adicionado como uma dependência separada nesta seção. Se você quiser usar App Center análise e falhas, 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')
    

Observação

Devido ao encerramento do suporte do jCenter , todos os nossos assemblies foram movidos para o repositório central do Maven. Siga este guia sobre a migração do jCenter para o Maven central.

  1. Abra o arquivo Build. gradle do 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')
        ...
    }
    
  2. Modifique o arquivo MainApplication. java do aplicativo para incluir o 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 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)
      );
    }
    
  3. Abra strings.xml arquivo ( android/app/src/main/res/values ) e adicione as seguintes linhas dentro de <resources></resources> 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>
    
  4. Crie um novo arquivo com o nome AppCenter-config. JSON android/app/src/main/assets/ com o conteúdo a seguir e substitua APP_SECRET_VALUE pelo valor de 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:

Observação

Os aplicativos destinados ao Android 6,0 (API nível 23) ou superior têm o backup automático habilitado automaticamente.

Observação

Se você já tiver um arquivo personalizado com a regra de backup, mude para a terceira etapa.

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

b. Abra o arquivo de 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 de 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 a partir da linha de comando ou do 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

Dica

Você pode iniciá-lo em um Ios Simulator ou dispositivo IOS especificando o nome do dispositivo IOS em react-native run-ios --device "myDeviceName" .

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

react-native run-android

Dica

Você pode iniciá-lo em um emulador Android ou dispositivo Android especificando a ID do dispositivo react-native run-android --deviceId "myDeviceId" ( deviceId do adb devices comando).

4,2 compilar e executar seu aplicativo do Xcode ou Android Studio

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

Observação

Se você tiver vinculado App Center automaticamente por meio do react-native link (como na etapa 3,1), deverá abrir o ios/{appname}.xcworkspace arquivo do projeto no Xcode. Como App Center dependências CocoaPods só funcionam com xcworkspace not xcodeproj e o ios/{appname}.xcodeproj arquivo não terá app Center dependências de CocoaPods vinculadas.

Para o Android, importe seu projeto Android no Android Studio e crie a partir daí.

Você está pronto para visualizar os dados de análise e de falhas no portal que o SDK coleta automaticamente. Não é necessária nenhuma configuração adicional. Examine a seção análise e panes para obter orientações e guias de APIs para saber o que app Center pode fazer.