React Native + Codepush Setup

Photo by Rahul Chakraborty on Unsplash

React Native ကို MS App Center CodePush နှင့်ဘယ်လို Setup လုပ်မလဲဆိုတာရေးသားမှာဖြစ်ပါတယ်။ Documentation မှာဖော်ပြထားပေမယ့် တစ်ချို့အပိုင်းတွေကလိုက်လုပ်ရတာအဆင်မပြေသေးလို့ ကိုယ်ပိုင်ဟိုရှာဒီရှာ လုပ်ရင်းလွယ်ကူတဲ့နည်းတွေ့လို့ ကိုယ့်အတွက်လည်း Reference ဖြစ်အောင် ရေးသားထားခြင်းဖြစ်ပါတယ်။

ပထမဦးဆုံး React Native App တစ်ခု init လုပ်ပါ့မယ်။

react-native init ReactNativeCodePush

Init လုပ်လိုက်တဲ့ ReactNativeCodePush folder ထဲကိုဝင်ပြီးတော့ အောက်ဖော်ပြပါ command ကို run လိုက်ရင် React Native default welcome ကျလာမှာဖြစ်ပါတယ်။

react-native run-ios
RN Welcome

ပြီးသွားပြီဆိုရ MS App Center မှာ Account create လုပ်ပါ။ App create မလုပ်ပါနဲ့။ ပြီးရင် code-push ကို အောက်ဖော်ပြပါ command သုံးပြီး globally install လုပ်ပါ။

npm install -g code-push

AppCenter ကိုရော Globally install လုပ်လိုက်ပါ…

npm install -g appcenter

အခုကျွန်တော်တို့ App Center ထဲကို ကျွန်တော်တို့ App create လုပ်ဖို့ရာအတွက် code-push command ကိုသုံးမှာဖြစ်ပါတယ်။

code-push ကို App Center နှင့်ချိတ်ဆတ်ဖို့ရာအတွက် code-push register ဆိုပြီး terminal ကနေ run လိုက်ရင် browser tab တစ်ခုအလိုအလျောက်ပွင့်လာပြီး App Center နှင့်ချိတ်ဆက်ဖို့ token ပေးပါလိမ့်မယ်။ ရလာတဲ့ token ကို terminal က token request နေတဲ့အနေရာမှာ Paste လိုက်ရင် App Center နှင့် ချိတ်ဆတ်ပြီးသားဖြစ်သွားပါပီ။

App Center မှာ App Create လုပ်ရာမှာ iOS အတွက်သီးသန့် Android အတွက်သီးသန့် App Create လုပ်ရပါတယ်။

ကျွန်တော်တို့ Android အတွက်ကော iOS အတွက်ကော create လုပ်ဖို့ရာအတွက် အောက်ဖော်ပြပါ command ကို project directiory ထဲကနေ terminal က run ပေးပါ။

code-push app add ReactNativeCodePush-ios ios react-native
code-push app add ReactNativeCodePush-android android react-native

အောက်ဖော်ပြပါ အတိုင်း Similar Result ရရှိပါလိမ့်မယ်။

iOS/Android appcenter deployment

ကျွန်တော်တို့အခု MSAppCenter Dashboard ကိုသွားကြည့်ရင် ReactNativeCodePush-ios နှင့် ReactNativeCodePush-android ဆိုပြီး App နှစ်ခုတွေ့ပါလိမ့်မယ်။ အထက်ဖော်ပြပါ image မှာ ios အတွက်ဆို ios အတွက်သီးသန့် Deployment Key နှင့် android အတွက်ဆို android အတွက်သီးသန့် Deployment key ရရှိတာပါ။ ကျွန်တော်တို့က locally စမ်းသပ်မှာဖြစ်တဲ့အတွက် Staging Key ကိုအသုံးပြုရပါ့မယ်။ Production Key ကတော့ Production Distribute လုပ်တဲ့အချိန်မှာသုံးရမှာဖြစ်ပါတယ်။ လောလောဆယ်တစ်နေရာရာမှာ မှတ်ထားနိုင်ပါတယ်။

