Introducción con React Native

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

Vamos a empezar a configurar el SDK de App Center React Native en la aplicación para usar App Center Analytics y App Center bloqueos.

1. Prerrequisitos

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

• Usa un proyecto de React Native que se ejecuta React Native 0.34 o posterior.
• Tiene como destino dispositivos que se ejecutan en android versión 5.0/nivel de API 21 o posterior, o iOS versión 9.0 o posterior.
• No usa ninguna otra biblioteca que proporciona la funcionalidad de informes de bloqueo en iOS.
• Para iOS, la manera predeterminada de usar el SDK requiere CocoaPods. (Si no ha instalado CocoaPods, siga el Tareas iniciales CocoaPods para hacerlo). Sin embargo, es posible vincular el SDK manualmente.

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

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

1. Diríjase a appcenter.ms.
2. Regístrese o inicie sesión y pulse el botón azul de 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 indica Agregar nueva aplicación.

Una vez que haya creado una aplicación, puede obtener su secreto de aplicación en la Configuración de la página App Center Portal. 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. Agregar los módulos App Center SDK

La integración predeterminada del SDK usa CocoaPods para iOS. Si no usa CocoaPods en la aplicación, debe integrar el SDK de React Native manualmente 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 línea siguiente 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 antes que , use el siguiente comando para instalar npm App Center:

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

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

3.1 Integración del SDK automáticamente para React Native 0.60

3.1.1 Integración React Native iOS

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

2. Cree un nuevo archivo con el nombre AppCenter-Config.plist por el siguiente contenido y reemplace por el valor del secreto de la {APP_SECRET_VALUE} aplicación. No olvide agregar este archivo al proyecto de 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>
   

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

   • Agregue estas líneas para importar la sección encima de la #if DEBUG declaración o #ifdef FB_SONARKIT_ENABLED (si está presente):

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

   • Agregue estas líneas al didFinishLaunchingWithOptions método .

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

3.1.2 Integración React Native Android

1. Cree un nuevo archivo con el nombre appcenter-config.json en por el siguiente contenido y reemplace por el valor del secreto android/app/src/main/assets/ de la {APP_SECRET_VALUE} 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".

2. Modifique los valores y valores de la aplicación strings.xml para incluir las líneas siguientes:

   <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.2 Integración del SDK automáticamente para React Native inferior a 0,60

1. Vincule los complementos a la React Native aplicación 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 el siguiente:

   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

   App Center SDK no configura simulaciones automáticamente para los módulos 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 jest del archivo package.json (incluya solo los 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

   Tanto si el procesamiento de bloqueos es automático como si lo desencadenan los métodos 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 valor del proyecto y reemplace el valor del marcador android/app/src/main/assets/appcenter-config.json de posición por App Center secreto de aplicación del YOUR_APP_SECRET proyecto.

3. Edite el archivo del proyecto y reemplace el valor del marcador de posición por App Center secreto de ios/{YourAppName}/AppCenter-Config.plist YOUR_APP_SECRET aplicación del proyecto. Si AppCenter-Config.plist ya existe pero no forma parte del proyecto de Xcode, debe agregarlo manualmente al proyecto de Xcode (haga clic con el botón derecho en la aplicación en XCode y haga clic en Agregar archivos a <App Name> ...).

3.3 [solo iOS] Integración manual del SDK para React Native sin vínculo react-native ni CocoaPods

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

1. Descargue el SDK App Center para React Native que se proporcionan como un archivo ZIP y descomprímalo.

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

3. Descargue el SDK 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 marcos diferentes para cada App Center servicio. El marco llamado es necesario en el proyecto, ya que AppCenter 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 suelen residir dentro de un subdirectorio (a menudo se denomina Proveedor), por lo que si no tiene el proyecto organizado con un subdirectorio para bibliotecas, cree un subdirectorio Vendor ahora (en el directorio ios del proyecto).
   • Cree un grupo denominado 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 descomprimido previamente 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 desde finder (en la ubicación del paso anterior) en el navegador de Project 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 React Native complementos de AppCenter al proyecto de la aplicación:

   • Asegúrese de que Project Navigator esté visible (⌘+1).

   • Para cada complemento de React Native AppCenter, 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 los archivos del Finder en el navegador .xcodeproj de Project Xcode. Normalmente, en el grupo Bibliotecas.

9. Vincular bibliotecas para AppCenter React Native complementos. Abra la configuración del proyecto y, en la pestaña General de la sección Linked Frameworks and Libraries (Marcos vinculados y bibliotecas), agregue nuevos elementos que hagan referencia a las bibliotecas de destino agregadas en el paso anterior:

   • libAppCenterReactNative.a
   • libAppCenterReactNativeAnalytics.a
   • libAppCenterReactNativeCrashes.a

10. Modifique las rutas de acceso de búsqueda de encabezados para buscar encabezados de los proyectos de complementos React Native AppCenter. Abra la configuración del proyecto y, en la pestaña Compilar Configuración en la sección Rutas de búsqueda de encabezados, 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 de la aplicación para incluir código para iniciar el SDK:

    • Agregue estas líneas para importar la sección encima de la #if DEBUG declaración o #ifdef FB_SONARKIT_ENABLED (si está presente):

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

    • Agregue estas líneas al didFinishLaunchingWithOptions método .

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

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

    <?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 la conexión automática React Native 0.60 y posteriores:

    • Dentro de la node_modules de cada paquete de App Center, abrareact-native.config.js y establezca dependency.platforms.ios en null :

    module.exports = {
      dependency: {
        platforms: {
          ios: null,
          ...
        }
      }
    };
    

14. Modifique las rutas de búsqueda de encabezados para React Native encabezados de los App Center React Native de complementos:

    • Asegúrese de que Project navegador está visible (⌘+1).
    • Para cada proyecto de complementos React Native AppCenter que haya agregado al grupo Bibliotecas en el paso 8:
      • Seleccione el proyecto y, en la pestaña Compilar Configuración en la sección Rutas de búsqueda de encabezados, 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 react-native

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 desea usar App Center Analytics y bloqueos, agregue las líneas siguientes:

     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 del nivel de aplicación del proyecto ( android/app/build.gradle ) y agregue las líneas siguientes a la sección dependencies :

   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:

   • Agregue 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;
   

   • Agregar 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 las <resources></resources> 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 por el siguiente contenido y reemplace por el valor del secreto android/app/src/main/assets/ de la APP_SECRET_VALUE 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 estos pasos:

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

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

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Agregue las siguientes reglas de copia de seguridad alappcenter_backup_rule.xml archivo:

<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. Inicio del SDK

Ahora puede compilar e iniciar la aplicación desde la línea de comandos o 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 iOS con el siguiente comando:

react-native run-ios

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

react-native run-android

4.2 Compile y ejecute la aplicación desde Xcode o Android Studio

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

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

Está todo listo para visualizar los datos de Analytics 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 para obtener guías de API y tutoriales para aprender App Center puede hacer.