This post is describing the realization of a pilot for the Store Locator as defined in steps 1-4 in a previous post. It targets Windows Azure Mobile services and the Google Places API. Furthermore, we will activate some authentication on the mobile services to prevent anonymous access to the mobile service interfaces.
Part 1: Windows Azure
First step is to get Windows Azure prepared to start serving our mobile web application. Simply follow this tutorial step-by-step to get a mobile service and html app up and running within 20 minutes:
Next step is to add some authentication. We’re using Google authentication in this example. This is optional for correct working of the app, but it ensures that the mobile services we’ve just created is only accessible by authenticated users. And we will probably use it in the future to store and maintain our Store Locations, so better do it right now while we’re at it.
- http://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-with-users-html, and select the Google authentication option:
To complete the Windows Azure parts of the puzzle, we need to create a website we’ll use to host our app. To start please create a simple (empty) website using Visual Studio 2013, following:
I choose to create an ‘Empty’ ASP.NET project because we don’t need any fuzz with routing or MVC yet, we’re just trying to get our bare essentials up and running and get some of our expectations confirmed before we put more flesh on it. And it is also a bit of a learning experience to see how things work in reality, compared to what is written in documentation.
After the web app is deployed to the Windows Azure website, don’t forget to add the Azure Website host name to the list of origins allowed to access the Azure Mobile Services. Test the deployed website, which should behave exactly the same as the local deployed version of the app. Put the source code under version control now, because this is the basis on which we will extend your work.
Part 2: Google Places API
When this work, next up is searching for a list of stores near the current user location and displaying those on a map. Just copy the example code from:
You need to merge it a bit in the same files and pages that came with the previous example we got from Google and Windows Azure in an appropriate way to keep it running. Make small changes and test often (on the locally deployed site) if all still works and changes have the expected outcome.
The end-result gives us a comfortable feeling that everything we have conceptualized in previous posts is actually working in reality as expected. You can check it for yourself at:
The screen will look something like this, but of course differs for each user location. Works great on my Samsung Galaxy S4 when loading the page in Chrome. Please also try it on your mobile device or browser of choice, and let me know if there are any defects.
Note that this version only works correctly if a user location is found. And the code is VERY messy, as we’ve not put any effort yet in making it maintainable. And we’re not able to enter a ZIP code yet. But as you can imagine, all quite resolvable, which we will do short term. Next post, we will focus on the remaining part of the list of steps to perform to pilot our Store Locator app (steps 5 and 6), and if that also works out OK, we will start making our app production ready.