Mulai menggunakan SDK Klien React Native

Artikel
06/12/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.

Setelah mengikuti petunjuk "memulai" tujuan umum untuk menyiapkan akun CodePush, Anda dapat mulai mengintegrasikan CodePush di aplikasi React Native dengan menjalankan perintah berikut dari dalam direktori akar aplikasi Anda:

npm install --save react-native-code-push

Seperti halnya semua plugin React Native lainnya, pengalaman integrasi berbeda untuk iOS dan Android, jadi ikuti langkah-langkah penyiapan tergantung pada platform yang Anda targetkan untuk aplikasi Anda. Perhatikan, jika Anda menargetkan kedua platform, disarankan untuk membuat aplikasi CodePush terpisah untuk setiap platform.

Jika Anda ingin melihat bagaimana proyek lain telah terintegrasi dengan CodePush, lihat contoh aplikasi, yang disediakan oleh komunitas. Selain itu, jika Anda ingin membiasakan diri dengan CodePush + React Native, lihat video memulai yang diproduksi oleh Bilal Budhani dan Deepak Sisodiya.

Penting

Panduan ini mengasumsikan Anda telah menggunakan react-native init perintah untuk menginisialisasi proyek React Native Anda. Pada Maret 2017, perintah create-react-native-app juga dapat digunakan untuk menginisialisasi proyek React Native. Jika menggunakan perintah ini, jalankan npm run eject di direktori beranda proyek Anda untuk mendapatkan proyek yang mirip dengan apa yang react-native init akan dibuat.

Penyiapan iOS

Setelah memiliki plugin CodePush, Anda harus mengintegrasikannya ke dalam proyek Xcode aplikasi React Native Anda dan mengonfigurasinya dengan benar.

Penginstalan dan Konfigurasi Plugin untuk versi React Native 0.60 ke atas (iOS)

Jalankan cd ios && pod install && cd .. untuk menginstal semua dependensi CocoaPods yang diperlukan.
AppDelegate.m Buka file, dan tambahkan pernyataan impor untuk header CodePush:
```
#import <CodePush/CodePush.h>
```
Temukan baris kode berikut, yang mengatur URL sumber untuk bridge untuk rilis produksi:
```
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
```
Ganti dengan baris ini:
```
return [CodePush bundleURL];
```
Perubahan ini mengonfigurasi aplikasi Anda untuk selalu memuat versi terbaru bundel JS aplikasi Anda. Pada peluncuran pertama, ini sesuai dengan file yang dikompilasi dengan aplikasi. Namun, setelah pembaruan didorong melalui CodePush, ini mengembalikan lokasi pembaruan yang terakhir diinstal.

Catatan

Metode ini bundleURL mengasumsikan bundel JS aplikasi Anda diberi nama main.jsbundle. Jika Anda telah mengonfigurasi aplikasi untuk menggunakan nama file yang berbeda, panggil bundleURLForResource: metode (yang mengasumsikan Anda menggunakan ekstensi) atau bundleURLForResource:withExtension: metode sebagai gantinya, untuk menimpa perilaku default tersebut.jsbundle.

Biasanya, Anda hanya ingin menggunakan CodePush untuk menyelesaikan lokasi bundel JS Anda dalam build rilis. Sebaiknya gunakan DEBUG makro pra-prosesor untuk beralih secara dinamis antara menggunakan server packager dan CodePush, tergantung pada apakah Anda menelusuri kesalahan atau tidak. Ini membuatnya jauh lebih mudah untuk memastikan Anda mendapatkan perilaku yang tepat yang Anda inginkan dalam produksi, sambil tetap menggunakan Chrome Dev Tools, muat ulang langsung, dll. pada waktu debug.

Metode sourceURLForBridge Anda akan terlihat seperti ini:
```
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}
```
Tambahkan kunci Penyebaran ke Info.plist: Untuk memberi tahu runtime CodePush penyebaran mana yang harus dikuerinya untuk pembaruan, buka file aplikasi Info.plist Anda dan tambahkan entri baru bernama CodePushDeploymentKey, yang nilainya adalah kunci penyebaran yang ingin Anda konfigurasi aplikasi ini (seperti kunci untuk Staging penyebaran untuk FooBar aplikasi). Anda dapat mengambil nilai ini dengan membuka UI Distribusi aplikasi di dasbor AppCenter Anda atau berjalan appcenter codepush deployment list --app <ownerName>/<appName> -k dengan CodePush CLI ( -k bendera diperlukan karena kunci tidak ditampilkan secara default) dan menyalin nilai Deployment Key kolom yang sesuai dengan penyebaran yang ingin Anda gunakan (lihat di bawah). Menggunakan nama penyebaran (seperti Penahapan) tidak akan berfungsi. "Nama yang mudah diingat" tersebut hanya ditujukan untuk penggunaan manajemen terautentikasi dari CLI, dan bukan untuk konsumsi publik dalam aplikasi Anda.

