Pomobat: adventures with Batman.js

I'm a big fan of the Pomodoro technique for getting shit done. The idea is simple: work for 25 minutes then take a 5 minute break. After four 25 minute blocks, take a longer break. Pretty simple right? You can start using it with just a simple timer... OR you could use an app! My two favourites are pomodroido, which adds an achievement system and CherryTomato, which asks you to rate your pomodoros when they are completed.

But in researching pomodoro tools, I couldn't find a single web app. So I've decided to try and fix that by writing one myself. Hopefully it will include the best bits of pomodroido and CherryTomato AND run in the cloud! This is also going to be a chance for me to hone my javascript coffeescript skills by working with batman.js which is a webapp framework that's developed and maintained by people at my work.

Introducing POMOBAT

Getting started

Getting batman installed was pretty simple. I just followed the instructions over here.

The batman follows the MVC architecture, so to get started we need a model, a controller and a view. I started off using batman's built in generator, but it created a much to complicated layout for me so I took out all the un-important bits. Alfred was what I based my design off of as the source is on github. After much rm'ing I was left with:

• index.html
• package.json
• pomobat.coffee
• README.md
• build/ 
• assets/

Pomobat.coffee app contains the code to initialize a batman app, the controller and the model. The view is defined WITHIN the HTML (which took me a while to figure out). You need to enclose EVERYTHING within a view div (<div data-defineview="pomodoros/all" >) otherwise none of the batman magic will happen.

Most of the view stuff is done through bindings, which are pretty damn fantastic. I have a pretty simple model, so most of the code I've written goes into my controller. It's pretty ugly at present, but it works.

I'm no designer so I went with the amazingly pretty and easy to use Bootstrap framework. It means my app looks a lot like twitter, but I think it's rather pretty.

Deploying my app to heroku was somewhat of a challenge. For those of you who don't know, Heroku is a service that will host web apps for you and it's as simple as pushing to a remote git repo! It's very much worth checking out. I needed to get batman serving the right stuff. I tried making local copies of all the batman files, but that meant I had to compile the coffeescript manually. It took me a while, but eventually I got my Procfile (used by heroku to determine what to run) to do what I wanted with the following:

web: batman server -p $PORT -h 0.0.0.0
 

And with that final fix I present to you..

http://pomobat.herokuapp.com

This is release v0.0.1 because it's still missing quite a few features. I haven't implemented the rating system yet and there are no long breaks, but you do get to see how many pomodoros you've finished! Expect another couple of releases soon as I add the features I want. Please, follow my progress on github! https://github.com/tahnok/Pomobat or even better, submit a pull request!