Updated NotificationsExtensions WnsRecipe Nuget to support Windows 8.1 templates now available

A short post to let you know that I have just published the updated NotificationsExtensions WnsRecipe Nuget with support for the new notification templates that were added in Windows 8.1.

Here is a short demonstration of how to use it to send a new TileSquare310x310ImageAndText01 template with the WnsRecipe Nuget Package

Install the package using Nuget Package Manager Console. (Note you could also do this using Manage package references in solution explorer)

install-package WnsRecipe

Add using statements to the NotificationsExtensions namespace

using NotificationsExtensions;
using NotificationsExtensions.TileContent;

New up a new WnsAccessTokenProvider and provide it your credentials configured in the Windows Store app Dashboard

private WnsAccessTokenProvider _tokenProvider = new WnsAccessTokenProvider("ms-app://", "");

Use Tile Content Factory to create your tile template

var tile = TileContentFactory.CreateTileSquare310x310ImageAndText01();

tile.Image.Src = "https://nickha.blob.core.windows.net/tiles/empty310x310.png";
tile.Image.Alt = "Images";
tile.TextCaptionWrap.Text = "New Windows 8.1 Tile Template 310x310";

// Note you really should not do the line below :) , 
// instead you should be setting the required content 
// through property tile.Wide310x150Content so that users
// get updates irrespective of what size tile they have pinned to Start
tile.RequireWide310x150Content = false;  

//Send the notification to the desired channel
var result = tile.Send(new Uri(channel), _tokenProvider);

and here is the output
310x310tile

Enjoy, Nick Harris

Build Websites and Apache Cordova/PhoneGap apps using the new HTML client for Azure Mobile Services

Today Scott Guthrie announced HTML client support for Windows Azure Mobile Services such that developers can begin using Windows Azure Mobile Services to build both HTML5/JS Websites and Apache Cordova/PhoneGap apps.

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.

HTMLClient

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

Devices + Services: Near Realtime Sensor Data with Windows Azure Mobile Services, .NET MicroFramework, Pusher and ASP .NET MVC

It’s no surprise to people around me that I have a strong desire to code more, so I did just that on a Saturday several weeks back and here is what I built – a new devices + services scenario using a Gadgeteer, the .NET MicroFramework, Windows Azure Mobile Services and Pusher and Windows Azure Web Sites.

Device1

Lets build this:

WP_20130213_003

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

graphs2 – 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

GadgeteerDesigner

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+  

plus-new

Select Compute, Mobile Service, Create

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

createMobileService

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

Call this table SensorReading and save

SensorReading

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

References

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+

plus-new

Select Store

NewStore

Select the Pusher add-on

StorePusher

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

PusherPlan

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.

insertscript

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

Using the new Windows Azure Tools v1.4 for VS2010

The new Windows Azure Tools for v1.4 (August 2011) for VS2010 have just been released.  You can download them using Web Platform Installer here. This latest version of the tools introduces several new features as follows:
  1. Support for Multiple Service Configurations
  2. Profiling support for Windows Azure apps running in Windows Azure
  3. MVC 3 web role support
  4. Package validation
Note: Profiling is only supported in VS 2010  Ultimate+Premium.  All others are available from Visual Web Developer 2010 and up.
This post will take a brief look at the benefits each of these new features bring to you – the developer :)

 

Multiple Service Configurations

Gone are the days of having to change your settings in your ServiceConfiguration.cscfg when you switch from debugging your local cloud+storage emulator to publishing up to Windows Azure.  For example in your development environment for:
  1. local debug you may want to:
    • utilize 1 instance of your web/worker role
    • use the local storage emulator
  2. whereas in Windows Azure you may want to:
    • utilize 4 instances of your web/worker role
    • use a production Windows Azure storage account
To achieve this using the new multiple service configurations is easy.
  1. Create a new Windows Azure project with an arbitrary web or worker role.
    • File > New Project > Cloud > Windows Azure Project
    • Select a web or worker role and press OK
  2. Observe that the ServiceConfiguration.cscfg is now split by default into two files:
    • ServiceConfiguration.Local.cscfg – default used when debugging in VS
    • ServiceConfiguration.Cloud.cscfg – a config you can use on publish
  3. To configure each individual configuration with the settings we desired above.
    • Double click on the WorkerRole1 in the roles folder of the cloud project
    • then and select the Service Configuration dropdown for Cloud
    • Select Service Configuration Profile

    • Set the desired settings for your Cloud profile ServiceConfiguration.Cloud.cscfg

  4. You can then repeat the above for your Local configuration profile to setup and set the desired settings for ServiceConfiguration.Local.cscfg
  5. The net result is that both ServiceConfiguration.Cloud.cscfg and ServiceConfiguration.Local.cscfg will now have their independent settings as follows:
      Independent config in ServiceConfiguration.Cloud.cscfg

      Independent config in ServiceConfiguration.Cloud.cscfg

      Independent config in ServiceConfiguration.Local.cscfg

      Independent config in ServiceConfiguration.Local.cscfg

  6. When you hit debug now the ServiceConfiguration.Local.cscfg is used and when you hit publish you can select which Config you would like to use:

