HotPush with Ionic 2 and CodePush
2 likes4,824 views
This document provides an overview of using CodePush and Ionic 2 to enable hot updates across the development lifecycle for mobile apps. It covers setting up CodePush and configuring an Ionic 2 app to use CodePush. The document demonstrates how to check for updates, sync to different deployment stages, and track detailed sync and download progress. It also shows how to deploy updates to CodePush and promote them between stages like staging and production.
![Hot Updates using CodePush and Ionic 2
[hot push across the dev lifecycle]
1 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-1-320.jpg)
![Rename Tab
app/pages/tabs/tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root"
tabTitle="Settings"
tabIcon="cog"></ion-tab>
<!--- ... -->
</ion-tabs>
23 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-23-320.jpg)
![Build Settings Tab
app/pages/page1/page1.html
<ion-navbar *navbar>
<ion-title>Settings</ion-title>
</ion-navbar>
<ion-content padding class="page1">
<ion-row>
<ion-col width-50>
<button (click)="checkForUpdate()">
Check For Update
</button>
</ion-col>
<ion-col width-50>
<button (click)="sync()"
[disabled]="!isUpdateAvailable">
Sync
</button>
</ion-col>
</ion-row>
</ion-content>
24 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-24-320.jpg)
![Deploy with CodePush
[code-push release-cordova]
30 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-30-320.jpg)
![Select a Version
app/pages/page1/page1.html
<!-- ... -->
<ion-list radio-group [(ngModel)]="deployment">
<ion-list-header>
Version
</ion-list-header>
<ion-item>
<ion-label>Staging</ion-label>
<ion-radio value="YOUR-IOS-STAGING-KEY"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Production</ion-label>
<ion-radio value="YOUR-IOS-PRODUCTION-KEY"></ion-radio>
</ion-item>
</ion-list>
<!-- ... -->
38 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-38-320.jpg)
![Pass the Deployment Key
app/pages/page1/page1.html
<!-- ... -->
<button
(click)="checkForUpdate(deployment)"
[disabled]="isInProgress">
Check For Updates
</button>
<button
(click)="sync(deployment)"
[disabled]="!isUpdateAvailable">
Sync
</button>
<!-- ... -->
39 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-39-320.jpg)
![Display Current Package
app/pages/page1/page1.html
<ion-list radio-group [(ngModel)]="deployment">
<!-- ... -->
<ion-list>
<ion-list-header>
Installed Package
</ion-list-header>
<ion-item>
App Version: {{currentPackage?.appVersion}}
</ion-item>
<ion-item>
Description: {{currentPackage?.description}}
</ion-item>
<ion-item>
Label: {{currentPackage?.label}}
</ion-item>
</ion-list>
43 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-43-320.jpg)
![Deploy and Promote
[loading multiple versions as needed]
45 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-45-320.jpg)
![Change the Sync button colour
app/pages/page1/page1.html
<button
(click)="sync(deployment)"
[disabled]="!isUpdateAvailable"
secondary> <!-- ionic will set this to be green -->
Sync
</button>
<!-- ... -->
50 / 65](https://image.slidesharecdn.com/9b361497-3341-4223-b982-560724f4d7a5-160531210035/85/HotPush-with-Ionic-2-and-CodePush-50-320.jpg)
HotPush with Ionic 2 and CodePush
- 1. Hot Updates using CodePush and Ionic 2 [hot push across the dev lifecycle] 1 / 65
- 2. Evan Schultz twitter: @e_p82 github: e-schultz Hello, etc... 2 / 65
- 3. Evan Schultz twitter: @e_p82 github: e-schultz Bertrand Karerangabo twitter: @codenarian github: bertrandk Hello, etc... 3 / 65
- 4. Agenda Review Prerequisites Resources Ionic 2 CodePush CodePushify Your App Create a Sync Tab Deploying to Staging Selecting Deployments Synching Multiple Versions Detailed Sync & Download Progress Q & A 4 / 65
- 5. Prerequisites node git CodePush cli tools Ionic2 CLI tools XCode 5 / 65
- 6. Resources: Slide Repo: https://github.com/rangle/codepush-phonegap-days Demo Repo: https://github.com/rangle/pgdays-codepush-demo Gist with Code: http://bit.ly/22hPKC4 6 / 65
- 7. Ionic 2 Framework 7 / 65
- 8. Ionic 2 Install Ionic 2 npm install -g ionic@beta 8 / 65
- 9. Ionic 2 Install Ionic 2 npm install -g ionic@beta Install Cordova npm install -g cordova 9 / 65
- 10. Ionic 2 Start a new Ionic Project ionic start pgdays-workshop --v2 --ts cd pgdays-workshop 10 / 65
- 11. Ionic 2 Start a new Ionic Project ionic start pgdays-workshop --v2 --ts cd pgdays-workshop Preview in browser ionic serve 11 / 65
- 12. Code Push Microsoft CodePush 12 / 65
- 13. CodePush Setup Install CLI tools npm install -g code-push-cli 13 / 65
- 14. CodePush Setup Install CLI tools npm install -g code-push-cli Create CodePush account code-push register 14 / 65
- 15. CodePush Setup Install CLI tools npm install -g code-push-cli Create CodePush account code-push register Register your app code-push app add <appName> 15 / 65
- 16. Configuring Cordova for CodePush Install CodePush plugin ionic plugin add cordova-plugin-code-push@latest 16 / 65
- 17. Configuring Cordova for CodePush Install CodePush plugin ionic plugin add cordova-plugin-code-push@latest Install Typings npm i typings@0.x -g typings install github:Microsoft/cordova-plugin-code-push/typings/codePush.d.ts --save --ambient 17 / 65
- 18. Configuring Cordova for CodePush Add Deployment Key to config.xml config.xml <platform name="ios"> <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" /> </platform> 18 / 65
- 19. Configuring Cordova for CodePush Add Deployment Key to config.xml config.xml <platform name="ios"> <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" /> </platform> Forget your app or key? no problem code-push app ls # list your registered apps code-push deployment ls AppName -k 19 / 65
- 20. Configuring Cordova for CodePush Let Cordova talk with CodePush config.xml <access origin="*" /> <!-- or --> <access origin="https://codepush.azurewebsites.net" /> <access origin="https://codepush.blob.core.windows.net" /> 20 / 65
- 21. Configuring Cordova for CodePush Let Cordova talk with CodePush config.xml <access origin="*" /> <!-- or --> <access origin="https://codepush.azurewebsites.net" /> <access origin="https://codepush.blob.core.windows.net" /> Let CodePush work with CSP www/index.html <meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *" /> 21 / 65
- 22. Settings Tab 22 / 65
- 23. Rename Tab app/pages/tabs/tabs.html <ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Settings" tabIcon="cog"></ion-tab> <!--- ... --> </ion-tabs> 23 / 65
- 24. Build Settings Tab app/pages/page1/page1.html <ion-navbar *navbar> <ion-title>Settings</ion-title> </ion-navbar> <ion-content padding class="page1"> <ion-row> <ion-col width-50> <button (click)="checkForUpdate()"> Check For Update </button> </ion-col> <ion-col width-50> <button (click)="sync()" [disabled]="!isUpdateAvailable"> Sync </button> </ion-col> </ion-row> </ion-content> 24 / 65
- 25. Check For Update 25 / 65
- 26. codePush.checkForUpdates app/pages/page1/page1.ts import {Page} from 'ionic-angular'; import {ApplicationRef} from '@angular/core' declare const codePush: CodePushCordovaPlugin; export class Page1 { // ... isUpdateAvailable:boolean = false; constructor(private appRef: ApplicationRef) { } checkForUpdate() { codePush.checkForUpdate((result) => { this.isUpdateAvailable = result !== null; this.appRef.tick(); }); } } 26 / 65
- 27. CodePush Sync 27 / 65
- 28. codePush.sync app/pages/page1/page1.ts // ... export class Page1 { // ... sync() { codePush.sync(null, { updateDialog: true, installMode: InstallMode.IMMEDIATE }); } 28 / 65
- 29. Running the App ionic emulate --target="iPhone-6s" 29 / 65
- 30. Deploy with CodePush [code-push release-cordova] 30 / 65
- 31. Build & Deploy Build ionic build 31 / 65
- 32. Build & Deploy Build ionic build Deploy code-push release-cordova pgdays-demo ios 32 / 65
- 33. New Feature: Status Field app/pages/page1/page1.html <!-- ... --> <ion-content padding class="page1"> <ion-row> <ion-col width-20>Status:</ion-col> <ion-col width-80>{{status}}</ion-col> </ion-row> <!-- ... --> </ion-content> 33 / 65
- 34. app/pages/page1/page1.ts export class Page1 { status: string = ''; isProcessing: boolean = false; // .. checkForUpdate() { this.isProcessing = true; this.status = 'Checking ... ' codePush.checkForUpdate((result) => { this.isUpdateAvailable = result !== null; this.status = result === null ? 'Up to Date' : 'Update Available' this.isProcessing = false; this.appRef.tick(); }); } // ... } 34 / 65
- 35. Sync the Update Build & Release CodePush ionic build code-push release-cordova pgdays-demo ios 35 / 65
- 36. Sync the Update Build & Release CodePush ionic build code-push release-cordova pgdays-demo ios Sync the app 36 / 65
- 38. Select a Version app/pages/page1/page1.html <!-- ... --> <ion-list radio-group [(ngModel)]="deployment"> <ion-list-header> Version </ion-list-header> <ion-item> <ion-label>Staging</ion-label> <ion-radio value="YOUR-IOS-STAGING-KEY"></ion-radio> </ion-item> <ion-item> <ion-label>Production</ion-label> <ion-radio value="YOUR-IOS-PRODUCTION-KEY"></ion-radio> </ion-item> </ion-list> <!-- ... --> 38 / 65
- 39. Pass the Deployment Key app/pages/page1/page1.html <!-- ... --> <button (click)="checkForUpdate(deployment)" [disabled]="isInProgress"> Check For Updates </button> <button (click)="sync(deployment)" [disabled]="!isUpdateAvailable"> Sync </button> <!-- ... --> 39 / 65
- 40. Update Sync app/pages/page1/page1.ts export class Page1 { // ... sync(key) { codePush.sync(null, { updateDialog: true, installMode: InstallMode.IMMEDIATE, deploymentKey: key }); } } 40 / 65
- 41. Update checkForUpdate app/pages/page1/page1.ts export class Page1 { // ... checkForUpdate(key) { this.isInProgress = true; this.status = 'Checking for Update'; codePush.checkForUpdate((result) => { this.isUpdateAvailable = result !== null; this.isInProgress = false; this.status = result === null ? 'Application is up-to date' : 'Update Available' this.appRef.tick(); }, null, // error handler key); // deployment key is an optional 3rd parameter } } 41 / 65
- 42. LocalPackage Info 42 / 65
- 43. Display Current Package app/pages/page1/page1.html <ion-list radio-group [(ngModel)]="deployment"> <!-- ... --> <ion-list> <ion-list-header> Installed Package </ion-list-header> <ion-item> App Version: {{currentPackage?.appVersion}} </ion-item> <ion-item> Description: {{currentPackage?.description}} </ion-item> <ion-item> Label: {{currentPackage?.label}} </ion-item> </ion-list> 43 / 65
- 44. app/pages/page1/page1.ts import {Page, Platform} from 'ionic-angular'; // ... export class Page1 { // ... currentPackage: ILocalPackage; constructor(private platform: Platform, private appRef: ApplicationRef) { } ngOnInit() { this.platform .ready() .then( () => this.getCurrentPackage()); } getCurrentPackage() { codePush.getCurrentPackage((result: ILocalPackage) => { this.currentPackage = result; this.appRef.tick(); }) } } 44 / 65
- 45. Deploy and Promote [loading multiple versions as needed] 45 / 65
- 46. Deploy ionic build code-push release-cordova pgdays-demo ios -d Staging --description 'Deployment Select' 46 / 65
- 47. Deploy ionic build code-push release-cordova pgdays-demo ios -d Staging --description 'Deployment Select' Promote code-push promote pgdays-demo Staging Production --des 'Staging -> Production' 47 / 65
- 48. Deploy ionic build code-push release-cordova pgdays-demo ios -d Staging --description 'Deployment Select' Promote code-push promote pgdays-demo Staging Production --des 'Staging -> Production' Run the app ... 48 / 65
- 49. A Minor Change 49 / 65
- 50. Change the Sync button colour app/pages/page1/page1.html <button (click)="sync(deployment)" [disabled]="!isUpdateAvailable" secondary> <!-- ionic will set this to be green --> Sync </button> <!-- ... --> 50 / 65
- 51. Build and Deploy to Staging ionic build code-push release-cordova pgdays-demo ios -d Staging --description 'Color Change' 51 / 65
- 52. Build and Deploy to Staging ionic build code-push release-cordova pgdays-demo ios -d Staging --description 'Color Change' Run the app ... Select Production, and Sync Select Staging, and Sync 52 / 65
- 53. Promote to Production code-push promote pgdays-demo Staging Production --des 'Color Change to Production' 53 / 65
- 54. Detailed Sync 54 / 65
- 55. codePush.sync( syncCallback?: SuccessCallback<SyncStatus>, syncOptions?: SyncOptions, downloadProgress?: SuccessCallback<DownloadProgress>): void; declare enum SyncStatus { UP_TO_DATE, UPDATE_INSTALLED, UPDATE_IGNORED, ERROR, IN_PROGRESS, CHECKING_FOR_UPDATE, AWAITING_USER_ACTION, DOWNLOADING_PACKAGE, INSTALLING_UPDATE } 55 / 65
- 56. app/pages/page1/page1.ts // ... export class Page1 { syncHandler(status: SyncStatus) { // ... } sync(key) { codePush.sync((status) => this.syncHandler(status), { updateDialog: true, installMode: InstallMode.IMMEDIATE, deploymentKey: key }); } 56 / 65
- 57. syncHandler(status: SyncStatus) { switch (status) { case SyncStatus.UP_TO_DATE: this.status = 'Up-to-date'; break; case SyncStatus.UPDATE_INSTALLED: this.status = 'Update Installed'; break; case SyncStatus.UPDATE_IGNORED: this.status = 'Update Ignored'; break; case SyncStatus.ERROR: this.status = 'Error'; break; // ... } 57 / 65
- 58. syncHandler(status: SyncStatus) { switch(status) { // ... case SyncStatus.IN_PROGRESS: this.status = 'In Progress'; break; case SyncStatus.CHECKING_FOR_UPDATE: this.status = 'Checking for Update'; break; case SyncStatus.AWAITING_USER_ACTION: this.status = 'Awaiting User Action'; break; case SyncStatus.DOWNLOADING_PACKAGE: this.status = 'Downloading Package'; break; case SyncStatus.INSTALLING_UPDATE: this.status = 'Installing Update'; break; } this.appRef.tick(); } // ... } 58 / 65
- 59. Download Progress 59 / 65
- 60. codePush.sync( syncCallback?: SuccessCallback<SyncStatus>, syncOptions?: SyncOptions, downloadProgress?: SuccessCallback<DownloadProgress>): void; 60 / 65
- 61. codePush.sync( syncCallback?: SuccessCallback<SyncStatus>, syncOptions?: SyncOptions, downloadProgress?: SuccessCallback<DownloadProgress>): void; // Defines the format of the DownloadProgress object, // used to send periodical update notifications on the progress // of the update download. interface DownloadProgress { totalBytes: number; receivedBytes: number; } 61 / 65
- 62. // ... export class Page1 { downloadProgress: DownloadProgress // ... updateDownloadProgress(downloadProgress: DownloadProgress) { this.downloadProgress = downloadProgress; this.appRef.tick(); } sync(key) { codePush.sync((status) => this.syncHandler(status), { updateDialog: true, installMode: InstallMode.IMMEDIATE, deploymentKey: key }, (progress) => this.updateDownloadProgress(progress)); } } 62 / 65
- 63. <!-- .... after the sync buttons ---> <ion-row> <ion-col width-25>Progress:</ion-col> <ion-col width-75> {{downloadProgress?.receivedBytes}} / {{downloadProgress?.totalBytes}} </ion-col> </ion-row> 63 / 65
- 64. Any Questions? 64 / 65
- 65. Bertrand Karerangabo twitter: @codenarian github: bertrandk Evan Schultz twitter: @e_p82 github: e-schultz Thanks 65 / 65