Introduction

This sample demonstrates how you can easily wire up your Windows Phone application to provide login capabilities ilities for your users to authenticate against well know social identity provides such as Microsoft Account, Facebook, Twitter and Google using Windows Azure Mobile Services.

You can download the sample and follow along from here

Prerequisites

Building the Sample

Follow these steps to set up the sample.

Setting up the Cloud Environment

1. Create a new Mobile Service from the Windows Azure Management Portal.To do this, log on to the Windows Azure Management Portal, navigate to Mobile Services and click New.Expand Compute | Mobile Service, and click Create.

   

   This displays the New Mobile Service dialog.

   In the Create a mobile service page, type a subdomain name for the new mobile service in the URL textbox and wait for name verification. Once name verification completes, select Create a new SQL Database in the Database dropdown list and click the right arrow button to go to the next page.

   

   This displays the Specify database settings page.

   Note: If you already have a database in the same region as the new mobile service, you can instead choose Use existing Database and then select that database. The use of a database in a different region is not recommended because of additional bandwidth costs and higher latencies.

   In Name, type the name of the new database, then type Login Name, which is the administrator login name for the new SQL Database server. Type and confirm the password, and select the check box to complete the process.

   

   Note: If there is a mismatch or the password you supply does not meet the minimum requirements, a warning is displayed.

   You have now created a new mobile service that can be used by your mobile apps.

2. Register the sample application for authentication and configure Mobile Services. To do this, follow the instructions in https://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-with-users-dotnet/#register.
   

   Note: The link above provides details on how to register the sample application with Microsoft Account, Facebook, Twitter and Google identity providers, and explains how to register the provider-generated client secret with Mobile Services.

Setting up the Local Environment

1. Configure the Mobile Service URL and access key.Get the Mobile Service URL and Mobile Service Key values. Browse to your Mobile Service dashboard, copy the service URL and click Manage Keys on the bottom bar.Mobile Service URL

   Now copy the Application Key value.

   

2. In Visual Studio 2012 Express for Windows Phone, open the Authentication.sln solution
3. Right Click on the Authentication project and select Manage Nuget Packages
4. In the Manage Nuget Packages Dialog change the dropdown from Stable Only > Include Prerelease and Search for WindowsAzure.MobileServices.  Select it and click Install (Note: at the time of writing April 26, 2013. The PCL nuget for Mobile Services was pre-release.  By the time you are reading this it may already be released as stable)
5. Open the App.xaml.cs file
6. Add a using statement for the MobileServices namespace

7. using Microsoft.WindowsAzure.MobileServices;

8. Supply the URL and add a using statement  application key from the mobile service in the MobileServiceClient constructor.

   private static MobileServiceClient mobileService = new MobileServiceClient(
   "https://{YOUR-MOBILE-SERVICE-NAME}.azure-mobile.net/",
   "{YOUR-APPLICATION-KEY}");

9. Open the MainPage.xaml.cs file

10. Add a using statement for the MobileServices namespace

    using Microsoft.WindowsAzure.MobileServices;

11.  Update method OnBtnMicrosoftAccountClick to call LoginAsync

    //Call LoginAsync for the given Auth Provider
    await App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.MicrosoftAccount);
    
    //Log the logged in userId
    txtStatus.Text = string.Format("Logged in with: {0}", App.MobileService.CurrentUser.UserId

12.  Update method OnBtnFacebookAccountClick to call LoginAsync

    //Call LoginAsync for the given Auth Provider
    await App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.Facebook);
    
    //Log the logged in userId
    txtStatus.Text = string.Format("Logged in with: {0}", App.MobileService.CurrentUser.UserId);

13.  Update method OnBtnTwitterAccountClick to call LoginAsync

    //Call LoginAsync for the given Auth Provider await App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.Facebook); //Log the logged in userId txtStatus.Text = string.Format(“Logged in with: {0}”, App.MobileService.CurrentUser.UserId);

14. Update method OnBtnGoogleAccountClick to call LoginAsync

    //Call LoginAsync for the given Auth Provider
    await App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.Google);
    
    //Log the logged in userId
    txtStatus.Text = string.Format("Logged in with: {0}", App.MobileService.CurrentUser.UserId);

15. Update OnBtnLogoutClick to perform a logout operation

    //If there is an authenticated user then logout
    if (App.MobileService.CurrentUser != null && App.MobileService.CurrentUser.UserId != null)
    App.MobileService.Logout();

Running the Sample

1. In Visual Studio, press the F5 key to run the application.
2. In the start page, Click on the button for the authentication scenario you wish to exercise.



3.  An authentication dialog box will be displayed prompting you to enter the credentials of the selected identity provider.
4. A consent message requesting access to the application is shown the first time you log in to your account.  Click Authoriz
5. After the user is authenticated, the user id is shown in the output area.
6.  Click the Logout button to log the user out before trying out another identity provider.

If you cant find a specific Windows Azure Mobile Services scenario using Windows Phone please feel free to reach out to me on Twitter via @cloudnick

The two major changes in this update include:

• New Mobile Services HTML client library that supports IE8+ browsers, current versions of Chrome, Firefox, and Safari, plus PhoneGap 2.3.0+.  It provides a simple JavaScript API to enable both the same storage API support we provide in other native SDKs and easy user authentication via any of the four supported identity providers – Microsoft Account, Google, Facebook, and Twitter.
• Cross Origin Resource Sharing (CORS) support to enable your Mobile Service to accept cross-domain Ajax requests. You can now configure a whitelist of allowed domains for your Mobile Service using the Windows Azure management portal.

With this update Windows Azure Mobile Services now provides a scalable turnkey backend solution for your Windows Store, Windows Phone, iOS, Android and HTML5/JS applications.

To learn more about the new HTML client library for Windows Azure Mobile Services please see checkout the new HTML tutorials on WindowsAzure.com and the following short 4 minute video where Yavor Georgiev demonstrates how to quickly create a new mobile service, download the HTML client quick start app, run the app and store data within the Mobile Service then configure a custom domain with Cross-origin Resource Sharing (CORS) support

Watch on Channel9 here

If you have any questions please reach out to us via dedicated Windows Azure Mobile Services our forum.

Enjoy,

Nick Harris

Lets build this:

and get some live graphs that look like this – note up to you to do some better styling

– see it live here

The idea I set out with was to open up the power (and ease) of Windows Azure Mobile Services to embedded devices that can run .NET MicroFramework.  The scenario I come up with was to capture some sensor data, insert it into a Mobile Service to store the data for historical purposes and also provide a near real time stream of data for clients such as your web browser using Pusher one of our Windows Azure Store Partners.

Capturing Sensor Data

For this scenario I am using the GHI Gadgeteer FEZ Spider and I have already installed all the pre-req software from GHI   An embedded device that runs the .NET MicroFramework and has a bunch of plug and play sensors for rapid prototyping.  To collect the sensor data is quite straight forward

use the designer to wire up your sensors

The following code block will show how to open the network and capture sensor data in this case light, humidity and temperature – is quite straight forward and resides within Program.cs.

With that we have now captured our sensor data which is good, but to be useful to me I wanted to store this data off the device. To do this I decided to use Windows Azure Mobile Services

Storing the Sensor Data in Mobile Services Ok the first thing that you will need to do is Create a Mobile Service. Within the Windows Azure Portal Click New+  

Select Compute, Mobile Service, Create

Provide a subdomain name for your Mobile Service. This will be the endpoint that your device writes sensor data to and complete the wizard

Once your Mobile Service is provisioned.  Click on it and select the Data Tab and click Add a Table

Call this table SensorReading and save

Great, with that done we now have a Windows Azure Mobile Service ready to receive our data from our embedded device.  Interestingly Windows Azure Mobile Services already has client SDKs for Windows Store, Windows Phone and iOS apps.  If your an Android dev support for Android coming soon – giggidy. 

All of these client SDKs consume the REST API that Mobile Services provides for you out of the box.  One of the powerful things that the client SDKs offer is a really simple client API for consuming these services for things like data storage and Auth. 

