Windows Azure Mobile Services for Connected Mobile Apps

In previous blogs (1, 2 and 3) I've set context by exploring Phone Gap and Ionic Framework for Hybrid mobile app development. This blog is taking a little step forward by integrating a sample mobile app with a cloud service.

Most mobile apps need to be connected, use a centralized data store and services. Attached is a sample mobile app that maintains laundry list of items. Sample allows users to add items (let's say groceries) over a period of time, review the list, mark one or more purchased or delete some items. This sample app stores data on a cloud service instead of saving on phone.

Laundry List - Sample App Demo on browser emulator: 

Download sample project here - Link

Below is the tech stack chosen

• Windows Azure mobile service to address data needs of the app.
• Hybrid Mobile App using Ionic Framework

Why Windows Azure Mobile Services?

1. Ease of development.

Most services are entities and their CRUD operations. Using mobile services, an entity or a database table is created with in no time. In Windows Azure Management Portal select New, under Compute select Mobile Service click Create. Make your choices on the following screen. As you click Next, database selections need to be made and the new mobile service is created.
In Visual Studio Server Explorer under Azure section right click on the new mobile service and click create table. The Mobile Service is ready. Service for Create, Retrieve, Update and Delete operations on the database table is automatically created.

1. Create Mobile Service

2. Create Table

To design the table (associated with mobile service) with column names, data types etc., open the database in "SQL Server Object Explorer" in Visual Studio. Right click on the newly created table and click design. Use the designer window and define columns and other aspects of a database table.

2. Ready made code templates for mobile apps.

You can download boilerplate code for most mobile platforms, namely Android, iOS, Windows Phone and Phone Gap (Hybrid). This helps reduce setup time. In the code sample, I used "mobile services" JS file that takes care of communication with the mobile service. This file acts as a proxy to mobile service. This means developer can focus on mobile app UI development and use the ready made data service communication library.

3. Push Notifications across mobile platforms. 

Implement push notifications easily across platforms iOS, Android, Windows Phone.

4. Deploy your service to a near location of users.

The Mobile Service could be deployed closer to target users in the available geological locations provided by Windows Azure.

I will not dwell into "why Ionic framework" as it's described already in my previous blog.

Ionic App

1. To download Ionic Framework's tabs template run

ionic start laundryList tabs

2. Include library from Windows Azure Mobile Service. Download project from the Windows Azure portal for Phone Gap and copy the lib to Ionic project. At the time of writing this blog, I happen to have version 1.2.5 (MobileServices.Web-1.2.5.js)

3. Create a AngularJS Service to perform CRUD operations.

Initialize the service for communication with Azure Mobile Service,
//create mobile service client object
var client = new WindowsAzure.MobileServiceClient('https:/my-mobile-service.azure-mobile.net/', 'my-app-key');
// get reference of the laundry list table.
var laundryList = client.getTable('laundrylist');

Code to get a list of active laundry list items is below,
var deferred = $q.defer();
// Where clause here restricts results to active items.
var query = laundryList.where({ isAvailable: true, isPurchased: false });
// query.read is async 
   query.read().then(function(pLaundryList) {
        deferred.resolve(pLaundryList);            
   }, function(error){
       deferred.reject(error);
   });
// as this code is in one of the service functions, it returns a promise
return deferred.promise;

Code to get a list of completed laundry list items is below,
var deferred = $q.defer();
// where clause here restricts results to purchased items.
var query = laundryList.where({isPurchased: true });
       query.read().then(function(pLaundryList) {
            deferred.resolve(pLaundryList);            
        }, function(error){
        deferred.reject(error);
        });
return deferred.promise;

Code to create a new laundry list item
// It returns a promise (Async) depicting status of http call to the mobile service.
laundryList.insert(item)

/*
Sample JSON object for Laundry List here

{
title: 'value from text box',
isAvailable: true,
isPurchased:false,
details: '',
price: 0,
quantity: 0

}
*/

Code to mark a laundry list item complete is below. This is an update call.
// It returns a promise (Async)
// id is primary key on the table, server side.
// value being updated is isPurchased.
return laundryList.update({id: id, isPurchased: true});

Code to delete a laundry list item is below.
// It returns a promise (Async)
return laundryList.del({id: id});

Mobile Service Logs.

Last but not least; While debugging API calls, mobile service errors could be reviewed on Management Portal. This will help reduce heart burn by giving specific information on why a mobile service call failed. Refer to logs tab under the mobile service for similar information depicted in the screenshot.

Download complete code here - Link to sample app