August 2012
Volume 27 Number 08
Microsoft Azure - Microsoft Azure Comes to the Rescue
By Mark Kromer | August 2012
Our marketing department in the Microsoft Mid-Atlantic District hosted an event last spring for about 90 Fortune 500 executives, Microsoft partners and Microsoft employees. They needed a registration system to highlight the latest and greatest Microsoft technologies and immerse attendees in the newest Microsoft experience. I had built successful solutions in my previous roles as a solution architect and consultant, so they turned to me in a pinch. This is because there wasn’t yet any clear direction on what technologies to showcase, or how. Oh, and—by the way—the conference was just a month away!
My focus at Microsoft is to work with large businesses on solutions that are built on SQL Server and Azure SQL Database, known as the Microsoft data platform. So I immediately gravitated toward the Platform as a Service (PaaS) capabilities of Azure as the only way I could possibly meet marketing’s requirements. By leveraging the ability of Azure to quickly deliver a solution built on the Microsoft application platform (the Microsoft .NET Framework, SQL Server and Windows Server), I could make this happen. With the Azure PaaS model, Microsoft handles the infrastructure, power, servers, maintenance, patching, upgrades and so on from worldwide Microsoft datacenters, making this a zero-footprint, zero-infrastructure option, which was perfect for my requirements.
Part of the agreement with marketing and with my manager was that I was only going to devote my spare time and weekends to this project. So I turned to already well-known technologies proven for quick time to production, which included Silverlight, Windows Communication Foundation (WCF) and SQL Server. In the end, I was able to deliver a solid solution that resulted in positive feedback and good results, using common Microsoft technologies and with no budget—and without a large time investment. I hope you’ll gain some guidance and insights from the techniques I leveraged with Azure, Azure SQL Database and Windows Phone development, and minimal effort.
For this project I primarily needed to focus on two specific requirements. One was to make it easy and compelling for attendees to interact with new devices and equipment from the conference partners such as tablets, slates and phones. The second was to highlight the new Metro design approach Microsoft is using across all devices. I didn’t have time to load up the community preview of Windows 8 and Visual Studio 11 to make a native Metro application. But I had been developing on Windows Phone 7.5 for several months, so I decided to go hybrid with a Silverlight approach because it would work for both Windows 8 desktop mode and Windows Phone native applications.
To meet the requirements, I decided to create an attendee check-in application for registered guests to interact with when they arrived at the registration desk. That covered the requirement of a functional and interactive application. To create a Metro UI experience, I utilized the Silverlight 5.0 PivotViewer control. In keeping with the interactive themes and presentation of different form-factor experiences, I created a Windows Phone app based on the Panorama control. With the app, the Microsoft employees at the event could allow guests to utilize their devices to check in or view event photos. Guests who were also Windows Phone users could download the app from the Marketplace. An easy and obvious technology choice was Azure, and I used Azure SQL Database for the database, Azure SQL Reporting for tracking reports, Azure WCF Services for data exchange and Azure Binary Large Object (BLOB) Storage for storing on-site event photos.
Solution Overview
I’m going to split up the solution architecture into three primary areas for this article: the Azure Web apps; Azure SQL Database and reporting; and the Windows Phone app. The complete solution also included a few other ancillary, nice-to-have apps and features that I won’t detail in the limited space I have here. But if you’re looking at building a custom solution for a conference or event on this scale (fewer than 300 attendees), these other areas are important for you to consider:
- Photo uploading and sharing: I utilized the image uploader tool from the Azure Toolkit, which takes images from local storage and uploads them to Azure BLOB Storage. It works great out of the box. You just need to plug in your Azure Storage key and modify the Default.aspx file to your own design. Images were uploaded so users could share photos from the event through a photo gallery on large screens at the event or on demo tables. I recommend downloading a tool to explore the files in your Azure Storage so you can then manage those files easily after uploading. One such tool, the Azure Storage explorer, is available on CodePlex at bit.ly/H3rOC.
- Social networking: This is a requirement for an app of this nature. For public conferences and events, make sure you include a way to share those photos as well as attendee comments, Tweets, updates, conversations and so on. In the Windows Phone app I simply linked to a Facebook group that I created, and in the Web app (which I’ll describe later) I used the Facebook C# SDK for ASP.NET, which you can get at bit.ly/J5D2zI.
- Silverlight photo gallery viewer: I won’t fully describe this now, but I chose to use this as a quick fix for the requirement of displaying images on an overhead screen in the main conference room. As the images were dropped into Azure Storage, this page could refresh manually and display an endless loop, or display on laptops with which users could interact. The control and XML configurations came from CodePlex (slideshow.codeplex.com). There are many other photo viewers that you can use. The important criterion, if you go this route with Azure Storage, is that the component must be able to render images from a Web URL. In previous use of Azure Storage, I used plain “https://” links directly to JPG and PNG graphics files.
I had a limited runway in which to work for my time to production, and Azure provided a way to ramp up quickly by using all these different puzzle pieces. This is because the PaaS offering is made up of .NET, Windows Server, Azure Storage and Azure SQL Database. That meant my experience in .NET, SQL Server and Windows Server worked essentially the same for me once I learned the nuances of adding an Azure project to my Visual Studio 2010 solutions. I’ll touch on some of these later in the solution description. Finally, because this was a one-time event, I didn’t need to purchase infrastructure. Instead, I deployed the components to my Azure account and switched things off when I was done. I have a SQL Saturday event coming up this summer and will likely spin these components back up when the time comes around to reuse this conference event system. Because Azure bills monthly like a power utility would, I’m only billed based on my utilization, and I can scale to my user requirements without needing to over-provision infrastructure for worst-case scenarios.
Azure Web Apps
I’ll start with the primary entry screen for the registration app, which is a C# .NET Web app hosting a Silverlight 5.0 XAML control, hosted in Azure. Something that you’ll find different when developing for Azure instead of traditional .NET projects in Visual Studio is the framework for the hosting services in Azure that will host WCF services and Web apps. There are custom classes in my C# class in my top-level namespace to handle converting data coming from Azure SQL Database to Silverlight properties. In the Web tier, you’ll see the classic XML files (for example, crossdomain.xml) to allow cross-domain calls from the Web tier (that is, Silverlight) to a back-end data service. This Web app now becomes the primary role in my Azure service because I selected it as the Web role in my project.
For this app, I utilized one of my favorite Silverlight controls from Windows Live labs (which is now a part of Silverlight 5.0) called the PivotViewer control.
The PivotViewer control is generally applicable for application scenarios where you need to enable easy navigation and an interactive UI for large amounts of data that can be easily categorized, sorted and navigated by the end user (see Figure 1).
.png "The PivotViewer Control Utilized as a Tile Interface for Registered Attendees")
Figure 1 The PivotViewer Control Utilized as a Tile Interface for Registered Attendees
The PivotViewer also enables customization of user actions so that when attendees find their names in the tiles, they can then check in by clicking on their named tiles (see Figure 2). The color-based tile UI for PivotViewer was chosen by the organizers of the Microsoft conference because it represents a similar theme to the Windows 8 Metro interface and Windows Phone tile interface. This user experience worked well for the registration desk for the conference, and the tiles made for perfect interactive touch mechanisms for users to self-check-in on large touchscreen monitors. Additionally, the control has the built-in capability to change the sort order based on your data’s properties, so the names could be easily arranged by last name.
.png "The PivotViewer Zooms in on a Selected Name So the User Can Check In")
Figure 2 The PivotViewer Zooms in on a Selected Name So the User Can Check In
To modify the appearance of the tiles in PivotViewer, you need to add attributes to the PivotViewerItemTemplate. Notice how I added a color converter and set the attendee name with the “ShortName” attribute:
<conv:TextToSolidColorConverter x:Key="colorConverter"/>
<pivot:PivotViewerItemTemplate x:Key="DemoTemplate">
<Border Width="300" Height="300"
Background="{Binding Color,
Converter={StaticResource colorConverter}}">
<TextBlock Text="{Binding ShortName}"
FontWeight="ExtraBold"
FontSize="42"HorizontalAlignment="Center"
VerticalAlignment="Center"
TextWrapping="Wrap" />
</Border>
</pivot:PivotViewerItemTemplate>
The color is set from nothing more than a loop through the list of attendees and then modification of the item number property. The XAML for the color is set in the converter class:
var xaml = "<LinearGradientBrush xmlns='https://schemas.microsoft.com/client/2007'
StartPoint=\"0.5,0\" EndPoint=\"0.5,1\">" +
"<GradientStop Color=\"Black\" Offset=\"0.0\" />" +
"<GradientStop Color=\""+value.ToString()+"\" Offset=\"0.15\" />" +
"<GradientStop Color=\"SlateGray\" Offset=\"0.85\" />" +
"</LinearGradientBrush>";
To bind data from the Azure SQL Database to the Silverlight front end, I created a WCF service hosted in Azure. When you develop Web applications on Azure, you have the option of storing your WCF Web services on your Azure account. I created my WCF service for the specific purpose of acting as the middle tier to my solution, exposing database data from Azure SQL Database. Figure 3 shows what you select when creating a new WCF service for Azure in Visual Studio 2010.
.png "The WCF Service Web Role in Azure")
Figure 3 The WCF Service Web Role in Azure
When deploying a solution on Azure, you’ll need to access different areas of the Azure management console (see Figure 4). In the case of the PivotViewer Web App, the WCF service and the check-in Web app, all components are deployed and stored under the “Hosted Services” section. Later in this article, I’ll use the Database, Reporting and Storage sections as well. Deploying a Web application—in Azure lingo—is known as creating a hosted service with an ASP.NET Web Role, whereas the WCF data service that I created for accessing the Azure SQL Database is also a hosted service, but with a WCF Service Web Role instead. In each case, you’ll receive a cloudapp.net domain name with your custom service name prepended to the URL. To use your own domain name, you’ll need to map your domain name to the Azure-friendly DNS name using a technique explained in the MSDN Library article, “How to Configure a Custom Domain for an Azure Hosted Service” (azure.microsoft.com/en-us/documentation/articles/web-sites-custom-domain-name/).
.png "The Azure Management Console")
Figure 4 The Azure Management Console
The WCF service is a straightforward Web service to query data from Azure SQL Database to report the attendee information. It also includes a method to update the status of the attendee. By selecting his name on the PivotViewer tiles, the user toggles his status of checked in or checked out.
To access a database in Azure SQL Database, you use a connection string that’s really no different than accessing a classic SQL Server database. Being able to move code, snippets and previous code to Azure is incredibly easy because the connection types and mechanisms are the same. In the code shown in Figure 5—from my WCF service where I access the database in Azure SQL Database—I’m utilizing my Entity Framework Register class, which connects to Azure SQL Database in the same way as you would connect to any other SQL Server database.
Figure 5 Using WCF Service to Interact with Azure SQL Database
namespace WCFServiceConference
{
public class Service1 : IService1
{
// MyData is used to retrieve the attendee list
public List<String> MyData(int value)
{
List<String> results = new List<String>();
using (retreatEntities context = new retreatEntities())
{
IQueryable<Register> sortedContacts = context.registers
.OrderBy(c => c.lastname)
.ThenBy(c => c.org);
// Register is the EF class
foreach (Register sortedContact in sortedContacts)
{
results.Add(sortedContact.lastname + ", " +
sortedContact.email +
" (" + sortedContact.firstname + ") : " +
sortedContact.org);
}
}
return results;
}
// Use this method to check in attendees and check out
public void ToggleRegister(String lname, String fname)
{
using (retreatEntities context = new retreatEntities())
{
IQueryable<register> sortedContacts = context.registers;
try
{
Register qry = (from register in context.Registers
where Register.lastname == @lname &&
Register.firstname == @fname
select Register).First();
// checkinis a binary SQL Server field, so I’m using byte array to set it
byte[] s1 = qry.checkin;
// We’re going to toggle the checkin value where 1 == checked-in
if (s1[0] == 0)
{
s1[0] = 1;
// Set the check-in date/time field in SQL
qry.checkdate = DateTime.Now.ToString();
}
else
{
s1[0] = 0;
qry.checkdate = null;
}
qry.checkin = s1;
// Now let’s save our changes
context.SaveChanges();
}
catch (Exception) { }
}
}
}
}
When you publish your services to Azure, you can then reference them in your Visual Studio projects just as you normally would through service references (see Figure 6), making Azure a great place to house your public Web services.
.png "Referencing the Azure-Hosted WCF Service in the Web App")
Figure 6 Referencing the Azure-Hosted WCF Service in the Web App
Now that I have the cloud database—and the cloud services to interact with the data—completed and published, I can interact with the services from my Silverlight PivotViewer app by using an asynchronous service. Because the interaction with the data service is asynchronous, you’ll have to set up a corresponding local event method to capture the data when it arrives and populate the client component. This is just a List of strings in my case. When the snames property of my class is updated, the Silverlight component will receive the updates through data binding, as shown in Figure 7.
Figure 7 Receiving Updates Through Data Binding in the Silverlight Component via a WCF Service
public static Service1Client _sc;
// This init method is in my MainPage.xaml file
// and is called right after InitializeComponent()
public static void init()
{
_sc = new Service1Client();
_sc.MyDataCompleted +=
new EventHandler<MyDataCompletedEventArgs>(_sc_MyDataCompleted);
_sc.MyDataAsync(1);
}
public static void _sc_MyDataCompleted(object sender,
MyDataCompletedEventArgs e)
{
// How many rows were returned?
snamescnt = e.Result.Count;
snames = new List<string>();
for (int i = 0; i < snamescnt-1; i++)
{
snames.Add(e.Result[i].ToString());
}
}
The solution also includes a small ASP.NET Web app that displays confirmation, issues the check-in request and links to Facebook so attendees can link together via a Facebook group. The calls to the WCF service to update the database are much more straightforward because ASP.NET includes server-side capabilities that Silverlight does not. The following code shows how easy it is to utilize the service:
String lname = Request["lname"];
String fname = Request["fname"];
// No need to use async event calls from ASP.NET // Just reference the Web service and call the method directly
Service1Client sc = new Service1Client();
sc.ToggleRegister(lname, fname);
Label1.Text = "CHECKING IN " + fname.ToUpper() + " " + lname.ToUpper();
This ASP.NET page was then deployed directly to my Azure account as a Web Role (see Figure 8).
.png "Adding an ASP.NET Web Role for Simple Web Pages")
Figure 8 Adding an ASP.NET Web Role for Simple Web Pages
The Windows Phone App
Windows Phone apps are built using Silverlight with the Silverlight for Windows Phone project template in Visual Studio 2010 (see Figure 9). Because the app is Silverlight, I was able to quickly generate a second form-factor application on Windows Phone to complement the Web app described previously. This is because the same techniques I used to bind the Silverlight client controls in XAML are also used to connect to the WCF service—hosted in Azure—that I used for the Web app, making the service highly reusable.
.png "The Windows Phone Silverlight App Project Template")
Figure 9 The Windows Phone Silverlight App Project Template
I made the Windows Phone app fully functional for the conference, meaning that you could view all registered attendees, run reports on attendees and allow Facebook and e-mail interactions. So, to allow check in—as opposed to the ASP.NET approach described previously—I needed asynchronous event callback methods for both retrieving the data from Azure and updating the rows:
public MainViewModel() {
this.Items = new ObservableCollection<ItemViewModel>();
_sc = new Service1Client();
// Same as earlier in the Silverlight PivotViewer app
_sc.MyDataCompleted +=
new EventHandler<MyDataCompletedEventArgs>(_sc_MyDataCompleted);
// Used to update the row
_sc.CheckInCompleted +=
new EventHandler<CheckInCompletedEventArgs>(_sc_CheckInCompleted);
// Get the data
_sc.MyDataAsync(1);
}
That technique is the same one used in Silverlight Windows apps, as I demonstrated earlier. However, in this case, I utilized the ViewModel class.
I utilized the ListBox control in a Windows Phone Portrait Page (see Figure 10) as my MainPage, which loads when the app is loaded on the Windows Phone (see Figure 11).
.png "Bind Data to Silverlight in Windows Phone Apps in XAML the Same Way as in a Silverlight App")
Figure 10 Bind Data to Silverlight in Windows Phone Apps in XAML the Same Way as in a Silverlight App
.png "Windows Phone App with Attendee List and Menu Button Navigation")
Figure 11 Windows Phone App with Attendee List and Menu Button Navigation
I retrieved the data from Azure SQL Database and populated the ListBox from the ViewModel by iterating through each row returned from my Azure WCF service with the results of the query:
public void _sc_MyDataCompleted(object sender, MyDataCompletedEventArgs e)
{
for (int i = 0; i < e.Result.Count - 1; i++)
{
// Parse the incoming text for attendee name, e-mail address and company name
string strMain = e.Result[i].ToString();
string strName = strMain.Substring(0, strMain.IndexOf('(') - 1);
string strEmail = strMain.Substring(
strName.Length + 2, strMain.IndexOf(')')-strName.Length-2);
string strCompany = strMain.Substring(strMain.IndexOf(':') + 2);
this.Items.Add(new ItemViewModel()
{LineOne=strName, LineTwo=strCompany, LineThree=strEmail });
}
One of the popular features of the Windows Phone app that I published for conference events is the photo viewer. At the beginning of this article, I mentioned that I provided an image-upload tool that took images and persisted them in Azure BLOB Storage. To display those on Windows Phone, I simply added another page (Windows Phone navigation uses a Web-based page paradigm) that users could navigate to from a menu button on the bottom of the main page (see Figure 11). This is simple. Just add something like the following to the button click event on a menu item:
NavigationService.Navigate(new Uri("/PivotPage1.xaml", UriKind.Relative));
For the photo gallery page, I used the Pivot (yes, there’s that pivot word again) page type in Windows Phone, which allows users to smoothly scroll through a list of items. The Pivot control takes a list of PivotItems in XAML that you use to create a smooth user experience while scrolling horizontally. In my case, I just had to add a series of Web Browser controls as Photo 1, Photo 2, Photo 3 and so on, as shown in Figure 12.
Figure 12 Adding a Series of Web Browser Controls
<controls:Pivot Title="Microsoft Executive Technology Retreat">
<controls:PivotItem Header="Photo 1">
<Grid>
<phone:WebBrowser HorizontalAlignment="Left" Margin="6,3,0,0"
Name="MyWebBrowserControl" VerticalAlignment="Top" Height="605"
Width="452" />
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Photo2">
<Grid>
<phone:WebBrowser HorizontalAlignment="Left" Margin="6,3,0,0"
Name="MyWebBrowserControl1" VerticalAlignment="Top" Height="605"
Width="452" />
</Grid>
</controls:PivotItem>
...
<controls:PivotItem Header="Photo10">
<Grid>
<phone:WebBrowser HorizontalAlignment="Left" Margin="6,3,0,0"
Name="MyWebBrowserControl9" VerticalAlignment="Top" Height="605"
Width="452" />
</Grid>
</controls:PivotItem>
</controls:Pivot>
Because of the time and resource constraints on the project, I kept it simple, with the Windows Phone browser control pointing to the URI for Azure BLOB Storage for each photo. This allowed the user interaction to include resizing, which doesn’t come naturally in the Windows Phone Image control.
The coding for the e-mail piece to send an attendee an e-mail note was also simple. It used the built-in EmailComposeTask API in Windows Phone:
private void ApplicationBarEmailButton_Click(object sender,
EventArgs e)
{
EmailComposeTask emailComposeTask = new EmailComposeTask();
emailComposeTask.To = ContentText.Text;
emailComposeTask.Body = "Hi There!";
emailComposeTask.Subject =
"Microsoft Executive Technology Retreat";
emailComposeTask.Show();
}
This API uses the existing contact list on the user’s phone (see Figure 13).
.png "The Windows Phone E-Mail Contact List")
Figure 13 The Windows Phone E-Mail Contact List
Azure SQL Database and Azure SQL Reporting Services
The database I created for this quick-and-dirty solution was simple. Because I used Azure SQL Database, I was able to build the schema directly in classic SQL Server on-premises tools including SQL Server Management Studio, SQL Server Data Tools and Business Intelligence Development Studio.
There’s one aspect to this solution that isn’t yet complete: the online registration sign-up portion, which was handled by an existing Microsoft-hosted solution. Interestingly, for a technology company, there wasn’t something readily available to provide the on-site interactive experience for the attendees, which is what I’ll show you how to do here. That being said, the way that the database in Azure SQL Database was populated for this project was through SQL Server Integration Services (SSIS), as shown in Figure 14. This is a simple, straightforward SSIS package that takes an Excel dump of the registered users and maps them to fields in my database schema in Azure SQL Database. The Derived Column transform is being used here to modify data in some fields that might not perfectly match my schema. In this kind of solution, this is an area that will probably need to be a bit more complex than what I’m showing you here. But what I want you to take away from this is that in a cloud-based solution such as this Azure event system, common tools such as SSIS work perfectly well, so you won’t need to learn new tools.
.png "Using SQL Server Integration Services")
Figure 14 Using SQL Server Integration Services
What you should be concluding by now is that the current developer and data-management tools for Azure make a solution such as this a hybrid solution. Another area that also demonstrates the Microsoft move into cloud computing is Azure SQL Reporting, which I utilized to provide up-to-the-minute reports on who had checked into the conference with timestamps and contact information (see Figure 15). Anyone who has built any type of SQL Server Reporting Services (SSRS) reports in the past will be familiar with this format. Essentially, Azure SQL Reporting is SSRS in the cloud, running on the Azure platform. I really like the fact that Azure SQL Reporting is purely Web-based, without the need for Silverlight. This meant I was also able to render this exact same report in Windows Phone without needing to recreate a report for the mobile app. I just referenced it from a Web Browser control:
webBrowser1.Navigate(new
Uri("https://fxnxxajmxx.reporting.windows.net/ReportServer?%2fAttendees&rs:
Command=Render&rc:Toolbar=false", UriKind.Absolute));
.png "Azure SQL Reporting Was Used to Provide Reports on Attendee Check-Ins")
Figure 15 Azure SQL Reporting Was Used to Provide Reports on Attendee Check-Ins
Notice that the Web service for Azure SQL Reporting is identical to an on-premises SSRS service, meaning I can use URL parameters to modify the report appearance. Figure 15shows the Web page view that the volunteers at the check-in table viewed on their laptops and Windows Phones. As attendees arrived and checked in, this report let them find the correct stickers and badges for each attendee from behind the check-in desk.
So, that’s pretty much it. There were quite a few moving parts because I needed to quickly glue together a solution using as much existing technology as possible that allowed for quick configuration and very little infrastructure. This made for a perfect use case to utilize cloud computing. Using Azure for storage, hosting and Web pages allowed me to stick with ASP.NET, a WCF service and a cloud database with Azure SQL Reporting (which I was already familiar with from an on-premises experience). And sticking with Silverlight as a UI technology for the Web pages allowed me to reuse the same techniques for multiple form factors quickly and easily.
Mark Kromer is a Microsoft SQL Server technology specialist based in Philadelphia. He was previously a Microsoft BI Solutions product manager for Microsoft and Oracle Corp., as well as a software engineer and database consultant for AT&T and Agilent Technologies Inc.
Thanks to the following technical expert for reviewing this article: David Ateek