Azure Mobile Services for Windows Store app and Android app developers

Article
10/14/2015

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

In this article, you'll learn how to extend an existing Azure Mobile Services-powered Android app to a Windows Store app for Windows 8.

Microsoft offers Azure Mobile Services, a cloud-based database for mobile apps, which includes support for Android apps. Android developers can connect their apps to Mobile Services to store their structured data, use its user authentication tools, and send out push notifications. This service joins others such as Google's Mobile Backend Starter as well as Parse, Appcelerator, StackMob, and others in giving Android developers robust services to power their apps.

One great thing about Mobile Services is its cross-platform support, which includes Windows Store apps, Windows Phone 8, iOS, Android, and even HTML and JavaScript apps on any other platform.

Note The Mobile Services software development kit (SDK) for Android is available for developers who want to integrate Mobile Services into their Android apps.

This article explores extending an existing Mobile Services-powered Android app to a Windows Store app. It assumes that you've already connected your Android app to Mobile Services or that you've already completed the Android version of the Get started with Mobile Services tutorial.

Step 1: Set up your app development environment

In order to develop Windows Store apps, you must install Windows 8.1. Depending on your app development environment, you can install it as a primary operating system, as a dual-boot option, or within a virtual machine.

After you start Windows 8.1, install Microsoft Visual Studio 2013. Microsoft Visual Studio is the IDE that you use to develop Windows Store apps, similar to using Eclipse for Android apps.

To download Windows 8.1 and Visual Studio 2013, go to the Windows 8.1 for Developers page.

Step 2: Create a Windows Store app project

After you start Visual Studio, either create a new project or open an existing project.

The following steps assume that the new project is based on the Microsoft Visual C# Windows Store Blank App (XAML) project template and that you use the database that was created in the tutorial that was previously mentioned.

Step 3: Add a reference to the Azure Mobile Services Managed Client

With your new project open in Visual Studio, on the Project menu, click Add Reference.
In the Reference Manager dialog box, expand Windows, and click Extensions.
Check the Azure Mobile Services Managed Client box, and click OK.

Step 4: Add the Mobile Services client to your app

Let's now connect the Windows Store app to the same data that's powering the Android app.

In the Solution Explorer window, open the project's App.xaml.cs file. At the beginning of this file, add the statement using Microsoft.WindowsAzure.MobileServices;. (This is similar to an import statement that you use in an Android project.)

Add the following code immediately after the beginning of the App class definition.

public static MobileServiceClient mobileService = new MobileServiceClient(
    "INSERT_YOUR_SITE_URL_HERE", 
    "INSERT_YOUR_APPLICATION_KEY_HERE"
);

Sign in to the Azure Management Portal with the same user name and password that you used in the tutorial that was previously mentioned.
Browse to and select your Mobile Services TodoList database.
Click the Dashboard tab.
Replace the preceding code INSERT_YOUR_SITE_URL_HERE with the Mobile Service URL value in the Dashboard.
Click Manage Keys.
Replace the preceding code INSERT_YOUR_APPLICATION_KEY_HERE with the Application Key value in the Manage Access Keys dialog box.

Now you can write code to interact with your Mobile Services client to do things like insert, read, and update records.

Step 5: Add code to insert, read, and update records, and display the results

Define a class that represents an individual record in the database: on the Project menu, click Add Class.
In the Name box, type TodoItem.cs, and click Add.

In the TodoItem.cs file, replace the TodoItem class definition with the following code.

public class TodoItem
{
    public int Id { get; set; }
    public string Text { get; set; }
    public bool Complete { get; set; }
}

To display the results, in the project's MainPage.xaml file, between the opening and closing <Grid> elements, add the following markup, so that it looks like this.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ListView Name="ListItems" ItemsSource="{Binding}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Id}" Padding="20"/>
                    <TextBlock Text="{Binding Text}" Padding="20"/>
                    <TextBlock Text="{Binding Complete}" Padding="20"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

At the beginning of the MainPage.xaml.cs file, add the statement using Microsoft.WindowsAzure.MobileServices;.

Create a new to-do item and then read the existing items: in the MainPage.xaml.cs file, add the following code immediately after the beginning of the MainPage class definition.

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

private async void InsertTodoItem(TodoItem todoItem)
{
    await todoTable.InsertAsync(todoItem);
}

private async void ReadTodoItems()
{
    this.ListItems.Items.Clear();
    items = await todoTable.ToCollectionAsync();
    this.ListItems.ItemsSource = items;
}

Note that the ToCollectionAsync method returns all of the records for this table as a MobileServicesCollection. You can use Language-Integrated Query (LINQ) to only return records whose Complete value is false, using code like this.

private async void ReadTodoItems()
{
    this.ListItems.Items.Clear();
    items = await todoTable
        .Where(todoItem => todoItem.Complete == false)
        .ToCollectionAsync();
    this.ListItems.ItemsSource = items;
}

In the OnNavigatedTo method, call the preceding code by adding code like this.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    InsertTodoItem(new TodoItem { Text = "Fix the front door", Complete = false });
    ReadToDoItems();
}

To update an existing to-do item, add code like this.

private async void UpdateItem(TodoItem item)
{
    await todoTable.UpdateAsync(item);
}

And call it from the OnNavigatedTo method with code like this.

UpdateItem(new TodoItem { Id = 3, Text = "Feed the pets", Complete = true});

Share via