Developing Apps for your Android and Ios Device using Ionic

Hi All in this tutorial I am going to explain how to develop a hybrid application using your favorite programming language HTML/CSS/JS. Now a it is a huge demand for mobile application every product expected to have a mobile application for it. The platform has diverged into multiple operating system from Ios, Android, Windowphone, Firefox and Ubuntu touch. Each OS has it is own programming language to develop apps. So for developer learning multiple language and writing your mobile application for each product is little tedious. So it will be worth to know a platform where you can develop once and run it on multiple platform.
Here we are going to using Ionic framework to develop your hybrid application using the well known programming language HTML/CSS/JS.
What is Ionic?
Ionic is a powerful HTML5 native app development framework that helps you build native-feeling mobile application all with your favorite web technology like HTML/CSS/JS
Ionic uses a Angular JS, Cordova/PhoneGap to develop a native feel mobile application which runs on all the mobile platform. [Currently limited to Android, Ios, and Firefox]
Setup Ionic for Development
Ionic uses a very famous javascript framework called nodejs for development. nodejs is a very simple and powerful server side javascript framework.

• Step 1: Install the nodejs framework

Download it from here : nodejs.org/download/

• Step 2:  Check the nodejs and npm version
  • Open your command prompt/terminal and check the nodejs installed successful or not by typing the below command

    $> node –v $> npm -v

• Step3: Install cordova
• Installing Cordova which will take our app and bundle it into a native wrapper to turn into a traditional native app.

$> npm install -g cordova

• Step 4: Install ionic a command line utility to start, build and package Ionic apps.

$ npm install –g ionic

• Step 5: Create a Blank Project


• We need to create a new Cordova project somewhere on the computer for the code for our app

$> ionic start todo blank



• Here “start” command tell we are creating new project


• todo is our project name


• blank is a temple mean it will create a blank project you can use the below command to create a different type of projects.


• tab, slide


• Step 6: Run A local server to test your project


• If you don’t have android or Iphone devices you can use your browser to test the code. Start the browser using below command.



$> ionic serve



• Now you can see the live preview of your app here.


• Step 7: Build and emulate your App


• If you have android or Iphone devices you can build your app and testing on your devices.

$> ionic build android < it will build your app for android phone> $> ionic build ios < It will build your app for Iphone>

• Step 8: Test your app on Emulator


• You can use the simulator to test you application



$> ionic emulate android < it will emulate your app for android phone> $> ionic emulate ios < It will emulate your app for Iphone>

• Step 9: Test your app on Real deviecs


• Connect your android/Iphone into the USB port of your machine.


• Make sure that developer option is set on those devices.


• Follow the below steps to setup the android SDK

For setting up in Ubuntu

If you are running a 64-bit version of Ubuntu, you'll need to install the 32-bit libraries since Android is only 32-bit at the moment.$ sudo apt-get install ia32-libs If you are on Ubuntu 13.04 or greater, `ia32-libs` has been removed. You can use the following packages instead: $ sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0

For Setting up in Windows

Windows users developing for Android: You'll want to make sure you have the following installed and set up. NOTE: Whenever you make changes to the PATH, or any other environment variable, you'll need to restart or open a new tab in your shell program for the PATH change to take effect. Java JDK Install the most recent Java JDK (NOT just the JRE). Next, create an environment variable for JAVA_HOME pointing to the root folder where the Java JDK was installed. So, if you installed the JDK into C:\Program Files\Java\jdk7, set JAVA_HOME to be this path. After that, add the JDK's bin directory to the PATH variable as well. Following the previous assumption, this should be either %JAVA_HOME%\bin or the full path C:\Program Files\Java\jdk7\bin Apache Ant To install Ant, download a zip from here, extract it, move the first folder in the zip to a safe place, and update your PATH to include the binfolder in that folder. For example, if you moved the Ant folder to c:/, you'd want to add this to your PATH: C:\apache-ant-1.9.2\bin. Android SDK Installing the Android SDK is also necessary. The Android SDK provides you the API libraries and developer tools necessary to build, test, and debug apps for Android. Cordova requires the ANDROID_HOME environment variable to be set. This should point to the [ANDROID_SDK_DIR]\android-sdk directory (for example c:\android\android-sdk). Next, update your PATH to include the tools/ and platform-tools/ folder in that folder. So, using ANDROID_HOME, you would add both %ANDROID_HOME%\tools and %ANDROID_HOME%\platform-tools.

$> ionic run android

Now you can see the app running on your phone. No need of leaning internal of Android. and design the UI with XML. Your simple web programming knowledge is more than enough to develop a hybrid application which can run on all the platform. In My next tutorial I will explain using different ionic tags to design your UI. Keep posting your comments here.