Introducing Windows Azure Mobile Services for Windows 8

In this post I’ll introduce Microsoft’s latest Windows Azure service, Windows Azure Mobile Services. We’ll take a tour of the service and how it can be used with Windows 8 apps, the first type of mobile client Microsoft is supporting. You'll be amazed how easy it is to add a mobile back end in the cloud with this service. I've always felt web, mobile, and cloud complement each other extremely well, and this service makes doing that a cinch.

Why Mobile Services?
The Windows Azure platform makes a lot of sense as a back-end for mobile services, with its ability to easily scale and provide global presence. Up till now, building that back end has required developers to master multiple cloud services: you need Windows Azure Compute to host your web service, Windows Azure Storage or SQL Database to store data, Access Control Service for identity, and so on. Microsoft wanted to make it easier for mobile developers to more or less click a button and have an instant back-end. As you’ll see, they have indeed succeeded in pulling off that vision remarkably well.

This first incarnation of Mobile Services is designed for Windows 8 clients, with support for other mobile platforms to come in the future.
 
How to Access Mobile Services
Mobile Services is in preview, so you’ll first need to sign up for the preview at azure.com (navigate to ACCOUNT > preview features > Mobile Services).

 

Provisioning a Mobile Service in the Windows Azure PortalOnce you’ve been accepted for Mobile Services, you’ll notice a MOBILE SERVICES area now appears in the Windows Azure management portal. To provision a mobile service, click the New button at the bottom left and select MOBILE SERVICE.

 

 

In the dialogs that follow, specify a unique name for your service and whether to use an existing database or create a new one.

 

 

Very quickly thereafter, your mobile service will be provisioned. You’ll see a confirmation message at bottom.

 

 

Your service will appear in the MOBILE SERVICES area of the portal. Click the mobile service to set it up.

 

In the mobile service’s detail page, you’ll be guided through set up of the service. If you’re just trying this out for the first time, I suggest you choose the Create a new Windows 8 application option which is what we’re doing here.

 

 

As the wizard shows, there are three basic steps to setting up your service:

1. Download the Windows Azure Mobile Service SDK and Visual Studio 2012 Express
2. Create a database table
3. Download and run your app

Let's continue down the sample application path.

 

 

Step 1: Install the Mobile Services SDKYou need the Windows Azure Mobile Services SDK in order to use Windows Azure Mobile Services. You can download the mobile services SDK and, if you also need it, Visual Studio 2012 Express by clicking on the appropriate links.

 

 

 

 

 

Setting up a Database TableYou need at least one SQL Database table as backing storage for your service. If you’re just taking the tour, you can let the wizard generate a To Do Item table for your service.

 

 

Step 3: Download and Run Your Windows 8 App
In this step the wizard generates a Windows 8 app for you (!) which you can download, which is pre-configured to access your back end and is ready to run. You can choose a WinJS (HTML5/JavaScript) or C# (.NET/XAML) download. We'll choose WinJS here.

 

Download the zip file, copy its contents to a file folder, and open the .sln file in Visual Studio.

 

 

Open the default.js file and you’ll see in the onactivated event that a client object is created for mobile services that specifies an application key.

 

 

 

Running the Sample SolutionNow press F5 to run the sample solution you downloaded. You’ll see a screen like this, which lets you enter and view To Do tasks.

  

 

Enter some items, by entering a task name and clicking Save. As you do so, each item appears to the right. You can get rid of a task by checking its check box.

 

 

Viewing the DataWhere is the To Do data stored? In a Windows Azure SQL Database. You can view the database in the Windows Azure portal by navigating to MOBILE SERVICES > your project > DATA > your database. Here we see the items we just entered.

 

 

 

Scaling the Back EndSimilar to Windows Azure Web Sites, you can scale the back end in portal using the SCALE area of the project detail page. Just add more instances when you need them.

 

Wrapping it up: Windows Azure Mobile Services for Windows 8

At this point, you should be saying Wow! We've gotten a cloud-based back end (a collective set of cloud services) provisioned and ready for use unbelievably quickly and effortlessly.

