Začínáme s React Native
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.
- Přejděte na appcenter.ms.
- 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 .
- Zadejte název a volitelný popis aplikace.
- Vyberte příslušný operační systém (Android nebo iOS) a jako platformu vyberte React Native.
- 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
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>
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.
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í.
Upravte hodnoty projektu
android/app/src/main/assets/appcenter-config.json
a nahraďte hodnotu zástupného symboluYOUR_APP_SECRET
tajným kódem aplikace vašeho projektu App Center.Upravte soubor projektu
ios/{YourAppName}/AppCenter-Config.plist
a nahraďte hodnotu zástupného symboluYOUR_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...).
3.3 [Pouze iOS] Ruční integrace sady SDK pro React Native bez nativního odkazu react nebo CocoaPods
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í.
Stáhněte si sadu App Center SDK pro rozhraní React Native poskytovanou jako soubor ZIP a rozbalte ho.
Zobrazí se složka s názvem AppCenterReactNativeShared, která obsahuje jednu architekturu pro požadovaný most React Native iOS.
Stáhněte si odpovídající sadu App Center SDK pro iOS poskytovanou jako soubor zip a rozbalte ho.
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.[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.
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.
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.
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 .
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
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
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];
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šší.
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
nanull
:
module.exports = { dependency: { platforms: { ios: null, ... } } };
- Ve složce node_modules v každém balíčku App Center otevřete react-native.config.js a nastavte
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
- 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
3.4 [Pouze Android] Ruční integrace sady SDK pro React Native nižší než 0.60 bez nativního odkazu react
Kroky integrace bez react-native link
příkazu
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.
Otevřete soubor build.gradle na úrovni aplikace projektu (
android/app/build.gradle
) a dodependencies
oddílu přidejte následující řádky:dependencies { implementation project(':appcenter-crashes') implementation project(':appcenter-analytics') implementation project(':appcenter') ... }
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) ); }
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>
Vytvořte nový soubor s názvem appcenter-config.json s
android/app/src/main/assets/
následujícím obsahem a nahraďteAPP_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
, xcodeproj
a 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.