How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications – Part 4 – Windows Azure Cloud - Bruno Terkaly - Developer Evangelist - bterkaly@microsoft.com - Site Home

High Level Goals For This Post

Purpose	To provide detailed instruction on hosting JSON based data stores at an http endpoint To consume this JSON data from a Windows 8 Metro Grid Application
How this post can save you time	This post picks up from the previous 3, where we built a Windows 8 Metro Client. As a developer, you need to know server AND client. These posts show both sides. Do you know cloud? Do you know how to use VS 2012 RC to create Metro-style applications?
Key Lessons	Server and Client Development Visual Studio 2010 – Cloud Development Visual Studio 2012 RC – Windows 8 Metro Development Inheritance with WCF (KnownTypes) JSON Data REST defines a set of architectural principles by which you can design Web services that focus on a system's resources, including how resource states are addressed and transferred over HTTP by a wide range of clients written in different languages. Windows 8 Metro Grid Applications Supporting data models from client to server and back

Table of Contents

Exercise 1	Creating our project, exposing and endpoint
Exercise 2	Adding the core pieces of code
Exercise 3	Verifying Web Services & Adding Graphics (Motorcycle Images)
Exercise 4	Understanding the core data structures
Exercise 5	Adjusting Web.Config & Adding a default web page
Exercise 6	Running and easily testing our Windows Azure Cloud Application
Exercise 7	Starting the our Windows Azure Application and the Windows 8 Metro Client Together
Exercise 8	Mission Accomplished – Both Windows Azure and Windows 8 Metro Client Are Working !

Previous Posts

How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications - Part 1	http://blogs.msdn.com/b/brunoterkaly/archive/2012/06/12/how-to-provide-cloud-based-json-data-to-windows-8-metro-grid-applications.aspx
How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications - Part 2	http://blogs.msdn.com/b/brunoterkaly/archive/2012/06/14/how-to-provide-cloud-based-json-data-to-windows-8-metro-grid-applications-part-2.aspx
How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications - Part 3	http://blogs.msdn.com/b/brunoterkaly/archive/2012/06/15/how-to-provide-cloud-based-json-data-to-windows-8-metro-grid-applications-part-3.aspx
How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications - Part 4	http://blogs.msdn.com/b/brunoterkaly/archive/2012/06/17/how-to-provide-cloud-based-json-data-to-windows-8-metro-grid-applications-part-3-windows-azure-cloud.aspx
Source Code

Exercise 1: Creating our project, exposing an endpoint
Part 1: We will start by creating a new "Cloud" project, called FastMotorcycle.
Part 2: From there we will add WCF Service
Part 3: We will learn about the endpoint the Windows Azure Application exposes.
The client is going to call http://127.0.0.1:81/FastMotorcycleListService.svc/list/SampleData/1.

Creating the project

Start with File/New Project
Choose Cloud from Installed templates
- You will see Windows Azure Project
Select the name FastMotorcycle
- If you choose a different name, future code snippets that I provide may need to be changed.

Adding a WCF Service Web Role

In (1) you will choose WCF Service Web Role. This will be useful for hosting our RESTfully architected http endpoint, where we return JSON data.
A WCF Web Role is simply your web service running inside scaled instances of IIS, activated when Windows 8 Metro Clients connect.
In (2) we wish to rename the web role
- Rename to FastMotorcycle_WebRole
The web role will be hosted inside IIS inside Windows Server 2008 inside a VM, possible scaled at many instances as needed

The default Azure project and how the client will connect

From the View menu choose Solution Explorer in Step 1
You can see the default project above
- We need to rename and re-write Service1.svc and IService1.cs
  - We need to create the methods and data structures to return JSON data
You can see in Step 2 that the Windows client will make a call against the endpoint
- http://127.0.0.1:81/FastMotorcycleListService.svc/list/SampleData/1
- This will change later when we deploy to the cloud

Exercise 2: Adding the core pieces of code

Part 1: Rename the default web service (Default = Service1.svc). We'll need to decorate the WCF functions so that they return JSON data.

Part 2: Implementing IFastMotorcycleListService.cs, FastMotorcycleListService.svc, FastMotorcycleListService.svc.cs. The code will automatically create all the SampleDataItem and SampleDataGroup objects.

Part 3: Here is where we need to paste some code.

Copy From	Copy To	Code Type
The code snippet below labeled Code Snippet = IFastMotorcycleListService.cs	Your Visual Studio 2010 project file (IFastMotorcycleListService.cs)	C#
The code snippet below labeled Code Snippet = FastMotorcycleListService.svc	Your Visual Studio 2010 project file (FastMotorcycleListService.svc)	XAML Markup
The code snippet below labeled Code Snippet = FastMotorcycleListService.svc.cs	Your Visual Studio 2010 project file (FastMotorcycleListService.svc.cs)	C#

Renaming the WCF Web Service

We will begin work on our service file.
Service1.svc will be transformed
It will be renamed
It will be modified to include a function
The function will have the signature public List<SampleDataItem> GetSampleData(string sample_id)
1. It returns a JSON formatted List<SampleDataItem> objects
The Uri template defines how the Windows 8 Metro Grid Application will call into the GetSampleData() function
In WCF, we decorate the function GetSampleData() as follows:
- WebGet(UriTemplate = /list/SampleData/{sample_id}, ResponseFormat = WebMessageFormat.Json)
We will need to rename/modify three files:
- IService1.cs
- Service1.svc
- Service1.svc.cs
We want to rename and call the service FastMotorcycleListService