Untuk secara efektif menggunakan penyebaran Staging dan Production yang dibuat bersama dengan aplikasi CodePush Anda, lihat dokumen pengujian multi-penyebaran di bawah ini sebelum benar-benar memindahkan penggunaan CodePush aplikasi Anda ke produksi.

Catatan

Jika Anda perlu menggunakan penyebaran yang berbeda secara dinamis, Anda juga dapat mengganti kunci penyebaran dalam kode JS menggunakan opsi Code-Push*

Penginstalan Plugin untuk React Native lebih rendah dari 0,60 (iOS)

Untuk mengakomodasi preferensi pengembang sebanyak mungkin, plugin CodePush mendukung penginstalan iOS melalui tiga mekanisme:

RNPM - React Native Package Manager (RNPM) adalah alat luar biasa yang memberikan pengalaman instalasi paling sederhana untuk plugin React Native. Jika Anda sudah menggunakannya, atau Anda ingin menggunakannya, maka kami merekomendasikan pendekatan ini.
CocoaPods - Jika Anda membangun aplikasi iOS asli yang menyematkan React Native ke dalamnya, atau Anda lebih suka menggunakan CocoaPods, sebaiknya gunakan file Podspec yang kami kirim sebagai bagian dari plugin kami.
"Manual" - Jika Anda tidak ingin bergantung pada alat tambahan apa pun atau baik-baik saja dengan beberapa langkah penginstalan tambahan (ini adalah hal satu kali), maka lakukan pendekatan ini.

Penginstalan Plugin (iOS - RNPM)

Pada v0.27 React Native, rnpm link telah digabungkan ke dalam CLI React Native. Jalankan:
```
react-native link react-native-code-push
```
Jika aplikasi Anda menggunakan versi React Native lebih rendah dari v0.27, jalankan perintah berikut:
```
 rnpm link react-native-code-push
```
Catatan

Jika Anda belum menginstal RNPM, Anda dapat melakukannya dengan menjalankan npm i -g rnpm lalu menjalankan perintah di atas. Jika Anda sudah menginstal RNPM, pastikan Anda memiliki v1.9.0+ untuk mendapatkan manfaat dari penginstalan satu langkah ini.
Anda akan dimintai kunci penyebaran yang ingin Anda gunakan. Jika Anda belum memilikinya, Anda dapat mengambil nilai ini dengan menjalankan appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys, atau Anda dapat memilih untuk mengabaikannya (dengan menekan <ENTER>) dan menambahkannya nanti. Untuk memulai, sebaiknya gunakan kunci penyebaran Anda Staging , sehingga Anda dapat menguji CodePush secara end-to-end.

Penginstalan Plugin (iOS - CocoaPods)

Tambahkan dependensi plugin React Native dan CodePush ke AndaPodfile, menunjuk ke jalur tempat NPM telah menginstal modul

