Ionic Tutorial for Mobile App Development – Part 2

By | June 30, 2017

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.

Ionic Mobile App Development

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?

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:
    Build for Android with following command:
    Need to generate our private key using the keytool command:
    Sign the jar with following command:
    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
    This will create all necessary files inside folder pipes,
    The next step is to update the auto generated pipe to actual ellipsis pipe. Therefore, the transform method need to be changed a following:
  • Step 3: Add the Pipe to the declaration of the ngModule in app.module.ts file

  • Step 4: Use Pipe from Front-end

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:HTTP Request from Ionic Mobile App

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.Ionic Tutorial for Mobile App Development

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:

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:

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

Step 4 : Setup Mocks or Polyfills:

A mock configuration for test.

  • Create a file at src/mocks.ts and add the following:
  • Create a file at src/polyfills.ts and add the following class to import:

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:
  • Or, Add Android Platform:

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

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-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: