Get started with data in Mobile Services

This tutorial walks you through these basic steps:

1. Download the Windows Phone 8 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

This tutorial requires the Windows Phone 8 SDK running on Windows 8.

Download the projectDownload the GetStartedWithData project

This tutorial is built on the GetStartedWithData app, which is a Windows Phone 8 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 GetStartedWithData sample app from the Developer Code Samples site.

2. In Visual Studio 2012 Express for Windows Phone 8, open the downloaded project and examine the MainPage.xaml.cs file.

   Notice that added TodoItem objects are stored in an in-memory ObservableCollection<TodoItem>.

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

4. In the app, type some text in the text box, then click the Save button.

   

   Notice that the saved text is displayed in the list below.

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, click Install on the Windows Azure Mobile Services package, then accept the license agreement.

   

   This adds the Mobile Services client library to the project.

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

4. 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.

5. In Visual Studio, open the file App.xaml.cs and add or uncomment the following using statement:

   using Microsoft.WindowsAzure.MobileServices;

6. In this same file, 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.

   //public static MobileServiceClient MobileService = new MobileServiceClient( 
   //    "AppUrl", 
   //    "AppKey" 
   //);

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

7. In the file MainPage.xaml.cs, add or uncomment the following using statements:

   using Microsoft.WindowsAzure.MobileServices;
   using Newtonsoft.Json;

8. In this same file, replace the TodoItem class definition with the following code:

   public class TodoItem
   {
       public int Id { get; set; }
   
   
   [JsonProperty(PropertyName = "text")]
   public string Text { get; set; }
   
   
   [JsonProperty(PropertyName = "complete")]
   public bool Complete { get; set; }
   
   
   }

9. Comment the line that defines the existing items collection, then uncomment the following lines:

   private MobileServiceCollection<TodoItem, TodoItem> items;
   private IMobileServiceTable<TodoItem> todoTable = 
       App.MobileService.GetTable<TodoItem>();

   This code creates a mobile services-aware binding collection (items) and a proxy class for the SQL Database table TodoItem (todoTable).

10. In the InsertTodoItem method, remove the line of code that sets the TodoItem.Id property, add the async modifier to the method, and uncomment the following line of code:

    await todoTable.InsertAsync(todoItem);

    This code inserts a new item into the table.

11. In the RefreshTodoItems method, add the async modifier to the method, then uncomment the following line of code:

    items = await todoTable.ToCollectionAsync();

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

12. In the UpdateCheckedTodoItem method, add the async modifier to the method, and uncomment the following line of code:

    await todoTable.UpdateAsync(item);

    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 the textbox, 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.

This concludes the Get started with data tutorial for Windows Phone 8.

Next steps

This tutorial demonstrated the basics of enabling a Windows Phone 8 app to work with data in Mobile Services. Next, consider completing the following tutorial 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, you can also try one of the following Windows Phone 8 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 with Mobile Services.