Azure Mobile Service with Windows Phone

Are you a Windows Phone or Windows Store App developer?
If yes, then this is for you.

When we create an app, we try to store as much possible data on the phone. But with the advancement of data services, it is now easy to store the data on the services. But the question comes as What is Azure Mobile Services and Why do we need it?

What is Azure Mobile Services and Why do we need it?
As stated in the documentation, it allows to add a cloud backend to your app in minutes with the following features:

  • Host a .NET or Node.js web API with 24×7 monitoring and management
  • Use single sign-on with Active Directory, Facebook, Twitter, and Google
  • Push notifications to individual users and dynamic audience segments
  • Store data in SQL, Table Storage, and MongoDB
  • Access on-premises systems, Office 365, and SharePoint
  • Use cloud-based sync to build apps that work offline

How to create Azure Mobile Service? Please note we are going to make use of the .Net backend and Visual Studio.

Step 1: Open the Azure Management Portal and sign in with your Microsoft Live Account.

Step 2: From the left pane, select the third item, Mobile Services. Here you will see your existing Mobile Services, if any.

Step 3: We will try and create the Mobile Services from within Visual Studio.

Step 4: Open Visual Studio and click on File -> New -> Project

AMS1

Project Template

Step 5: Select Cloud from the Left Pane and then select Azure Mobile Service on the right and click OK

Step 6: Once the project is created, you will notice that the project is mostly making use of Web API. This will create all the methods required for CRUD operations.

AMS2

Sample Files

Step 7: In the project, you will get a demo template for a Todo Application. You can go ahead and create Models and Controllers as per your choice as it is done for the Todo Sample.

Step 8: After adding the respective Models and Controllers, you can go ahead and publish the Mobile Service on cloud.

Step 9. But wait, if you want to debug it, you can always do that before publishing. Remember this is a normal MVC Web Application. So our old friend from Keyboard still holds good. So let’s go ahead and press F5

Step 10: If everything goes well, then you will see a page with a smiley. Something like this.

Azure Mobile Service

Azure Mobile Service

Step 11: Now that the Mobile Service is created, you can always play around with it after clicking on the try it out link.

Step 12: It presents with a clean and simple UI showing all the methods available for Rest Calls.

API Documentation

API Documentation

Step 13: If you want to test the Rest Calls, you can click on the links and it will easily allow you to test all the operations. But we are here to go to the next step in connecting this service with a Windows Phone App.

Step 14: Assuming that you have an existing Windows Phone App or you have just created a new Windows Phone App, we will go ahead and open the project.

Step 15: In order to make use of our new Azure Mobile Service, there are some pre-requisites. You have to install Windows Azure Mobile Services package using NuGet.

Step 16: Once installed, we need to add just one line and our App is connected with the Mobile Services. For this open the App.xaml.cs and add this line after the

public partial class App : Application
{
    // Use this when trying to debug locally
    public static MobileServiceClient MobileService = new MobileServiceClient("http://localhost:23846/");
    // Use this when deployed on cloud
    //public static MobileServiceClient MobileService = new MobileServiceClient("", "");
    ...
}

Step 17: Now that our App is ready to make use of Azure Mobile Service, we have use this Code to access Azure Mobile Service

public partial class MainPage : PhoneApplicationPage
{
    private MobileServiceCollection items;
    private IMobileServiceTable speakerTable = App.MobileService.GetTable();

    // Get list of items from the database using AMS
    private async void RefreshCandidateItems()
    {
        items = await speakerTable.ToCollectionAsync();
        ListItems.ItemsSource = items;
    }

    // Insert item to database using AMS
    private async void InsertTodoItem(Speaker speaker)
    {
        await speakerTable.InsertAsync(speaker);
        items.Add(speaker);
    }
    ...
}

Step 18: You can now publish the Azure Mobile Service and get the Application Key.

Step 19: Update the Azure Mobile Service Client in the App and update the Mobile Service Url and Application Key.

Step 20: You App is now successfully connected with the Azure Mobile Service.

Happy Coding!!! 🙂