Ionic Framework

 

Ionic Framework

What is Ionic Framework?

An open source mobile UI toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web.

Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps.Ionic is built to perform and run fast on the all of the latest mobile devices. Build blazing fast apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and AOT compiling.

Ionic Requirements:

1.NodeJS

2.Android SDK

3. Code editor

4. Cordova and Ionic 

Setting up:

1. Installing Cordova and Ionic:

C:\Users\Username> npm install -g cordova ionic 

2. Creating Apps :

While creating apps in Ionic, you can choose from the following three options to start with:  

Tabs App 

 Blank App  

Side menu app 

Here i like to make TAB APP,

Use these commands

C:\Users\Username> cd Desktop

C:\Users\Username\Desktop> ionic start myApp tabs

C:\Users\Username\Desktop> cd myApp

Let us now add the Cordova project for the Android Platform and install the basic Cordova plugins as well. The following code allows us to run the app on the Android emulator or a device.

C:\Users\Username\Desktop\myApp> ionic platform add android

The next step is to build the app. If you have building errors after running the following command, you probably did not install the Android SDK and its dependencies.

C:\Users\Username\Desktop\myApp> ionic build android

The last step of the installation process is to run your app, which will start the mobile device, if connected, or the default emulator, if there is no device connected. Android Default Emulator is slow, so I suggest you to install Genymotion or some other popular Android Emulator.

C:\Users\Username\Desktop\myApp> ionic run android

To Test App in Browser:-

C:\Users\Username\Desktop\myApp> ionic serve -all

                                     Enter Y if it asks for ionic/lab

Issues?

1. Stop the service:  Go to Command Prompt and press Ctrl+C

2. Install Ionic Lab

> npm install @ionic/lab

3. Run the service again

> ionic serve -lab

Building APK files in Ionic:

Before you Proceed

1. Make sure that your project is running 

If not run it by using CMD >>ionic serve -all

Tip: to run other projects, go to the project folder and

1.check for the node_modules folder. It should not be empty

2.if you copied the project from another computer then you may have to delete the node_modules folder and install node-modules as follows

1. Npm install node-modules 

2. This will recreate the node_modules folder and you can run it 

2. Files you need:

1. JDK 8 Link

2. Gradle Link

3. Android SDK 

3. Ionic project setup 

 Prepare for android 

   >>npm install -g cordova

Then run command below 

    >>ionic cordova prepare android

If you want to get a DEBUG build, run the command line 

   >>ionic cordova build android

Install android studio and create AVD in it

Make a release build 

  >> ionic cordova build android --prod --release

This will give you a apk named as app-release-unsigned.apk

We need to sign the apk for that 

Use commands use below 

    >> keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalgRSA -keysize 2048 -validity 10000

Once that command has been ran and its prompts have been answered a file called my-release-key.keystore will be created in the current directory *keep that file somewhere safe if it is lost the google play store will not accept updates for this app

iii) jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name

iv) Finally the zip align tool must be run to optimize the apk the zipalign tool can be found in /path/to/Android/sdk/build-tools/VERSION/zipalign 

>> zipalign -v HelloWorld-release-unsigned.apk HelloWork.apk

Well done we have successfully created a ionic app. Which can be uploaded in google play store and appstore

References:

Official ionic site Click Here 

PPT Click Here

Ionic Tutorial Click Here

Build apk files Click here