반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 개발
- build
- ReactNative
- TensorFlow
- PYTHON
- qunit
- 리눅스
- Chrome
- MAC
- jest
- react
- linux
- MachineLearning
- androidstudio
- picker
- IOS
- 맥
- unittest
- localserver
- 센토스
- node
- Android
- centos
- webpack
- xcode
- 네트워크
- avds
- vsCode
- VirtualBox
Archives
- Today
- Total
로메오의 블로그
[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에 배포하고
앱을 다시 실행하면 실시간 업데이트 되는것을 확인 할 수 있습니다.
반응형
'Frontend > angular' 카테고리의 다른 글
[IONIC] angular http 통신 (0) | 2020.02.04 |
---|---|
[IONIC] tab navigation 구현하기 (0) | 2020.02.04 |
[Ionic] Ionic 주요 명령어 정리 (0) | 2020.01.28 |
[Ionic] alert, toast, confirm 사용 (2) | 2020.01.17 |
[Ionic] net::ERR_CLEARTEXT_NOT_PERMITTED 오류 해결 - Android (0) | 2020.01.16 |
Comments