Ionic Framework for App Development

As I am Inquisitive ,Recently I had gone through a framework called "Ionic" which is helpful for developing Apps for cross platform UI. This Framework is more of hybrid type rather than Native. Before going to Ionic ,we need to understand the core meaning of the types of Apps we can develop which is basically of 2 types :

Native vs Hybrid Apps

Native Apps-Native Apps are those programs/software which are built in native language and runs on particular platform such as Android/iOS. They are well known for their functionality i.e.it can access its own contact list, gallery, speakers and camera. Here the platforms used are Android Studio, Flutter plugins.

Hybrid Apps-Hybrid Apps are those program built using HTML 5,CSS,Javascript wrapped in native container. It takes least amount of time to develop.

Table 1:Native Apps vs Hybrid Apps

Although both these types has both pros and cons ,but the predominantly cons that can be noticed in native apps development process is that multiple languages to be learnt (Swift, Dart, Kotlin ,java, objective c).Another pitfall is multiple code bases needed to be maintained .More Developers are to be hired. Multiple teams are required to be coordinated.

so switching on to Hybrid App is the easiest possible aspect to cover wide variety of solution for developing apps for cross Platform in less amount of time.

Why Ionic?

It uses web technologies and runs everywhere(Android, iOS and Windows ).It is also Future proof as it can be taken as reference using internet and easily accessible .

Ionic Framework

Ionic is powerful HTML SDK that helps to build native –feeling mobile apps using web technologies like HTML ,CSS and JavaScript. Cordova and Angular js helps to build these apps .It provides 100+ UI Components for native apps and even for desktop. It has Pre built gestures and Animations. It has Adaptive styling for IoS and material designs. It gives full Access to all native API's and plugins. It also Supports popular frameworks such as Angular js, vue, react .

Requirements

For setting up Ionic ,we basically need

Node js .It can be downloaded from https://nodejs.org/en/download/.Once it is installed, ,in the command prompt we need to install cordova by following codes:

npm install ionic cordova -g

Cordova helps software programmers to build hybrid web applications for mobile devices using CSS3, HTML5, and JavaScript, instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone.

Then we need to select the angular js for developing the app.

STEPS FOR IONIC CLI

•Start project

•Run with local server

•Add platform iOS and android

•Prepare iOS and android

•Build and Run on device

Creating First blank app

To create a blank app in the desktop ,

cd desktop
ionic start app_name blank

Then automatically a folder will be created in the desktop in the name of app_name .

Next thing is one idle IDE for Ionic i.e. sublime text is to be downloaded and installed from https://www.sublimetext.com/ .

To run the blank type of app ,

cd app_name
ionic lab

The output would be displayed in the local host .

Figure 1: output of Blank type App

Now ,doing some Modifications in the blank app,

§Changing the App name

§Adding list components

§Adding list slide options

In the home.page.html ,

<ion-header >
  <ion-toolbar>
    <ion-title>
      My First App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <ion-item-sliding>
      <ion-item>
      Books
    </ion-item>
    <ion-item-options side ="right">

    <button color="danger" ion-button>
      <ion-icon name="trash"></ion-icon>
    </button>
       </ion-item-options>
    </ion-item-sliding>
    <ion-item>
      pencils
    </ion-item>
    <ion-item>
      Pens
    </ion-item>
  </ion-list>
  
</ion-content>

Next, we need to run the app, to get the output in local host

Figure 2: Output of Modified App in web app, android and iOS

How to build release app?

Step 1:Add android platform –

ionic cordova platform add android 

step 2:Build the app –

ionic cordova build android –release – prod

Finally an unsigned APK is automatically being created inside the app folder.

---

Brought to you by-

CoE-AI(CET-BBSR)-An initiative by CET-BBSR, Tech Mahindra and BPUT to provide to solutions to Real world Problems through ML and IoT

www.coeaibbsr.in

https://www.facebook.com/CoEAIBBSR

source credit- https://ionicframework.com/