We’ve just scratched the surface of what Windows Azure Mobile Services can do, but I hope this little tour gets across how easy and powerful it is and whets your appetite for exploring what the service can do for you. There’s plenty more functionality offered by Mobile Services, including authentication and push notifications. We’ll cover those and more in future posts.

Microsoft Certification Exam 70-480: Programming HTML5 with JavaScript and CSS3

If you've been updating your web skills and have been looking for a good way to demonstrate that you know your stuff, Microsoft's new MCSD Web Applications track is a good choice. The first exam you'll want to take (just released) is 70-480: Programming HTML5 with JavaScript and CSS3. Two other courses will be available in October on MVC4 and Windows Azure / Web Services.

This trio is perfect, covering client-side open standards web development, the Microsoft web platform on the server, and the Microsoft cloud platform. I'll admit I've been kind of cool toward Microsoft certifications in recent years as some of them seemed behind the times--but now that they are being updated with current technologies I'm very excited to have a good way to validate modern web skills.

I took and passed the 70-480 exam today, and although I was well-prepared for the subject matter I found the exam quite challenging. If someone passes this exam, they have my respect. You can't guess your way to a passing score.

Although I'm not permitted to share any details about the exam questions, I will share how I prepared for it:

• Pluralsight Online Training. My colleagues and I have been taking Pluralsight online training for about 10 months now. Pluralsight courses are done well and are taught by knowledgeable instructors. Although Pluralsight courses do have assessments, they are usually only around  8 questions or so. As such, I don't consider them sufficient in terms of coverage.
• Build Stuff. You've got to take these technologies you're learning about and build stuff with them. This is absolutely necessary. If you don't have HTML5/CSS/JavaScript project work readily available, do something on your own. One way or another, get hands-on experience: head knowledge alone won't cut it.
• w3schools. I like the http://w3schools.com site a lot: it's easy to navigate, is succinct, and includes lots of try-it-yourself examples with an easy to use online editor / test facility. Just before my exam, I browsed just about every page on HTML/HTML5, CSS, and JavaScript to fill gaps and refresh my memory. However, you should be aware this site has some accuracy problems. There are some better online references out there in terms of accuracy, but so far I haven't found them terribly accessible.

This exam--and the upcoming rest of the MCSD Web Applications certification track--are here just at the right time. I'm looking forward to taking the other exams in October.

Contrasting Windows 8 Development in HTML5/JavaScript with Web Development

One of the nice features of Windows 8 development is that WinRT, the Windows Runtime, permits apps to be developed in HTML5/CSS/JavaScript (the other two choices are .NET/XAML and C++/XAML). If you're involved in modern web development, the HTML5 approach may be attractive to you. There are however some differences between HTML5 web development and Windows 8 development you should be aware of.

1. No Need for Cross-Browser Support or Feature Availability Checking

In a standard modern web app, you've got to deal with the reality that users will use different browsers (and different versions of those browsers). This is usually handled with shims and polyfills (especially Modernizr) and specific checking for browser features with fallback behaviors.

In Windows 8 development, there's only one target browser: IE10. There are no other browsers to be concerned about. You can also freely take advantage of IE10-specific features, such as CSS Grid, that you might have been hesitant to use in the past because they weren't supported broadly enough.

2. External References are Disallowed

It's common in web apps to reference external stylesheets or scripts, especially to access open source JavaScript libraries via CDNs. In Windows 8 external references are disallowed as a security risk. This means your stylesheets and scripts must be local to the application.

3. Some DOM Operations are Disallowed

It's rather normal for modern web applications to manipulate the DOM, for example to set the innerHTML property of elements. But WinRT is picky about allowing this, and you just might get an error like this:

HTML1701: Unable to add dynamic content ' a' A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.

Don't fret, you can modify the DOM as long as you following Windows 8's rules, which are described here. This can in fact stop popular JavaScript libraries from working. To make jQuery work, you need this work-around.

4. There's no server - and no 'home domain'

