How to Display Version number on Ionic iOS and Android Builds
In this post, you will learn how to read the version of your app from the target build settings and display it inside of Ionic’s iOS and Android builds. At the end of this tutorial, we will present a working build displaying the app’s version number. For this, we will:
- Use the Supermodular2 starter app and set it all up and running.
- Use Ionic’s plugin App Version.
- Build the app and display the version number
Note: The complete source code of this tutorial is available in the ionic-display-version Github repository.
Prerequisites
To follow along with this tutorial, you will need:
- Supermodular2: This is a free starter template that allows you to start a new Ionic 3 project quickly offering some basic features commonly used in recent mobile applications. We are going to use it in order to build a basic Ionic 3 app with an extremely modular architecture and best software development practices applied. In the next section, we will go through all the steps needed for downloading and running the app.
- App Version, a necessary Ionic plugin
Step 1: Clone GitHub Repo
Visit http://github.com/appseed-io/supermodular2 and download or clone the Supermodular 2 app:
$git clone https://github.com/appseed-io/supermodular2.git
Alternatively, it is recommended that you fork the repository since, later, you will be able to push any code you will add to this project straight to your own project repository.
Step 2: Install Libraries
Open a terminal window and navigate to the supermodular2
local folder. Install the NodeJS dependencies:
$npm install
Step 3: Run the Starter App
In your terminal, make sure you are located in the supermodular2
folder and run the command:
$ionic serve --lab
or for a web preview:
$ionic serve
From the Platforms menu you can toggle between the available platforms(iOS, Android, Windows Phone).
Step 4: Install App Version plugin
In your terminal, navigate to the supermodular2 folder and run the command:
$ ionic cordova plugin add cordova-plugin-app-version
answer ‘yes’ to the dialogs that pop up and then run the command:
$ npm install --save @ionic-native/app-version
Step 5: Display Version Number in Sidemenu
ADD VERSION NUMBER IN MARKUP
Inside the file src/app/app.html
we add the following code
And the webview looks like this:
IMPORT APP VERSION PLUGIN TO APP.MODULE.TS
We need to import the plugin by adding the following code to the src/app.module.ts file
USE APP VERSION PLUGIN FROM APP.COMPONENT.TS
We add the following code under src/app.component.ts
In line 48, we call the getVersionNumber()
method provided by the App Version plugin. It returns with our app’s version or an error message in console, if anything went wrong.
DISPLAY APP VERSION IN VIEW
In a previous step we added the App Version
label in our HTML code. Now it is time to bind it with the actual data by adding the following code: {{ app_version }}
CHANGING THE APP VERSION
Our app’s version number is located in config.xml
file in the project’s folder, as shown below.
For this demo we will leave the default value.
Important note : This plugin reads the version from the target build settings so it is not available in the webview. We must build the project, install the app and try it in a real device, as we will demonstrate.
Step 6: Build and Use the App
Navigate to the project’s folder with the command line and run the following command:
$ ionic cordova build android
An installation file has been created. Find it at:
platform/android/build/outputs/apk/android-debug.apk
Now a few changes should be made in your device’s settings. If using USB cable for the transfer, make sure you have USB Debbuging
enabled. Also, from security settings allow Unknown Sources
to be installed in the device. Install and launch the app.
Important: If having a server timeout error during launch, add the following line in your config.xml
file and build it again following the steps described previously.
Our app should look like this:
References
Ionic, Ionic App Version, Source code, Cover photo
Originally published at http://appseed.io/blog/how-display-version-number-ionic-ios-and-android-builds.