Case Study: Fringefest.ca - an open data powered iphone & web app

The Fringefest.ca website and iphone app were created by Gregg and Angella Coppen of iaminawe as an entry into the Apps4Edmonton competition being held in partnership with The City of Edmonton. The Edmonton Fringe Festival is North Americas largest & longest running theatre festival with over 160 productions, 1,200 performances and 39 venues this year. The app aims to make sure that you dont miss out on anything by helping you to plan your festival, write and read reviews on what shows are popular and access useful maps and information.

The decision to create an app for the competition came about after several conversations about how we could begin moving our web skills into the world of iphone app development and after watching Sumit Kataria's awesome presentation from Drupalcon SF 2010 on using Drupal as a base for iphone/ipad/android apps and finding out about Titanium, this seemed like a perfect opportunity to take the dive and learn some new skills.

Using the Open Data Catalogue

The Apps4Edmonton contest and the Open Data Catalogue are initiatives of The City of Edmonton that encourage greater transparency in government operations while encouraging citizens to actively engage in their City.

Select data sets were released to the Open Data Catalogue, allowing developers unprecedented access to information about the city ranging from census information, to schools locations, to garbage pickup times and parks boundaries. We were starting to throw a few ideas around for apps when the city released a new dataset of info for the Edmonton International Theatre Festival, North America's largest and longest running theatre festival. The new data included amenity,venue & transport info, shows & performances times and a whole lot of other festival related info. The initial deadline was tight though with only 3 weeks to the deadline and 4 weeks to the start of the festival so we got started right away with establishing some objectives, setting up a sandbox local drupal site, researching modules, sketching some wireframes and exploring some design directions.

Importing the open data into Drupal

The first technical challenge was how to get this raw data into Drupal to be able to manipulate it effectively. Part of the challenge was that we needed to maintain a live link to some feeds as they would be updated just before and even during the festival, while others would be a once off import. The Feeds module seemed to be the logical first choice with Node Import and possibly Migrate/Table Wizard being reasonable backup plans. At first, experiments with the Feeds module were not going so well but then I came across Feeds XML Parser and in particular this fork that allowed me to specify the xml elements in the feeds and with some experimentation and tweaking, I was able to import the feeds and retain the live link where needed. There were some namespace and timeout issues that caused some ugly error messages but the info was importing and the data was intact. The Feeds module is very powerful and has the awesome feature of continuing where it left off should a big import timeout, which was a lifesaver.

Now the shows dataset also came with image thumbnails that were in a varying degree of sizes and qualities. Some were horrendously upscaled, some were tiny and some were missing all together. Thankfully Feeds Imagegrabber came to the rescue and allowed importing the image urls into a receiving imagefield that then allowed us to use the power of imagecache to resize on the fly and standardise the image sizes.

By the end of the project we were successfully using 10 of the cities datasets in our application

Meaningful Maps

Quite a few of the datasets included venue, transport & amenity location information in the form of longitude and latitude co-ordinates.
We used a combination of Location, Location Feeds & GMap modules to import and output the info on google maps using views.
The beauty of having the info in Drupal is that we could continue to extend on it by providing extra fields on the content type so we used this to add more meaningful icons to describe the points of interest on the map. As we were working against the clock with this we made use of Googles excellent open source map icons to make the maps more interesting and useful. Lastly we made it that any POI on the map could be clicked and it would open up the "Get Directions" dialogue to allow you to easily plot a course from your current location.

Useful Features

In considering what we wanted our application to do beyond purely being a digital version of the print program we came across two main features we thought would add value to the Fringe Theatre Festival visitor. This years the Fringe had over 160 productions, 1,200 performances and 39 venues, an overwhelming amount of information to digest that we thought our app could help with. So we settled on a community powered review system and a shows shortlist and performances planner.

Community Reviews

In my experience of theatre festivals, finding out what shows are worth seeing is often left too near the end when the official reviews have been written, word of mouth has finally gotten around and by then the good shows are sold out and difficult to get into. We thought we could change this by creating an early warning system of what to see and what to avoid based on reviews by ordinary audience members.

We experimented with a few module combinations and ultimately settled on the following setup
We used Node Comments in conjunction with Fivestar and Voting API. As we were not implementing a member system on this site, all comments were "anonymous" and so we used Captcha and Hidden Captcha to keep the spam bots away while not annoying our reviewers with extra fields to fill out.

Finally we wanted reviews to be automatically tweeted when posted. Part of the reason for using Node Comments rather than Drupal's built in comments was to be able to use the Twitter module in conjunction with Shorten & Short URL to automatically tweet new review content in a convenient short url.

Festival Planning - Myfringe

