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

Introduction

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 https://ionic-todo.azure-mobile.net 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 “https://ionic-todo.azure-mobile.net/login/google”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(
      "https://ionic-todo.azure-mobile.net/",
      "your-mobile-services-application-key"
    );
    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..')
        $state.go('app.list');
      }, 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"/>
  </feature>

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('app.services', ['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);
          $rootScope.$apply();
        }, function () {
          deferred.reject.apply(this, arguments);
          $rootScope.$apply();
        });

        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 :

https://github.com/aidancasey/Azure-Ionic-App

Hope this helps

Advertisements

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

Enabling remote desktop on an Ubuntu VM in Windows Azure

The Ubuntu VM’s available from the gallery on Windows Azure don’t come with a  desktop GUI – you need to work with the server using an ssh client like putty. There is no harm in setting up an alternative way to connect just in case you have a runaway server. Below are the steps involved to set up RDP access.

Install Ubuntu Desktop

First  you need to install the desktop

sudo apt-get install ubuntu-desktop

Install xrdp package

sudo apt-get install xrdp

Enable an RDP endpoint from the azure management portal

On to the management portal you need to enable a UDP endpoint.

udp

Start your RDP session

Now fire up your remote desktop client and enter the public dns name of the server

rdp

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"?>

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
     </staticContent>
    </system.webServer>
</configuration>

More information on configuring MIME types in IIS here..

http://www.iis.net/configreference/system.webserver/staticcontent/mimemap

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

Aidan

AWS storms ahead in Gartner’s 2013 Cloud IaaS Magic Quadrant

Gartner’s recent 2013 Magic Quadrant report for Cloud Infrastructure as a Service makes for an interesting read. Amazon Web Services are now placed way ahead of the others in terms of being market leaders and Microsoft’s Windows Azure makes it into the Visionary quadrant.

251789_1

Amazon was the first to really figure out how to commoditise the packaging and creation of infrastructure on demand in the cloud. AWS CloudFormation is a really clever product – you can treat all your infrastructure as code (JSON files) and version control the changes you make to your stack over time, this is a really powerful concept. Recently AWS introduced support for processing CloudFormation stacks in parallel making the process of spinning everything up even faster. According to Gartner, AWS now has over five times the compute capacity than the total of all the other providers in the study, that’s a lot of flashing leds!

Although it started life as a pure PaaS offering, Windows Azure entered the IaaS space in April 2013 when Microsoft launched support for virtual machines and virtual networks. It’s interesting to see that in just 5 months they are now leading the way in the visionary quadrant. The strength of Windows Azure lies in its rich developer tooling and its hybrid offering.

“Microsoft has a vision of infrastructure and platform services that are not only leading stand-alone offerings, but also seamlessly extend and interoperate with on-premises Microsoft infrastructure (rooted in Hyper-V, Windows Server, Active Directory and System Center) and applications, as well as Microsoft’s SaaS offerings. Its vision is global, and it is aggressively expanding into multiple international markets…”

Its interesting times ahead as both Google’s and VMWare lifted the curtains on their IaaS offerings this year. This can only lead to more price drops and choice for consumers over the coming 12 months as the big players continue to battle it out in the cloud – bring it on!

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 !?

enjoy