Angelhack of summer’12, where Raphael was my devil

Posted: June 30, 2012 in Hackathon, Programming, Technology
Tags: , , , ,

Another weekend, another hackathon, this time only bigger and better. Angelhack was conducted on June 23 and June 24 simultaneously across four different cities  in the country – Palo Alto, Seattle, Boston and New York. I was highly motivated for this one after we won the AWS track 2 weeks ago at AT&T hackathon. The morning of June 23 was a busy one at the Palo Alto AOL campus. Developers and start-up thinkers swarmed in as the day started. As I was entering, one of the geekster asked me – “Excited ?”, I nodded, he replied “me too”. It was very evident, everyone was.

Pitching sessions - About to start

Pitching sessions – About to start

Pitching sessions started, I heard some really awesome ideas. It made me wonder if it was even possible to build such things in 2 days at a hackathon, facial recognition for example. I had some ideas in mind, but somehow I did not see them happen at a hackathon. I was ready to help any team which had a good one. Michael Leonhard had an idea, it was about a product that would monitor web services and provide analytics for servers. Being a Java backend programmer for many years now, server analytics sounded like a comfortable idea to work on. Steve Wilmott, CEO of 3scale.net was also impressed with this idea. My good friend Harshit Chitalia was also looking for something to work on. The best part about teaming up with him is he is ready to learn and do anything. We were also representing the Blackberry dream team after our last win, where we won the awesome Playbooks. We teamed up.

Serverlytics team

Serverlytics team – Me, Steve, Michael and Harshit

The sponsors list at the event were huge – Blackberry, Windows Azure, Firebase, HTC, Google, Samsung, about.me, Facebook, Klout, Pearson, Singly  and many others. We managed to get a huge room for ourselves, official enough to call it an office while others scampered around in a common hall. We put down the architecture on the white board. After going back and forth a lot on what to name our start up we descended on serverlytics.com (Analytics about servers). That is a very cool name! We distributed the tasks and the coding began. We put the repo on Github. I took up the task of displaying analytics on a graph using Javascript. Although Java server side is my strength, I am spending quite some time on Javascript these days. After-all hackathons are all about learning.

Product video submission guidelines

Product video submission guidelines

Why Raphael was my devil at the hackathon ?

I wanted to build the graphs using a Javascript library quickly and work on the server side which was both challenging and interesting. I had a fair bit of idea about Raphael.js as a javascript library for rendering graphs and charts. So that was my choice obviously. First look at Raphael.js library shows the demos which are colorful and nice, but it was missing examples. I looked around for some plugins or extensions of this library which were simple enough to be implemented for the hackathon and found g.Raphaeljs. After a little bit of poking around, the examples seemed pretty straight forward. Started  putting it together for the application. The line and bar graphs did show up. And I was able to test it on Blackberry Playbook. The hover events rendered beautifully but with an issue in the library w.r.t to hover popup display. Another problem was, there was no data in the x and y axis in most of the demos. For graphs that is a very important component. This was where I started disliking the library a little bit. I had to push this to the next day.

June 24 morning I was back at the hackathon trying to get the data into x and y axis. Searched for every available help online about the axis data. There are mentions about using r.g.axis  (a call on Raphael object and g Raphael object) to add x axis data. But the g.Raphael js gives an undefined object on this call and r.axis also errors out with the same issue. It was almost afternoon when I was still struggling to get the x-axis data. Why can’t there be a simple js library where you just provide the x-axis, y-axis and the data in an array to plot ? Google charts came to my rescue. It is simple, elegant and easy to follow. I got the line graphs up with the all the data just in time for the demo. The x-axis had the http response codes (200,404,500 etc.) and y-axis had the number of occurrences of these codes on the server over last one hour. It worked like a charm on the Blackberry Playbook.

Google graph library

Google graph library – Simple and elegant

In the meanwhile, Steve, Michael and Harshit built the backend, hosted it on a public domain, got the api up, generated unique keys for customers and also submitted the video for the judges explaining what our product does. In between all the fun we had, we missed some very key things. We had not used any APIs from the sponsors. But our product was live and ready to go right then. Anyone could sign up, download a client on their server and get their data through the api or see the data on the graph. The product was just awesome, however just was not suited enough to this specific hackathon. We did not make it to top 30, but we learnt a lot. Hail hackathons!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s