# React Native requirements
pod 'React', :path => '../node_modules/react-native', :subspecs => [
   'Core',
   'CxxBridge', # Include this for RN >= 0.47
   'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
   'RCTText',
   'RCTNetwork',
   'RCTWebSocket', # Needed for debugging
   'RCTAnimation', # Needed for FlatList and animations running on native UI thread
   # Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you're using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

# CodePush plugin dependency
pod 'CodePush', :path => '../node_modules/react-native-code-push'

Catatan

Jalur file untuk dependensi harus relatif terhadap lokasi aplikasi Podfile Anda.

Catatan

Pustaka proyek JWT harus versi 3.0.x atau lebih tinggi

Jalankan pod install

Catatan

CodePush .podspec bergantung pada React pod, sehingga untuk memastikan bahwa ia dapat menggunakan versi React Native yang dibuat dengan benar oleh aplikasi Anda, pastikan untuk menentukan React dependensi di aplikasi Podfile Anda seperti yang dijelaskan dalam dokumentasi integrasi React Native.

Penginstalan Plugin (iOS - Manual)

Buka proyek Xcode aplikasi Anda
CodePush.xcodeproj Temukan file dalam node_modules/react-native-code-push/ios direktori (atau node_modules/react-native-code-push untuk <=1.7.3-beta penginstalan) dan seret ke simpul Libraries di Xcode
Pilih simpul proyek di Xcode dan pilih tab "Fase Build" dari konfigurasi proyek Anda.
Seret libCodePush.a dari Libraries/CodePush.xcodeproj/Products ke bagian "Tautkan Biner Dengan Pustaka" dari konfigurasi "Fase Build" proyek Anda.
Klik tanda plus di bawah daftar "Tautkan Biner Dengan Pustaka" dan pilih libz.tbd pustaka di bawah simpul iOS 9.1 .

Catatan

Atau, jika mau, Anda dapat menambahkan -lz bendera ke Other Linker Flags bidang di bagian LinkingBuild Settings.

Konfigurasi Plugin untuk React Native lebih rendah dari 0.60 (iOS)

Catatan

Jika Anda menggunakan RNPM atau react-native link untuk menautkan plugin secara otomatis, langkah-langkah ini telah dilakukan untuk Anda sehingga Anda dapat melewati bagian ini.

Setelah proyek Xcode Anda disiapkan untuk membangun/menautkan plugin CodePush, Anda perlu mengonfigurasi aplikasi untuk memeriksa CodePush untuk lokasi bundel JS Anda, karena bertanggung jawab untuk menyinkronkannya dengan pembaruan yang dirilis ke server CodePush. Untuk melakukan ini, ikuti langkah-langkah berikut:

Buka file AppDelegate.m , dan tambahkan pernyataan impor untuk header CodePush:
```
#import <CodePush/CodePush.h>
```

Untuk React Native 0,59 - 0.59.10:

Temukan baris kode berikut, yang mengatur URL sumber untuk bridge untuk rilis produksi:
```
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
```
Ganti dengan baris ini:
```
return [CodePush bundleURL];
```

Untuk React Native 0,58 ke bawah:

Temukan baris kode berikut, yang memuat JS Bundle Anda dari biner aplikasi untuk rilis produksi:

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

Ganti dengan baris ini:
```
jsCodeLocation = [CodePush bundleURL];
```

Perubahan ini mengonfigurasi aplikasi Anda untuk selalu memuat versi terbaru bundel JS aplikasi Anda. Pada peluncuran pertama, ini sesuai dengan file yang dikompilasi dengan aplikasi. Namun, setelah pembaruan didorong melalui CodePush, ini mengembalikan lokasi pembaruan yang terakhir diinstal.

Catatan

Metode ini bundleURL mengasumsikan bundel JS aplikasi Anda diberi nama main.jsbundle. Jika Anda telah mengonfigurasi aplikasi untuk menggunakan nama file yang berbeda, panggil bundleURLForResource: metode (yang mengasumsikan Anda menggunakan ekstensi) atau bundleURLForResource:withExtension: metode sebagai gantinya, untuk menimpa perilaku default tersebut.jsbundle.

Biasanya, Anda hanya ingin menggunakan CodePush untuk menyelesaikan lokasi bundel JS Anda dalam build rilis. Sebaiknya gunakan DEBUG makro pra-prosesor untuk beralih secara dinamis antara menggunakan server packager dan CodePush, tergantung pada apakah Anda menelusuri kesalahan atau tidak. Ini membuatnya jauh lebih mudah untuk memastikan Anda mendapatkan perilaku yang tepat yang Anda inginkan dalam produksi, sambil tetap menggunakan Chrome Dev Tools, muat ulang langsung, dll. pada waktu debug.

Untuk React Native 0,59 - 0.59.10:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

Untuk React Native 0,58 ke bawah:

NSURL *jsCodeLocation;

#ifdef DEBUG
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
    jsCodeLocation = [CodePush bundleURL];
#endif

Untuk memberi tahu runtime CodePush penyebaran mana yang harus dikueri untuk pembaruan, buka file Info.plist proyek dan tambahkan entri baru bernama CodePushDeploymentKey, yang nilainya adalah kunci penyebaran yang ingin Anda konfigurasi aplikasi ini (seperti kunci untuk Staging penyebaran untuk FooBar aplikasi). Anda dapat mengambil nilai ini dengan menjalankan appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys di CodePush CLI dan menyalin nilai Deployment Key kolom yang sesuai dengan penyebaran yang ingin Anda gunakan (lihat di bawah). Menggunakan nama penyebaran (seperti Staging) tidak akan berfungsi. "Nama yang mudah diingat" tersebut hanya ditujukan untuk penggunaan manajemen terautentikasi dari CLI, dan bukan untuk konsumsi publik dalam aplikasi Anda.

Kunci Penahapan

Untuk secara efektif menggunakan penyebaran Staging dan Production yang dibuat bersama dengan aplikasi CodePush Anda, lihat dokumen pengujian multi-penyebaran di bawah ini sebelum benar-benar memindahkan penggunaan CodePush aplikasi Anda ke produksi.

Konfigurasi domain pengecualian HTTP (iOS)

Plugin CodePush membuat permintaan HTTPS ke domain berikut:

codepush.appcenter.ms
codepush.blob.core.windows.net
codepushupdates.azureedge.net

Jika Anda ingin mengubah konfigurasi keamanan HTTP default untuk salah satu domain ini, tentukan NSAppTransportSecurity konfigurasi (ATS) di dalam file Info.plist proyek:

<plist version="1.0">
  <dict>
    <!-- ...other configs... -->

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSExceptionDomains</key>
      <dict>
        <key>codepush.appcenter.ms</key>
        <dict><!-- read the ATS Apple Docs for available options --></dict>
      </dict>
    </dict>

    <!-- ...other configs... -->
  </dict>
</plist>

Sebelum melakukan apa pun, lihat dokumen Apple terlebih dahulu.

Penyiapan Penandatanganan Kode (iOS)

Anda dapat menandatangani sendiri bundel selama rilis dan memverifikasi tanda tangan mereka sebelum penginstalan pembaruan. Untuk informasi selengkapnya tentang Penandatanganan Kode, lihat bagian dokumentasi pendorongan kode yang relevan.

Untuk mengonfigurasi Kunci Umum untuk verifikasi bundel, Anda perlu menambahkan catatan Info.plist dengan nama CodePushPublicKey dan nilai string konten kunci publik. Contoh:

<plist version="1.0">
  <dict>
    <!-- ...other configs... -->

    <key>CodePushPublicKey</key>
        <string>-----BEGIN PUBLIC KEY-----
MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANkWYydPuyOumR/sn2agNBVDnzyRpM16NAUpYPGxNgjSEp0etkDNgzzdzyvyl+OsAGBYF3jCxYOXozum+uV5hQECAwEAAQ==
-----END PUBLIC KEY-----</string>

    <!-- ...other configs... -->
  </dict>
</plist>

Penyiapan Android

Untuk mengintegrasikan CodePush ke dalam proyek Android Anda, lakukan langkah-langkah berikut:

Penginstalan Plugin (Android)

Penginstalan dan Konfigurasi Plugin untuk versi React Native 0.60 ke atas (Android)

Dalam file Anda android/settings.gradle , buat penambahan berikut:

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

Di file Anda android/app/build.gradle , tambahkan codepush.gradle file sebagai definisi tugas build tambahan:
```
...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
```

MainApplication.java Perbarui file (atau MainApplicationReactNativeHost.java jika Anda menggunakan file React Native 0.68 - 0.70) untuk menggunakan CodePush melalui perubahan berikut:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}

