Mobile Platform as a Service:Memulai

Topik ini menjelaskan cara mengintegrasikan komponen H5 container dan offline package ke proyek klien iOS yang sudah ada menggunakan CocoaPods.

Gunakan SDK

Topik ini menggunakan demo resmi H5 container dan offline package untuk menjelaskan cara menggunakan SDK H5 container pada baseline 10.1.60 dan versi setelahnya.

Proses penggunaan SDK H5 container mencakup lima langkah berikut:

1. Inisialisasi konfigurasi

2. Panggil container

3. Aktifkan komunikasi dua arah antara H5 dan Native

4. Muat paket offline

5. Instrumentasi H5 container

1. Inisialisasi konfigurasi

1.1. Inisialisasi container

• Untuk menggunakan container Nebula, Anda harus memanggil SDK guna menginisialisasi container setelah aplikasi dimulai. Inisialisasi ini harus dilakukan dalam metode - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions dari DTFrameworkInterface. Timpa metode ini dalam kategori DTFrameworkInterface + (ProjectName) yang disediakan oleh framework mPaaS.

    - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // Initialize the container
        [MPNebulaAdapterInterface initNebula];
    }

• Untuk menggunakan fitur seperti preset offline packages, custom JSAPIs, dan Plugins, ganti antarmuka initNebula dengan antarmuka initNebulaWith dan teruskan parameter yang diperlukan untuk menginisialisasi container.

  • presetApplistPath: Jalur file informasi paket untuk preset offline packages kustom.

  • appPackagePath: Jalur preset offline packages kustom.

  • pluginsJsapisPath: Jalur penyimpanan untuk file JSAPI dan Plugin kustom.

    - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // Initialize the container
        NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"MPCustomPresetApps.bundle/h5_json.json"] ofType:nil];
        NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"MPCustomPresetApps.bundle"] ofType:nil];
        NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
        [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:pluginsJsapisPath];
    }

    Catatan

    Metode initNebula dan initNebulaWithCustomPresetApplistPath bersifat saling eksklusif dan tidak dapat dipanggil secara bersamaan.

• mPaaS memungkinkan Anda mengonfigurasi interval permintaan untuk paket miniapp secara global atau per paket.

  • Konfigurasi global: Anda dapat mengatur frekuensi pembaruan untuk paket offline atau miniapp menggunakan kode berikut saat menginisialisasi container.

    [MPNebulaAdapterInterface shareInstance].nebulaUpdateReqRate = 7200;

    Pada kode tersebut, `7200` adalah interval pembaruan global default dalam satuan detik. Anda dapat mengubah nilai ini untuk menetapkan interval permintaan global kustom untuk paket offline. Rentang nilai yang valid adalah 0 hingga 86400 detik (24 jam). Nilai 0 menunjukkan tidak ada batasan pada interval permintaan.

  • Konfigurasi individual: Ini mengonfigurasi interval untuk satu paket miniapp. Di Konsol, buka Individual Configuration > Add Offline Package > Extended Information dan masukkan {"asyncReqRate":"1800"} untuk mengatur interval permintaan. Untuk informasi lebih lanjut, lihat bagian Extended Information dalam Membuat paket offline H5.

1.2 Menyesuaikan container

