Build a Hybrid Application with the Ionic Framework and Microsoft Azure Mobile Services


In this post I’ll show you how to create a hybrid mobile application using the open source ionic framework and how to integrate the application securely to a Microsoft Azure Mobile Services backend. By integrating  with azure mobile service you get to connect to reliable cloud storage via a simple JavaScript SDK.

I’ve made the complete source code is available on GitHub  – feel free to fork the code or use it however you like.

Ionic Framework

Ionic is an open source JavaScript and CSS framework for building cross-platform HTML5 mobile applications. It’s built with Cordova and AngularJS and it comes with a nifty command life interface that lets you build  IOS and Android apps. My experience working with ionic has been really good. It is very easy to get started with ionic and there is a strong community behind with about 200 contributors to the codebase. Work is well underway to remove the dependency on AngularJS which means you’ll be able to plug the inoic framework into your JavaScript framework of choice in the near future.

Microsoft Azure Mobile Services

Microsoft Azure Mobile Services is a mobile backend as a service (MBaaS) offering from Microsoft. Almost every mobile application needs to store some data, deal with push notifications, service monitoring and authentication. With microsoft azure mobile services you get all of this as a “platform as a service” offering. You don’t need to spin up a single server to go live with a mobile app, simply provision yourself a mobile services backend in azure and  and you have access to all of these features along with a a fully programmable node.js or .NET backend.

The todo appapp I’ll take you through the key steps and code needed to build a simple todo mobile app. Users will authenticate with a google plus account. Once logged in they’ll be able to create new tasks and maintain a list of outstanding tasks.

Creating the ionic app

First up install apache cordova and the ionic framework via npm

npm install -g ionic
$ npm install -g cordova

Next,  create a new ionic application using one of the sidemenu starter template

$ ionic start Azure-Ionic-App sidemenu

That’s it! if you run the command “ionic serve” a browser will open running your application.The application we are building consists three simple views and controllers – login, add task, and  view all tasks.

Implementing Google Authentication

Firstly, create a new azure mobile service  via the azure portal. If you don’t have an account you can sign up for a free trial here. You’ll get more than enough credits with a trial account to develop  and test an application.

Once your mobile service is provisioned take a note of the mobile service url  on the dashboard page this is your unique the API endpoint for your mobile app.

create mobile back end

The process of how to register your app for a google login is already well documented here . You’ll need to login to the google developer console, create a new web project and register for “Google +API” OAuth authentication then in the credentials tab, enter the authorization redirect URL for you application. This will be “your-mobile-services-url/login/google” , in my case its “”google console

Now to associate your google application with the mobile service backend. Go back to the azure portal and enter the google client id and secret on the identity tab..

google register

To integrate a google login into your ionic application you’ll need to bundle the mobile services JavaScript client library with your application and add the following AngularJS factory class which returns a mobile service client object .