Overall its quite an easy experience to configure and use multiple Service Configuration profiles for your different environments.  Please note that you can also rename and add additional Service Configuration profiles perhaps such that you would have a config for Local, Staging and Prod.  For more detail on how to work with Service Configuration files please see Configuring a Windows Azure Application.

Profiling Support

This is an incredibly useful tool for any Windows Azure developer as it enables you to profile your Windows Azure application that’s running up in Windows Azure.  The information gathered can help analyze any performance issues you may be facing.  When you publish your application from VS you are able to specify your profiling options that will apply for the profiling session and results can be pulled for each instance.
The supported profiling options are as follows:
  1. CPU Sampling – Monitor CPU-bound applications with low overhead
  2. Instrumentation – Measure function call counts and timing
  3. .NET Memory Allocation (Sampling) – Track managed memory allocation
  4. Concurrency -Detect threads waiting for other threads
In this segment I will demonstrate how to configure a profiling session for a Windows Azure Application:
  1. Open your existing cloud project and right click on the windows azure cloud project and select Publish
  2. Select the Enable profiling option on the publish page and click settings
  3. Select the type of profiling you wish to perform in this case .NET Memory Allocation
  4. Note: Checking the Enable Tier Interaction Profiling option captures additional information about execution times of synchronous ADO.NET calls in functions of multi-tiered applications that communicate with one or more databases.  With the absence of a SQL Profiler in SQL Azure this feature is useful for those developers who want to gain some insight into what queries or stored procedures are running slowly.
  5. Press OK.
  6. Once the deployment is complete and the application has been running for a period of time you can go and download the captured profiling report.
  7. To download the profiling report
    • Select View > Server Explorer
    • Expand Windows Azure Compute
    • Expand the hosted service
    • Right click on the Instance that you want do download the profiling report from and press View Profiling Report
  8. Once the report is downloaded it will open in VS and as you can see the CPU is maxing out
  9. If we change the Current View dropdown to Allocation we can quickly identy a problem method that is using excessive amounts of memory
  10. and finally if we right click and select View Source on the method of interest we can see the offending line causing the allocations
What an awesome tool.  I look forward to digging deeper into the capabilities provided by for Windows Azure Profiling. In the meantime for more information please see – Profiling a Windows Azure Application

 

MVC 3 Web Role Support

ASP .NET MVC 3 web roles are now supported out of the box with the new tools.  You can select ASP .NET MVC 3 from the new Windows Azure project dialog and the required assemblies used by ASP .NET MVC 3 are set to copy local for you.  This results in these assemblies being deployed up to windows azure when you publish your application thus ensuring your MVC 3 application will start when deployed. I know a lot of you are probably thinking Eureka right now and those that may get a little bit too excited may even verbalize it, I know I did :)

To create a new Windows Azure ASP .NET MVC 3 application:

  1. File > New Project > Cloud > Windows Azure Project
  2. Select ASP .NET MVC 3 Web Role, press the > button followed by OK
  3. In the ASP .NET MVC 3 project dialog select settings to suit your preferences and press ok
  4. In solution explorer observe that all the references assemblies for ASP .NET MVC 3 that are not in the GAC in the current Windows Azure gues OS have had their Copy Local property set to true.  The below image shows and example of one of the required reference assemblies that is automatically set to copy local so you dont actually have to do anything :)

From here on in all you have to do is start coding :) – For more information on ASP .NET MVC 3 see this and for a detailed walkthrough of ASP .NET MVC 3 on Windows Azure see this post by Nathan Totten

Package Validation

Last but definitely not least is improved package validation. When you select to create a package or publish your Windows Azure application. Additional warnings or errors are now provided in VS to enable you to fix the problem before you package or publish it.  This as you know will be a great timesaver for details of what package validations are performed please see Troubleshooting Package Validation Errors and Warnings

Time to Download

All in all its an excellent new set of features that focus on improving your productivity and make your dev life a whole lot easier. If you have not already then now would be the time to download using Web Platform Installer :)

happy coding,

Nick

ASP .NET MVC 3 Beta Deploy to Azure Cycles

If you have just downloaded ASP .NET MVC 3 Beta and upgraded your ASP .NET MVC 2 website then tried to deploy on Azure and found that your deploy is cycling this will likely solve your problem.