My goal was to provide something that gives a similar experience to .NET MicroFramework devs because hey if you’re already writing software for embedded devices which is hard enough why shouldn’t you get an easy backend too? I invested a Saturday afternoon on this and provided a quick v-slice for the Insert operation.  To do this I took the Windows Phone Client SDK for Mobile Services and started porting it to .NET MicroFramework.  Man I must say I feel for you .NET MicroFramework devs:

• no<Generics>
• no LINQ
• no JSON Serialization
• limited Reflection capability – where did the GetProperties method go in .NET MF, I noticed PropertyInfo was there but couldn’t actually find GetProperties?

It was like coding back in the dark ages .NET 1.1 ah yes I remember those days. Quite  a wakeup call of how far we have really come!  So needless to say the Saturday afternoon was longer and not as productive as expected, sort of typical right?  Anyhow I got out a partial port that provides Insert functionality and a quick and pretty dirty JSON Serializer.  So here is what it looks like to use it to insert data to your Mobile Service. First we’ll need to add a reference to the (unofficial) Microsoft.Azure.Zumo.MicroFramework assembly. You can find the class library for this in the Where’s teh codez section towards the end

Now create a class SensorReading.cs, this will be the entity you will insert in your Mobile Service

To interact with our mobile service lets now create a new instance MobileServicesClient in your Program.cs

One thing you will note here is that I have not looked into how https is handled in the .NET MF so I am just using the http protocol for writing up to the Mobile Service I still need to investigate support for https on .NET MF. Now lets update temperatureHumidity_MeasurementComplete to create a new sensor reading and store insert it into your Windows Azure Mobile Service (backed by a Windows Azure SQL Database)

That’s it pretty easy right! You’ll note from an API consumer perspective that its pretty close to the experience you get for the Win Store and WP client SDKs minus the fact that I didn’t write a JSON Deserializer yet so I am not currently rehydrating the entity that was passed to the Mobile Service with the updated Id or updated properties…

So now that I had my sensor readings being stored in Windows Azure Mobile Services I wanted to look at how I could visualize this data.

Sending the sensor data to listening clients using Pusher

This is where things get pretty sweet. I wanted to visualize my sensor data in a graph as it arrived in my Mobile Service. Recently we announced a new Windows Azure Store partner – Pusher a  WebSocket Powered Realtime Messaging Service.  Within the Windows Azure Store you can quickly provision a Pusher account and utilize it from Mobile Services within minutes as follows.

Press New+

Select Store

Select the Pusher add-on

Walk through the remainder of the Wizard to select your plan and get your keys

Note: if the Windows Azure Store is currently not available in your region you can sign up directly on Pusher.com

Next in the Windows Azure Portal select your SensorReading table and click the script tab and set the dropdown to Insert. This will allow us to write code, called Server Scripts, that will be executed every time our Gadgeteer inserts data into our SensorReading table in Mobile Service.

Next we replace the insert code of our script to do two things save the data to our database and then use Pusher subscription to send our sensor data as it is received to all listening clients.

Graphing the data received via Pusher in a web client running on Windows Azure Web Sites

So now we had our sensor data collected, inserted and stored in Mobile Services and then pushed using pusher to any listening clients.  What I wanted was a web client to visualize the data in a graph as it arrived. You can learn how to create a free Windows Azure Website using ASP.NET MVC and deploy it to Windows Azure here – http://www.windowsazure.com/en-us/develop/net/tutorials/get-started/

The following code shows how you can write a quick, not so pretty code+UI wise,  graph that will receive the sensor data live via Pusher and update the graph.  To do this I am using jqplot and the Pusher JavaScript library. First add your script references to _Layout.cshtml

Then add your jquery.jqplot.min.css to your /Content folder. Next we need to Update our Home/Index.cshtml view to listen/bind to our Pusher Channel and then redraw our jqplot graph as data is pushed directly from Pusher.

If you read through the code you will see pretty clearly that the Pusher implementation is 3 lines of code only – to me this is extremely cool. Itty bitty amount of code, phenomenal cosmic power!

So that’s it now we have live graphs on our website, you can checkout a running version of this code and it live graphs that I deployed to a Windows Azure Web Site here – http://microframework.azurewebsites.net

How much does it cost

Everything that I did here can be done for free with Windows Azure Windows Azure Free Trial and/or the great free tier offerings for Windows Azure Web Sites, Windows Azure Mobile Services and Pusher.

Where’s teh codez?

This is unofficial, is not supported – I did it in my free time and it Works on my machine!   disclaimers all being said I really hope that this does open up a lot of doors for you for building out a whole new range of devices + services scenarios using Windows Azure and our Store Partners You can download the .NET MF lib and sample code from this github repo

Summary

I hope this has opened the door to great new devices+services scenarios you can build out for your .NET MicroFramework solutions. With few lines of code and powerful services like Windows Azure Web Sites, Windows Azure Mobile Services and Pusher you can make working in the emerging embedded devices + services space a lot easier then it has been in the past. Please do let me know if you have built something awesome in this space on the Twitterz @cloudnick

Keynote Demo of Windows Azure Mobile Services
During //BUILD 2012 I was fortunate enough to be to be on point for delivering the day 2 Mobile Services keynote demo app Event Buddy.  If you have not watched this keynote demo I would recommend you check it out – the Mobile Services Demo starts about 10mins 30 seconds in

Direct Video link on Channel9.  Event Buddy is now also available as a Code Sample that you can download here.

Developing Mobile Solutions on Windows Azure – Part I

Watch Josh take a Windows Phone 8 + Windows Store application and light it up with cloud services to handle data, authentication and push notifications – right before your eyes with Windows Azure Mobile Services. Almost all demo and no slides, this session is designed to take you from zero to Mobile Services here in 60 minutes.

You can also watch this video directly on Channel 9 here.
Developing Mobile Solutions on Windows Azure – Part I

In addition to this I also presented with fellow baldy – Chris Risner.  In this session we took the output of Part I  from Josh and demonstrated how you could extend your existing applications to support common scenarios such as geo-location, media, and cloud to device messaging using services from Windows Azure.   Here a summary of the content of this presentation that I humbly grabbed directly from a prior post by Chris

• We took pictures and uploaded them to Blob Storage.  For this we used a web service layer, running in Windows Azure Websites, to get a SAS (Shared Access Signature) which allowed us to securely upload to blob storage.
• We then got the location of the device and used that information to geo-tag the pictures we just uploaded.
• We added a web page to our web service which allowed a user to select a geographical area on a map and request a push notification be sent to anyone that had taken a picture inside of it (this used the Bing Maps API and Queues from Windows Azure Storage)
• We deployed a worker role to Windows Azure Cloud Services which would check the queue and then figure out who should be notified (using Entity Framework’s geospatial support) and sent out the actual push notifications to both the Windows 8 and Windows Phone 8 clients.

Here is the direct link to watch on Channel 9 and Chris has also made the code available here
Enjoy,

Nick Harris

We’re spending this week sharing information about the challenge and about developing for Windows Azure. Here’s my Top Ten Reasons to Compete in the Windows Azure Challenge:

10. You get a Windows Azure account to build your submission for FREE!
9. Much more power than your favorite superhero without the occupational risks!  From the safety of your couch with a click of a button you can quickly build, deploy, and manage applications across a global network of Microsoft-managed data centers.
8. Born to code? Me too, we already have so much in common  - Windows, Mac, Linux - .NET, node.js, java, php, python and others you can build applications using any operating system, language or tool. Use what works best for you!
7. When building your solutions you consider leveraging partners from the Windows Azure Store who provide both application and data services.  For example you could use Microsoft Translator to translate text and SendGrid to send an email.
6. Need a Database? Apply your existing knowledge and hit the ground running using one of the following popular databases including Windows Azure SQL Database, MySQL and MongoDB.
5. Building a distributed system? Check out Service Bus for relayed connectivity between distributed components anywhere in the globe!
4. Got Video? Build media solutions using Windows Azure Media Services: Ingest, Encode, Protect and Stream media from the cloud with ease.
3. Go Web go! With Windows Azure Web Sites there is no easier way to get a web site up and running in seconds. Before you could read a whole paragraph on how to use Web Sites, you could have a site up and running with a database back-end.   Develop with ASP.NET, PHP or Node.js and deploy in seconds with FTP, Git or TFS.
2. Got Mobile? When competing in a world class challenge every minute counts.  Within seconds you can use Windows Azure Mobile Services to create a back-end for your Windows Store + Windows Phone apps to incorporate structured storage, user authentication, and push notifications.

