Real-Time Communication to Xamarin App via SignalR and Azure API App Services

There are times where your website or mobile app would like to show live data, such as scores in real-time. And I don’t mean hitting an api on a timer but to populate with a new set of data auto-magically. This repo consists of an API and a few demo projects that make that happen. Using .NET Web API and Signal R.

Architecture

cloudconstruct-pba-diag

We will have an “internal system” that is recording the scores it can be any system, even just a DB. In our example I have created a web form that we can enter data in to simulate this.

We will then post those scores to an endpoint that is hosted on Azure API App Services built on a ASP.NET Web API Framework. We can add authentication and even scaling if needed to our App Service when needed. For now it is open.

Next we have our clients, they will connect using the SignalR Client API to connect to a SignalR Hub out on our API App Service. SignalR will push out any messages based on data that is coming in.

Usage

LiveScoringAPI

This is the API app that will take a “post” of scores and process them out to all of the connected clients via SignalR.

Startup.cs – currently there is an option configured for CORS to be enabled. This is needed for access to the Web.

Controllers/API/PlayerScoreController.cs – Endpoint to post scores to. Currently there is no authentication. That needs to be added still. There are 2 endpoints /GET and /POST /GET is a test method to generate random scores in the Player model. This can be removed. /POST is the main method. It is expecting a Player object and instantiates the PlayerScoreTickerHub to “update scores”

PlayerScoreTickerHub.cs – this is the SignalR hub clients will connect to. It also has a few exposed methods. The main one, for Website client script is GetAllScores. This happens at init(). I did not add that to the Mobile demos yet.

PlayerScoreTicker.cs – main file for updating scores. Currently the player object is a concurrent dictionary that just keeps getting updated with a score. This most likely will need to change at some point either time based or upon another call to clear out scores. There are also some test methods in there as well. BroadcastPlayerScores calls a method for all connected clients.

Models/PlayerScore.cs – sample player score model

FYI – Swagger is enabled as well http://webapi-url/swagger

LiveScoringWeb

This project serves 2 purposes

  1. Form to post to the API – http://website-url/demo/record
  2. Demo page to show the scoring updates in realtime – http://website-url/demo/scores

/Controller/DemoController.cs – When a user records a score it will post using the APIClient for the LiveScoringAPI

*/Scripts/PlayerTicker.js *- this is the JS on the demo score page that “gets” the data on init and then has a JS function that is called by the hub to update the scores in realtime.

LiveScoringMobile

This is a Xamarin project. Contains shared code and 3 others (iOS, Droid and WinPhone). iOS is not complete.

LiveScoringMobile has some shared code – a Player Model and a Signal R Client. You may have to update the domain name and player hub accordingly.

LiveScoringMobile.WinPhone – has an example of displaying scores. App.xaml.cs has the R Client connecting OnLaunched. MainPage.xaml.cs has a method when data is received from the hub it will use a dispatcher to update the UI

LiveScoringMobile.Droid – has an example of displaying scores. Similar to WinPhone, MainActivity kicks off the R Client and has a listener for data that is recieved. It will process the data with RunOnUiThread for real time updating.

LiveScoringMobile.iOS – not implemented but will follow same pattern

Working Demo http://livescoringwebapp.azurewebsites.net/

GitHub Repo https://github.com/jdruid/LiveScoringAPI-SignalR

Bits and Bytes: Migration of Azure Mobile Services to Azure App Services

For the past year Azure Mobile Services has come a long way. From adding easy access to making custom API’s and table scripts to combining push notifications and identity management. However, this past December Mobile Services has a new name, App Services. App Services now contains, Web Apps, Mobile Apps, Logic Apps and API Apps. With App service you get the following benefits:

  • Easily connect your app to data in the cloud or on-premises, including SQL Azure, SQL on-premises, Mongo, Azure Table Storage, SaaS APIs like Dynamics and Salesforce.
  • Enable your app to work with data offline and sync with above mentioned data sources
  • Build mobile backend APIs in seconds without writing any code
  • Intuitive SDKs for iOS, Android, Windows, as well as cross-platform frameworks like Xamarin, and Cordova
  • Extend your mobile backend with custom code by leveraging App Service Mobile .NET or Node.js server side SDK, or directly via REST frameworks for other languages supported on App Service including PHP, Java, or Python
  • Cross-platform push notifications to iOS, Android, Windows, Kindle and other devices (this capability is also available as a separate service: Notification Hubs)
  • Authenticate and Authorize your users without adding any backend code using App Service Authentication/Authorization features
  • AND MORE!

