This lab will provide some key learnings for Azure Mobile Services:
How to create a universal project that is designed to share code between Windows store applications and Windows phone applications
How to implement push notifications that result in toast messages appearing on the device
How to work with databases to add tables, columns, and data.
How to add code to the Windows phone application enabling you to retrieve records and display them in a list view control.
The following is required to complete this hands-on lab:
A Windows Azure subscription - sign up for a free trial
A Windows Phone Developer Account
Windows 8.1 and Visual Studio 2013 Update
This hands-on lab includes the following exercises:
Estimated time to complete this lab: 90 minutes.
In this exercise, you will provision the three Windows Azure Virtual Machines used throughout the lab. Specifically you will
A universal application allows you to share code between tablet and phone applications. Visual Studio solution contains three projects. One project is for Windows 8 desktop, noteboo, or tablet-based applications. The second project is for phone applications. the third project is the shared code base between the other two.
You will create a new phone project. From the File menu, choose New / Project.
Creating new phone project
From the template pane on the left, choose Universal apps as seen below. Next, choose the Hub App template, then provide a name for your project.
Creating and naming your project.
This task was about adding push notification capabilities into the phone application. You will end up reserving a name for your phone application. You will also modify and/or create a mobile service hosted in the Microsoft data center that supports push notifications.
Your project is now created. Your next step is to add push notification services. You will now ad support for push notifications. Right-mouse click on the phone project in solution explorer and choose ** Add / Push Notification **.
Adding push notification
The wizard will inform you about what will take place: (1) A push notification channel URI will be created. This is a mechanism used by client apps to listen for and process push notifications; (2) The phone project will also be modified with code to process incoming push notifications; (3) Your mobile services account will be modified to support push notifications. We will create a new mobile service to support this application.
Understanding the changes that will be made
You will need to sign into the Windows Phone Developer Portal. This step assumes you have an active Windows Phone developer phone account to use. If you don't have an Windows Phone Developer account, you can sign up here: http://www.windowsphone.com/account. You will now indicate a name for your phone application. This is the name that will appear in the Windows Phone store. It will need to be unique.
Reserving a phone application name
You will now create a service, meaning that a new Azure Mobile Service will be created using your Windows Azure account. This means you are signed up to use Windows Azure already.
Creating a new Azure Mobile Service
Creating a mobile service
Enter a Server user name.
Providing a user name
You will now notice that your Azure Mobile Service has been created. Your name will be different.
Validing the newly minted Azure Mobile Service
You will now validate the summary page. You can see that both your phone application name as well as the Azure mobile service have been created. You are also notified here that your project source code in Visual Studio will be modified.
Viewing the Visual Studio Wizard summary
You can now see the completed project in Visual Studio.
Viewing the completed project in Visual Studio
In task 3 you will verify that push notifications operate correctly. You will run the phone application in the emulator and verify the to see the text Sample Toast.
Right mouse click on the phone project and choose "set as a startup project."
Setting the startup project
From the toolbar run the application and the emulator
Starting the application and the emulator
Now that the application you will be able to see the toast notifications appear
Viewing the push notification and the application
The Sample Toast message will now appear.
Viewing the toast message
In this exercise we will leverage SQL Server data in a phone application.
In this task we will add a table, insert a column, and then insert data.
From the left pane, select mobile services. The service we previously created was called universal-push-notif. Drill into the service by clicking on the arrow.
Drilling into universal-push-notif
You will now select data from the menu.
Selecting data from the menu
You will add a table.
Adding a table
Name the table ViewStatus.
naming the new table
You can now verify the table has been created. The next few steps will involve adding a column and then inserting some data. Click on the arrow to drill into ViewStatus.
Drilling into the ViewStatus table
Notice that the table comes with some default columns. Click columns, followed by on the add column selection at the bottom.
Adding a new column
The new column name will be statustext. Leave the default the data type of string.
Naming the new column that you are adding
You can now verify that the new column has been added. In the next couple of steps we will add data to this newly modified.
Verifying the table structure
You will now navigate to a different part of the portal. On the left menu and choose SQL database. You should see the name of your database. Mine was called universal-push-notif. Yours will be different. Click on the arrow to drill into the details for this database.
Drilling the database to enable the insertion of data
To be able to insert data you will need to manage the database. From the bottom menu select Manage.
Managing the database for data insertion
You will need to confirm that your current IP address will be added to the list of existing firewall rules, enabling your current computer to connect to the database. The developer defines which IP addresses are allowed to reach the database.
Adding a new IP address to the firewall rules
Notice that you can now build a new query. Select new query from the menu bar above.
Building a new query for data insertion
You will now type in 4 sql insert statements as seen below. Notice that the database name has been replaced with underscores where there was dashes. Select Run from the top menu bar after typing in 4 insert statements.
Typing in 4 insert statements and running them
The Windows Phone application already has much of the infrastructure needed to retrieve the data from the database. In this task we will add the necessary C# and XAML code to retrieve and display the data.
Open the file HubPage.xaml.cs. You will add code to connect to the database. Add the code below that will allow you to retrieve the list of records from the ViewStatus table.
Retrieving data from the ViewStatus table
At the top of the file add the following using statements.
Adding using statements
You will need to add the TableViewStatus.cs class file. Right mouse click on the phone project and select Add class. Paste in the following code:
You will now perform the actual lookup of the database records. You will modify the NavigationHelper_LoadState() method. Add the code as seen below.
Adding code to perform the lookup
You will now add a collection the source, which will act as a container for the database records. The list you control that you will add in the next step will reference this collection as the source.
Adding a collection source
You will now modify the HubPage.xaml markup code. You will be adding a list view control to display the records. The complete code provided at the end of this post.
Adding code to HubPage.xaml
We will now run projects that you can test the database records getting retrieved. Run the project.
Running the project
You can now see that the records were successfully retrieved. You can also see that the sample toast message also worked.
Viewing the correct results.
This quick walkthrough demonstrated some key concepts:
You can download the whole project here:
Did I miss the step to create a "ViewStatus" class?
Where is the "Universal" part? I noticed that you use only the Windows Phone application... Should this code be replicated in both Apps then? Or could this code be moved to the "Shared" project to be used in both Windows and Windows Phone apps?
Hi, I was searching for exactly that tutorial. Universal apps + Azure Mobile Services. I was really glad to find it here. However, as Victor already mentions, you do not cover the shared part here. Actually, you completely miss the point of your own tutorial by just showing how to use the Azure Mobile Services with the WP81 project (even though it is based on the universal apps template). What's the best way to leverage the mobile services with the new platform? Further, I stumbled also upon the missing ViewStatus implementation. Even in your sample project I had difficulties to find the file because 1. your not following a naming convention (TableViewStatus.cs == ViewStatus class (or is this the actual convention? Table*.cs); and 2. you just put the file into the root folder of the WP81 project. As this is the model, this should be in a folder called model (or sth. like this) and to have it shared across all platforms like W8 it should be put into the shared project. Last but not least, what's the point of adding the full source of HubPage.xaml.cs and HubPage.xaml on this page when you provide the whole code for download. It just leads to infinite scrolling. I hope this feedback does not sound too negative as I really appreciate your effort of writing tutorials. But this one here completely missed any point and just feels like a blog filler.
Agreed that this post could focus more on the code sharing aspect, which, indeed, is the point.
April has been so crazy busy. I've been in 4 cities in less than 2 weeks. My goal was to just get something up and running so I could show my audiences.
The assumption I made that you could just as easily add the push notification to the Windows Store app. Just like I did to the Phone App.
Feel free to update my project and send it back to me and I will add it back to my post. I would love to update my post right now, but I just currently don't have the bandwidth.
Stephen and Rick - sounds like you can keep making this better. Contact me directly at email@example.com.
I know this is a late addition, but I thought I'd point out the issue... people want to put it in the Shared code, not in the individual app-specific code. I'm assuming therefore that it cannot be added to the Shared library, but must be added to the apps themselves?