Bien démarrer avec React Native

  • Article

Important

Visual Studio App Center doit être mis hors service le 31 mars 2025. Bien que vous puissiez continuer à utiliser Visual Studio App Center jusqu’à ce qu’il soit entièrement mis hors service, il existe plusieurs alternatives recommandées vers lesquelles vous pouvez envisager de migrer.

En savoir plus sur les chronologies et les alternatives de support.

Le Kit de développement logiciel (SDK) App Center utilise une architecture modulaire pour vous permettre d’utiliser tous les services ou tous les services.

Commençons par configurer App Center React Native SDK dans votre application pour utiliser App Center Analytics et les incidents d’App Center.

1. Prérequis

Avant de commencer, vérifiez que les conditions préalables suivantes sont remplies :

  • Vous utilisez un projet React Native qui s’exécute React Native 0.34 ou version ultérieure.
  • Vous ciblez les appareils qui s’exécutent sur Android version 5.0/NIVEAU API 21 ou ultérieur, ou iOS version 9.0 ou ultérieure.
  • Vous n’utilisez aucune autre bibliothèque qui fournit la fonctionnalité Rapports d’incidents sur iOS.
  • Pour iOS, la façon par défaut d’utiliser le Kit de développement logiciel (SDK) nécessite CocoaPods. (Si vous n’avez pas installé CocoaPods, suivez la Prise en main CocoaPods pour le faire). Néanmoins, il est possible de lier manuellement le SDK.

2. Créez votre application dans le portail App Center pour obtenir le secret d’application

Si vous avez déjà créé votre application dans le portail App Center, vous pouvez ignorer cette étape.

  1. Dirigez-vous vers appcenter.ms.
  2. Inscrivez-vous ou connectez-vous, puis appuyez sur le bouton bleu en haut à droite du portail qui indique Ajouter une nouvelle application, puis sélectionnez Ajouter une nouvelle application dans le menu déroulant.
  3. Entrez un nom et une description facultative pour votre application.
  4. Sélectionnez le système d’exploitation approprié (Android ou iOS) et sélectionnez React Native comme plateforme.
  5. Appuyez sur le bouton en bas à droite qui indique Ajouter une nouvelle application.

Une fois que vous avez créé une application, vous pouvez obtenir son secret d’application dans la page Paramètres du portail App Center. Dans le coin supérieur droit de la page Paramètres , cliquez sur les points verticaux triples et sélectionnez Copy app secret pour obtenir votre secret d’application.

3. Ajouter les modules du Kit de développement logiciel (SDK) App Center

L’intégration par défaut du KIT de développement logiciel (SDK) utilise CocoaPods pour iOS. Si vous n’utilisez pas CocoaPods dans votre application, vous devez intégrer manuellement le SDK React Native pour votre application iOS.

Ouvrez un terminal et accédez à la racine de votre projet React Native, puis entrez la ligne suivante pour ajouter App Center Analytics et Crashs à l’application :

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

Si vous préférez yarn , npmutilisez la commande suivante pour installer App Center :

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

Le Kit de développement logiciel (SDK) App Center utilise une approche modulaire, où vous vous contentez d’ajouter les modules pour les services App Center que vous souhaitez utiliser. appcenter-analytics et appcenter-crash sont judicieux d’ajouter à presque toutes les applications, car ils fournissent de la valeur sans configuration supplémentaire requise. appcenter fournit des API App Center à usage général, utiles pour plusieurs services.

3.1 Intégrer automatiquement le Kit de développement logiciel (SDK) pour React Native 0.60

L’utilisation du AppCenter-Config.plist Kit de développement logiciel (SDK) App Center avec React Native peut être effectuée de deux manières : configurer pour iOS et appcenter-config.json pour Android ou appeler les fonctions de démarrage natives qui acceptent appSecret comme argument.

3.1.1 Intégrer React Native iOS

Exécutez pod install --repo-update à partir du répertoire iOS pour installer les dépendances CocoaPods.

