Creating a simple application using Universal Apps with SignalR and Mobile Services(Push Notifications)This article will cover step by step approach for creating a Universal App using SignalR and Mobile Services. We will be following a simple item auction scenario for demonstrating these technologies. Created project can be found from GitHub link.
1-Items on the database will be loaded to the client and each time user places a bid, we will increment the item bid amount by 10. SignalR will help us to update all of the clients as soon as we invoke the bidding method.
2-We will also be using push notifications to notify the windows phone user
so if we summarize, overall layout of the project will look like the diagram below:
Step 1: Creating Mobile Services
1- Login to your https://manage.windowsazure.com windows azure account and Create a new mobile service by selecting the shown items from NEW button.
2- You will be asked for a URL and database selection. I will be using bidmobileservices as the url for this example and will pick a free 20MB sql Database (with new server).
3- Now it will take a few seconds to create our mobile service. Once it is ready, we can move on to the dash board and selecting "CREATE A NEW WINDOWS OR WINDOWS PHONE APP". On the expanded tab, we will pick c# and click download. Which will generate us mobile service and Universal app projects.
Step 2: Configure Solution - Mobile Services
1- Ok, now it is time to configure our solution starting from service layer to the client. We will be needing NuGet Packages for SignalR to perform on server side. Lets go ahead and install "WindowsAzure.MobileServices.Backend.SignalR" package to our MobileService project.
Please note that we need to register SignalR proxies to the project. This will be done in WebApiConfig under App_Start folder. Lets modify it to look as
now our project knows how to deal with SignalR.
2- Now lets add our model object. I think only ItemName and BidAmount properties are enough for this example.
Now, lets move to our WebApiConfig class. where we can see that TodoItems are created and are added to table on start. Lets delete and add our items. it will be shown as:
last step is to add the object to our DbContext. lets go ahead and add
to our bidmobileservicesContext.cs
3- Lets add our Hubs for SignalR. Create a folder named "Hubs" under the solution and add a new hub named as BidHub.cs shown below
4- inside our hubs class, we heed two functionalities only. Either we are going to get the ItemList or we are going to perform a bidding for an item. So lets add these two methods to our hub
Steps are explained and should be really simple. PushBid method processes the item bidding and invokes GetBids to return updated list as JSON.
Step 3: Configure Solution - Universal App
For our Universal App, we will be using MVVM pattern and will be moving whatever we have to be shared. But first lets add our PCL library for our models. Separating our models from Universal App and services will be useful if we would like to use it on both ends. Later, all we need to do is take our PCL target to .NET Framework 4.5.1 along with our mobile services (I believe Mobile Services default to .NET framework 4.5)
1- lets add a Portable Class Library to our solution named as "mobileservicesModels" and add our class "BidItems" to be mapped. Our class should look like
2- Lets move on and reference our model library project to our client application. Please remember that we need to reference our PCL both to windows and Windows Phone projects to be able to use it under shared location. Lets carry on and clear our project by:
a- Deleting Common folder under windows project
b- Move all assets under shared location and delete the other ones.
c- Delete every single line on MainPage.cs until you have page constructor like
d- Remove every single element on pages until we have our <Grid></Grid> at the end our project will look like
3- Ok, as we are going to implement MVVM, we will be needing our RelayCommand class to fire Commands (which gets added on newly added project templates). Lets go ahead and create a folder named "Common" under our shared folder and add a class named RelayCommand.
4- Now lets create a folder named Helpers (as we are going to need some) and add two classes as:
JsonHelper class: Will be used to serialize/deserialize JSON objects
Extensions class: will be used to convert List to ObservableCollection and also will have an extension for initial async Signalr connection where we will be keeping live
5- We have everything ready for our ViewModel except Nuget for SignalR Client. Lets add Nuget "Microsoft ASP.NET SignalR .NET Client" to both Windows and Windows Phone project references. At the end our references should look like
6-Our MobileServiceClient i included under our App.xaml.cs file. You will notice that it has been set to use localhost by default. Be brave and uncomment live settings having https://bidmobileservices.azure-mobile.net/ as host and application key from azure.
7- Now it is time to add our ViewModel. Go ahead and create a folder named "ViewModels" under Shared project and add a class named "MainPageViewModel.cs" and add the codes below. I have explained the code line by line. Please resolve all of the conflicts.
Code is pretty simple actually. Please be aware that, we have CoreDispatcher as our parameter on the constructor. As we are trying to bind some of the properties to the page, without using the dispatcher will cause exception:
The application called an interface that was marshalled for a different thread.
Which is expected. Code simply gets the items for the page and invokes the method for any update when ProcessBid Command triggered. Lets go ahead and add these lines to our HomePage.cs file to tell we are going to use MainPageViewModel.cs as our DataContext
8- So lets move on and add our xaml. Insert the following xaml to both pages (btw we can also move MainPage.xaml to shared)
9- We have made some changes to the services so lets publish our Mobile Service
10- Lets run our projects and see the magic :)
Also our mobile project will look like
please note that as soon as we select an item and process a bid, next client will also get the results.
Step 4: Add push notifications to Mobile Service
Now we can go ahead and add a simple push notification from Azure to our mobile, so whenever the items updated, we can notify user about the status.
1- Go ahead and add Push Notifications to the mobile project shown below:
Once you logged into your account, you will be asked to reserve a app name. I picked "BidAppTest"
After selecting your service, wizard will be adding some files to your mobile project
IMPORTANT: Please note that during these changes, a new instance of "MobileServiceClient" will be created inside our App.xaml.cs
Delete the created one and change the references to point existing "MobileService"
2-Now, lets add a few lines to our Hub Method where we updated the records
and also make a few changes to our Web.config file as (shown on the default page shown after notification implementation):
Add the following connection string in the <connectionStrings> section in web.config:
Replace the "MS_NotificationHubName" key in the <appSettings> section in web.config with the following:
We will be changing the method to be async and also add a few simple lines to push notification. Lets Publish changes to Azure then test.
3- Now, if any of the items are published, we will be notified as shown:
So, we have covered simple functionalities about SignalR, Mobile Services Push Notifications on Universal Apps. You can cover more on SignalR by following Damian Edwards on http://channel9.msdn.com/Events/Speakers/Damian-Edwards
You can go ahead and download the project from but please note that Keys and URLs are deleted from solution.
comments powered by Disqus