Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


24. April 2014

 

This post actually came about by accident.  I’ve been playing around with Telerik’s recently open sourced Kendo UI suite and I found myself needing a web back end.  Of course I could have used my own server, but every time you do something like that you open up another potential security concern.  Ages ago I did an HTML5 tutorial where I used a free version of Heroku Node hosting and a CouchDB back end, but truth is, it was kindof a pain in the ass.  This time I decided to take a look at the state of Azure and see if it was an appropriate option.

 

So what exactly is Azure… well, that’s a confusing thing to answer.  Basically it’s Microsoft’s ____________ as a service offering.  In the ___________ you can insert the words platform, database, cloud, etc.  Basically it’s a number of cloud based offerings, from straight VM based hosting like Amazon’s EC2, to a cloud based SQL server.  What we are most interested here is “Mobile”, which is a scalable back end for mobile software and websites.  This is a way for you to deploy your code to the cloud and let someone else worry about the infrastructure, scaling, backups, etc.  It is most similar to solutions like Heroku and Google App Engine, it straddles the point between running your own servers and using a prebuilt gaming solution.

 

This article looks at Azure for smaller mobile or HTML5 games.  Things like scoreboards, matchmaking, cloud saves, that kind of thing.  If you are looking at creating a server heavy game such as an MMO you need to look elsewhere, like here.

 

So, why Azure Mobile?

  • no server to maintain
  • easy scaling
  • a free tier is available for just getting started
  • it’s pretty cheap ( relative term of course )
  • it’s Microsoft.  They’ve literally spent billions creating Servers. Bandwidth and uptime should never be an issue
  • it’s not Google.  Every time I use a Google technology like App Engine, I want to punch a donkey
  • JavaScript and now, C# backends
  • Visual Studio tooling support
  • Authentication and Notifications built in ( Google, Twitter, MS, Facebook, etc… ).  Normally a huge pain point
  • As hard as it is to believe, they are probably better at security than you

 

Why not?

  • JavaScript/C# only… want Rails for example, Mobile isn’t for you
  • Can be confusing as hell.  Documentation isn’t as good as it should be
  • Visual Studio…  some people hate it.  It’s clearly easiest working in VS, but VS can be a daunting beast
  • It’s Microsoft, for some people this is a huge negative.
  • Less control

 

So… Costs?

 

First thing you have to head over to http://azure.microsoft.com/ and sign up.  A bit of a warning, you need to sign up and give a valid credit card, but you don’t have to pay anything.  When prompted select a Pay As You Go plan.  Oh yeah, costs, like talk about that for a minute:

 

image

 

Oddly enough, changing the region has no effect on the price.  So basically you can start for free for up to 1/2 million calls per month from 500 devices and a total of 20MB of data.  At the free tier you can have up to 10 different “services”, which considering a service can have tons of API calls, isn’t really a major limit.

When you jump into the “pay” tier, you are looking at 27$ a month per “unit”.  A unit is a theoretical computing unit, for which I couldn’t for the life of me find the definition of ( in Amazon, it is strictly defined as for example 1x 1.7ghz core, 768MB RAM, etc… ) anywhere.  API calls are tripled up to 1.5M per unit.  As you can see, the BASIC tier is the first one that allows you to start scaling up performance as needed.  So if your site is getting slammed, you can crank the processing power up to 6X the base.  Perhaps the most important aspect is there is no longer any device limits… so if you have 10 users or 10 million, same price for you.  Standard basically 10X’s the resources but at about 8X the price.

 

So, what about data costs?  20MB is obviously a pretty small amount, what’s this cost?  This is pretty straight forward as well:

 

image

 

So basically > 20MB and < 100MB is $5.27 a month.  Then another $5.27 to raise that cap to a GB, then basically a lowering amount for each additional GB as you add more, eventually settling at about 1$ a GB a month.  Trying to do direct pricing comparison to Amazon is tricky, as the bill in a completely different manner.  For example, storage for their RDS MySQL hosting is only 12.5 cents a GB however you pay for processing, transactions, etc.  Frankly it was the confusion of Amazon pricing that lead me to choose SoftLayer ages ago.

 

Creating a Mobile Services service

 

Everything is managed from the Azure portal and for the most part it’s pretty straight forward.  Its located at http://manage.windowsazure.com

image

 

All your various Azure services, websites, databases, etc… are available down the right hand side.  For now we just care about Mobile Services.

To get started, Click the Mobile Services tab then the + NEW in the bottom left corner.

image

 

Now simply click Create

image

 

The process is about as easy as it gets.  You need to select a unique ( across Azure, not just your projects ) prefix for the URL.  The key question is what kind of Backend you want, JavaScript or .NET.  I personally like .NET so that is what I am going with.

image

 

Finally you configure your database settings and then you are done:

image

 

Enter Visual Studio

 

Now head back to the Mobile Services tab if it doesn’t take you there automatically.  Now you want to select an App type ( it really doesn’t matter ), then download the project file.

 

image

 

The download file is simply a Visual Studio solution coupled with a NuGet install.  Extract the archive then double click the sln file to open it in Visual Studio.  Don’t worry, this works fully with the free version of Visual Studio if that’s what you’ve got.

It should look something like this:

image

 

Don’t worry, it’s nowhere near as complicated as it looks.  By default the project comes with a working value TodoItem.  You can go ahead and run your Mobile Service, it works 100% locally, which is kinda cool.  Press F5 and you will see:

image

 

Click Try it out and you will see the scaffolding it created for you:

image

Pretty cool.  Keep in mind, HighScore was created by me, so you wont have that. 

 

