How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications – Part 4 – Windows Azure Cloud

 

How to provide cloud-based, JSON data to Windows 8 Metro Grid Applications – Part 4 – Windows Azure Cloud

Rate This
  • Comments 5
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

lahxjo2d[3]
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 

001
  1. Start with File/New Project
  2. Choose Cloud from Installed templates
    • You will see Windows Azure Project
  3. 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

002
  1. 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.
  2. A WCF Web Role is simply your web service running inside scaled instances of IIS, activated when Windows 8 Metro Clients connect.
  3. In (2) we wish to rename the web role
    • Rename to FastMotorcycle_WebRole
  4. 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 

003
  1. From the View menu choose Solution Explorer in Step 1
  2. 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
  3. You can see in Step 2 that the Windows client will make a call against the endpoint

 


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 

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

Pasting in some new code 

005
  1. Note the interface file: IFastMotorcycleListService.cs in Step 1.
    • It defines the UriTemplate, the Web Message Format
      • Format = JSON
  2. 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 
006
  1. Be sure your code reflects FastMotorcycleListService 
  2. The old name in Step 1 was:
    • Service1
  3. The new name in step 2 is:
    • FastMotorcycleListService
  4. 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? 

007
  1. The markup in the svc files needs modification.
  2. In Step 1 we will view the markup
  3. We want to indicate that it will instantiate the needed web hosting environments on demand
  4. 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) 

008
  1. We need a folder called Assets
  2. We will add our photos of motorcycles
    • Later we will leverage the Windows Azure Storage Service
  3. In Step 1 we will add a new folder
  4. In Step 2 you can see it
  5. In Step 3 you will download the motorcycle images
  6. 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
  7. You can download the images here
    1. Motorcycle Images http://sdrv.ms/LYrrEj

Verifying you have all the images in Azure Cloud Project 

009
  1. In Step 1 where are about to paste in our images
  2. Here you will start by pasting in the SportBikes and ExoticBikes images to the Assets folder we just created
  3. 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  
010
  1. This step is important because it is where we define all the data objects that result in the JSON data being generated.
  2. There is an inheritance model and relationships that mimic the needs of the Windows 8 Metro Grid Client Application
  3. 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
  4. In Step 2 we add a class called SampleData.
    • It contains three classes (Step 3):
      • SampleDataCommon
      • SampleDataItem
      • SampleDataGroup

A peak into the data model 

011
  1. This screen should be obvious if you read the previous posts.
  2. All these data attributes are sent by the Windows Azure cloud applications
  3. WCF automatically generates JSON data that is consumed by the Windows 8 Metro Grid Client Application
  4. 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
  5. 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 

012
  1. To our WCF service, let us add a default.aspx page. See Step 1.
  2. This is a simple page to start our application in the emulators (Compute and Storage)
  3. 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
  4. As we write our code and debug, we will need to see default.aspx
  5. 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 

013
  1. See the code snippet below for default.aspx.
    • Paste in the code for default.aspx. Find Code Snippet Default.aspx
  2. Just paste in the whole body tag you see above
    • What you are pasting just summarizes our WCF service
  3. 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> 

014
  1. You must erase or comment this code as seen above.
  2. We are eliminating <system.serviceModel >
  3. 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 

015
  1. Let's make Default.aspx the startup page
  2. From there we can start debugging (Step 2)
  3. 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
016
  1. Demonstrates that we are running
  2. If you see this page running, we can start experimenting with our WCF Service.
  3. We can call into it with the browser, for example.

Testing our Azure Cloud Service
017
  1. 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/
  2. Step 2 shows that you can choose to save the JSON data to disk.
  3. 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 

018
  1. Here is a single SampleDataItem.
  2. 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
  3. 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 

019
  1. Once again, we will startup our Azure Cloud project in the emulator.
  2. You can see the default address:
    • http://127.0.01:81/Default.aspx
  3. 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 

020
  1. The point of showing the code above is to validate we are calling into the right endpoint.
  2. 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 

021
  1. This is the final test for the Windows 8 Metro Grid Application to consume cloud data
    • Debug/Start Debugging
  2. 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 

022
  1. There you have it!
  2. 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.

lahxjo2d[3][5]

  • A recommended exercise for anyone involved in Metro / Azure development. Congratulations!

  • Thanks for the amazing post with in-depth information. You mentioned about the next post to deploy this Azure service to a MS data center and improving the functionality, architecture, and efficiency of this application. Can you point me to where I can find this information? or the post is  a work in progress? Thanks

  • Hi,

    You mentioned in the article that the static data in the service will be changed to originate from SQL Database or Azure Table Storage in future posts. Thus, I just want to ask, is that post already available? If it is, can you direct me to the link?

    If there's no post about it, do you mind giving me the structure of the codes if the data were to be retrieved from the database? If possible I want to use it as reference as I'm currently stuck at getting data out from the service through database.

    Any help is appreciated.

    Thanks.

  • Sorry I forgot to mention, I can retrieve data from database. I'm just unsure how to allocate the retrieved data into the DataItem and DataGroup as well as group them into the respective groups like Sport Bikes or Exotic Bikes. What should be done in the service, while retrieving the data, in order to group them accordingly?

    Thanks

  • hello guys how to get the data from xml or any storage for example. Because in this post it's a static data. Thanks!

Page 1 of 1 (5 items)
Leave a Comment
  • Please add 3 and 6 and type the answer here:
  • Post