In a standard web site, you have a server and your Ajax calls are pretty much restricted to that domain for security reasons. In Windows 8, there's no implicit server and therefore no implicit domain. You can freely perform Internet access using the WinJS.xhr method.

This doesn't mean you can't have a back-end, you certainly can (and Windows Azure is a particularly good choice for your back-end services).

5. A Windows 8 App is Not a Web Site

Although you can transplant a web site into a Windows 8 app without too much trouble, you need to be conscious of the differences between a Windows 8 app and a web site. A Windows 8 app has certain standards for styling, user interface, behaviors, security, etc. that must be conformed with in order to be accepted into the Windows Store. Windows 8 apps have special artifacts such as the App Bar and Live Tiles which you'll need to add.

Having said that, there is plenty from the web world you can apply to an HTML5 Windows 8 app. You can use many of your favorite libraries and frameworks, including Twitter Bootstrap for responsive web design that adapts layout to various form factors and orientations.

6. Windows 8 Apps Have a Specific Lifecycle

A Windows 8 app that holds state needs to be able to quickly save that state when being deactivated by the operating system, and likewise restore it when revived. You'll need to include JavaScript code in events such as onactivated to handle this.

7. Windows 8 Apps are Sandboxed and Require Use of the WinJS API

Windows 8 apps are sandboxed, meaning they can't do much on their own except when you go through the WinJS API. The WinJS API provides many methods which you'll have to use in order to perform communication, get user information, share with other applications, and access resources managed by the operating system such as file storage or contacts. Some things which you might be used to handling in other ways must use the WinJS API in Windows 8, period.

8. Touch Needs to be a First-Class Consideration

If your past web development hasn't focused on touch support, it will need to in Windows 8. This is more than a finger touch equaling a click event: Windows 8 users expect to be able to use swiping and other gestures. Not everything you do in HTML5 will automatically work with touch; for example, HTML5 Drag and Drop works with a mouse in Windows 8 but does not respond to touch. You'll want to ensure touch is well supported by your app and of course you don't want to forsake mouse and keyboard users either. Take advantage of the Windows 8 Simulator in Visual Studio 2012, which can simulate touch if you aren't developing on a touch-capable machine.

So what' s the bottom line on Windows 8 development in HTML5/JavaScript? It's certainly viable, and can allow you to transplant existing markup, CSS, and code--and use many of  your favorite frameworks and libraries--but the aforementioned considerations will need to be dealt with. Ultimately, leveraging your web skills in Windows 8 development is useful but a Windows 8 app is not a web site and it's a mistake to forget that. A satisfying Windows 8 app--regardless of which language path you use to develop it--must conform to the conventions and spirit of the platform.

Adventures in Windows 8: Timer Metro App

As part of learning Windows 8 I am create Metro apps large and small almost daily, and I'll be sharing some of those here on this blog. Today I'll share Timer, a simple countdown-timer app you might use if you were giving a classroom presentation that had a hands-on exercise or a test where you need a "time remaining" clock.
Like many of the Metro apps I create, this one is in HTML5. The Windows runtime (WinRT) allows development in C++, .NET, or HTML5/JavaScript with equal treatment for each development path. The runtime API for JavaScript is called WinJS.

Tour of the App
Here's what Timer looks like when you run it. You enter the number of minutes and click the Start button.

Once you click Start, you get a display that shows minutes remaining and counts down to 0.

Graphically, seconds remaining is shown by an inner circle and minutes remaining by an outer circle.

Once the timer reaches zero, the rings turn red and audible alarm plays - time's up!

That's about all there is to the app. You can also stop the timer early on with the Stop button and restart it.

The HTML
Here's the HTML markup for the app, which you can see is very short. The primary elements are start and stop buttons that reference JavaScript start() and stop() functions, and an HTML5 canvas where the graphical timer will be rendered. There's also an <audio> tag for the alarm sound.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Timer</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- Timer references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div data-win-control="WinJS.UI.ViewBox">
        <div class="fixedlayout">
            <div class="center">
                <div class="center">
                    <p>Minutes:&nbsp;<input type="text" id="minutes" size="4" value="60" />&nbsp;
                        <button id="startButton" onclick="start()">Start</button>
                        <button id="stopButton" onclick="stop()" style="display:none">Stop</button></p>
                </div>
            <canvas id="canvas" class="center" height="600" width="600"></canvas>
            </div>
        </div>
    </div>

