How to Use Mobile Service in HTML/JavaScript Application

The Windows Azure Mobile Service is a back end tool for mobile applications. It supports various platforms, such as Windows Store, Windows Phone 8, iOS and Android. The Windows Azure Mobile service can also support HTML/JavaScript. This article helps you to get a basic idea of how to use the Windows Azure Mobile Service in HTML/JavaScript applications.

Let us start with a Quick startup project provided by Microsoft. A Quick startup is a simple demo project that can help us to understand how to use the Windows Azure Mobile Service with HTML/JavaScript. So let's start from the Quick startup project.

Login into in the Windows Azure portal and use the following procedure.

This article assumes you already have a Windows Azure account and the mobile service is enabled in your account.

1. Create a new Windows Azure Mobile Service

Click on the +New button from the left corner and select Compute -> Mobile Service and then click on the "Create" button.

The Windows Azure portal popup creates a mobile service wizard when you click the Create button. Windows Azure asks you to enter the mobile service name as shown in the following image:

Select the database options and region for your mobile service and click on the "Next" button.

Once your mobile service is successfully created, the portal will show all your mobile services as shown in the following images.

Ok! We have created a new mobile service successfully. Let's move to our subsequent steps.

1. Quick startup Project

As we all know, the Windows Azure Mobile Service can support many platforms such as Windows Store, Windows Phone 8, iOS, Android and HTML/JavaScript. This article only tells us about the new HTML/JavaScript platform that is recently added to the Windows Azure Mobile Service.

In the image above, we are in the quick startup page where the Windows Azure Mobile Service allows the user to choose their platform. I have selected the HTML/JavaScript Platform.

In the image above, we found 3 quick steps that can allow us to run a HTML/JavaScript sample project.

1. Create Table: In this step the user needs to create a table that can used by the sample project, once you hit the create TodoItem Table button. The Portal will create a TodoItem table in your mobile service. You can check this table by clicking on the data tab(menu).

2. Download and run your app: In this step the user needs to download the Quick startup project that is provided by the Windows Azure portal. Click on the "Download" button and download the project. You will see the following files in the quick startup project.

The Server folder contains some files to setup this project locally. The user should run the file from the server folder corresponding to their OS. I am using Windows OS so I ran the lanch-windwos file to setup this project locally in IISExpress.

Press r and enter the key, you will see IISExpress started. Do not close this Windows and open your browser and request the http://localhost:8000/ page.

Enter the Item name and click on the add button. Your Item will be added to the TodoItem table.

3. Configure your host name: This step is a very important step for any HTML/JavaScript application that uses the Windows Azure Mobile Service. In this step the user must register their website name in the Cross-origin resource sharing (CORS). By default, "localhost" is added by the Windows Azure Mobile Service so your quick startup project can run without making any CORS setting changes. The user can add their website domain name by clicking on the configure tab (menu).

The user can add as many website domain names as needed.

Coming Soon: CURD Operations in HTML/JavaScript using Windows Azure Mobile Service.