Ionic Tutorial for Mobile App Development - Part 2

Let’s continue with Part-2 in Series of Ionic framework tutorials for Mobile App Development. In Part-1 of this Ionic Tutorial Series, we covered topics majorly related to beginner level including Ionic Framework Introduction, Installation and Setup Development Environment for Ionic Framework, explaining life-cycle of an Ionic Application, how navigation works and support for Caching View in Ionic framework. If you have landed to this page directly or not clear about above mentioned concepts, we’ll strongly recommend to go through Part-1 and read these for better understanding.

Also, we have provided a separate Ionic Tutorial for Building a Hybrid Mobile Application Development using Ionic and Cordova; we will refer that already developed application throughout this article series to add more value by implementing more features.

• Build your first Hybrid Mobile App using Ionic and Cordova
• Ionic Tutorial for Mobile App Development - Part 1

Understanding Step by Step Ionic Mobile App Development

We are going to cover following topics in this Ionic Tutorial:

• How to publish an Ionic Mobile Application?
• Developing a User-defined Pipe in Ionic App
• How to Make an HTTP request from an Ionic Application?
• Setup a Test Framework for Ionic application
• How to build a Mobile App for different Platform from Ionic App?

How to publish an Ionic Mobile Application?

Follow the steps to publish an Ionic Mobile App:

• Create an Ionic App
  Follow the steps described here in “Your first Hybrid Mobile App development using Ionic” and run the new ionic application in browser.
• Release a build of Ionic App
  Once you have your Ionic App ready, it needs to release build of the app for each targeted platform. Need to run the following command:
  
  ionic plugin rm cordova-plugin-console

  1	ionic plugin rm cordova-plugin-console

  Build for Android with following command:
  
  cordova build --release android

  1	cordova build --release android

  Need to generate our private key using the keytool command:
  
  keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

  1	keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

  Sign the jar with following command:
  
  $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

  1	$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

  Now the final release binary called <app-name>.apk can be release on the Google Play Store!
  Further details could be found here.

Back to top

Developing a User-defined Pipe in Ionic App

Pipe is kind of attribute directive to format our data using ‘|’ pipe character. Generally it is a Angular concept.

• Step 1: Create an Ionic App
  Follow the steps described in other Ionic tutorial for developing Ionic Mobile Application and run the new ionic application in browser.
  
