Hacking Open Data with the Finder Template and a Sandwich: Citizen-Ready Apps in Minutes

This weekend I had family visiting, so I wasn’t able to attend any of the OpenDataDay events. However, I decided to do my own “mini-hackathon” during my Saturday lunch break using the new Finder & Hero templates for Windows 8.   UPDATE: Use my Finder template updated with a couple of small fixes.

I said they were a natural fit for open data apps. I also stated that it’s the “fastest way to get started with location-based Windows 8 apps”.
In this post I’ve put both of my claims to the test in my improvised “mini-hackathon”, with this in mind:

Objective: Create an app using an existing open data set (JSON format), using only my meager HTML and JavaScript skills (as little as possible). Successful compile of a working app = success
Tools: Start with my home Windows 8 PC with no dev tools installed
Time: 45 minutes, including the time to eat my lunch (Turkey Sandwich)

Here’s how it went down:

1. Got the Bits: 5 mins – First, I searched for “windows8 development” and clicked the first link that came back, which took me to a page to download Free Visual Studio Express 2012 + resources / guides. I then proceeded to download the Finder Template from GitHub (yes, I should’ve done a Git Clone, but I was lazy & hungry, so just did a download) and while waiting had a few bites of my sandwich – yummy!
2. Installed VS Express 2012: 12 mins – Visual Studio 2012 install included installing Blend for Visual studio for CSS and registering my developer account (super quick). While the installer did its thing I multi-tasked…
3. Browsed the Quick Start Guide – Mark Arteaga did a great write-up that walks through pretty much the same thing I’m doing here, but more technical and without a sandwich. I focused on the Requirements & the Customization Section.
4. BING maps SDK & Key: 5 mins – While reading the Quick Start Guide, realized I need the BING SDK and a Bing Maps Key (signed in with my Live ID account), clicked “create/view keys” on the left panel, filled in a simple form & VOILA!
   At the same time, starting to get concerned that 1/2 of my allotted time is gone, as is my sandwich
5. Run the template: 3 mins – I unzipped the template (downloaded in Step 1) ,ran “FinderApp.sln” solution for Visual Studio. Right off the bat, I just hit “F5” to build the project – and it worked!  YAY!  Of course it was using the default dataset as a feed. Before I forgot, changed the BING maps key with the one I just got: open FinderApp –> js –> “config.js” file, containing most of the stuff that needs to  be changed. Scroll to the bottom & set my key. So far so good.
6. Set Data Feed Options: 5 mins – for this test I used the City of Waterloo Open Data catalogue, specifically the Public Art dataset (with the JSON URL: http://cityofwaterlooopendata.cloudapp.net:8080/v1/CityOfWaterlooOpenData/PublicArt/?format=json). This JSON viewer reveals the fields I needed: NAME, latitude, longitude, LOCATION_DESC (instead of an address field), and DESCRIPTION. Going into config.js it took just a couple of minutes to set the JSON URL, appName and the new fields (including an additional field: detailField), like this:
7. Build & tweak: 10 mins – Hitting “F5”, and…. success. The map zoomed in to Waterloo/Kitchener and showed the data from the feed. Clicking on the points brought up the “Detail” screen with a map view, but the “detail” was just the default infoFormat string: “<h4>Here is some info about {{nameField}}.<h4>”. A quick navigation to home.details.js below the “// setup the document elements” section revealed:document.getElementById(“address”).textContent =  … which I set to… = data[Finder.Config.secondaryField]  and
   document.getElementById(“infoDiv”).innerHTML=  … which I set to the new the new field…. = Finder.Formatter.format(data[Finder.Config.detailField], data);

Hit F5 again, and now I had the Art description field “DESCRIPTION” in my app. Nice and simple! My custom app builds just fine, with just a few tweaks – and only needs a few little things like the About section & custom icons to be App Gallery ready.

With 10 minutes to spare I had to time finish off my sandwich and scurry off to re-join my family for the rest of the week.

On Monday I’ll continue my hacking (on a different dataset maybe) at the Make Web Not War hackathon in Montreal.

Hope to see you there!