Ažuriranje Ionic aplikacije moguće je na nekoliko načina. Prvi je naravno koristeći Google Store, drugi je koristeći Ionic Deploy, treći je ručna instalacija nove verzije aplikacije svakom korisniku posebno dok je četvrti način koristeći App Update plugin (u slučaju ovog plugina moguće je ažurirati isključivo Android verzije Ionic aplikacije).
Više o načinu korištenja App Update plugina u nastavku ovog blog posta.
Kreiranje aplikacije
Za početak kreiram novu Ionic aplikaciju i odmah dodajem Android platformu jer kasnije planiram aplikaciju pokrenuti na Android mobilnom uređaju
|
1 2 3 |
$ ionic start IonicAppUpdate blank $ cd IonicAppUpdate $ ionic cordova platform add android |
Sada ću instalirati App Update plugin koji će biti zadužen za ažuriranje aplikacije.
|
1 2 |
$ ionic cordova plugin add cordova-plugin-app-update $ npm install --save @ionic-native/app-update |
Plugin odmah dodajem u app.module.ts
|
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 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { AppUpdate } from '@ionic-native/app-update'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, AppUpdate, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} |
Trenutna verzija aplikacije (0.0.1) navedena je u config.xml datoteci.
|
1 2 3 4 |
<?xml version='1.0' encoding='utf-8'?> <widget id="com.tomislavstankovic.ionicappupdate" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>IonicAppUpdate</name> ... |
Kako bi kasnije mogao provjeriti postoji li nova verzija Android aplikacije moram ugraditi glavnu funkcionalnost koja će se nalaziti unutar home.ts datoteke.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { AppUpdate } from '@ionic-native/app-update'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, private appUpdate: AppUpdate) { const updateUrl = 'https://www.tomislavstankovic.com/Ionic/update.xml'; this.appUpdate.checkAppUpdate(updateUrl); } } |
Za potrebu ovog primjera promijeniti ću sadržaj unutar home.html datoteke u kojoj ću prikazati trenutnu verziju Ionic aplikacije.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-header> <ion-navbar> <ion-title> Ionic AppUpdate </ion-title> </ion-navbar> </ion-header> <ion-content padding> <h1>App Update</h1> <p>This plugin does self-update for android</p> <p>App version="0.0.1"</p> </ion-content> |
P.S. Nakon instalacije App Update plugina nisam mogao instalirati Ionic aplikaciju na uređaj niti kreirati APK zbog sljedeće greške
To sam riješio instalacijom Android Support v4 client library
|
1 |
$ cordova plugin add cordova-plugin-android-support-v4 |
Aplikaciju nakon toga uspješno pokrećem
Nova verzija aplikacije
Sada ću kreirati novu verziju aplikacije u kojoj ću samo promijeniti sadržaj unutar home.html datoteke.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ion-header> <ion-navbar> <ion-title> Ionic AppUpdate </ion-title> </ion-navbar> </ion-header> <ion-content padding> <h1>App Update</h1> <p>This plugin does self-update for android</p> <p>App version="0.0.2"</p> </ion-content> |
Također, isto moram napraviti i unutar config.xml datoteke jer inače nije moguće ažurirati aplikaciju.
|
1 2 3 4 |
<?xml version='1.0' encoding='utf-8'?> <widget id="com.tomislavstankovic.ionicappupdate" version="0.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>IonicAppUpdate</name> ... |
Gdje se nalazi nova verzija aplikacije?
Pretpostavimo da moju aplikaciju koristi nekoliko desetaka osoba na raznim lokacijama i da svima njima moram poslati novu verziju. S obzirom da to nisam u mogućnosti napraviti koristeći npr. Google Store moram smisliti novu lokaciju s koje korisnici mogu preuzeti novu verziju aplikacije. Ranije sam već unutar Ionic aplikacije naveo da će se nove verzije aplikacije nalaziti na poveznici ‘https://www.tomislavstankovic.com/Ionic/update.xml’ pa ju sada moram i kreirati.
To činim putem FTP-a na način da kreiram mapu naziva “Ionic” unutar koje se nalazi informacija u novoj verziji Ionic aplikacije kao i sama Ionic aplikacija tj. novi APK.
Kreiram datoteku update.xml
|
1 2 3 4 5 |
<update> <version>36</version> <name>IonicAppUpdate</name> <url>https://www.tomislavstankovic.com/Ionic/IonicAppUpdate.apk</url> </update> |
I uploadam novi APK.
Kada sljedeći put pokrenem aplikaciju automatski će se provjeriti postoji li ažuriranje i ako postoji ono će se automatski instalirati.
Zaključak
Korištenje App Update plugina dobro je rješenje u slučajevima kada želite svoju Ionic aplikaciju učiniti dostupom odabranom krugu osoba, npr. unutar neke tvrtke, tj. kada ju ne želite učiniti javno dostupnom putem Google Storea.
I za kraj, struktura projekta prema package.json datoteci
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
{ "name": "IonicAppUpdate", "version": "0.0.1", "author": "Tomislav Stanković", "homepage": "https://www.tomislavstankovic.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "5.0.3", "@angular/compiler": "5.0.3", "@angular/compiler-cli": "5.0.3", "@angular/core": "5.0.3", "@angular/forms": "5.0.3", "@angular/http": "5.0.3", "@angular/platform-browser": "5.0.3", "@angular/platform-browser-dynamic": "5.0.3", "@ionic-native/app-update": "^4.5.2", "@ionic-native/core": "4.4.0", "@ionic-native/splash-screen": "4.4.0", "@ionic-native/status-bar": "4.4.0", "@ionic/storage": "2.1.3", "cordova-android": "^6.2.3", "cordova-plugin-app-update": "^1.4.13", "cordova-plugin-appversion": "^1.0.0", "cordova-plugin-device": "^1.1.4", "cordova-plugin-ionic-webview": "^1.1.11", "cordova-plugin-splashscreen": "^4.0.3", "cordova-plugin-whitelist": "^1.3.1", "ionic-angular": "3.9.2", "ionic-plugin-keyboard": "^2.2.1", "ionicons": "3.0.0", "rxjs": "5.5.2", "sw-toolbox": "3.6.0", "zone.js": "0.8.18" }, "devDependencies": { "@ionic/app-scripts": "3.1.5", "typescript": "2.4.2" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-app-update": {}, "cordova-plugin-device": {}, "cordova-plugin-ionic-webview": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-whitelist": {}, "ionic-plugin-keyboard": {} }, "platforms": [ "android" ] } } |
Hvala na ovom postu, sve radi kako sat 🙂
Nema na čemu. Drago mi je kada mogu pomoći.