Introducción a React Native

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.

1. Vaya a appcenter.ms.
2. 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.
3. Escriba un nombre y una descripción opcional para la aplicación.
4. Seleccione el sistema operativo adecuado (Android o iOS) y seleccione React Native como plataforma.
5. 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

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

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

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

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

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

1. Descargue el SDK de App Center para React Native marcos proporcionados como un archivo ZIP y descomprímalo.

2. Verá una carpeta denominada AppCenterReactNativeShared que contiene un único marco para el puente de iOS React Native necesario.

3. Descargue el SDK de App Center correspondiente para marcos de iOS proporcionados como un archivo ZIP y descomprímalo.

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 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)
     );
   }
   

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

5. 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"
   }
   

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

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

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

react-native run-android

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

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.