Introdução ao React Native

Importante

O Visual Studio App Center foi desativado em 31 de março de 2025, exceto para os recursos de Análise e Diagnóstico, que continuarão a ter suporte até 30 de junho de 2026. Mais informações.

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

1. Pré-requisitos

Antes de começar, certifique-se de que os seguintes pré-requisitos são atendidos:

Você está usando um projeto React Native que executa o React Native 0.34 ou posterior.
Você está segmentando dispositivos que estão sendo executados 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 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 fazê-lo). No entanto, é possível vincular o SDK manualmente.

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

Se já tiver criado a sua aplicação no portal do App Center, pode ignorar este passo.

Dirija-se a appcenter.ms.
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 suspenso.
Insira um nome e uma descrição opcional para seu aplicativo.
Selecione o sistema operacional apropriado (Android ou iOS) e selecione React Native como a plataforma.
Pressione o botão no canto inferior direito que diz Adicionar novo aplicativo.

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

3. Adicione 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 React Native manualmente para seu aplicativo iOS.

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

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

Caso prefira yarnnpm, 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, onde você apenas adiciona os módulos para os serviços do App Center que deseja usar. AppCenter-Analytics e AppCenter-crashes fazem sentido para adicionar a quase todos os aplicativos, pois fornecem valor sem a necessidade de configuração adicional. O appcenter fornece APIs de uso geral do App Center, ú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 oappcenter-config.json para Android ou chamando as funções de início nativas que aceitam o appSecret como um argumento.

3.1.1 Integrar o React Native iOS

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

3.1.1.1 Definindo AppSecret Opção 1: Configurando `AppCenter-Config.plist`

Crie um novo arquivo com o nome AppCenter-Config.plist com o seguinte conteúdo e substitua {APP_SECRET_VALUE} pelo valor secreto do aplicativo. Não se esqueça de adicionar este 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>
```

Modifique o arquivo AppDelegate.m ou AppDelegate.mm do aplicativo para incluir 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 de AppSecret Opção 2: Configuração no código

Modifique o arquivo AppDelegate.m ou AppDelegate.mm do aplicativo para incluir 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 Definindo AppSecret Opção 1: Configurando appcenter-config.json

Crie um novo ficheiro com o nome appcenter-config.json em android/app/src/main/assets/ com o conteúdo a seguir e substitua {APP_SECRET_VALUE} pelo valor secreto da sua aplicação.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Nota: Se a pasta chamada assets não existir, ela deve ser criada em "project_root/android/app/src/main/assets".

3.1.2.2 Configuração da AppSecret Opção 2: Configurar no código

Adicione a seguinte linha dentro da classe de atividade principal do seu aplicativo onCreate-callback 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 tiver os seus módulos React vinculados usando o caminho relativo dentro do Podfile, mas não estiverem referenciados no projeto, o script de vinculação falhará porque ele vincula o App Center com versões estáticas de pods. 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 você mesmo

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 seguinte comando:
```
pod repo update
```
E, 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 o 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

Quer o processamento de falhas seja automático ou acionado por métodos Javascript, as falhas são sempre processadas após o reinício da aplicação. As falhas não podem ser processadas no momento em que a aplicação falha.
Edite o android/app/src/main/assets/appcenter-config.json do projeto e substitua o valor de YOUR_APP_SECRET pelo segredo da aplicação do seu projeto no App Center.
Edite o ficheiro do projeto ios/{YourAppName}/AppCenter-Config.plist e substitua o valor do espaço reservado YOUR_APP_SECRET pelo segredo da aplicação do seu projeto do App Center. Se o AppCenter-Config.plist já existir, mas não fizer parte do seu 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...).

3.3 [Somente iOS] Integre o SDK manualmente para React Native sem usar react-native link ou CocoaPods

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

Observação

O SDK React Native mais recente do App Center não depende necessariamente do SDK iOS mais recente do App Center, porque o SDK do iOS é atualizado e lançado antes do SDK React Native.

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

Baixe o SDK do App Center para estruturas React Native fornecidas como um arquivo zip e descompacte-o.
Você verá uma pasta chamada AppCenterReactNativeShared que contém uma única estrutura para a ponte React Native iOS necessária.
Baixe as estruturas correspondentes do SDK do App Center para iOS fornecidas como um arquivo zip e descompacte-as.
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.
[Opcional] Crie um subdiretório para bibliotecas de terceiros.
- Como prática recomendada, as bibliotecas de terceiros 3rd geralmente residem dentro de um subdiretório (geralmente é chamado de Vendor), portanto, se você não tiver seu projeto organizado com um subdiretório para bibliotecas, crie um subdiretório Vendor agora (sob o diretório ios do seu projeto).
- Crie um grupo chamado Fornecedor dentro do seu projeto Xcode para imitar sua estrutura de arquivos no disco.
Abra o Finder e copie as pastas AppCenter-SDK-Apple/iOS e AppCenterReactNativeShared descompactadas anteriormente para a pasta do seu projeto no local onde você deseja que ele resida.
Adicione as estruturas SDK ao projeto no Xcode:
- Certifique-se de que 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) no Project Navigator do Xcode. Os arquivos AppCenter.framework e AppCenterReactNativeShared.framework são necessários para iniciar o SDK, certifique-se de que eles sejam adicionados ao seu projeto, caso contrário, os outros módulos não funcionarão e seu aplicativo não será compilado.
- Será exibida uma caixa de diálogo, verifique se o destino do aplicativo está marcado e clique em Concluir.
Vincule projetos de plug-ins do AppCenter React Native ao projeto do seu aplicativo:
- Certifique-se de que 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 percursos serão, respetivamente,
  - /node_modules/appcenter/ios
  - /node_modules/appcenter-analytics/ios
  - /node_modules/appcenter-crashes/ios
- Arraste e solte .xcodeproj arquivos do Finder no Project Navigator do Xcode. Normalmente sob o grupo Bibliotecas.
Bibliotecas de links para plug-ins nativos do AppCenter React. Abra as configurações do projeto e, na guia Geral , na seção Estruturas e Bibliotecas Vinculadas , adicione novos itens que fazem referência às bibliotecas de destino adicionados na etapa anterior:
- libAppCenterReactNative.a
- libAppCenterReactNativeAnalytics.a
- libAppCenterReactNativeCrashes.a
Modifique os Caminhos de Pesquisa de Cabeçalhos para encontrar cabeçalhos dos projetos de plug-ins do AppCenter React Native. Abra as configurações do 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:

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

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

Adicione as seguintes importações:

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

Adicione estas linhas ao application:didFinishLaunchingWithOptions: método

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

Crie um novo arquivo com o nome AppCenter-Config.plist com o seguinte conteúdo e substitua {APP_SECRET_VALUE} pelo valor secreto do aplicativo. Não se esqueça de adicionar este 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.

Desative a vinculação automática para o 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,
      ...
    }
  }
};
```
Modifique os caminhos de pesquisa de cabeçalho para encontrar cabeçalhos React Native a partir dos projetos de plugins React Native do App Center:
- Certifique-se de que 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 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

