Book Image

Hybrid Mobile Development with Ionic

By : Gaurav Saini
Book Image

Hybrid Mobile Development with Ionic

By: Gaurav Saini

Overview of this book

Ionic is an open source, front-end framework that allows you to develop hybrid mobile apps without any native-language hassle for each platform. It offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive mobile apps. This book will help you to develop a complete, professional and quality mobile application with Ionic Framework. You will start the journey by learning to configure, customize, and migrate Ionic 1x to 3x. Then, you will move on to Ionic 3 components and see how you can customize them according to your applications. You will also implement various native plugins and integrate them with Ionic and Ionic Cloud services to use them optimally in your application. By this time, you will be able to create a full-fledged e-commerce application. Next, you will master authorization, authentication, and security techniques in Ionic 3 to ensure that your application and data are secure. Further, you will integrate the backend services such as Firebase and the Cordova iBeacon plugin in your application. Lastly, you will be looking into Progressive Web Applications and its support with Ionic, with a demonstration of an offline-first application. By the end of the book, you will not only have built a professional, hybrid mobile application, but will also have ensured that your app is secure and performance driven.
Table of Contents (9 chapters)

Installation and setup

As we are going through Ionic 3, most of the developers have previous experience of Ionic installation. We can install ionic via the NPM package; currently Ionic CLI v3 is in beta which has entirely changed how CLI works and now the default project that Ionic will create is based on Ionic 3:

    $ npm install -g ionic

It's recommended to use the 6x version for node and the 3x version of npm. This beta release supports both Ionic 1 and 2 projects. Now let's get started with a project:


// will create Ionic 3x project
$ ionic start wedding-planner sidemenu
// will create Ionic 1x project
$ ionic start wedding-planner sidemenu --type ionic1
// move to projedct directory
$ cd wedding-planner

// run project with ionic serve
$ ionic serve

Now the next steps will be to add specific platforms and plugins required in the application:

   // For adding specific platforms
$ ionic cordova:platform add android

// running application on real device
$ ionic cordova:run android

// running inside an emulator
$ ionic cordova:emulate android

Next, we will be looking at how we can get started with an Ionic 2 application code base. You have to understand how each file and folder is structured and how they work.