And the number one reason to compete in the Windows Azure Challenge is . . .

1. Got Job? huh… wait!, what now? When the competition is all done and dusted, the skills you’ve gained working with Windows Azure will set you well apart from the rest when it comes to looking for your dream job – it did for me!

Nick Harris | Imagine Cup Windows Azure Challenge Captain | @cloudnick

Windows Azure is a suite of powerful cloud services that can help your app projects in a variety of ways. If your Imagine Cup team is thinking about exploring Windows Azure, the decision just got a lot easier thanks to the Windows Azure Boost!

At our worldwide finals next July in St. Petersburg, our first place winners who include Windows Azure in their project can earn an extra $1,000 or $3,000 for their team!

We actually have two Windows Azure Boosts. Our first boost is for those teams using Windows Azure Cloud Services, Websites, or Virtual Machines. Use any or all of those technologies and your team could win $1,000! Our second Boost is for using Windows Azure Mobile Services. Incorporate that into your project and your team could win $1,000 for it. And best of all, you can go for the double shot: if your team wins both Boosts you’ll get $3,000!

So if you’re submitting a project to the Windows Phone Challenge, for example, consider using Windows Azure Mobile Services in your project. If you’re our top winner in that challenge, your team will earn an extra thousand dollars thanks to the Windows Azure Boost. Add Windows Azure Cloud Services, Websites, or Virtual Machines and your winning team would get the double shot of $3,000!

(This is open to all competitions and challenges except the Windows Azure Challenge, since that would be redundant.)

We’re really looking forward to seeing your great projects in St. Petersburg. And if your project uses Windows Azure, your team could earn the thousand-buck boost or even the double shot for three thousand.

To get you started, here are some links to help you out:

• Access: Complete the Imagine Cup Windows Azure Quiz and we will send you your FREE azure pass!
• Developer tools?
  • If you want to use Visual Studio get it for FREE from DreamSpark.
  • Then grab the SDK for your development language and operating system of choice fromWindows Azure Downloads
• Tutorials: Jump in and start doing some step-by-step tutorials in the Windows Azure Developer Center <– you should really bookmark this link.  Here a couple of top picks in order of what is probably most relevant for you - pick the ones that are most appropriate for you:
  • Windows Azure Mobile Services: Do the Getting Started Tutorial for Windows Azure Mobile Services, checkout the Video tutorials and Code Samples
  • Windows Azure Web Sites: Get started with the videos here, build your first ASP .NET MVC web site and checkout some real world samples
  • Windows Azure Media Services: Get started with the tutorials and resources in the Windows Azure Media Services dev portal, checkout this video series and this blog
  • Windows Azure SQL Database: Checkout these tutorials, I would start with this one - Create and deploy an ASP.NET web site and SQL Database with Visual Studio
  • Node.js on Windows Azure: For a whole bunch of tutorials Checkout thenode.js developer center
  • Windows Azure Storage: Checkout the great step-by-step tutorials here
  • Windows Azure Service Bus: Checkout all the great tutorials here and this video series
  • Big Data: Get a jump start with this bunch of tutorials
• Help?
  • For questions specific to the Imagine Cup competition (e.g passes, challenge rules etc) please use the Imagine Cup Forum
  • For technical questions about Windows Azure post in the Windows Azure Forums - we have a dedicated team of engineers answering questions from people all around the world!

Good luck and happy coding! Official rules for the Windows Azure Boost are here.

Nick Harris | Imagine Cup Windows Azure Challenge Captain | @cloudnick

It’s been less than five months since we introduced the first public preview for Windows Azure Mobile Services and in this short time we have seen continual additions to the Mobile Service offering including:

• SDKs for Windows Store, Windows Phone 8 and iOS apps
• Auth using Microsoft Account, Facebook, Google and Twitter
• Push Notification support via WNS, MPNS and APNS
• Structured storage
• Scheduler to execute tasks on a schedule e.g aggregating feeds, sending notifications, crunching data
• Deployment in North Europe, East and West US datacenters

This post details wealth of new content we have recently released designed to help you get started with Windows Azure Mobile Services including Videos, Code Samples and Tutorials.

New Videos

We recently launched a new Windows Azure Mobile Services series to help people get started with Mobile Services.  Through this series you will learn how Mobile Services can:

• Provide turnkey backend solutions that connect your mobile apps to the cloud within minutes
• Store data off device and read it back into your apps
• Add custom business logic utilizing server scripts
• Implement user authentication in your apps using popular social identity providers such as Microsoft Account, Facebook, Twitter and Google.
• Implement Push Notifications in your apps to keep your users up to date with your latest app content
• Execute tasks on a schedule e.g aggregating feeds, sending notifications, crunching data etc.
• Accelerate your mobile app development for Windows Store, Windows Phone 8 and iOS

Here are some quick links to the current videos within the series:

New Code Samples

In addition to the video series, we have released a number of code samples to the MSDN Code Gallery.  These samples demonstrate step-by-step how you can use the key functionality available within Windows Azure Mobile Services in your Windows Store apps.  Below is a list of the new code samples:

Geolocation sample end to end using Windows Azure Mobile Services  (New)

This sample provides an end to end location scenario with a Windows Store app using Bing Maps and a Windows Azure Mobile Services backend. It shows how to add places to the Map, store place coordinates in a Mobile Services table, and how to query for places near your location.

Enqueue and Dequeue messages with Windows Azure Mobile Services and Services Bus (New)

My Store – This sample demonstrates how you can enqueue and dequeue messages from your Windows Store apps into a Windows Azure Service Bus Queue via Windows Azure Mobile Services. This code sample builds out an ordering scenario with both a Sales and Storeroom and app.

 Capture, Store and Email app Feedback using Windows Azure Mobile Services  (New)

This sample shows how you can implement a Feedback charm option in your Windows Store application and submit the feedback to be both stored Windows Azure Mobile Services and emailed directly to you.

Upload File to Windows Azure Blob Storage using Windows Azure Mobile Services  (New)

This demonstrates how to store your files such as images, videos, docs or any binary data off device in the cloud using Windows Azure Blob Storage. In this example we focus on capturing and uploading images, with the same approach you can upload any binary data to Blob Storage.

Create a Game Leaderboard using Windows Azure Mobile Services (New)

The My Trivia sample demonstrates how you can easily add, update and view a leaderboard from your Windows Store applications using Windows Azure Mobile Services.

Event Buddy Sample – Storage, Auth and Push Notifications with Mobile Services  (New)

In this sample you will start with a disconnected Windows Store app that manages events & sessions. You will connect it to Windows Azure Mobile Service to provide structured storage, auth using Twitter or Facebook and push notifications.

Authenticate Microsoft Account, Facebook, Twitter and Google w/ Mobile Services (New)

This sample demonstrates how you can easily wire up your Windows Store application to require your users to Authenticate against well know social identity such as Microsoft Account, Facebook, Twitter and Google using Windows Azure Mobile Services.

Tile, Toast and Badge Push Notifications using Windows Azure Mobile Services (New)

This sample demonstrates how you can easily register a channel in Windows Azure Mobile Services and then send different types of push notifications such as tile, toast and badge notifications from a server side script to your client application.

 Raw Notifications using Windows Azure Mobile Services (New)

This sample demonstrates how you can easily send Raw push notifications to your Windows Store apps using Windows Azure Mobile Services.

Send Push Notifications at Periodic Interval with the Mobile Services Scheduler (New)

This sample demonstrates how you can offload work from your Windows Store app to be processed on a scheduled basis using Windows Azure Mobile Services. It shows how to create a Scheduled Script that polls a feed and send a Push Notification to update the tile with latest news.

