Barcelona City App - the Catalan capital
is presented on Firefox OS.

 

The mission was to build an attractive showcase for some properties of the Firefox OS mobile operating system, most notably offline operation and UI performance on low end devices, in time for its launch at Mobile World Congress 2013 in Barcelona, while at the same time creating the basis for a family of FFOS/HTML5 mobile apps that Time Out could later drive traffic to. The Firefox OS and Firefox Marketplace APIs still being very much a moving target provided an additional challenge.
All basic functions of the app are directly available from the home screen. Based on the GPS position of the user interesting spots such as restaurants, bars or cultural venues are shown in a list or a fullscreen map. The detail view offers images, opening hours, prices, reviews, informations about connections to public transport network and more. Recommending a location via Facebook, Twitter, email and SMS is just as possible as dialing its phone number. Additional to the nearby search a comfortable keyword search is provided. The app detects changes between on- and offline operation automatically and adapts its data sources accordingly. 


Technology

The app itself was built entirely using HTML5/CSS3/JS.
It uses a single-page model with application screens addressed though hash extensions of the URL, which allows for JS-free, entirely CSS3-based animated transitions between screens as well as uninterrupted background download of data for offline use while the app remains fully usable. In online mode the app retrieves the venue content through a proxy that draws on Time Out‘s mobile API, and loads map tiles live as needed. Offline mode is enabled through a server side harvester that collects all venue information for a given city from the API and stores it into a couch DB, to which a pouchDB (JavaScript couch implementation) can sync on demand. Both the venue content and the map tiles are then stored into the device‘s indexedDB. Status is maintained in the device‘s local storage for the automated switch between offline and online mode.


Project Scope

InTradeSys developed the launch version within 6 weeks.
It was presented at the Firefox OS launch press conference and received a lot of interest.


Client

Time Out Group Limited