Introduction to Ionic

Introduction to Ionic

Ionic is a toolkit, which provides us functionality to create mobile apps, using Web technologies like HTML, CSS, JavaScript and AngularJS for both Android and iOS mobiles. Ionic provides tools and Services to create a hybrid mobile Application but looks like a native Application.

IONIC DevApp for Testing:

Click here to download Ionic DevApp https://ionic-dev-app.app.link/d/TiHNbIdcRR

Cordova :

As a foundation, Ionic uses Cordova as the hybrid app framework. Essentially, it allows a web application to be bundled up into a native app that can be installed on a device. It embeds a web view, which is an isolated browser instance that runs your web applications.

Features & Advantages :

-- Easy to learn

-- Easy documentation

-- Rapid development

-- Ionic apps run on different platforms

-- Develop an app once, and deploy across iOS, Android, and Windows devices.

-- Framework’s focus on HTML, CSS, and JS enables quick development, low costs, and minimal maintenance.

-- Platform Independent Framework

-- Default User Interface

-- Feasible Cross Mobile App Development

-- Built On AngularJS

-- Ionic framework is excellent for quick application ideas prototyping.

-- Development cost is less compared to native iOS and Android applications.

Disadvantages :

-- Performance: Native mobile application’s performance is better than ionic app. However, in most of the cases, performance gap is not noticeable.

-- Security: If you are developing financial app e.g. app for bank, ionic framework is not recommended. It may not provide as much security as native application.

-- Limited native functionality: There may be some native functions that may be not available in ionic framework.  In that case you have to develop the plugin yourself. However, there are many plugins available to cover native functionalities.

-- Building in-app navigation can be notably complex, as the ui-router is tricky to maneuver at present.

-- It is not suited for high-end graphics dependent applications or games.

-- Performances are not as good as native applications, namely animations, scrolling, and network operations.

-- As mentioned, JavaScript animations are not as performant as native animations. However, there are JavaScript libraries, like tweenMAX, which provide decent animation performance on the devices.

-- Possible performance issues depending on application type. But alternatives to Phone Gap do exist.

-- Need for specialists. JS can be tricky to learn. And you'll need someone who can not only "do" JS, but also have deep knowledge of a handful of advanced libraries and technologies including Angular, Cordova, Ionic, etc.

-- Early adopter risk. This technology is still in its infancy. Support keeps changing, standards keep changing, and libraries can be completely rewritten at any time.

Environment setup :

https://ionicframework.com/docs/v1/guide/installation.html

https://www.tutorialspoint.com/ionic/ionic_environment_setup.htm

First, we will go and install the most recent version of Apache Cordova.

To install Cordova :

Make sure you have Node.js installed, then run

$ sudo npm install -g cordova

Install Ionic

$ sudo npm install -g ionic

Create the project

Now, we need to create a new Cordova project somewhere on the computer for the code for our app:

cd /path/to/the/ionic/project/directory

$ ionic start <projectname> blank --type ionic1

EG:

ionic start basicApp4 tabs --type=angular

ionic server

ionic generate page Login   

Configure Platforms

Now, we need to tell ionic that we want to enable the iOS and Android platforms. Note: unless you are on MacOS, leave out the iOS platform:

$ ionic cordova platform add ios

$ ionic cordova platform add android

Test it out

Just to make sure the default project worked, try building and running the project (substitute ios for android to build for Android instead):

$ ionic cordova build ios

$ ionic cordova emulate ios

Ionic Template Lists :

ionic start

ionic start --list

ionic start myApp

ionic start myApp blank

ionic start myApp tabs --cordova

ionic start myApp tabs --capacitor

ionic start myApp super --type=angular

ionic start myApp blank --type=ionic1

ionic start cordovaApp tabs --cordova

ionic start "My App" blank

ionic start "Conference App" https://github.com/ionic-team/ionic-conference-app

CSS components :

https://ionicframework.com/docs/v1/components/#clear-buttons-headers

Javascript components :

https://ionicframework.com/docs/v1/api/service/$ionicModal/

Ionic Cordova Integration :

Link: https://www.tutorialspoint.com/ionic/ionic_cordova_integration.htm

Install Bower :

Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack.

$ npm install -g bower

Install ngCordova :

ngCordova was built to help make app development faster and more efficient than ever before. It gives you simple AngularJS wrappers for the most popular Cordova and PhoneGap plugins available, where you can take a picture, scan a barcode, upload a file, turn on your flashlight, get your current location, and much more with just a few lines of code.

$ bower install ngCordova

Next, we need to include ngCordova to our app. Open index.html file and add the following scripts.

It is important to add these scripts before cordova.js and after ionic scripts.

<script src = "lib/ngCordova/dist/ng-cordova.js"></script>

Now, we need to inject ngCordova as angular dependency. Open your app.js file and add the ngCordova to angular module.

If you have used one of the Ionic template apps, you will notice that there is injected ionic, controllers and services.

In that case, you will just add ngCordova at the end of the array.

angular.module('myApp', ['ngCordova'])

You can always check the plugins that are already installed by typing the following command.

$ cordova plugins ls