For a full list please see the new Code Sample Page on Windows Azure

Tutorials

There are a number of great step-by-step tutorials that cover Getting Started, Data, Auth, Push Notifications, Services and Tools.  We recently added two new tutorials that demonstrate how to:

• Schedule backend jobs using the Mobile Services Scheduler
• Automate mobile services with command-line tools

These tutorials are available for Windows Store, Windows Phone 8, and iOS apps.

I hope this new content combined with our offer of 10 FREE Mobile Services helps get you off to a flying start!  That’s all from me for now, if there is new content that you would like to see made available please feel free to reach out to me with your suggestions.

As always, please visit our forum if you have any questions and send any feedback to mobileservices@microsoft.com.

Happy Coding!

Nick Harris
@cloudnick | Blog

What was Announced Today!

Today, Scott Guthrie announced  updates to Windows Azure Mobile Services which allows developers to take advantage of the cloud to build and deploy modern apps for Windows 8 and iOS.  Whether you are a developer building for the Windows Store, Windows Phone 8, iPhone, or iPad, Mobile Services provides an easy, streamlined process for backend elements like storing structured data, configuring user authentication via Windows Live, Facebook, Twitter, and Google, and incorporating push notifications.

If you are building a mobile application Windows Azure Mobile Services can help in the following ways:

• Rapid Development: configure a straightforward and secure backend for Windows 8 and mobile applications in less than five minutes.
• Create modern mobile app with built in support and new added capabilities:
• (NEW)Scheduled Scripts: run a server script on a pre-set schedule or on-demand which enables several key scenarios including:
  • aggregating data from Twitter, RSS feeds, or any external web services
  • executing background code efficiently, such as process/resize images, performing complex calculations, or sending emails
  • schedule sending push notifications to customers to ensure they arrive at the right time of day
• (NEW) Command-line support: use the Windows Azure cross platform command line tools to easily create and manage mobile services
• (NEW) Availability in Europe: create Mobile Services in the North Europe region in addition to the US East and US West regions

Getting Started with Scheduled Scripts with the Windows Azure Mobile Services Scheduler

In this section I will demonstrate how you can poll twitter on a scheduled basis for tweets directed at an alias and then use this information to send a Push Notification in the form of a Tile update.  This is a simplified version of Yavor’s post here - if you want to see how you can filter tweets and take this a bit further jump over to Yavor’s blog and check it out.

1. Create the scheduler job that will send push notifications to registered clients every 15 minutes with the latest Twitter updates for a particular twitter handle.
   
2. Specify a name for the job and make sure the schedule frequency is set to every 15 minutes. Click the check mark to create the job.

1. Select the created job from the job list.
2. Select the Script tab and paste the code snippet below that both polls Twitter and then composes a push notification to update your start screens tile using push.wns.*
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

   function CheckFeed() { getUpdatesAndNotify(); }   var request = require('request'); function getUpdatesAndNotify() { request('http://search.twitter.com/search.json?q=@cloudnick&rpp=2', function tweetsLoaded (error, response, body) { var results = JSON.parse(body).results; if(results){ results.forEach(function visitResult(tweet){ sendNotifications(tweet); }); } }); }   function sendNotifications(tweet){   var channelTable = tables.getTable('Channel'); channelTable.read({ success: function(channels) { channels.forEach(function(channel) {   push.wns.sendTileWideSmallImageAndText04(channel.uri, { image1src: tweet.profile_image_url, text1: '@' + tweet.from_user, text2: tweet.text });   }); } }); }

   view raw gistfile1.js This Gist brought to you by GitHub.
3. Once you paste the script into the editor, click the Save button to store the changes to the script.
4. In Visual Studio, press F5 to build and run the application.  This will ensure your channel URI is up to date and will ensure the Default Wide tile is now on your Start screen
5. Go back to the Windows Azure Management Portal, select the Scheduler tab of your mobile service, and then click Enable in the command bar to allow the job to run

.

1. To test your script immediately rather than wait 15 minutes for it to be scheduled, click Run Once in the command bar.
2. Return to the start screen and see the latest update on your application tile

Summary

In this post you learnt how you can use the Windows Azure Mobile Services Scheduler to execute scripts on a scheduled basis.  We used scheduled scripts to poll twitter every 15 minutes and send a push notification in the form of a Live Tile to our windows store apps with the latest tweets at an alias.

Here are some related resources you should checkout:

• Video: Configuring Push Notifications in your Windows Store apps and Mobile Services
• Video: Getting Started with Scheduled Scripts using the Windows Azure Mobile Services Scheduler
• Code Sample: Send Push Notifications at Periodic Interval with the Mobile Services Scheduler 
• This is a simplified version of Yavor’s post check out his more detailed scenario here

You can get started today with 10 Mobile Services for FREE

Background

In my previous post How to Upload an Image using a Blob Storage SAS generated by Windows Azure Mobile Services I detailed:

1. Why you should use a SAS to upload any binary data from client devices
2. How you could generate your own SAS using Mobile Services Server Side scripts
3. How you could use the HttpClient from a Windows Store app to upload your image using the SAS

With the recent inclusion of the Windows Azure SDK for Node in Mobile Services and the announcement of the Windows Azure Storage Client Library 2.0 for Windows Runtime (CTP) the process for performing Steps 2 and 3 are much easier.  This post will detail the updated approach.

Creating your Mobile Service

In this post I will extend the Mobile Services quick start sample. Before proceeding to the next section create a mobile service and download the quickstart as detailed in the tutorial here

Capturing the Image|Media

Our first task is to capture the media we wish to upload. To do this follow the following steps.

• Add an AppBar to MainPage.xaml with a take photo button to allow us to capture the image

...
    </Grid>
...
    <Page.BottomAppBar>
        <AppBar>
            <Button Name="btnTakePhoto" Style="{StaticResource PhotoAppBarButtonStyle}"
                    Click="OnTakePhotoClick" />
        </AppBar>
    </Page.BottomAppBar>
...
</Page>

• Add the OnTakePhotoClick handler and use the CameraCaptureUI class for taking photo and video

using Windows.Media.Capture;
 
 
private async void OnTakePhotoClick(object sender, RoutedEventArgs e)
 {
 //Take photo or video
 CameraCaptureUI cameraCapture = new CameraCaptureUI();
 StorageFile media = await cameraCapture.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo);
 
 
}

• Update the TodoItem class with some properties that will be required to generate the SAS

    public class TodoItem
    {
        public int Id { get; set; }
 
        [DataMember(Name = "text")]
        public string Text { get; set; }
 
        [DataMember(Name = "complete")]
        public bool Complete { get; set; }
 
        //Added below for blob sas generation in Mobile Services
 
        [DataMember(Name = "containerName")]
        public string ContainerName { get; set; }
 
        [DataMember(Name = "resourceName")]
        public string ResourceName { get; set; }
        
        public string SAS { get; set; }
 
    }

• Update the OnTakePhotoClick handler to insert the todoitem setting the ContainerName and resourceName for which we want a SAS generated

private async void OnTakePhotoClick(object sender, RoutedEventArgs e)
{
    //Take photo or video
    CameraCaptureUI cameraCapture = new CameraCaptureUI();
    StorageFile media = await cameraCapture.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo);
 
    //add todo item to trigger insert operation which returns item.SAS
    var todoItem = new TodoItem() {                     
            ContainerName = "mypics", 
            ResourceName= media.Name,
            Text = "NA", 
    };
 
    await todoTable.InsertAsync(todoItem);
    items.Add(todoItem);
 
    //TODO: Upload image direct to blob storage using SAS
}

Generating a Shared Access Signature (SAS) using Mobile Services server-side script

In this step we add sever-side script to generate a SAS on insert operation of the TodoItem table.

To do this perform the following steps:

• Navigate to your Mobile Service and select the Data Tab, then click on Todoitem

• Select Script, then the Insert drop down

• Add the following server side script to create the containerName and generate a blob SAS for the resourceName

var azure = require('azure'); 
var qs = require('querystring');
 
function insert(item, user, request) {  
        var accountName = '<replace with your storage account name>';
        var accountKey = '<replace with your storage account key>';         
        var host =   accountName + '.blob.core.windows.net';
        var canonicalizedResource = '/' +  item.containerName + '/' + item.resourceName;
        //Must be lowercase
        item.containerName = item.containerName.toLowerCase();
        
        //Create the container if it does not exist
        //we will use public read access for the blobs and will use a SAS to upload        
        var blobService = azure.createBlobService(accountName, accountKey, host);
        blobService.createContainerIfNotExists(item.containerName, {publicAccessLevel : 'blob'}, function(error){            
            if(!error){
                // Container exists now define a policy that provides write access                      
                // that starts immediately and expires in 5 mins        
                var sharedAccessPolicy = {
                  AccessPolicy:{
                        Permissions: azure.Constants.BlobConstants.SharedAccessPermissions.WRITE,
                        //Start: //use for start time in future, beware of server time skew 
                        Expiry: formatDate(new Date(new Date().getTime() + 5 * 60 * 1000)) //5 minutes from now
                    }
                };
                
                //Generate the SAS for your BLOB
                var sasQueryString = getSAS(accountName,
                                  accountKey, 
                                  canonicalizedResource,
                                  azure.Constants.BlobConstants.ResourceTypes.BLOB,
                                  sharedAccessPolicy);
                
                //full path for resource with sas
                item.sas =  'https://' + host + canonicalizedResource + '?' + sasQueryString;                                         
            }
            else{
                console.error(error);
            }
            
            request.execute();
        });                       
}
 
function getSAS(accountName, accountKey, path, resourceType, sharedAccessPolicy) {                         
     return qs.encode(new azure.SharedAccessSignature(accountName, accountKey)
                                    .generateSignedQueryString(path, {}, resourceType, sharedAccessPolicy));                           
}
 
function formatDate(date){ 
        var raw = date.toJSON();
        //blob service does not like milliseconds on the end of the time so strip
        return raw.substr(0, raw.lastIndexOf('.')) + 'Z'; 
}

Using the Windows Azure Storage Client Library 2.0 for Windows Runtime (CTP) to upload the Image directly to storage using the SAS

• Download the Storage Client libraries for Windows 8 click here.
• Extract and add a reference to Microsoft.WindowsAzure.Storage.winmd your client project
• Update OnTakePhotoClick handler to update the image directly to blob storage using the CloudBlockBlob,UploadFromStreamAsync and the generated todoitem.SAS

        ...
 
        using Microsoft.WindowsAzure.Storage.Auth;
        using Microsoft.WindowsAzure.Storage.Blob;               
 
        ...
 
        private async void OnTakePhotoClick(object sender, RoutedEventArgs e)
        {
            //Take photo or video
            CameraCaptureUI cameraCapture = new CameraCaptureUI();
            StorageFile media = await cameraCapture.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo);
 
            if (media != null)
            {
                //add todo item to trigger insert operation which returns item.SAS
                var todoItem = new TodoItem()
                {
                    ContainerName = "mypics",
                    ResourceName = media.Name,
                    Text = "NA",
                };
                await todoTable.InsertAsync(todoItem);
                items.Add(todoItem);
 
                //Upload image direct to blob storage using SAS and the Storage Client library for Windows CTP
                //Get a stream of the image just taken
                using (var fileStream = await media.OpenStreamForReadAsync())
                {
                    var sasUri = new Uri(todoItem.SAS);
 
                    //Our credential for the upload is our SAS token
                    StorageCredentials cred = new StorageCredentials(sasUri.Query.Substring(1));
 
                    CloudBlobContainer container = new CloudBlobContainer(new Uri(string.Format("https://{0}/{1}", sasUri.Host, todoItem.ContainerName)), cred);
                    CloudBlockBlob blobFromSASCredential = container.GetBlockBlobReference(todoItem.ResourceName);
                    await blobFromSASCredential.UploadFromStreamAsync(fileStream.AsInputStream());
                }
            }
        }

Run the application

• Hit F5 on the application and right click with your mouse to show the app bar
• Press the Take Photo button
• Observe that the SAS is returned from your Mobile Service

• Check your storage account now has a great picture of a fully polished chrome dome capable of reflecting light far better then your average mirror

Enjoy,
Nick

Recently we announced the preview of Windows Azure Mobile Services. In this blog series I will detail how to build a Windows Azure Mobile Service to send push notifications of varying types to your Windows 8 applications.

This series will walk through creating a push notification scenario using WNS and Windows Azure Mobile Services.

• Part 1: Windows Azure Mobile Services and Push Notifications an Overview
• Part 2: Setup: Create and configure your Mobile Service and Windows Store app for Push Notifications
• Part 3: Request a Channel and Register with your Mobile Service
• Part 4: Sending a Toast, Tile or Badge Notification
• Part 5: Efficiency tips and tricks for Push Notification scenarios

As I post each part I will update the links below and tweet as the post is available. So lets get started with Part 1 - Azure Mobile Services and Push Notifications an Overview

Part 1: Windows Azure Mobile Services and Push Notifications an Overview

What is Windows Azure Mobile Services?

Here is an info-graphic on the current Windows Azure Mobile Services stack I pulled together as part of a presentation I recently gave at TechEd.  It’s important to note that this info-graphic captures Mobile Services today and over time you will see the feature set of Mobile Services grow exponentially with subsequent releases.

The goal of Windows Azure Mobile Services is to make it incredibly easy for developers to add a cloud backend to their client apps be it a Windows 8, Windows Phone, iOS or Android application. To do this we provide a number of turn key features baked right into the Mobile Services experience. As the diagram depicts Mobile Services today provides:

• Structured Storage
  • ability to store structured data to a SQL Database using dynamic schema without being concerned with writing underlying T-SQL.
  • If using single database apps are automatically partitioned by schema e.g AppX.Todoitem, AppY.Todoitem
  • If you want access to your data you are not locked out and can manage it in a number of ways including the Mobile Service Portal, SQL Portal, SQL Management Studio, REST API etc.
• Server Logic
  • Service API: Mobile services automatically generates a REST API to allow you to perform CRUD operations from your client application on your structured storage
  • With Dynamic Schema (enabled by default), your Mobile Service will automatically add columns to tables as necessary to store incoming data.
  • Ability to author server side business logic directly in the portal that is executed directly within the CRUD operation pipeline
• Auth
  • Makes it easy for your users to Authenticate against Windows Live. Other major identity providers are coming soon.
  • The REST API can be locked down using table level permissions using a simple drop down.  No complex code required.  Available permissions levels include: Everyone, Anyone with an Application Key, Only Authenticated Users, Only Scripts and Admins.  These permissions can be set individually on each table and can granularly control each CRUD operation of each table.
  • More granular control can be added using server side scripts and the user object
• Push Notifications
  • Integrates with WNS to provide Toast, Tile and Badge Notifications.
  • WNS auth is made easy with the portal captures your WNS client secret and package SID
  • the server side script push.wns.* namespace  performs WNS auth for you and provides a clean and easy object model to compose notifications
• Common tenants of Windows Azure Services
  • Scale
    • Compute - scale between shared and reserved mode, increase/decrease your instance count
    • Storage - ability to scale out your mobile service tenant(s) to a dedicated SQL DB. Ability to scale up your SQL DB from web through business to 150GB.
  • Diagnostics
    • View diagnostics directly in the portal including API calls, CPU time and Data Out
  • Logging
    • Console.* operations like console.log and console.error provide an easy means to debug your server side scripts.

Today we provide client libraries for Windows 8 to make consuming mobile services easy.  For more details on what client libraries (Windows 8, Windows Phone, iOS and Android) are supported at the time of reading please see: Mobile Services and Mobile Service Reference.

What are Push Notifications?

The Windows Push Notification Services (WNS) enables you to send toast, tile, badge and raw notifications from the cloud to your Windows Store applications even when your app is not running. Push notifications are ideal for scenarios when you need to target a specific user with personalized content.