Pasting in some new code

Note the interface file: IFastMotorcycleListService.cs in Step 1.
- It defines the UriTemplate, the Web Message Format
  - Format = JSON
Notice hard-coded values in the method call in Step 2.
- This will be upgraded in future posts to originate from Azure Table Storage or a SQL Database.
- Currently, this isn’t elegant but is the absolute most effective way in getting a service to return test data.

Code Snippet = IFastMotorcycleService.cs

 	 		 			 				 IFastMotorcycle.cs 			 		
1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 using System; 
 using System.Collections.Generic; 
 using System.Linq; 
 using System.Runtime.Serialization; 
 using System.ServiceModel; 
 using System.ServiceModel.Web; 
 using System.Text; 
   
 namespace FastMotorcycle_WebRole 
 { 
     [ServiceContract] 
     public interface IFastMotorcycleListService 
     { 
   
         [OperationContract] 
         [WebGet(UriTemplate = "/list/SampleData/{sample_id}", ResponseFormat = WebMessageFormat.Json)] 
         List<SAMPLEDATAITEM> GetSampleData(string sample_id); 
     } 
 }
 
 
 

Code Snippet = FastMotorcycleService.svc

 	 		 			 				 FastMotorcycleService.cs 			 		
1
 2
 3
 4
 <%@ ServiceHost  Debug="true"  
 Factory="System.ServiceModel.Activation.WebServiceHostFactory" 
 Service="FastMotorcycle_WebRole.FastMotorcycleListService" %>
 
 
 