3.1.1.1 Définition de l’option AppSecret 1 : Configuration AppCenter-Config.plist

  1. Créez un fichier portant le nom AppCenter-Config.plist suivant et remplacez par {APP_SECRET_VALUE} la valeur secrète de votre application. N’oubliez pas d’ajouter ce fichier au projet Xcode (cliquez avec le bouton droit sur l’application dans Xcode, puis cliquez sur Ajouter des fichiers à <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. Modifiez le fichier AppDelegate.m ou AppDelegate.mm de l’application pour inclure du code pour le démarrage du SDK.

    • Ajoutez les importations suivantes :
    #import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
    • Ajoutez ces lignes à la application:didFinishLaunchingWithOptions: méthode :
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 Définition de l’option AppSecret 2 : configuration dans le code

Modifiez le fichier AppDelegate.m ou AppDelegate.mm de l’application pour inclure du code pour le démarrage du SDK.

  • Ajoutez les importations suivantes :
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
  • Ajoutez ces lignes à la application:didFinishLaunchingWithOptions: méthode :
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Intégrer React Native Android

Modifiez les valeurs/ strings.xmlde l’application pour inclure les lignes suivantes :

<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 Définition de l’option AppSecret 1 : configuration de appcenter-config.json

Créez un fichier portant le nom appcenter-config.json dans android/app/src/main/assets/ avec le contenu suivant et remplacez par {APP_SECRET_VALUE} la valeur secrète de votre application.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Remarque : Si le dossier nommé assets n’existe pas, il doit être créé sous « project_root/android/app/src/main/assets ».

3.1.2.2 Définition de l’option AppSecret 2 : configuration dans le code

Ajoutez la ligne suivante à l’intérieur de la classe d’activité main de votre application' onCreate-callback pour utiliser App Center Analytics et App Center Crashs :

AppCenter.start(getApplication(), "{Your App Secret}", Analytics.class, Crashes.class);

AppCenter.start(application, "{Your App Secret}", Analytics::class.java, Crashes::class.java)

3.2 Intégrer automatiquement le Kit de développement logiciel (SDK) pour React Native inférieur à 0,60

Notes

Si votre React modules est lié à l’aide du chemin relatif à l’intérieur de votre Podfile, mais qu’il n’est pas référencé dans le projet, le script de liaison échoue, car il lie App Center à l’aide de versions de pod statiques. Vous devez suivre les étapes de la section résolution des problèmes React Native si vous avez déjà exécuté le script de liaison, ou le lier vous-même

  1. Liez les plug-ins à l’application React Native à l’aide de la commande react-native link.

    react-native link appcenter
react-native link appcenter-analytics
react-native link appcenter-crashes

    Pour iOS, il essaiera de télécharger le Kit de développement logiciel (SDK) App Center pour iOS et macOS à partir de CocoaPods, si vous voyez une erreur comme :

    Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version})

    Exécutez la commande suivante :

    pod repo update

    Puis réessayez en exécutant react-native link.

    Notes

    Le Kit de développement logiciel (SDK) App Center ne configure pas automatiquement les tableaux pour les modules App Center pendant le processus de liaison. Si vous utilisez l’infrastructure de test Jest dans votre application et que vous rencontrez des erreurs provoquées par le KIT de développement logiciel (SDK) App Center lors de l’exécution de tests avec Jest, ajoutez ce qui suit à la section jest de package.json fichier (incluez uniquement les modules utilisés) :

    "setupFiles": [
   "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
   "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
   "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
]

    Notes

    Que le traitement des plantages soit automatique ou déclenché par des méthodes Javascript, les incidents sont toujours traités après le redémarrage de l’application. Les incidents ne peuvent pas être traités au moment où l’application se bloque.

  2. Modifiez le projet et remplacez la valeur de android/app/src/main/assets/appcenter-config.json l’espace réservé par la YOUR_APP_SECRET clé secrète d’application de votre projet App Center.

  3. Modifiez le fichier du ios/{YourAppName}/AppCenter-Config.plist projet et remplacez la valeur de l’espace réservé par la YOUR_APP_SECRET clé secrète d’application de votre projet App Center. Si AppCenter-Config.plist existe déjà mais ne fait pas partie de votre projet Xcode, vous devez l’ajouter au projet Xcode manuellement (cliquez avec le bouton droit sur l’application dans XCode, puis cliquez sur Ajouter des fichiers au nom> de <l’application...).

Effectuez cette intégration si vous ne souhaitez pas utiliser CocoaPods. Nous vous recommandons vivement d’intégrer le Kit de développement logiciel (SDK) via CocoaPods, comme décrit ci-dessus. Néanmoins, il est également possible d’intégrer manuellement le SDK natif iOS.

Notes

Le dernier Kit de développement logiciel (SDK) App Center React Native ne dépend pas nécessairement du dernier kit de développement logiciel (SDK) App Center iOS, car le KIT de développement logiciel (SDK) iOS est mis à jour et publié avant le React Native.

