Windows Phone App Studio – Part 4 – Azure Services

windows-phone-azure

Finally! The Azure tutorial is here! This is a simple way to set up your App Studio apps to use your Azure Mobile Services rather than the standard data collection that come with an App Studio Project.

Lets dive in. (UPDATED NOVEMBER 14th 2014)

Azure setup

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.

create mobile services

From there, you are prompted to create a Mobile Service.

create-mobile-service-step1 create-mobile-service-step2

Fill out your URL, choose an existing DB or create a new one.

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“.
create-mobile-service-step3

Click on the PLUS icon on the bottom to create a new table.

create-mobile-service-step7

To make things a bit easier, what you name your table is what the new classes and view models can be called. In my example I called it MenuItems since it will contain ALL items on the menu.

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.

create-mobile-service-step8

 

 

 

 

 

Now, you can create a few tables if needed but for this example I am just creating one. However, we need to add some data to it. You can do this a few different ways, web client, SQL Data Tools or via Visual Studio. I chose Visual Studio.

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.
create-mobile-service-step6
The data I added is the same as the collection.

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.

create-mobile-service-step9

 

Code

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

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.

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.

Now we just need to modify the load method to use our newly created data provider and we are done with the PCL file.

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.

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.

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.

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.

 

 

 

 

 

 

 

 

2 Comments

  1. Hola, he visto tus proyectos de YouTube, App Studio y unos de tus artículos y me han gustado en especial el de App Studio (como arreglaste los problemas de RSS e integrante Azure) me gustaron por que yo estoy iniciando en este tema apasionante del desarrollo… Pero como estoy iniciando aun no entiendo los códigos más simples :/ y yo quisiera agregar las características a mi aplicación que tu le añadiste a la aplicación que creaste y agregar el soporte “Rate my app”, se trata una de una aplicación multi-idioma que te da consejos y te enseña cosas de lenguaje corporal, seducción, persuasión, imagen personal y demás… Mi pregunta es ¿Sabes de otro método para hacer la aplicación con esas características sin código (tipo App Studio)? o ¿un grupo de Microsoft que te ayude con el desarrollo?, de antemano gracias por haber leído esto :) y en verdad me ayudaría mucho tu respuesta, pues… En verdad mi contenido es de muy alta calidad, hasta ahora solo lo distribuye en español y latino América y tiene ya casi 600’000 seguidores, el problema es la calidad de la aplicación.

    Reply

Leave a Comment.