Remember the old saying "don't judge a game by its cover?" Well, as we enter the age of widespread digital distribution physical boxes might disappear but box art still has a promising future. In the past we had to drive to our favorite video game retailer to admire the beautiful box art that adorned the front of game boxes and cases. Now we can simply log in to our favorite app marketplace to view gorgeous high resolution box art!

Rate my Box Art is a Windows Phone 8 application that allows users to view and rate Xbox game box art across the Windows Phone and Xbox platforms. A simple rating system will identify the best box art by aggregating community feedback in a central data repository. I will use this application to demonstrate how to:

Create and connect to RavenDB (NoSQL solution) hosted on a Windows Azure VM.

Benefits of Windows Azure

Windows Azure is a great platform for deploying mobile web services because it allows developers to focus on making great applications instead of managing infrastructure while providing end users with reliable and performant data services. When combined with a RESTful web service technology such as ASP.NET Web API, developers can save their user's data usage by serving up light weight JSON messages and save mobile battery life by off-loading processing tasks to the cloud.

Background

Build a Website

We've established that the end game of this project is to create a Windows Phone 8 app to view and rate game box art. The compelling idea behind ratings is that over time, with enough contributions, the best box art will rise to the top with a leaderboard set-up. To ensure that a large amount of votes are collected, there is no reason to restrict this application to Windows Phone devices. We want users to be able to browse and vote on their desktops, tablets, and smartphones regardless of platform. The easiest way to maximize our user base is to make the application available as a website.

Choosing our Tools

For our website we are going to try to keep things as platform agnostic and simple as possible. With that in mind, we are going to build our website using HTML5, CSS3, and JavaScript. We will leverage jQuery as well. I'm going to use Visual Studio 2012 because, well, I love Visual Studio. However, this is not a requirement. If you wanted to, you could use Notepad.

The Design

This project is being guided by two principles - make things beautiful and keep things simple. The requirements of the Rate my Box Art website are:

Display the game's title.

Display the game's box art.

Allow the user to rate the box art using a 5-star scale.

Randomly select the next box art to display after the user enters a rating.

Create a feed of the user's realtime voting activity.

Create a feed of the community's realtime voting activity.

Implement a leaderboard that shows the top 10 rated box art.

The Code

Our goal at this stage of the project is to implement our website design. Let's keep in mind that the following functionality will not be implemented until the later stages:

Extensive box art collection to view and rate (test data set only).

Persistence of user ratings to a data source.

Community realtime voting activity.

Top-rated box art.

HTML5 Storage

HTML5 storage (Web Storage) is a persisent local storage natively implemented in web browsers. It allows a web page to store named key/value pairs locally. This is a great way to load a test data set to use while building the design of the website and testing client-side functionality. I've put together some test data in JSON format which lends itself nicely to the key/value pair format:

HTML5 Semantic Tags

For the layout of the site, let's go with a fixed three-column design to follow the principle of keeping things simple. We are not going to explicitly define a mobile-specific style for now, but our design is simple enough that it will be workable on mobile browsers.

Let's define our page layout by using the new semantic elements for HTML5:

Header: title banner of the page set using the background-image CSS element.

Section: a grouped set of content used for the center column.

Aside: a set of content complemented the main content. Used for the left and right columns.

CSS3 Star Selector

The Site

The initial site is not too interesting since it doesn't have a backend, but you get the idea of where it is going:

SQL on Azure

Great news! Did you here that the Xbox One can leverage
Azure to off load CPU intensive computational tasks? Similarly, let's use Azure
to build the back-end infrastructure for Rate my Box Art and get some
calculations going. In this section, we are going to set-up a SQL Server
instance on Azure to store references to box art and user box art ratings.

Data Models

The first task to creating our database is to finalize our
data model. In the previous section, we came up with a simple data model to
store test data in HTML5 Storage. The following data model is an extension of
that with some refinements:

Now that we have our models, let's create a local database
to act as our data store. We could create the database from scratch by putting
together some SQL scripts, but let's save some time and do something infinitely
cooler. We are going to use Entity Framework 5.0 to generate the database using
a Code First approach as depicted below:

Before we get on to how to generate the database, a few more
details on the models:

By default, the Entity Framework interprets a
property with ID or classnameID as the primary key. In our case, this means
that BoxArtId will be the primary key for the BoxArt table and RatingId will be
the primary key for the Rating table.

Not pictured in the data model is the navigation
property called Ratings in the BoxArt class.

This navigation property will hold all of the Rating
entities that are related to the BoxArt entity.
This is accomplished by looking up all the rows that contain that
BoxArt’s primary key in the BoxArtId foreign key column in the Rating table.

<o:p />

Navigation properties are defined as virtual to
take advantage of an Entity Framework function called lazy loading.Lazy loading is a design pattern where
initialization of an object is deferred until it is needed.

Since the relationship between BoxArt and Rating
is a one-to-many relationship, the navigation property must be of the type
ICollection.

The main class that coordinates Entity Framework functionality
for a given data model is the database context class.
This is the BoxArtManagerContext class which we are about to create.

Generating the Database using Entity Framework

It is important to mention that the data models, and what
follows, is all being done from within an ASP.NET MVC Web API project. This set-up is advantageous because not only
are we generating our database but we are simultaneously building a
middle-tier, RESTful service layer to facilitate data interaction with our
applications. Let’s generate the
database:

We are going to use the ASP.NET MVC scaffolding
feature to automagically generate controllers for BoxArt and Rating.To start the process, right-click the
Controllers folder and add a new Controller.Using BoxArt as an example, enter the following
information:

Enable Code First migration.

Create test data to seed the database.It will be useful to seed the database with
some default data for testing purposes.This can easily be done by adding the seed method to Configuration.cs.

Add a migration.

Update the database.

Deploy to Azure

I am not going to go in depth on how to deploy to Windows
Azure because it is a straightforward and simple process.That and there are many great tutorials
online such as REST service using Web API.

Be Aware of CORS

CORS, or cross-origin resource sharing, will need to be enabled to enable websites and services to communicate across domains. Cross-domain communication is generally restricted to prevent cross-site forgery attacks. However, is some legitimate cases, this type of communication is warranted. For example, for http://ratemyboxart.azurewebsites.net to exchange data with http://boxart.azurewebsites.net, CORS is required.

Working with the Database

Once deployed to Windows Azure, you will be provided with the server name on which your database resides. This makes it easy to work with the database via Visual Studio or SQL Server Management Studio.

<o:p />

History

First Challenge: Getting Started (04/29/2013)

Signed up for a free Windows Azure trial.

Second Challenge: Build a Website (05/12/2013)

Third Challenge: SQL on Azure (05/26/2013)

Created and deployed SQL Server database using Code First migration.

Created and deployed Web API service to power Rate My Box Art.

License

Share

About the Author

I am a professional software developer by day and an enthusiast software developer by night. When I'm not coding, I enjoy getting high scores in my favorite Xbox games, watching Fightin' Texas Aggie Football, and teaching my two children how to become great software engineers.