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.
In this post, we will explore how you can setup Ionic on a Windows machine and then start building Android apps using the framework.
Following are the prerequisites:
- 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:
- 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.
- Install Node.js from here.
- 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.
The following figure illustrates:
- ANDROID_HOME : C:\Users\sandeep.chanda\AppData\Local\Android\android-sdk\tools
- ANDROID_PLATFORM: C:\Users\sandeep.chanda\AppData\Local\Android\android-sdk\platform-tools
- JAVA_HOME: C:\Program Files (x86)\Java\jdk1.6.0_39
- ANTS_HOME: C:\Software\apache-ant-1.9.2-bin\apache-ant-1.9.2\bin
- PATH: %ANDROID_HOME%; %JAVA_HOME%... etc.
- Download Console 2, and extract the package into a folder.
You are now all set to configure Ionic and start building the apps.
Open an instance of Console 2 and execute the following commands
- First we will install Cordova if not installed already. Run the following command
- 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
Next configure Android using the following command
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!
HTML5, mobile app development, HYBRID APPLICATIONS