2015 Jun 05

Using the Ionic application development framework to turn our responsive, accessible web tech into amazing mobile applications.

At Industrial, we do amazing work on the web. The ability to take our knowledge of responsive design, accessibility and bring it into the mobile app space is extremely appealing. Luckily, we've had a few projects that have allowed us to dive right in.

We love all things Open Source. We work with Javascript frameworks like Angular all the time, and our front-end developers live and breathe SASS on a daily basis. These tools allow us to build well-tested, vibrant web applications without sacrificing our core tenets of what makes a project successful:

  • Quick to prototype, early feedback from clients/stakeholders
  • Use best-in-class tools and technologies
  • On budget

A mobile application framework that builds upon our knowledge of Angular/SASS, is best-in-class, while being free and Open Source sounds too good to be true.

Not anymore! Enter Ionic.

What is Ionic?

Ionic is:

The beautiful, open source front-end SDK for developing hybrid mobile apps with HTML5.

 

... and it's true.

  • It uses Angular. Check.
  • It's built using SASS. Check.
  • It comes pre-built with mobile-optimized markup, helpers and JS components. Check.
  • It allows you to build a quick prototype using their Creator tool. Check.
  • They have their own apps (Ionic View) that allow you to preview apps on their respective platforms without having to publish through the Play/App Store. Check!

All for the low, low price of free. Let's get rollin'.

They see me rollin'

We're going to build a quick app that leverages existing extensions for offline database support and local storage. Some complementary code snippets will be provided where appropriate.

Very handy guides and help exist on the Ionic site in the documentation, and in their forum (their forum uses Discourse which is another Open Source project that we love).

This post assumes that you have NodeJS installed (or IO.js). You will need the Node Package Manager (npm) to install the necessary dependencies to build an Ionic application.

npm install -g cordova ionic
ionic start myApp [blank, tabs, sidemenu]

The [blank, tabs, sidemenu] options determine the type of navigation you'll be using on the app. Choose one when starting your project.

Now enter your new app folder.

cd myApp

Add your platforms:

ionic platform add ios
ionic platform add android

Open up your handy text editor and the new myApp project folder and you'll see the structure of the application you just generated.

Once this is setup, open up the www and scss folders as that will be where the lion-share of your development efforts will be.

But first, this particular application requires offline storage, localStorage and oAuth, so we'll start by adding some extensions.

We'll be using the excellent ngCordova library that adds plugin support as well as a collection of plugins that bring a lot of great features to your app such as camera, geolocation, push notifications and many, many more.

You can see the full list of extensions in their documentation.

You'll need bower to install ngCordova. Assuming you've installed NodeJS or IOJS above, run the following:

npm install bower
bower install ngCordova

Once installed, you'll need to add it directly above the cordova.js script tag in your index.html file.

It should look like this:

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Now you can install plugins. From your myApp folder, run the following to install the cordovaSQLite extension.

ionic plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git

It's also important to remember that an Ionic app is just an Angular application under the hood. While the ngCordova library is amazing, if you want to use another library that is not available as a Cordova plugin, you can fire up bower to do the job:

bower install angular-localforage

In this case, we've added the Angular port of Mozilla's localForage library which provides a similar interface for localStorage but uses asynchronous storage such as WebSQL or indexedDB instead.

While both libraries appear to provide similar functionality, in our example we'll be using localForage for transactional data where the cordovaSQLite plugin will be used for persistent data storage.

cordovaSQLite is great, but we ran into an issue when running ionic serve functionality (LiveReload right out the box!) as the plugin wouldn't work in browser. Easy to work around, just add this to your run or main Application controller.

$scope.$on('$stateChangeSuccess', function () {
  if (window.cordova) {
    db = window.sqlitePlugin.openDatabase({
      name:     'app.db',
      location: 2
    });
  }
  else {
    db = window.openDatabase(
      'app.db',
      '1',
      'app',
      1024 * 1024 * 100
    );
  }
});

An important thing to point out given the code snippet above is that the Ionic folks are using the Angular-UI ui-router project rather than the default ngRoute as it is far more powerful and tailor made for the framework.

As you can see, you can have a functioning Ionic application with some extended features in very short order. Great for meeting with clients in working sessions where we can view, edit and update the application quickly, see immediate results and use what we love everyday.

Our thanks and appreciation to the excellent folks over at Ionic for their amazing work and product. We're excited to see where it's going.