Uw betrouwbare partner voor (mobiele) web applicaties
TwitterEmailRSS

Game TV

I’ve been wanting to create a mobile videogame-focused app for a looooooooong time. During the Christmas break I finally has some spare time and created…: Game TV  😛 😮 🙂   sorry, can’t stop smiling

Game TV.. wut?

So what is it? By installing Game TV the user will always know which channel (game related websites or youtube channels, to be precise) has added new content. By clicking the channel, the user will see a list of recently added video’s and is able to play the video and share it with friends (email) or the world (twitter). Game TV doesn’t bother you with registration or advertisements, just pick and play!

Game TV at a glance

Technique

Well, we’re all techies here, right? So let’s highlight some technical bits.

Client

 PhoneGap / Cordova wrapped JQuery Mobile app (css3, html5, js). Kindly built by PhoneGap build. Notable stuff:

– Responsive design with CSS3 is cool. See the upper left screenshot in the pic above. This is how I position the video (block a) next to the description (block b)  when in landscape, or above the description when in portrait orientation (default JQM width of these blocks is 50%):

@media all and (orientation:portrait) {
  #videoplayer .ui-block-a, #videoplayer .ui-block-b {
    width: 100%;
  }
}

– As the app will *cough* obviously hit 100.000+ users shortly, clientside caching is very important. We cache the channels and videos in sessionstorage. But to guarantee a quick startup, we also leverage localstorage. When the app is started, the content is immediately retrieved from localstorage and asynchronously updated from the server, showing the diff to the user when done (red  count bubbles, we all know them).

– Since I want my app to be present in all appstores, I had to localise some bits of text. Keith Wood has created a simple yet very effective jquery localisation library.

Server

Play! Framework Java app, doing two things:

– Harvesting new content for all channels. 1 Job per channel.

– Serving the harvested content as JSON to the client.

What I’ve learned

– Android and iOS have great native videoplayers, as long as you invoke them correctly.

– Android animations are still not as smooth as on iOS. Fortunately, JQuery Mobile allows you to easily configure them per platform. I used this snippet:

// override some defaults, before jqm.js is loaded
$(document).bind("mobileinit", function(){
  $.mobile.defaultPageTransition = isAndroid() ? "fade" : "slide";
});

– Adding a Tweet button with a count bubble (see the upper left screenshot in the image above) is not as trivial as you’d think when you don’t want users to leave your app while tweeting. A combination of clickjacking, Twitter web intents and the PhoneGap Childbrowser plugin did the job.

– Some sites make life for a screenscraper really hard. Try to find the URL of the videos being played on this site for example. Horror!

– .. but YouTube rocks, thank you for providing easily parseable RSS feeds like this one (Gamespot channel).

– JQuery Mobile is great, but has some nasty caveats (stacking click handlers, document ready, reloading a page, etc). We’ll definitely blog about some high and lows of JQM in the future, but for now: download the Android app please please please 🙂There will probably be no iOS version because of the strict Apple review guidelines regarding streaming ‘protected’ content.

Keeping your PhoneGap / Cordova app in sync with your RESTful backend

These days I’m working on a PhoneGap Apache Callback Apache Cordova app. I’m having tons of fun, and thought I’d share an issue we encountered and the lightweight but effective solution we came up with.

Cordova: speeding up your app

Cordova apps are distributed via the Application store of your mobile device. This means the static content (HTML, JS, CSS) is stored on the mobile device. This means a huge performance gain over typical desktop-targeted websites which render all HTML serverside. Even if you don’t need the awesome Javascript-to-hardware-feature bridge Cordova provides you with, you can still use it to distribute your frontend to your clients. By the way: if you don’t need the hardware features (camera, contacts, gps, etc) then don’t include cordova.js, for it saves your clientbrowsers loading a 125KB library.

You need dynamic content, right?

What’s a (web)app with only static screens? Likely not a very popular one. So we need to get (preferably JSON formatted) data from some backend. Your Javascript controller interprets this modal and updates the view accordingly.

The client doesn’t bother which backend architecture it connects to, but just to let you know, the project I mentioned uses an implementation of a JAX-WS REST API which indeed returns nicely JSON formatted strings to the client.

Problem: keeping your PhoneGap / Cordova app in sync with your RESTful backend

Now consider the following scenario: you have 10.000 users with version 1.0 to 1.3 of your awesome application. You completely rewrite the client and want to force all users to update to version 2.0. They should not use 1.x anymore, because you had to change most of your backend as well.

How would we do that, as we need the user to update the app via the AppStore/Google Play/etc.

The solution: clientside version.txt, serverside check ‘minimal required version’

What we did (and it’s no rocket science and most certainly not something lots of others have not already done in some similar way) is bundling a version.txt file with the app which contains a single line, reading ‘1.0’ or ‘4’. The version.txt can be assigned to a JS variable with a simple synchronous $.ajax call.

On the serverside we have a REST service ‘http://<server>/services/versioncheck’ which we pass the client’s version.txt when the app is started. The service returns false in case the clientversion is lower than the ‘minimal required version’ we’ve defined in the backend.

So, now that we’ve updated our app to version 2.0, the service returns false for any not yet upgraded clients and the Javascript callback will urge the user to update the app.