TV Sélection is an app that lets you watch TV shows on your iPad. The focus is on shows in four different categories, hand-picked by the arts and entertainment editorial staff of Tages-Anzeiger, one of Switzerland’s biggest newspapers. At the same time you can watch any other show on a wide range of channels by using the search functionality, with just a few minutes delay from the time it airs on TV.
When you’re running on a device you want to take advantage of that devices native functionality. That may be the camera, accelerometer, or contacts. In our case we had three use-cases: We wanted to show notifications when not in the app, we wanted to use the devices keychain to store login details a bit more safely, and we wanted to take advantage of the fact that millions of users have their credit card information saved in their iTunes store account. We were able to do this by using phonegap plugins, one for local notifications, another to access the keychain and a third to handle In-App purchases.
And that’s where the NIWEA concept cracks a little. Since these plugins rely on Objective C code to interact with the system, that functionality won’t work on other devices. In some cases there may be plugins for your other device as well, and you can drop them in with little or no changes. In other cases you may have to write your own plugin, or just not offer all the features on every device. Since, again, we were only building for the iPad we weren’t impacted much. We wrote a quick mock to simulate the keychain using cookies so we could continue testing in the browser. The missing local notifications hardly impacted us, and In-App purchases ended up being easiest to test on the device itself.
While Phonegap was new to everyone on our team, it wasn’t the only interesting thing from a technical point of view. One of the limitations of the whole project was that everything should run on the app – there is no backend, there are no servers.
OK, that’s not entirely true – we access the tv shows and playlists through a (non-public, sorry) Zattoo API. We didn’t control this ourselves though, and so anything that needed server-side code had to be planned and coordinated with Zattoo’s developers. Since this obviously generates some overhead, every feature was examined to see how it could be done without requiring a backend. Want to send an email with debug information? Instead of sending it from a server, use a mailto link to open the iPads Mail app with some prefilled content. Want to use Push notifications to let the user know when his license expires? Sorry, push notifications require a server, but we can use local notifications instead, we just lose some flexibility because we have to trigger them when the subscription starts. In-App Purchases? There’s a bunch of back-and-forth between Apple’s servers and a callback URL to verify receipts and such – in this case Zattoo ended up extending their API to handle Apple subscriptions, with us simply passing on the receipt data we receive when the purchase is made.
Other interesting details: We used WebSQL to cache the shows locally and allow you to save shows in your favorites. Probably because the WebSQL spec isn’t being developed further there isn’t a lot of documentation on what SQL operations you can actually use with it, so that was a bit of trial and error. Also, having database calls be asynchronous just seems like unnecessary complication.
Go ahead! The app is available for free in the App Store, and you’ll receive a seven day trial in which you can watch any show. Unfortunately, you’ll only be able to watch the shows if you’re within in Switzerland due to licensing restrictions.
Thanks for your comment. Personally I joined the team after the start of this project, so I wasn’t involved in the decision. I know jQuery Mobile was still considered somewhat unstable at the time, which was probably a factor. Another would have been that our resident YUI expert is in Zurich. That said, other teams at Liip have used both Sencha
Touch and jQuery Mobile in various projects.
Looking back, and having played around a bit with jQuery Mobile and slightly less with Sencha Touch, I would say we didn’t miss a lot of the functionality either of them would have offered.
very nice app and interesting post about cross-platform experience on mobile app development.
Did you consider using Sencha Touch or Jquery Mobile rather than YUI3 ? What leads your choice to YUI3 rather than Sencha Touch which seems to provide a closer native UI rendering ?