Ionic Tutorial for Mobile App Development – Part 3

By | July 10, 2017
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest

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 Mobile App Development

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?

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
  • Declare the variable of NavController in constructor
  • Push the variable to Page2

Step-5: Read information from Page2

  • Import necessary libraries
  • Instantiate the variable in constructor
  • Read the parameter

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:

  • CREATE A TABLE

  • SAVE BULK DATA

  • SAVE ONE DATA

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

  • RETRIEVE DATA

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

The course is designed to learn Building Native iOS and Android Applications using AngularJS, Cordova and the Ionic 2/3 Framework. Provide you the opportunity to Build 4 Complete Mobile Apps!

What you will learn in this Ionic Online Course:

  • Using the powerful features of Ionic 2, how to Build Native Apps for iOS and Android with Angular.
  • To get detailed and in-depth understanding of Ionic 2 to learn more about very advanced features and optimize Mobile Applications
  • Testing on real devices for iOS and Android Mobile apps and how to publish those apps to the app stores of Android and Apple.
  • View Complete Curriculum

Followings are few highlight about this Ionic 2/Ionic 3 Online Course:

  • Best Seller Udemy Online Course
  • 10,158++ students enrolled
  • 1,795 Review available
  • 14.5 Hours on-demand videos
  • 26 Articles
  • 25 Supplemental Resource
  • Access on Mobile and TV
  • Certificate of Completion
  • Lifetime Access
  • 30 days Money back guarantee
  • You can get the course at Discounted Price here.

Most attractive feature is 30 days Money Back Guarantee means there is NO RISK. If you didn’t like this ASP.NET Core and Angular 2 Online Course, you can refund your money back within 30 days of purchase.

Take-This-Course

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:

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInDigg thisPin on Pinterest