Tambahkan kunci Penyebaran ke strings.xml:

Untuk memberi tahu runtime CodePush penyebaran mana yang harus dikueri untuk pembaruan, buka file aplikasi strings.xml Anda dan tambahkan string baru bernama CodePushDeploymentKey, yang nilainya adalah kunci penyebaran yang ingin Anda konfigurasi aplikasi ini (seperti kunci untuk Staging penyebaran aplikasi FooBar ). Anda dapat mengambil nilai ini dengan menjalankan appcenter codepush deployment list -a <ownerName>/<appName> -k di App Center CLI ( -k bendera diperlukan karena kunci tidak ditampilkan secara default) dan menyalin nilai Key kolom yang sesuai dengan penyebaran yang ingin Anda gunakan (lihat di bawah). Menggunakan nama penyebaran (seperti Penahapan) tidak akan berfungsi. "Nama yang mudah diingat" hanya ditujukan untuk penggunaan manajemen terautentikasi dari CLI, dan bukan untuk konsumsi publik dalam aplikasi Anda.

Untuk secara efektif menggunakan penyebaran Staging dan Production yang dibuat bersama dengan aplikasi CodePush Anda, lihat dokumen pengujian multi-penyebaran di bawah ini sebelum benar-benar memindahkan penggunaan CodePush aplikasi Anda ke produksi.

File Anda strings.xml akan terlihat seperti ini:
```
 <resources>
     <string name="app_name">AppName</string>
     <string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string>
 </resources>
```
Catatan