Mobile Services works just like any typical RESTful service.  You make a request using URLs, for example http://localhost:51289/tables/TodoItem (your port number will vary!) returns:

image

While http://localhost:51289/tables/TodoItem/1 returns the TodoItem with the id 1, like so:

image

Of course a complete description of REST is wayyyyy beyond the scope of this tutorial.  For more details IBM did a pretty good job explaining them, but there are hundreds of similar documents on the web.

 

Finally some freaking coding

 

Now let’s add our own service.  First let’s create a Controller.  A controller is basically what maps a URL to an action.  In your solution, right click the Controllers folder, select Add and Controller, like so

image

 

Select Web API 2 Controller – Empty

image

Then click Add.

 

In the dialog, name it.  This is going to be about the easiest controller you’ve ever seen in your life.  The Hello World of web services.

image

Now let’s look at some code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace arghService.Controllers
{
    public class HelloController : ApiController
    {
        public string Get()
        {
            return "Hello World from GET request";
        }

        public string Post()
        {
            return "Hello world from POST request";
        }
    }
}

 

Now if you request /api/Hello/ either via POST (form) or GET (url), it will return a Hello string.

 

Of course, this example isn’t really all that useful, let’s try and create a more useful service, a simple high score board.  First we need a datatype to store our highscore’s in.  Simply right click the Models folder and select Add->Class…

image

 

Name it HighScore.cs and click Add.  Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace arghService.Models
{
    public class HighScore
    {
        public int Id { get; set; }
        public int Score { get; set; }
        public string Name { get; set; }
    }
}

 

Now add a new Controller, just like before.  This time call it HighScoreController.cs.  Let’s take a look at some code:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using arghService.Models;
using Microsoft.WindowsAzure.Mobile.Service.Security;

namespace arghService.Controllers
{

    public class HighScoreController : ApiController
    {
        public static List<HighScore> scores = new List<HighScore> {
            new HighScore {Id=1,Name="Mike",Score=42},
            new HighScore {Id=2,Name="Bob",Score=43}
        };

        protected override void Initialize(System.Web.Http.Controllers.HttpControllerContext controllerContext)
        {
            base.Initialize(controllerContext);
        }

        public IEnumerable<HighScore> GetAllHighScores()
        {
            return scores;
        }


        [HttpGet]
        public IHttpActionResult GetHighScoreByName(string name)
        {
            var score = scores.FirstOrDefault((s) => s.Name == name);
            if (score != null)
                return Ok(score);
            return NotFound();
        }

        public IHttpActionResult PutHighScore(HighScore highScore){
            scores.Add(highScore);
            return Ok();
        }
    }
}

 

Run this code and then in the generated help page you will now see:

image

Click the PUT api/HighScore link and you can test your new service out clicking the Try This Out link.

image

 

Now try out the GET api/HighScore link and you will see your new entry in the results:

image

 

So there you go, an ultra simple REST web service exposing a high score list.  Granted, the code is pretty awful.  It’s not thread safe, it has no persistence when the server ends, no security, etc.  But it illustrates how simple the basics actually are.

 

Going Live

 

Now that you’ve got your service working locally, its time to deploy to Azure.  Fortunately it’s as simple as right clicking your project and selecting Publish:

image

 

To configure your publish profile, you can download this from the Azure Mobile Services portal.  In the Dashboard tab, select Download publish profile.

image

 

And now your Azure service is online, assuming there were no errors.  Mine for example is at http://argh.azure-mobile.net/.  Now here is one of the infuriating parts of dealing with Microsoft…  no matter how far I search, I cant figure out the authentication being requested here if you want to access the generated HTML5 scaffolding.  Fortunately it shouldn’t matter at this point, as you should only be accessing your service from code at this point.

 

 

Let’s look at calling our service in Fiddler.

Here is a request:

image

And here is the response:

image

 

Woot!

 

Other nice things

 

There are a few other perks to using Azure…  first is the out of the box authentication options:

image

 

Writing OAuth code is frankly a bit of a pain in the ass, so its nice to see Microsoft have taken care of it for you.  So if you want your users to authenticate against Twitter, Facebook, Google, etc… it’s incredibly simple.

 

The Database.  We never each touched on the SQL side of Azure and it makes your life pretty easy.  Basically it works just like the Azure project did, you download a local project to work and test with, then deploy it back to Azure:

image

 

You have a standard SQL Connection string you can connect with, so you can treat an Azure database just like any other local or remote DB.

 

Push Notifications.  Just like they have made authenticating to multiple services easy, so have they done with push notifications:

image

Windows, Windows Phone, Apple and Google Notification are all supported.

 

Automatic scaling…

image

While not supported on the free tier, you can easily set up your service to scale up when needed, or perhaps more important, to not scale up.

 

 

All told, Azure is a pretty impressive service but needs better documentation.  You spend a lot of time trying to work out things that should be extremely simple ( not what account to log in with… ), but what is there is pretty intuitive.  The scope of Web API ( the library used for actually writing the code ) is massive and again, could use some better documentation.  Normally MSDN is a bastion of information, but in this case, the pickings are pretty slim.

 

From my experiences, this is vastly more polished than Amazon’s offerings… or at least, easier.  That said, Amazon has an entire ecosystem built over their offerings that provide that polish for you.  Google…  well it’s just crap frankly.  Besides after they pulled this and with their habit of killing of popular products rather suddenly, I wouldn’t dream of using their services personally.

General, Programming ,

blog comments powered by Disqus

Month List

Popular Comments