အခုကျွန်တော်တို့ reactnative code push ကို project မှာ install လုပ်ဖို့ရာအတွက် အောက်ဖော်ပြပါ project ကို project directory ကနေ terminal ကနေ run ပေးပါ

yarn add react-native-code-push
react-native link react-native-code-push

အထက်ဖော်ပြပါ command ကို run တဲ့အချိန်မှာ CodePush deployment key for Android နှင့် CodePush deployment key for iOS ဆိုပြီးတောင်းပါလိမ့်မယ်။ ကျွန်တော်တို့ codepush add ဆိုပြီး run ခဲ့တုန်းက Staging Deployment Key ထည့်ပေးရမှာဖြစ်ပါတယ်။ မမှတ်မိဘူးဆိုရင် အောက်ဖော်ပြပါ command နှင့်ပြန်ကြည့်လို့ရပါတယ်… setkyar နေရာမှာမိမိ app center username ကိုထည့်ပေးရမှာဖြစ်ပါတယ်

appcenter codepush deployment list -a setkyar/ReactNativeCodePush-android //For android
appcenter codepush deployment list -a setkyar/ReactNativeCodePush-android //For ios

အခုဆိုရင်ကျွန်တော်တို့ Codepush setup ကပြီးသွားပါပီ။ Codepush Plugin Usage ဒီမှာ ဖတ်နိုင်ပါတယ်။

Usage ဖတ်ရတာပျင်းရင်တော့ အောက်ဖော်ပြပါအတိုင်းလိုက်စမ်းနိုင်ပါတယ်။ ပထမဆုံး App.js ကိုအောက်ဖော်ပြပါ code နှင့် update လုပ်လိုက်ပါ။ ပြီးရင် react-native run-ios နှင့် App ကို run ပါ။ Run ပြီးသွားပြီဆိုရင် App.js ဖိုင်ထဲက Please update me! ဆိုတဲ့ စာသားကိုတစ်ခုခုနှင့် update လုပ်လိုက်ပါ။ Update လုပ်ပြီး release လုပ်ဖို့ရာအတွက် အောက်ဖော်ပြပါ command ကို terminal ကနေ run လိုက်ပါ။ ထုံးစံအတိုင်းဘဲ setkyar နေရာမှာ MS App Center ကမိမိအမည်ကိုအစားထိုးလိုက်ပါ။

appcenter codepush release-react -a setkyar/ReactNativeCodePush-ios

ပြီးလျှင် simulator က app က Check for updates ဆိုတဲ့ Text ကို click လုပ်လိုက်ပါ။

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
import codePush from "react-native-code-push";
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
type Props = {};
export default class App extends Component<Props> {
onButtonPress() {
codePush.sync({
updateDialog: true,
installMode: codePush.InstallMode.IMMEDIATE
});
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.onButtonPress}>
<Text>Check for updates</Text>
</TouchableOpacity>
<Text style={styles.welcome}>
Please update me!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
App = codePush(App);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

အောက်ဖော်ပြပါအတိုင်း Updat Available ဆိုတဲ့စာသားကိုမြင်ရမှာဖြစ်ပါတယ်။ Install လုပ်လိုက်ရင် Please update me! ဆိုတဲ့နေရာမှာ အစားထိုးလိုက်တဲ့ စာသားပေါ်လာမှာဖြစ်ပါတယ်။

ကျွန်တော့် React Native Environment ကတော့အောက်ဖော်ပြပါအတိုင်းဖြစ်ပါတယ်။

Environment:
OS: macOS High Sierra 10.13.3
Node: 9.11.1
Yarn: 1.6.0
npm: 5.8.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.1 AI-173.4670197
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.3 => 0.55.3