A little iPad app for Santa

I had a bit of downtime recently, so I slapped together a little toy app using a few technologies I've been meaning to play around with. The original idea was to create a proof of concept for bringing Telus' (or Rogers or whoever) technician appointment system onto iPads. A customer rep (or a customer via some web interface) would book appointments to the system, and a technician could then see which ones are close by.

That sounds a bit dry, so in the spirit of Christmas, I decided to populated the appointments database with some tasks for Santa.

P.S: Dear Santa. I've been a good kid and I'd like a flamethrower.

If you have an iPad, you can see the app here. Change the radius input to see more pins on the map and feel free to add more if you want to. It works on desktop too, if your browser supports Geolocation, but it might not pinpoint you as accurately.

Technologies: Angular.js, Geolocation, Google Maps, Mongo on the cloud

One thing I wanted to explore was organizing front end code a little better than the common one-giant-file-full-of-random-jQuery-scripts. So, I looked into Angular.js

It's essentially a client-side MVC framework. It does routing:

$routeProvider.when('/', {
  controller: ListCtrl,
  templateUrl: 'list.html'
})

Controllers are just functions, but they have magic arguments: in the example below, the $scope object magically makes its members available as variables in the view. This feature is also used to import modules, making it very terse and elegant to manage dependencies in controllers.

function ListCtrl($scope) {
  $scope.greeting = "hello"
}

Views use plain HTML with extra attributes to provide functionality:

<-- this would say hello -->
<input ng-model="greeting" />

Models make it super easy to integrate to RESTful JSON services, which helps keeping server-side and client-side logic separated.

Check the Appointment module for an out-of-the-box example of connecting to a mongo db RESTful web interface (via mongolab.com, hosted on the EC2 cloud). The Geolocation module connects to the HTML5 Geolocation API, and to MapQuest's Nominatim service to map GPS points to addresses.

One of the neat things about Angular.js is that it does a lot of the heavy lifting for data-binding on the UI. Check the ng-repeat directive in the list.html file and $scope.nearby function in controller.js for an example of filtering the data set by distance to current location.

Google Maps is something I added mostly for eye candy. The code for it is in the controller.js file and it's fairly straightforward.

As always, feedback welcome.