Navigation

Friday 10 February 2017

Ionic: Get started Ionic Framework with Node JS

Step 1: First step to start Ionic we have to install Node.js . This is the base platform needed to create   Mobile Apps using Ionic.



Step 2: Installed the latest version of Java JDK from Oracle's Java site − Java SE Downloads  in C:\Program Files\Java\jdk1.8.0_102 and download AndroidSDK and set environment variable. Following is the step to set environment variable of Android SDK and java JDK.  
  •  Right-click on My Computer
  •  Select Properties, then Advanced, then Environment Variables.
  •  Set PATH= C:\Program Files\Java\jdk1.8.0_102\bin;
  •  Set JAVA_HOME= C:\Program Files\Java\jdk1.8.0_102
  •  Set ANDROID_HOME= D:\Software\adt-bundle-windows-x86_64\sdk

       These are the main setting of JDKs and SDKs, which is needed to start working with Ionic. The above steps explains how to setup Ionic in simple steps.


Step 3: Installing Cordova and Ionic. Open your command window to install Cordova and Ionic:

                    npm install -g cordova ionic



Step 4: Start an App. While creating your app, you can choose from 3 options to start:
·          Version 1
o    ionic start  myApp tabs
o    ionic start  myApp blank
o    ionic start  myApp sidemenu
·         V2 for Version 2
o    ionic start --v2 myApp tabs
o    ionic start --v2 myApp blank
o    ionic start --v2 myApp sidemenu

In your command window open the folder where you want to create your app and try one of the options mentioned above.
Example: D:\Nodejs> ionic start  myApp tabs



Ionic Start command will create folder myApp and setup Ionic files and folders. Access myApp folder that we just created by following command on command prompt.
                    D:\Nodejs >cd myApp
                    D:\Nodejs\myApp>
Step 5: Following command run your app to default browser
                    D:\Nodejs\myApp> ionic serve

Step 6: Now let's add android Platform and install basic Cordova plugins. This step allows us to run the app on Android emulator or device.
                     D:\Nodejs\myApp> ionic platform add android

Step 6: Last step is build your app. It will give you .apk file which you will install in your device and test your first app. If you have building errors after running following command you probably have issue in setting Environment variable of JDK and SDK properly.

                 D:\Nodejs\myApp> ionic build android



While build the application some time we encountered “gradle” errors. For more details click here.

No comments:

Post a Comment