Free trial *Internet Service Required
  • On the page (jump to):

Get started with Mobile Services

Windows Store Windows Phone 8 iOS Android HTML

This tutorial shows you how to add a cloud-based backend service to an HTML app using Windows Azure Mobile Services. In this tutorial, you will create both a new mobile service and a simple To do list app that stores app data in the new mobile service. You can view a video version of this tutorial by clicking the clip to the right.

watch the tutorial Play Video 3:51

A screenshot from the completed app is below:

Completing this tutorial is a prerequisite for all other Mobile Services tutorials for HTML apps.

Note

To complete this tutorial, you need a Windows Azure account that has the Windows Azure Mobile Services feature enabled.

Additional requirements

  • This tutorial requires that you have one of the following web servers running on your local computer:

    You can use any web server to host the app, but these are the web servers that are supported by the downloaded scripts.

  • A web browser that supports HTML5.

Create a new mobile service

Follow these steps to create a new mobile service.

  1. Log into the Management Portal.

  2. At the bottom of the navigation pane, click +NEW.

  3. Expand Compute and Mobile Service, then click Create.

    This displays the New Mobile Service dialog.

  4. In the Create a mobile service page, type a subdomain name 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.

    This displays the Specify database settings page.

    Note

    As part of this tutorial, you create a new SQL Database instance and server. You can reuse this new database and administer it as you would 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

    When the password that you supply does not meet the minimum requirements or when there is a mismatch, a warning is displayed.
    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.

Create a new appCreate a new HTML app

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

In this section you will create a new HTML app that is connected 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, click Windows under Choose platform and expand Create a new HTML app.

    This displays the three easy steps to create and host an HTML app connected to your mobile service.

  3. Click Create TodoItems table to create a table to store app data.

  4. Under Download and run application, click Download.

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

  5. In the Configure tab, verify that localhost is already listed in the Allow requests from host names list under Cross-Origin Resource Sharing (CORS). If it's not, type localhost in the Host name field and then click Save.

    Note

    If you deploy the quickstart app to a web server other than localhost, you must add the host name of the web server to the Allow requests from host names list.

Host and run your HTML app

The final stage of this tutorial is to host and run your new app on your local computer.

  1. Browse to the location where you saved the compressed project files, expand the files on your computer, and launch one of the following command files from the server subfolder.

    • launch-windows (Windows computers)
    • launch-mac.command (Mac OS X computers)
    • launch-linux.sh (Linux computers)
    Note

    On a Windows computer, type `R` when PowerShell asks you to confirm that you want to run the script. Your web browser might warn you to not run the script because it was downloaded from the internet. When this happens, you must request that the browser proceed to load the script.

    This starts a web server on your local computer to host the new app.

  2. Open the URL http://localhost:8000/ in a web browser to start the app.

  3. In the app, type meaningful text, such as Complete the tutorial, in Enter new task, and then click Add.

    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 the app.js file.

  4. Back in the Management Portal, click the Data tab and then click the TodoItems table.

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

Next Steps

Now that you have completed the quickstart, learn how to perform additional important tasks in Mobile Services:

Rss Newsletter