The following diagram depicts the general Lifecycle of a push notifications via the Windows Azure Notification Service (WNS).  We’ll walk through the steps shortly but before doing so I thought it would be important to call out that as a developer implementing a push notification scenario all you need to do is implement those interactions in grey and the applications/services in blue.  Fortunately Mobile Services makes a great deal of this easy for you as you will see throughout the reset of this series. 

The process of sending a push notification boils down to three basic steps:

• 1. Request a channel. Utilize the WinRT API to request a Channel Uri from WNS.  The Channel Uri will be the unique identifier you use to send notifications to your application.
• 2. Register the channel with your Windows Azure Mobile Service.  Once you have your channel you can then store your channel and associate it with any application specific data (e.g user profiles and such) until your services decide that it’s time to send a notification to the given channel.
• 3. Authenticate and Push Notification to WNS. To send notifications to your channel URI you are first required to Authenticate against WNS using OAuth2 to retrieve a token to be used for each subsequent notification that you push to WNS once you have this you can compose and push the notification to the channel recipient. The push.wns.* methods make this task exceptionally quick to accomplish compared to writing it all from scratch yourself.

All in all Windows Azure Mobile Services makes all these concepts and steps and incredibly simple to implement though its structured storage and push notifications features.  This series will walk through creating a push notification scenario using WNS and Windows Azure Mobile Services.

• Part 1: Windows Azure Mobile Services and Push Notifications an Overview
• Part 2: Setup: Create and configure your Mobile Service and Windows Store app for Push Notifications
• Part 3: Request a Channel and Register with your Mobile Service
• Part 4: Sending a Toast, Tile or Badge Notification
• Part 5: Efficiency tips and tricks for Push Notification scenarios

As I post each part I will update the links below and tweet as the post is available

Enjoy,

Nick

As a preview here is a screenshot of one of the Agenda slide from the Chinese zh-TW poser point deck

We have localized the content into the following languages thus far.  You can click on the link to get access to the content directly

· Chinese zh-TW
· English en-US
· German de-DE
· French fr-FR
· Italian it-IT
· Japanese ja-JP
· Korean ko-KR
· Portuguese pt-BR

Coming soon:
· Spanish
· Russian

Enjoy,
Nick Harris

Windows 8 How to upload an Image using Blob Storage SAS generated by Windows Azure Mobile Services

This post details the specific scenario on how to capture an image on windows 8 and upload it directly to Windows Azure Blob Storage using a Shared Access Signature (SAS) generated within Windows Azure Mobile Services. It demonstrates and alternative approach suited for larger scale implementations (i.e using a SAS) when contrasted with the following article Storing Images from Android in Windows Azure Mobile Services

Note: This topic is advanced and assumes that you have a good knowledge of the Windows Azure Blob REST API and Windows Azure Mobile Services. I would suggest you check out the following tutorials and Blob Storage REST API prior to starting
Note: that although this is specifically an image example you could upload any media/binary data to blob storage using the same approach.

Background – Shared Access Signature

What Are Shared Access Signatures?

A Shared Access Signature is a URL that grants access rights to containers, blobs, queues, and tables. By specifying a Shared Access Signature, you can grant users who have the URL access to a specific resource for a specified period of time. You can also specify what operations can be performed on a resource that’s accessed via a Shared Access Signature. In the case of Blobs operations include:

• Reading and writing page or block blob content, block lists, properties, and metadata
• Deleting, leasing, and creating a snapshot of a blob
• Listing the blobs within a container

Why not just use the storage account name and key directly?

There are a few standout reasons:

• Security – When building device applications you should not store your storage account name and key within the device app. The reason is that it makes your storage account susceptible to being misused. If someone were to reverse engineer your application take your storage account key then they would essentially have access to 100TB of cloud based storage until such a time that you realized and reset the key. The safer approach is to use a SAS as it provides a time boxed token with defined permissions to a defined resource. With policies the token can also be invalidated/revoked
• Scale Out (and associated costs)- A common approach I see is uploading an image directly through their web tier e.g a Web API or Mobile Service unfortunate consequence of this at scale is that you are unnecessarily loading your web tier. Consider that each of your instances on your web tier has a limited network I/O. Uploading images directly through this will result in maxing out that I/O and the need to scale out (add more instances) much sooner then alternative approaches. Now consider a scenario where your application requests only a SAS from your web tier you have now moved MBs or image load off your web tier and instead replaced it with a small ~ 100 – 200 byte SAS. This essentially means a single instance now will provide much more throughput and your upload I/O now directly hits the Blob storage service

What is the general workflow for uploading a blob using a SAS?

The four basic steps required when uploading an image using the SAS approach depicted are as follows:

1. Request a SAS from your service
2. SAS returned from your service
3. Upload blob (image/video/binary data) directly to Blob Storage using the SAS
4. Storage service returns response

For this post we will focus specifically on how to write/upload a blob using a shared access signature that is generated in the mobile service insert trigger.

Creating your Mobile Service

In this post I will extend the Mobile Services quick start sample. Before proceeding to the next section create a mobile service and download the quickstart as detailed in the tutorial here

Capturing the Image|Media

Our first task is to capture the media we wish to upload. To do this follow the following steps.

1. Add an AppBar to MainPage.xaml with a take photo button to allow us to capture the image

1 2 3 4 5 6 7 8 9 10 11

... </Grid> ... <Page.BottomAppBar> <AppBar> <Button Name="btnTakePhoto" Style="{StaticResource PhotoAppBarButtonStyle}" Click="OnTakePhotoClick" /> </AppBar> </Page.BottomAppBar> ... </Page>

view raw gistfile1.cs This Gist brought to you by GitHub.
2. Add the OnTakePhotoClick handler and use the CameraCaptureUI class for taking photo and video

1 2 3 4 5 6 7 8 9 10 11

