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:
Installing Cordova and Ionic:
C:\Users\Username> npm install -g cordova ionic
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?
Stop the service: Go to Command Prompt and press Ctrl+C
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
Npm install node-modules
This will recreate the node_modules folder and you can run it
2. Files you need:
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
No comments
If you have any doubts, Please let me know