Give your app a backend using Azure Mobile Apps

First published on MSDN on Jan 26, 2016


Written by Gavin Gear , Technical Evangelist

You have just come up with an awesome concept for a cross-platform mobile app. Like most mobile apps these days, you’ll need single sign-on and a way to access and store data in the cloud. Other critical needs: push notifications, offline data, and the ability to scale to millions of users. Ideally, you could write the code for this app in a single language, and share that single implementation across multiple platforms with a common cloud backend. It turns out that Microsoft Imagine includes a cloud solution that makes it easy to do all of these things, it’s called Azure Mobile Apps .

It’s free for students.

If you are a student, there’s great news because you can now get Azure Mobile Apps as part of Microsoft Imagine’s free Azure student offer . If you have an active DreamSpark account, you can start using Azure Mobile Apps today. If you are a student and you don’t have a DreamSpark account, you can sign up here .

Wondering how you can get started with Azure Mobile Apps? Let me walk you through the process of installing the appropriate tools, and then taking a test-drive of Azure Mobile Apps by means of the Azure Mobile Apps Quick Start. It’s actually easier to get started than you may think! This introduction will give you a start toward more comprehensive implementations.

Let’s get things ready.

In order to follow this Azure Mobile Apps tutorial, you’ll need the following:

1. An Azure student offer account .


2. A PC running Windows and Visual Studio 2013 or greater (works great with Visual Studio 2015 Community Edition , which is free).

If you plan to use Xamarin (fully integrated with Azure Mobile Apps Quick Start, but not shown in this article), you’ll need to have the appropriate Visual Studio extensions and packages installed. Xamarin is a cross-platform development toolset that enables you to write apps in C# that can be run on iOS, Android, and Windows devices.

Let’s roll.

Once your Azure account is properly configured, you can login to the Azure Portal and create an Azure Mobile App. Since the Azure Portal is written in straight HTML 5, you can use the browser of your choice. To create the Azure Mobile App, you just click on the “+ New” button, then select “Web + Mobile”, then “Mobile App”. You’ll then populate the appropriate details as shown in the Azure Portal view here:

[caption id="attachment_2361" align="alignnone" width="800"] Click to enlarge[/caption]

Once you have created your Azure Mobile app, it will then show up on your Azure Portal Dashboard (assuming you checked the option to pin to your Dashboard when creating). The Mobile App Settings blade for this project will get launched automatically when the creation of your mobile app completes.

From the Mobile App Settings Blade, the next steps are to click “Quick start”, then select the platform/language for your client app. I chose “Windows (C#)” for the walkthrough in this article:

[caption id="attachment_2371" align="alignnone" width="800"] Click to enlarge[/caption]

At this point, you’ll need to complete three steps in order to get your app running:

1. Create a database: Click on the “Click here to create one” link, then “Add” under “Data Connections”, then populate the details for your database. Click OK in each of the corresponding blades to finish the process.


2. Create the table API. The easiest way to do this is to use the default (Node.js), select the check box acknowledging data overwrite (there is no data yet, so no worries here), then click the “Create TodoItems table” button.


3. Click on the “Download” button from the “Configure your client application” section.

Important notes:

Once you have downloaded the files, be sure to extract them from the ZIP file to a local file location on your computer. If you try and open the solution file in Visual Studio directly from the ZIP file, you will encounter an error.

If you are developing Windows Apps as shown here, you’ll need to enable developer mode .

Here’s the view of my Quick Start code when opened in Visual Studio 2015 Community Edition:

[caption id="attachment_2381" align="alignnone" width="800"] Click to enlarge[/caption]

On your mark, get set, GO.

I changed the default startup project from the Desktop app to the Mobile app, then hit “F5” to run the app and to start debugging. After adding a few “To Do” items to the list, the simulator view looked as follows:



If at this point you re-run the app, you’ll notice the To-Do items re-populate, just like you’d expect with an app that utilizes a cloud backend for data.

Let’s see the DATA.

You can see this data in its raw form if you log back into your Azure Portal after completing these steps. All you need to do is click on your Azure Mobile App (this activates the Settings blade for that app), then click on “Easy Tables”, then click on the table you want to inspect.

Here’s Easy Tables view I saw when clicking on the “TodoItem” table in the Azure Portal:

[caption id="attachment_2411" align="alignnone" width="800"] Click to enlarge[/caption]

You can see all of the entries I added when running the app in the Phone simulator, including ones that I marked complete via the checkboxes. Very cool.

But what if you want to edit the data? One of the ways you can do this is to open the database in Visual Studio. To do that, simply click on “SQL databases” from the left bar on your Azure Portal homepage. If you then click on the database you want to open you’ll be presented with the option to open in Visual Studio as shown here:

[caption id="attachment_2421" align="alignnone" width="800"] Click to enlarge[/caption]

Important note: Be sure to configure your firewall settings on the Azure (server) side to allow Visual Studio to access your database (client side). You’ll need the IP address of your computer in order to make this change:



Once you’ve completed these steps, you’ll be able to view and edit the data in your database using the SQL Server Object Explorer in Visual Studio (included with Visual Studio 2015 Community Edition) as shown here:

[caption id="attachment_2441" align="alignnone" width="800"] Click to enlarge[/caption]

For fun, open the To-Do sample app, refresh the data, then edit one or more values from the dbo.TodoItem table in Visual Studio (“text” column, or Boolean “complete” values). This will automatically sync with your database, and if you hit refresh in the client app, you’ll see the updated values - fun. It’s amazing what you can do with these tools.

In about ½ hour you can get a good comprehensive start with Azure Mobile Apps. Don’t be surprised if you get some crazy ideas about mobile apps and services that you could build with these tools. I couldn’t help but add “To Buy” items to the backend which is very straightforward using Easy Tables. Using the XAML designer in Visual Studio, it was also easy to add “To Buy” items to the app’s view using the “To Do” item XML and code as a template.

Here's a video I put together showing these steps:

What next?

If you have an upcoming Mobile App project, or if you just want to learn something new, you should give Azure Mobile Apps a try. It’s super-easy to get started, and you can easily and rapidly build compelling cross-platform mobile app experiences using these tools. Be sure to sign up for and activate Azure Mobile Apps through Microsoft Imagine’s free Azure student offer .

Next, I think I’ll explore Xamarin further (you can read about the Xamarin student offer here ). It’s fully integrated with Azure Mobile Apps, so I think I’ll check out the Azure Mobile Apps Xamarin Quick Start. At this point I’ve barely scratched the surface of what Azure Mobile Apps can do, and I’m looking forward to exploring more!

The big question is: what are you all going to build with Azure Mobile Apps?

If you want to follow me on Twitter, here’s my handle: @gavingear .

See ya,
Gavin