[IONIC] IONIC Cordova에서 codepush 설치 - appcenter

ionic 프로젝트 생성

프로젝스 생성하고 andorid, ios 플랫폼을 추가합니다.

$ ionic start first-project
$ cd first-project
$ ionic cordova platform add android
$ ionic cordova platform add ios

 

Appcenter 프로젝트 생성

appcenter에 로그인하고 android, ios 프로젝트를 생성합니다.

$ npm install -g appcenter-cli
$ appcenter login
$ appcenter apps create -d FirstProject -o Android -p Cordova
$ appcenter apps create -d FirstProject -o iOS -p Cordova

 

codepush cordova 영문 메뉴얼

https://docs.microsoft.com/en-us/appcenter/distribution/codepush/cordova

codepush 플러그인을 설치합니다.

$ cordova plugin add cordova-plugin-code-push@latest
$ npm install @ionic-native/code-push
$ cordova plugin add cordova-plugin-whitelist

 

src/app/app.modules.ts

....
import { CodePush } from '@ionic-native/code-push/ngx'

@NgModule({
  ....
  providers: [
    ....
    CodePush
  ],
  ....
})
....

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { CodePush } from '@ionic-native/code-push/ngx'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    CodePush,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

 

config.xml

config.xml 에 app_secret와 codepushDeplymentKey를 입력합니다.

codePushDeployKey는 아래 포스트에서 확인하세요.

[REACT NATIVE] CODEPUSH DEPLOYMENT KEY 설정 [APPCENTER]

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    ....
    <platform name="android">
        <preference name="APP_SECRET" value="xxxxxx" />
        <preference name="CodePushDeploymentKey" value="xxxxxx" />
        ....
    </platform>
    <platform name="ios">
        <preference name="APP_SECRET" value="xxxxxx" />
        <preference name="CodePushDeploymentKey" value="xxxxxxx" />
        ....
    </platform>
    ....
</widget>

 

src/app/tab1/tab1.page.ts

import { Component } from '@angular/core';
import { CodePush, InstallMode } from '@ionic-native/code-push/ngx';
import { AlertController, Platform } from '@ionic/angular';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(
    private codePush: CodePush,
    private alertController: AlertController,
    private platform: Platform
  ) {
    this.platform.ready().then(() => {
      this.checkCodePush()
    })
  }

  progress = ''

  checkCodePush() {
    this.codePush.sync({
      updateDialog: {
        appendReleaseDescription: true,
        descriptionPrefix: '\n\nChange log:\n'
      },
      installMode: InstallMode.IMMEDIATE
    }, downloadProgress => {
      this.progress = `Downloaded ${downloadProgress.receivedBytes} of ${downloadProgress.totalBytes}`
    }).subscribe(
      data => {
        console.log('Success: ', data)
      },
      err => {
        console.log('Error: ', err)
      }
    )
  }
}

 

src/app/tab1/tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <p>{{ progress }}</p>
    <p>version 1</p>
</ion-content>

 

배포하기

$ appcenter codepush release-cordova -a romeoh/firstproject -d Staging

 

앱 업데이트

$ ionic cordova build ios
$ appcenter codepush release-cordova -a romeoh/firstproject -d Staging

소스를 변경하고 build 해서 appcenter에 배포하고

앱을 다시 실행하면 실시간 업데이트 되는것을 확인 할 수 있습니다.