A detailed guideline on integrating cloud-based backend to Windows app

This post will give you the detailed insight into how you can integrate the cloud based backend with a Windows app, and for the same, we will make use of the Azure Mobile Services. You will see a new mobile service being created along with a direct to do list for storing the app data in the mobile service. This mobile service will be based on the supported .NET languages and use the Visual Studio for bringing into play the server side logic.

Here are the screenshots of the final app:




Windows Phone Store app
Before starting the tutorial, here are the conditions that must be taken into account:
An Azure Account. If you don't have an Azure account, you can opt for a trial version from  Azure Free Trial.
Visual Studio Professional 2013. A free trial version is available.


Creating the New Mobile Service

Here are the sequence of steps involved:
Sign into the Management Portal
Click on the +New button.
Click on Compute, then Mobile Service, and finally on Create. You will now see the New Mobile Service Dialog.
Now, in this new page that has appeared, you have to select Create a free 20 MB SQL database in the Database box, select .NET in the Backend box, input the subdomain name for the mobile service you are creating in the URL textbox. The name verification will be then done before you proceed, and once you are past that stage, you can proceed to the next page.

You now have the page for Specify database settings in front of you.

Enter the database name in the Name space and also enter the administrator login name and password that will be required to sign into the new SQL Database server. Hit the check button.
And thus, we have now a new mobile service that can be made use of by our mobile apps


Creating a Windows App

We can go back to the Management Portal and follow the simple enough quickstart tour in order to create a new app that has to be integrated with the mobile service we just created. Let's create the app:
Head to the Management Portal and in there, click on Mobile Services. You can see the name of the mobile service just created, select the same.


Now, check out the quickstart tab and in there, go to Choose Platform and then select Windows. You need to expand Create a new Windows Store app.



You will be greeted with 3 straightforward steps required to carry out when you wish to build the Windows app with a connection established to your mobile service.
If you haven't already done so, download and install Visual Studio Professional 2013 on your local computer or virtual machine.
You then need to select a language under Download and run your app and service locally before clicking on Download. With this, you will have a pack downloaded that contains the mobile service project and the sample to do list application that is associated with our mobile service.


Let us See How the App Works in unison with the local mobile service
When you download the mobile service project, the biggest advantage it hands us over with is that it gives us to ability to launch our mobile service right on our compputer system or for that matter, a virtual machine. This makes it easy to debug your service code before you even publish it to Azure.


Now, let's see how the app works with the mobile service running locally.


Navigate to the location of the compressed project files, expand those files and access the solution file using Visual Studio.
Rebuild the project with the keyboard shortcut, F5 and begin with mobile service locally.


When the mobile service starts, you will see a web page appearing.


You are inside the Solution Explorer in Visual Studio. Here, right-click on the client app project and from the options, click on Set as StartUp Project.


Again, press the F5 key for rebuilding.


The app is started, and the connection to the local mobile service instance is made.
In the app, enter any identifiable text and click Save.


With this, a POST request is sent to the local mobile service. There is some data that accompanies this request and it is inputted to the TodoItem table. The mobile service returns all the items that the table contains. The app's second column will display the data.


Publishing the mobile service
Now that we have tested the app against the local mobile service, we will proceed to the stage wherein we have to publish the mobile service to Azure and follow it by launching the app.


Head to the Solution Explorer and in there, right-click on the mobile service project. Click Publish, which will generate the Publish Web dialog box. In there, click Azure Mobile Services.


Log in with your Azure account login name and password and select the mobile service you have created from the Existing Mobile Services before clicking OK.


The publish settings will be directly fetched from Azure.
In order to corroborate that the publishing is done in the right manner, click on Validate connection. After that, click Publish.


A confirmation page appears, thus assuring that the mobile service is now live in Azure.
Now, head to the Shared code project. Access the App.xaml.cs file. In this file, look for the code that has created the MobileServiceClient instance for us. Make use of localhost in order to comment-out the code that has created the client . Also, uncomment the code that made way for client creation using the remote mobile service URL. The code will look something like:

public static MobileServiceClient MobileService = new MobileServiceClient(
            "https://todolist.azure-mobile.net/",
            "XXXX-APPLICATION-KEY-XXXXX");