Connecting Your Sencha Touch Apps with Windows Azure

At SenchaCon 2013, our CEO Michael Mullany announced the beginning of a strategic partnership with Microsoft that connects our developer communities, combining the power of Sencha Touch with the capabilities of Windows Azure cloud services.

Today, we are introducing the Sencha Touch Extensions for Windows Azure — and it’s available now on Sencha Market or installed directly through Sencha Cmd:

sencha package get touch-azure

In this article, I’ll introduce you to the Sencha Touch Extensions for Windows Azure and give you some tips on getting started with using it in your Sencha Touch applications.

For more information and detailed instructions for getting started with the Sencha Touch Extensions for Windows Azure, check out our API documentation and guides. The package also ships with several examples to help you get going!

Sencha Touch Extensions for Windows Azure

The Sencha Touch Extensions for Windows Azure are a package that easily connect your Sencha Touch application to your Windows Azure mobile and storage services. It seamlessly supports:

• connecting to your data and custom APIs
• authenticating users via Microsoft, Google, Facebook and Twitter
• managing push notifications for iOS, Android and Windows Phone
• advanced Table and Blob storage

With Sencha Touch and Windows Azure, it has never been easier to develop mobile applications that live in the cloud! Check out this video: Using Sencha with Windows Azure Mobile Services.

Getting Started

Using the Sencha Touch Extensions for Windows Azure package in your Sencha Touch application is simple! After the Sencha Touch Extensions for Windows Azure are installed on your machine, the first step is to add the package to your app.json as a required resource:

requires : [
‘touch-azure’
]

Next, add Ext.azure.Azure as a required dependency in your Ext.application():

requires : [
‘Ext.azure.Azure’
]

Azure Mobile Services

If you are connecting your application to your Windows Azure mobile services account, the last step is to initialize Ext.Azure with your mobile services credentials:

Ext.application({
requires : [
‘Ext.azure.Azure’
],

//…

launch : function() {
Ext.Azure.init({
appKey : ‘…’,
appUrl : ‘…’

//optional configs for authentication
//and push notifications
});
}
});

At this point, we can choose to connect to our mobile service’s data using the Ext.azure.Proxy class. Just attach the proxy to any model or store as usual:

Ext.create(‘Ext.data.Store’, {
//…

proxy : {
type : ‘azure’,
tableName : ‘mytable’ //from your Azure account
}
});

With the azure data proxy, we don’t need to define a url on the store — Ext.Azure automatically knows where to connect to pull its data. The azure proxy will also correctly format the paging/filtering parameters and cross-domain HTTP headers for us, making it incredibly simple to interact with the Mobile Services REST API.

If we need to authenticate users, we can easily do this through Windows Azure as well. The Ext.azure.Authentication class (and optionally the Ext.azure.AuthOptions view) seamlessly handle the necessary oAuth redirects to authenticate users via Microsoft, Google, Facebook or Twitter:

Ext.azure.Authentication.login(‘twitter’); //launched oAuth dialogue/redirect

Finally, we can use the power of Windows Azure to manage push notifications across a variety of mobile devices. Using a Sencha Touch application packaged with Cordova, we simply need to add a pushConfig object to our Ext.Azure configuration:

Ext.application({
requires : [
‘Ext.azure.Azure’
],

//…

launch : function() {
Ext.Azure.init({
appKey : ‘…’,
appUrl : ‘…’,
pushConfig : {
ios : true,
android : ‘…’,
windowsphone : ‘…’
}
});
}
});

The Ext.azure.Push singleton will automatically register your device to receive push notifications. While the logic for managing and sending push notifications physically lives in the Windows Azure portal (see our user guide), your Sencha Touch application only needs to listen for the “pushnotification” event. Then you can notify the user as you see fit.

Azure Storage Services

If you are connecting your application to your Windows Azure storage services account, we can simply create Table and Blob components, as needed, in our application code:

var blobAccount = Ext.create(‘Ext.azure.storage.Blob’, {
accountName : ‘…’,
accessKey : ‘…’
});

blobAccount.getBlob(
//params here…
);

Using Sencha Architect

The Sencha Touch Extensions for Windows Azure are fully compatible with Sencha Architect. While you’ll need to follow our guide on installation, using Ext.Azure with Sencha Architect is very easy.

First, check that the Sencha Touch Extensions for Windows Azure package is available in your Toolbox:

Next, create a new property on your Application node named “azure”. It should be an object and look like this:

azure : {
appKey : ‘…’,
appUrl : ‘…’

//other configs for authentication
//and push notifications
}

The last step is to drag Ext.azure.Controller into your Project Inspector. This class will automatically initialize Ext.Azure for us when the application starts — and now we can begin using the Ext.Azure utilities however we want.

To the Cloud!

We’re very excited about our strategic partnership with Microsoft and we can’t wait for you to try the Sencha Touch Extensions for Windows Azure.

By combining the power of Sencha Touch with the capabilities of Windows Azure cloud services, we know that you are going to build some fantastic applications. Tell us about them in the comments or on the forum!