Over The Air Hack - Terf

Over The Air Hack – Terf

Last week was the Over The Air Conference/Hack held at the famous Bletchley Park (where the code breaking during WW2 happened).

I went down with a few of my workmates from Blackwell’s where I’d only just started working a few days earlier. The event is a mixture of talks and hacking, also with camping and a guided tour of the National Computing Museum (which I can’t recommend enough) thrown in. It was like trying to cram three days worth of stuff into two days and was a huge amount of fun and a great way to get to know my new team mates.

Day -1 – The day before the hack:
Social + Local = Hack 

We’d come up with a basic concept for a hack the day before. We’d been discussing “hyper local social” (as you do) and whether we could somehow create location specific chat rooms for people to talk in. The plan was that people in one room of the building at Bletchley Park could go to their browser and instantly chat with other people in the room, but people outside the room wouldn’t be able to join in (until they came into the room).

Day 1 – Early afternoon:
Heroku + Node = Brilliant

We’d decided we’d make the chat work in your browser using the browser’s geolocation API (if it has one). This meant that we didn’t need to worry about having people get around the barrier of installing apps and people could get chatting immediately. I’ve been doing bits and pieces with NodeJS quite a lot recently and it looked easy enough to set up a socket chat server on it, so I started getting a server running.

I’d had a play with Heroku the week before and it was an obvious choice to use since it’s so easy to set up and it’s free. If you haven’t tried Heroku, give it a go. You basically download the Heroku CLI and can spin up servers from any Git repos by pushing your changes to Heroku. It really is that simple.

So in between a few talks and a tour of the museum I had that up and running and a repos set up on GitHub (I called the project Jibber Jabber at that point!).

Day 1 – Dinner Time:
GPS + StackOverflow = Concept working

Around dinner time, my team mates (Simon, Tyrell, Kjell) had been busy gathering the GPS positions of the large marquee the conference was running in. The plan was to split the marquee into two rooms (front and back). Originally I thought we’d try and position the user within a rectangle but it quickly became clear the quickest and most sensible solution was to calculate the distance between your location and the center of the “room” and allow for a certain distance and inaccuracy. Thanks to Stack Overflow as ever for some copy and paste coding action. Probably could have done that without worrying about the curvature of the Earth to be honest, but hey – it worked! I’m not sure what happened there.

Day 1 – After Dinner Drinks:
Socket.io + Heroku = ARGH!

With darkness falling and the temperature in the tent falling I started working on the chat socket server and Tyrell started on the chat frontend. At this point I thought that Tyrell (who is our UX designer) only had very limited HTML/CSS/JS skills, but little did I know he’d bust out a HTML5boilerplated mobile site with clean HTML and CSS including pseudo elements. I got the chat server up and running pretty quickly but then was flummoxed (great word) when nothing happened on Heroku.

So after 30 minutes of frustration I discovered a few posts about how Heroku doesn’t support the socket protocol. Eek! However, it seemed quite simple to switch to long polling instead. However, no amount of fiddling could get this to work. I needed to be running on a Cedar Heroku stack which at the time I didn’t understand and with the beer flowing and the hours passing became difficult to understand.

Now I was starting to sweat, but fortunately found this simple chat program by istoll on GitHub (thanks so much!). After running it on Heroku and discovered that it magically worked, I ripped out the code and integrated into what we’d been working on and it worked!

Day 1 – Night descends
Tiredness + WiFi probems + Heroku = Headache

The program was running, the frontend was built and everything was going well until… Heroku started giving weird errors when I tried to update it. After much fiddling and tweaking I realised it was because the internet had cut out. Then when the internet came back on, I started getting strange “Node version not supported” message. For the next thirty minutes I tried everything to get it working to no luck. I couldn’t understand why it had suddenly started complaining. Checked Heroku status, all fine. Checked Heroku Twitter, all fine. Then, when I starting wondering if we could run it off my laptop, it started working!

Day 2 – Breakfast
Frontend + Cats = Terf!

We managed to integrate Tyrell’s frontend pretty quickly and without too much trouble. By this point, everything was getting hacked inline into the HTML for the client. The code was getting messier and messier and in dire need of refactoring, but there wasn’t time.

The chat was working! The room detection was working! What now?

Simon and Kjell were busy working on logos and  a sales pitch as well as being on hand to demo the work in progress to judges who were popping over occasionally.

Tyrell had put in space in the design for an avatar, but we didn’t have that functionality and there was no time to build it. There was only one solution: The Cat API! Node loads in a XML feeds of cat images and assigns one to each user who joins the chat. And the final piece was done. For any “admin” notices, the cat image was grumpy cat. It only seemed appropriate.

Day 2: Showtime
Chat + Cats + Web Technologies = Winner!

Everyone was given 90 seconds to discuss their project and after a stellar sales talk from Kjell and Simon we ended up winning the mobile HTML category and bagged ourselves some free Firefox phones. Nice!

Terf is up and running still at www.turf.io, but unfortunately you won’t be able to play with it until you’re in a Blackwell’s office! Maybe at some point we’ll build in the ability to create rooms anywhere. 

All in all, the hack was fun and I think it was successful because it was quite simple and focussed and had a mix of people on the team working on different aspects to round it out. As you’d expect for something hacked together like this, the code is rather messy and it’s a little embarrassing for people to see it, but I think that’s what a hack is about. Getting it working, getting it out there and get playing with it. 🙂

PS – For more information, Simon has written a less techincal post about Terf.