Jika Anda perlu menggunakan penyebaran yang berbeda secara dinamis, Anda juga dapat mengganti kunci penyebaran dalam kode JS menggunakan opsi Code-Push*

Penginstalan Plugin untuk React Native lebih rendah dari 0.60 (Android)

Untuk mengakomodasi preferensi pengembang sebanyak mungkin, plugin CodePush mendukung penginstalan Android melalui dua mekanisme:

RNPM - React Native Package Manager (RNPM) adalah alat luar biasa yang memberikan pengalaman penginstalan paling sederhana untuk plugin React Native. Jika Anda sudah menggunakannya, atau Anda ingin menggunakannya, maka kami merekomendasikan pendekatan ini.
"Manual" - Jika Anda tidak ingin bergantung pada alat tambahan apa pun atau baik-baik saja dengan beberapa langkah penginstalan tambahan (ini adalah hal satu kali), maka lakukan pendekatan ini.

Catatan

Karena perubahan kode dari repositori React Native, jika versi React Native yang diinstal berkisar antara 0,29 hingga 0,32, sebaiknya ikuti langkah-langkah manual untuk menyiapkan dengan benar.

Penginstalan Plugin (Android - RNPM)

Pada v0.27 React Native, rnpm link telah digabungkan ke dalam CLI React Native. Jalankan:
```
react-native link react-native-code-push
```
Jika aplikasi Anda menggunakan versi React Native lebih rendah dari v0.27, jalankan perintah berikutnya:
```
rnpm link react-native-code-push
```
Catatan

Jika Anda belum menginstal RNPM, Anda dapat melakukannya dengan menjalankan npm i -g rnpm lalu menjalankan perintah di atas.
Jika Anda menggunakan RNPM >=1.6.0, Anda akan dimintai kunci penyebaran yang ingin Anda gunakan. Jika Anda belum memilikinya, Anda dapat mengambil nilai ini dengan menjalankan appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys, atau Anda dapat memilih untuk mengabaikannya (dengan menekan <ENTER>) dan menambahkannya nanti. Untuk memulai, sebaiknya gunakan kunci penyebaran Anda Staging , sehingga Anda dapat menguji CodePush secara end-to-end.

Dan itu saja untuk penginstalan menggunakan RNPM! Lanjutkan di bawah ini ke bagian Konfigurasi Plugin untuk menyelesaikan penyiapan.

Penginstalan Plugin (Android - Manual)

Dalam file Anda android/settings.gradle , buat penambahan berikut:

include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

Di file Anda android/app/build.gradle , tambahkan :react-native-code-push proyek sebagai dependensi waktu kompilasi:
```
...
dependencies {
    ...
    compile project(':react-native-code-push')
}
```
Di file Anda android/app/build.gradle , tambahkan codepush.gradle file sebagai definisi tugas build tambahan:
```
...
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
```

Konfigurasi Plugin untuk React Native lebih rendah dari 0.60 (Android)

Catatan

Jika Anda menggunakan RNPM atau react-native link untuk menautkan plugin secara otomatis, langkah-langkah ini telah dilakukan untuk Anda sehingga Anda dapat melewati bagian ini.

Setelah menginstal plugin dan menyinkronkan proyek Android Studio dengan Gradle, Anda perlu mengonfigurasi aplikasi untuk memeriksa CodePush untuk lokasi bundel JS Anda, karena akan "mengambil kontrol" untuk mengelola versi saat ini dan semua versi yang akan datang. Untuk melakukan ini:

Untuk React Native >= v0.29

Jika Anda mengintegrasikan CodePush ke dalam aplikasi React Native, lakukan langkah-langkah berikut:

MainApplication.java Perbarui file untuk menggunakan CodePush melalui perubahan berikut:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }

        @Override
        protected List<ReactPackage> getPackages() {
            // 3. Instantiate an instance of the CodePush runtime and add it to the list of
            // existing packages, specifying the right deployment key. If you don't already
            // have it, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve your key.
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
            );
        }
    };
}

Jika Anda mengintegrasikan React Native ke dalam aplikasi asli yang ada, lakukan langkah-langkah berikut:

Perbarui MyReactActivity.java (dapat diberi nama berbeda dalam file aplikasi Anda) untuk menggunakan CodePush melalui perubahan berikut:

...
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;

public class MyReactActivity extends Activity {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mReactInstanceManager = ReactInstanceManager.builder()
                // ...
                // Add CodePush package
                .addPackage(new CodePush("deployment-key-here", getApplicationContext(), BuildConfig.DEBUG))
                // Get the JS Bundle File via CodePush
                .setJSBundleFile(CodePush.getJSBundleFile())
                // ...

                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    ...
}

