Ažuriranje Ionic Android aplikacije bez Google Storea

Ažuriranje Ionic Android aplikacije bez Google Storea

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

$ 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.

$ ionic cordova plugin add cordova-plugin-app-update
$ npm install --save @ionic-native/app-update

Plugin odmah dodajem u app.module.ts

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.

<?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.

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.

<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

Ažuriranje Ionic Android aplikacije

To sam riješio instalacijom Android Support v4 client library

$ cordova plugin add cordova-plugin-android-support-v4

Aplikaciju nakon toga uspješno pokrećem

Ažuriranje Ionic Android aplikacije

Nova verzija aplikacije

Sada ću kreirati novu verziju aplikacije u kojoj ću samo promijeniti sadržaj unutar home.html datoteke.

<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.

<?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

<update>
    <version>36</version>
    <name>IonicAppUpdate</name>
    <url>https://www.tomislavstankovic.com/Ionic/IonicAppUpdate.apk</url>
</update>

I uploadam novi APK.

Ažuriranje Ionic Android aplikacije

Kada sljedeći put pokrenem aplikaciju automatski će se provjeriti postoji li ažuriranje i ako postoji ono će se automatski instalirati.

Ažuriranje Ionic Android aplikacije

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

{
    "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"
        ]
    }
}

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

2 misli o “Ažuriranje Ionic Android aplikacije bez Google Storea”

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *