Get started with data in Mobile Services

This topic shows you how to use Windows Azure Mobile Services to leverage data in a Windows Store app. In this tutorial, you will download an app that stores data in memory, create a new mobile service, integrate the mobile service with the app, and then login to the Windows Azure Management Portal to view changes to data made when running the app.

This tutorial walks you through these basic steps:

1. Download the Windows Store app project
2. Create the mobile service
3. Add a data table for storage
4. Update the app to use Mobile Services
5. Test the app against Mobile Services

Download the projectDownload the GetStartedWithData project

This tutorial is built on the GetStartedWithData app, which is a Windows Store app. The UI for this app is identical to the app generated by the Mobile Services quickstart, except that added items are stored locally in memory.

1. Download the JavaScript version of the GetStartedWithData sample app from the Developer Code Samples site.

   

2. In Visual Studio 2012 Express for Windows 8, open the downloaded project, expand the js folder and examine the default.js file.

   Notice that added TodoItem objects are stored in an in-memory List object.

3. Press the F5 key to rebuild the project and start the app.

4. In the app, type some text in Insert a TodoItem, then click Save.

   

   Notice that the saved text is displayed in the second column under Query and update data.

Create mobile serviceCreate a new mobile service in the Management Portal

Add a new tableAdd a new table to the mobile service

To be able to store app data in the new mobile service, you must first create a new table in the associated SQL Database instance.

1. In the Management Portal, click Mobile Services, and then click the mobile service that you just created.

2. Click the Data tab, then click +Create.

   

   This displays the Create new table dialog.

3. In Table name type TodoItem, then click the check button.

   

   This creates a new storage table TodoItem with the default permissions set, which means that any user of the app can access and change data in the table.

   Note

   The same table name is used in Mobile Services quickstart. However, each table is created in a schema that is specific to a given mobile service. This is to prevent data collisions when multiple mobile services use the same database.

4. Click the new TodoItem table and verify that there are no data rows.

5. Click the Columns tab and verify that there is only a single id column, which is automatically created for you.

   This is the minimum requirement for a table in Mobile Services.

   Note

   When dynamic schema is enabled on your mobile service, new columns are created automatically when JSON objects are sent to the mobile service by an insert or update operation.

You are now ready to use the new mobile service as data storage for the app.

Update the appUpdate the app to use the mobile service for data access

Now that your mobile service is ready, you can update the app to store items in Mobile Services instead of the local collection.

1. In Solution Explorer in Visual Studio, right-click the project name, and then select Manage NuGet Packages.

2. In the left pane, select the Online category, select Include Prerelease, search for WindowsAzure.MobileServices.WinJS, click Install on the Windows Azure Mobile Services for WinJS package, then accept the license agreement.

   

   This adds the Mobile Services client library to the project.

3. In the default.html project file, add the following script reference in the page header:

   <script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>

4. In the Management Portal, click Mobile Services, and then click the mobile service you just created.

5. Click the Dashboard tab and make a note of the Site URL, then click Manage keys and make a note of the Application key.

   

   You will need these values when accessing the mobile service from your app code.

6. In Visual Studio, open the file default.js, uncomment the code that defines the mobileService variable, and supply the URL and application key from the mobile service in the MobileServiceClient constructor, in that order.

   This creates a new instance of MobileServiceClient that is used to access your mobile service.

7. Uncomment the following line of code:

   var todoTable = mobileService.getTable('TodoItem');

   This code creates a proxy object (todoTable) for the SQL Database TodoItem.

8. Replace the InsertTodoItem method with the following code:

   var insertTodoItem = function (todoItem) {
       // Inserts a new row 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);
       });
   };

   This code inserts a new item into the table.

9. Replace the RefreshTodoItems method with the following code:

   var refreshTodoItems = function () {
       // This code refreshes the entries in the list by querying the TodoItems table. 
       todoTable.read().done(function (results) {
           todoItems = new WinJS.Binding.List(results);
           listItems.winControl.itemDataSource = todoItems.dataSource;
       });
   };

   This sets the binding to the collection of items in the todoTable, which contains all completed items returned from the mobile service.

10. Replace the UpdateCheckedTodoItem method with the following code:

    var updateCheckedTodoItem = function (todoItem) {
        // This code takes a freshly completed TodoItem and updates the database. 
        todoTable.update(todoItem);
    };

    This sends an item update to the mobile service.

Now that the app has been updated to use Mobile Services for backend storage, it's time to test the app against Mobile Services.

Test the appTest the app against your new mobile service

1. In Visual Studio, press the F5 key to run the app.

2. As before, type text in Insert a TodoItem, and then click Save.

   This sends a new item as an insert to the mobile service.

3. In the Management Portal, click Mobile Services, and then click your mobile service.

4. Click the Data tab, then click Browse.

   

   Notice that the TodoItem table now contains data, with id values generated by Mobile Services, and that columns have been automatically added to the table to match the TodoItem class in the app.

5. In the app, check one of the items in the list, then go back to the Browse tab in the portal and click Refresh.

   Notice that the complete value has changed from false to true.

6. In the default.js project file, replace the existing RefreshTodoItems method with the following code that filters out completed items:

   var refreshTodoItems = function () {                     
       // More advanced query that filters out completed items. 
       todoTable.where({ complete: false })
          .read()
          .done(function (results) {
              todoItems = new WinJS.Binding.List(results);
              listItems.winControl.itemDataSource = todoItems.dataSource;
          });            
   };

7. In the app, check another one of the items in the list and then click the Refresh button.

   Notice that the checked item now disappears from the list. Each refresh results in a round-trip to the mobile service, which now returns filtered data.

This concludes the Get started with data tutorial.

Next steps

This tutorial demonstrated the basics of enabling a Windows Store app to work with data in Mobile Services. Next, consider completing one of the following tutorials that is based on the GetStartedWithData app that you created in this tutorial:

• Validate and modify data with scripts
  Learn more about using server scripts in Mobile Services to validate and change data sent from your app.

• Refine queries with paging
  Learn how to use paging in queries to control the amount of data handled in a single request.

Once you have completed the data series, try one of these other tutorials:

• Get started with authentication
  Learn how to authenticate users of your app.

• Get started with push notifications
  Learn how to send a very basic push notification to your app.