Susantini Behera
Nov 29, 20203 min
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
https://www.facebook.com/CoEAIBBSR
source credit- https://ionicframework.com/