La conséquence est que vous devez savoir de quelle version du KIT de développement logiciel (SDK) iOS dépend le React Native SDK.

  1. Téléchargez le Kit de développement logiciel (SDK) App Center pour React Native frameworks fournis sous forme de fichier zip et décompressez-le.

  2. Vous verrez un dossier nommé AppCenterReactNativeShared qui contient une infrastructure unique pour le pont iOS React Native requis.

  3. Téléchargez le Kit de développement logiciel (SDK) App Center correspondant pour les frameworks iOS fournis sous forme de fichier zip et décompressez-le.

  4. Vous verrez un dossier appelé AppCenter-SDK-Apple/iOS qui contient des infrastructures différentes pour chaque service App Center. L’infrastructure appelée AppCenter est requise dans le projet, car elle contient du code partagé entre les différents modules.

  5. [Facultatif] Créez un sous-répertoire pour les bibliothèques tierces.

    • Comme bonne pratique, les bibliothèques tierces se trouvent généralement à l’intérieur d’un sous-répertoire (il est souvent appelé Fournisseur). Par conséquent, si votre projet n’est pas organisé avec un sous-répertoire pour les bibliothèques, créez un sous-répertoire Fournisseur maintenant (sous le répertoire ios de votre projet).
    • Créez un groupe appelé Fournisseur à l’intérieur de votre projet Xcode pour imiter votre structure de fichiers sur le disque.

  6. Ouvrez le Finder et copiez les dossiers AppCenter-SDK-Apple/iOS et AppCenterReactNativeShared précédemment décompressés dans le dossier de votre projet à l’emplacement où vous souhaitez qu’il réside.

  7. Ajoutez les frameworks sdk au projet dans Xcode :

    • Vérifiez que le Navigateur de projet est visible (⌘+1).
    • Faites glisser et déposez les fichiers AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework et AppCenterReactNativeShared.framework à partir du Finder (à l’emplacement de l’étape précédente) dans le Navigateur de projet de Xcode. Les fichiers AppCenter.framework et AppCenterReactNativeShared.framework sont nécessaires pour démarrer le KIT de développement logiciel (SDK), assurez-vous qu’ils sont ajoutés à votre projet. Sinon, les autres modules ne fonctionneront pas et votre application ne sera pas compilée.
    • Une boîte de dialogue s’affiche, vérifiez que la cible de votre application est cochée, puis cliquez sur Terminer.

  8. Lier appCenter React Native projets de plug-ins au projet de votre application :

    • Vérifiez que le Navigateur de projet est visible (⌘+1).

    • Pour chaque plug-in AppCenter React Native, accédez au dossier contenant le code source. Les chemins d’accès seront respectivement

      • /node_modules/appcenter/ios
      • /node_modules/appcenter-analytics/ios
      • /node_modules/appcenter-crashes/ios

    • Faites glisser et déposez .xcodeproj des fichiers du Finder dans le Navigateur de projet de Xcode. Généralement, sous Groupe Bibliothèques .

  9. Bibliothèques de liens pour les plug-ins AppCenter React Native. Ouvrez les paramètres de votre projet et, sous l’onglet Général de la section Infrastructures et bibliothèques liées , ajoutez de nouveaux éléments référençant les bibliothèques cibles ajoutées à l’étape précédente :

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

  10. Modifiez les chemins de recherche d’en-tête pour rechercher les en-têtes des projets de plug-ins AppCenter React Native. Ouvrez les paramètres de votre projet et sous l’onglet Paramètres de build de la section Chemins de recherche d’en-tête , ajoutez de nouveaux emplacements pour les fichiers d’en-tête :

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

  1. Modifiez le fichier AppDelegate.m ou AppDelegate.mm de l’application pour inclure le code de démarrage du SDK :

    • Ajoutez les importations suivantes :
    #import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    • Ajouter ces lignes à la application:didFinishLaunchingWithOptions: méthode
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  2. Créez un fichier avec le nom AppCenter-Config.plist avec le contenu suivant et remplacez par {APP_SECRET_VALUE} la valeur de secret de votre application. N’oubliez pas d’ajouter ce fichier au projet XCode (cliquez avec le bouton droit sur l’application dans XCode, puis cliquez sur Ajouter des fichiers au nom de> l’application<...).

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

Notes

Les deux étapes suivantes concernent uniquement les applications qui utilisent React Native 0,60 et versions ultérieures.

  1. Désactivez la liaison automatique pour les React Native 0,60 et versions ultérieures :

    • Dans le dossier node_modules de chaque package App Center, ouvrez react-native.config.js et définissez dependency.platforms.iosnullsur :
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. Modifiez les chemins de recherche d’en-tête pour rechercher les en-têtes React Native des projets de plug-ins App Center React Native :

    • Vérifiez que le Navigateur de projet est visible (⌘+1).
    • Pour chaque projet de plug-ins AppCenter React Native que vous avez ajouté au groupe Bibliothèques à l’étape 8 :
      • Sélectionnez le projet et sous l’onglet Paramètres de build dans la section Chemins de recherche d’en-tête , ajoutez de nouveaux emplacements pour les fichiers d’en-tête avec une recursive option : ${SRCROOT}/../../../ios/Pods/Headers