3.4 [Somente Android] Integre manualmente o SDK para React Native abaixo de 0.60 sem usar react-native link

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

Abra o arquivo android/settings.gradle e insira as seguintes linhas. Inclua as dependências desejadas em seu projeto. Cada módulo SDK precisa ser adicionado como uma dependência separada nesta seção. Se quiser utilizar o App Center Analytics and Crashes, 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 término do suporte do jCenter , todas as nossas montagens foram movidas para o repositório do Maven Central. Siga este guia sobre migração do jCenter para o Maven Central.

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')
    ...
}

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

Adicionar estas linhas à secçã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)
  );
}

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

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

Crie um novo ficheiro com o nome appcenter-config.json em android/app/src/main/assets/ com o conteúdo a seguir e substitua APP_SECRET_VALUE pelo valor secreto da sua aplicação.
```
{
    "app_secret": "APP_SECRET_VALUE"
}
```

Advertência

Não é recomendado incorporar 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

As aplicações destinadas ao Android 6.0 (nível de API 23) ou superior têm a Cópia de Segurança Automática ativada automaticamente.

Observação

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

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 recursoappcenter_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. Inicie o SDK

Agora você pode criar e iniciar seu aplicativo a partir da linha de comando ou do Xcode/Android Studio.

4.1 Crie e execute seu aplicativo a partir da linha de comando

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

react-native run-ios

Sugestão

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 construir e iniciar seu aplicativo Android pelo seguinte comando:

react-native run-android

Sugestão

Você pode executá-lo num emulador Android ou num dispositivo Android, especificando o identificador do dispositivo em react-native run-android --deviceId "myDeviceId" (deviceId do adb devices comando).

4.2 Crie e execute a sua aplicação a partir do Xcode ou Android Studio

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

Observação

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

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

Você está pronto para visualizar dados do Google Analytics e Crashes no portal que o SDK coleta automaticamente. Não é necessária nenhuma configuração adicional. Consulte a seção Análise e Falhas para obter guias de API e instruções passo-a-passo para saber o que o App Center pode fazer.

Comentários

Esta página foi útil?

Last updated on 2025-05-05

Partilhar via

Introdução ao React Native

1. Pré-requisitos

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

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

3.1 Integrar o SDK automaticamente para o React Native 0.60

3.1.1 Integrar o React Native iOS

3.1.1.1 Definindo AppSecret Opção 1: Configurando AppCenter-Config.plist

3.1.1.2 Configuração de AppSecret Opção 2: Configuração no código

3.1.2 Integrar o React Native Android

3.1.2.1 Definindo AppSecret Opção 1: Configurando appcenter-config.json

3.1.2.2 Configuração da AppSecret Opção 2: Configurar no código

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

3.3 [Somente iOS] Integre o SDK manualmente para React Native sem usar react-native link ou CocoaPods

3.4 [Somente Android] Integre manualmente o SDK para React Native abaixo de 0.60 sem usar react-native link

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

4. Inicie o SDK

4.1 Crie e execute seu aplicativo a partir da linha de comando

4.2 Crie e execute a sua aplicação a partir do Xcode ou Android Studio

Comentários

Recursos adicionais

3.1.1.1 Definindo AppSecret Opção 1: Configurando `AppCenter-Config.plist`