Tuesday, 2 December 2014

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
image
  • 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.

6 comments:

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi, I have just created a new tools that can make building your app as easy as possible.This tools is based on Ionic Cordova. You can register and manage your app easily.
      -First, upload a zip file
      -After successfully upload you can choose a platform such as Android, IOS to be able to build an App in just one click.
      See details at:
      http://deployapp.net/

      Delete
  2. Hi, thank for your share! Building App use the Ionic platform is very difficult. We have to go through a lot of steps, then have to sign App types. Then, up to Google Play and App store. There are so many mobile app development tools out there today it can help you creat an App easier. The tools that I feel perfect Deployapp. Fist you just upload your ionic source in formatted ZIP’s file, then No-code, change Settings, customize something in your app and finally, Deploy your app, download & test app or submit your app to Google Play or Apple Store when it is ready
    http://deployapp.net/

    ReplyDelete

  3. Really awesome blog. Your blog is really useful for me. Thanks for sharing this informative blog. Keep update your blog.

    Hire Ionic Framework Developers

    ReplyDelete
  4. I have just created a new tools that can make building your app as easy as possible.This tools is based on Ionic Cordova. You can register and manage your app easily.
    -First, upload a zip file
    -After successfully upload you can choose a platform such as Android, IOS to be able to build an App in just one click.
    See details at:
    http://deployapp.net/

    ReplyDelete