Code Snippet = FastMotorcycleService.svc.cs

 	 		 			 				 FastMotorCycleService.svc.cs 			 		
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
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 138
 139
 140
 141
 142
 143
 144
 145
 146
 147
 148
 149
 150
 151
 152
 153
 154
 155
 156
 157
 158
 159
 160
 161
 162
 163
 164
 165
 166
 167
 168
 169
 170
 using System; 
 using System.Collections.Generic; 
 using System.Linq; 
 using System.Runtime.Serialization; 
 using System.ServiceModel; 
 using System.ServiceModel.Web; 
 using System.Text; 
   
 namespace FastMotorcycle_WebRole 
 { 
     public class FastMotorcycleListService : IFastMotorcycleListService 
     { 
         public List<SAMPLEDATAITEM> GetSampleData(string sample_id) 
         { 
             List<SAMPLEDATAITEM> sampleData = new List<SAMPLEDATAITEM>(); 
   
             string groupGuid = Guid.NewGuid().ToString(); 
   
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                 , "Kawasaki Ninja ZX-14"
                 , "It is all about performance."
                 , "It is one of the fastest production bikes on the market. But this year Kawasaki has outdone itself again with sweeping revisions to the big Ninja, with performance upgrades and a big redesign for the open-class monster.  \n\n"
                 , "http://127.0.0.1:81/Assets/SportBikes/2007-Kawasaki-NinjaZX-14h.png"
                 , "Within the first five minutes of the press introduction, world champion drag-racer Rickey Gadson reeled off an effortless, uncorrected 9.64-second pass at 149 mph—stock ride height, 42 pounds of air in the rear Metzeler, pump gas in the tank.  \n\n An hour later, I clocked a 9.91 at 149. This is a mind-blowing terminal speed from a stock production bike.  \n\n"
                     , new SampleDataGroup(groupGuid 
                                 , "Sport Bikes"
                                 , "It is about  speed, acceleration, braking, and cornering on paved roads."
                                 , "Comfort is sacrificed for speed, in comparison to less specialized motorcycles. \n\n A sportbike is a motorcycle whose enjoyment consists mainly from its ability to perform on all types of paved highway – its cornering ability, its handling, its thrilling acceleration and braking power, even (dare I say it?) its speed.\n\n"
                                 , "http://127.0.0.1:81/Assets/SportBikes/sportbikes.png"
                                 , "Sport bikes have comparatively high performance engines resting inside a lightweight frame.\n\n The combination of thse help maintain structural integrity and chassis rigidity.\n\n Braking systems combine higher performance brake padsand multi-piston calipers that clamp onto oversized vented rotors. Suspension systems are advanced in terms of adjustments and materials for increased stability and durability. Front and rear tires are larger and wider than tires foundon other types of motorcycles to accommodate higher cornering speeds and greater lean angles.  \n\n"
                                 ))); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                 , "BMW S1000RR"
                 , "Redefined what is possible from a SportBike."
                 , "This bike crushed its competitors in the last couple of years, offering unprecedented power and  sophisticated electronics carried in an excellent-handling and lightweight package. It was more than the competition could handle, and will remain so until another manufacturer steps up its game to match BMW’s ultra-potent superbike. It looks like another grim year for any liter-class superbike not wearing a BMW badge.  \n\n"
                 , "http://127.0.0.1:81/Assets/SportBikes/bmw4.png"
                 , "When BMW builds a superbike, there is no second best. A motorcycle designed for the race track, built to deliver acceleration that takes your breath away.  \n\n With an aluminium bridge-type frame, radial brakes, a super sporty tail-up nose-down design, hot colours and the ultimate combination of optional electronic rider assistance systems: the first genuine racing ABS, the lightest of its kind, and dynamic traction control (DTC) which adjusts engine torque to the current level of grip, ensuring optimum traction out of every corner.  \n\n The S 1000 RR’s first year in production revolutionised the super-sport market, out performing the more conventional competition which has dominated the market for the past decade. This makes it even more exciting to be able to say that the adrenaline filled 193bhp of sheer excitement, is now more affordable than ever before.  \n\n Never before has it been so easy to keep so much power under control. This is as true on public roads as it is on the racetrack. The RR is a full-blooded racing bike, even though it can be ridden with a number plate attached. To top it all off its power plant is our absolute pride and joy. And our worldwide motorsports teams agree wholeheartedly.  \n\n"
                     , new SampleDataGroup(groupGuid 
                                 , "Sport Bikes"
                                 , "It is about  speed, acceleration, braking, and cornering on paved roads."
                                 , "Comfort is sacrificed for speed, in comparison to less specialized motorcycles. \n\n A sportbike is a motorcycle whose enjoyment consists mainly from its ability to perform on all types of paved highway – its cornering ability, its handling, its thrilling acceleration and braking power, even (dare I say it?) its speed.\n\n"
                                 , "http://127.0.0.1:81/Assets/SportBikes/sportbikes.png"
                                 , "Sport bikes have comparatively high performance engines resting inside a lightweight frame.\n\n The combination of thse help maintain structural integrity and chassis rigidity.\n\n Braking systems combine higher performance brake padsand multi-piston calipers that clamp onto oversized vented rotors. Suspension systems are advanced in terms of adjustments and materials for increased stability and durability. Front and rear tires are larger and wider than tires foundon other types of motorcycles to accommodate higher cornering speeds and greater lean angles.  \n\n"
                                 ))); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                 , "Ducati Desmosedici RR"
                 , "Hugely expensive, but MotoGP bloodlines"
                 , "It doesn’t take long to be intimidated by the outrageous Desmosedici RR. If the stratospheric $70K+ price tag doesn’t scare you, the menacing mechanical cacophony upon start-up will. Observers are sucker-punched straight into the gut, perhaps the best sounding production streetbike in the world.  \n\n"
                 , "http://127.0.0.1:81/Assets/SportBikes/ducati_desmosedici_rr_2_3108x2199.png"
                 , "The Desmosedici is like a barely tamed wild animal. It’s highly visceral and with an intensity that threatens to overwhelm a rider’s senses. It sounds downright angry on trailing throttle, as a 13.5:1 compression ratio threatens to skid the rear wheel if not for the racing-style slipper clutch.  \n\n It’s quite incredible that a manufacturer has offered such a repli-racer to the public. The D16RR is literally a MotoGP bike built for the street. And not those scrawny 800cc prototype racers currently on the grids – we’re talking the big-gun near-liter-sized versions. As such, the RR carries a compact 989cc V-Four engine inside a version of Ducati’s trademark tubular-steel trellis frames.  \n\n"
                     , new SampleDataGroup(groupGuid 
                                 , "Sport Bikes"
                                 , "It is about  speed, acceleration, braking, and cornering on paved roads."
                                 , "Comfort is sacrificed for speed, in comparison to less specialized motorcycles. \n\n A sportbike is a motorcycle whose enjoyment consists mainly from its ability to perform on all types of paved highway – its cornering ability, its handling, its thrilling acceleration and braking power, even (dare I say it?) its speed.\n\n"
                                 , "http://127.0.0.1:81/Assets/SportBikes/sportbikes.png"
                                 , "Sport bikes have comparatively high performance engines resting inside a lightweight frame.\n\n The combination of thse help maintain structural integrity and chassis rigidity.\n\n Braking systems combine higher performance brake padsand multi-piston calipers that clamp onto oversized vented rotors. Suspension systems are advanced in terms of adjustments and materials for increased stability and durability. Front and rear tires are larger and wider than tires foundon other types of motorcycles to accommodate higher cornering speeds and greater lean angles.  \n\n"
                                 ))); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                 , "Suzuki Haybusa"
                 , "The original fastest super bike."
                 , "With performance credentials that have established it as the hottest sportbike on the planet, the Suzuki Hayabusa is designed for the serious sport rider who will settle for nothing less than the best.  Its combination of unsurpassed power, crisp handling and superb aerodynamics creates the ultimate sportbike.  \n\n"
                 , "http://127.0.0.1:81/Assets/SportBikes/fastest-motorcycle-Suzuki-Hayabusa.png"
                 , "The Hayabusa is so intense, that it’s in a class of its own.  \n\n The Suzuki Hayabusa is powered by a 1340cc, in-line, DOHC liquid-cooled engine with 16-valves engine and gets a a large volume 4-2-1-2 exhaust system with a large capacity catalyzer, dual triangular canisters and closed loop system.  No surprise, the Hayabusa is a master in long sweeping turns and in town. Awesome bottom-end torque from the 1340cc inline-Four, a silky-smooth hydraulic clutch and long, 58.3-inch wheelbase make the Big Bird easy to fire out of the hole when the light goes green.  \n\n Despite its considerable dry weight (552 lb.), the bike is capable of a 0-60 time of 2.58 seconds, 4.99 sec. to 100 mph, 9.90 sec./147.94 mph in the quarter-mile and a measured top speed of 186 mph in our “Turn & Burn” test.  \n\n"
                     , new SampleDataGroup(groupGuid 
                                 , "Sport Bikes"
                                 , "It is about  speed, acceleration, braking, and cornering on paved roads."
                                 , "Comfort is sacrificed for speed, in comparison to less specialized motorcycles. \n\n A sportbike is a motorcycle whose enjoyment consists mainly from its ability to perform on all types of paved highway – its cornering ability, its handling, its thrilling acceleration and braking power, even (dare I say it?) its speed.\n\n"
                                 , "http://127.0.0.1:81/Assets/SportBikes/sportbikes.png"
                                 , "Sport bikes have comparatively high performance engines resting inside a lightweight frame.\n\n The combination of thse help maintain structural integrity and chassis rigidity.\n\n Braking systems combine higher performance brake padsand multi-piston calipers that clamp onto oversized vented rotors. Suspension systems are advanced in terms of adjustments and materials for increased stability and durability. Front and rear tires are larger and wider than tires foundon other types of motorcycles to accommodate higher cornering speeds and greater lean angles.  \n\n"
                                 ))); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                 , "MV-Agusta-F4"
                 , "High-revving, exotic, pure race"
                 , "The new MV Agusta F4 R 2012 has been designed to offer clients a superbike with extreme performance.  MV Agusta has taken one giant step ahead of its European and Japanese competition by developing what may prove to be the most fascinating sportbike ever, the 2012 F4 RR.  \n\n"
                 , "http://127.0.0.1:81/Assets/SportBikes/MV-Agusta-F4-Senna.png"
                 , "If wrapping your legs around the 193-horsepower BMW S 1000 RR simply isn't enough to raise your eyebrows, the engineers at MV Agusta have something special for you.  \n\n The Italian bike manufacturer just peeled the wraps off of the 2012 F4 RR, and the new machine packs a full 198 hp between its frame rails.  \n\n That's thanks to a host of new engine tweaks that start with a redesigned head with larger titanium intake and exhaust valves.  \n\n Full power comes on at 13,400 rpm thanks to a shorter stroke and new lightweight forged pistons, and variable-length intake runners and a 4-2-1-4 exhaust makes sure the mill breathes easy.  \n\n"
                     , new SampleDataGroup(groupGuid 
                                 , "Sport Bikes"
                                 , "It is about  speed, acceleration, braking, and cornering on paved roads."
                                 , "Comfort is sacrificed for speed, in comparison to less specialized motorcycles. \n\n A sportbike is a motorcycle whose enjoyment consists mainly from its ability to perform on all types of paved highway – its cornering ability, its handling, its thrilling acceleration and braking power, even (dare I say it?) its speed.\n\n"
                                 , "http://127.0.0.1:81/Assets/SportBikes/sportbikes.png"
                                 , "Sport bikes have comparatively high performance engines resting inside a lightweight frame.\n\n The combination of thse help maintain structural integrity and chassis rigidity.\n\n Braking systems combine higher performance brake padsand multi-piston calipers that clamp onto oversized vented rotors. Suspension systems are advanced in terms of adjustments and materials for increased stability and durability. Front and rear tires are larger and wider than tires foundon other types of motorcycles to accommodate higher cornering speeds and greater lean angles.  \n\n"
                                 ))); 
   
   
   
   
             groupGuid = Guid.NewGuid().ToString(); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                  , "Dodge Tomahawk"
                  , "Crazy V10 Big Block with 2 wheels"
                  , "The Tomahawk was a non-street legal concept vehicle introduced by Dodge. It features the 500 horsepower (370 kW) 8.3-litre (510 cu in) V10 SRT10 engine from the Dodge Viper.The vehicle has two front wheels and two rear wheels, making it a kind of motorized quadricycle rather than a typical motorcycle.\n\n"
                  , "http://127.0.0.1:81/Assets/ExoticBikes/tomahawk.png"
                  , "Dodge initially announced the top speed of the Tomahawk was estimated at 420 miles per hour (680 km/h), but later revised this downward to 300 miles per hour (480 km/h), and spokesmen did not answer questions on how this estimate was calculated.\n\nWolfgang Bernhard, Chrysler Group chief operating officer at the time, said in 2003 that no one had ridden the Tomahawk faster than 100 miles per hour (160 km/h).  \n\n.Joe Teresi, of Easyriders magazine and owner of the world record setting motorcycle ridden by Dave Campos, said the top speed estimate must have been based only on horsepower and final drive ratio, and ignored the critical factors of frontal area, drag coefficient, and rolling resistance. \n\nDodge declined offers to put the top speed claim to a test, and no one is known to have attempted to ride the Tomahawk to its maximum speed. Dodge spokesman David Elshoff said that someday the Tomahawk would be run at the Bonneville Speedway speed trials, but no such attempt was ever made. \n\nCampos was as skeptical as Teresi, saying he doubted the Tomahawk could exceed 200 miles per hour (320 km/h) because at high speeds, the rider would be lifted right off the bike without a streamliner fairing, and the four wheel steering would be a problem as well. Nonetheless, Campos wished Dodge luck, adding, Let nothing but fear stand in your way. Phil Patton of the New York Times wrote, In theory, the Tomahawk can blast from a standing start to 60 miles an hour in two and a half seconds and reach 300 miles an hour. In practice, since Evel Knievel retired, it is hard to imagine anyone willing to prove it."
                       , new SampleDataGroup(groupGuid 
                                 , "Exotic Bikes"
                                 , "Bikes that break records."
                                 , "This is all about speed, at any cost, even bordering on ridiculous."
                                 , "http://127.0.0.1:81/Assets/ExoticBikes/group.png"
                                 , "These bikes are powered by gas, rocket fuel, jet enjines, superchargers."
                                 ))); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                  , "Jet Reaction"
                  , "1250bhp motorcycle aims for 450mph speed record"
                  , "Richard Brown is aiming to raise the motorcycle land speed record to 450mph, using a jet-engine sourced from a helicopter.\n\n"
                  , "http://127.0.0.1:81/Assets/ExoticBikes/mtt_turbine.png"
                  , "Brown previously ran the Gillette Mach 3 Challenger hydrogen peroxide rocket motorcycle at Bonneville Salt Flats, setting a one-way speed record of 332.887 mph (535.730 km/h) and top speed of 365 mph (587 km/h). He expects to exceed 400 mph (640 km/h) with Jet Reaction in 2012–2013. If successful, it will be the first jet-propelled motorcycle record breaker."
                       , new SampleDataGroup(groupGuid 
                                 , "Exotic Bikes"
                                 , "Bikes that break records."
                                 , "This is all about speed, at any cost, even bordering on ridiculous."
                                 , "http://127.0.0.1:81/Assets/ExoticBikes/group.png"
                                 , "These bikes are powered by gas, rocket fuel, jet enjines, superchargers."
                                 ))); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                  , "Top Fuel Dragbike"
                  , "Top Fuel Dragbike"
                  , "The title of worlds quickest motorcycle is currently held by Larry “Spiderman” Mcbride with a supercharged nitro burning Top Fuel Dragbike.\n\n The team set the record with a 5.79 ET @ 245.36 mph.\n\n McBride has been 5.74 unofficially and is shooting for the 5.60's at over 250 mph in the quarter mile.\n\n If anyone can do it, Spiderman can; he’s won 10 world championships in his 33 years of racing.\n\n"
                  , "http://127.0.0.1:81/Assets/ExoticBikes/dragbike.png"
                  , "This bike eats fuel, about 4 gallons per 1/4 mile run.\n\n The body is made by carbon fiber \n\n The engine is a  1511cc Puma/Kawasaki, with an estimated 1000 horsepower \n\n Compression is insanme at 59:1.\n\n The compression on the supercharger is a 2.4 compression ratio \n\n"
                       , new SampleDataGroup(groupGuid 
                                 , "Exotic Bikes"
                                 , "Bikes that break records."
                                 , "This is all about speed, at any cost, even bordering on ridiculous."
                                 , "http://127.0.0.1:81/Assets/ExoticBikes/group.png"
                                 , "These bikes are powered by gas, rocket fuel, jet enjines, superchargers."
                                 ))); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                  , "Top Speed Conventional Engine"
                  , "Not powered by jet or rocket engines."
                  , "This is a traditional Haybusa engine and a modified body and frame."
                  , "http://127.0.0.1:81/Assets/ExoticBikes/normallyaspirated.png"
                  , "The point here is that we are not in the rocket category or jet engine category."
                       , new SampleDataGroup(groupGuid 
                                 , "Exotic Bikes"
                                 , "Bikes that break records."
                                 , "This is all about speed, at any cost, even bordering on ridiculous."
                                 , "http://127.0.0.1:81/Assets/ExoticBikes/group.png"
                                 , "These bikes are powered by gas, rocket fuel, jet enjines, superchargers."
                                 ))); 
   
             sampleData.Add(new SampleDataItem(Guid.NewGuid().ToString() 
                  , "2 wheel land speed record."
                  , "A rocket with 2 wheels."
                  , "This bike cannot turn. Jsust a straight line"
                  , "http://127.0.0.1:81/Assets/ExoticBikes/rocket.png"
                  , "World land speed record with a rocket engine."
                       , new SampleDataGroup(groupGuid 
                                 , "Exotic Bikes"
                                 , "Bikes that break records."
                                 , "This is all about speed, at any cost, even bordering on ridiculous."
                                 , "http://127.0.0.1:81/Assets/ExoticBikes/group.png"
                                 , "These bikes are powered by gas, rocket fuel, jet enjines, superchargers."
                                 ))); 
   
             return sampleData; 
   
         } 
     } 
 }
 
 
 

