Clean and Green Hackathon 2013 Afterthoughts

First Hackathon!

For the last 3 days, I participated in the Clean and Green Hackathon 2013. It's an event where people can form teams with anyone of any skill, be it technical or non-technical, to create apps for Clean and Green Singapore.

I was originally invited by my friend Mingding to join this hackathon about a week before, and my first thoughts was that it was really surprising that our government had this initiative. Our Singapore government had always been very relatively closed to the idea of engaging with the public, or perhaps had no effective means of doing so due to archaic bureaucracy, and were often very old-school in their mindsets and methods. Therefore, I was elated to hear that they were finally catching onto the future of collaborative openness, embracing the public whether for better or worse, and welcoming the ideas of our younger generation.

Difficulty of crossing Games with Green

Personally for myself, I had always wanted to make a difference in the greenness of Singapore, even if it was a small difference. But I could never find out what would be the best way to leverage on my skill set of games development for this totally disconnected cause of greenness.

I've had many thoughts about creating games which encourage green behaviours or create awareness in various problems in our world, but I've always felt that games were a magical world where people had the freedom to play and it was not obvious to me how to allow people to play in a safe world and not get bombarded with educational facts or information. I did not wish to slap on text and images onto a game just to teach people about Greenness. It would be foolish to think that it would work since such a product is not built for the consumer. A teacher may have the intention to teach but a student may not listen. While I do believe that we learn through play, I was never a fan of highly contrived educational games. People learn through the experience of play, meaning the game had to teach something through the mechanics of the system. Great examples are like how Civilization teaches us about history, and how Sim City teaches us about governments. Creating a game with unrelated mechanics only serves to distant the player from the content.

Rant on Gamification

Gamification is also a bad word in my dictionary. I think there is nothing new in the concept of Gamification. It can be seen in any typical employment setup. Salary is Gamification, it encourages people to do things that they otherwise normally would not do. Bonuses and benefits are also often created to entice employees to stay in the agency, they are Gamification. Boy scout and Girl Guide badges are also Gamification. So what's the big deal about all this Gamification? To me, it is just a buzz word.

In my opinion, Gamification does help, but it does not and cannot serve as the core idea of the content. A good example is credit card loyalty points. Many people get many credit cards to get the best of all worlds, which begs the questions, are you still loyal to these card with loyalty points? Gamification can serve to enhance a product or service, but inherently, it has little value on its own.

First Concept: Ingress + Recycle Bin Locations

I attended some talks given on the first day, and one of them was by a StarHub executive who was trying to solve the problem of where to place recycle bins in Singapore.

This problem intrigued me and I believe I could solve it partially by allowing the community to engage and a fight (virtually) over where they thought the bins should be. So Ingress came to mind.

Perhaps players could set up pillars of where they thought a good location for recycling should be and they could get their community to help to enforce and defend that location through the game. The number of pillars would have to be limited which mean that if your neighbourhood was not doing a good enough job, the potential location of the recycling bin would be moved to another neighbourhood that wanted it more. I hoped that this game would be able to:

• give people a say over where they wanted recycling bins to be
• encourage people to spread the word of recycling through their community
• encourage neighbourhoods to group together and collective compete against other neighbourhoods

Pitched Concept: Freecycle Upgraded

After some discussion with Mingding on the first night where we heard all the pitches from various people, we decided to talk to one of the people whose pitch piqued our interest. His name was Marcus Tay and he suggested building an app to upgrade Freecycle, which is a web community that gives away their stuff for free. Let's all admit it, we're spoiled by Google, Apple, Facebook, Instagram, Pinterest and Twitter. We are surrounded by a plethora of great products and services that are easy to use, yet on the freerecycling community they were still bound to the dinosaur-age (15 year old) Yahoo Groups. At least by internet standards, it was built in the dinosaur age.

We were very much impressed that Marcus had done his homework and he found a pain point that really needed to be solved. From some brief brainstorming Mingding and I also came up with these potential extensions of this platform:

• Community events for charity or christmas giveaways
• Better data tracking of recycling rate in Singapore
• Reduction of home and office waste when moving out
• Growth in recycling through social sharing
• Self-regulating generous community that could help more needy people
• Encouraging more barter trading
• Encouraging Up-cycling (converting waste into new different products)

Based on the fact that we were able to see a potential explosion of possibilities, I thought this was a great idea to work on, so I decided to help Marcus with his idea.

Initial Vision: Free Stuff Exchange

This snapshot of Instagram served as my inspiration.

At least for me the initial vision was to be able to easily share stuff that you want to giveaway. The act of giving something away can already be a very personal and emotional experience. I wanted to make sure that giving away items should be as painless as possible. So these were the use cases I thought would be useful.

Give Away An Item

• Capture an image of the item on your mobile device.
• Add the name and description of the item and tag it so it can be found easily.
• Upload the item.

Searching for Wanted Items

