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.
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.
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 .
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
Then we need to select the angular js for developing the app.
STEPS FOR IONIC CLI
•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
source credit- https://ionicframework.com/