Hybrid Android with Ionic Framework

Like Cordova and AngularJS? Why not Ionic Framework?

While still in it’s Alpha stages, Ionic Framework seems to be a boilerplate for hybrid mobile using Cordova as a device interface, AngularJS and a custom Bootstrap flavour for any UI needs.

###Install on Windows will be a pain! Like many Open Source projects, Windows will always be the last adopted OS. If you are already familiar with Phonegap/Cordova everything will be smooth. If not, get ready to get into the deapths of Advanced System Settings and mess with Environment Variables!

Your Java JDK ( careful! not the JRE ), Android SDK (ADT Bundle for Windows) and ANT for Windows will always fail to set it’s Path properly so you will probably need to set it manually.

While I’m not familiar with the Setup on any other OS, I’m pretty sure it will work like a charm.

Building your first Android App!

Start off by initializing your workspace: c:\workspaces> ionic start myApp

This will download the Ionic Seed from Github and it will be your starting point.

To run initialize your Android Cordova platform: c:\workspaces\myApp> ionic platform android

Run it with an emulator: c:\workspaces\myApp> ionic emulate android

Or run it on a USB Debugging connected Android device: c:\workspaces\myApp> ionic run android

While the standard emulator (even with the X86 Intel processor drivers) looks fine and dandy, it will suck and feel sluggish and almost unusable. I’ve tried out another solution, already configured virtual machines from Genymotion.

It’s not the real look and feel but usable as a handy replacement. As a side note, Genimotion virtual machines will be detected as USB devices so be sure to “run” Cordova on them not the emulator.

Working with AngularJS and Ionic

Everything you’ll need is found in the www folder and if you’re already familiar with AngularJS you’ll see almost nothing has changed drastically. On the other hand, the components and controllers built with bootstrap for the typical usecases will make you worry less about the UI and focus more on the code.

Pushing the app live!

With Google Play and Ionic, things are pretty straighforward. Once you have your app ready to go, build it without debugging and using cordova build --release android Prepare your APK by signing and zip aligning it and upload it to the store.

See it in action!

You can test out my sample by downloading it from the store: Get it on Google Play

Sources can be found here: https://github.com/gmanolache/ionic-weather

Gabriel MANOLACHE

big data engineer, machine learning enthusiast

Paris, France https://gmanolache.com