You are probably saying “that is great, but what does this have to with Azure Mobile Services”. Well it is because you want to use the new App Service model for your development. If you are starting a new project, clicking through and building a service using App Service is easy and straightforward. Here is a video that shows how to get up and running in no time.

However, what if you have invested your time and effort into Azure Mobile Services? How can it benefit from all of these awesome features? Well, it starts with Migrating to Azure App Services! You might say that migrating has always be a pain or even black magic. In some instances it has. However, with the Migration Tool for Mobile Services it makes it pretty easy and straight forward.

A few things to note before you attempt to migrate.

  • If you “MIGRATE” your site, there will be no code changes needed to your scripts.
  • If you “UPGRADE” your site, you will have to make code changes to your scripts to take advantage of the new mobile SDK.

In this post we are going to talk about MIGRATION.

The next thing to note is what tier you are on with your current Mobile Services and how many do you have. If you are on Free or Basic and have multiple mobile services, all of them will be migrated. If you only want one migrated you will have to “upgrade” to the standard tier. Here are the steps to do that.

  1. Log onto the Azure Classic Portal.
  2. Select your Mobile Service.
  3. Select the SCALE UP tab.
  4. Under Mobile Service Tier, click on the STANDARD tier. Click on the SAVE icon at the bottom of the page.

Remember to set the pricing tier to an appropriate setting after migration.

Here is a Bits and Bytes video on how to migrate your Azure Mobile Services over to Mobile App Services.
bitsbytesmigrateappservice

How to Migrate Your Mobile Service

  1. Log onto the Azure Classic Portal.
  2. Select your Mobile Service.
  3. Click on the Migrate to App Service button.The Migrate Button
  4. Read the Migrate to App Service dialog.
  5. Enter the name of your Mobile Service in the box provided. For example, if your domain name is contoso.azure-mobile.net, then enter contoso in the box provided.
  6. Click on the tick button.

 

Once done, head on over to the Azure Portal and view your new Mobile App Service!

KISS PARSE GOODBYE

Bits and Bytes: Forget Parse, Use Azure Mobile Services to Create an API for your Mobile App or Website

When you are building a mobile app or a website mostly likely you are going to need some type of data repository. This can be either files, video or in the form of a “database”. In order to access these repositories you need some sort of access mechanism. Sometimes it is a library or SDK others it is a connection to the database. However, with a mobile app or even websites that are distributed the connection to these repositories can be tricky. You need to create some sort of endpoint for these. Back in the day these were called Web Services now they are called API or Web API’s. Creating them can be time consuming as well. You have to create all of the routines needed to get and put data. You will need to create authentication mechanisms to make sure the proper user is getting and putting data. All in all this could be very time consuming.

Until today! Enter in Azure Mobile Services. A quick and easy way to consume an API endpoint for iOS, Android, Windows and HTML/JavaScript. We will look at creating these API’s using the “Classic Azure Portal”.

channel-9-mobile-services

If you want to use the new method of Azure App Services, here is a video as well.

channel-9-mobile-app-services

First off, make sure you sign up for your Azure account before we begin.

 

Create Mobile Service

  1. Login to the Classic Azure Portal. Click on NEW -> MOBILE SERVICE -> CREATE
  2. Enter a url for your clients to access the service.
  3. Choose eiher an existing SQL Server or Create a New SQL Server (this is used to host your database).
  4. Done
Responsive image

Create Your Data Table(s)

  1. Click on the Mobile Service name you just created.
  2. In the navigation tab, select DATA.
  3. On the bottom of the screen, click CREATE and choose a table name. You can also modify permissions if needed.
  4. Done
Responsive image

Modify Your Schema

  1. Click on the table name you just created and select COLUMN from the navigation tab.
  2. On the bottom of the screen, click ADD COLUMN and add as needed.
  3. You can connect to the Database you just created by using a SQL client tool and your connection string.
  4. To find your connection string click on DB in the left nav, find your Database name and you will see your connection string.
  5. Windows: can use SQL Management Tools or Cloud Explorer (within Visual Studio), or Mac: SQLPro for MSSQL or Mac SQL Studio
  6. FYI: if you are connecting to the SQL server you will have to add your ip address to the server firewall.
  7. Done
Responsive image

