Condividi tramite

Introduzione a React Native

Importante

Visual Studio App Center è stato ritirato il 31 marzo 2025, ad eccezione delle funzionalità di Analisi e diagnostica, che continueranno a essere supportate fino al 30 giugno 2026. Ulteriori informazioni.

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

Iniziamo a configurare App Center React Native SDK nella tua app per utilizzare App Center Analytics e App Center Crashes.

1. Prerequisiti

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

  • Si usa un progetto React Native che esegue React Native 0.34 o versione successiva.
  • Sono destinati ai dispositivi in esecuzione in Android versione 5.0/API di livello 21 o versione successiva o iOS versione 9.0 o successiva.
  • Non stai utilizzando nessun'altra libreria che fornisce funzionalità di crash reporting su iOS.
  • Per iOS, il modo predefinito per usare l'SDK richiede CocoaPods. Se non hai installato CocoaPods, segui CocoaPods Getting Started 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. Vai a appcenter.ms.
  2. Iscriversi o accedere e premere il pulsante blu nell'angolo in alto a destra 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 segreto dell'app nella pagina Impostazioni del 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 di App Center SDK

L'integrazione predefinita dell'SDK usa CocoaPods per iOS. Se non usi CocoaPods nella tua app, devi integrare React Native SDK manualmente per l'app iOS.

Apri un terminale e vai alla directory principale del tuo progetto React Native, poi inserisci la seguente riga per aggiungere App Center Analytics e Crash all'app:

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

Se si preferisce yarn rispetto a 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 è sufficiente aggiungere i moduli per i servizi di App Center da 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 start native che accettano appSecret come argomento.

3.1.1 Integrare React Native iOS

Esegui pod install --repo-update dalla directory iOS per installare le dipendenze 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 scegliere Aggiungi file ad <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 dell'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 dell'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 il res/values/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 diappcenter-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 assets 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

Aggiungi la seguente riga all'interno del metodo onCreate della classe dell'attività principale della tua app per utilizzare App Center Analytics e 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 Integrare automaticamente l'SDK per React Native inferiore a 0.60

Annotazioni

Se i moduli React sono collegati usando il percorso relativo all'interno del Podfile ma non vengono referenziati nel progetto, lo script di collegamento avrà esito negativo perché collega App Center utilizzando versioni statiche dei pod. Se lo script di collegamento è già stato eseguito, è necessario seguire la procedura descritta nella sezione Risoluzione dei problemi di React Native oppure collegarlo manualmente

  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

    Quindi riprovare a eseguire react-native link.

    Annotazioni

    App Center SDK non configura automaticamente i mock per 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 da App Center SDK 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",
]

    Annotazioni

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

  2. Modifica il progetto android/app/src/main/assets/appcenter-config.json e inserisci il valore segreto dell'applicazione del progetto App Center al posto del segnaposto YOUR_APP_SECRET.

  3. Modifica il file del progetto ios/{YourAppName}/AppCenter-Config.plist e sostituisci il valore segnaposto con il segreto dell'applicazione del tuo progetto App Center YOUR_APP_SECRET. 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 scegliere 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.

Annotazioni

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

Di conseguenza, è necessario conoscere la versione di iOS SDK da cui dipende React Native SDK.

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

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

  3. Scaricare i framework di App Center SDK per iOS corrispondenti 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 è necessario nel progetto perché contiene 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 Vendor), quindi se il progetto non è organizzato con una sottodirectory per le librerie, creare ora una sottodirectory Vendor (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 precedentemente decompresse nella cartella del progetto nel percorso in cui si vuole che si trovi.

  7. Aggiungere i framework SDK al progetto in Xcode:

    • Assicurarsi che il Navigatore 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 Project Navigator di Xcode. Per avviare l'SDK sono necessari i file AppCenter.framework e AppCenterReactNativeShared.framework , 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 e quindi fare clic su Fine.

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

    • Assicurarsi che il Navigatore del Progetto sia visibile (⌘+1).

    • Per ogni plug-in React Native di AppCenter 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 i file dal Finder in Project Navigator di Xcode. In genere nel gruppo Librerie .

  9. Librerie di collegamento per i plug-in di React Native di AppCenter. Aprire le impostazioni del progetto e nella scheda Generale nella sezione Framework e librerie collegati 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 React Native di AppCenter. 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 scegliere 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>

Annotazioni

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 su dependency.platforms.iosnull:
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. Modificare i percorsi di ricerca delle intestazioni per trovare le intestazioni React Native dai plug-in dei progetti di App Center React Native.

    • Assicurarsi che il Navigatore del Progetto sia visibile (⌘+1).
    • Per ogni progetto plug-in React Native di AppCenter aggiunto al gruppo Librerie nel passaggio 8:
      • Selezionare il progetto e nella scheda Impostazioni di compilazione nella sezione Percorsi di ricerca intestazione aggiungere nuovi percorsi 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. Se si vuole usare Analisi e arresti anomali di App Center, 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')

Annotazioni

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

  1. Aprire il file build.gradle a livello di app del 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 dell'SDK:

    • Aggiungere queste righe alla sezione import
    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 dei <resources></resources> 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"
}

Avvertimento

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

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

Annotazioni

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

Annotazioni

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. Apri il file del progetto AndroidManifest.xml. Aggiungere l'attributo android:fullBackupContent all'elemento <application> . Deve puntare al file di risorse appcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Aggiungere le regole di backup seguenti al file 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. 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 con il 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 con il 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, apri il file ios/{appname}.xcworkspace o ios/{appname}.xcodeproj del tuo progetto in Xcode e procedi alla compilazione da lì.

Annotazioni

Se App Center è stato 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 CocoaPods di App Center funzionano solo con xcworkspace non xcodeproje il ios/{appname}.xcodeproj file non avrà dipendenze CocoaPods di App Center collegate.

Per Android, importa il tuo progetto android in Android Studio e compilarlo da lì.

Sei pronto a visualizzare i dati analitici e le anomalie di sistema sul portale, raccolti automaticamente dall'SDK. Non è necessaria alcuna configurazione aggiuntiva. Consultare le sezioni Analisi e Arresti Anomali per le guide alle API e le procedure dettagliate per scoprire cosa può fare App Center.