Untuk React Native v0.19 - v0.28

Perbarui file MainActivity.java untuk menggunakan CodePush melalui perubahan berikut:

...
// 1. Import the plugin class (if you used RNPM to install the plugin, this
// should already be done for you automatically so you can skip this step).
import com.microsoft.codepush.react.CodePush;

public class MainActivity extends ReactActivity {
    // 2. Override the getJSBundleFile method to let
    // the CodePush runtime determine where to get the JS
    // bundle location from on each app start
    @Override
    protected String getJSBundleFile() {
        return CodePush.getJSBundleFile();
    }

    @Override
    protected List<ReactPackage> getPackages() {
        // 3. Instantiate an instance of the CodePush runtime and add it to the list of
        // existing packages, specifying the right deployment key. If you don't already
        // have it, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve your key.
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new CodePush("deployment-key-here", this, BuildConfig.DEBUG)
        );
    }

    ...
}

Instans React Latar Belakang

Catatan

Bagian ini hanya diperlukan jika Anda secara eksplisit meluncurkan instans React Native tanpa Activity (misalnya, dari dalam penerima pemberitahuan push asli). Untuk situasi ini, CodePush harus diberi tahu cara menemukan instans React Native Anda.

Untuk memperbarui/memulai ulang instans React Native Anda, CodePush harus dikonfigurasi dengan ReactInstanceHolder sebelum mencoba memulai ulang instans di latar belakang. Ini dilakukan dalam implementasi Anda Application .

Untuk React Native >= v0.29

MainApplication.java Perbarui file untuk menggunakan CodePush melalui perubahan berikut:

...
// 1. Declare your ReactNativeHost to extend ReactInstanceHolder. ReactInstanceHolder is a subset of ReactNativeHost, so no additional implementation is needed.
import com.microsoft.codepush.react.ReactInstanceHolder;

public class MyReactNativeHost extends ReactNativeHost implements ReactInstanceHolder {
  // ... usual overrides
}

// 2. Provide your ReactNativeHost to CodePush.

public class MainApplication extends Application implements ReactApplication {

   private final MyReactNativeHost mReactNativeHost = new MyReactNativeHost(this);

   @Override
   public void onCreate() {
     CodePush.setReactInstanceHolder(mReactNativeHost);
     super.onCreate();
  }
}

Untuk React Native v0.19 - v0.28

Sebelum v0.29, React Native tidak memberikan ReactNativeHost abstraksi. Jika Anda meluncurkan instans latar belakang, Anda mungkin telah membangun sendiri, yang sekarang harus menerapkan ReactInstanceHolder. Setelah selesai:

// 1. Provide your ReactInstanceHolder to CodePush.

public class MainApplication extends Application {

   @Override
   public void onCreate() {
     // ... initialize your instance holder
     CodePush.setReactInstanceHolder(myInstanceHolder);
     super.onCreate();
  }
}

Untuk secara efektif menggunakan Staging penyebaran dan Production yang kami sarankan untuk Anda buat bersama dengan aplikasi CodePush Anda, lihat dokumen pengujian multi-penyebaran di bawah ini sebelum benar-benar memindahkan penggunaan CodePush aplikasi Anda ke produksi.

Penyiapan Penandatanganan Kode (Android)

Dimulai dengan CLI versi 2.1.0 Anda dapat menandatangani sendiri bundel selama rilis dan memverifikasi tanda tangannya sebelum penginstalan pembaruan. Untuk informasi selengkapnya tentang Penandatanganan Kode, lihat bagian dokumentasi pendorongan kode yang relevan. Untuk menggunakan Kunci Umum untuk Penandatanganan Kode, lakukan langkah-langkah berikut:

CodePushPublicKey Tambahkan item string ke /path_to_your_app/android/app/src/main/res/values/strings.xml. Mungkin terlihat seperti ini:

<resources>
   <string name="app_name">my_app</string>
   <string name="CodePushPublicKey">-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtPSR9lkGzZ4FR0lxF+ZA