Access Your Table API

  1. Automatically you will get a CRUD (create, read, update, delete) API created for you.
  2. Click on the table and then click on SCRIPT in the navigation tab
  3. There will be 4 scripts that you can modify if needed.
  4. FYI: if you name your object and properties in your code, then no need to change anything in the api unless you need specific business logic
  5. Your endpoint will be: https://MOBILE SERVICE NAME.azure-mobile.net/tables/TABLE NAME
  6. Done
Responsive image

Create A Custom API

  1. From our Mobile Services page, click on the navigation tab API.
  2. Click CREATE -> and provide your custom API with a name.
  3. Here you can build custom logic to query multiple tables or perform some other routine.
  4. Your endpoint will be: https://MOBILE SERVICE NAME.azure-mobile.net/api/API NAME
  5. Done
Responsive image

View Errors and Logs

  1. From our Mobile Services page, click on the navigation tab LOGS.
  2. All logs will be there.
  3. Done
Responsive image

Building Cross Platform Apps with Visual Studio

If you don’t know it already, mobile apps are all the rage. From social networking to pictures and videos to gaming, the app ecosystem is where you want to be. But what if you are a “one-stack” developer? What if you only know HTML/JavaScript? What if your expertise lies in Web Development? Well, they all have their challenges but over the next few articles I will try to demystify the mobile development process especially when it comes to cross platform development. The “one-stack” developer has is a bit easier. They know what the hardware will be. They know the screen size and capabilities of the device. They can reuse code over and over again and create some high quality apps. The “multiple-stack” developer has an advantage as well. They know how to code for multiple platforms. They know what may or may not be possible for each of the platforms. Lets look at the “stacks” and define them a bit.

(more…)

Mix Master 2000: Intel Edison, NodeJS, Apache Cordova App

I got an Intel Edison with a breakout kit along with a SeeedStudio IoT kit. Getting the Edison up and running was straightfoward but once that was complete the next step was “what to build?”. How abut a temperature app? Or a sound sensor? Or a blinking light. None of those thrilled me. Plus I wanted to do something totally different. I am more of an “app” guy so I started thinking about ‘apps’ that can communicate with the Edison. What can I send over to the Edison? Hmmm.

So I started where I always start for brainstorming app ideas, Programmable Web and Mashery. I scoured their listing of API’s to find one that jumped out at me. I did find one. The Absolut Vodka Drink Recipe DB. I can get drink recipes and send them to the LCD screen. This could come in handy instead of fumbling through a recipe book, or even an app. Have the LCD attached to either the shaker or the base and scroll through the steps needed to make the drink.

(more…)

Microsoft WebCamp – coming to a city near you!

sign-me-up

The new release of ASP.NET and Web Tools for Visual Studio 2013 puts the power to build cutting-edge websites right at your fingertips. Even better? Once you build a beautiful, interactive site, you can easily deploy and scale it with Microsoft Azure!

Join us for a free WebCamp and learn how to elevate your coding – in just one day. WebCamps are live, no-fluff events created for developers, by developers. You’ll learn from lively, informative experts who start with the basics and ramp up to advanced topics as the day goes on. Here are some of the topics we’ll cover in these hands-on sessions:

  • Introduction to ASP.NET and Visual Studio 2013 Web Tooling
  • Building web applications using the latest ASP.NET technologies
  • Building web front ends for both desktop and mobile using the latest web standards
  • API Services for both web and devices
  • Running, improving and maintaining a site in the real world
  • Real-time communications with SignalR

Don’t miss this free opportunity to sharpen your coding skills – regardless of which languages or platforms you use. We speak them all. We’ll also give away a $100 Microsoft Store gift card to one lucky attendee at each event! You must be present to win.*

reg-today

Select a date below to register online.

Attendance is limited, so save your seat today.

Add SoundCloud to your App Studio Project

I’m excited to announce my next tutorial series of adding SoundCloud API to an App Studio project. We look at creating the app out on App Studio as well as different options to integrate SoundCloud into the app. Over the next few weeks I am going to explore adding the SoundCloud services into an app generated by Windows Phone App Studio. If you do not know what Windows Phone App Studio is, you can view the site or follow my tutorials to get you up to speed. In short, it is an online tool to quickly generate Windows Phone and Windows 8.1 apps. You are provided with the source code and have the ability to extend your generated app. (more…)

Windows Phone App Studio + SoundCloud = Music Apps