Verify your naming of services – check your various files

Be sure your code reflects FastMotorcycleListService
The old name in Step 1 was:
- Service1
The new name in step 2 is:
- FastMotorcycleListService
We will still need more work to do:
- Define the code in the interface file (IFastMotorcycleListService)
- Add a method called GetSampleData()
- Modify the markup in the SVC file
  - Factory=System.ServiceModel.Activation.WebServiceHostFactory
  - Service=FastMotorcycle_WebRole.FastMotorcycleListService

Exercise 3: Verifying Web Services & Adding Graphics (Motorcycle Images)
Part 1 – Verifying that we have a proper web service file
Part 2 – Adding graphics images to your project. Your Windows 8 Metro Grid will need to consume them from somewhere. Later, we will leverage the Azure Table Storage Service.
Part 3 - Verifying graphics

Checkpoint for Exercise 2 – Did you get your svc file properly coded?

The markup in the svc files needs modification.
In Step 1 we will view the markup
We want to indicate that it will instantiate the needed web hosting environments on demand
Step 2 is what we want to paste in
- The host instance is created dynamically in response to incoming messages
- Modify the markup in the SVC file
  - Factory=System.ServiceModel.Activation.WebServiceHostFactory
  - Service=FastMotorcycle_WebRole.FastMotorcycleListService

