First you need to sign in or sign up for Microsoft Azure. If you do not know what Azure is or do not have an account, head on over to sign up page for a free trial.
Once you are all set up, login to your Management Port on Microsoft Azure.
Once in click NEW-> COMPUTE -> MOBILE SERVICES -> CREATE to start the Mobile Service wizard.
Once the service and database has been created we can go ahead and create some tables and configure our service.
In order to add tables you will need to find you Mobile Service that you just created. Open it and click on the navigation link called “DATA“.
Once the table is created we need to add a few columns. If you recall from our Data Collection in App Studio, we needed Item, Description, Price and Image. We will use those but also add MenuType. MenuType will be our “Foreign key” that will distinguish the data record for the type of the item it is. (Apps, Entres, Desserts..).
Click on Columns to add columns to your table.
I connected to my azure account within Visual Studio 2013 using the connection settings found in the Azure portal.
From within Visual Studio I am able to add a few rows to my table.
We are done.
Connecting to Azure
In order to access our Mobile Service we need to have a client as well as our keys. You can find that on the Mobile Service page under either Dashboard or if you still have the startup screen, you can find the URL and the API Key.
Open up your solution in Visual Studio 2013 and lets do some setup first.
As you may remember, we generated a Universal App for Windows. In the solution we have a few projects, AppStudio.Windows, AppStudio.WindowsPhone, AppStudio.Shared and we also have 2 Portable Class Libraries (PCL’s).
When I first started to build the Azure example, I put everything in the Shared project. I loaded the client in the App.xaml.cs and created a MenuItem class and called the client from the EntresPage.xaml. This works. But you don’t get all of the inherited features of the base view models.
The first step is to add the Microsoft Azure Mobile Services pack.
In order to do this right click on the AppStudio.Data portable project and choose Manage NuGet Packages.
Search for Windows Azure or Mobile Services. You want to install the Windows Azure Mobile Services SDK.
Before we jump into the code, lets recap what we want to do. Right now the project is using a Data Collection that is limited by 40 rows. The way our application works is we have many menu categories (Entres, Desserts, Apps etc.) and each has to have its own Data Collection. We are changing that to have just 1 collection and use our own defined data table on Azure.
If we look at the project we see the Model View ViewModel pattern and we will be using that for our examples. I am going to change the Entres page for now but you can apply this to all of the pages.
Lets open the WindowsPhone project and under Views, open EntresPage.xaml.cs. Find the OnNavigatedTo method. There should be a call to LoadItemsAsync. This is the main method that we will be changing to point to our Azure table, not the one that is included in App Studio.
Before we change that we need to add models, datasource and modify the xaml.
MenuItemSchema
Copy the EntresSchema.cs that is located in AppStudio.Data.DataSchemas and rename it to MenuItemSchema.cs. Make sure you change the class name to MenuItems(remember, this is the name of your table you created in Azure).
We only need to add one more property called MenuType. Do that along with the accessor methods. Be sure to add that to in the GetValue method as well.
IAzureDataProvider
The next step is to create an interface for our AzureDataProvider (which we need to create still).
Add a file to the Common directory and name it IAzureDataProvider.cs
namespace AppStudio.Data
{
public partial interface IAzureDataProvider<T> where T : AppStudio.Data.BindableBase
{
Task<System.Collections.Generic.IEnumerable<T>> Load(string filter);
}
}
Now we are ready for our AzureDataProvider.cs
AzureDataProvider
Create a class in the DataProvider directory called AzureDataProvider.cs
This class will have our mobile client connection as well as our Linq query to get the table.
The first couple of lines are the connection to our mobile client. That code is given to us from the Azure Portal on the Mobile Services page.
The next 2 lines are our MobileServicesCollection, that is where our data will be stored. The other line is our “table” which we will query from.
The Load method is just that. It takes the MobileServices Table and performs a query against it to find matching records which will be returned to the calling method.
using System;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Collections.Generic;
using Microsoft.WindowsAzure.MobileServices;
namespace AppStudio.Data
{
public class AzureDataProvider : IAzureDataProvider<MenuItems>
{
public static MobileServiceClient MobileService = new MobileServiceClient(
"https://URL.azure-mobile.net/",
"XXXXXXXXXXXXXXXXXX"
);
private MobileServiceCollection<MenuItems, MenuItems> _data;
private IMobileServiceTable<MenuItems> dataTable = AzureDataProvider.MobileService.GetTable<MenuItems>();
public async Task<IEnumerable<MenuItems>> Load(string filter)
{
if (_data == null)
{
try
{
_data = await dataTable
.Where(menuItem => menuItem.MenuType == filter)
.ToCollectionAsync();
}
catch (MobileServiceInvalidOperationException ex)
{
AppLogs.WriteError("AzureDataProvider.LoadData", ex.ToString());
}
}
return _data;
}
}
}
AzureDataSource
Lets move to the DataSources directory and take the EntresDataSource.cs and copy it and rename it to AzureDataSource.cs. Remember to rename the class to AzureDataSource.
The Interface bindable element needs to change to MenuItems (what we just created). While we are at it, lets change it as well for the LoadData and Refresh methods as well.
We are not going to use the _appId or _dataSourceName, you can comment those out.
Change the cache key to AzureDataSource.
//private const string _appId = "xxx";
//private const string _dataSourceName = "xxx";
Now we just need to modify the load method to use our newly created data provider and we are done with the PCL file.
public async override Task<IEnumerable<MenuItems>> LoadDataAsync()
{
try
{
var azureDataProvider = new AzureDataProvider();
return await azureDataProvider.Load("entres");
}
catch (Exception ex)
{
AppLogs.WriteError("AzureDataSourceDataSource.LoadData", ex.ToString());
return new MenuItems[0];
}
}
All we really changed was the service call. Instead of using the ServiceProvider we are using our custom Azure Provider.
Item to note, you will see that I am “hardcoding” entres into the Load method of my provider. That is because I did not load all of my data in the one table. I could easily pass it in as a parameter. I would do that in the LoadDataAsync method and in the interface IAzureDataProvider. When I call that method from my view model I can just pass in the proper menu type.
The PCL portion is DONE! Onward to the Views!
MenuItemsViewModel
Lets build the ViewModel. Copy EntresViewModel.cs over to MenuItemViewModel.cs in the AppStudio.Shared project. Just a couple of changes here.
public class MenuItemsViewModel : ViewModelBase<MenuItems>
{
...
override protected DataSourceBase<MenuItems> CreateDataSource()
{
return new AzureDataSource(); // CollectionDataSource
}
Make sure MenuItem is being referenced in stated of EntresSchema. Add the following reference to our CreateDataSource and that is about it.
EntresPage
Go to Windows Phone project and open the Views->EntresPage.xaml.cs file. A few little changes. Lets start with declaring our View Model.
public MenuItemsViewModel EntresModel { get; private set; }
You can add that right about the current view model (EntresModel). I am keeping the property name the same to avoid editing the XAML
Then change the EntresPage() method to call our new model.
public EntresPage()
{
...
EntresModel = new MenuItemsViewModel();
...
}
The main method that kicks everything off is the OnNavigatedTo. In there we looked at the LoadItemsAsync method which, for lack of better term, loads items.
One more item to add, right click on the Windows Phone project, click manage NuGet packages and add the Windows Azure Mobile Services like you did for the PCL.
That is it! Run it and you are now accessing your own Azure Mobile Services for Data Storage.