Začínáme s React Native

  • Článek

Důležité

31. března 2025 je naplánované vyřazení z provozu. I když můžete dál používat Visual Studio App Center, dokud ho úplně vyřadíte, existuje několik doporučených alternativ, na které můžete zvážit migraci.

Přečtěte si další informace o časových osách a alternativách podpory.

Sada App Center SDK používá modulární architekturu, takže můžete používat libovolnou nebo všechny služby.

Začněme nastavením sady App Center React Native SDK ve vaší aplikaci tak, aby používala App Center Analytics a Chybové ukončení app center.

1. Požadavky

Než začnete, ujistěte se, že jsou splněny následující požadavky:

  • Používáte projekt React Native, který běží React Native 0.34 nebo novější.
  • Cílíte na zařízení se systémem Android verze 5.0, rozhraní API úrovně 21 nebo novější nebo iOS verze 9.0 nebo novější.
  • Nepoužíváte žádnou jinou knihovnu, která poskytuje funkci zasílání zpráv o chybách v iOSu.
  • Pro iOS vyžaduje výchozí způsob použití sady SDK CocoaPods. (Pokud jste cocoaPods nenainstalovali, postupujte podle Začínáme CocoaPods. Sadu SDK je však možné propojit ručně.

2. Vytvořte aplikaci na portálu App Center a získejte tajný kód aplikace.

Pokud jste už aplikaci vytvořili na portálu App Center, můžete tento krok přeskočit.

  1. Přejděte na appcenter.ms.
  2. Zaregistrujte se nebo se přihlaste a v pravém horním rohu portálu stiskněte modré tlačítko Přidat novou a v rozevírací nabídce vyberte Přidat novou aplikaci .
  3. Zadejte název a volitelný popis aplikace.
  4. Vyberte příslušný operační systém (Android nebo iOS) a jako platformu vyberte React Native.
  5. V pravém dolním rohu klikněte na tlačítko Přidat novou aplikaci.

Po vytvoření aplikace můžete získat její tajný kód aplikace na stránce Nastavení na portálu App Center. V pravém horním rohu stránky Nastavení klikněte na tři svislé tečky a výběrem Copy app secret získáte tajný kód aplikace.

3. Přidání modulů sady App Center SDK

Výchozí integrace sady SDK používá CocoaPods pro iOS. Pokud v aplikaci CocoaPods nepoužíváte, musíte sadu React Native SDK pro iOS integrovat ručně.

Otevřete Terminál, přejděte do kořenového adresáře projektu React Native a zadejte následující řádek pro přidání App Center Analytics a chybových ukončení do aplikace:

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

Pokud dáváte přednost yarn před npm, nainstalujte App Center pomocí následujícího příkazu:

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

Sada App Center SDK používá modulární přístup, kdy stačí přidat moduly pro služby App Center, které chcete použít. appcenter-analytics a appcenter-crashes mají smysl přidat téměř do každé aplikace, protože poskytují hodnotu bez nutnosti dalšího nastavení. appcenter poskytuje rozhraní API App Center pro obecné účely, která jsou užitečná pro více služeb.

3.1 Automatická integrace sady SDK pro React Native 0.60

Použití sady App Center SDK s React Native můžete provést dvěma způsoby: konfigurací AppCenter-Config.plist sady pro iOS a appcenter-config.json pro Android nebo voláním nativních spouštěcích funkcí, které jako argument přijímají appSecret.

3.1.1 Integrace React Native iOS

Spuštěním pod install --repo-update příkazu z adresáře iOS nainstalujte závislosti CocoaPods.

3.1.1.1 Nastavení možnosti AppSecret 1: Konfigurace AppCenter-Config.plist

  1. Vytvořte nový soubor s názvem AppCenter-Config.plist s následujícím obsahem a nahraďte {APP_SECRET_VALUE} hodnotou tajného kódu aplikace. Nezapomeňte přidat tento soubor do projektu Xcode (klikněte pravým tlačítkem na aplikaci v Xcode a klikněte na Přidat soubory do <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. Upravte soubor AppDelegate.m nebo AppDelegate.mm aplikace tak, aby zahrnoval kód pro spuštění sady SDK.

    • Přidejte následující importy:
    #import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
    • Přidejte do metody tyto řádky application:didFinishLaunchingWithOptions: :
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 Nastavení možnosti AppSecret 2: Konfigurace v kódu

Upravte soubor AppDelegate.m nebo AppDelegate.mm aplikace tak, aby zahrnoval kód pro spuštění sady SDK.

  • Přidejte následující importy:
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
  • Přidejte do metody tyto řádky application:didFinishLaunchingWithOptions: :
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Integrace React Native Androidu

Upravte res/values/strings.xml aplikace tak, aby zahrnovaly následující řádky:

<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 Nastavení možnosti AppSecret 1: Konfigurace appcenter-config.json

Vytvořte nový soubor s názvem appcenter-config.json s android/app/src/main/assets/ následujícím obsahem a nahraďte {APP_SECRET_VALUE} hodnotou tajného kódu aplikace.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Poznámka: Pokud složka s názvem assets neexistuje, měla by se vytvořit v části project_root/android/app/src/main/assets.

3.1.2.2 Nastavení možnosti AppSecret 2: Konfigurace v kódu

Přidejte následující řádek do třídy hlavní aktivity vaší aplikace onCreate-callback, abyste mohli používat App Center Analytics a 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 Automatická integrace sady SDK pro React Native nižší než 0,60

Poznámka

Pokud máte moduly React propojené pomocí relativní cesty uvnitř souboru Podfile, ale nejsou odkazované v projektu, odkazovací skript selže, protože propojí App Center pomocí statických verzí podů. Pokud jste už skript propojení spustili, musíte postupovat podle kroků v části řešení potíží s React Native, nebo ho propojit sami.

  1. Propojte moduly plug-in s aplikací React Native pomocí příkazu react-native link.

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

    V případě iOS se pokusí stáhnout sadu App Center SDK pro iOS a macOS z CocoaPods, pokud se zobrazí chyba typu:

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

    Spusťte následující příkaz:

    pod repo update

    A pak zkuste znovu spustit react-native link.

    Poznámka

    Sada App Center SDK během procesu propojení nenastavuje pro moduly App Center automaticky napodobení. Pokud ve své aplikaci používáte testovací architekturu Jest a při spouštění testů pomocí Jestu dochází k chybám způsobeným sadou App Center SDK, přidejte do oddílu jest v souboru package.json následující položky (zahrnují pouze používané moduly):

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

    Poznámka

    Bez ohledu na to, jestli je zpracování chyb automatické nebo aktivované metodami JavaScriptu, se chybové ukončení vždy zpracují po restartování aplikace. V době, kdy dojde k chybovému ukončení aplikace, není možné zpracovat chybové ukončení.

  2. Upravte hodnoty projektu android/app/src/main/assets/appcenter-config.json a nahraďte hodnotu zástupného symbolu YOUR_APP_SECRET tajným kódem aplikace vašeho projektu App Center.

  3. Upravte soubor projektu ios/{YourAppName}/AppCenter-Config.plist a nahraďte hodnotu zástupného symbolu YOUR_APP_SECRET tajným kódem aplikace vašeho projektu App Center. Pokud už AppCenter-Config.plist existuje, ale není součástí projektu Xcode, musíte ho do projektu Xcode přidat ručně (klikněte pravým tlačítkem na aplikaci v XCode a klikněte na Přidat soubory do <názvu> aplikace...).

Tuto integraci proveďte, pokud nechcete používat CocoaPods. Důrazně doporučujeme integrovat sadu SDK prostřednictvím CocoaPods, jak je popsáno výše. Nativní sadu SDK pro iOS je však možné integrovat také ručně.

Poznámka

Nejnovější sada App Center React Native SDK nemusí nutně záviset na nejnovější sadě App Center SDK pro iOS, protože sada SDK pro iOS se aktualizuje a vydává před React Native.

V důsledku toho musíte vědět, na jaké verzi sady SDK pro iOS React Native SDK závisí.

  1. Stáhněte si sadu App Center SDK pro rozhraní React Native poskytovanou jako soubor ZIP a rozbalte ho.

  2. Zobrazí se složka s názvem AppCenterReactNativeShared, která obsahuje jednu architekturu pro požadovaný most React Native iOS.

  3. Stáhněte si odpovídající sadu App Center SDK pro iOS poskytovanou jako soubor zip a rozbalte ho.

  4. Zobrazí se složka s názvem AppCenter-SDK-Apple/iOS , která obsahuje různé architektury pro každou službu App Center. V projektu se vyžaduje architektura s názvem AppCenter , protože obsahuje kód, který se sdílí mezi různými moduly.

  5. [Volitelné] Vytvořte podadresář pro knihovny třetích stran.

    • Osvědčeným postupem je, že knihovny třetích stran se obvykle nacházejí v podadresáři (často se mu říká Dodavatel), takže pokud nemáte projekt uspořádaný s podadresářem knihoven, vytvořte teď podadresář Vendor (v adresáři ios vašeho projektu).
    • Vytvořte v projektu Xcode skupinu s názvem Dodavatel , která bude napodobovat strukturu souborů na disku.

  6. Otevřete Finder a zkopírujte dříve rozbalené složky AppCenter-SDK-Apple/iOS a AppCenterReactNativeShared do složky projektu v umístění, ve kterém se má nacházet.

  7. Přidejte rozhraní SDK do projektu v Xcode:

    • Ujistěte se, že je viditelný Navigátor projektu (⌘+1).
    • Přetáhněte soubory AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework a AppCenterReactNativeShared.framework z Finderu (v umístění z předchozího kroku) do Navigátoru projektu Xcode. Ke spuštění sady SDK se vyžadují soubory AppCenter.framework a AppCenterReactNativeShared.framework , ujistěte se, že jsou přidané do projektu, jinak ostatní moduly nebudou fungovat a vaše aplikace se nebude kompilovat.
    • Zobrazí se dialogové okno, zkontrolujte, jestli je zaškrtnutý cíl aplikace, a pak klikněte na Dokončit.

  8. Propojení projektů modulů plug-in appcenter React Native s projektem vaší aplikace:

    • Ujistěte se, že je viditelný Navigátor projektu (⌘+1).

    • Pro každý modul plug-in AppCenter React Native přejděte do složky obsahující zdrojový kód. Cesty budou

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

    • .xcodeproj Přetáhněte soubory z Finderu do Navigátoru projektu Xcode. Obvykle se jedná o skupinu Knihovny .

  9. Propojení knihoven pro moduly plug-in AppCenter React Native. Otevřete nastavení projektu a na kartě Obecné v části Propojené architektury a knihovny přidejte nové položky odkazující na cílové knihovny přidané v předchozím kroku:

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

  10. Upravte cesty hledání hlaviček a vyhledejte záhlaví z projektů modulů plug-in appcenter React Native. Otevřete nastavení projektu a na kartě Nastavení sestavení v části Cesty hledání hlaviček přidejte nová umístění pro soubory hlaviček:

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

  1. Upravte soubor AppDelegate.m nebo AppDelegate.mm aplikace tak, aby obsahoval kód pro spuštění sady SDK:

    • Přidejte následující importy:
    #import <AppCenterReactNative/AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    • Přidání těchto řádků do application:didFinishLaunchingWithOptions: metody
    [AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

  2. Vytvořte nový soubor s názvem AppCenter-Config.plist s následujícím obsahem a nahraďte {APP_SECRET_VALUE} hodnotou tajného kódu aplikace. Nezapomeňte přidat tento soubor do projektu XCode (klikněte pravým tlačítkem na aplikaci v XCode a klikněte na Přidat soubory do <názvu> aplikace...).

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

Poznámka

Další dva kroky jsou určené jenom pro aplikace, které používají React Native 0.60 a vyšší.

  1. Zakažte automatické propojení pro React Native 0.60 a novější:

    • Ve složce node_modules v každém balíčku App Center otevřete react-native.config.js a nastavte dependency.platforms.ios na null:
    module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};

  2. Upravte cesty hledání hlaviček a vyhledejte záhlaví React Native z projektů React Native modulů plug-in App Center:

    • Ujistěte se, že je viditelný Navigátor projektu (⌘+1).
    • Pro každý projekt modulů plug-in appCenter React Native, který jste přidali do skupiny Knihovny v kroku 8:
      • Vyberte projekt a na kartě Nastavení sestavení v části Cesty hledání hlaviček přidejte nová umístění pro soubory hlaviček s recursive možností: ${SRCROOT}/../../../ios/Pods/Headers

Kroky integrace bez react-native link příkazu

  1. Otevřete soubor android/settings.gradle a vložte následující řádky. Zahrňte do projektu požadované závislosti. Každý modul SADY SDK je potřeba přidat jako samostatnou závislost v této části. Pokud chcete použít App Center Analytics a chybové ukončení, přidejte následující řádky:

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

Poznámka

Z důvodu ukončení podpory jCenter se všechna naše sestavení přesunula do centrálního úložiště Mavenu. Postupujte podle tohoto průvodce migrací z jCenter na Maven Central.

  1. Otevřete soubor build.gradle na úrovni aplikace projektu (android/app/build.gradle) a do dependencies oddílu přidejte následující řádky:

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

  2. Upravte soubor MainApplication.java aplikace tak, aby obsahoval kód pro spuštění sady SDK:

    • Přidání těchto řádků do oddílu importu
    import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
    • Přidání balíčků AppCenter do List<ReactPackage> getPackages() metody
    @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. Otevřete souborstrings.xml (android/app/src/main/res/values) a přidejte do <resources></resources> značek následující řádky:

    <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. Vytvořte nový soubor s názvem appcenter-config.json s android/app/src/main/assets/ následujícím obsahem a nahraďte APP_SECRET_VALUE hodnotou tajného kódu aplikace.

    {
    "app_secret": "APP_SECRET_VALUE"
}

Upozornění

Tajný kód aplikace se nedoporučuje vkládat do zdrojového kódu.

3.5 Pokud používáte automatické zálohování, abyste se vyhnuli získání nesprávných informací o zařízení, postupujte podle následujících kroků:

Poznámka

Aplikace, které cílí na Android 6.0 (úroveň rozhraní API 23) nebo vyšší, mají automatické zálohování povolené automaticky. 

Poznámka

Pokud už vlastní soubor s pravidlem zálohování máte, přepněte na třetí krok.

a. Vytvořte souborappcenter_backup_rule.xml ve složce android/app/src/main/res/xml .

b. Otevřete souborAndroidManifest.xml projektu. android:fullBackupContent Přidejte atribut do elementu<application>. Měl by odkazovat na soubor prostředkuappcenter_backup_rule.xml .

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Do souboruappcenter_backup_rule.xml přidejte následující pravidla zálohování:

<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. Spuštění sady SDK

Teď můžete aplikaci sestavit a spustit buď z příkazového řádku, nebo z Xcode/Android Studia.

4.1 Sestavení a spuštění aplikace z příkazového řádku

Aplikaci pro iOS můžete sestavit a spustit pomocí následujícího příkazu:

react-native run-ios

Tip

Můžete ho spustit na simulátoru iOS nebo zařízení s iOSem zadáním názvu zařízení s iOSem v react-native run-ios --device "myDeviceName"souboru .

Aplikaci pro Android můžete sestavit a spustit pomocí následujícího příkazu:

react-native run-android

Tip

Můžete ho spustit v emulátoru androidu nebo zařízení s Androidem zadáním ID zařízení v react-native run-android --deviceId "myDeviceId" (deviceId z adb devices příkazu).

4.2 Sestavení a spuštění aplikace z Xcode nebo Android Studia

V případě iOSu ios/{appname}.xcworkspace otevřete projekt nebo ios/{appname}.xcodeproj soubor v Xcode a sestavte ho odtud.

Poznámka

Pokud jste App Center propojili automaticky přes react-native link (jako v kroku 3.1), měli byste soubor projektu ios/{appname}.xcworkspace otevřít v Xcode. Vzhledem k tomu, že závislosti CocoaPods app Center fungují jenom s xcworkspace , xcodeproja ios/{appname}.xcodeproj soubor nebude mít propojené závislosti CocoaPods app Center.

Pro Android naimportujte svůj projekt pro Android v Android Studiu a sestavte ho odtud.

Na portálu, který sada SDK shromažďuje automaticky, můžete vizualizovat data analýzy a chybových ukončení. Nevyžaduje se žádné další nastavení. V části Analýza a chybové ukončení najdete příručky a návody k rozhraním API, kde se dozvíte, co App Center dokáže.