Mulai menggunakan React Native

Artikel
04/03/2023

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 ganti YOUR_APP_SECRET nilai tempat penampung dengan rahasia aplikasi proyek App Center Anda.
Edit file proyek ios/{YourAppName}/AppCenter-Config.plist , dan ganti YOUR_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 ke null:
```
module.exports = {
  dependency: {
    platforms: {
      ios: null,
      ...
    }
  }
};
```
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

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 dalam dependencies 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 ganti APP_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.

Mulai menggunakan React Native

1. Prasyarat

2. Buat aplikasi Anda di Portal App Center untuk mendapatkan Rahasia Aplikasi

3. Tambahkan modul App Center SDK

3.1 Mengintegrasikan SDK secara otomatis untuk React Native 0,60

3.1.1 Mengintegrasikan React Native iOS

3.1.1.1 Pengaturan AppSecret Opsi 1: Mengonfigurasi AppCenter-Config.plist

3.1.1.2 Mengatur AppSecret Opsi 2: Mengonfigurasi dalam kode

3.1.2 Mengintegrasikan React Native Android

3.1.2.1 Mengatur AppSecret Opsi 1: Mengonfigurasi appcenter-config.json

3.1.2.2 Mengatur AppSecret Opsi 2: Mengonfigurasi dalam kode

3.2 Mengintegrasikan SDK secara otomatis untuk React Native lebih rendah dari 0,60

3.3 [hanya iOS] Integrasikan SDK secara manual untuk React Native tanpa tautan react-native atau CocoaPods

3.4 [Khusus Android] Integrasikan SDK secara manual untuk React Native lebih rendah dari 0,60 tanpa tautan react-native

3.5 Jika Anda menggunakan pencadangan otomatis untuk menghindari mendapatkan informasi yang salah tentang perangkat, ikuti langkah-langkah berikutnya:

4. Mulai SDK

4.1 Membangun dan menjalankan aplikasi Anda dari baris perintah

4.2 Membangun dan menjalankan aplikasi Anda dari Xcode atau Android Studio

Sumber Daya Tambahan:

3.1.1.1 Pengaturan AppSecret Opsi 1: Mengonfigurasi `AppCenter-Config.plist`