Mobile Geolocation Apps with Windows Azure Websites

As mentioned in my wrap up of the URL Shortener with mobile clients, I gave a presentation a little while ago at a DevCamp in London on connecting mobile clients to Windows Azure Websites.  The last series went over how to implement the URL Shortener demo I went through during my presentation.  Today, I’d like to start talking about the second demo which involved geolocation.  In this demo, a mobile app loads up a map centered on the user’s current location.  It then polls the server to see if there are any “points of interest” within a certain radius.  If the server returns anything, pins are dropped on the map.  When the user taps a pin, a popup appears with information on the point of interest, including a URL to the picture or video that was uploaded there. 

Initially the mobile apps connected to a .NET service written using Web API by my teammate Nick.  Prior to sharing this out to everyone, I wanted to rewrite this backend to make it a bit more usable by people developing on OSX or Linux.  Happily I can say that I was successful in rewriting the service layer into PHP.  Now, with a Windows Azure account (sign up for a free trial here) you will be able to push out this site and use it as a backend with ease. 

This series will be split into 5 different articles:

1. The PHP Service code
2. Displaying the map and points of interest in iOS
3. Adding new points of interest in iOS
4. Displaying the map and points of interest in Android
5. Adding new points of interest in Android

In addition, I’m happy to say that all of the source code for these samples is available on GitHub under the Apache 2 license.  You can find the Git repos for each of the samples here:

• PHP Service
• iOS Client
• Android Client

How it Works

The service exposes three different methods to the clients.  The first returns a JSON array of points of interest that are within a certain meter distance of a given latitude and longitude.  This data is stored in a MySQL database which the PHP service connects to.  In the first article for each client, we’ll focus on using this method to show these points on a map.  The second and third methods are both used to upload a new point of interest (the focus of the second article for each client).  We’re using Windows Azure Blob Storage to store out photos and videos.  Normally, in order to add new files to blob storage, you would need to have the account name and the key.  However, if we put the account name and key in our mobile apps, someone could find them and then abuse our storage.  So instead of using the account directly, our clients request a Shared Access Signature from the PHP service.  When this happens, the PHP service (which DOES have the account name and key) talks to blob storage and says “I want to add a file named <this> and I want my window of uploading this file to expire X seconds from now”.  That URL is returned to the clients.  The client can then do an HTTP Post to that URL with the image or video data.  When that completes successfully, we’ll use the third method to tell our PHP service that we’ve added a new point at X latitude and Y longitude with name Z and HTTP URL path Q.  When the PHP service receives this data, it writes it to the MySQL database mentioned earlier and the next time we poll for points, our new point will come back.

Conclusion

Hopefully this series will give you a good idea of how you can use Windows Azure Websites as a backend for your mobile applications that require geolocation to display information.