Ionic Tutorial for Mobile App Development - Part 3

Now it’s Part-3 in Series of Ionic framework tutorials for Mobile App Development. In previous parts (Part-1 & Part-2) of this Ionic Tutorial Series, we covered the following topics. If you have reached to this page directly or not clear about above mentioned concepts, we’ll strongly recommend to go through previous Parts and read these for better understanding.

• Introduction to Ionic Framework
• Installation and Setup Development Environment
• Life-cycle of an Ionic Application
• How Navigation works?
• Caching View
• Publishing an Ionic Application
• User-defined Pipes
• Making an HTTP request from Ionic App
• Setting Up a test framework

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.

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

Learning Ionic Mobile App Development

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

• How to use any device function from Ionic App? For example, how to use Camera from Ionic app?
• How to develop a directive using ionic2?
• How to use form validator to develop a form using ionic2?
• How to show toast in Ionic2 application?
• How to use Modal in Ionic 2?
• How to communicate from one view to another in Ionic applications with data?
• How to use SQLLite Ionic native Module in Ionic 2.0 for local storage?
• How to use Google API such as Geo location or google map in ionci2?

How to use any device function from Ionic App? For example, how to use Camera from Ionic app?

Usually, there are so many methods defined in ionic-native library to add any native functions.

For example, how to use Camera from Ionic app? Considering that we have an ionic application already developed as in another Ionic Tutorial here.

• Add Cordova camera plugin:

Add a function on Component to take picture. Add a button and picture holder on HTML.

• Import Camera from Ionic Native:

Run the app using following command as ionic serve does not include cordova.
Back to top

How to develop a directive using ionic 2?

Considering we already have developed an Ionic Mobile App, here we will develop a directive using Ionic 2 as follows:

Step 1: Run the following command from the command prompt in order to generate the directive:

This command will generate the following files:

Step 2: Declare the new directive in ngModule in app.module.ts

change CollapsableImage class as following:

Back to top

How to use form validator to develop a form using ionic 2?

Using a form validator in an already developed Ionic 2 Mobile App, follow the steps:

Step 1: Create a Component for Form

Run the following command

Step 2: Update Component for Form

Step 3: Create a user-defined form validator

It is also possible to create a user defined validator as following:

In this above example, a form builder has been used:

Among the form fields, ‘title’ has only one validation rule which is, this is required and then ‘description’ has more than one validation rule such as,

1. description is a required field
2. the maximum length of the field ‘description’ would not be more than 30
3. and the text pattern for the description should be ‘[a-zA-Z ]*’ which means this is a alphabetic input

Similarly, priority from field also has its own priority However, PriorityValidator is a customized user defined validator.

And finally, status has no validation rule.

For these above flexibility form builder is highly recommended API in order to develop form.

Back to top

How to show toast in Ionic 2 application?

Step 1: Create an Ionic App

Follow the steps described to develop an Ionic Application here and run the new ionic application on the browser.

Step 2: Create a Component

Step 3: add the following plugin

Step 4: Update Page1

Step 5: Change the Page1 HTML

Change Page1.html as follows:

Back to top

How to use Modal in Ionic 2?

Step-1: Create an Ionic App

Follow the steps described in previously developed Ionic Application and run the new ionic application on the browser.

Step-2: Create a component

Run the following command

This will create the following class for the component or Page:

Step-3: Add a template for component

Step-4: Trigger the modal from parent component

To run it from the home page, we need to run the following code:

Back to top

How to communicate from one view to another in Ionic applications with data?

Step-1: Update cordova

If cordova is not updated, it need to be updated with following command

Step-2: Develop an App

Follow the instruction as given in another Ionic Tutorial to develop an Ionic app.

Step-3: add respective platform

For android, use the following command

For iOS, use the following:

Step-4: Push information from Page1 To Page2

• In pages/page1/page1.ts file , import the following Navcontroller and Page 2
  
  import { NavController} from 'ionic-angular'; import {Page2} from '../page2/page2';

  1 2	import { NavController} from 'ionic-angular'; import {Page2} from '../page2/page2';

• Declare the variable of NavController in constructor
  
  constructor(public navCtrl: NavController, _todoService:TodoService) { }

  1 2 3

  constructor(public navCtrl: NavController, _todoService:TodoService) {     }

• Push the variable to Page2
  
  passTodo(){ this.navCtrl.push(Page2, { tite: this.todo.title, description: this.todo.description }); }

  1 2 3 4 5 6

  passTodo(){   this.navCtrl.push(Page2, {     tite: this.todo.title, description: this.todo.description }); }

Step-5: Read information from Page2

• Import necessary libraries
  
  import {NavController, NavParams} from 'ionic-angular';

  1	import {NavController, NavParams} from 'ionic-angular';