Adding images to your project (Motorcycle Images that will be sent to Windows 8 Metro Grid App)

We need a folder called Assets
We will add our photos of motorcycles
- Later we will leverage the Windows Azure Storage Service
In Step 1 we will add a new folder
In Step 2 you can see it
In Step 3 you will download the motorcycle images
In Step 4 you will copy the images so you can copy them to the folder you just created
- The Assets folder was just created
You can download the images here
1. Motorcycle Images http://sdrv.ms/LYrrEj

Verifying you have all the images in Azure Cloud Project

In Step 1 where are about to paste in our images
Here you will start by pasting in the SportBikes and ExoticBikes images to the Assets folder we just created
In Step 2 you can see the images ready to go.
- Note: this is not ideal
  - It will be better to store the images as blobs
You can download the images here
1. Motorcycle Images http://sdrv.ms/LYrrEj

Exercise 4: Understanding the core data structures
Part 1: This is a crucial step. It is where we add our core data structures. Remember about all the previous posts about – SampleDataCommon, SampleDataItem, SampleDataGroup. This was discussed EXTENSIVELY.
Part 2: Understanding our data model, pasting in the source code.
Part 3: Adding a default web page (default.aspx)

Adding our core data structures

This step is important because it is where we define all the data objects that result in the JSON data being generated.
There is an inheritance model and relationships that mimic the needs of the Windows 8 Metro Grid Client Application
The Windows 8 Metro Grid Client Application expects a certain data format and the cloud app needs to provide that JSON data
- The previous posts explained this clearly
  - If you don't know about SampleDataCommon, SampleDataItem, SampleDataGroup, you are skipping steps
  - You need to see previous posts that explain the data models of Windows 8 Metro Grid Client Application
