Introdução ao React Native

Artigo
04/03/2023

Importante

O Visual Studio App Center está programado para ser desativado em 31 de março de 2025. Embora você possa continuar a usar o Visual Studio App Center até que ele seja totalmente desativado, há várias alternativas recomendadas para as quais você pode considerar a migração.

Saiba mais sobre linhas do tempo e alternativas de suporte.

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.

Vá para appcenter.ms.
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.
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 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`

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

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

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 React Native solução de problemas se já tiver executado o script de vinculação ou vinculá-lo por conta própria

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

Observação

O SDK de React Native mais recente do App Center não depende necessariamente do SDK do iOS mais recente do App Center, 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.

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

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

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

Observação

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

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

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

Observação

Devido ao encerramento do suporte do jCenter , todos os assemblies foram movidos para o repositório Maven Central. Siga este guia sobre a 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 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)
  );
}

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>

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"
}
```

Aviso

Não é recomendável inserir seu 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

Aplicativos direcionados 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.

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

Dica

Você pode iniciá-lo em um simulador de 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 no react-native run-android --deviceId "myDeviceId" (deviceId do adb devices comando ).

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í.

Observação

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

Introdução ao React Native

1. Pré-requisitos

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

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

3.1 Integrar o SDK automaticamente para React Native 0,60

3.1.1 Integrar React Native iOS

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

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

3.1.2 Integrar React Native Android

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

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

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

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

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

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

4. Iniciar o SDK

4.1 Compilar e executar seu aplicativo na linha de comando

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

Recursos adicionais

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