• Step 2: Create an Ionic Pipe
  Use the following command to generate a pipe
  
  ionic generate pipe EllipsisPipe

  1	ionic generate pipe EllipsisPipe

  This will create all necessary files inside folder pipes,
  
  import { Injectable, Pipe } from '@angular/core'; /* Generated class for the EllipsisPipe pipe. See https://angular.io/docs/ts/latest/guide/pipes.html for more info on Angular 2 Pipes. */ @Pipe({ name: 'ellipsis-pipe' }) @Injectable() export class EllipsisPipe { /* Takes a value and makes it lowercase. */ transform(value, args) { value = value + ''; // make sure it's a string return value.toLowerCase(); } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  import { Injectable, Pipe } from '@angular/core'; /*  Generated class for the EllipsisPipe pipe.   See https://angular.io/docs/ts/latest/guide/pipes.html for more info on   Angular 2 Pipes. */ @Pipe({   name: 'ellipsis-pipe' }) @Injectable() export class EllipsisPipe {   /*     Takes a value and makes it lowercase.    */   transform(value, args) {     value = value + ''; // make sure it's a string     return value.toLowerCase();   } }

  The next step is to update the auto generated pipe to actual ellipsis pipe. Therefore, the transform method need to be changed a following:
  
  transform(value, args) { if (args === undefined) { return value; } value = value + ''; // make sure it's a string if (value.length > args) { return value.substring(0, args) + '...'; } else { return value; } }

  1 2 3 4 5 6 7 8 9 10 11

  transform(value, args) {     if (args === undefined) {          return value;        }     value = value + ''; // make sure it's a string     if (value.length > args) {       return value.substring(0, args) + '...';     } else {       return value;     } }

• Step 3: Add the Pipe to the declaration of the ngModule in app.module.ts file
  
  
  import {EllipsisPipe} from '../pipes/ellipsis-pipe'; @NgModule({ declarations: [ … … … , EllipsisPipe ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ ], providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  import {EllipsisPipe} from '../pipes/ellipsis-pipe';   @NgModule({   declarations: [     … … … ,     EllipsisPipe   ],   imports: [     IonicModule.forRoot(MyApp)   ],   bootstrap: [IonicApp],   entryComponents: [     ],   providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {}

• Step 4: Use Pipe from Front-end
  
  
  <p>{{longText | ellipsis-pipe:50 }}</p>

  1	<p>{{longText | ellipsis-pipe:50 }}</p>

Back to top

How to Make an HTTP request from an Ionic Application?

As we already have created an Ionic Mobile Application, so continue implementing making HTTP request from same Ionic Application.

Generate a Service Provider

By running the following command from the command line, we can create a new service called ‘FriendService’.

This will create a new service inside the provider folder as following:

This new class FriendService, will have a HTTP service imported and would be declared as @Injectable. Therefore it can be injected in any other directive and component.

Add the method to run a GET Request from the FriendService class. For this example, we will use a Public API called randomUser API. This API returns profile of dummy person.

Therefore, a HTTP GET request would be triggered while getFriends() function would be called.

Inject the Service Provider to a Component:

Now from component we need to call the getFriends() method of FriendsService Provider.

Firstly, inject the provider in Component. For example, here we have used GridTest Component so we need to inject FriendsService provider into GridTestComponent as following:

Back to top

Setup a Test Framework for Ionic application

Ionic 2 app generated still doesn’t have the test framework ready in it. Therefore, all the setup and configuration need to done separately.

We will follow the step by step approach to setup Test Framework for our already developed Ionic Application.

Step 1 : Install Dev Dependencies:

Run the following command to install the development dependencies

Step 2 : Setup Karma and Modify Karma Config:

Run the following command to setup karma and it will create a karma.conf.js file

• Modify karma.conf.js to reflect the following:
  // Karma configuration file, see link for more information // https://karma-runner.github.io/0.13/config/configuration-file.html module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', 'angular-cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-remap-istanbul'), require('karma-mocha-reporter'), require('angular-cli/plugins/karma') ], files: [ { pattern: './src/test.ts', watched: false } ], preprocessors: { './src/test.ts': ['angular-cli'] }, mime: { 'text/x-typescript': ['ts','tsx'] }, remapIstanbulReporter: { reports: { html: 'coverage', lcovonly: './coverage/coverage.lcov' } }, angularCli: { config: './angular-cli.json', environment: 'dev' }, reporters: config.angularCli && config.angularCli.codeCoverage ? ['mocha', 'karma-remap-istanbul'] : ['mocha'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); };

  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

  // Karma configuration file, see link for more information // https://karma-runner.github.io/0.13/config/configuration-file.html module.exports = function (config) {   config.set({     basePath: '',     frameworks: ['jasmine', 'angular-cli'],     plugins: [       require('karma-jasmine'),       require('karma-chrome-launcher'),       require('karma-remap-istanbul'),       require('karma-mocha-reporter'),       require('angular-cli/plugins/karma')     ],     files: [       { pattern: './src/test.ts', watched: false }     ],     preprocessors: {       './src/test.ts': ['angular-cli']     },     mime: {       'text/x-typescript': ['ts','tsx']     },     remapIstanbulReporter: {       reports: {         html: 'coverage',         lcovonly: './coverage/coverage.lcov'       }     },     angularCli: {       config: './angular-cli.json',       environment: 'dev'     },     reporters: config.angularCli && config.angularCli.codeCoverage               ? ['mocha', 'karma-remap-istanbul']               : ['mocha'],     port: 9876,     colors: true,     logLevel: config.LOG_INFO,     autoWatch: true,     browsers: ['Chrome'],     singleRun: false   }); };

Step 3 : Configure Angular CLI and Setup Test Environment:

Create a file in the root folder of your project called angular-cli.json and add the following:

• Create a folder inside of src called environments
• Create a file at src/environments/environment.prod.ts and add the following:
  export const environment: any = { production: true, };

  1 2 3

  export const environment: any = {   production: true, };

• Create a file at src/environment/environment.ts and add the following:
  // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `angular-cli.json`. export const environment: any = { production: false, };

  1 2 3 4 5 6 7 8

  // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `angular-cli.json`. export const environment: any = {   production: false, };

Step 4 : Setup Mocks or Polyfills:

A mock configuration for test.

• Create a file at src/mocks.ts and add the following:
  
  export class ConfigMock { public get(): any { return ''; } public getBoolean(): boolean { return true; } public getNumber(): number { return 1; } } export class FormMock { public register(): any { return true; } } export class NavMock { public pop(): any { return new Promise(function(resolve: Function): void { resolve(); }); } public push(): any { return new Promise(function(resolve: Function): void { resolve(); }); } public getActive(): any { return { 'instance': { 'model': 'something', }, }; } public setRoot(): any { return true; } } export class PlatformMock { public ready(): any { return new Promise((resolve: Function) => { resolve(); }); } } export class MenuMock { public close(): any { return new Promise((resolve: Function) => { resolve(); }); } }

  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

  export class ConfigMock {    public get(): any {     return '';   }    public getBoolean(): boolean {     return true;   }    public getNumber(): number {     return 1;   } } export class FormMock {   public register(): any {     return true;   } } export class NavMock {    public pop(): any {     return new Promise(function(resolve: Function): void {       resolve();     });   }    public push(): any {     return new Promise(function(resolve: Function): void {       resolve();     });   }    public getActive(): any {     return {       'instance': {         'model': 'something',       },     };   }    public setRoot(): any {     return true;   } } export class PlatformMock {   public ready(): any {     return new Promise((resolve: Function) => {       resolve();     });   } } export class MenuMock {   public close(): any {     return new Promise((resolve: Function) => {       resolve();     });   } }

• Create a file at src/polyfills.ts and add the following class to import:
  
  // This file includes polyfills needed by Angular 2 and is loaded before // the app. You can add your own extra polyfills to this file. import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/set'; import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; import 'zone.js/dist/zone';

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  // This file includes polyfills needed by Angular 2 and is loaded before // the app. You can add your own extra polyfills to this file. import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/set'; import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; import 'zone.js/dist/zone';

Step 5 : Setup Test Configuration:

Create a file at src/test.ts and add the following:

Step 6 : Add src/tsconfig.test.ts file:

Step 7 : Add Script Command for test to package.json:

Step 8 : Create Test Spec for AppComponent:

Create a file at src/app/app.spec.ts

beforeEach will run before every test and afterEach will run after every test, so since we have two tests in this file, the process would look something like this:

1. Create TestBed testing environment
2. Set up references
3. Run is createdtest
4. Clean up references
5. Create TestBed testing environment
6. Set up references
7. Run initialises with a root page of HomePagetest
8. Clean up references

Step 9 : Create Test Spec for Page1:

Create a file at src/pages/pag1/pag1.spec.ts and add the following:

Step 10 : Run Test:

The following command will run the test

Back to top

How to build a Mobile App for different Platform from Ionic App?

We already have created Ionic Application here, so how to build that application for different platforms? Let’s understand it.

Add Plugin to the App:

• Add IOS Platform:
  
  ionic platform add ios

  1	ionic platform add ios

• Or, Add Android Platform:
  
  ionic platform add android

  1	ionic platform add android

Build Project:

Android need to be installed in the machine and ANDROID_HOME System properties variable need to be added.

Set ANDROID_HOME in following ways for different OS:

The project is built in the conference/platforms/android folder

Run The App:

It is possible to run the application on an Android device connected to computer using USB cable:

Ionic also support Android emulator

Back to top

This was part-2 in Developing Mobile Application using Ionic Framework. Following parts in this series will contain more practical examples. Also, you can go to Part-1 in this Ionic Tutorial Series for Mobile App Development for beginners level concepts. Keep in touch.

More Mobile App Development and Related Articles:

• Hybrid Mobile App Development with PhoneGap, AngularJS and Bootstrap
• Getting started with AngularJS
• Angular 2 - Beginner to Professional
• Getting started with Bootstrap
• Beginners Guide to jQuery Mobile App Development
• Exploring the Difference between Google Play Store and Apple App Store