• Search by tag or browse daily uploads.
• If there are no items available, you can subscribe to a tag, even creating one if it does not exist.
• Get notified via email when an item with that tag is available.

Taking an Offered Item

• Propose method of delivery, either post or collection.
• Deciding on a place and time to pass the item.

As simple as that!

These were the design considerations I had:

• Easy to upload (more content -> more users -> better community)
• Lazy users (push notifications will notify user instead of daily monitoring)
• Visual and easy navigation (allow for better browsing experience)

Major Development Hurdle: Setting Up

So then we set out to develop this web app. Mingding would do the back-end server work and I would do the front-end.

The first major hurdle for me was setting up a test environment for the app. I had not set up or installed any serves on my development machines going into the hackathon, so I ended wasting half of the first hacking day.

At first, I started with plain old apache and being on a mac, this was relatively easy. The next thing I thought I needed was php, and this was not hard as well since apache supports it but a flag needs to be flipped. Finally, I needed mysql as a database. However, this took a while to download and was not so straightforward to install. 

After I faced some trouble with mysql, I decided maybe a package like xampp would be better, so I switched gear and downloaded that, tried to install it but by this time, I would have already used up at least an hour.

On the previous day, we also talked about the potential of using a plugin like Gridly to do the layout for us. And Gridly required Wordpress. So I tried to download the Wordpress plugin for xampp next.

It was about this time when Mingding arrived, and suggested we use Ruby on Rails because he was much more familiar with that. I agreed since I haven't really done any work and my responsibilities were largely on html and css, which should be independent of the platform.

I then proceeded to install Ruby and Rails but I needed to download Brew first! Brew servers were absurdly slow and served me a 90 mb file at 20 KBps, so it should have taken about an hour to complete. However, my internet connection broke, not once but twice for whatever reason, and I had to restart the download.

Once Brew downloaded, I proceeded to install it, and then install ruby and rails following a really long list of steps from this tutorial. But more hiccups entailed, I encountered some errors with git in two directories, and also more errors like this.

By the time I was done successfully installing Ruby and Rails, it was dinner time and I had not even started installing Postgre database yet, which was required for it to work.

In total, I think I spent about 6 hours just trying to set up my test environment but was not successful. Fortunately, around the same time, Mingding had already set up the server on heroku and I suggested to him that I just test directly on the production server instead of on my own machine since I'm only doing visual changes in html and css. I felt we simply couldn't afford to waste any more time in this hackathon.

Future of HTML5 is wonderful!

Fortunately, not all was lost, I did manage to get some css work done and I also test my own custom html for uploading images from my mobile device using Dropbox.

One particular thing that really amazed me was how easy it was to make use of the camera on a mobile device from HTML. All it took was this little tag (ref: http://www.w3.org/TR/html-media-capture/):

<input type="file" name="image" accept="image/*" capture>

Why it is so amazing is because on the mobile, this tag would allow you either select a photo or take a new photo using your mobile camera, and on the desktop, this would allow you select a file to upload. The best part is that it is widely supported on all web browsers so it means it is also cross platform. I love it when web browsers can finally agree on something!

I was surprised to learn that it just worked when I tested it!

Waking at 5 am

At the end of the first day of the hackathon, we had only a photo capture page and pretty much nothing else. The photo upload was not even working. We had only up to 1pm the next day to finish our prototype.

Since time did not wait for me, I decided to sleep and wake up early. The next section I worked on was the grid view css and html. Once again having no local server to test, I decided to fudge some html data and test it locally on my machine. At least I could mess with css and get some work done without the server. so I came up with this:

image here

Item Name

Item Description
RESERVED

I was figuring out a lot of things like padding and margins and also testing colors and box shadows and alignment of the text to the left, while the image is centered, etc. I was also testing the view on mobile to see how it looked.

Following which, I proceeded to customize the page's navbar which was generated using Bootstrap by Mingding. In total, the css for the box and customization of the page took me about 3 hours.

Once I was satisfied, I head down to the venue as our team decided to meet at 930am. Around the same time, Mingding had finished the image viewing code on the server and suddenly the app became usable.

True Hacking = Adrenaline

From that point onwards, everything became super exciting. Once I reached our venue, we basically had 4 hours left including pitch rehearsal.

Within that last 4 hours, we managed to get a working grid view. I originally tried using HTML tables but ruby was spitting things out in a list and it was hard to add the <tr> for table rows with that format. I read about floating divs, but that only worked for divs which were consistent in height. After which, I finally found the solution, which was to use display:inline-table and change the divs to an unordered list.

After which, we swiftly added Offered/Wanted categories, and then also allow users to edit an item data. And I also added Facebook share within half an hour.

Summary

At the end of it all, I really enjoyed the hacking and the adrenaline rush at the end. We got a lot of stuff done for a short period of time.

I also want to finish the project and add tagging and user profiles. Hopefully, we can launch this platform properly in a week or two. Here's a screenshot to enjoy in the mean time: