Introducción a React Native

Artículo
04/03/2023

Importante

Visual Studio App Center está programado para la retirada el 31 de marzo de 2025. Aunque puede seguir usando Visual Studio App Center hasta que se retire por completo, hay varias alternativas recomendadas a las que puede considerar la posibilidad de migrar.

Obtenga más información sobre las escalas de tiempo de soporte técnico y las alternativas.

El SDK de App Center usa una arquitectura modular para que pueda usar cualquiera o todos los servicios.

Comencemos a configurar App Center React Native SDK en la aplicación para usar App Center Analytics y Bloqueos de App Center.

1. Prerrequisitos

Asegúrese de que se cumplen los siguientes requisitos previos antes de empezar:

Está usando un proyecto de React Native que se ejecuta React Native 0.34 o posterior.
Tiene como destino los dispositivos que se ejecutan en la versión 5.0/API 21 de Android, o en la versión 9.0 o posterior de iOS.
No usa ninguna otra biblioteca que proporcione funcionalidad de informes de bloqueos en iOS.
Para iOS, la forma predeterminada de usar el SDK requiere CocoaPods. (Si no ha instalado CocoaPods, siga el Introducción CocoaPods para hacerlo). Sin embargo, es posible vincular manualmente el SDK.

2. Creación de la aplicación en el portal de App Center para obtener el secreto de la aplicación

Si ya ha creado la aplicación en el portal de App Center, puede omitir este paso.

Vaya a appcenter.ms.
Regístrese o inicie sesión y presione el botón azul en la esquina superior derecha del portal que dice Agregar nuevo y seleccione Agregar nueva aplicación en el menú desplegable.
Escriba un nombre y una descripción opcional para la aplicación.
Seleccione el sistema operativo adecuado (Android o iOS) y seleccione React Native como plataforma.
Presione el botón situado en la parte inferior derecha que dice Agregar nueva aplicación.

Una vez que haya creado una aplicación, puede obtener su secreto de aplicación en la página Configuración del portal de App Center. En la esquina superior derecha de la página Configuración , haga clic en los puntos verticales triples y seleccione Copy app secret para obtener el secreto de la aplicación.

3. Adición de los módulos del SDK de App Center

La integración predeterminada del SDK usa CocoaPods para iOS. Si no usa CocoaPods en la aplicación, debe integrar manualmente el SDK de React Native para la aplicación iOS.

Abra un terminal y vaya a la raíz del proyecto de React Native y, a continuación, escriba la siguiente línea para agregar App Center Analytics y Bloqueos a la aplicación:

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

En caso de que prefiera yarn sobre npm, use el siguiente comando para instalar App Center:

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

El SDK de App Center usa un enfoque modular, donde solo tiene que agregar los módulos para los servicios de App Center que desea usar. appcenter-analytics y appcenter-crashes tienen sentido agregar a casi todas las aplicaciones, ya que proporcionan valor sin que se requiera ninguna configuración adicional. appcenter proporciona API de App Center de uso general, útiles para varios servicios.

3.1 Integrar automáticamente el SDK para React Native 0.60

El uso del SDK de App Center con React Native se puede realizar de dos maneras: configurar para AppCenter-Config.plist iOS y appcenter-config.json para Android o llamando a las funciones de inicio nativas que aceptan appSecret como argumento.

3.1.1 Integrar React Native iOS

Ejecute pod install --repo-update desde el directorio de iOS para instalar las dependencias de CocoaPods.

3.1.1.1 Establecer la opción AppSecret 1: Configuración `AppCenter-Config.plist`