In Step 2 we add a class called SampleData.
- It contains three classes (Step 3):
  - SampleDataCommon
  - SampleDataItem
  - SampleDataGroup

A peak into the data model

This screen should be obvious if you read the previous posts.
All these data attributes are sent by the Windows Azure cloud applications
WCF automatically generates JSON data that is consumed by the Windows 8 Metro Grid Client Application
We have a base class (SampleDataCommon)
- The code will also include SampleDataItem and SampleDataGroup, which derive from SampleDataCommon
- Just like before with the Windows 8 Metro Grid Client Application
- The data you see above ends up being sent to the Windows 8 Metro Grid Client Application
- The Windows 8 Metro Grid Client Application reads these attributes and displays them in a beautiful Metro Grid-style
- If you get your data models right on client and server, this architecture is an awesome starting point
Commentary on code snippet below:
1. Notice the base class SampleDataCommon
2. Notice the derived classes (SampleDataItem and SampleDataGroup)
3. This represents the structures needed by our Windows 8 Metro Client

Code Snippet = SampleData.cs

 	 		 			 				 SampleData.cs 			 		
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
 using System; 
 using System.Collections.Generic; 
 using System.Linq; 
 using System.Web; 
   
 using System.ServiceModel; 
 using System.ServiceModel.Web; 
 using System.Runtime.Serialization; 
   
   
 namespace FastMotorcycle_WebRole 
 { 
     [DataContract] 
     public class SampleDataCommon 
     { 
         [DataMember(Name = "_uniqueId", IsRequired = true, Order = 1)] 
         public string _uniqueId { get; set; } 
         [DataMember(Name = "_title", IsRequired = true, Order = 2)] 
         public string _title { get; set; } 
         [DataMember(Name = "_subTitle", IsRequired = true, Order = 3)] 
         public string _subTitle { get; set; } 
         [DataMember(Name = "_description", IsRequired = true, Order = 4)] 
         public string _description { get; set; } 
         [DataMember(Name = "_imagePath", IsRequired = true, Order = 5)] 
         public string _imagePath { get; set; } 
         [DataMember(Name = "_content", IsRequired = true, Order = 6)] 
         public string _content { get; set; } 
         public SampleDataCommon(string uniqueId, string title, string subTitle, string description, string imagePath, string content) 
         { 
             this._uniqueId = uniqueId; 
             this._title = title; 
             this._subTitle = subTitle; 
             this._description = description; 
             this._imagePath = imagePath; 
             this._content = content; 
         } 
     } 
   
   
   
     [DataContract] 
     [KnownType(typeof(SampleDataCommon))] 
     public class SampleDataGroup : SampleDataCommon 
     { 
         public SampleDataGroup(string uniqueId, string title, string subTitle,  
                                string description, string imagePath, string content) 
             : base(uniqueId, title, subTitle, description, imagePath, content) 
         { 
         } 
     } 
   
   
     [DataContract] 
     [KnownType(typeof(SampleDataCommon))] 
     public class SampleDataItem : SampleDataCommon 
     { 
         [DataMember(Name = "_group", IsRequired = true, Order = 1)] 
         public SampleDataGroup _group { get; set; } 
   
         public SampleDataItem(string uniqueId, string title, string subTitle,  
                               string description, string imagePath, string content,  
                               SampleDataGroup group) 
             : base(uniqueId, title, subTitle, description, imagePath, content) 
         { 
             _group = group; 
         } 
     } 
 }
 
 
 

