Introducing Tea Tracker

Yes folks, it’s that time again. Every now and again I get the urge to make something (usually pretty pointless), and the latest in this series of wonderful distractions is Tea Tracker.

This was actually born way back, in November last year. At the time I was hopping around on trains a lot, and it started as yet another way of keeping my brain from melting by doing something semi-productive. For quite some time I’d been meaning to create a project to keep track of my tea drinking, because it’s the kind of amazingly nerdy thing that fascinates me. As something that I do day in, day out, I was interested to see what rate I was actually consuming tea at, what trends I could spot, and whether there were any fluctuations. I’m a riot at parties, I tell you.

Starting out

Initially, as with most things I make, the idea was just to get something done and finished quickly. If it’s too complex, it won’t happen. As such I put together a very simple MySQL database structure, and created a PHP function to handle the interaction for adding a record of a drink. This was called via AJAX from a little web page that I wrapped with PhoneGap so that it would sit on my phone’s home screen with a pretty icon, because otherwise I would forget it. Naturally, it looked appalling. I didn’t mind at first, as it was more important that I started training myself to capture the data. I’m pretty good at forming habits; I’m still stuck using Foursquare. Eventually though, when you’re using something regularly, ugliness starts to grate so the input mechanism went through a couple of rounds of improvements. I also eventually created a very basic report page, pretty much so that I could easily check that my tea capture had actually been stored accurately and it wasn’t giving me a false positive.

Since the start, I’ve been religiously collecting data, minus a few where I’ve forgotten or haven’t been able to track. I love it when companies share their data though (hello data.gov.uk), so naturally the next step was to allow you all to check in on my tea habits. If you’re ever wondering whether I’ve had my daily fix, or whether I’m more partial to jasmine or green today, you can now monitor me at my Tea Tracker dashboard.

(Please note that this is buggy as hell in older browsers and Firefox – I am aware and will be fixing. Bear with my Flexboxing)

The dashboard

Update: I later added All Time Tea – something I’d had in an earlier version of my app, but which I’d left off the dashboard for some reason.

I’ve been doing some things that have involved AngularJS recently, and whilst my knowledge of it is extremely basic at this point (having built simple routing and CRUD-based systems only), I wanted to see if I could do something a bit more custom. What I’ve ended up with still feels extremely messy and certain bits need splitting out and refactoring, but it was a good learning experience. For the chart, I used Highcharts. I’d used these before for a bit of work I did for Fulham FC, and having considered Google Charts and a couple of others, these felt the nicest to work with. They’re pretty customisable, and once I’d got my head around how they plug into Angular it was pretty plain sailing to hook it all up. The general layout uses Flexbox, which helped deal with the fact that the boxes may vary wildly in height depending on how thirsty I’ve been that week.

Insights!

As it stands, the data is pretty good stuff. I finished a long contract working in London recently, and have (hooray!) been able to work from home since then. You can clearly see the drop off though – I apparently drink a LOT more tea when I’m in an office environment. I also drink an awful lot of jasmine tea. The water was odd in my old office in Tunbridge Wells, and because I could never seem to make a nice cup of ‘normal’ tea, I got out of the habit. Jasmine became my go to tea of choice, and now I go through boxes of the stuff. When I’m working at home however, I have a stash of matcha (powdered green) tea, and I drink a lot more of that – as evidenced by the spike in March.

Improvements

Apart from general code improvements and outstanding todos, there are several things that I’ll eventually get around to doing. This week I was in rural France, with extremely intermittent connectivity, which led to me keeping a list of when I’d had teas and manually inputting them when I got back. I really need to make some offline/syncing functionality instead, although as it only bugs me when I go abroad I don’t get annoyed enough on a daily basis to make it a priority.

I really need to put some caching in.

I’ve already had a request for his own instance from my friend Paul, with his angle on it being:

We could have a tea-off! the winner buys whiskey/rum after responsive conference.

I’ll be setting it up for him shortly, and it’s a good opportunity for me to extend the functionality properly, maybe making a login rather than being lazy and hardcoding user IDs. I’ll amend the dashboard so that he can check his stats, and would like to make the ability to see a direct comparison… although this all feels rather optimistic. As mentioned previously, the original infrastructure was very much a quick ‘get something in place’ kind of thing and is extremely flimsy and insecure, so I’d like to gradually update each component to make it more robust.

Finally, I’d like to make the graph mechanism a bit more responsive – at the moment it simply shrinks, but isn’t necessarily the best way to display information in a visual way at small screen sizes. I’m playing with a few ideas and may try a few out.

Update (7th June 2014) – I’ve made myself a Chrome extension, using the same code as my PhoneGap app, for when I’m working and can’t be bothered to pick up my phone. This was a combination of exactly the same stuff as the phone version, plus a simple manifest file and a few icons for Chrome to use in various places. It works in exactly the same way. I already had most of this from my Final Countdown Chrome extension.

So, check it out, and if you’d be so kind as to tweet at me to put the kettle on if my consumption falls below worrying levels that would be great.