A Facebook and Google App Engine mashup app

It was Friday evening, eve of Cricket World Cup 2011, all the news channels are picking up their favorites for the next match. It is then that i thought of “Paul the Octpus” (may his soul rest in peace) and his predictions. So i took upon the task to build a Facebook app using Google APP Engine (GAE) as the backend.

The Motive behind this app is to compare winners chosen by careful analysis (use feedback) and some sort of random pick (team on left) and see how much the two differ at end of the world cup (i app has only two users 😦 and predictions are 100% till date). GAE gave a free hosting and moreover i do not know a thing about Facebook app or GAE so it should be good learning.

First thing to do is to register your app at Facebook and GAE. Facebook renders the app in Facebook context by using an iframe pointing to canvas app (app you hosted in GAE and pointed to in facebook app config). More details are at facebook developers site.

When the app is first accessed Facebook passes a signed_request parameter, the initial documentation says it contains a base64 hash of a JSON structure. I was tricked here into believing that it is the base64 json hash.First thing is how to parse JSON, googling points to google-gson, following is the code snippet required.

    String plainFbData = new String(Base64.decode(signedData));
    Gson gson = new Gson();
    FBData data = gson.fromJson(plainFbData, FBData.class);

It matches the JSON and object by convention. To test this change the canvas app url in Facebook app config to http://localhost:8888 (or whatever is you local GAE apps url). This does not work.

If you go in detailed Facebook documentation, the signed_request is a ‘.’ delimited string with a hash value and json string. So you need to split the signed_request and then base64 decode it.
This json object has basic user information (which does not give any idea who the user is). So we need to redirect the user to Facebook dialog (‘https://www.facebook.com/dialog/oauth?client_id=” + API_KEY + “&redirect_uri=” + CANVAS_URL’) so that he/she can authorize our app (this won’t work with local app URL, you will have to deploy your first version of app to authorize yourself for testing) . Next time the signed_request will have user_id, oauth_token etc. You can track your user using this user_id and make further requests on Facebook API using the oauth token.

Now the application, Application displays recent matches and predictions by Tux initially. Users can vote by clicking on the flags and next time the predictions page shows aggregated user inputs as well. Duplicate votes are checked.

WC 2011 Facebook App

Following is the data store code.

DatastoreService ds = DatastoreServiceFactory.getDatastoreService();

Query q = new Query("Match");
q.addFilter("when", FilterOperator.GREATER_THAN_OR_EQUAL, Calendar.getInstance(TimeZone.getTimeZone("GMT+5:30")).getTime());
q.addSort("when", Query.SortDirection.DESCENDING);

PreparedQuery pq = ds.prepare(q);
 for (Entity e : pq.asIterable(FetchOptions.Builder.withLimit(3))) {
   // blah blah

I won’t bother you with details as using GAE is well documented.

If there is enough data i hope to compare random predictions/user predictions and actual results. This idea originated from one of the episodes of ‘The Simpsons‘ where Lisa tells her father on how the company circulating pamphlets about predicting the winner of the competition. I do not remember the exact quotes but this is how it goes ‘they send equal number of pamphlets of both the competitors. Now people who got pamphlets of the winner , tweet.. buzz and create a hoopla where as people who got the losers pamphlets do not care. So by popular word people think that the company is making right predictions (no offense to late Paul).

I would publish the code on github (yes it is street code, hacked together on Friday night, i need to *refactor* it).