Što je Ionic Deploy?

Ionic Deploy – jednostavan i brz način ažuriranja Ionic aplikacije

Kada napravite promjenu u svojoj Ionic aplikaciji i želite tu promjenu poslati svim korisnicima jedino što možete napraviti je pripremiti novu verziju aplikacije, poslati ju na Google Play Store ili Apple Store i čekati da oni odobre novu verziju koja će tek tada stići korisnicima. To se može poprilično odužiti i tu ne možete ništa napraviti osim čekati.

U slučajevima kada su te promjene tek kozmetičke bilo bi dobro imati na raspolaganju brži i jednostavniji način slanja ažurirane verzije aplikacije korisnicima. Taj način zove se Ionic Deploy.

Uvod

Ionic Deploy predstavljen je 2015. godine, a omogućava brži i jednostavniji način ažuriranja aplikacije. Nažalost te su promjene ograničene samo na one kozmetičke vezane uz HTML, JS i CSS što znači da u slučaju dodavanja novih Ionic Native pluginova trebate ići standardnim, Google Play Store ili Apple Store, putem.

Live deployments let you publish web assets such as HTML, JS, and CSS directly to your users without going through the app store. – Ionic Services Deploy

Kako bi Ionic Deploy mogao raditi potrebne su četiri stvari:

  • Ionic aplikacija sa svojim APP ID-em
  • Korisnički račun na Ionic Cloud
  • Povezati Ionic Cloud sa Ionic aplikacijom
  • Kreirati Security Profiles

Priprema

Pokrenite novi Ionic projekt i odmah dodajte Android platformu. (P.S. U ovom blog postu radim samo sa Android platformom)

$ ionic start Ionic3Deploy blank
$ cd Ionic3Deploy
$ cordova platform add android

Sada instalirajte podršku za Cloud

$ npm install @ionic/cloud-angular --save

i dodajte u app.module.ts.

APP_ID iz sljedećeg koraka kopirajte ovdje.

import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'APP_ID'
  }
};

@NgModule({
  declarations: [ ... ],
  imports: [
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings)
  ],
  bootstrap: [IonicApp],
  entryComponents: [ ... ],
  providers: [ ... ]
})
export class AppModule {}

Nakon toga na adresi https://apps.ionic.io/ registrirajte Ionic Cloud korisnički račun, ako već niste. Nakon prijave sučelje će biti prazno.

Ionic Cloud

Sada ćete poslati Ionic aplikaciju u Ionic Cloud sučelje. To se radi pomoću naredbe

$ ionic io int

ionic io init

Ako sada pogledate Ionic Cloud sučelje vidjet ćete svoju Ionic aplikaciju, a ispod naziva aplikacije nalazi se APP ID.

Ionic Cloud new app

I još je potrebno kreirati Security Profile. To radite klikom na kotačić s desne strane pored naziva aplikacije unutar Ionic Cloud sučelja.

Ionic Security Profile

Nakon kreiranja produkcijskog certifikata potrebno ga je postaviti. U slučaju Androida to se radi korištenjem keystorea. Ako ste ikada radili postavljanje aplikacije na Google Play Store onda ste već upoznati s postupkom izrade keystorea.

$ keytool -genkey -v -keystore NazivAplikacije.keystore -alias NazivAplikacije -keyalg  RSA -keysize 2048 -validity 10000

Jako je važnu da ovu datoteku i lozinku zapamtite jer će vam trebati za sve kasnije nadogradnje aplikacije.

Datoteku NazivAplikacije.keystore prebacite na radnu površinu (Desktop) kako bi vam bila lako dostupna. Klikom na Edit u gornjoj slici dobit ćete sljedeće

Ionic Security Profile Android

Uvezite keystore datoteku i unesite njezinu lozinku. I to je to!

Postavljanje funkcionalnosti

Sada kreće prava stvar i napokon možete početi s postavljanjam i korištenjem Ionic Deploy funkcionalnosti. Instalirajte Ionic Deploy plugin.

$ cordova plugin add ionic-plugin-deploy --save