using Windows.Media.Capture;     private async void OnTakePhotoClick(object sender, RoutedEventArgs e) { //Take photo or video CameraCaptureUI cameraCapture = new CameraCaptureUI(); StorageFile media = await cameraCapture.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo);     }

view raw gistfile1.cs This Gist brought to you by GitHub.

Generating a Shared Access Signature (SAS) using Mobile Services server-side script

In this step we add sever-side script to generate a SAS on insert operation of the TodoItem table.

To do this perform the following steps:

1. Navigate to your Mobile Service and select the Data Tab, then click on Todoitem



2. Select Script, then the Insert drop down



3. Add the following server side script to generate the SAS

Note: this code assumes there is already a public container called test.
Note:Simple example of Generating a Windows Azure blob SAS in Node created using the guidance here.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122

//Simple example of Generating a Windows Azure blob SAS in Node created using the guidance at http://msdn.microsoft.com/en-us/library/windowsazure/hh508996.aspx. //If your environment has access to the Windows Azure SDK for Node (https://github.com/WindowsAzure/azure-sdk-for-node) then you should use that instead.     function insert(item, user, request) { var accountName = '<Your Account Name>'; var accountKey = '<Your Account Key>'; //Note: this code assumes the container already exists in blob storage. // If you wish to dynamically create the container then implement guidance here - http://msdn.microsoft.com/en-us/library/windowsazure/dd179468.aspx var container = 'test'; var imageName = item.ImageName; item.SAS = getBlobSharedAccessSignature(accountName, accountKey, container, imageName); request.execute(); }     function getBlobSharedAccessSignature(accountName, accountKey, container, fileName){ signedExpiry = new Date(); signedExpiry.setMinutes(signedExpiry.getMinutes() + 30); canonicalizedResource = util.format(canonicalizedResource, accountName, container, fileName); signature = getSignature(accountKey); var queryString = getQueryString(); return util.format(resource, accountName, container, fileName, queryString); }     function getSignature(accountKey){ var decodedKey = new Buffer(accountKey, 'base64'); var stringToSign = signedPermissions + "\n" + signedStart + "\n" + getISO8601NoMilliSeconds(signedExpiry) + "\n" + canonicalizedResource + "\n" + signedIdentifier + "\n" + signedVersion; stringToSign = stringToSign.toString('UTF8'); return crypto.createHmac('sha256', decodedKey).update(stringToSign).digest('base64'); }     function getQueryString(){ var queryString = "?"; queryString += addEscapedIfNotNull(queryString, Constants.SIGNED_VERSION, '2012-02-12'); queryString += addEscapedIfNotNull(queryString, Constants.SIGNED_RESOURCE, signedResource); queryString += addEscapedIfNotNull(queryString, Constants.SIGNED_START, getISO8601NoMilliSeconds(signedStart)); queryString += addEscapedIfNotNull(queryString, Constants.SIGNED_EXPIRY, getISO8601NoMilliSeconds(signedExpiry)); queryString += addEscapedIfNotNull(queryString, Constants.SIGNED_PERMISSIONS, signedPermissions); queryString += addEscapedIfNotNull(queryString, Constants.SIGNATURE, signature); queryString += addEscapedIfNotNull(queryString, Constants.SIGNED_IDENTIFIER, signedIdentifier); return queryString; }     function addEscapedIfNotNull(queryString, name, val){ var result = ''; if(val) { var delimiter = (queryString.length > 1) ? '&' : '' ; result = util.format('%s%s=%s', delimiter, name, encodeURIComponent(val)); } return result; }     function getISO8601NoMilliSeconds(date){ if(date) { var raw = date.toJSON(); //blob service does not like milliseconds on the end of the time so strip return raw.substr(0, raw.lastIndexOf('.')) + 'Z'; } }     var Constants = { SIGNED_VERSION: 'sv', SIGNED_RESOURCE: 'sr', SIGNED_START: 'st', SIGNED_EXPIRY: 'se', SIGNED_PERMISSIONS: 'sp', SIGNED_IDENTIFIER: 'si', SIGNATURE: 'sig', };     var crypto = require('crypto'); var util = require('util');     //http://msdn.microsoft.com/en-us/library/windowsazure/hh508996.aspx var resource = 'https://%s.blob.core.windows.net/%s/%s%s';     //Version of the storage rest API var signedVersion = '2012-02-12';     //signedResource. use b for blob, c for container var signedResource = 'b'; //     // The signedpermission portion of the string must include the permission designations in a fixed order that is specific to each resource type. Any combination of these permissions is acceptable, but the order of permission letters must match the order in the following table. var signedPermissions = 'rw'; //blob perms must be in this order rwd     // Example - Use ISO 8061 format var signedStart = ''; var signedExpiry = '';     // Eample Blob // URL = https://myaccount.blob.core.windows.net/music/intro.mp3 // canonicalizedresource = "/myaccount/music/intro.mp3" var canonicalizedResource = '/%s/%s/%s';     //The string-to-sign is a unique string constructed from the fields that must be verified in order to authenticate the request. The signature is an HMAC computed over the string-to-sign and key using the SHA256 algorithm, and then encoded using Base64 encoding. var signature = '';     //Optional. A unique value up to 64 characters in length that correlates to an access policy specified for the container, queue, or table. var signedIdentifier = '';

view raw gistfile1.js This Gist brought to you by GitHub.

Uploading the Image directly to storage using the SAS

4. To generate the sas we must insert a todoItem. which will now return the SAS property for the image. Thus update the OnTakePhotoClick handler to insert an item.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

private async void OnTakePhotoClick(object sender, RoutedEventArgs e) { //Take photo or video CameraCaptureUI cameraCapture = new CameraCaptureUI(); StorageFile media = await cameraCapture.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo);     //add todo item to trigger insert operation which returns item.SAS var todoItem = new TodoItem() { Text = "test image", ImageName = media.Name }; await todoTable.InsertAsync(todoItem); items.Add(todoItem);     //TODO: Upload image direct to blob storage using SAS }

view raw gistfile1.cs This Gist brought to you by GitHub.
5. Update OnTakePhotoClick handler to update the image directly to blob storage using the HttpClient and the generated item.SAS

private async void OnTakePhotoClick(object sender, RoutedEventArgs e)
{
    //Take photo or video
    CameraCaptureUI cameraCapture = new CameraCaptureUI();          
    StorageFile media = await cameraCapture.CaptureFileAsync(CameraCaptureUIMode.PhotoOrVideo);
 
 
    //add todo item
    var todoItem = new TodoItem() { Text = "test image", ImageName = media.Name };
    await todoTable.InsertAsync(todoItem);
    items.Add(todoItem);
  
    //Upload image with HttpClient to the blob service using the generated item.SAS
    using (var client = new HttpClient())
    {
        //Get a stream of the media just captured
        using (var fileStream = await media.OpenStreamForReadAsync())
        {
            var content = new StreamContent(fileStream);
            content.Headers.Add("Content-Type", media.ContentType);
            content.Headers.Add("x-ms-blob-type", "BlockBlob");
 
 
            using (var uploadResponse = await client.PutAsync(new Uri(todoItem.SAS), content))
            {
                //TODO: any post processing
            }
        }
    }           
}  

Run the application

1. Hit F5 on the application and right click with your mouse to show the app bar
2. Press the Take Photo button
3. Observe that the SAS is returned from your Mobile Service



4. Check your storage account now has the captured virtual High Five photo/video

Enjoy,
Nick

Are you building a connected Windows Metro style app? This session introduces you to Windows Azure and demonstrates how you can build connected experiences for your Windows 8 Metro style apps. After walking the through the fundamentals of both platforms, we take a deep dive as we demonstrate how you can use Windows Azure to support common geo-location, multimedia, data and push notification scenarios. At the end of this session, you will be empowered to begin building and deploying your own Windows 8 client applications that are powered by Windows Azure

You can download the full video in high res from channel 9 here

Download the deck Here
Download the source Here Note I have removed the connection strings for SQL + Windows Azure storage + Bing Maps. You will find all places that you need to replace these by doing a search for TODO-REPLACE. Enjoy!

Kind Regards,
Nick

Note times below are shown in Eastern Time (for those on PDT we kick off 8am)

11:00 – 12:00 pm – Windows Azure Today & Tomorrow (Scott Guthrie)Windows Azure is a flexible and open cloud platform for a wide variety of applications ranging from web sites to enterprise and mobile applications.  In this foundation session Scott Guthrie will demonstrate how to quickly build and deploy applications using the new Windows Azure features and services including Windows Azure Web Sites, Virtual Machines, and new developer tools and SDKs.

1:15 – 2:30 pm – Windows Azure Applications and Workloads (Mark Russinovich) Join Technical Fellow Mark Russinovich as he demonstrates new functionality in Windows Azure that allows for easy application migration, simple provisioning of new compute resources and advanced enterprise data center scenarios. Learn how you can use this new functionality to on-ramp applications as-is to the cloud or extend your data center to create true hybrid solutions.

3:00 – 4:15 pm – Web Sites on Windows Azure (Bill Staples) Join Windows Azure General Manager Bill Staples as he introduces the newest features and services for building web applications on Windows Azure. Learn how Windows Azure makes it easy for you to easily build and rapidly deploy everything from content management systems to high-scale ASP.NET web applications.

4:45 – 6:00 pm – Cloud-Ready Data Services (Quentin Clark) Windows Azure includes a complete set of enterprise-ready data services, including Windows Azure Storage and SQL Databases. In this demo-filled session developers will see how to can effectively use these services to develop and migrate data-centric applications to Windows Azure, while using familiar tools.

I look forward to seeing you there!

Nick

Note: This post assumes you have already created a client app, requested test credentials for WNS and received a notification channel in your cloud service.  If you have not yet done this I would recommend you watch this episode of cloud cover where I demonstrate the setup:

If you want to download the hi def version here is the direct link to Channel 9 for this episode .

Now that you have watched the pre-req the rest is really quite simple.

Install the WnsRecipe NuGet into your solution using the NuGet Package Manager

• Right click on your project and select ‘Manage NuGet Packages’
• Select Online and search for WnsRecipe and press Install

  using NotificationsExtensions; 
  using NotificationsExtensions.TileContent;
  

• Use the recipe as per normal but recall to set the appropriate BCP 47 language code  for your wideTile.Lang and squareTile.Lang properties

  //new up an access token provider with your credentials
  IAccessTokenProvider tokenProvider = new WnsAccessTokenProvider("<your package sid>", "<your client secret>");     
  var uri = new Uri("<your endpoint uri>");
  
  //Create the wide tile
  ITileWideText09 wideTile = TileContentFactory.CreateTileWideText09();     
  wideTile.Lang = "de-DE";     
  wideTile.TextHeading.Text = "Test-Paket";     
  wideTile.TextBodyWrap.Text = "ä";
  
  // new up a square tile to send down with the wide tile
  // as you do not know if the user has pinned the tile to small or wide
  ITileSquareText02 squareTile = TileContentFactory.CreateTileSquareText02();     
  squareTile.Lang = "de-DE";     
  squareTile.TextHeading.Text = "Test-Paket";     
  squareTile.TextBodyWrap.Text = "ä";     
  
  // set the square tile content
  wideTile.SquareContent = squareTile;
  
  //Send notification - note you should pay attention to the Status codes coming back from the 
  //send operation in the result variable.
  var result = wideTile.Send(uri, tokenProvider);
  

• And that’s basically it as mentioned above this is a somewhat fragment sample. Please do watch the Cloud Cover episode if you require more detail

For a full list with screenshots of the different tile template types please see this MSDN reference

If you are building Windows 8 Metro Style applications with Windows Azure and have not yet downloaded the toolkit I would encourage you to do so.  Why?, as a quick demonstration the following video shows how you can use the toolkit to build a Windows 8 Metro Style application that uses Windows Azure and the Windows Push Notification Service (WNS) to send Toast, Tile and Badge notifications to your Windows 8 Consumer Preview apps in under 4 minutes.

You can view/download the hi-def version of the video on channel 9 here

What’s in it?

• Automated Install – Scripted install of all dependencies including Visual Studio 2010 Express and the Windows Azure SDK on Windows 8 Consumer Preview.
• Project Templates – Client project templates for Windows 8 Metro Style apps in Dev 11 for both XAML/C# and HTML5/JS with a supporting server-side Windows Azure Project for Visual Studio 2010.
• NuGet Packages – Throughout the development of the project templates we have extracted the functionality into NuGet Packages for example the WNSRecipe NuGet provides a simple managed API for authenticating against WNS, constructing notification payloads and posting the notification to WNS. This reduces the effort to send a Toast, Tile, Badge or Raw notification to about three lines of code. You can find a full list of the other packages created support Push Notifications and the sample ACS scenarios here and full source in the toolkit under /Libraries.
• Samples  – Five sample applications demonstrating different ways Windows 8 Metro Style apps can use Push Notifications, ACS and Service Bus
• Documentation – Extensive documentation including install, file new project walkthrough, samples and deployment to Windows Azure.

Want More?

If you would like to learn more about the Windows Push Notification Service and the Windows Azure Toolkit for Windows 8 check out the following videos.

Building Metro Style apps that use Windows Azure Service Bus

You can view/download the hi-def version of the video on channel 9 here

Sending Push Notifications to Windows 8 and Windows Phone 7 Devices using Windows Azure

You can view/download the hi-def version of the video on channel 9 here

Building Metro Style apps that use Push Notifications

You can view/download the hi-def version of the video on channel 9 here

Building Metro Style apps that use the Access Control Service

You can view/download the hi-def version of the video on channel 9 here

For more details, please refer to the following posts:

• Documentation and Download at Codeplex
• Vittorio Bertocci’s Blog: Using ACS in Metro Style Applications
• Wade Wegner’s Blog: Metro Style Apps with Windows Azure
• Nick Harris’s Blog: How to Send Push Notifications with the Windows Push Notification Service and Windows Azure

Please ping me on twitter to let me know if you have any feedback or questions @cloudnick

Enjoy,
Nick

The Windows Azure Service Bus Sample browser application demonstrates how to send and receive messages from a Windows 8 Metro style application via Windows Azure Service Bus Queues, Topics and Subscriptions.

Windows Azure Service Bus Messaging provides cloud-based, message-oriented-middleware technologies including a full featured Message Queue with support for arbitrary content types, rich message properties, correlation, reliable binary transfer, and grouping. Service Bus Topics provide a set of new publish-and-subscribe capabilities and are based on the same backend infrastructure as Service Bus Queues. A Topic consists of a sequential message store just like a Queue, but allows for many concurrent and durable Subscriptions that can independently yield copies of the published messages to consumers. Each Subscription can define a set of rules with simple expressions that specify which messages from the published sequence are selected into the Subscription.

This sample consists of a sample library that creates an easy to use abstraction on top of the Windows Azure Service Bus REST APIs and a sample to demonstrate the usage of the Windows Azure Service Bus from a Windows 8 metro style using this sample library.

Important: Setting up the Windows Azure Service Bus Sample

Before running the application, you must first configure a Service Bus namespace and then configure the sample application to use this namespace. You can do this as follows.

1. Navigate to the Windows Azure portal. You will be prompted for your Windows Live ID credentials if you are not already signed in.
2. Click Service Bus, Access Control & Caching link in the left pane, and then select the Service Bus item under the Serviceselement.
3. Add a Service Namespace. A service namespace provides an application boundary for each application exposed through the Service Bus and is used to construct Service Bus endpoints for the application. To add a service namespace, click the New button on the upper ribbon bar.
4. On the left list, check all the available services. Enter a name for your service Namespace, select a Region for your service to run in, choose the Subscription and a Cache Size a click Create Namespace. Make sure to validate the availability of the name first. Service names must be globally unique as they are hosted in the cloud and accessible by whomever you decide to grant access. Record the Value of your ServiceNamespace as you will later use this to configure the sample application.
5. Once the namespace is active, click its name in the list of available namespaces to display the Service Namespace information page.
6. In the Properties right pane, locate the Service Bus section and click the Default Key Viewbutton. Record the value shown for Default Issuer a Default Key, and click OK. You will need these values later when configuring your Web Role settings. Now that you have your Service Namespace, Default Issuer and Default Key you are ready to configure the application.
7. Open Visual Studio 11.
8. Open the Microsoft.Samples.ServiceBus.Metro.sln solution located in the Samples\ServiceBusfolder.
9. Open App.xaml.cs, in the Microsoft.Samples.ServiceBus.SampleBrowser project and set the values for the Service Namespace, Default Issuer and Default Key where indicated in the following image.
10. Make sure that the start-up project of the solution is the Metro style app project. To set the startup Project right-click on the Microsoft.Samples.ServiceBus.SampleBrowser project in Solution Explorer and select Set as StartUp Project.
11. Press F5to run the application.
12. Select one of the three options and follow the steps within the application to learn about using Service Bus from within a Windows 8 metro app. The following options are available:
    1. Simple Queues: Explore the basic functionality of a Service Bus Queue, including Create, Delete, Send and Receive operations. Please notice that Queue names must not contain spaces.
    2. Simple Topics: Explore the basic functionality of a Service Bus Topic including Create, Subscribe, Send and Delete.
    3. Peek Lock: Explore alternate receive semantics you can use when reading messages from Service Bus.

If you would like to learn more please see this video on channel 9:

or download it directly from channel 9

• Bring your Windows 8 Apps to Life with Push Notifications using Windows Azure
• Mobile Application Development using Windows Azure

If you are building an app related to any of the content above or if you are presenting this content at a user group or other event I would love to hear about it!  Please reach out to me on twitter @cloudnick

Enjoy,

Nick

If you want to download the hi def version here is the direct link to Channel 9 for this episode

Enjoy, Nick

So, you’re building apps that span multiple devices apps and you’re curious about what the cloud can offer. Is it possible to deploy scalable Web apps and services on Windows Azure? How about storing data in the cloud? Is it possible to use the cloud for push notifications to the device? In this session, you’ll learn how to build tablet, Windows Phone, Android and even iOS apps that are backed by scalable cloud services with the Windows Azure platform. This demo-focused session will cover the end-to-end experience and address how to tackle issues such as authentication, storage and notifications across a wide range of devices.

or you can watch it directly here on channel 9

Enjoy,
Nick