This article assumes you are familiar with Windows Phone App Studio and have created at least one application using it. We are going to implement the SoundCloud api into Windows Phone App Studio. In the first part of this series we will make a connection to SoundCloud and pull in our predefined tracks that we specify within app studio. Later, we will look at playing these tracks using Background Audio as well as integrate playlists from SoundCloud. Lets dive in! (more…)

Windows 8 App Developer Workshop Farmington CT

Screenshot (3)Attend a free hands-on workshop this weekend, October 12th 2013! This one is perfect for beginning developers and experienced coders alike. Get individual guidance on designing, building, marketing and publishing your app. Who knows? Your app could entertain, educate or even change the world!

The App Development Workshops provide you Windows 8 and Windows Phone starter kits based on well-known open data API’s such as Twitter, Meetup, Instagram, Edmunds and many more.

By attending a workshop you will:

1. Code Windows 8 and Windows Phone 8 apps by leveraging our API starter kits
2. Publish your apps to the Windows and Windows Phone stores
3. Market your app online and through social media to drive downloads

Workshop Agenda

Hour 1 Presentation: Getting started with the Windows App Starter Kits

Hours 2 & 3 Code your app following our Hands-On Lab Workbooks and get expert, personal help with your project

Hour 4 Presentation: Marketing Apps 101

Refreshments will be served

MeetupSign up over at Meetup.

 

View the resources need for this event.

 

Google Places for iOS 5 SDK

I am integrating the Google Places API into an iPhone app that I am building.  I found an existing library that uses Google Local Search but that is deprecated.  So I forked that solution and came up with Google Places Library.

As the story goes…when the application is configured to allow current location, the fun begins.

First configure your project to include the CoreLocation and the MapKit framework.  I am using a single view project for this example but it can be any project really.

In the RootViewController I need to define some delegates.  Since I will be embedding a UITableView and UISearchBar I need the following to be added: <UITextFieldDelegate, UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate, CLLocationManagerDelegate, GooglePlacesConnectionDelegate>

UITableViewDelegate – will help populate the data on my table.

UISearchBarDelegate – will perform some interactions with the searching of places

CLLocationManagerDelegate – will get the location

GooglePlacesConnectionDelegate – will perform the main search

Once that is complete I can then add some outlets for my UI and set up some properties.

Lets move on to the meat and potatoes of this app.  Within the .m file I need to initialize some of my variables and get the GoogleConnection going.

Do not forget to set the url connection to nil in the viewDidUnload.

Lets move to the Location Manager methods.

The first one returns a location manager or creates one if necessary

The next method really starts the fun. In my case I am constructing a URL for the Google Places API. If you are not familiar with it you can find more about it here. The url takes the following parameters:

  • key: required – your API key
  • location: required – latitude/longitude around which to retrieve Place information. Location manager will help here
  • radius: required – distance in meters. For the initial search I have 500, for the UISearchBar I moved it out to 1000.
  • sensor: required – needs to be set to TRUE if came from a device with a location sensor
  • keyword: optional – a term to be matched if searching
  • language: optional – language codes
  • name: optional – term to be matched against the names of the Places
  • types: narrows the search to a specific type of place. Here is a list

At the end of all of this the url will look like this:

https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyAiFpFd85eMtfbvmVNEYuNds5TEF9FjIPI

The last methods are the setting of the objects and some clean up.

I am not going to dive deep into the GooglePlacesConnection class or the GooglePlacesObject. However I will say this, the GooglePlacesObject is just that. An object of the Google Place. It has an init that will take the dictionary object from the JSON results. The GooglePlacesConnection does the work of constructing of the URL and issuing the request. One thing to note, the only error checking on the Google Place request is if there are 0 results or an error with the URL or request. There are other status codes if you want to add them in if needed.

Back into the RootViewController.m, we now should have a locations NSMutableArray so we can now populate our UITableView.

We set the count of the array to the number of rows in section. We then get the locations object at the indexPath and set that to a GooglePlacesObject and populate the cell.

To handle the UISeachBar here is the code:

The second, third and fourth method handle the interaction with the UISearchBar itself. Each calls the updateSearchString method and passes in the text from the search bar. updateSearchString performs a similar search to the location manager search, except it is passing in the search string as well. If you look in the GooglePlacesConnection method I am also expanding the search radius to 1000 from 500.

That is it. You can find the source on github.

My next update will be adding a ‘pull to refresh’.