Tutorial Integrasi React Native dengan Code Push

source: https://microsoft.github.io/code-push/

Halo! Kali ini saya akan berbagi tutorial tentang penggunaan CodePush di React Native (RN). CodePush adalah open-source service yang dibuat oleh Microsoft untuk mempermudah pengembang aplikasi mobile untuk memperbaharui aplikasinya tanpa harus mem-build kembali aplikasi tersebut.

Hal ini bisa dilakukan karena RN menjalankan kode Javascript di atas Activity (Android) atau ViewController (iOS). Dengan menggunakan CodePush, kita dapat menyimpan kode Javascript tersebut di server. Package CodePush yang terpasang pada aplikasi kita nantinya akan memeriksa apakah ada pembaruan pada kode Javascript di server. Jika ada, aplikasi kita akan mengunduh kode baru tersebut untuk kemudian dijalankan.

Note: Berbeda dengan Cordova, RN tidak berjalan di atas webview, melainkan langsung di atas Javascript engine. Itulah mengapa RN bisa mengontrol komponen-komponen native.

Instalasi

Untuk tutorial kali ini, saya fokuskan pada platform Android karena nantinya kita perlu mem-build file apk untuk mendemonstrasikan pemanfaatan CodePush. Pertama, mari kita buat project RN sederhana.

react-native init CodePushTutorial
cd CodePushTutorial
react-native run-android

Kamu bisa mengganti CodePushTutorial dengan nama aplikasi yang kamu inginkan. Jika instalasi berhasil, maka akan muncul tampilan default seperti berikut.

Tampilan Default

Note: Tutorial ini menggunakan RN 0.43

Selanjutnya, kita pasang CodePush pada aplikasi. Pertama, kita perlu memasang code-push-cli terlebih dahulu.

npm install -g code-push-cli

Setelah code-push-cli terpasang, kita dapat menggunakan perintah code-push di terminal. Hingga saat penulisan, setiap operasi CodePush (mendaftar, merilis pembaruan, dll.) hanya bisa dilakukan via terminal.

Jika kamu belum memiliki account CodePush, kamu perlu mendaftar dahulu dengan perintah berikut.

code-push register

Setelah registrasi selesai, kita bisa mulai menambahkan aplikasi ke CodePush dengan perintah berikut.

code-push app add CodePushTutorial

CodePushTutorial bisa kamu ganti dengan nama aplikasimu sendiri.

Note: Kita akan mendapat dua Deployment Key: Staging dan Production. Key ini berfungsi untuk mengidentifikasi ke aplikasi mana pembaharuan akan dikirim. Misal, kita memiliki dua jenis build: Staging (untuk internal tim, pengetesan sebelum rilis) dan Production (yang digunakan user). Maka, kita perlu memasang dua key berbeda pada kedua build tersebut.

Langkah selanjutnya, kita pasang package react-native-code-push.

npm install --save react-native-code-push@latest
react-native link react-native-code-push

Pada saat menghubungkan package react-native-code-push dengan project, kita akan diminta Deployment Key yang akan digunakan. Masukkan Deployement Key Staging yang kita peroleh saat menambahkan aplikasi.

Konfigurasi

Untuk menerapkan CodePush pada aplikasi, kita perlu me-wrap Root Component aplikasi dengan CodePush. Pada tutorial ini, Root Component kita ada di file index.android.js sehingga kita perlu mengubah beberapa hal pada file tersebut.

import React, { Component } from 'react';
...
import codePush from "react-native-code-push";
class CodePushTutorial extends Component {
  render() {
    ...
  }
}
...
let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME };
CodePushTutorial = codePush(codePushOptions)(CodePushTutorial);
export default CodePushTutorial;
AppRegistry.registerComponent('CodePushTutorial', () => CodePushTutorial);

Pertama, kita import fungsi codePush dari package react-native-code-push. Kedua, kita tentukan konfigurasi CodePush-nya. Pada contoh di atas, kita ingin CodePush memeriksa apakah terdapat pembaruan setiap aplikasi di-resume dan melakukan instalasi kode Javascript baru resume selanjutnya. Dokumentasi konfigurasi bisa dilihat di sini. Ketiga, kita wrap Root Component aplikasi (pada contoh di atas komponen CodePushTutorial) dengan fungsi codePush yang kita import beserta objek konfigurasi yang kita inginkan. Setelah itu Reload aplikasi, jika tidak ada error maka konfigurasi kita tidak ada masalah.

Simulasi

Untuk mensimulasikan pemanfaatan CodePush, terlebih dahulu kita build release apk. Untuk mem-build release apk, kamu bisa mengikuti langkah-langkah yang ada di sini.

Setelah kamu membuat release apk, masukkan dan instal apk tersebut ke perangkat Android yang kamu miliki. Kita akan melihat tampilan default yang sama, karena memang kita tidak melakukan perubahan sama sekali terhadap tampilan.

Sekarang, mari kita buat perubahan sederhana. Kita ubah tulisan “Welcome to React Native” menjadi “CodePush Tutorial” pada file index.android.js. Tanpa CodePush, agar perubahan tersebut dapat terlihat di aplikasi versi rilis, tentu kita perlu mem-build dan menginstal ulang aplikasi tersebut. Dengan CodePush, kita cukup merilis perubahan Javascript ke server.

code-push release-react CodePushTutorial android

Setelah kode Javascript berhasil diunggah ke server, kita cukup me-relaunch aplikasi dan perubahan yang kita lakukan akan langsung terlihat.

Perubahan

Kode tutorial ini bisa dilihat di sini.