P6jJ8+Xi5L601BPN4QESoRVSrJM08roOCVrs4qoYqYJy3Of2cQWvNBEh8ti3FhHu
tiuLFpNdfzM4DjAw0Ti5hOTfTixqVBXTJPYpSjDh7K6tUvp9MV0l5q/Ps3se1vud
M1/X6g54lIX/QoEXTdMgR+SKXvlUIC13T7GkDHT6Z4RlwxkWkOmf2tGguRcEBL6j
ww7w/3g0kWILz7nNPtXyDhIB9WLH7MKSJWdVCZm+cAqabUfpCFo7sHiyHLnUxcVY
OTw3sz9ceaci7z2r8SZdsfjyjiDJrq69eWtvKVUpredy9HtyALtNuLjDITahdh8A
zwIDAQAB
-----END PUBLIC KEY-----</string>
</resources>

Untuk React Native <= v0.60, Anda harus mengonfigurasi `CodePush` instans untuk menggunakan parameter ini menggunakan salah satu pendekatan berikut

Menggunakan konstruktor

new CodePush(
    "deployment-key",
    getApplicationContext(),
    BuildConfig.DEBUG,
    R.string.CodePushPublicKey)

Menggunakan penyusun

new CodePushBuilder("deployment-key-here",getApplicationContext())
   .setIsDebugMode(BuildConfig.DEBUG)
   .setPublicKeyResourceDescriptor(R.string.CodePushPublicKey)
   .build()

Penyetelan Windows

Setelah memperoleh plugin CodePush, Anda perlu mengintegrasikannya ke dalam proyek Visual Studio aplikasi React Native Anda dan mengonfigurasinya dengan benar. Untuk melakukan ini, lakukan langkah-langkah berikut:

Penginstalan dan Konfigurasi Plugin untuk React Native versi 0.63.6 ke atas (Windows)

Penginstalan Plugin (Windows-npx)

Setelah plugin diunduh, jalankan npx react-native autolink-windows di direktori akar aplikasi Anda untuk secara otomatis menambahkan proyek CodePush c++ ke file solusi windows aplikasi Anda.

Konfigurasi Plugin (Windows)

Ganti file berikut yang terletak di dengan yang ada di windows/<app name> aplikasi contoh CodePushDemoAppCpp dalam repositori ini yang ditemukan di Examples/CodePushDemoAppCpp/windows/CodePushDemoAppCpp:
1. app.h
2. app.cpp
3. app.xaml
Dalam file di atas, ganti kejadian apa pun CodePushDemoAppCpp dengan nama aplikasi Anda
Masukkan versi aplikasi dan kunci penyebaran aplikasi Anda ke configMap objek di bagian atas metode aplikasi OnLaunched Anda di App.cpp:

//...
void App::OnLaunched(activation::LaunchActivatedEventArgs const& e)
{
    winrt::Microsoft::CodePush::ReactNative::CodePushConfig::SetHost(Host());
    auto configMap{ winrt::single_threaded_map<hstring, hstring>() };
    configMap.Insert(L"appVersion", L"1.0.0");
    configMap.Insert(L"deploymentKey", L"<app deployment key>");
    winrt::Microsoft::CodePush::ReactNative::CodePushConfig::Init(configMap);
//...
}
//...

Penginstalan dan Konfigurasi Plugin untuk React Native lebih rendah dari 0,60 (Windows)

Penginstalan Plugin (Windows)

Buka solusi Visual Studio yang terletak di windows-legacy\<AppName>\<AppName>.sln dalam aplikasi Anda
Klik kanan simpul solusi di Solution Explorer jendela dan pilih Add -> Existing Project... item menu
Telusuri ke node_modules\react-native-code-push\windows direktori, pilih file, dan klik OK
Kembali ke Solution Explorer, klik kanan simpul proyek yang dinamai sesuai aplikasi Anda, dan pilih Add -> Reference... item menu
Pilih tab Projects di sisi kiri, periksa CodePush item, lalu klik OK

Konfigurasi Plugin (Windows)

Setelah menginstal plugin, Anda perlu mengonfigurasi aplikasi Anda untuk memeriksa CodePush untuk lokasi bundel JS Anda, karena akan "mengontrol" pengelolaan versi saat ini dan semua versi yang akan datang. Untuk melakukan ini, perbarui AppReactPage.cs file untuk menggunakan CodePush melalui perubahan berikut:

...
// 1. Import the CodePush namespace
using CodePush.ReactNative;
...
class AppReactPage : ReactPage
{
    // 2. Declare a private instance variable for the CodePushModule instance.
    private CodePushReactPackage codePushReactPackage;