<audio id="alarm">
    <source src="audio/timer.mp3" />
</audio>

</body>
</html>

The JavaScript
And here's the JavaScript, also fairly small. The largest function is showTime(), which displays the timer on the canvas.

var minutes = 60;
var seconds = 60;
var running = false;

function start() {
    minutes = parseInt(document.getElementById("minutes").value, 10);
    if (minutes > 0) {
        seconds = 60;
        showTime();
        running = true;
        document.getElementById("startButton").style.display = "none";
        document.getElementById("stopButton").style.display = "inline";
        setTimeout(update, 1000);
    }
}

function stop() {
    clearTimeout(update);
    running = false;
    document.getElementById("startButton").style.display = "inline";
    document.getElementById("stopButton").style.display = "none";
}

function update()
{
    if (!running) return;

    seconds--;
    if (seconds === 0) {
        if (minutes > 0) {
            minutes--;
            if (minutes > 0) {
                seconds = 60;
            }
        }
     }
    showTime(minutes);

    if (running) {

        if (minutes > 0 || seconds > 0) {
            setTimeout(update, 1000);
        }
        else {
            alarm = document.getElementById('alarm');
            alarm.play();
            running = false;
            document.getElementById("startButton").style.display = "inline";
            document.getElementById("stopButton").style.display = "none";
        }
    }
}

function showTime() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 200;

    var startAngle = 0 * Math.PI;
    var endAngle = ((minutes) / 30) * Math.PI;
    var counterClockwise = false;

    context.save();
    context.clearRect(0, 0, 600, 600);

    context.fillStyle = "#ffffff";
    context.font = "200px Segoe UI";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText(minutes.toString(), x, y - 15);

    context.translate(x, y);
    context.rotate(-Math.PI / 2);
    context.translate(-x, -y);

    if (minutes > 0 || seconds > 0) {
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 50;
        context.strokeStyle = "cyan";
        context.stroke();
    }
    else {
        context.beginPath();
        context.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI, counterClockwise);
        context.lineWidth = 50;
        context.strokeStyle = "red";
        context.stroke();
    }

    radius = 150;

    startAngle = 0 * Math.PI;
    endAngle = ((seconds) / 30) * Math.PI;

    if (minutes === 0 && seconds === 0) {
        context.beginPath();
        context.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI, counterClockwise);
        context.lineWidth = 25;
        context.strokeStyle = "red";
        context.stroke();
    }
    else {
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
        context.lineWidth = 25;
        context.strokeStyle = "plum";
        context.stroke();
    }

    context.restore();
}



// For an introduction to the Fixed Layout template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232508
(function () {
    "use strict";
    
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

Let's walk through how the showTime() function displays the timer. We get the canvas element by id and then get a 2D drawing context from that.

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

We use the arc function to draw the circles  or partial circles for minutes and seconds, but we have to convert to the way the arc function thinks, shown below.

In JavaScript we can multiply the starting and ending minute points around the clock (0-59) times Math.PI to get the angles we need.

    var x = canvas.width / 2;
    var y = canvas.height / 2;
    var radius = 200;

    var startAngle = 0 * Math.PI;
    var endAngle = ((minutes) / 30) * Math.PI;
    var counterClockwise = false;
    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.lineWidth = 50;
    context.strokeStyle = "cyan";
    context.stroke();

It was a little tricky thinking through the angle orientation, since a clock starts at the top of the circle but the arc function's orientation is 90 degrees to the right. This is solved with translation and rotation.

    context.translate(x, y);
    context.rotate(-Math.PI / 2);
    context.translate(-x, -y);

There you have it - a simple, but functional Metro app that may come in handy the next time you're teaching a class.