From the MVPs: Put your Windows Store apps on cloud 9

Here’s the 21st in our series of guest posts by Microsoft Most Valued Professionals (MVPs). (Click the “MVPs” tag in the right column to see all of the articles.) Since the early 1990s, Microsoft has recognized technology champions around the world with the MVP Award. MVPs freely share their knowledge, real-world experience, and impartial and objective feedback to help people enhance the way they use technology. Of the millions of individuals who participate in technology communities, around 4,000 are recognized as Microsoft MVPs. You can read more original MVP-authored content on the Microsoft MVP Award Program Blog.

This post is by David Pallman, a Windows Azure MVP and Microsoft Press author. Than ks, David!

Add value to your Windows Store apps with the Microsoft Cloud

You can bring an added dimension of usefulness to your Windows Store Apps on by leveraging Microsoft cloud services including SkyDrive and Windows Azure. Your Windows 8 users can benefit in many ways when your app integrates with the cloud, such as these:

• Use cloud storage or cloud databases as a safe place to store or back up app data
• Collaborate with social networks, online service, or enterprise systems via the cloud
• Take advantage of the many useful services available in the cloud, such as relational database storage.
• Combine the limited compute and storage capacity of a user’s device with the nearly-unlimited compute and storage capacity of the cloud
• Perform useful work in the background
• Send push notifications about something of interest to you app user , resulting in notification toasts or live tile changes

Let’s take a tour of some different ways in which your app can take advantage of SkyDrive and Windows Azure on Windows 8.

1 Built-in SkyDrive integration

When a user signs in to Windows 8 with their Microsoft Account, SkyDrive integration is automatic. In addition to what the user can do directly with SkyDrive, your apps can also participate. If your Windows Store apps have file open or file save dialogs, the file storage locations offered to the user will include SkyDrive as shown below. This is completely automatic and you don’t need to code anything specific in your app to gain this functionality.

If your app saves data in common file formats such as media files or documents, users who move between a variety of devices will appreciate the “available everywhere” nature of SkyDrive, which includes Windows, Windows Phone, iOS, and Android.

2 Loading media content dynamically from the cloud

Modern apps frequently make use of media. Although you can simply embed your images, videos, music, or sound clips directly in your app, that doesn’t make it easy to extend or update your media: you need to create an update to your app, push it through the Windows Store, and hope users will choose to update.

An alternative is to have some or all of your content dynamically loaded from the cloud. Windows Azure Blob Storage is a particularly good choice for this because your blobs (files) can be exposed as Internet URLs, allowing them to be easily accessed by your app. In addition, you have the option of adding in the Windows Azure Content Delivery Network, which will cache blobs using a worldwide network of edge cache servers for high-performance distribution of media based on user locale.

To illustrate how simple this is to do, I took one of the Windows 8 WinJS samples, FlipView, which shows some nice nature scenes by default and is self-contained. I adapted the sample to load content about hot sauces, dynamically from cloud storage. Here’s all I needed to do:

1. I provisioned a Windows Azure storage account using the Windows Azure management portal.
2. I uploaded the images I wanted to use to Windows Azure Blob storage, in a container marked with public access permissions. You can do this with a cloud storage tool such as Cloud Storage Studio or Azure Storage Explorer. When I was done, each image could be accessed as an Internet URL (example).
3. I also uploaded to blob storage a text file containing the JSON array of item data (previously hard-coded in the app).
4. I made minor changes to the JavaScript start-up code for the app to load its JSON array and images from cloud blob storage rather than local content. The WinJS.XHR method is used to invoke Internet content, which happens asynchronously in the background. You can see the code changes I made here.

Here’s the result. My adaptation of the sample works great—but now when I want to modify or extend the content, I don’t need to release an update to the app: I can simply update what’s in Windows Azure Blob Storage which is quick and easy. All users will get the newer content the next time they launch the app.

This approach works quite well, but if you’re concerned about the time it takes to load content over the Internet or you want to handle not-always-online scenarios, you can have it both ways. You can embed default or initial media content in your app, but also take advantage of cloud content updates when you have online access available. You could also cache what you download to your local device for offline situations.

3 Create back-end services in the cloud

If you’d like to host one or more services for your Windows Store app to access, you’ll find no better place than Windows Azure: it’s cost-efficient, can scale to any level to match your load, and can give you global presence. Most of the benefits listed at the beginning of this article come from having a back-end service for your app. On Windows Azure, you have two approaches you can take:

• Learn Windows Azure and hand-craft a service to support your Windows 8 app
• Leverage the new Windows Azure Mobile Services service to have a back-end automatically generated for you

We’ll look at both of these options, starting with the do-it-yourself approach first.

You can create web services in quite a number of ways, common choices on the Microsoft platform being ASP.NET Web API or WCF. Web API is my personal default, it’s easy and simple both to create services and consume them. You’ll consume your web services using the WinRT or WinJS methods for asynchronous web requests.

