Using Windows Azure Mobile Services in your apps

image

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.
image_thumb6

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

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

image_thumb14

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.

image_thumb16

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.

image_thumb19

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:
image_thumb22

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:
image_thumb27

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

image_thumb26

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.

image_thumb31

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. Smilefjes

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

image_thumb34

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.
image_thumb43

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

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.
image_thumb48

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

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.
image_thumb37

Open the Item table by clicking the arrow:
image_thumb40

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

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.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Using Windows Azure Mobile Services in your apps

  1. What’s up, yeah this piece of writing is genuinely pleasant and I have learned lot of things from it concerning blogging. thanks.

  2. Ramon says:

    Thanks for another great article. Where else may anyone get that kind of info
    in such an ideal method of writing? I have a presentation next week, and I am at the look for such info.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s