How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications

Consuming cloud data from a Windows 8 Metro/Grid Application 
This will be the first in a series of highly detailed posts with tons of code.

I believe these posts will contain the core skills needed by the modern Windows Developer. I'm talking about only two things:

Download the Windows Azure SDK and Tools - To do these posts, absolutely necessary

This post is more conceptual. The next few posts will be much more prescriptive, with detailed step by step instructions, combined with all the code snippets, resulting in both Windows 8 Metro Clients and Windows Azure Cloud Servers, all running simultaneously on a single Windows 8 machine.

The untold story - a clear explanation of hosting a cloud-based, RESTful back-end for the a Windows 8 Metro client.

The client below demonstrates our high level purpose.  

1. A series of posts will be presented here to explain how we can get Windows 8 Metro clients to consume cloud-hosted data and services.
2. In order for a Windows 8 Metro Application to host your custom data repositories, you will need to know the structure and layout of data from both the client and the server.
   • We will use WCF to return JSON data across http.
   • Data will be directly consumable from the Windows 8 Metro application.
     • Powerful asynchronous client-side libraries make parsing the JSON data simple.
3. Two versions of Visual Studio will be needed.
   • The client software needed to create the Window 8 Metro Grid application will use Visual Studio 2012 RC.
   • The server software needed to create RESTful style of software architecture, returning JSON data to Windows 8 Clients will be Visual Studio 2010, along with the needed Windows Azure SDKs and Tools.

Windows 8 Metro Grid Applications

I love the Windows Metro 'Grid Template' that comes with the standard library of templates included in Visual Studio Express 2012 RC for Windows 8.

These templates give you an incredible amount of useful code to jump start your application development. There are various layout and interaction models.

1. I followed the Grid built-in template that comes with Visual Studio 2012 RC.
   • The grid template is one of several that are provided by Visual Studio.
     • Some examples include:
       • Fixed layout
       • Grid app
         
       • Navigation app
       • Split app
2. The application we will build will work equally well with touch devices or mouse and keyboard.
3. With the techniques I demonstrate you will be able to create apps that will convey the Windows personality with an intuitive and consistent user experience.

Sample Application: From the Cloud to your Windows 8 Metro Grid Application Entry Screen
I created an application called Fast Motorcycle Application. It is similar to the Contoso cookbook example, but much simpler. The sample provides data models from both server and client that support a Windows 8 Metro Grid application.

1. This is the main entry screen for the application.
2. Note that in each motorcycle photo originates from the cloud.
   • The image, the two captions in each photo are provided by the “SampleDataCommon” on the server.
     • There are also client side data structures as well.
   • Notice that there are two groups:
     • First Group: Sport Bikes
     • Second Group: Exotic Bikes
   • The server (scalable – more than one is possible) can be hosted in one of many Microsoft Global data centers.
3. All the data structures will be presented later.

GroupItemsPage.xaml - (first thing a user sees)

This is first of three screens.

1. It shows you group and items within groups.
2. The user can navigate to the other two screens from here:
   • The second screen is GroupDetailsPages.xaml
     • If you click on the group name, it will appear.
     • You will click on Sport Bikes or Exotic Bikes
     • It provides information about the group in general plus of list of individual group items.
   • The third screen is ItemDetailPage.xaml
     • It gives detail about an individual motorcycle

GroupDetailsPage.xaml (user clicks on category, like “Sport Bikes”)

This is second of three screens.

1. It shows you one group and items within that one group.
   • It provides information about the group in general plus of list of individual group items.

ItemDetailsPage.xaml (user clicks on individual bike)

This is the third of three screens.

1. It shows you an individual item.
2. The user can navigate here by clicking on a specific motorcycle
3. Each motorcycle belongs to a group, such as Sport Bikes or Exotic Bikes
   • Terminology to understand is item versus group
     • An item is a motorcycle
     • A group is Sport Bikes or Exotic Bikes

Visual Studio 2010 – Windows Azure Cloud Project
We will host a compiled version our Windows Azure Cloud Project in a Microsoft data center. We will be running our cloud application within Internet Information Server and within Windows Server 2008 R2.

Our Cloud Based Solution = FastMotorcycleProject.sln

Notice the solution contains two sub projects. Eventually, this will be compiled, packaged up and deployed to Windows Azure.

1. Solution
   • FastMotorcycleProject.sln
2. Project 1
   • AttendeeUpdate_WebRole
     • We will write our code here to support our Windows 8 Metro Clients
       • We will add a web service running under WCF
3. Project 2
   • AttendeeUpdateProject
     • This is the Azure configuration project
       • We can specify how many instances (scalability) we want

Windows Azure Project - FastMotorcycleProject.sln
Here is the solution we will soon build up from scratch.

1. The Assets folder contains the graphics (pictures of motorcycles) sent to Windows 8 Metro Clients
   • Folder = Assets, with 2 sub-folders (ExoticBikes, SportBikes)
     • C:\FastMotorcycleProject\AttendeeUpdate_WebRole\Assets\ExoticBikes
       • dragbike.png, group.png, mtt_turbine.png, normallyaspirated.png, rocket.png, tomahawk.png
     • C:\FastMotorcycleProject\AttendeeUpdate_WebRole\Assets\SportBikes
       • 2007-Kawasaki-NinjaZX-14h.png, bmw4.png, ducati_desmosedici_rr_2_3108x2199.png, fastest-motorcycle-Suzuki-Hayabusa.png, MV-Agusta-F4-Senna.png, sportbikes.png
2. The WCF Service that Windows 8 Metro Clients call into.
   • FastMotorcycleListService.svc & FastMotorcycleListService.svc.cs
     • Methods include GetSampleData(), which is called by Windows 8 Metro Clients
3. The object model (server-side) that is consumed by Windows 8 Metro Clients

   Class	Inherits From	Purpose
   MySampleDataCommon	FastMotorcycle.Common.BindableBase	Provides the basic data in the application: (1) Title (2) Sub Title (3) Description (4) Image URL
   MySampleDataItem	MySampleDataCommon	Represents and individual motorcycle
   MySampleDataGroup	MySampleDataCommon	Represents and a motorcycle group, like (1) Sport Bikes (2) Exotic Bikes

Follow - Up: More posts are coming (my code works I just need to explain it!)
The next post will show the building of the Windows 8 Metro Client.

1. We will use Visual Studio 2012 RC to create a new grid-based Windows 8 Metro Client application.
   • We will run the default template and discuss the important architectures.
2. We will discuss the data model used by this application type
3. Once we understand the needed data model, we can start to program the server side.
   • The server (Windows Azure Cloud Application) side is created in Visual Studio 2010.
     • We will add the needed objects and code to return JSON data back to Windows 8 Metro clients
4. Next, we will add support for calling our Cloud-based Azure Application.
   • This means we will return back to Visual Studio 2012 RC.
     • This is where we need to add asynchronous code to call into the Cloud-based Azure Application from the Windows 8 Metro Client.

Download for Azure SDK