Your web service can of course do anything you want it to, which might include executing logic, parallel processing, data access, and messaging. The Windows Azure platform contains a wealth of cloud services you can use, and you can also interact with online services or your enterprise systems through a variety of mean.

If your service is a simple Web API service whose primary purpose is to execute code and access a database, you’re a good candidate for using the part of the platform called Windows Azure Web Services. This allows you to get to work quickly without having to learn anything specific about the cloud. You write your service and deploy it using standard means such as Web Deploy or FTP. You can call on many of the cloud services from this context.

If you’re building a more elaborate back-end in the cloud with multiple tiers, and perhaps need to perform some ongoing background processing, then you’ll do best with the area of the platform known as Cloud Services. This model allows you to have one or more tiers of scalable VM farms (called roles) and accommodates a wide variety of solution designs. Each role can be independently scaled.

In a recent Code Camp demo, I showed how to build a service for returning the time in a certain time zone using the Web API approach. The service code is shown below. Once deployed to a Windows Azure Web Site, the service can be hit with URLs like this: https://timeservice.azurewebsites.net/api/values/-7 . Web API returns the result—a simple time string like "1:02 PM"—in JSON or XML form based on what the browser or app making the request asks for.

namespace TimeService.Controllers
{
public class ValuesController : ApiController
{
// GET api/values/n - returns time with time-zone offset (+ or - n)
public string Get(int id)
{
return DateTime.UtcNow.AddHours(id).ToShortTimeString();
}

}
}

Consuming the service is equally simple. I’m again working in JavaScript in my Windows Store App, so WinJS.XHR is the function that accesses the service.

function refreshTime() {
GetTime("eniwetok", -12);
GetTime("samoa", -11);
GetTime("hawaii", -10);
...

    setTimeout(refreshTime, 60 * 1000);
}
.
function GetTime(elementId, offset) {

// Local testing URL
//var requestStr = "https://localhost:64036/api/values/" + offset.toString();

// Cloud service URL
var requestStr = "https://timeservice.azurewebsites.net/api/values/" + offset.toString();

return WinJS.xhr(
{ url: requestStr, headers: { DataServiceVersion: 2.0 } }).then(
function (request) {
document.getElementById(elementId).innerText = request.responseText;
});
}

When combined with some HTML and CSS, the resulting World Time app looks like this, updating once a minute:

A back-end in the cloud is especially useful if your users switch from one device to another from time to time, an increasingly common pattern. Back-end services provide the continuity needed to enable the modern digital lifestyle as well as the integration backbone necessary for collaborative and social apps.

4 Create a back-end automatically with Windows Azure Mobile Services

If you’d like a back-end service in the cloud but don’t want to invest time in learning about the cloud, Windows Azure Mobile Services are for you. In a nutshell, you click that you want a back-end service and one is automatically created for you, in just moments. Windows Azure Mobile Services supports Windows 8 and additional mobile platforms.

Windows Azure Mobile Services provides the things you commonly want in a back-end for your Windows Store App: easily accessed database storage, authentication, push notifications, and ability to execute logic in relation to common operations like Insert, Update, and Delete. Windows Azure Mobile Services is a node.js implementation, so if you do want to provide server-side logic you’ll be writing that in JavaScript.

To provision a Windows Azure Mobile Service back-end, use the Windows Azure Management Portal. It’s a very fast and simple process. Once provisioned, the portal page will guide you through several steps, including downloading the Windows Azure Mobile Services SDK which you need for development and setting up database table(s). It will also show you how to integrate your Windows Store App to the back-end service.

For first-time users, the portal offers to create a default To Do item database table and generate a corresponding starter Windows 8 app for download, configured to use the back-end you just created. To see this step-by-step, visit Introducing Windows Azure Mobile Services for Windows 8 on my blog.

Here’s what the generated app looks like when run:

One very nice feature of Windows Azure Mobile Services is how it handles changes to your data model. If you decide for example to add another column or two to a table, you can update your data model in your app and don’t need to make any changes to your database schema: Windows Azure Mobile Services will detect the data model change when your app next runs, and the SQL database schema will be automatically revised to match.

To scale your service, the portal area for your back-end has a Scale section where you can control the size and number of VM instances in the cloud that are hosting your service.

To see a really great, in-depth demo of Windows Azure Mobile Services, watch John Twist’s demo, part of the Day 2 Keynote from the recent BUILD conference.

Conclusion

We’re living in a time when the digital crowd expects to have access to their apps, data, and services whenever they want, wherever they are. Windows 8 users are certainly no exception, and as we’ve seen the Microsoft cloud offers a number of ways in which your Windows Store Apps can tap into the cloud to support the modern digital lifestyle. You have an advantage over other mobile platforms because Windows 8 and the Microsoft cloud have built-in support for each other.