Adding a default.aspx web page – Helps us see our service running

To our WCF service, let us add a default.aspx page. See Step 1.
This is a simple page to start our application in the emulators (Compute and Storage)
By adding Default.aspx (Step 2), we make it easy for the Windows 8 Metro Grid Client Application to connect to our Azure Storage Emulator
As we write our code and debug, we will need to see default.aspx
This a convenience for the developer in working with the emulators
- Once you deploy to the cloud, it won't matter

Exercise 5: Adjusting Web.Config & Adding a default web page
Part 1: Adding some basic text to our startup page. This is more an informational synopsis of our running service.
Part 2: Simplifying web.config – Removing the <system.serviceModel> entry
Part 3: Making default.aspx the startup page

Adding Default.aspx

See the code snippet below for default.aspx.
- Paste in the code for default.aspx. Find Code Snippet Default.aspx
Just paste in the whole body tag you see above
- What you are pasting just summarizes our WCF service
The code snippet below represents the whole file

Code Snippet = Default.aspx

 	 		 			 				 Default.aspx 			 		
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
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FastMotorcycle_WebRole.Default" %> 
   
 <HTML xmlns="http://www.w3.org/1999/xhtml"> 
   
 <HEAD runat="server"> 
   
   
   
   
   
 <FORM id=form1 runat="server"> 
     <DIV> 
         <OL style="BORDER-LEFT-WIDTH: 0px; LIST-STYLE-TYPE: decimal; FONT-FAMILY: segoe ui,arial,verdana,helvetica,sans-serif; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; COLOR: rgb(0,0,0); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px 0px 0px 2.8em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0.5em; BORDER-TOP-WIDTH: 0px"> 
             <LI style="LIST-STYLE-TYPE: decimal; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
             This is a cloud service that returns JSON data 
             <LI style="LIST-STYLE-TYPE: decimal; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
             We have added SampleData.cs<UL style="LIST-STYLE-TYPE: decimal"> 
                 <LI style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
                 This contains our object model for data returning back to Windows  
                 8 Clients 
             </LI></UL> 
               
             <LI style="LIST-STYLE-TYPE: decimal; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
             We have commented out "system.serviceModel"<UL style="LIST-STYLE-TYPE: decimal"> 
                 <LI style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
                 We will do this work in FastMotorcycleListService.svc<UL style="LIST-STYLE-TYPE: decimal"> 
                     <LI style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
                     A change in the markup will invoke WebServiceHostFactory 
                 </LI></UL> 
                   
             </LI></UL> 
               
             <LI style="LIST-STYLE-TYPE: decimal; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
             We have added a bunch of motorcycle images to the Assets folder<UL style="LIST-STYLE-TYPE: decimal"> 
                 <LI style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
                 Just pictures of cool bikes 
             </LI></UL> 
               
             <LI style="LIST-STYLE-TYPE: decimal; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
             We have defined List<SAMPLEDATAITEM> GetSampleData(string sample_id)  
             so that Windows 8 Metro Grid Clients can get JSON data 
             <LI style="LIST-STYLE-TYPE: decimal; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
             We have changed the markup in FastMotorcycleListService.svc<UL style="LIST-STYLE-TYPE: decimal"> 
                 <LI style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
                 It now looks like this:<UL style="LIST-STYLE-TYPE: decimal"> 
                     <LI style="PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
                     ServiceHost Debug="true" 
                     <LI style="LIST-STYLE-TYPE: decimal; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
                     Factory="System.ServiceModel.Activation.WebServiceHostFactory" 
                     <LI style="LIST-STYLE-TYPE: decimal; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; MARGIN: -0.2em 0px 0.3em; LINE-HEIGHT: 2em; PADDING-RIGHT: 0px"> 
                     Service="FastMotorcycle_WebRole.FastMotorcycleListService" 
                 </LI></UL> 
                   
             </LI></UL> 
               
         </LI></OL> 
     </DIV> 
 </FORM>
 
 
 

Removing / Commenting out <system.servicemodel>

You must erase or comment this code as seen above.
We are eliminating <system.serviceModel >
Note that we have commented out <system.serviceModel >
- That is because FastMotorcycleListSrevice.svc uses Web Host Factory.
  - <system.servicemodel> not needed in this demo