angular.module('azure', [])
  .factory('client', [function () {
    var client = new WindowsAzure.MobileServiceClient(
    return client;

Using the client object we can take care of the OAuth flow by simply calling client.Login(“google”);

//the login controller calls client.login("google") to perform the oAuth dance
angular.module('azure', [])
angular.module('app.controllers', ['azure'])
.controller('LoginCtrl', function(client,$scope, $state) {
    $scope.login = function() {
      client.login("google").then(function succes(data){
        console.log('logged in succesfully..')
      }, function(error){

        //login failed.

The OAuth flow happens in a separate browser window.You must install the Cordova InAppBrowser plugin from to be able to show the login popup on a mobile device. Run the following command to install the plugin locally

$ ionic plugin add cordova-plugin-inappbrowser

then add the plugin to your config.xml file to bundle it as part of the ionic build process.

  <feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser"/>
    <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser"/>

Once logged in, a user context is set on the client object. You can access this at any time by simply injecting the client factory class we created earlier into the relevant controller; client.currentUser.userId

We’ll store the unique userId property as part of each todo item in the data store to make the solution multi-tenanted and to ensure you only get to see your own todo list tasks, I know I for one don’t want to complete other peoples tasks!

Storing Data in Azure Mobile Services

When you provisioned a mobile services on azure  you also provisioned a SQL Server backend but chances are you won’t treat the backend like a relational database. When you provision a new table in the database it gets allocated a dynamic schema by default ( very cool but you can turn this off if you like). As you make API calls to store data in a table new columns are generated based on the properties of the JSON object you send to the API.

Go to the data tab in mobile services and a create a table called “Task” to store the todo items. Set the table permissions for insert, update,delete and read operations to “authenticated users”.  You can now read and write data to this table via the mobile services client factory class we created earlier.

Its worth highlighting that the backend API that writes to the database table is fully programmable and you can write node.js scriptlets to validate and transform your data before it gets written to the data store. If you’d prefer to write your data to a MongoDB or DocumentDB data store its pretty easy to swap out the database completely  – more information here

For the purposes of this post we won’t create any server side scriptlets, we’ll let the data go straight through to the tasks table.To keep the ionic application more modular I created a separate AngularJS factory to class to connect to the azure backend.

There’s a few things worth highlighting in the code

  • when saving data in the addTask() function I tack on a userId property.
  • when reading data in the getAll() function I create a filter expression to filter to return the tasks for the logged in user.
angular.module('', ['azure'])
  .factory('azureAPI', ['client' ,'$q', '$rootScope', function (client, $q, $rootScope) {

    return {
      getAll: function () {
        var deferred = $q.defer();

        var userId = client.currentUser.userId;

        //filter by user id
        client.getTable('Task').&amp;amp;lt;strong&amp;amp;gt;where({userId:userId})&amp;amp;lt;/strong&amp;amp;gt;.read().then(function () {
          deferred.resolve.apply(this, arguments);
        }, function () {
          deferred.reject.apply(this, arguments);

        return deferred.promise;

      addTask: function (task) {

        &amp;amp;lt;strong&amp;amp;gt;task.userId = client.currentUser.userId;&amp;amp;lt;/strong&amp;amp;gt;
        var deferred = $q.defer();

        client.getTable('Task').insert(task).then(function (data) {
          deferred.resolve.apply(this, arguments);
        }, function (error) {
          deferred.reject.apply(this, arguments);
        return deferred.promise;

      updateTask: function (task) {
        var deferred = $q.defer();
        task.userId = client.currentUser.userId;

        client.getTable('Task').update(task).then(function (data) {
          deferred.resolve.apply(this, arguments);
        }, function (error) {
          deferred.reject.apply(this, arguments);
        return deferred.promise;


That’s it. We’ve now hooked up google authentication and our mobile is storing data against a microsoft azure mobile services backend.

All the code is available here :

Hope this helps


On choosing between Azure Database and Table Storage

How often does this happen –  your teammate has just started developing a  new service and they need to store some data  in the cloud. “I need a database, therefore I’ll use SQL Server”. All too often relational databases are introduced into an architecture without any thought being given to type of data that is being stored or the way it will be accessed.

When building on Widows Azure you’ve got access to a number of database technologies including  SQL Database, Table Storage and DocumentDB. Changing your storage technology can be a very costly exercise so its wise to spend the time upfront to consider where you data should really live.

SQL Database

SQL Database a relational database-as-a-service offering. Its great for storing relational data and supports a rich complex query operations. A single SQL Database can store up to 500GB of data. All of the database concepts are very familiar to anyone that has worked with SQL Server. SQL Database also offers features that enable migration, export, and ongoing synchronization of on-premises SQL Server databases with Azure SQL databases (through SQL Data Sync). If you need transnational support for batch operations then SQL Azure is the way to go.

But…. all of this it comes at a price! when compare to table storage SQL Database is far more expensive.

Table Storage

Table storage is a fault-tolerant NoSQL key-value store database.It comes in handy when you need to store very large amounts of non relational data. Where SQL Database has an upper limit of 500GB, Table storage maxes out at 200TB per table. The querying ability of table storage is much less rich. You store data by  partition key and row key. Its not possible to join tables so you always need to know the partition key to work with.

Check out this great blog post by Troy Hunt where he explains how he works with 150 million rows of data using table storage.

Technology Selection Considerations

you should first consider using table storage when..

  • you need to store terrabytes of data and cost if a factor
  • there are no complex relationships in the data that require server side joins and secondary indexes
  • you need to store unstructured data or the structure of every object may be different
  • you plan to scale out without sharding

you should first consider using SQL database when…

  • you are storing highly structured, relational data
  • you need to store less than 500GB of data
  • you need to access and query the data in many different ways
  • you want to be able to run your application on premise and in the cloud

Key Feature Comparison

Criteria SQL Database Table Storage
Relational data yes no
Transaction Support yes full ACID transactions very limited
Table Schema fixed each row can have different properties
Maximum Storage 500GB per database 200TB per table
REST client support yes yes
Availability SLA 99.9% per month 99.9% per month

How to serve up .json files from a Windows Azure Website

So it turns out that Windows Azure Websites won’t serve up static .json files by default, no matter how many times you hit F5 !

If you try to access a file you’ll see a 404 File Not Found Error, because the MIME Type of .json is not set by default. This also applies  for other “non-standard” file that  need a specificMIME Type such as mp3, csv etc.

To fix this issue you need to set the correct MIME types in your web.config file and redeploy – easy when you know how!

<?xml version="1.0"?>

            <mimeMap fileExtension=".json" mimeType="application/json" />

More information on configuring MIME types in IIS here..

A Visualization Of New Year’s Eve 2014 On Twitter

I’ve created this interactive visualization of New Years Eve 2014 as it unfolded on Twitter using a bunch of  open source tools running on Windows Azure.

globe 1 globe 3globe 2

The Experiment

Recently, I’ve been spending some working with Big Data and Hadoop Distributions and I  was trying to come up with a “useful” side project to play around with the technology, what bigger event is there on twitter than the annual #happynewyear tweets as they fly around the world at the dawn of 2014?

I connected to twitters streaming API using a simple node.js client. The open source node package appropriately named Twit by Tolga Tezel does all the heavy lifting for me in a few lines of code. I  aggregated over 6 million tweets in 24 hours – averaging 60 tweets per second. According to twitters documentation, the streaming API will give you access to 1% of the twitter firehose at any one time and judging by the geographic spread of the tweets I suspect that it is sympathetic to where in the world you connect from, I was running out of the windows azure data center in Dublin.

Processing the data

Now on to the data crunching, I uploaded all the tweets in multiple 20MB text files to Windows Azure Blob Storage and spun up an 8 node HDInsight Hadoop Cluster to process the data. Storing the tweets naively in blob storage gave me the flexibility to only spin up the cluster for a couple of minutes. I aggregated all the tweets that had a place associated with them and extracted the latitude and longitude coordinates.

Visualizing the results

I used Chrome’s open source Web GL Globe platform to showcase the results in an interactive 360 degree visualization of the data. You’ll need to be running Web GL enabled browser when you connect to the website.

Open Source tools – power to the people

This experiment cost me absolutely zip to conduct ! All the code and technologies I used were open source – node.js, Hadoop and  Web GL Globe.  The cloud compute time also came free of charge thanks to my MSDN subscription.

The source code is available here, may the source be with you and #happynewyear


Create and deploy a website to windows azure from your Raspberry Pi in 180 seconds!

So I’ve got the windows azure SDK installed on my raspberry pi. To install it on raspbian you first need to pull down node.js – see my previous blog post.

npm install azure

In this short video I create and push a website to azure all from the command line on my raspberry pi. Who needs a fancy multi core computer anymore !?


Azure Data Center coming Down Under!

Earlier today Microsoft announced that they will be opening a Windows Azure region in Australia  with sub-regions in NSW and Victoria. This is great news for cloud computing in Australia. Late last year Amazon Web Services launched its own Sydney region comprising of two availability zones – more competition in the IaaS space will be surely  drive costs even lower!

The key here here is the announcement of two separate sub regions – this means customers can build out geo-redundancy without their data ever leaving Australian shores. No more round-tripping to Singapore or US West , what happens in Australia stays in Australia!

Updated 28-10-2014

In case you missed the announcement “Today at TechEd Sydney, we opened our 18th and 19th regions for business, in New South Wales and Victoria.”

Booyah ! check out the console – Australia East & Australia SouthEast are open for business !

Thats pretty much 15 months after the initial announcements, I’m sure a lot of co-workers in Melbourne will be rubbing their hands together today !

azure regions