Condividi tramite

Introduzione alla React Native

  • Articolo

Importante

Visual Studio App Center è previsto per il ritiro il 31 marzo 2025. Anche se è possibile continuare a usare Visual Studio App Center fino a quando non viene completamente ritirato, esistono diverse alternative consigliate che è possibile considerare la migrazione a.

Altre informazioni sulle sequenze temporali di supporto e sulle alternative.

App Center SDK usa un'architettura modulare in modo da poter usare qualsiasi o tutti i servizi.

Iniziamo a configurare App Center React Native SDK nell'app per usare App Center Analytics e App Center Arresti anomali.

1. Prerequisiti

Prima di iniziare, verificare che i prerequisiti seguenti siano soddisfatti:

  • Si usa un progetto di React Native che esegue React Native 0.34 o versione successiva.
  • I dispositivi che vengono eseguiti in Android Versione 5.0/API 21 o versioni successive o versioni successive o iOS versione 9.0 o successiva.
  • Non si usa alcuna altra libreria che fornisce funzionalità di creazione di report anomali in iOS.
  • Per iOS, il modo predefinito per usare l'SDK richiede CocoaPods. Se non hai installato CocoaPods, segui il Introduzione CocoaPods per farlo. Tuttavia, è possibile collegare manualmente l'SDK.

2. Creare l'app nel portale di App Center per ottenere il segreto dell'app

Se l'app è già stata creata nel portale di App Center, è possibile ignorare questo passaggio.

  1. Passare a appcenter.ms.
  2. Iscriversi o accedere e premere il pulsante blu nell'angolo superiore destro del portale che indica Aggiungi nuovo e selezionare Aggiungi nuova app dal menu a discesa.
  3. Immettere un nome e una descrizione facoltativa per l'app.
  4. Selezionare il sistema operativo appropriato (Android o iOS) e selezionare React Native come piattaforma.
  5. Premere il pulsante in basso a destra che indica Aggiungi nuova app.

Dopo aver creato un'app, è possibile ottenere il relativo segreto app nella pagina Impostazioni nel portale di App Center. Nell'angolo superiore destro della pagina Impostazioni fare clic sui punti verticali tripli e selezionare Copy app secret per ottenere il segreto dell'app.

3. Aggiungere i moduli app Center SDK

L'integrazione predefinita dell'SDK usa CocoaPods per iOS. Se non si usa CocoaPods nell'app, è necessario integrare manualmente l'SDK React Native per l'app iOS.

Aprire un terminale e passare alla radice del progetto React Native, quindi immettere la riga seguente per aggiungere App Center Analytics e Arresti anomali all'app:

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

Nel caso in cui si preferisca yarn su npm, usare il comando seguente per installare App Center:

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

App Center SDK usa un approccio modulare, in cui si aggiungono solo i moduli per i servizi di App Center che si desidera usare. appcenter-analytics e appcenter-crashes hanno senso aggiungere a quasi tutte le app, in quanto forniscono valore senza alcuna configurazione aggiuntiva necessaria. appcenter offre API di App Center per utilizzo generico, utili per più servizi.

3.1 Integrare automaticamente l'SDK per React Native 0.60

L'uso di App Center SDK con React Native può essere eseguito in due modi: Configurazione di AppCenter-Config.plist per iOS e appcenter-config.json per Android o chiamando le funzioni di avvio native che accettano l'appSecret come argomento.

3.1.1 Integrare React Native iOS

Eseguire pod install --repo-update dalla directory iOS per installare le dipendenze di CocoaPods.

3.1.1.1 Impostazione dell'opzione AppSecret 1: Configurazione AppCenter-Config.plist

  1. Creare un nuovo file con il nome AppCenter-Config.plist con il contenuto seguente e sostituire {APP_SECRET_VALUE} con il valore del segreto dell'app. Non dimenticare di aggiungere questo file al progetto Xcode (fare clic con il pulsante destro del mouse sull'app in Xcode e fare clic su Aggiungi file 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. Modificare il file AppDelegate.m o AppDelegate.mm dell'app per includere il codice per l'avvio di SDK.

    • Aggiungere le importazioni seguenti:
    #import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
    • Aggiungere queste righe al application:didFinishLaunchingWithOptions: metodo:
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 Impostazione dell'opzione AppSecret 2: Configurazione nel codice

