I’ve already mentioned this on Twitter, but so far I haven’t had a chance to write about the culmination of my first “proper” efforts to create a mashup: TwtrCtr.
For those not obsessed with Twitter or their follower numbers, there’s an application you probably haven’t heard of called TwitterCounter. The site provides tools, graphs and APIs for charting the growth of a user’s Twitter followers. It’s interesting, and if you’re slightly obsessive about figures and have a belief that such things “matter”, then you might already spend time checking it and looking at the pretty graphs. It also provides an element of “prediction” based on historical growth trends, and does cool things like allowing users to compare themselves to others and watch the graphs intersect or overlap.
There’s just one issue – although it looks great on the desktop, the site isn’t laid out very well for mobile browsers like Mobile Safari on the iPhone. It also uses a Flash component to display the graph, and since there’s currently no Flash on the iPhone, you get a big blank box in the middle of the screen.
The nice part is that TwitterCounter has a simple REST API which enables a developer to get the raw data about a user’s follower numbers. If you use Twitter clients like Tweetdeck, then you’ll see this in action.
Based on my previous experience of using the iWebkit framework to build an iPhone-optimised web wrapper for the data from my Current Cost meter, I thought it might be interesting to play around with using iWebkit to display the TwitterCounter stats.
iWebkit is a simple HTML framework which provides a set of CSS classes to make your web pages look like native iPhone apps. There are other frameworks out there like iUI and webapp.net, but they depend a lot more on knowledge of AJAX and some more advanced / dynamic coding, whereas iWebkit is all about simplicity – if you know your HTML basics, it is pretty straightforward. As it happens, you can extend it very easily as well – in my case, I combined it with some PHP functions which call out to TwitterCounter and echo the numbers into a table on a web page.
Although I worked with PHP a lot a few years ago, I hadn’t really done much with the language recently. The first thing I did was to create a simple piece of code to call the TwitterCounter API and get back the data for a specific user; and then I displayed it in a web page. Once I’d done that, it was pretty easy to get the whole thing wrapped into two pages of iWebkit template code, and style it all appropriately.
Revision one of the interface and app ran off my home server, and didn’t look fantastic. My initial thought for a name was “TwitterCounter nano”, but I changed it after realising that it didn’t fit so well as a name on the iPhone home screen 
In the screenshot on the left, you’ll also see that the first form I came up with was far from “iPhone native-looking”… the current version of iWebkit didn’t have form CSS classes, so I had to tweak things a little. I also found it was worth digging into the Apple Web Development Guidelines for the iPhone, which gave some hints about how to make some iPhone-specific tweaks like turning off auto-capitalisation for the text entry box (since most usernames are all in lowercase), and how to add a text hint, for example.
So, the second iteration of the UI looks a lot nicer. It’s also possible to hit the bookmark button in Safari and add the app as a shortcut on the iPhone home screen… (see the icon at the top of the post)… if you do that, and launch TwtrCtr from there, it will act as a full-screen iPhone app with no Safari controls, giving a much more native experience. The user can then navigate by using the controls in the header bar rather than the forward and back buttons provided by the browser.
I added an FAQ page, too, so if you want to know more about the app you can check that out directly on the site. In these days of heightened concern about Twitter security I also thought it would be a good idea to add a note on the front screen to point out that it doesn’t ask for anything more than a username, and it doesn’t log that anywhere, it just passes it on to the TwitterCounter API.
OK, that was a rather long explanation of the evolution of the first page! The important part is actually how the data is displayed. Once you’ve entered a valid Twitter username and hit “Get User Stats”, you get a single-page representation of the TwitterCounter data for the given user.
The top 2 or three rows are links which will open the user’s profile page, homepage/URL (if one is set… otherwise that row doesn’t display), or display a simple graph / chart which is generated by the Google Chart API. The latter is something high on my list of enhancements, because it looks a little dull at the moment; also, I’m generating the Google Charts URL myself rather than using one of the PHP wrappers to the API, which would probably be a lot simpler.
Don’t look too closely for the rough edges… right now, it doesn’t actually make any effort deal with cases where a user doesn’t exist, or TwitterCounter or Twitter is down…. I know about those small issues
In a nutshell, then – that’s all it is. A mashup which allowed me to explore a bit more iPhone-specific web development, some PHP / REST / XML coding, and a bit of Google Charts stuff as well. I have to say that the TwitterCounter folks (Boris and Arjen in particular) have been brilliant and very helpful and supportive, despite their app having an issue with the Twitter API while I was in the middle of developing this mashup on top of their API! iWebkit is a lot of fun to play with, and very simple as well – I know the developers are working hard to add new features into that framework whilst keeping it simple and aiming it at “non-techies”.
Oh, and incidentally, although the stylesheets make it look like an iPhone app, it should work perfectly well in any desktop or mobile browser – it’s plain old HTML.
I’m not making any claims about how this might develop in the future, but I’ve got a couple of ideas for tweaks that I might make. In the meantime, if you’re an iPhone (or other mobile device) Twitter user, do take a look at http://andypiper.tv/twtrctr and see how it works for you. Let me know what you think, or any ideas for additions you might find useful! Feel free to follow me on Twitter and @ your suggestions and comments to me, too.
Update: TwtrCtr is now linked directly from the TwitterCounter home page! Follow the iPhone link in the page footer!
Andy Piper
Google Profile
