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.

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

 

 

 

 

 

 

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

 

 

 

 

 

 

 

Remember, what you name your table is what our classes and view models will 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 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..).

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 control panel. From Visual Studio I was 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.

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

We need to add the Microsoft Azure 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 LoadItems. This is the main method that we will be changing to point to our Azure 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 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.

MenuItemDataSource

Take the EntresDataSource.cs and copy it and rename it to MenuItemsDataSource.cs. Remember to rename the class to MenuItemsDataSource.

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.

Comment out the IEnumerable _data as well. We will add our mobile services to this class.

We need to add the SDK to our class. Add this above the namespace

If you noticed we commented out the _data collection which is needed to be returned from the 2 methods. Lets add it back but as a MobileServiceCollection. And we will also add our Mobile Service table as well that gets the data from the Mobile Service Client.

The last thing we need is to call the client. This snippet of code is provided via Azure on the startup screen but you can reuse this by just changing the service url and key.

Now that we have the plumbing all hooked up lets modify the LoadData to get the water flowing. Here is the full method.

All we really changed was the service call. We are calling the MobileService.GetTable method and performing a Linq query to get the data we want. We are looking for “entres” for this page, but it very well can be “apps” or “desserts”. Technically you can declare a parameter for the LoadData method and pass in the menu type to search for.

The PCL portion is DONE! Onward to the Views!

Lets build the ViewModel. Copy EntresViewModel.cs over to MenuItemViewModel.cs in the AppStudio.Shared project. Just a couple of changes here.

Basically just referencing our new files and code.

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

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 LoadItems method which, for lack of better term, loads items. Since we are using a new model lets change it from EntresModel to MenuItemsModel.

A few more clean ups, in the OnDataRequested method, swap out the old model with the new one.

ALMOST DONE! Now that we changed the model and the data source we need to update our design or the Xaml. Since we are using a new model, we need to find the instances where EntresModel is being ‘bound’ and update that to our new model name, MenuItemsModel.

In the EntresPage.xaml there are a few spots and in the EntresDetailPage.xaml.

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.