• Jika diperlukan, Anda dapat menyesuaikan container dengan mengatur properti MPNebulaAdapterInterface. Anda harus mengatur properti ini dalam metode - (void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions dari DTFrameworkInterface. Jika tidak, konfigurasi default container akan menimpa pengaturan kustom Anda.

    - (void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
        // Customize the container
        [MPNebulaAdapterInterface shareInstance].nebulaVeiwControllerClass = [MPH5WebViewController class];
        [MPNebulaAdapterInterface shareInstance].nebulaNeedVerify = NO;
        [MPNebulaAdapterInterface shareInstance].nebulaUserAgent = @"mPaaS/Portal";
        [MPNebulaAdapterInterface shareInstance].nebulaCommonResourceAppList = @[@"77777777"];
    }

• Properti-properti tersebut dijelaskan sebagai berikut:

  Property	Meaning	Remarks
  nebulaViewControllerClass	Kelas dasar untuk halaman HTML5.	Default ke `H5WebViewController`. Untuk menentukan kelas dasar kustom untuk semua halaman HTML5, atur properti ini. Penting Kelas dasar harus mewarisi dari H5WebViewController.
  nebulaWebViewClass	Mengatur kelas dasar untuk WebView.	> 10.1.60: Default ke H5WKWebView. WebView kustom harus mewarisi dari H5WKWebView. = 10.1.60: Kustomisasi tidak didukung.
  nebulaUseWKArbitrary	Mengatur apakah akan menggunakan WKWebView untuk memuat halaman paket offline.	> 10.1.60: Default ke YES. = 10.1.60: Default ke NO.
  nebulaUserAgent	Mengatur User-Agent untuk aplikasi.	User-Agent yang ditentukan akan ditambahkan ke UA default container.
  nebulaNeedVerify	Menentukan apakah akan melakukan verifikasi signature. Nilai default adalah YES.	Jika Anda tidak mengunggah file kunci privat saat mengonfigurasi paket offline, atur nilai ini ke NO. Jika tidak, paket offline akan gagal dimuat.
  nebulaPublicKeyPath	Jalur kunci publik untuk verifikasi signature paket offline.	Jalur kunci publik yang sesuai dengan kunci privat yang diunggah saat Anda mengonfigurasi paket offline.
  nebulaCommonResourceAppList	Daftar appId untuk paket resource publik.	-
  errorHtmlPath	Jalur halaman error HTML yang ditampilkan ketika halaman HTML5 gagal dimuat.	Secara default, container membaca dari MPNebulaAdapter.bundle/error.html.
  configDelegate	Mengatur delegate untuk switch kustom.	Memungkinkan Anda mengubah nilai switch default container secara global.

1.3 Konfigurasi yang tidak dikelola oleh kerangka kerja

Jika siklus hidup aplikasi Anda tidak dikelola oleh framework mPaaS (proyek non-framework-managed), Anda harus melakukan konfigurasi tambahan seperti yang dijelaskan dalam bagian ini. Dalam skenario ini, siklus hidup aplikasi ditugaskan ke delegate kustom. Jika framework mPaaS mengelola siklus hidup aplikasi Anda, tidak diperlukan konfigurasi tambahan.

• Setelah `window` dan `navigationController` aplikasi dibuat, panggil metode berikut. Anda tidak perlu lagi membuat bootloader atau menyembunyikan window framework.

• Tidak perlu mewarisi dari DFNavigationController.

• Jika aplikasi memiliki beberapa navigation bar dan Anda perlu membuka paket offline berbeda di navigation bar yang berbeda, Anda harus mengatur ulang navigation bar container setelah beralih.

1.5. Konfigurasi proyek non-framework-managed (untuk versi sebelum 10.1.68.25)

Jika siklus hidup aplikasi Anda tidak dikelola oleh framework mPaaS (proyek non-framework-managed), Anda harus melakukan konfigurasi tambahan berikut. Jika framework mPaaS mengelola siklus hidup aplikasi Anda, tidak diperlukan konfigurasi tambahan.

1.4.1 Memulai framework mPaaS

Dalam metode didFinishLaunchingWithOptions aplikasi saat ini, panggil [[DTFrameworkInterface sharedInstance] manualInitMpaasFrameworkWithApplication:application launchOptions:launchOptions]; untuk memulai framework mPaaS.

1.4.2 Membuat Application Launcher

Buat kelas turunan yang mewarisi dari `DTBootLoader`. Dalam kelas turunan ini, timpa metode createWindow dan createNavigationController untuk mengembalikan `window` dan `navigationController` aplikasi saat ini.

• Atur `window`: `keyWindow` dari aplikasi saat ini.

• Atur `navigationController`: `rootViewController` dari `keyWindow` aplikasi saat ini. Harus mewarisi dari `DFNavigationController`.

1.4.3 Tentukan peluncur aplikasi

Dalam kategori `DTFrameworkInterface`, timpa metode untuk menentukan bootloader kustom aplikasi Anda dan sembunyikan window dan aplikasi launcher default dari framework mPaaS.

2. Panggil container

Setelah container diinisialisasi, Anda dapat memanggil H5 container dengan salah satu dari tiga cara berikut.

• Buat H5 container berdasarkan URL online atau file HTML lokal. Kode berikut memberikan contoh:

  // Open an online URL
  [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com/products/MPAAS"}];
  // Open a local HTML page
  NSString *path = [[NSBundle mainBundle].bundlePath stringByAppendingFormat:@"/%@/%@", @"MPH5Demo.bundle", @"H52Native.html"];
  if ([path length] > 0) {
  [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": path}];
  }

• Buat dan buka secara otomatis H5 container menggunakan push yang berisi informasi paket offline. Kode berikut memberikan contoh:

    [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithNebulaApp:@{@"appId":@"90000000"}];

• Buat H5 container berdasarkan informasi paket offline dan kembalikan instans H5 container. Metode ini biasanya digunakan untuk tab di halaman utama. Kode berikut memberikan contoh:

    [[MPNebulaAdapterInterface shareInstance] createH5ViewControllerWithNebulaApp:@{@"appId":@"90000000"}];

3. Aktifkan komunikasi dua arah antara H5 dan Native

Anda dapat mengaktifkan komunikasi dua arah antara H5 dan Native dengan memanggil JSAPI dan mendengarkan event tertentu.

3.1. Panggil fitur Native dari halaman HTML5

Anda dapat mengaktifkan komunikasi dari H5 ke Native dengan memanggil JSAPI.

Untuk informasi lebih lanjut tentang JSAPI yang didukung oleh container Nebula dan parameternya, lihat JSAPI bawaan.

Contoh

Saat tombol di halaman HTML5 diklik, panggil metode JSAPI pushWindow untuk memuat halaman baru:

AlipayJSBridge.call('pushWindow', {
    url: 'https://tech.antfin.com',
    param: {
    readTitle: true,
    defaultTitle: true,
    // ...
    }
}, function(data) {alert('Call result'+JSON.stringify(data)); });

Deskripsi AlipayJSBridge

AlipayJSBridge adalah JSBridge yang secara otomatis disuntikkan oleh container Nebula. Setelah event Window.onload, container menghasilkan variabel global bernama AlipayJSBridge dan memicu event AlipayJSBridgeReady. Karena proses penyuntikan bersifat asinkron, Anda harus mendengarkan event AlipayJSBridgeReady sebelum memanggil antarmuka.

Kode berikut memberikan contoh:

<h1>How to use the bridge</h1>

<script>
function ready(callback) {
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

ready(function(){
  alert('bridge ready');
});
</script>

3.2. Panggil fitur H5 dari halaman Native

Anda dapat mengaktifkan komunikasi dari Native ke H5 dengan mendengarkan event tertentu. Untuk informasi lebih lanjut tentang event yang didukung oleh container Nebula, lihat Daftar ekstensi event.

document.addEventListener('back', function (e) {
    if(confirm('The back event was intercepted. Are you sure you want to go back?')) {
        // do something;
    }
}, false);

Selain event yang didukung secara default oleh container Nebula, Anda juga dapat mendefinisikan event kustom di sisi Native agar frontend dapat mendengarkannya.

// self: The VC where the current HTML5 page is located
// data: The parameters passed from Native to the frontend
// callBack: The callback after the frontend receives the event
[self callHandler:@"customEvent" data:@{@"key":@"value"} responseCallback:^(id responseData) {
        NSLog(@"Callback after the frontend receives the event: %@", responseData);
    }];

3.3. Perluas kemampuan container Nebula

Jika kemampuan komunikasi dua arah dasar untuk halaman HTML5 yang disediakan oleh container Nebula tidak memenuhi kebutuhan Anda, Anda dapat memperluas Nebula:

• JSAPI: Jika Anda ingin memulai pemanggilan fungsi Native dari halaman HTML5, seperti menampilkan ActionSheet atau dialog kontak, Anda perlu memperluas JSAPI. JSAPI memungkinkan Anda dengan mudah menambahkan pemanggilan fungsi Native ke halaman HTML5 untuk mengimplementasikan fitur tertentu menggunakan metode penanganan. Untuk informasi lebih lanjut tentang cara menyesuaikan JSAPI, lihat Menyesuaikan JSAPI.

• Plugin: Untuk melakukan tindakan tertentu pada waktu tertentu, seperti saat pengguna memasuki halaman atau saat container menerima permintaan, Anda perlu mengembangkan plugin. Contoh tindakan termasuk merekam data instrumentasi dan memodifikasi data yang dikembalikan. Setelah Anda berlangganan event yang sesuai dalam plugin, Anda dapat memproses data yang dibawa oleh event tersebut dalam penanganan. Untuk informasi lebih lanjut tentang cara menyesuaikan plugin, lihat Menyesuaikan plugin.

4. Muat paket offline

Teknologi H5 online tradisional rentan terhadap kondisi jaringan, yang dapat berdampak negatif pada performa halaman HTML5. Untuk meminimalkan pengaruh jaringan terhadap pemuatan halaman HTML5, Anda dapat mengemas dan mengelompokkan layanan berbeda ke dalam paket offline. Anda kemudian dapat mengirimkan paket tersebut ke klien melalui platform penerbitan untuk memperbarui resource klien. Untuk informasi lebih lanjut, lihat Pengenalan paket offline dan Menggunakan paket offline.

5. Instrumentasi H5 container

Saat halaman HTML5 dimuat, container Nebula secara otomatis memantau performa pemuatan dan menangkap data perilaku serta data error terkait. Untuk informasi lebih lanjut, lihat Instrumentasi H5 container.