Modificare il file AppDelegate.m o AppDelegate.mm dell'app per includere il codice per l'avvio di SDK.

  • Aggiungere le importazioni seguenti:
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
  • Aggiungere queste righe al application:didFinishLaunchingWithOptions: metodo:
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Integrare React Native Android

Modificare i valori/valori/strings.xml dell'app per includere le righe seguenti:

<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 Impostazione dell'opzione AppSecret 1: Configurazione di appcenter-config.json

Creare un nuovo file con il nome appcenter-config.json in android/app/src/main/assets/ con il contenuto seguente e sostituire {APP_SECRET_VALUE} con il valore del segreto dell'app.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Nota: se la cartella denominata asset non esiste, deve essere creata in "project_root/android/app/src/main/assets".

3.1.2.2 Impostazione dell'opzione AppSecret 2: Configurazione nel codice

Aggiungere la riga seguente all'interno della classe di attività principale dell'app suCreare-callback per usare App Center Analytics e App Center Arresti anomali:

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

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

3.2 Integrare automaticamente l'SDK per React Native inferiore a 0,60

Nota

Se i moduli di React sono collegati usando il percorso relativo all'interno del podfile ma non a cui si fa riferimento nel progetto, lo script di collegamento avrà esito negativo perché collega App Center usando le versioni statiche del pod. È necessario seguire la procedura descritta nella sezione risoluzione dei problemi React Native se è già stato eseguito lo script di collegamento o collegarlo autonomamente

  1. Collegare i plug-in all'app React Native usando il comando di collegamento react-native.

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

    Per iOS, tenterà di scaricare App Center SDK per iOS e macOS da CocoaPods, se viene visualizzato un errore simile al seguente:

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

    Eseguire il comando seguente:

    pod repo update

    Riprovare a eseguire react-native link.

    Nota

    App Center SDK non configura automaticamente i moduli di App Center durante il processo di collegamento. Se si usa il framework di test Jest nell'applicazione e si verificano errori causati dall'SDK di App Center durante l'esecuzione di test con Jest, aggiungere quanto segue alla sezione jest del file di package.json (includere solo i moduli in 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

    Se l'elaborazione degli arresti anomali è automatica o attivata dai metodi Javascript, gli arresti anomali vengono sempre elaborati dopo il riavvio dell'applicazione. Gli arresti anomali non possono essere elaborati al momento dell'arresto anomalo dell'applicazione.

  2. Modificare il valore del progetto e sostituire il valore segnaposto con il YOUR_APP_SECRET segreto dell'applicazione del progetto android/app/src/main/assets/appcenter-config.json App Center.

  3. Modificare il file del ios/{YourAppName}/AppCenter-Config.plist progetto e sostituire il valore segnaposto con il YOUR_APP_SECRET segreto dell'applicazione del progetto App Center. Se AppCenter-Config.plist esiste già ma non fa parte del progetto Xcode, è necessario aggiungerlo manualmente al progetto Xcode (fare clic con il pulsante destro del mouse sull'app in XCode e fare clic su Aggiungi file al <nome> dell'app...).

Eseguire questa integrazione, se non si vuole usare CocoaPods. È consigliabile integrare l'SDK tramite CocoaPods come descritto in precedenza. Tuttavia, è anche possibile integrare manualmente l'SDK nativo iOS.

Nota

La versione più recente di App Center React Native SDK non dipende necessariamente dall'SDK di App Center iOS più recente, perché l'SDK iOS viene aggiornato e rilasciato prima del React Native uno.