• Instantiate the variable in constructor
  
  constructor(private navController: NavController, private navParams: NavParams, private shareService: ShareService) { }

  1 2 3

  constructor(private navController: NavController, private navParams: NavParams, private shareService: ShareService) {   }

• Read the parameter
  
  this.title = navParams.get('title'); this.description = navParams.get(‘description’);

  1 2	this.title = navParams.get('title'); this.description = navParams.get(‘description’);

Back to top

How to use SQLLite Ionic native Module in Ionic 2.0 for local storage?

Step-1: Install plugin

Use an existing ionic 2.0 application, or create an ionic 2.0 application following the steps described in another Ionic App development tutorial.

Then install SqlLite storage, running following command:

Step-2: Create a DB provider

Run the following command to generate a Provider:

This command will generate a provider class name DBProvider inside provider folder.

There are 2 ways to connect with SQLite databases in Ionic 2, such as

1. Using Ionic native’s SqLite adapter: provides nice transaction methods bridged directly of Cordova’s SQLite plugin
2. Using Ionic’s SqlStorage Api: automatically configures SQLStorage in mobile and WebSQL in web browsers

Now in the DB provider we need different functionality for performing different option such as Create table, save data, retrieve data etc.

Here SQLite Ionic Native module will be used for this example, first import the necessary class in DbProvider.

• CREATE DATABASE AND INITIALIZE THE VARIABLE
  In the constructor of DBProvider:
  constructor(private _navController: NavController, private jsonp: Jsonp, private http: Http) { this.data = {}; this.storage = new Storage(SqlStorage); .. … … }

  1 2 3 4 5 6

  constructor(private _navController: NavController, private jsonp: Jsonp, private http: Http) {          this.data = {};     this.storage = new Storage(SqlStorage); .. … … }

• CREATE A TABLE
  platform.ready().then(() => { StatusBar.styleDefault(); let db = new SQLite(); db.openDatabase({ name: "data.db", location: "default" }).then(() => { db.executeSql("CREATE TABLE IF NOT EXISTS profile (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname TEXT, lastname TEXT, address TEXT)", {}).then((data) => { console.log(" profile TABLE CREATED: ", data); }, (error) => { console.error("Unable to execute sql", error); }) }, (error) => { console.error("Unable to open database", error); }); });

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

  platform.ready().then(() => {             StatusBar.styleDefault();             let db = new SQLite();             db.openDatabase({                 name: "data.db",                 location: "default"             }).then(() => {                 db.executeSql("CREATE TABLE IF NOT EXISTS profile (id INTEGER PRIMARY KEY AUTOINCREMENT, firstname TEXT, lastname TEXT, address TEXT)", {}).then((data) => {                     console.log(" profile TABLE CREATED: ", data);                 }, (error) => {                     console.error("Unable to execute sql", error);                 })             }, (error) => {                 console.error("Unable to open database", error);             });         });

• SAVE BULK DATA
  saveProfiles = (profiles) => { let query = "INSERT OR REPLACE INTO profiles VALUES (?, ?, ?, ?, ?, ?)"; for (let profile of profiles) { this.storage.executeSql(query, { profile.firstName, profile.lastName, profile.address }); } return forecasts; }

  1 2 3 4 5 6 7 8 9

  saveProfiles = (profiles) => {     let query = "INSERT OR REPLACE INTO profiles VALUES (?, ?, ?, ?, ?, ?)";     for (let profile of profiles) {       this.storage.executeSql(query, { profile.firstName,                                  profile.lastName,                                  profile.address });     }     return forecasts;   }

• SAVE ONE DATA
  saveAddress(address: string) { this.storage.set('address', address); }

  1 2 3

  saveAddress(address: string) {     this.storage.set('address', address);   }

Step-3: Use DBProvider as a service in Other Page

• RETRIEVE DATA
  
  getProfile(firstName: string) { return this.storage.executeSql("SELECT * FROM profiles WHERE firstName = ?", { firstName }).then((resp) => { if (resp.res.rows.length > 0) { for (var i = 0; i < resp.res.rows.length; i++) { let item = resp.res.rows.item(i); return item; } } }); }

  1 2 3 4 5 6 7 8 9 10

  getProfile(firstName: string) {     return this.storage.executeSql("SELECT * FROM profiles WHERE firstName = ?", { firstName }).then((resp) => {       if (resp.res.rows.length > 0) {         for (var i = 0; i < resp.res.rows.length; i++) {           let item = resp.res.rows.item(i);           return item;         }       }     });   }

Back to top

How to publish an Ionic Mobile Application?

Different Google APIs can be used for an Ionic Mobile Application as follows:

Google Analytics:

Google Maps:

Geo-location:

Google Plus:

Back to top

This was part-3 in Developing Mobile Application using Ionic Framework. You can go to Part-1 & Part-2 in this Ionic Tutorial Series for Mobile App Development from beginners to Intermediate level concepts and implementations. 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