Ketchup App

Meet Ketchup, a Pomodoro Timer built in a day

A few days ago I decided to build my own Pomodoro timer. The challenge, build a viable Pomodoro timer within 24 hours. Given the abundance of free Pomodoro timers available, I wanted to develop one which would be very simple to use. This is what I came up with.

Starting the sprint.

The first decision I made was developing it as a web app. Ketchup lives on the internet, and therefore is available for free on any device (media queries galore). It’s a fairly simple app, so this method of deployment was quite easy to realize. Second, Ketchup uses the devices accelerometer to start and stop the timer. Why? I figured that if a user is trying to focus on work, they should be forced to put their phone down.

I began by drawing out the requirements for the application and creating a list of features I wanted to implement within the first 24 hours. After the main features were in place, I bounced between working on the front/back end (using the pomodoro technique, naturally). Time management was key, and it was great that I could use the application while I was developing it, allowing me to do real world testing using myself as a user case.

if (window.DeviceMotionEvent == undefined) {
		// No Sensor Detected		
} else {
window.ondevicemotion = function (event) {
		// Grab x/y vals		
    ax = Math.round(Math.abs(event.accelerationIncludingGravity.x));
    ay = Math.round(Math.abs(event.accelerationIncludingGravity.y));        
    // Check if Device is Tilted        
    if (ax !== 0 | ay !== 0){        
    		//Device is tilted            
    } else {        	
    		//Device is flat        
    }
  }
}

Here is the snippet of code which checks to see if the device is tilted. The application essentially uses this logic, in conjunction with the timer to change app states. Using the onDeviceMotion event handler, I could grab the sensor data from either the accelerometer or gyroscope right through Javascript.

App States and UI/UX

Ketchup has 4 states. Start, Idle, Work, and Break. The user can navigate between each state by simply moving their device. Once a Pomodoro has been completed, the user is notified to take a break. After they’re done, the user simply has to place their device down to begin the next 25 min session.

The UI for the app is very straightforward and simple. Users are notified of background tasks via animated images, and are notified of state changes via the changing of background colours and text.

Conclusion

Overall this sprint was an amazing experience. Building something within 24 hours on my own was challenging and it taught me a lot about agile development. There are many things which I wish to add to Ketchup (audible alerts, more features, help), and will be doing so in the coming weeks.

Try it out here on your mobile phone.

Legal

Pomodoro Technique® and Pomodoro™ are registered and filed trademarks owned by Francesco Cirillo. Ketchup is not affiliated by, associated with nor endorsed by Francesco Cirillo.

Credits

Ketchup bottle designed by Madame Jules
Tomato Logo designed by Marco Olgio