Cloudy With a Chance of Mobile: Mvc Framework, Windows Azure and Windows Phone

Interested in having a web site that supports user-specific data? Perfect, use Asp.Net and the built in membership providers. Want to put it in the cloud? Sweet, jump on the Azure bandwagon. Want to easily define your data model and store it?  No worries, EF Code First will make you cry, you love it so much. Want to access that data from Windows Phone? Well, my friend, you’ve come to the right place. I will take you from start-to-finish in creating an application that encompasses all of these pieces:

1. An Asp.Net Mvc 4 web site with a Web API controller to serve up some data. This data will be protected by the built-in Asp.Net membership providers.
2. A local Service Deployment using the Windows Azure SDK.  This will be how we host the Mvc web site & Web API.
3. A Windows Phone 7.1 client that accesses the protected data using the Asp.Net membership provider.

 

Getting Tooled Up

We need to have the right kit in place to make this happen.  Please make sure you have the tools below if you want to follow along:

1. Visual Studio 2010 with SP1 installed
2. An internet connection.  Oh, wait…
3. The latest Azure bits downloaded and installed
4. The Windows Phone 7.1 SDK setup on your machine
5. Laurent Bugnion’s MVVM Light Toolkit

 

Bootstrapping the Projects

I use two instances of Visual Studio to develop in scenarios like this as we’ll need elevated privileges to run the Compute Emulator for Windows Azure and I like to be able to leave my web project running while I work on my Windows Phone client application.

Launch the first IDE in Adminstrative mode.  Create a new project from the “Cloud” templates and select Windows Azure Project.

Next, we’re prompted to add our new role project, we’ll select MVC 4:

Finally, we’ll pick Internet Application from the available templates in the Mvc 4 templates:

Now, simply run the application by pressing F5.  Windows Azure needs a moment to start up, then you’ll see the web site launch. Proceed to register in the site so that you have a valid log in.

Start your second IDE up, pick File –> New Project and navigate to the Silverlight for Windows Phone templates. Pick the vanilla Windows Phone Application project, and when you’re prompted be sure to target Windows Phone 7.1. 

You can quickly run your phone app to get your emulator running by pressing F5.

Next Steps

At this point, though we’re not doing too much that is interesting, we have our two core projects up and ready to go. We created an Mvc 4 web role inside our Azure project and created a user account that we will late use to log in from the phone.  Next, we created the shell of our Windows Phone project that will hold a simple UI to display data that we load from the Mvc site.  With very little effort, we have our two major components in place and will be able to quickly advance our project.

Stay tuned for the next article where I will show you how to define a simple model and expose it via Web API.