Hybrid Mobile App Development using Ionic and Cordova

By | April 25, 2017

Ionic is basically an open source SDK (Software Development Kit) for developing Hybrid Mobile Applications. It’s a front-end UI framework built on top of AngularJS and Apache Cordova, providing tools and services to build Hybrid Mobile Applications with native look and feel.Ionic Mobile App Development

Step by Step Ionic Mobile App Development

You can follow the below steps to create your first Ionic Hybrid Mobile Application:

Step 1: Install Ionic

Running the following command will install ionic and cordova

Note: Angular 4 is out now. We can use Angular 4 to develop applications that are cross platform with maximum speed and performance. More to learn Angular 4 here.

Step 2: Creating and Running the App

In order to create an ionic app with ionic 2.0 framework,  we have to run the following command on the workspace folder of the project. For this example the name of the project is ‘mytodo’ . –v2 is used for Ionic 2.0 . Ionic 2.0 is based on Angular 2.0.

There are currently three different layout are available for ionic 2.0 app.  In above command to create an app it is possible to mention the template or layout for the project.

On running the above command we can see the following output on command prompt:Ionic Mobile App

It will also asked for creating a free account:Simulator for Mobile App Development

The following files would be generated inside ‘mytodo’ folder:Hybrid Mobile App Folder

Enter in to project root folder using following command

Step 3: Updating Metadata

Open www folder and add this security meta tag to index.html file:

Step 4: Installing Cordova Plugin

From the project root folder run the following command in order to install the cordova whitelist plugin:

Cordova Plugin

Step 5: Run the Project

Run the project with following command:

This will open a new browser window and the output would be as following:Ionic Menu Starter

As for example, we have selected the Layout with side menu. On clicking on the ‘TOGGLE MENU’ it will show the following screen:Mobile App Menu

Initially there are two pages and and two menu items. The source code would be generated for corresponding pages as following:Ionic 2.0

Ionic 2.0 is modular and component based. Therefore, there would a single module called AppModule in src/app/app.module.ts file. In addition, for each page, there would be a corresponding component. For example, in this example, there are two component page1 and pag2. Each of the component folder has its template in  .html file, styles in .scss file and component class in .ts file.

It needs a component as the parent component for the append that will be boostrapped as soon as the module would be bootstrapped. In this example, MyApp Component has been defined in src/app/app.component.ts file as following:

Finally each component has been declared in App Module as following:

The above command will create a new component with name page3 Ionic Component

And one more time run the same command:

Add the pages to the menu item in app.component as following:

Add the new component in the declaration of the AppModule

At this moment the App would look as following:Basic Ionic Mobile App

It’s just a basic Ionic Application but you can follow here to find lots of details about Ionic Framework Concepts and getting answer for many related concepts/questions including:

  • Navigation in Ionic 2
  • How to publish an Ionic Application?
  • Developing a user defined pipe in Ionic Application
  • How to Cache  View?
  • Making HTTP Request from an Ionic Application
  • and much more…

More Mobile App Development and Related Tutorials