Windows Azure Mobile Services makes it really easy (almost too easy) to implement services like online leaderboards, services/compute, databases, server side logic and so on that can be used in your apps!

I would recommend everyone to take a look at Windows Azure and the Mobile Services. There is a free trial where you can try it out, or if you are a BizSpark member (free membership), or an MSDN subscriper, you get a lot for free so check out your possibilities. But the cost of this solution ( a simple mobile service with 1gb SQL database) is very cheap.

You can follow this guide to implement Windows Azure Mobile Services in any of your own solutions.

First of all, I needed a Windows Azure subscription. Since I had one from before, it was just about signing in at manage.windowsazure.com/.

Next, I needed a mobile service that my app could use. When logged in to the portal I was presented with my Azure Account, an overview and the possibility to add a new service.

Click the New button.

A new menu will pop up. Select Compute –> Mobile Service –> Create to start a wizard where you can implement your mobile service.

The wizard will take you through everything you need to set it up:

In the first screen, set the URL to something spesific for your project, like the name of the game. You can create a new database (if you dont have one from before), select your supscription (if you have multiple like I do) and what region you want your service to be in.

Hit the tick to create your new service and database. It will take a few seconds for Azure to set everything up for you but THAT’S IT for creating a new service and a database (no need to install and set this up for yourself and spend a day on doing that).

Now, when the service is ready, you can see it in the overview, or in the Mobile Services tab.

Click on the arrow next to the name of the newly created service to start confiuring it and implement it.

You will be presented with a screen like this:

Now, I already had my app created so I clicked on the “Connect an existing Windows Store app”.

A short list of steps that you can follow to implement everything will be shown:

The first is installing the SDK. Click the link and install what you need.

The next thing you need is to Add the Windows Azure Mobile Services Javascript Client extention to your project in Visual Studio 2012. I chose JavaScript here because my solution is JavaScript and HTML5 based.

To do this, just add a reference like you normally do in Visual Studio.

Then I added the client object that is used to invoke our Mobile Service currently running in the cloud.

var client = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient( “https://yoursite.azure-mobile.net/”, “your own key” );

That’s what you need in your app in order to invoke whatever you have in your Mobile Service.

Now, we need a table in our SQL database that will contain our data.

Click the “Create Item Table” button and a new table is created.

Now, let’s change the table so it fits our needs. Go to the Databases tab from the main overview of the Azure Portal.

Press the arrow of your databse to go to the database tools. From there, press Manage.

Now you have to log in to your database. Enter the creadentials you proveded when you created the database and log in.

When in, click on the Design tab and select the Item table you created above.

Change the table so it looks like this, but make sure it fits your needs.

Press Save! We are now ready to invoke our mobile service. Let’s just take a quick look at it just so you know where you can find it.

From the Mobile Services project page in Azure, find the Data tab and click it.

Open the Item table by clicking the arrow:

Click on the Scripts tab to see all the scripts that are available for this table.

You can also add functionality here. Select Insert or Read or Update or Delete and change the code based on your needs (You might want Read() to only return X number of results, sorted in one way ++).

Ok, let’s add data to this table. Open your solution in Visual Studio 2012 and add the two fucntions below (modify to make it fit your table in Azure):

The getScoreBoardfromAzure funtion gets all results that fits the current GameMode (could be a spesific Level also), ordered by Score, and take the top 10. Once this function is done, it adds the results to a list.

   1: getScoreBoardFromAzure: function () {

   2:     var _that = this;

   3:     this.scoreTable.where({ GameMode: this.gameMode })

   4:         .orderByDescending("Score").take(10)

   5:         .read()

   6:         .done(function (results) {

   7:             _that.scoreItems = new WinJS.Binding.List(results);

   8:         });

   9: },

The insertScoreToAzure function adds an item to the table in Windows Azure. Once a new entry is added, update the table in your local client.

   1: insertScoreToAzure: function (scoreItem) {

   2:     var _that = this;

   3:     this.scoreTable.insert(scoreItem).done(function () {

   4:         _that.getScoreBoardFromAzure();

   5:     });

   6: },

Go to the code where you want a new entry to Windows Azure to be added and call the function above like this (change so it fits your table):

   1: this.insertScoreToAzure({

   2:     Name: this.playerName,

   3:     Score: this.score,

   4:     GameMode: this.gameMode

   5: });

Go back to Windows Azure and see your new data in action!

Make sure to crate a screen that renders the content of the list that contains the data the server returns to you when needed, or have a seperate page show it, or the snap view mode of the game.

So, this is how I imlemented the first version of my Online Leaderboards hosted in Windows Azure for Lumilight.