La conseguenza è che è necessario sapere quale versione dell'SDK iOS dipende da React Native SDK.

  1. Scaricare App Center SDK per React Native framework forniti come file zip e decomprimerlo.

  2. Verrà visualizzata una cartella denominata AppCenterReactNativeShared che contiene un singolo framework per il bridge iOS necessario React Native.

  3. Scaricare l'SDK di App Center corrispondente per i framework iOS forniti come file zip e decomprimerlo.

  4. Verrà visualizzata una cartella denominata AppCenter-SDK-Apple/iOS che contiene framework diversi per ogni servizio App Center. Il framework chiamato AppCenter è obbligatorio nel progetto perché contiene il codice condiviso tra i diversi moduli.

  5. [Facoltativo] Creare una sottodirectory per le librerie di terze parti.

    • Come procedura consigliata, le librerie di terze parti si trovano in genere all'interno di una sottodirectory (spesso denominata Fornitore), quindi se il progetto non è organizzato con una sottodirectory per le librerie, creare una sottodirectory fornitore ora (nella directory ios del progetto).
    • Creare un gruppo denominato Vendor all'interno del progetto Xcode per simulare la struttura di file su disco.

  6. Aprire Finder e copiare le cartelle AppCenter-SDK-Apple/iOS e AppCenterReactNativeShared nella cartella del progetto nel percorso in cui si desidera risiederlo.

  7. Aggiungere i framework SDK al progetto in Xcode:

    • Assicurarsi che Lo strumento di navigazione del progetto sia visibile (⌘+1).
    • Trascinare e rilasciare i file AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework e AppCenterReactNativeShared.framework dal Finder (nel percorso del passaggio precedente) in Esplora progetti Xcode. I file AppCenter.framework e AppCenterReactNativeShared.framework sono necessari per avviare l'SDK, assicurarsi che vengano aggiunti al progetto, altrimenti gli altri moduli non funzioneranno e l'app non verrà compilata.
    • Verrà visualizzata una finestra di dialogo, assicurarsi che la destinazione dell'app sia selezionata, quindi fare clic su Fine.

  8. Collegare i progetti plug-in di AppCenter React Native al progetto dell'app:

    • Assicurarsi che Lo strumento di navigazione del progetto sia visibile (⌘+1).

    • Per ogni plug-in AppCenter React Native passare alla cartella contenente il codice sorgente. I percorsi saranno rispettivamente

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

    • Trascinare e rilasciare .xcodeproj file dal Finder in Esplora progetti Xcode. In genere nel gruppo Librerie .

  9. Collegamenti alle librerie per AppCenter React Native plug-in. Aprire le impostazioni del progetto e nella scheda Generale nella sezione Framework collegati e librerie aggiungere nuovi elementi che fanno riferimento alle librerie di destinazione aggiunte nel passaggio precedente:

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

  10. Modificare i percorsi di ricerca intestazione per trovare le intestazioni dai progetti plug-in di AppCenter React Native. Aprire le impostazioni del progetto e nella scheda Impostazioni di compilazione nella sezione Percorsi di ricerca intestazione aggiungere nuovi percorsi per i file di intestazione:

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

  1. Modificare il file AppDelegate.m o AppDelegate.mm dell'app per includere il codice per l'avvio dell'SDK:

    • Aggiungere le importazioni seguenti:
    #import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    • Aggiungere queste righe al application:didFinishLaunchingWithOptions: metodo
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  2. Creare un nuovo file con il nome AppCenter-Config.plist con il contenuto seguente e sostituire {APP_SECRET_VALUE} con il valore del segreto dell'app. Non dimenticare di aggiungere questo file al progetto XCode (fare clic con il pulsante destro del mouse sull'app in XCode e fare clic su Aggiungi file al <nome> dell'app...).

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

I due passaggi successivi sono solo per le app che usano React Native 0,60 e versioni successive.

  1. Disabilitare il collegamento automatico per React Native 0,60 e versioni successive:

    • All'interno della cartella node_modules in ogni pacchetto di App Center aprire react-native.config.js e impostare dependency.platforms.ios su null:
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. Modificare i percorsi di ricerca intestazione per trovare intestazioni di React Native dai progetti plug-in di App Center React Native:

    • Assicurarsi che Lo strumento di navigazione del progetto sia visibile (⌘+1).
    • Per ogni progetto di plug-in di AppCenter React Native aggiunto al gruppo Librerie nel passaggio 8:
      • Selezionare il progetto e nella scheda Impostazioni di compilazione nella sezione Percorsi di ricerca intestazione aggiungere nuove posizioni per i file di intestazione con un'opzione recursive : ${SRCROOT}/../../../ios/Pods/Headers

