Adding versioning to future proof the app

It's typical that you don't think about keeping track of the app version for a particular user. However, as the app grows in the number of users as well as releases, you will soon face the problem of update issues and incompatibilities. For example, a user may run an old version of your app but all your backend APIs are now expecting new parameters from a newer app version. Therefore, you may want to think about a strategy to detect the app version locally in order to notify the users for an update requirement. This is also helpful if your backend processes differently for a specific app version.

The app you are going to build is very simple. It will detect the current version and store the information in a service. This is the screenshot of the app:

Adding versioning to future proof the app

Getting ready

This app example must run on a physical device or a simulator.

How to do it...

Observe the following instructions:

  1. Create a new MyAppVersion app using the blank template, as follows, and go to the MyAppVersion folder:
    $ ionic start MyAppVersion blank --v2
$ cd MyAppVersion
  2. Install the app-version plugin:
    $ ionic plugin add cordova-plugin-app-version
  3. Edit ./config.xml by changing the version number, as follows:
    <widget id="com.ionicframework.myappversion637242" version="0.0.123" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Note that your widget id might be different from the one mentioned here. You only need to change the version number. In this case, it is the 0.0.123 version.

  1. Create the services folder inside the app folder, as shown:
    $ mkdir ./src/services
  2. Create myenv.ts in the services folder with the following code:
    import {Injectable} from '@angular/core';
import {AppVersion} from 'ionic-native';

@Injectable()
export class MyEnv {
  public appVersion: any;
  
  constructor() {
    this.appVersion = AppVersion;
  }

  getAppVersion() {
    return this.appVersion.getVersionCode();
  }
}

    This is your only service for this app. In the real-world project, you will need multiple services because some of them will have to communicate directly with your backend.

  3. Open and edit your ./src/app/app.module.ts, as follows:
    import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MyEnv } from '../services/myenv';

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

    The main modification in this file is to inject the MyEnv provider for the entire app.

  4. Open and replace ./src/pages/home/home.html with this code:
    <ion-header>
  <ion-navbar>
    <ion-title>
      MyAppVersion
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="center home">
  <button ion-button (click)="getVersion()" >Get App Version</button>
  <p class="large" *ngIf="ver">
    MyAppVersion {{ ver }}
  </p>
</ion-content>
  5. Open and replace ./src/pages/home/home.ts with the following code:
    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MyEnv } from '../../services/myenv';

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

  constructor(private navCtrl: NavController, public myEnv: MyEnv) {
    this.myEnv = myEnv;
  }

  getVersion() {
    console.log(this.myEnv.getAppVersion());
    this.myEnv.getAppVersion().then((data) => this.ver = data);
  }
}
  6. Open and edit home.scss in the same folder:
    .home {
  p.large {
    font-size: 16px;
  }
}

ion-content {
  &.center {
    text-align: center;
  }
}
  7. Go to your terminal and run the app. If you want to run the app on your physical device, type the given command:
    $ ionic run ios

    For Android, type the following command:

    $ ionic run android

How it works…

In a nutshell, the AppVersion plugin does all the heavy lifting. It's not possible for an Ionic app to find out the current version in its code using Javascript. You may think that using local storage or cookie is an alternative, but the users could also delete that storage manually. In order to have a permanent solution, the AppVersion plugin should be used because it can read your config.xml file and get the version for you.

It's the best practice to create a separate service for all environment variables. That's why you should have a service, called MyEnv. Also, you should inject MyEnv as a provider at the app level because you want to instantiate it only once, instead of doing it every time a new component is created. Observe the following code:

providers: [MyEnv]

Since all the AppVersion methods are based on promise, you should return the entire object as a promise. Let's take a look at the getAppVersion() method in your myenv.ts file:

  getAppVersion() {
    return this.appVersion.getVersionCode();
  }

Then, in your page files, such as home.ts, you should call the getAppVersion method, as shown, and use the .then() method to get the result:

  getVersion() {
    console.log(this.myEnv.getAppVersion());
    this.myEnv.getAppVersion().then((data) => this.ver = data);
  }

If you open the console to inspect the promise object, you will see that it has your app version value and the .then() method. Observe the following screenshot:

How it works…

For more information about the AppVersion plugin, you may want to refer to the official AppVersion documentation at https://github.com/whiteoctober/cordova-plugin-app-version.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.222.111.134