    // 3. Update the JavaScriptBundleFile property to initialize the CodePush runtime,
    // specifying the right deployment key, then use it to return the bundle URL from
    // CodePush instead of statically from the binary. If you don't already have your
    // deployment key, you can run "appcenter codepush deployment list -a <ownerName>/<appName> --displayKeys" to retrieve it.
    public override string JavaScriptBundleFile
    {
        get
        {
            codePushReactPackage = new CodePushReactPackage("deployment-key-here", this);
            return codePushReactPackage.GetJavaScriptBundleFile();
        }
    }

    // 4. Add the codePushReactPackage instance to the list of existing packages.
    public override List<IReactPackage> Packages
    {
        get
        {
            return new List<IReactPackage>
            {
                new MainReactPackage(),
                ...
                codePushReactPackage
            };
        }
    }
    ...
}

Bagikan melalui

Mulai menggunakan SDK Klien React Native

Penyiapan iOS

Penginstalan dan Konfigurasi Plugin untuk versi React Native 0.60 ke atas (iOS)

Penginstalan Plugin untuk React Native lebih rendah dari 0,60 (iOS)

Penginstalan Plugin (iOS - RNPM)

Penginstalan Plugin (iOS - CocoaPods)

Penginstalan Plugin (iOS - Manual)

Konfigurasi Plugin untuk React Native lebih rendah dari 0.60 (iOS)

Konfigurasi domain pengecualian HTTP (iOS)

Penyiapan Penandatanganan Kode (iOS)

Penyiapan Android

Penginstalan Plugin (Android)

Penginstalan dan Konfigurasi Plugin untuk versi React Native 0.60 ke atas (Android)

Penginstalan Plugin untuk React Native lebih rendah dari 0.60 (Android)

Penginstalan Plugin (Android - RNPM)

Penginstalan Plugin (Android - Manual)

Konfigurasi Plugin untuk React Native lebih rendah dari 0.60 (Android)

Instans React Latar Belakang

Penyiapan Penandatanganan Kode (Android)

Untuk React Native <= v0.60, Anda harus mengonfigurasi `CodePush` instans untuk menggunakan parameter ini menggunakan salah satu pendekatan berikut

Menggunakan konstruktor

Menggunakan penyusun

Penyetelan Windows

Penginstalan dan Konfigurasi Plugin untuk React Native versi 0.63.6 ke atas (Windows)

Penginstalan Plugin (Windows-npx)

Konfigurasi Plugin (Windows)

Penginstalan dan Konfigurasi Plugin untuk React Native lebih rendah dari 0,60 (Windows)

Penginstalan Plugin (Windows)

Konfigurasi Plugin (Windows)

Sumber Daya Tambahan:

Bagikan melalui

Mulai menggunakan SDK Klien React Native

Penyiapan iOS

Penginstalan dan Konfigurasi Plugin untuk versi React Native 0.60 ke atas (iOS)

Penginstalan Plugin untuk React Native lebih rendah dari 0,60 (iOS)

Penginstalan Plugin (iOS - RNPM)

Penginstalan Plugin (iOS - CocoaPods)

Penginstalan Plugin (iOS - Manual)

Konfigurasi Plugin untuk React Native lebih rendah dari 0.60 (iOS)

Konfigurasi domain pengecualian HTTP (iOS)

Penyiapan Penandatanganan Kode (iOS)

Penyiapan Android

Penginstalan Plugin (Android)

Penginstalan dan Konfigurasi Plugin untuk versi React Native 0.60 ke atas (Android)

Penginstalan Plugin untuk React Native lebih rendah dari 0.60 (Android)

Penginstalan Plugin (Android - RNPM)

Penginstalan Plugin (Android - Manual)

Konfigurasi Plugin untuk React Native lebih rendah dari 0.60 (Android)

Instans React Latar Belakang

Penyiapan Penandatanganan Kode (Android)

Untuk React Native <= v0.60, Anda harus mengonfigurasi CodePush instans untuk menggunakan parameter ini menggunakan salah satu pendekatan berikut

Menggunakan konstruktor

Menggunakan penyusun

Penyetelan Windows

Penginstalan dan Konfigurasi Plugin untuk React Native versi 0.63.6 ke atas (Windows)

Penginstalan Plugin (Windows-npx)

Konfigurasi Plugin (Windows)

Penginstalan dan Konfigurasi Plugin untuk React Native lebih rendah dari 0,60 (Windows)

Penginstalan Plugin (Windows)

Konfigurasi Plugin (Windows)

Sumber Daya Tambahan:

Untuk React Native <= v0.60, Anda harus mengonfigurasi `CodePush` instans untuk menggunakan parameter ini menggunakan salah satu pendekatan berikut