Windows Azure Mobile Services – Create Mobile Service

This post is part of the series “Windows Azure Mobile Services”; make sure to read the introduction.

This post shows how to add a cloud-based backend service to a Windows 8 app using Windows Azure Mobile Services. We will create both a new mobile service and a simple “To do list” app that stores app data in the new mobile service.

A screenshot from the completed app is below

In this post, we’ll be using a naming convention of XXXYYY, where XXX will be replaced with your unique initials and YYY will be replaced with an abbreviation representing the function of a component.

Task 1- Create a new mobile service

Thanks to http://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started/

Follow these steps to create a new mobile service.

  1. Log into the Windows Azure Management Portal and navigate to Mobile Services.
  2. Click the +New button then click Mobile Service, Create. Expand Mobile Service, then click Create. This displays the New Mobile Service dialog.
  3. In the Create a mobile service page, type a subdomain name (XXXToDoList) for the new mobile service in the URL textbox and wait for name verification. Once name verification completes, click the right arrow button to go to the next page.

    Note: Make sure the URL text is in lower case, or you will get errors connecting to your site.

  4. This displays the Specify database settings page.

    Note: We created a new SQL Database instance and server. We can reuse this new database and administer it as with any other SQL Database instance. If you already have a database in the same region as the new mobile service, you can instead choose “Use existing Database” and then select that database. The use of a database in a different region is not recommended because of additional bandwidth costs and higher latencies.

  5. In Name, type the name of the new database, then type Login name, which is the administrator login name for the new SQL Database server, type and confirm the password, and click the check button to complete the process.


Note: We recommend that you make a note of the administrator login name and password that you specify; you will need this information to reuse the SQL Database instance or the server in the future.

You have now created a new mobile service that can be used by your mobile apps.

Task 2 – Create a new app

Once you have created your mobile service, you can follow an easy quick start in the Management Portal to either create a new Windows Store app or modify an existing app to connect to your mobile service.

  1. In the Management Portal, click Mobile Services, and then click the mobile service that you just created.
  2. In the quickstart tab, expand Create a new Windows 8 application.



This displays the three easy steps to create a Windows 8 app connected to your mobile service.

  1. If you haven’t already done so, download and install Visual Studio 2012 Express for Windows 8 and the Mobile Services SDK on your local computer or virtual machine.

This downloads the project for the sample “To do list” application that is connected to your mobile service. Save the compressed project file to your local computer, and make a note of where you save it.

Task 3 – Run your app

  1. Browse to the location where you saved the compressed project files, expand the files on your computer, and open the solution file in Visual Studio 2012 Express for Windows 8.
  2. Press the F5 key to rebuild the project and start the app.
  3. In the app, type meaningful text, such as Create a new app, in the Insert a TodoItem textbox, and then click Save.

This sends a POST request to the new mobile service hosted in Windows Azure. Data from the request is inserted into the TodoItem table. Items stored in the table are returned by the mobile service, and the data is displayed in the second column in the app.

Note: You can review the code that accesses your mobile service to query and insert data, which is found in either the MainPage.xaml.cs file (C#/XAML project) or the default.js (JavaScript/HTML project) file.

  1. Back in the Management Portal, click the Data tab and then click the TodoItems table and observe that the data has been successfully stored


This lets you browse the data inserted by the app into the table.

Task 4 – Explore your app code

In this step we explore To do list application code and see how simple the Windows Azure Mobile Services Client SDK makes it to interact with Windows Azure Mobile Services.

  1. Return to the downloaded To do list application Visual Studio 2012
  2. In solution explorer expand the references folder and show the Windows Azure Mobile Services Client SDK reference.
  3. Open default.js under js folder. This is the key Javascript function provided by the Mobile Services client SDK that provides a way for your application to interact with Windows Azure Mobile Services. Locate the portion of code where a new MobileServiceClient class is instantiated. The first parameter in the constructor is the Mobile Service endpoint and the second parameter is the Application Key for your Mobile Service.

var client = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient( “https://synctodolist.azure-mobile.net/”,
KHXjisONGAfwMULCPcLKzqxbuAewag93 “ );

  1. Below the previous code, you can observe how the mobile service client is then used for Inserts, Updates, Reads and Deletes:
  • The source creates a handle for operations on a table

var todoTable = client.getTable(‘TodoItem’);

  • Performs an Insert

var insertTodoItem = function (todoItem) { // This code inserts a new TodoItem into the database. When the operation completes
// and Mobile Services has assigned an id, the item is added to the Binding List

todoTable.insert(todoItem).done(function (item) {
todoItems.push(item);
}); };

  • Performs an Update

var updateCheckedTodoItem = function (todoItem) { // This code takes a freshly completed TodoItem and updates the database. When the MobileService // responds, the item is removed from the list

todoTable.update(todoItem).done(function (item) {
todoItems.splice(todoItems.indexOf(item), 1);
}); };

  • Performs a Read

var refreshTodoItems = function () { // This code refreshes the entries in the list view be querying the TodoItems table.
// The query excludes completed TodoItems

todoTable.where({ complete: false })
.read()
.done(function (results) {
todoItems = new WinJS.Binding.List(results);
listItems.winControl.itemDataSource = todoItems.dataSource;
}); };

About the Author

Dany Hoyek
I am a Computer and Communication Engineer and Consultant. I have been leading, developing and managing millions of dollars worth of software development projects.