Joe Sergeant

• Hello
• Thoughts
• Self
• Contact

March 1, 2010

Prowlr – Your TV Companion, My First Proper Web App

I’ve officially been bitten by the iPhone web app development bug. After my first venture into web apps with the 24 Season 8 Countdown Clock it was time to attempt something with a bit more meat to it. I set myself the challenge of creating an iPhone web app to track a user’s favourite TV shows, tell them when the next episode was airing and give them a weekly planner.

A bit of background

I follow a lot of American TV shows and used TVRage to find out when the next episode for each of my shows was airing. This was great, but I was becoming increasingly frustrated by navigating the TVRage website on my iPhone. Using the TVRage API I quickly threw together a quick “web app” which simply listed out the shows I follow and displayed when the next episode was on. As I neared completion I realised that some of my friends, and others too, may also find this a useful thing to have. With the help of my good friend Mark, Prowlr was conceptualised, brainstormed and born.

Design considerations

Deciding on the appearance of the app was pretty straightforward. I wanted to promote the familiar components of the iPhone user interface, whilst adding in my own unique styling and functional elements to set it apart from a generic app. The design for the app was done in Adobe Fireworks CS4, which is my personal design application of choice.

Certain considerations had to be kept in mind when designing an iPhone web app:

• Buttons should be larger than normal to facilitate ease of access
• Text should be sized reasonably to ensure legibility
• Use of white space kept to a minimum to make the most use of the available viewport

Navigating pages in a web app

Early on I discovered my first big “gotcha!” in developing an iPhone web app; you can’t link to separate pages if you want your users to be able to launch your app from their home screen. If you do, your web app is closed and the new page opens in a bog standard Safari window. Not ideal.

This was resolved with a fantastic plugin called hashtrack.js which provides an easy way to handle navigating pages. Below is a very cut down example of how I implemented the plugin in Prowlr, using the jQuery library.

$(function() {
    hashtrack.onhashvarchange('page', function(value) {
        initPage(value);
    });
});

function initPage(data) {
    $('#content').load('pagehandler.php?p=' + data);
}

Hopefully this is pretty straightforward to grasp. Basically, when the hashtrack plugin detects that the #page value has changed, it passes the value into my initPage function. The initPage function takes that value and appends it to the end of a file request. The requested PHP file uses that value to determine which page content to display, whether it’s the login form, a list of shows, etc. and loads that into a <div> with the ID of ‘content’. Changing between pages is simply a case of linking to a ‘page’ – <a href=”#page=home”>Home</a>.

Obtaining TV series information

I mentioned TVRage earlier. They have a fantastic database of TV series and also provide an API to request data from their database. I initially used their API to populate my own database with TV series information, but found it quite a cumbersome process. The main quarrel I had with it was that the XML files they provided weren’t always presented in a logical way, which made extracting data from them a bit cumbersome.

After a quick session on Google I stumbled across TheTVDB.com, a user-driven TV database with a far superior API. Changing providers mid-development wasn’t ideal, but it did give me a chance to perform a quick code review and tighten up some of the functions used to process data from an external source.

When a user searches for a TV series, Prowlr does a live search on their API to see if the show exists. It returns any matches as a list of seriesand gives the user the option to add each to their favourites. When a user does add a series, a process is triggered:

1. Make sure that the user doesn’t already have the series in their favourites
2. Check our local database to see if we have any data for that series; if we don’t, request the full series information (including episode data) from the API
3. Remove the series from the user’s search results

Keeping the TV series data current

One of the main benefits that TheTVDB.com has over TVRage is when it comes to updating series information. Every hour I request a file from TheTVDB.com, which contains a list of all series and episode IDs on TheTVDB.com that have changed since the last update. With each ID returned I check our local database to see if any of those series IDs match. If there is a match, pass the series ID into my update script, which grabs the latest series data from their API. It’s a similar process when it comes to updating individual episode information.

Prowlr in the wild

At the time of writing, Prowlr has had 2,140 users sign up since our launch a few weeks ago. This is mainly due to Prowlr becoming a featured web app and a staff pick in the Apple Web Apps Directory. It has been an interesting to see how my code has stood up to the number of users accessing it on a daily basis. To date there hasn’t been any significant problems to speak of and miraculously the system has scaled up rather well. User feedback has been great, too; there have been really positive comments on the AVForums, Twitter and various other places.

Plans for the future

I’d be lying if I said there weren’t any plans to extend Prowlr; full details will be released in the near future. One thing that the new version of Prowlr will sport is a refreshed user interface and enhanced usability. There will also be some great new features introduced, all designed to make Prowlr the best free web app out there to keep tabs on your favourite TV shows.

If you have an iPhone or an iPod touch, please check it out – prowlr.tv