Mulai menggunakan React Native
Penting
Visual Studio App Center dijadwalkan untuk dihentikan pada 31 Maret 2025. Meskipun Anda dapat terus menggunakan Visual Studio App Center hingga sepenuhnya dihentikan, ada beberapa alternatif yang direkomendasikan yang dapat Anda pertimbangkan untuk bermigrasi.
Pelajari selengkapnya tentang garis waktu dukungan dan alternatif.
App Center SDK menggunakan arsitektur modular sehingga Anda dapat menggunakan salah satu atau semua layanan.
Mari kita mulai menyiapkan App Center React Native SDK di aplikasi Anda untuk menggunakan App Center Analytics dan App Center Crash.
1. Prasyarat
Sebelum memulai, pastikan prasyarat berikut terpenuhi:
- Anda menggunakan proyek React Native yang berjalan React Native 0.34 atau yang lebih baru.
- Anda menargetkan perangkat yang berjalan di Android Versi 5.0/API level 21 atau yang lebih baru, atau iOS versi 9.0 atau yang lebih baru.
- Anda tidak menggunakan pustaka lain yang menyediakan fungsionalitas Pelaporan Crash di iOS.
- Untuk iOS, cara default untuk menggunakan SDK memerlukan CocoaPods. (Jika Anda belum menginstal CocoaPods, ikuti CocoaPods Memulai untuk melakukannya). Meskipun demikian, SDK dapat ditautkan secara manual.
2. Buat aplikasi Anda di Portal App Center untuk mendapatkan Rahasia Aplikasi
Jika sudah membuat aplikasi di portal App Center, Anda dapat melewati langkah ini.
- Pergilah ke appcenter.ms.
- Daftar atau masuk dan tekan tombol biru di sudut kanan atas portal yang bertuliskan Tambahkan baru dan pilih Tambahkan aplikasi baru dari menu dropdown.
- Masukkan nama dan deskripsi opsional untuk aplikasi Anda.
- Pilih OS yang sesuai (Android atau iOS) dan pilih React Native sebagai platform.
- Tekan tombol di kanan bawah yang bertuliskan Tambahkan aplikasi baru.
Setelah membuat aplikasi, Anda dapat memperoleh Rahasia Aplikasi di halaman Pengaturan di Portal App Center. Di sudut kanan atas halaman Pengaturan , klik tiga titik vertikal dan pilih Copy app secret
untuk mendapatkan Rahasia Aplikasi Anda.
3. Tambahkan modul App Center SDK
Integrasi default SDK menggunakan CocoaPods untuk iOS. Jika Anda tidak menggunakan CocoaPods di aplikasi, Anda perlu mengintegrasikan SDK React Native secara manual untuk app iOS Anda.
Buka Terminal dan navigasi ke akar proyek React Native Anda, lalu masukkan baris berikut untuk menambahkan App Center Analytics dan Crash ke aplikasi:
npm install appcenter appcenter-analytics appcenter-crashes --save-exact
Jika Anda lebih suka yarn
daripada npm
, gunakan perintah berikut untuk menginstal App Center:
yarn add appcenter appcenter-analytics appcenter-crashes --exact
App Center SDK menggunakan pendekatan modular, di mana Anda hanya menambahkan modul untuk layanan App Center yang ingin Anda gunakan. appcenter-analytics dan appcenter-crashes masuk akal untuk ditambahkan ke hampir setiap aplikasi, karena memberikan nilai tanpa memerlukan penyiapan tambahan. appcenter menyediakan API App Center tujuan umum, berguna untuk beberapa layanan.
3.1 Mengintegrasikan SDK secara otomatis untuk React Native 0,60
Menggunakan App Center SDK dengan React Native dapat dilakukan dengan dua cara: Mengonfigurasi AppCenter-Config.plist
untuk iOS dan appcenter-config.json untuk Android atau dengan memanggil fungsi mulai asli yang menerima appSecret sebagai argumen.
3.1.1 Mengintegrasikan React Native iOS
Jalankan pod install --repo-update
dari direktori iOS untuk menginstal dependensi CocoaPods.
3.1.1.1 Pengaturan AppSecret Opsi 1: Mengonfigurasi AppCenter-Config.plist
Buat file baru dengan nama
AppCenter-Config.plist
dengan konten berikut dan ganti{APP_SECRET_VALUE}
dengan nilai rahasia aplikasi Anda. Jangan lupa untuk menambahkan file ini ke proyek Xcode (klik kanan aplikasi di Xcode dan klik Tambahkan file ke <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>
Ubah file AppDelegate.m atau AppDelegate.mm aplikasi untuk menyertakan kode untuk memulai SDK.
- Tambahkan impor berikut:
#import <AppCenterReactNative.h> #import <AppCenterReactNativeAnalytics.h> #import <AppCenterReactNativeCrashes.h>
- Tambahkan baris ini ke
application:didFinishLaunchingWithOptions:
metode :
[AppCenterReactNative register]; [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true]; [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.1.2 Mengatur AppSecret Opsi 2: Mengonfigurasi dalam kode
Ubah file AppDelegate.m atau AppDelegate.mm aplikasi untuk menyertakan kode untuk memulai SDK.
- Tambahkan impor berikut:
#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>
- Tambahkan baris ini ke
application:didFinishLaunchingWithOptions:
metode :
[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];
3.1.2 Mengintegrasikan React Native Android
Ubah res/values/strings.xml aplikasi untuk menyertakan baris berikut:
<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 Mengatur AppSecret Opsi 1: Mengonfigurasi appcenter-config.json
Buat file baru dengan nama appcenter-config.json dengan android/app/src/main/assets/
konten berikut dan ganti {APP_SECRET_VALUE}
dengan nilai rahasia aplikasi Anda.
{
"app_secret": "{APP_SECRET_VALUE}"
}
Catatan: Jika folder bernama aset tidak ada, folder tersebut harus dibuat di bawah "project_root/android/app/src/main/assets".
3.1.2.2 Mengatur AppSecret Opsi 2: Mengonfigurasi dalam kode
Tambahkan baris berikut di dalam kelas aktivitas utama aplikasi Anda onCreate-callback untuk menggunakan App Center Analytics dan App Center Crash:
AppCenter.start(getApplication(), "{Your App Secret}", Analytics.class, Crashes.class);
AppCenter.start(application, "{Your App Secret}", Analytics::class.java, Crashes::class.java)
3.2 Mengintegrasikan SDK secara otomatis untuk React Native lebih rendah dari 0,60
Catatan
Jika Anda memiliki modul React yang ditautkan menggunakan jalur relatif di dalam Podfile tetapi tidak direferensikan dalam proyek, skrip penautan akan gagal karena menautkan App Center menggunakan versi pod statis. Anda harus mengikuti langkah-langkah dari bagian pemecahan masalah React Native jika Anda sudah menjalankan skrip penautan, atau menautkannya sendiri
Tautkan plugin ke aplikasi React Native dengan menggunakan perintah tautan react-native.
react-native link appcenter react-native link appcenter-analytics react-native link appcenter-crashes
Untuk iOS, ia akan mencoba mengunduh App Center SDK untuk iOS dan macOS dari CocoaPods, jika Anda melihat kesalahan seperti:
Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version})
Jalankan perintah berikut:
pod repo update
Lalu coba lagi menjalankan
react-native link
.Catatan
App Center SDK tidak menyiapkan tiruan secara otomatis untuk modul App Center selama proses penautan. Jika Anda menggunakan kerangka kerja pengujian Jest dalam aplikasi Anda dan mengalami kesalahan yang disebabkan oleh App Center SDK saat menjalankan pengujian dengan Jest, tambahkan yang berikut ini ke bagian jest file package.json (sertakan hanya modul yang digunakan):
"setupFiles": [ "<rootDir>/node_modules/appcenter/test/AppCenterMock.js", "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js", "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js", ]
Catatan
Apakah pemrosesan crash bersifat otomatis atau dipicu oleh metode Javascript, crash selalu diproses setelah memulai ulang aplikasi. Crash tidak dapat diproses pada saat aplikasi mengalami crash.
Edit proyek
android/app/src/main/assets/appcenter-config.json
dan gantiYOUR_APP_SECRET
nilai tempat penampung dengan rahasia aplikasi proyek App Center Anda.Edit file proyek
ios/{YourAppName}/AppCenter-Config.plist
, dan gantiYOUR_APP_SECRET
nilai tempat penampung dengan rahasia aplikasi proyek App Center Anda. Jika AppCenter-Config.plist sudah ada tetapi bukan bagian dari proyek Xcode, Anda harus menambahkannya ke proyek Xcode secara manual (klik kanan aplikasi di XCode dan klik Tambahkan file ke <Nama> Aplikasi...).
3.3 [hanya iOS] Integrasikan SDK secara manual untuk React Native tanpa tautan react-native atau CocoaPods
Lakukan integrasi ini, jika Anda tidak ingin menggunakan CocoaPods. Kami sangat menyarankan untuk mengintegrasikan SDK melalui CocoaPods seperti yang dijelaskan di atas. Meskipun demikian, dimungkinkan juga untuk mengintegrasikan SDK asli iOS secara manual.
Catatan
App Center terbaru React Native SDK tidak selalu bergantung pada App Center iOS SDK terbaru, karena iOS SDK diperbarui dan dirilis sebelum React Native.
Konsekuensinya adalah Anda harus mengetahui versi iOS SDK mana yang bergantung pada SDK React Native.
Unduh App Center SDK untuk kerangka kerja React Native yang disediakan sebagai file zip dan unzip.
Anda akan melihat folder bernama AppCenterReactNativeShared yang berisi satu kerangka kerja untuk penghubung iOS React Native yang diperlukan.
Unduh App Center SDK yang sesuai untuk kerangka kerja iOS yang disediakan sebagai file zip dan unzip.
Anda akan melihat folder bernama AppCenter-SDK-Apple/iOS yang berisi kerangka kerja yang berbeda untuk setiap layanan App Center. Kerangka kerja yang disebut
AppCenter
diperlukan dalam proyek karena berisi kode yang dibagikan antara modul yang berbeda.[Opsional] Buat subdirektori untuk pustaka pihak ketiga.
- Sebagai praktik terbaik, pustaka pihak ketiga biasanya berada di dalam subdirektori (sering disebut Vendor), jadi jika Anda tidak mengatur proyek Anda dengan subdirektori untuk pustaka, buat subdirektori Vendor sekarang (di bawah direktori ios proyek Anda).
- Buat grup bernama Vendor di dalam proyek Xcode Anda untuk meniru struktur file Anda di disk.
Buka Finder dan salin folder AppCenter-SDK-Apple/iOS dan AppCenterReactNativeShared yang sebelumnya belum di-zip ke folder proyek Anda di lokasi tempat Anda ingin berada.
Tambahkan kerangka kerja SDK ke proyek di Xcode:
- Pastikan Navigator Proyek terlihat (⌘+1).
- Seret dan letakkan file AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework , dan AppCenterReactNativeShared.framework dari Finder (di lokasi dari langkah sebelumnya) ke Project Navigator Xcode. File AppCenter.framework dan AppCenterReactNativeShared.framework diperlukan untuk memulai SDK, pastikan file tersebut ditambahkan ke proyek Anda, jika tidak, modul lain tidak akan berfungsi dan aplikasi Anda tidak akan dikompilasi.
- Dialog akan muncul, pastikan target aplikasi Anda dicentang, lalu klik Selesai.
Tautkan proyek plugin AppCenter React Native ke proyek aplikasi Anda:
Pastikan Navigator Proyek terlihat (⌘+1).
Untuk setiap plugin React Native AppCenter, navigasikan ke folder yang berisi kode sumber. Jalur masing-masing akan
/node_modules/appcenter/ios
/node_modules/appcenter-analytics/ios
/node_modules/appcenter-crashes/ios
Seret dan letakkan
.xcodeproj
file dari Finder ke Project Navigator Xcode. Biasanya di bawah grup Pustaka .
Tautkan pustaka untuk plugin AppCenter React Native. Buka pengaturan proyek Anda dan di bawah tab Umum di bagian Kerangka Kerja dan Pustaka Tertaut tambahkan item baru yang merujuk pustaka target yang ditambahkan pada langkah sebelumnya:
libAppCenterReactNative.a
libAppCenterReactNativeAnalytics.a
libAppCenterReactNativeCrashes.a
Ubah Jalur Pencarian Header untuk menemukan header dari proyek plugin AppCenter React Native. Buka pengaturan proyek Anda dan di bawah tab Pengaturan Build di bagian Jalur Pencarian Header tambahkan lokasi baru untuk file header:
$(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
$(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
$(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes
Ubah file AppDelegate.m atau AppDelegate.mm aplikasi untuk menyertakan kode untuk memulai SDK:
- Tambahkan impor berikut:
#import <AppCenterReactNative/AppCenterReactNative.h> #import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h> #import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
- Tambahkan baris ini ke
application:didFinishLaunchingWithOptions:
metode
[AppCenterReactNative register]; [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true]; [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
Buat file baru dengan nama
AppCenter-Config.plist
dengan konten berikut dan ganti{APP_SECRET_VALUE}
dengan nilai rahasia aplikasi Anda. Jangan lupa untuk menambahkan file ini ke proyek XCode (klik kanan aplikasi di XCode dan klik Tambahkan file ke <Nama> Aplikasi...).<?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>
Catatan
Dua langkah berikutnya hanya untuk aplikasi yang menggunakan React Native 0,60 ke atas.
Nonaktifkan autolinking untuk React Native 0,60 ke atas:
- Di dalam folder node_modules di setiap paket App Center terbuka react-native.config.js dan atur
dependency.platforms.ios
kenull
:
module.exports = { dependency: { platforms: { ios: null, ... } } };
- Di dalam folder node_modules di setiap paket App Center terbuka react-native.config.js dan atur
Ubah Jalur Pencarian Header untuk menemukan header React Native dari App Center React Native proyek plugin:
- Pastikan Navigator Proyek terlihat (⌘+1).
- Untuk setiap proyek plugin AppCenter React Native yang telah Anda tambahkan ke grup Pustaka di langkah 8:
- Pilih proyek dan di bawah tab Pengaturan Build di bagian Jalur Pencarian Header tambahkan lokasi baru untuk file header dengan
recursive
opsi:${SRCROOT}/../../../ios/Pods/Headers
- Pilih proyek dan di bawah tab Pengaturan Build di bagian Jalur Pencarian Header tambahkan lokasi baru untuk file header dengan
3.4 [Khusus Android] Integrasikan SDK secara manual untuk React Native lebih rendah dari 0,60 tanpa tautan react-native
Langkah-langkah integrasi tanpa react-native link
perintah .
Buka file android/settings.gradle dan sisipkan baris berikut. Sertakan dependensi yang Anda inginkan dalam proyek Anda. Setiap modul SDK perlu ditambahkan sebagai dependensi terpisah di bagian ini. Jika Anda ingin menggunakan Analitik dan Crash App Center, tambahkan baris berikut:
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')
Catatan
Karena penghentian dukungan jCenter , semua assembly kami dipindahkan ke repositori Maven Central. Ikuti panduan ini tentang migrasi dari jCenter ke Maven Central.
Buka file build.gradle tingkat aplikasi proyek (
android/app/build.gradle
) dan tambahkan baris berikut ke dalamdependencies
bagian:dependencies { implementation project(':appcenter-crashes') implementation project(':appcenter-analytics') implementation project(':appcenter') ... }
Ubah file MainApplication.java aplikasi untuk menyertakan kode untuk memulai SDK:
- Tambahkan baris ini ke bagian impor
import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage; import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage; import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
- Menambahkan paket AppCenter ke
List<ReactPackage> getPackages()
metode
@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) ); }
Buka file strings.xml (
android/app/src/main/res/values
) dan tambahkan baris berikut di dalam<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>
Buat file baru dengan nama appcenter-config.json dengan
android/app/src/main/assets/
konten berikut dan gantiAPP_SECRET_VALUE
dengan nilai rahasia aplikasi Anda.{ "app_secret": "APP_SECRET_VALUE" }
Peringatan
Tidak disarankan untuk menyematkan Rahasia Aplikasi Anda dalam kode sumber.
3.5 Jika Anda menggunakan pencadangan otomatis untuk menghindari mendapatkan informasi yang salah tentang perangkat, ikuti langkah-langkah berikutnya:
Catatan
Aplikasi yang menargetkan Android 6.0 (API level 23) atau yang lebih tinggi mengaktifkan Auto Backup secara otomatis.
Catatan
Jika Anda sudah memiliki file kustom dengan aturan cadangan, beralihlah ke langkah ketiga.
a. Buat file appcenter_backup_rule.xml di folder android/app/src/main/res/xml .
b. Buka file AndroidManifest.xml proyek. android:fullBackupContent
Tambahkan atribut ke <application>
elemen . Ini harus menunjuk ke file sumber daya appcenter_backup_rule.xml .
android:fullBackupContent="@xml/appcenter_backup_rule"
c. Tambahkan aturan cadangan berikut ke 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. Mulai SDK
Sekarang Anda dapat membuat dan meluncurkan aplikasi baik dari baris perintah atau Xcode/Android Studio.
4.1 Membangun dan menjalankan aplikasi Anda dari baris perintah
Anda dapat membuat dan meluncurkan aplikasi iOS dengan perintah berikut:
react-native run-ios
Tip
Anda dapat meluncurkannya di simulator iOS atau perangkat iOS dengan menentukan nama perangkat iOS di react-native run-ios --device "myDeviceName"
.
Anda dapat membuat dan meluncurkan aplikasi Android dengan perintah berikut:
react-native run-android
Tip
Anda dapat meluncurkannya di emulator android atau perangkat android dengan menentukan id perangkat di react-native run-android --deviceId "myDeviceId"
(deviceId
dari adb devices
perintah).
4.2 Membangun dan menjalankan aplikasi Anda dari Xcode atau Android Studio
Untuk iOS, buka file atau ios/{appname}.xcodeproj
proyek ios/{appname}.xcworkspace
Anda di Xcode dan buat dari sana.
Catatan
Jika Anda menautkan App Center secara otomatis melalui react-native link
(seperti pada langkah 3.1), Anda harus membuka file proyek ios/{appname}.xcworkspace
di Xcode. Karena dependensi CocoaPods App Center hanya berfungsi dengan xcworkspace
bukan xcodeproj
, dan ios/{appname}.xcodeproj
file tidak akan memiliki dependensi CocoaPods App Center yang ditautkan.
Untuk Android, impor proyek android Anda di Android Studio dan buat dari sana.
Anda sudah siap untuk memvisualisasikan data Analytics dan Crash di portal yang dikumpulkan SDK secara otomatis. Tidak diperlukan penyiapan tambahan. Lihat bagian Analitik dan Crash untuk panduan dan panduan API untuk mempelajari apa yang dapat dilakukan App Center.