On the weekend of the 13th and 14th June 2015, I exported my body from London, England to Lisbon, Portugal for the 2nd TADHack Hackathon. It was a chance to learn and build something telecoms-related in a country I didn't know, with people I'd never met, using technologies I didn't use.
If you want the tl;dr version then, basically, my newest industry friend and I built an online TODO list app which records the notes using voice and WebRTC technology, rather than just text. Here's a video of me demonstrating it...
For those wanting a longer version, it is this:
On Saturday morning I arrived on campus, found it deserted and soon realized that I was at the wrong campus! So, a metro, train, and cab ride later I made it (slightly late) to the correct campus and surveyed the scene. 12 or so tables, each dedicated to a specific sponsor and API. I knew all of them through my research, but didn't know what they could do, nor did I have any plan as to what I wanted to build, or with which API.
As I wondered among the tables, seeing if any existing teams needed a developer to help, I met Rianne who was looking for someone with whom to work. She was sat at the APIDaze table and had ideas for a Meteor app, but not what it should do, or how API Daze could be integrated. But a team of 2 sporting 1/3 of an idea is better than a team of 1 and 0 ideas, so I joined her.
We started by installing Meteor on my machine (not so difficult) and installed an IDE that would help debugging (which failed miserably.) From here, she guided me through the docs so I could get started. Although, to be honest, I was about three pages ahead of her as I read the code which gave me a better idea of how it worked than the explanations written in English! I hadn't mastered it, by any means, but I knew enough to be dangerous!
At this point Rianne took a wander looking for any new recruits, but failed to find any, so it was just us two. Small, but mighty, as I say.
It wasn't until 11am that I thought about extending the sample Meteor application - a TODO list - to include voice recordings. Philippe from APIDaze confirmed that this would be possible to achieve using their API, so we started in earnest. Finally - an idea for the product!
By 1pm we'd designed the site (on the back of our lunch boxes, as it was the largest drawing surface we could find!) and had begun work with APIDaze. I'd also found a few restrictions on APIDaze that had stonewalled me for a while. (You could only record a group conference if the group has 2 or more people, for example.) So, while Philippe looked into fixes and workarounds for that, I decided to learn reverse Geo caching to add the current location into the app.
And by 2pm, because Philippe was still investigating, I learned WebRTC's getUserMedia method to capture an image from the webcam so it could be displayed alongside the TODO note. Around this time, I had also realized what it was I was building, realized a pseudo-real-world problem it solved, and how to present it. (The kitkat in the lunch box helped give me the use case present in the talk.)
The cleaners came past at some point in the afternoon and took away our empty lunch boxes and, with it, our design! Rianne kept working from memory, so nothing vital was lost. I kept experimenting with APIDaze and Meteor. Ultimately, I decided to use my own server to handle the voice recordings as I wasn't happy with the way Meteor was working in this regard. (There's a secret key which would be exposed.) This, in turn, lead to the problem of ensuring the filenames used by APIDaze's recording server would match my server, and those on my server matched that of the Meteor server. Short of writing or learning a messaging system, I adopted a naming convention and copy-and-paste'd the code between both applications! Hey.. it's called a HACKathon for a reason :)
We ended the first day with a moderate amount of work done - server back end on my machine, UI on Rianne's, and APIDaze interactions on my co-lo. Tomorrow we'd tidy up the loose ends with APIDaze and merge our code.
Sunday started with me getting to the right campus, and meeting Rianne at the bus stop where we discussed everything except our work. Once back on-site she looked at integrating both our code, as I looked more at APIDaze. By lunch time it was clear that nothing worked... Rianne couldn't combine our code, and I couldn't coax APIDaze into behaving. (And my server didn't want to log anything, either, so I wrote a custom logger and code tracer!) Although we could have merged iteratively during the previous day, it would have taken longer (in total) than the time it took to try it and say "nope - let's go with placeholder UI".
Also, in the last hour of our development (which took place while the first recorded presentations took place) everything magically started working! The filename on Meteor was passed to APIDaze, which passed it as a parameter to my external script so I could rename the incoming APIDaze audio file appropriately. I even got to use sox for the first time in years to convert the WAV file into an HTML5-friendly OGG. It was retro and modern, both at the same time!
Naturally, with all the time spent hacking, there was no time to create a power point. Rianne had already decided that I would be presenting (!?!?!?) so I made notes on the back of my lunch box, and kept it with me at all times lest the cleaning stuff get their bleach-soaked mitts on it! A picture of that lunchbox did the rounds on Twitter quite extensively, and my plan/talk went reasonably well. Well enough, at least, since we won! Here's the moment...
The app is still running on Note2Self although neither of us have had the time to merge UI and back-end, or fix the horrid code I wrote. (Everything is in a single file, since Meteor would include the JS files alphabetically and ignore the explicit dependencies and order of the libraries I'd found.) I do hope we can tidy it, and put it on github soon as a few people have asked us to. It's not quite an 'out of the box' solution because Philippe had to do a bit of server-side magic, but we've proven that the idea is workable.
Now... can anyone tell me why I didn't think to add fields for time and date to the TODO list app...?
Click on note2self to try it!
Marquis de Geek