With so many shows and performances, we thought it would be helpful to be able build a shortlist of shows you were interested in and then from that, build a personalized performance schedule and calendar to make sure you knew what to see and where. These could be e-mailed or printed for easy reference. The challenge again was that as we had no authenticated "members", we needed to find a way to do this for "anonymous" users.

The latest dev version of the versatile Flag module combined with the Session API module allowed anonymous users to flag content. Both the shows and performance content types were setup with different flags and linked to relevant views under the "MyFringe" page. The useful Print, PDF & E-mail module handled print and e-mail duties.

Design & Theming

Angella had been busy over the course of the 3 weeks working on a set of designs for the website and app that would compliment the Festivals awesome logo as well as evoke a feeling for the city that she had grown up in and that we were just settling into. We took photos of the city skyline and historic Strathcona area that the Festival takes place in and our apartment was soon covered in wireframes & design directions.

We decided to integrate elements of Alberta's towering cloudscapes with the river valley's iconic pine trees and chose to use the excellent Singular theme as a starting point for the web app allowing us to easily experiment with a few different ideas in the context of the live site.

Going Mobile - iphone app

As mentioned at the beginning of this post, this whole thing started out as an excuse to develop an iphone app powered by Drupal and so as soon as we had the open data in Drupal, we started to work concurrently on the iphone app using Appcelerator's Titanium platform. In a nutshell, it is an open source tool that allows you to compile native iphone/ipad/android applications from a relatively simple javascript type API and a single codebase. It is a powerful development platform and is not without its bugs, but has an active and helpful community and its documentation is improving all the time.

I must also highly recommend Josh Clarks Tapworthy: Designing great iphone apps book as it was a great resource for getting started with understanding some of the nuances of designing for the iphone and should be an essential library item to anyone wanting to target the iphone as a platform.

Using the very helpful Kitchen Sink sample application and Sumit Kataria's sample code and modified JSON_Server module, we were able to get the skeleton of the iphone app up and running and communicating with Drupal through the Services module. The problem with learning a new API and being on a very short timeline is that sacrifices needed to be made and I ended up needing to make heavier use of Webviews than initially intended.

This had advantages & disadvantages as we were to find out. The biggest advantages were that most of the app logic was handled by Drupal and most of the theming was done using familiar tools like XHTML, CSS and Drupals template system which helped speed up our development process considerably. The biggest disadvantages were that, in particular, the webview maps were more sluggish and slower loading than native maps would have been and our app relied on a working internet connection to be useful, which thankfully, most iphones have.

Titanium underwent a pretty significant upgrade during the development process and unfortunately there was just not enough hours in the day and night to learn and integrate some of the new native maps custom icon awesomeness in time for the deadline.

After some research and testing, we settled on this Mobile Webkit Theme to handle the display of the drupal pages within the iphone app webviews and it worked really well. We set up a custom page-home.tpl.php to let iphone users know that there was an app available should they browse to the site in Safari on their phone.

Going Mobile - Android, Blackberry, Opera Mini

We wanted to make our app accessible to as many users as possible even though web browsers & iphone were our primary targeted platforms. Titanium has the capability to compile native Android apps but the timeframe was too tight to realistically achieve this as well so we settled on providing a mobile friendly theme that would cater to users of other smartphones. We duplicated the same Mobile Webkit theme above and made some adjustments using the opera mini and android emulators as a guideline as to how the site would look on these devices. We also set up another custom page-home.tpl.php that would welcome other smartphone users and establish a sensible entry point to using the app.

We made use of the Mobile Tools module to handle device detection and theme switching based on a users device and needed to patch the module to make sure that ipad users viewed the full webapp and not the mobile theme version.

Server Infrastructure

The site is deployed on a 1024 VPS with linode.com. I started with a 512 linode but hit quite a few timeout issues when trying to import the updated performances dataset consisting of a few thousand records. I was getting both server and varnish timeouts and scaling the virtual server up helped significantly to get around this issue.

Although it is likely overkill for the amount of traffic that the site was expected to receive, the site is deployed on a Pressflow Drupal instance for better performance & scaling and is built on a high performance Project Mercury server stack which makes use of Apache Solr for search & Varnish/Memcache for caching. I have deployed a few sites on this setup but this was the first time I used a Linode stackscript to set it all up with literally a few clicks. I used SVN for version control and syncronisation between my local copy and the production server.

This web/mobile application was the winner of The Edmonton International Fringe Theatre Festival Special Distinction Award, the prize of which was tickets to the festival and the right to use the official logo in our app.

The main competition deadline has recently closed and community voting is open until the 10th September when the final judging will take place. The main competition has over $50 000 in cash prizes and if you liked this case study, how we used Drupal with open data or the app itself please support our competition entry by registering (just name & e-mail) and voting by clicking "like". Thanks for the support.