Étapes d’intégration sans la react-native link commande.

  1. Ouvrez le fichier android/settings.gradle et insérez les lignes suivantes. Incluez les dépendances souhaitées dans votre projet. Chaque module sdk doit être ajouté en tant que dépendance distincte dans cette section. Si vous souhaitez utiliser App Center Analytics and Crashes, ajoutez les lignes suivantes :

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

Notes

En raison de l’arrêt de la prise en charge de jCenter , tous nos assemblys ont été déplacés vers le référentiel Maven Central. Suivez ce guide sur la migration de jCenter vers Maven Central.

  1. Ouvrez le fichier build.gradle au niveau de l’application du projet (android/app/build.gradle) et ajoutez les lignes suivantes dans dependencies la section :

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

  2. Modifiez le fichier MainApplication.java de l’application pour inclure du code pour le démarrage du KIT de développement logiciel (SDK) :

    • Ajouter ces lignes à la section d’importation
    import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
    • Ajouter des packages AppCenter à la List<ReactPackage> getPackages() méthode
    @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)
  );
}

  3. Ouvrez strings.xml fichier (android/app/src/main/res/values) et ajoutez les lignes suivantes à l’intérieur <resources></resources> des balises :

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

  4. Créez un fichier portant le nom appcenter-config.json dans android/app/src/main/assets/ avec le contenu suivant et remplacez par APP_SECRET_VALUE la valeur secrète de votre application.

    {
    "app_secret": "APP_SECRET_VALUE"
}

Avertissement

Il n’est pas recommandé d’incorporer votre secret d’application dans le code source.

3.5 Si vous utilisez la sauvegarde automatique pour éviter d’obtenir des informations incorrectes sur l’appareil, suivez les étapes suivantes :

Notes

La sauvegarde automatique est automatiquement activée pour les applications qui ciblent Android 6.0 (niveau d’API 23) ou une version ultérieure. 

Notes

Si vous avez déjà un fichier personnalisé avec une règle de sauvegarde, passez à la troisième étape.

a. Créez appcenter_backup_rule.xml fichier dans le dossier android/app/src/main/res/xml.

b. Ouvrez le fichier AndroidManifest.xml du projet. Ajoutez l’attribut android:fullBackupContent à l’élément <application> . Il doit pointer vers le fichier de ressourcesappcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Ajoutez les règles de sauvegarde suivantes au fichier 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. Démarrer le Kit de développement logiciel (SDK)

Vous pouvez maintenant générer et lancer votre application à partir de la ligne de commande ou de Xcode/Android Studio.

4.1 Générer et exécuter votre application à partir de la ligne de commande

Vous pouvez générer et lancer votre application iOS à l’aide de la commande suivante :

react-native run-ios

Conseil

Vous pouvez le lancer sur un simulateur iOS ou un appareil iOS en spécifiant le nom de l’appareil iOS dans react-native run-ios --device "myDeviceName".

Vous pouvez créer et lancer votre application Android à l’aide de la commande suivante :

react-native run-android

Conseil

Vous pouvez le lancer sur un émulateur Android ou un appareil Android en spécifiant l’ID de l’appareil dans react-native run-android --deviceId "myDeviceId" (deviceId à partir de la adb devices commande ).

4.2 Générer et exécuter votre application à partir de Xcode ou d’Android Studio

Pour iOS, ouvrez le fichier ou ios/{appname}.xcodeproj le fichier de ios/{appname}.xcworkspace votre projet dans Xcode et générez à partir de là.

Notes

Si vous avez lié App Center automatiquement via react-native link (comme à l’étape 3.1), vous devez ouvrir le fichier du ios/{appname}.xcworkspace projet dans Xcode. Étant donné que les dépendances App Center CocoaPods fonctionnent uniquement avec xcworkspace non xcodeproj, et que le ios/{appname}.xcodeproj fichier n’aura pas de dépendances App Center CocoaPods liées.

Pour Android, importez votre projet Android dans Android Studio et générez à partir de là.

Vous êtes tous configuré pour visualiser les données d’analyse et de blocage sur le portail que le SDK collecte automatiquement. Aucune configuration supplémentaire n’est requise. Consultez la section Analyse et incidents pour obtenir des guides et des procédures pas à pas sur les API pour savoir ce qu’App Center peut faire.