Compartilhar via

Introdução ao React Native

Importante

O Visual Studio App Center foi desativado em 31 de março de 2025, com exceção dos recursos de Análise e Diagnóstico, que continuarão com suporte até 30 de junho de 2026. Saiba mais.

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 Nativo do React do App Center em seu aplicativo para usar o App Center Analytics e o App Center Crashes.

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 o 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 o CocoaPods Getting Started 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 login e pressione o botão azul no canto superior direito do portal que diz Adicionar novo e selecione Adicionar novo aplicativo no menu drop-down.
  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 CocoaPods em seu aplicativo, precisará integrar o React Native SDK manualmente para seu aplicativo iOS.

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

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

Caso prefira yarn mais npm, 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, em que 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 o React Native 0.60

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

3.1.1 Integrar React Native iOS

Execute pod install --repo-update do diretório 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 no 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 o 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 Configurando a opção AppSecret 1: Configurando appcenter-config.json

Crie um novo arquivo com o nome appcenter-config.jsonandroid/app/src/main/assets/ com 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: Definição no código

Adicione a seguinte linha dentro do onCreate-callback da classe de atividade principal do aplicativo para usar o App Center Analytics e o App Center Crashes:

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

Observação

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

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

    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

    Tente executar react-native link novamente.

    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 do arquivo package.json (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 android/app/src/main/assets/appcenter-config.json do projeto e substitua o valor de espaço reservado YOUR_APP_SECRET pelo segredo do aplicativo do projeto do App Center.

  3. Edite o arquivo do projeto ios/{YourAppName}/AppCenter-Config.plist e substitua o valor do marcador YOUR_APP_SECRET pelo segredo do aplicativo do App Center do projeto. Se o 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 no XCode e clique em Adicionar arquivos ao <Nome> do Aplicativo...).

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

Observação

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

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

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

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

  3. Baixe o SDK correspondente do App Center para frameworks do iOS fornecido 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 não descompactadas anteriormente na pasta do projeto no local onde 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 Project Navigator 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. Vincule projetos de plug-ins nativos do AppCenter React ao projeto do aplicativo:

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

    • Para cada plug-in Nativo do AppCenter React, 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 Finder para o Navegador de Projetos do Xcode. Normalmente, no grupo Bibliotecas .

  9. Bibliotecas de link para plug-ins nativos do AppCenter React. Abra as configurações do projeto e, na guia Geral , na seção Estruturas Vinculadas e Bibliotecas , 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 os cabeçalhos a partir dos projetos de plugins 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

  1. 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];

  2. 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 no 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>

Observação

As próximas duas etapas são apenas para os aplicativos que usam o React Native 0.60 e superior.

  1. 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,
      ...
    }
  }
};

  2. Modifique Header Search Paths para localizar cabeçalhos React Native nos 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 nativos do AppCenter React que você adicionou ao grupo Bibliotecas na etapa 8:
      • Selecione o projeto e, na guia Configurações de Compilação, 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 desejadas em seu projeto. Cada módulo do SDK precisa ser adicionado como uma dependência separada nesta seção. Se você quiser usar Análises e Incidentes 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')

Observação

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

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

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

  2. Modifique o arquivo de 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 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)
  );
}

  3. Abra o arquivo strings.xml (android/app/src/main/res/values) e adicione as seguintes linhas dentro das <resources></resources> tags:

    <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.jsonandroid/app/src/main/assets/ com o conteúdo a seguir e substitua APP_SECRET_VALUE pelo valor do segredo do aplicativo.

    {
    "app_secret": "APP_SECRET_VALUE"
}

Aviso

Não é recomendável inserir o Segredo do Aplicativo no código-fonte.

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 (nível de API 23) ou superior têm o Backup Automático habilitado automaticamente. 

Observação

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

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

b. Abra o arquivo do projeto AndroidManifest.xml. 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 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 simulador iOS 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 em react-native run-android --deviceId "myDeviceId" (deviceId do comando adb devices).

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

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

Observação

Se você vinculou o App Center automaticamente por meio react-native link (como na etapa 3.1), deverá abrir o arquivo de projeto ios/{appname}.xcworkspace no do Xcode. Como as dependências do CocoaPods do App Center funcionam somente com xcworkspace e não com xcodeproj, o arquivo ios/{appname}.xcodeproj não terá as dependências do CocoaPods do App Center vinculadas.

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.