Introduction

This article was created as part of the Windows Azure Developer Challenge, which is made up of five challenges designed to explore different services provided by Windows Azure. Over the next few weeks, we will be updating this article as we tackle each challenge.

Our Story

As geeks, we have geeky friends and geeky pastimes such as Game Night. Game Night was a monthly opportunity to unashamedly act like geeks for hours. We sat around the table, consumed adult beverages, played board games, and over analyzed each player's strategy and tactics after the game ended. Full time jobs, significant others, and a few babies later and Game Night was no more. Our passion for playing games, however, never wavered.

Recently, a few of us have been kicking around the idea of bringing Game Night back, but we wanted to do it in a very cool way. Being web developers, we decided to explore the idea of creating an online board game. Such a game could take place over several days or even weeks and could be played on our own time.

This contest gave us the perfect opportunity to explore implementing this idea.

Why Azure

With Windows Azure, we do not have to be network/database gurus to publish an application online and can instead focus on core implementation. Because setting up or modifying services is so streamlined, we have the freedom to experiment with different applications and not invest a significant amount of time in creating the infrastructure.

What Lies Ahead

Below is an overview of what we will be covering in each challenge.

Getting Started - You just read it!

Build a Website - We will walk through how to quickly spin up a website using Windows Azure. We’ll also explore how to use SignalR to create the game lobby.

Using SQL on Azure - We will create a simple game and use a database to store various information.

Virtual Machines - We will show how to migrate an existing application to a VM to improve scalability and explore opportunities to enhance the application.

Mobile Access - We will create a mobile application that will keep track of players’ games and manage notifications.

Building a Website

When we get together for Game Night our first course of action is sitting around the table to catch up on the game of life and select the night’s game. To recreate this experience, we will create a Lobby on the site where everyone gathers before the gaming begins.

We will explore how to connect our new Windows Azure site to Team Foundation Service, create the Lobby, and deploy.

The Infrastructure

We will not recreate the outstanding tutorials provided by Microsoft on the Windows Azure site for creating a new website. If you need some help getting started, go here.

In this section, we will tie Team Foundation Service, Visual Studio, and Windows Azure together to help manage source control and deployments.

Linking Team Foundation Service to Visual Studio

The first step to building out our infrastructure is to set up some form of source control and connect it to Visual Studio. Feel free to use any flavor of source control you prefer but for the purposes of this tutorial, we will utilize Team Foundation Service.

Team Foundation Service is a cloud-hosted service version of Microsoft’s popular Team Foundation Server software. As of this writing, TFS is still in preview and you can sign up for free here. Once you have signed up, you will want to create a new team project. The details of the project are up to you. After the project has been created we will need to link the Visual Studio to TFS.

From your main team project page, click the “Open new instance of Visual Studio” link in the Activities section.

When Visual Studio opens you will see your TFS account in Team Explorer.

Adding a solution to Team Foundation Service

Open an existing solution, or create a new one in Visual Studio. For this demo, we are using the Base template of an ASP.NET MVC4 project. Right-click on the solution, and select Add Solution to Source Control.

Accept or change the defaults and choose the OK button. Once the process completes, open the shortcut menu of the solution and choose "Check In...".

Connecting the project to Windows Azure

Now that source control is set up, we will want to connect the team project to our Windows Azure website. When we do this, we gain a number of benefits. We will be able to set up automatic deployment, view our deployment history, and even roll back our website to a previous build if things go wrong.

In the wizard, select Team Foundation Service and then type in the name of your TFS account (https://youraccount.visualstudio.com). You may be asked to enter your password.

When the popup dialog appears, choose Accept to authorize Azure to configure your team project in TFS.

When authorization succeeds, you will see a dropdown containing a list of your TFS team projects. Select the name of team project that you created in the previous steps and click accept.

In these few short moments we have successfully set up a new TFS team project, which provides you and your team members cloud-based source code, build management, agile development and issue item tracking. We have also tied that team project to Windows Azure for greater control over deployments, and we have a great IDE for coding.

Windows Azure, Visual Studio, and Team Foundation Service allowed us to quickly build out this robust infrastructure which will save us time down the road.

Now we can begin coding!

Creating a Lobby

In this section we will explore using SignalR to enable some of the key features in the Lobby. SignalR is an awesome wrapper package that sits on top of WebSockets and allows real-time communication between the client and server. For more info, check out the SignalR site here.

To get started, add the SignalR NuGet package to the Web project. Using the Package Manager Console, type the following.

Using the GUI, search SignalR and select Microsoft ASP.NET SignalR.

We will also want to make sure our project has a reference to jQuery. If you used one of the MVC4 templates (except Empty) you should be good to go.

Now that the project has all of the necessary SignalR references, we will create a simple chat feature in the lobby so that users can communicate with one another.

The first step to getting SignalR initialized is to register the default routes to SignalR hubs. Add the line "RouteTable.Routes.MapHubs()" to the global.asax Application_Start method. Make sure it is above the normal routes call.

The first three lines are the references we need to get everything working. The script “~/signalr/hubs” is automatically generated by the runtime on the first request and then cached. It will contain all the magical logic SignalR needs to talk with the LobbyHub.

Next, we setup our variables and define the two functions our Hub will use. Remember that “Send” called “addNewMessage” and “Login” called “addNewUserToList”.

Finally, we set up the hub connection and bind necessary events and objects in the DOM. Note that “lobby.server.login” will go to the LobbyHub and execute the “Login” method passing the correct parameters.

That’s it! Build and run your site. Any message you type into the chat will immediately be rendered on all other clients accessing this page.

More fun with SignalR

Chatting is fun and all, but this is going to be a game site, so we should make the page a little more interactive. Let’s make a mini-game! In this mini-game, the user will make a box appear on the screen with their corresponding display color. They can then move the box around, resize it, and even make it spin (why not? ).

There are two methods here. Both are pretty straight forward. One creates the box, and the other will be in charge of moving it.

Back on our Index view, we need to add a few more elements to our page. We’ll add a play button to create the box, and a box container div that will hold all the newly created boxes. The new code is in bold.

Build this and run the project. When you click the “Play” button, your player box will appear! You can move it around with the arrow keys, resize it with ‘Z’ and make it spin with ‘X’.

Go ahead and check in this code and Windows Azure will handle the deployment!

Challenge Two Wrap-Up

We have covered a lot of ground - from source control to deployment to chat to movable colored boxes - in this challenge. If you'd like a closer look at our code, feel free to download the source at the top of this article. Alternately, you can visit the site we set up for this competition: http://proprane.azurewebsites.net

Be on the lookout for the Bob! He is surely hiding somewhere in that page. In the next challenge, we will look at integrating SQL with our website to aid in authentication and authorization, improve our SignalR implementation, and more! Stay tuned!

We have been throwing a few ideas around. Most of them board game related, but we are trying not to limit ourselves. Using Azure's SQL database should help us create leaderboard and achievement systems pretty easily! We will have to look into that for the third challenge.