Ekran aplikacije sadržavat će samo jedan gumb za provjeru ažuriranja. Također, ovo se može i automatizirati unutar npr. app.component.ts na način da se provjera automatski vrši prilikom pokretanja aplikacije i bez potrebe za klikom na gumb, ali za potrebu ovog primjera provjera ide klikom na gumb.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic3 - Deploy
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 
  <button ion-button full color="primary" (click)="checkIonicDeployUpdate()">Ionic Deploy Update</button>

</ion-content>

Funkcionalnost se sastoji od jedne funkcije checkIonicDeployUpdate() koja vrši preuzimanje ažuriranja this._deploy.download(), otpakiravanje ažuriranja this._deploy.extract() i učitavanje ažuriranja this._deploy.load().

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';

import { Deploy } from '@ionic/cloud-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public _alert: AlertController,
              public _deploy: Deploy) {
              }

  checkIonicDeployUpdate(){
      this._deploy.check().then((snapshotAvailable: boolean) => {
         if(snapshotAvailable){
           let alert = this._alert.create({
             title: 'App Update',
             subTitle: 'New version of this app will be installed now...',
             buttons: ['Okay']
           })
            alert.present();
            this._deploy.download().then(() => {
                 return this._deploy.extract().then(() => {
                      let alert = this._alert.create({
                        title: 'Update ready',
                        subTitle: 'App will now restart...',
                        buttons: [{
                          text: 'Restart',
                          handler: data => {
                            this._deploy.load();
                          }
                        }]
                      })
                      alert.present();
                 }); 
            });
         } else {
           let alert = this._alert.create({
             title: 'No updates',
             subTitle: 'Your app is up to date!',
             buttons: ['Okay']
           })
            alert.present();
         }
      });
  }

}

Aplikacija je u ovom trenutku spremna za korištenje i slobodno ju možete ponuditi korisnicima. Ako kliknu na gumb za provjeru ažuriranja korisnici će dobiti sljedeće

Ionic3 Deploy App

Korištenje funkcionalnosti

Pretpostavimo da su korisnici instalirati vašu Ionic aplikaciju i da ju bez problema koriste. U međuvremenu odlučite npr. promijeniti pozadinsku boju početnog ekrana i boju gumba za provjeru ažuriranja.

Slanje nove verzije aplikacije na Ionic Cloud vrši se pomoću naredbe

$ ionic upload --note "This is first deploy" --deploy production

Ionic Deploy Production

I odmah na adresi https://apps.ionic.io/ možete vidjeti novu verziju aplikacije.

Ionic Deploy Active

Ako sada pokrenete aplikaciju i kliknete na gumb za provjeru nadogradnji dobit ćete novu verziju aplikacije.

Ionic3 Deploy App Active

Zaključak

Osobno, do sada nisam u produkciji ozbiljnije koristio alate vezane uz Ionic Cloud kao što su Auth, Push i Package upravo zbog toga što sam se bojao ovakvih poruka:

Ionic Auth

Ipak, Ionic Deploy je vrlo praktičan način ažuriranja Ionic aplikacija, ako ništa drugo onda barem za vrijeme razvoja i testiranja.

{
    "name": "ionic-deploy",
    "version": "0.0.0",
    "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": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/cloud-angular": "^0.12.0",
        "@ionic/storage": "2.0.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-console": "1.0.5",
        "cordova-plugin-device": "1.1.4",
        "cordova-plugin-splashscreen": "~4.0.1",
        "cordova-plugin-statusbar": "2.2.2",
        "cordova-plugin-whitelist": "1.3.1",
        "ionic-angular": "3.6.0",
        "ionic-plugin-deploy": "~0.6.7",
        "ionic-plugin-keyboard": "~2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^2.1.3",
        "@ionic/cli-plugin-cordova": "1.6.2",
        "@ionic/cli-plugin-ionic-angular": "1.4.1",
        "ionic": "3.7.0",
        "typescript": "2.3.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-whitelist",
        "cordova-plugin-console",
        "cordova-plugin-statusbar",
        "cordova-plugin-device",
        "cordova-plugin-splashscreen",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "Ionic3Deploy: An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-deploy": {},
            "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.

Odgovori

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