Cree un nuevo archivo con el nombre AppCenter-Config.plist con el siguiente contenido y reemplace por {APP_SECRET_VALUE} el valor del secreto de la aplicación. No olvide agregar este archivo al proyecto Xcode (haga clic con el botón derecho en la aplicación en Xcode y haga clic en Agregar archivos 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>
```

Modifique el archivo AppDelegate.m o AppDelegate.mm de la aplicación para incluir código para iniciar el SDK.

Agregue las importaciones siguientes:

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

Agregue estas líneas al application:didFinishLaunchingWithOptions: método :

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

3.1.1.2 Establecer la opción AppSecret 2: Configuración en código

Modifique el archivo AppDelegate.m o AppDelegate.mm de la aplicación para incluir código para iniciar el SDK.

Agregue las importaciones siguientes:

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

Agregue estas líneas al 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 la res/values/strings.xml de la aplicación para incluir las siguientes líneas:

<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 Configuración de la opción AppSecret 1: Configuración de appcenter-config.json

Cree un nuevo archivo con el nombre appcenter-config.json en android/app/src/main/assets/ con el siguiente contenido y reemplace por {APP_SECRET_VALUE} el valor del secreto de la aplicación.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Nota: Si la carpeta denominada assets no existe, debe crearse en "project_root/android/app/src/main/assets".

3.1.2.2 Establecer la opción AppSecret 2: Configuración en código

Agregue la siguiente línea dentro de la clase de actividad principal de la aplicación' onCreate-callback para usar App Center Analytics y 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 automáticamente el SDK para React Native inferior a 0.60

Nota

Si tiene los módulos de React vinculados mediante la ruta de acceso relativa dentro del podfile, pero no se hace referencia al proyecto, se producirá un error en el script de vinculación porque vincula App Center mediante versiones de pod estáticas. Debe seguir los pasos de la sección de solución de problemas de React Native si ya ha ejecutado el script de vinculación o vincularlo usted mismo.

Vincule los complementos a la aplicación React Native mediante el comando react-native link.
```
react-native link appcenter
react-native link appcenter-analytics
react-native link appcenter-crashes
```
Para iOS, intentará descargar el SDK de App Center para iOS y macOS desde CocoaPods, si ve un error como:
```
Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version}) 
```
Ejecute el siguiente comando:
```
pod repo update
```
Y, a continuación, vuelva a intentar ejecutar react-native link.

Nota

El SDK de App Center no configura los simulacros automáticamente para los módulos de App Center durante el proceso de vinculación. Si usa el marco de pruebas Jest en la aplicación y experimenta errores causados por el SDK de App Center mientras ejecuta pruebas con Jest, agregue lo siguiente a la sección más jest del archivo package.json (incluya solo módulos en 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",
]
```
Nota

Si el procesamiento de bloqueos es automático o desencadenado por los métodos de Javascript, los bloqueos siempre se procesan después del reinicio de la aplicación. Los bloqueos no se pueden procesar en el momento en que se bloquea la aplicación.
Edite el proyecto android/app/src/main/assets/appcenter-config.json y reemplace el valor del marcador de posición por el YOUR_APP_SECRET secreto de aplicación del proyecto de App Center.
Edite el archivo del ios/{YourAppName}/AppCenter-Config.plist proyecto y reemplace el valor del marcador de posición por el YOUR_APP_SECRET secreto de aplicación del proyecto de App Center. Si AppCenter-Config.plist ya existe pero no forma parte del proyecto de Xcode, debe agregarlo al proyecto de Xcode manualmente (haga clic con el botón derecho en la aplicación en XCode y haga clic en Agregar archivos a <Nombre> de aplicación...).

3.3 [solo iOS] Integración manual del SDK para React Native sin vínculo nativo de React o CocoaPods

Realice esta integración si no desea usar CocoaPods. Se recomienda encarecidamente integrar el SDK a través de CocoaPods, como se ha descrito anteriormente. Sin embargo, también es posible integrar manualmente el SDK nativo de iOS.

Nota

El SDK de App Center React Native más reciente no depende necesariamente del SDK de iOS más reciente de App Center, ya que el SDK de iOS se actualiza y publica antes de la React Native uno.

La consecuencia es que debe saber en qué versión del SDK de iOS depende el SDK de React Native.

Descargue el SDK de App Center para React Native marcos proporcionados como un archivo ZIP y descomprímalo.
Verá una carpeta denominada AppCenterReactNativeShared que contiene un único marco para el puente de iOS React Native necesario.
Descargue el SDK de App Center correspondiente para marcos de iOS proporcionados como un archivo ZIP y descomprímalo.
Verá una carpeta denominada AppCenter-SDK-Apple/iOS que contiene diferentes marcos para cada servicio de App Center. El marco llamado AppCenter es necesario en el proyecto, ya que contiene código que se comparte entre los distintos módulos.
[Opcional] Cree un subdirectorio para bibliotecas de terceros.
- Como procedimiento recomendado, las bibliotecas de terceros normalmente residen dentro de un subdirectorio (a menudo se denomina Proveedor), por lo que si no tiene el proyecto organizado con un subdirectorio para bibliotecas, cree ahora un subdirectorio Vendor (en el directorio ios del proyecto).
- Cree un grupo llamado Vendor dentro del proyecto de Xcode para imitar la estructura de archivos en el disco.
Abra Finder y copie las carpetas AppCenter-SDK-Apple/iOS y AppCenterReactNativeShared previamente descomprimidas en la carpeta del proyecto en la ubicación donde desea que resida.
Agregue los marcos del SDK al proyecto en Xcode:
- Asegúrese de que project Navigator esté visible (⌘+1).
- Arrastre y coloque los archivos AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework y AppCenterReactNativeShared.framework del Finder (en la ubicación del paso anterior) en project Navigator de Xcode. Los archivos AppCenter.framework y AppCenterReactNativeShared.framework son necesarios para iniciar el SDK, asegúrese de que se agregan al proyecto; de lo contrario, los demás módulos no funcionarán y la aplicación no se compilará.
- Aparecerá un cuadro de diálogo, asegúrese de que el destino de la aplicación esté activado y, a continuación, haga clic en Finalizar.
Vincule los proyectos de complementos de AppCenter React Native al proyecto de la aplicación:
- Asegúrese de que project Navigator esté visible (⌘+1).
- Para cada complemento de AppCenter React Native, vaya a la carpeta que contiene el código fuente. Las rutas de acceso respectivamente serán
  - /node_modules/appcenter/ios
  - /node_modules/appcenter-analytics/ios
  - /node_modules/appcenter-crashes/ios
- Arrastre y coloque .xcodeproj archivos desde el Finder en project Navigator de Xcode. Normalmente, en el grupo Bibliotecas .
Bibliotecas de vínculos para complementos de React Native de AppCenter. Abra la configuración del proyecto y, en la pestaña General , en la sección Marcos vinculados y bibliotecas , agregue nuevos elementos que hacen referencia a las bibliotecas de destino agregadas en el paso anterior:
- libAppCenterReactNative.a
- libAppCenterReactNativeAnalytics.a
- libAppCenterReactNativeCrashes.a
Modifique las rutas de búsqueda de encabezados para buscar encabezados de los proyectos de complementos de AppCenter React Native. Abra la configuración del proyecto y, en la pestaña Configuración de compilación, en la sección Rutas de búsqueda de encabezado, agregue nuevas ubicaciones para los archivos de encabezado:

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

Modifique el archivo AppDelegate.m o AppDelegate.mm de la aplicación para incluir código para iniciar el SDK:

Agregue las importaciones siguientes:

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

Agregue estas líneas al application:didFinishLaunchingWithOptions: método

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

Cree un nuevo archivo con el nombre AppCenter-Config.plist con el siguiente contenido y reemplace por {APP_SECRET_VALUE} el valor del secreto de la aplicación. No olvide agregar este archivo al proyecto XCode (haga clic con el botón derecho en la aplicación en XCode y haga clic en Agregar archivos al <nombre> de la aplicación...).
```
<?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>
```

Nota

Los dos pasos siguientes son solo para las aplicaciones que usan React Native 0.60 y versiones posteriores.

Deshabilite el vínculo automático para React Native 0.60 y versiones posteriores:
- Dentro de la carpeta node_modules de cada paquete de App Center, abra react-native.config.js y establezca en dependency.platforms.iosnull:
```
module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};
```
Modifique las rutas de búsqueda de encabezados para buscar encabezados React Native desde los proyectos de complementos de App Center React Native:
- Asegúrese de que project Navigator esté visible (⌘+1).
- Para cada proyecto de complementos de AppCenter React Native que haya agregado al grupo Bibliotecas en el paso 8:
  - Seleccione el proyecto y, en la pestaña Configuración de compilación, en la sección Rutas de búsqueda de encabezado , agregue nuevas ubicaciones para los archivos de encabezado con una recursive opción: ${SRCROOT}/../../../ios/Pods/Headers

3.4 [solo Android] Integración manual del SDK para React Native inferior a 0.60 sin vínculo nativo de React

Pasos de integración sin el react-native link comando .

Abra el archivo android/settings.gradle e inserte las líneas siguientes. Incluya las dependencias que desee en el proyecto. Cada módulo del SDK debe agregarse como una dependencia independiente en esta sección. Si quiere usar Análisis y bloqueos de App Center, agregue las siguientes líneas:

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

Nota

Debido a la finalización de jCenter, todos los ensamblados se movieron al repositorio de Maven Central. Siga esta guía sobre la migración de jCenter a Maven Central.

Abra el archivo build.gradle de nivel de aplicación del proyecto (android/app/build.gradle) y agregue las líneas siguientes en dependencies la sección :

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

Modifique el archivo MainApplication.java de la aplicación para incluir código para iniciar el SDK:

Agregar estas líneas a la sección de importación

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

Adición de paquetes de AppCenter al 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 archivo (android/app/src/main/res/values) y agregue las siguientes líneas dentro de <resources></resources> las etiquetas:

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

Cree un nuevo archivo con el nombre appcenter-config.json en android/app/src/main/assets/ por el siguiente contenido y reemplace por APP_SECRET_VALUE el valor del secreto de la aplicación.
```
{
    "app_secret": "APP_SECRET_VALUE"
}
```

Advertencia

No se recomienda insertar el secreto de aplicación en el código fuente.

3.5 Si usa la copia de seguridad automática para evitar obtener información incorrecta sobre el dispositivo, siga los pasos siguientes:

Nota

Las aplicaciones destinadas a Android 6.0 (nivel de API 23) o superior tienen habilitada automáticamente la copia de seguridad automática.

Nota

Si ya tiene un archivo personalizado con regla de copia de seguridad, cambie al tercer paso.

a. Cree appcenter_backup_rule.xml archivo en la carpeta android/app/src/main/res/xml .

b. Abra el archivo AndroidManifest.xml del proyecto. Agregue el android:fullBackupContent atributo al <application> elemento . Debe apuntar al archivo de recursosappcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Agregue las siguientes reglas de copia de seguridad al archivo 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 el SDK

Ahora puede compilar e iniciar la aplicación desde la línea de comandos o desde Xcode/Android Studio.

4.1 Compilación y ejecución de la aplicación desde la línea de comandos

Puede compilar e iniciar la aplicación de iOS mediante el siguiente comando:

react-native run-ios

Sugerencia

Puede iniciarlo en un simulador de iOS o en un dispositivo iOS especificando el nombre del dispositivo iOS en react-native run-ios --device "myDeviceName".

Puede compilar e iniciar la aplicación Android mediante el siguiente comando:

react-native run-android

Sugerencia

Puede iniciarlo en un emulador de Android o en un dispositivo Android especificando el identificador de dispositivo en react-native run-android --deviceId "myDeviceId" (deviceId desde adb devices el comando ).

4.2 Compilación y ejecución de la aplicación desde Xcode o Android Studio

Para iOS, abra el archivo o ios/{appname}.xcodeproj el ios/{appname}.xcworkspace proyecto en Xcode y compile desde allí.

Nota

Si ha vinculado App Center automáticamente a través react-native link de (como en el paso 3.1), debe abrir el archivo del ios/{appname}.xcworkspace proyecto en Xcode. Dado que las dependencias de CocoaPods de App Center solo funcionan con xcworkspace no xcodeproj, y el ios/{appname}.xcodeproj archivo no tendrá vinculadas las dependencias de CocoaPods de App Center.

Para Android, importe el proyecto de Android en Android Studio y compile desde allí.

Todos están configurados para visualizar los datos de Análisis y Bloqueos en el portal que el SDK recopila automáticamente. No se requiere ninguna configuración adicional. Consulte la sección Análisis y bloqueos de las guías de API y tutoriales para obtener información sobre lo que Puede hacer App Center.

Introducción a React Native

1. Prerrequisitos

2. Creación de la aplicación en el portal de App Center para obtener el secreto de la aplicación

3. Adición de los módulos del SDK de App Center

3.1 Integrar automáticamente el SDK para React Native 0.60

3.1.1 Integrar React Native iOS

3.1.1.1 Establecer la opción AppSecret 1: Configuración AppCenter-Config.plist

3.1.1.2 Establecer la opción AppSecret 2: Configuración en código

3.1.2 Integrar React Native Android

3.1.2.1 Configuración de la opción AppSecret 1: Configuración de appcenter-config.json

3.1.2.2 Establecer la opción AppSecret 2: Configuración en código

3.2 Integrar automáticamente el SDK para React Native inferior a 0.60

3.3 [solo iOS] Integración manual del SDK para React Native sin vínculo nativo de React o CocoaPods

3.4 [solo Android] Integración manual del SDK para React Native inferior a 0.60 sin vínculo nativo de React

3.5 Si usa la copia de seguridad automática para evitar obtener información incorrecta sobre el dispositivo, siga los pasos siguientes:

4. Iniciar el SDK

4.1 Compilación y ejecución de la aplicación desde la línea de comandos

4.2 Compilación y ejecución de la aplicación desde Xcode o Android Studio

Recursos adicionales

3.1.1.1 Establecer la opción AppSecret 1: Configuración `AppCenter-Config.plist`