Code Snippet = Web.Config

 	 		 			 				 web.config 			 		
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
 <?xml version="1.0"?> 
 <CONFIGURATION> 
   <CONFIGSECTIONS> 
   </CONFIGSECTIONS> 
   <!--  To collect diagnostic traces, uncomment the section below or merge with existing system.diagnostics section. 
         To persist the traces to storage, update the DiagnosticsConnectionString setting with your storage credentials. 
         To avoid performance degradation, remember to disable tracing on production deployments. 
   <system.diagnostics>      
     <sharedListeners> 
       <add name="AzureLocalStorage" type="FastMotorcycle_WebRole.AzureLocalStorageTraceListener, FastMotorcycle_WebRole"/> 
     </sharedListeners> 
     <sources> 
       <source name="System.ServiceModel" switchValue="Verbose, ActivityTracing"> 
         <listeners> 
           <add name="AzureLocalStorage"/> 
         </listeners> 
       </source> 
       <source name="System.ServiceModel.MessageLogging" switchValue="Verbose"> 
         <listeners> 
           <add name="AzureLocalStorage"/> 
         </listeners> 
       </source> 
     </sources>  
    </system.diagnostics> -->
   <SYSTEM.DIAGNOSTICS> 
     <TRACE> 
       <LISTENERS> 
         <ADD name="AzureDiagnostics" type="Microsoft.WindowsAzure.Diagnostics.DiagnosticMonitorTraceListener, Microsoft.WindowsAzure.Diagnostics, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
           <FILTER type="" /> 
         </ADD> 
       </LISTENERS> 
     </TRACE> 
   </SYSTEM.DIAGNOSTICS> 
   <SYSTEM.WEB> 
     <COMPILATION targetFramework="4.0" debug="true" /> 
   </SYSTEM.WEB> 
   <!--<system.serviceModel> 
     <behaviors> 
       <serviceBehaviors> 
         <behavior> 
           --><!-- To avoid disclosing metadata information, set the value below to false and remove the metadata endpoint above before deployment --><!-- 
           <serviceMetadata httpGetEnabled="true"/> 
           --><!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to avoid disclosing exception information --><!-- 
           <serviceDebug includeExceptionDetailInFaults="false"/> 
         </behavior> 
       </serviceBehaviors> 
     </behaviors> 
     <serviceHostingEnvironment multipleSiteBindingsEnabled="true" /> 
   </system.serviceModel>-->
   <SYSTEM.WEBSERVER> 
     <MODULES runAllManagedModulesForAllRequests="true" /> 
   </SYSTEM.WEBSERVER> 
 </CONFIGURATION>
 
 
 
 

The startup page

Let's make Default.aspx the startup page
From there we can start debugging (Step 2)
Note that in Step 3 the emulators are starting up. This means the compute and storage emulators.

Exercise 6: Running and easily testing our Windows Azure Cloud Application
Part 1: Running our FastMotorcycle Cloud Service. This is the Window Azure WCF Service
Part 2: Using the browser to test our service
Part 3: Understanding the JSON that comes back.

What to expect when the FastMotorcycle Cloud Service is running

Demonstrates that we are running
If you see this page running, we can start experimenting with our WCF Service.
We can call into it with the browser, for example.

Testing our Azure Cloud Service

Step 1 shows you how to call into your Azure Web Role.
- Later we will host this in a Microsoft Data Center
  - The url might end up being http://myChoiceForNameHere.cloudapp.net/
Step 2 shows that you can choose to save the JSON data to disk.
Step 3 shows you the JSON data that would normally go to the Windows 8 Metro Grid application.

Understanding the JSON Code – The JSON data that travels from cloud to Windows 8 Metro Grid Application

Here is a single SampleDataItem.
Notice the attributes and the data
- The attributes include: _uniqueId, _title, _subTitle, _description, etc
  - There is also a _group attribute, which contains many of the same attributes as the item, but more focused on a group level, like Sport Bikes or Exotic Bikes
You can see some repetitive data here (every item carries all the attributes for the same set of groups)
- So there is some redundancy you can solve here with less repetition of group data.
  - But the Windows 8 Metro app would need to factor in the different data structures
  - For now, I stuck to the easiest path

Exercise 7: Starting the our Windows Azure Application and the Windows 8 Metro Client Together
Part 1: In case you missed it, yet another review of starting up your cloud application.
Part 2: The endpoint called by the Windows 8 Metro Grid Client.
Part 3: Running the Windows 8 Metro Grid Client.

How to launch your Windows Azure Application

Once again, we will startup our Azure Cloud project in the emulator.
You can see the default address:
- http://127.0.01:81/Default.aspx
The Windows 8 Metro client will need to call:
- http://127.0.0.1:81/FastMotorcycleListService.svc/list/SampleData/1

The endpoint called by the Windows 8 Metro Grid Client

The point of showing the code above is to validate we are calling into the right endpoint.
The Windows client will make a call against the endpoint:
- http://127.0.0.1:81/FastMotorcycleListService.svc/list/SampleData/1
- This will change once we deploy to the cloud
- Our primary goal is working with the emulators before going to a data center

Running the Windows 8 Metro Grid Client

This is the final test for the Windows 8 Metro Grid Application to consume cloud data
- Debug/Start Debugging
The Windows 8 Metro Grid Application will now call into the cloud project, the Windows Azure Web Role, that we created previously.

Exercise 8: Mission Accomplished – Both Windows Azure and Windows 8 Metro Client Are Working !
Conclusion This represents a milestone in our journey. We have completed both sides of the equation. The Windows 8 Metro Grid Client Application and our Windows Azure Cloud-based endpoint that serves up http-based JSON data.

Successful completion

There you have it!
Success. We have a beautiful Windows 8 Metro Client consuming Windows Azure.
- Currently we are running on local emulators.
  - The next step is to deploy the Azure project to a Microsoft Data Center.

Conclusion - Final Thoughts
The next post from here is deploy this app to a MS data center. From there will improve the functionality, architecture, and efficiency of this application I am taking a break now. Whew! I gave you all I got. You have absolutely no excuses for not being able to develop sophisticated cloud-based Metro Applications, running everything on Windows 8 Development Environment and deploying to global data centers throughout the planet. I couldmake FastMotorcycle Application scale into the billions.