Recall while upgrading for MVC 3 Beta you update your project to reference System.Web.Mvc.dll (v3.0.0.0), System.WebPages.dll and System.Web.Helpers.dll – well the likely cause of the issue is you have not updated those three assembly references to copy local i.e Right Click >> Copy Local = True. If you were to deploy at this stage you would still have the cycle issue.  With a quick review of intellitrace logs you you have to add a reference to WebMatrix.Data.dll, System.Web.WebPages.Razor.dll and Microsoft.Web.Infrastructure.dll all of which when run on local are retrieved from the GAC. Therefore the full list of assemblies to copy local becomes:

  • System.Web.Mvc.dll (v3.0.0.0)
  • System.WebPages.dll
  • System.Web.Helpers.dll
  • WebMatrix.Data.dll
  • System.Web.WebPages.Razor.dll
  • Microsoft.Web.Infrastructure.dll
  • Hope this saves you some time
    Nick

    A first look at the ASP .NET MVC 3 WebGrid

    I just installed ASP .NET MVC 3 Beta. This post provides a brief introduction to the new WebGrid.
    Note:

    • At the time of writing the ASP .NET MVC 3 was in Beta
    • I am not yet using Razor for my view markup
    • Sorry about the formatting in the syntax highlighting on this one
    1. How to add an ActionLink Edit column to the ASP .NET MVC 3 WebGrid.
      • To start lets look at a cut down version of the original ASP .NET MVC 2 View generated (except the delete action) using the built in scaffolding:
      • <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ABC.Web.Models.ModelX>>" %>
        <table>
        <tr>
        <th></th>
        <th>
           Title
        </th>
        <th></th>
        </tr>
        <% foreach (var item in Model) { %>
           <tr>
           <td>
              <%: Html.ActionLink("Edit", "Edit", new { id=item.Id }) %>
           </td>
           <td>
              <%: item.Title %>
           </td>
           <td>
              <a onclick="deleteRecord('Cart', '<%= item.Id %>')" href="JavaScript:void(0)">Delete</a>
           </td>
           </tr>
           <% } %>
        <p>
        <%: Html.ActionLink("Create New", "Create") %>
        </p>
      • Replacing this with the ASP .NET MVC 3 Beta WebGrid can be performed as follows:
      • <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ABC.Web.Models.ModelX>>" %>
        <%
        var grid = new System.Web.Helpers.WebGrid(Model, new List<string>(){"Title"});
        %>
        <%= grid.GetHtml(columns: grid.Columns(
              grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id })),
              grid.Column("Title"),
              grid.Column(format:(item) => Html.ActionLink("Delete", "Delete", null, new {onclick=string.Format("deleteRecord('Cart', '{0}')", item.Id), @class="Delete", href="JavaScript:void(0)"}))
        )
        ) %>
        <p>
        <%: Html.ActionLink("Create New", "Create") %>
        </p>

        The important point to note here is that to get your Edit ActionLink you need to provide a Column definition with the format parameter specified such that it returns your ActionLink i.e

        grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id }))
    2. How to enable/disable the pager and change the page size.
    3. Straight out of the box the WebGrid supports paging which by default is enabled with a page size of 10 but can be configured using the rowsPerPage and canPage attributes as follows:

      <%
      var grid = new System.Web.Helpers.WebGrid(Model,
                   columnNames: new List<string>(){"Title"},
                   rowsPerPage:5,
                   canPage:true);
      %>
    4. How to emit CSS class attributes to your table
    5. The last thing worth mentioning in this introductory post is that the css class can also be specified for the table using the following parameters tableStyle, headerStyle, footerStyle, rowStyle and alternateRowStyle style as follows:

      <%= grid.GetHtml(
         tableStyle: "table",
         headerStyle: "header",
         footerStyle: "footer",
         rowStyle: "row",
         alternatingRowStyle: "alt",
         columns: grid.Columns(
            grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id })),
            grid.Column("Title"),
            grid.Column(format:(item) => Html.ActionLink("Delete", "Delete", null, new {onclick=string.Format("deleteRecord(Cart, '{0}')", item.Id), @class="Delete", href="JavaScript:void(0)"}))
      )
      ) %>

    Happy Coding,
    Nick

    How to Enable IntelliTrace on Windows Azure

    If your Azure project targets the .NET framework 4.0 you can utilize IntelliTrace to help debug your application. This post briefly covers how to enable and retrieve your IntelliTrace log.  The issue I was debugging in this scenario was a service I was deploying and ASP .NET MVC website it was initializing /stopping / initializing / stopping repeatedly during the deploy to Azure.

    1. When publishing your service select the Enable IntelliTrace for .NET 4 roles checkbox
    2. Enable IntelliTrace

      Enable IntelliTrace

    3. Let the instance deploy and cycle through the initializing and stopping states
    4. Then to download your IntelliTrace log.  In Server Explorer expand your windows Azure hosted service node, right click on your hosting account and select View IntelliTrace log.  This will be downloaded Async.
    5. View Intellitrace

      View Intellitrace

    6. Once the log is retrieved you can review the exceptions
    7. IntelliTrace

      IntelliTrace

    8.  In this case I had not set the System.Web.MVC assembly to copy local and re-deployed.  Job done.

    Nick