Passaggi di integrazione senza il react-native link comando.

  1. Aprire il file android/settings.gradle e inserire le righe seguenti. Includere le dipendenze desiderate nel progetto. Ogni modulo SDK deve essere aggiunto come dipendenza separata in questa sezione. Per usare App Center Analytics e Arresti anomali, aggiungere le righe seguenti:

      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

A causa della chiusura del supporto di jCenter , tutti gli assembly sono stati spostati nel repository Maven Central. Seguire questa guida sulla migrazione da jCenter a Maven Central.

  1. Aprire il file build.gradle a livello di progetto (android/app/build.gradle) e aggiungere le righe seguenti nella dependencies sezione:

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

  2. Modificare il file di MainApplication.java dell'app in modo da includere il codice per l'avvio di SDK:

    • Aggiungere queste righe alla sezione importazione
    import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
    • Aggiungere pacchetti AppCenter al List<ReactPackage> getPackages() metodo
    @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. Aprire strings.xml file (android/app/src/main/res/values) e aggiungere le righe seguenti all'interno <resources></resources> dei tag:

    <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. Creare un nuovo file con il nome appcenter-config.json in android/app/src/main/assets/ con il contenuto seguente e sostituire APP_SECRET_VALUE con il valore del segreto dell'app.

    {
    "app_secret": "APP_SECRET_VALUE"
}

Avviso

Non è consigliabile incorporare il segreto dell'app nel codice sorgente.

3.5 Se si usa il backup automatico per evitare di ottenere informazioni non corrette sul dispositivo, seguire i passaggi successivi:

Nota

Le app destinate ad Android 6.0 (livello API 23) o successive hanno automaticamente abilitato Il backup automatico. 

Nota

Se si dispone già di un file personalizzato con regola di backup, passare al terzo passaggio.

a. Creare appcenter_backup_rule.xml file nella cartella android/app/src/main/res/xml .

b. Aprire il file diAndroidManifest.xml del progetto. Aggiungere l'attributo all'elemento android:fullBackupContent<application> . Deve puntare al file di risorseappcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Aggiungere le regole di backup seguenti al file diappcenter_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. Avviare l'SDK

È ora possibile compilare e avviare l'applicazione dalla riga di comando o da Xcode/Android Studio.

4.1 Compilare ed eseguire l'applicazione dalla riga di comando

È possibile compilare e avviare l'applicazione iOS dal comando seguente:

react-native run-ios

Suggerimento

È possibile avviarlo in un simulatore iOS o in un dispositivo iOS specificando il nome del dispositivo iOS in react-native run-ios --device "myDeviceName".

È possibile compilare e avviare l'applicazione Android dal comando seguente:

react-native run-android

Suggerimento

È possibile avviarlo in un emulatore android o in un dispositivo Android specificando l'ID dispositivo in react-native run-android --deviceId "myDeviceId" (deviceId dal adb devices comando).

4.2 Compilare ed eseguire l'applicazione da Xcode o Android Studio

Per iOS aprire il file o ios/{appname}.xcodeproj il file del ios/{appname}.xcworkspace progetto in Xcode e compilare da qui.

Nota

Se app Center è collegato automaticamente tramite react-native link (come nel passaggio 3.1), è necessario aprire il file del ios/{appname}.xcworkspace progetto in Xcode. Poiché le dipendenze di App Center CocoaPods funzionano solo con xcworkspace non xcodeproje il ios/{appname}.xcodeproj file non avrà dipendenze di App Center CocoaPods collegate.

Per Android, importare il progetto Android in Android Studio e compilare da questa posizione.

Tutti sono impostati per visualizzare i dati di Analisi e arresti anomali nel portale che l'SDK raccoglie automaticamente. Non è necessaria alcuna configurazione aggiuntiva. Vedere la sezione Analisi e arresti anomali per le API e le procedure dettagliate per informazioni sulle operazioni che possono essere eseguite da App Center.