Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


 
 

Build Self-Contained Native Mobile Apps Using HTML5 with Ionic Actinium

Posted by Sandeep Chanda on Apr 7, 2014

Overview

The world of HTML5 hybrid app development frameworks just got hotter with the beta release of Ionic Actinium, the Ionic Framework dubbed as "Bootstrap for Native", by the makers of Drifty, already popular for tools such as Jetstrap and Codiqa.

HTML5 is the platform of choice for desktop web applications and mobile websites and is gaining immense popularity for building hybrid and/or native self-contained mobile apps. Using HTML5 helps reduce the steep learning curve involved in developing native apps and in turn reduces time to market.

The Ionic Framework uses HTML5, CSS and JavaScript, packaged using the Cordova tools for creating platform specific iOS and Android apps. A lot of its core features are also built using AngularJS. Using AngularJS is a highly recommended option for building the apps using Ionic.



In this post, we will explore how you can setup Ionic on a Windows machine and then start building Android apps using the framework.

Prerequisites

Following are the prerequisites:

  1. You must have JDK and the Android SDK installed. Typically look for JDK 7, but it worked for JDK 6 on my machine. From the Android perspective, you need the latest version, currently 22.6.2 for the SDK tools, and 19.0.1 for the platform-tools. You must also have a device configuration (AVD) for the latest API level as illustrated in the figure below:

  2. Download Apache Ant from here, and note the path of the extracted folder from the zip. It should be something like C:\ apache-ant-1.9.2-bin.
  3. Install Node.js from here.
  4. Configure the PATH variable in your system environment variables to include the path for JDK, Android SDK tools and platform tools, and the Ant bin folder that you extracted in step 2. You should create individual variables for each and then specify the %<Variable_name>% annotation to specify the paths in the PATH variable.
    1. ANDROID_HOME : C:\Users\sandeep.chanda\AppData\Local\Android\android-sdk\tools
    2. ANDROID_PLATFORM: C:\Users\sandeep.chanda\AppData\Local\Android\android-sdk\platform-tools
    3. JAVA_HOME: C:\Program Files (x86)\Java\jdk1.6.0_39
    4. ANTS_HOME: C:\Software\apache-ant-1.9.2-bin\apache-ant-1.9.2\bin
    5. PATH: %ANDROID_HOME%; %JAVA_HOME%... etc.
    The following figure illustrates:

  5. Download Console 2, and extract the package into a folder.

You are now all set to configure Ionic and start building the apps.

Configure Ionic

Open an instance of Console 2 and execute the following commands

  1. First we will install Cordova if not installed already. Run the following command
    • npm install -g cordova
  2. There is a command line utility for Ionic to build and package Ionic apps using Gulp. Run the following command to install the utility
    • npm install -g gulp ionic

That's all. You are all set to now run Ionic projects.

Create an Ionic Project

First you need to create an Ionic project to get a template for building Ionic apps. You can run the following command to create an Ionic project.

  • ionic start [Project Name]

This will download the necessary packages and will create the project folder structure as shown in the figure below:

This comes with a bootstrap template for building Ionic apps. You can directly build and run this in the Android emulator and you will get a basic template with navigation elements in place. To create the Android APK and deploy it in the emulator, first change into the project directory in Console 2

  • cd [Project Name]

Next configure Android using the following command

  • ionic platform android

You can now build and run the app in the emulator using the commands

  • ionic build android
  • ionic emulate android

This will build and launch the app in the emulator as shown below:

Start Building Ionic Apps

In the Ionic project folder structure, you will notice a www folder. This is where all your HTML5 pages will go. There are additional elements that we will explore in a future session, but navigate into the www folder and open the Index.html file using an editor. You will find the different elements that form a basic Ionic landing page. The header contains references to Ionic CSS, AngularJS, Cordova, and your application specific JS files with controller, app, and service logic.

The body element consists of the navigation structure and a place for rendering the views that are defined in the templates folder:

Now you can start creating your own views in the templates folder and build your app!

TAGS:

HTML5, mobile app development, HYBRID APPLICATIONS


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap