Click here to Skip to main content
15,867,851 members
Articles / Hosted Services / Cordova

Hybrid Mobile App Development using Ionic and Cordova

Rate me:
Please Sign up or sign in to vote.
4.92/5 (4 votes)
28 Apr 2017CPOL3 min read 13.5K   1   2
Ionic is basically an open source SDK (Software Development Kit) for developing Hybrid Mobile Applications

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:

npm install -g ionic 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.

ionic start mytodo --v2

There are currently three different layouts available for ionic 2.0 app. In the 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 ask for creating a free account:

Simulator for Mobile App Development

The following files would be generated inside ‘mytodo’ folder:

Hybrid Mobile App Folder

Enter into project root folder using the following command:

cd mytodo

Step 3: Updating Metadata

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

HTML
<meta http-equiv="Content-Security-Policy" 
content="script-src 'self' 'unsafe-eval' 'unsafe-inline' *; 
object-src 'self'; style-src 'self' 
'unsafe-inline'; media-src *">

Step 4: Installing Cordova Plugin

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

cordova plugin add cordova-plugin-whitelist

Cordova Plugin

Step 5: Run the Project

Run the project with the following command:

ionic serve

This will open a new browser window and the output would be as follows:

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

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 components page1 and pag2. Each of the component folders has its template in .html file, styles in .scss file and component class in .ts file.

JavaScript
import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})
export class Page1 {

  constructor(public navCtrl: NavController) {   
}

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

JavaScript
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Page1;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {
    this.initializeApp();
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];
  }
  initializeApp() {
    this.platform.ready().then(() => {
            StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

Finally, each component has been declared in App Module as follows:

JavaScript
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
ionic g page page3

The above command will create a new component with name page3:

Ionic Component

And one more time, run the same command:

ionic g page page4

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

JavaScript
// used for an example of ngFor and navigation
  this.pages = [
    { title: 'Home', component: Page1 },
    { title: 'Meeting', component: Page2 },
    { title: 'Reminder', component: ReminderPage },
    { title: 'My Profile', component: MyProfilePage }
  ];
}

Add the new component in the declaration of the AppModule:

JavaScript
NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2,
    MyProfilePage,
    ReminderPage,
    GridTestPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2,
    MyProfilePage,
    ReminderPage,
    GridTestPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})

At this moment, the App would look as follows:

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 get an 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…

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Emaratech
United Arab Emirates United Arab Emirates
Imran Abdul Ghani has more than 10 years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET(MCSD.NET) since 2005. You can reach his blogging at WCF Tutorials, Web Development, SharePoint for Dummies.

Comments and Discussions

 
SuggestionIonic Frameworks Pin
Shani Singh29-May-17 2:24
Shani Singh29-May-17 2:24 
PraiseThank you Pin
Member 131687553-May-17 1:41
Member 131687553-May-17 1:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.