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

1	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:

/**
* GeSHi (C) 2004 – 2007 Nigel McNie, 2007 – 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.javascript .imp font-weight: bold; color: red;
.javascript .kw1 color: #000066; font-weight: bold;
.javascript .kw2 color: #003366; font-weight: bold;
.javascript .kw3 color: #000066;
.javascript .co1 color: #006600; font-style: italic;
.javascript .co2 color: #009966; font-style: italic;
.javascript .coMULTI color: #006600; font-style: italic;
.javascript .es0 color: #000099; font-weight: bold;
.javascript .br0 color: #009900;
.javascript .sy0 color: #339933;
.javascript .st0 color: #3366CC;
.javascript .nu0 color: #CC0000;
.javascript .me1 color: #660066;
.javascript span.xtra display:block;

requires <span class="sy0">:</span> <span class="br0">&#91;</span>
  <span class="st0">'touch-azure'</span>
<span class="br0">&#93;</span>

requires : [

'touch-azure'

]

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

requires <span class="sy0">:</span> <span class="br0">&#91;</span>
  <span class="st0">'Ext.azure.Azure'</span>
<span class="br0">&#93;</span>

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.<span class="me1">application</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
  requires <span class="sy0">:</span> <span class="br0">&#91;</span>
      <span class="st0">'Ext.azure.Azure'</span>
  <span class="br0">&#93;</span><span class="sy0">,</span>
 
  <span class="co1">//...</span>
 
  launch <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
      Ext.<span class="me1">Azure</span>.<span class="me1">init</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
          appKey <span class="sy0">:</span> <span class="st0">'...'</span><span class="sy0">,</span>
          appUrl <span class="sy0">:</span> <span class="st0">'...'</span>
 
          <span class="co1">//optional configs for authentication </span>
          <span class="co1">//and push notifications</span>
      <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
  <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>

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.<span class="me1">create</span><span class="br0">&#40;</span>‘Ext.<span class="me1">data</span>.<span class="me1">Store</span>’<span class="sy0">,</span> <span class="br0">&#123;</span>
  <span class="co1">//…</span>
 
  proxy <span class="sy0">:</span> <span class="br0">&#123;</span>
      type <span class="sy0">:</span> ‘azure’<span class="sy0">,</span>
      tableName <span class="sy0">:</span> ‘mytable’ <span class="co1">//from your Azure account</span>
  <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>

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

1	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.<span class="me1">application</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
  requires <span class="sy0">:</span> <span class="br0">&#91;</span>
      <span class="st0">'Ext.azure.Azure'</span>
  <span class="br0">&#93;</span><span class="sy0">,</span>
 
  <span class="co1">//...</span>
 
  launch <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
      Ext.<span class="me1">Azure</span>.<span class="me1">init</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
          appKey <span class="sy0">:</span> <span class="st0">'...'</span><span class="sy0">,</span>
          appUrl <span class="sy0">:</span> <span class="st0">'...'</span><span class="sy0">,</span>
          pushConfig <span class="sy0">:</span> <span class="br0">&#123;</span>
              ios <span class="sy0">:</span> <span class="kw2">true</span><span class="sy0">,</span>
              android <span class="sy0">:</span> ‘...’<span class="sy0">,</span>
              windowsphone <span class="sy0">:</span> ‘...’
          <span class="br0">&#125;</span>
      <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
  <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>

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:

<span class="kw2">var</span> blobAccount <span class="sy0">=</span> Ext.<span class="me1">create</span><span class="br0">&#40;</span><span class="st0">'Ext.azure.storage.Blob'</span><span class="sy0">,</span> <span class="br0">&#123;</span>
  accountName <span class="sy0">:</span> <span class="st0">'...'</span><span class="sy0">,</span>
  accessKey   <span class="sy0">:</span> <span class="st0">'...'</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
 
blobAccount.<span class="me1">getBlob</span><span class="br0">&#40;</span>
  <span class="co1">//params here...</span>
<span class="br0">&#41;</span><span class="sy0">;</span>

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 <span class="sy0">:</span> <span class="br0">&#123;</span>
	appKey <span class="sy0">:</span> <span class="st0">'...'</span><span class="sy0">,</span>
	appUrl <span class="sy0">:</span> <span class="st0">'...'</span>
 
	<span class="co1">//other configs for authentication</span>
	<span class="co1">//and push notifications</span>
<span class="br0">&#125;</span>

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!

.right, .alignright float: right; margin: 0 0 10px 10px;
.left, .alignleft float: left; margin: 0 10px 10px 0;

Credit:

Connecting Your Sencha Touch Apps with Windows Azure