Drawing boards are so much more fun than paper’n pencil

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Pushing ApnaBill.com into a Zarro Boogs state suddenly gave me the much needed time to start tinkering with other things in the roadmap. Hence the next obvious destination for me was OpenSocial – about which I’ve been hearing for quite some time now, almost everyone I know is writing some sort of social apps (FaceBook or Orkut)… moreover, these apps can bring a whole new sense of visibility to ApnaBill.com.

Thanks to Rohan, I started off with an inclination towards Orkut apps.

I must say, Google has done nice job of documenting the OpenSocial API’s. The starting point was ofcourse Orkut developer docs

• OpenSocial tutorial for Orkut
• Anatomy of an Orkut app
• Orkut Developer Guide
• API’s : OpenSocial, JavaScript and Gadgets

Ofcourse, to use any of these – you need the Developer Sandbox access to Orkut

The docs and the presented examples seem all good – but if you are a first time OpenSocial developer, the disconnect would be very obvious to you – specially how the OpenSocial API’s and Gadget API’s and JS API’s are all connected.

What I understood from all the reading was that OpenSocial is a set of API’s which all conforming web services expose. Each of these web service (Orkut/Hi5/etc) is a Container and each container exposes some proprietary API’s as well. So if you are developing an app which is to be deployed across multiple websites, make sure you do not use any proprietary code.

And what was the best way of understanding the codebase? Read the Examples! All of them! The more you read them, the more you would be able to the connect between all ingredients of OpenSocial API’s.
OpenSocial apps are primarily HTML and JavaScript – styled using CSS. The HTML forms the display of your app while the JS (bulk of your app) helps you fetch and render the data to & fro from your web service (Orkut/Hi5/etc).

There’s something interesting to note here…
Orkut’s sandbox environment requires your app to be stored on a publicly accessible location. That mean, if you have a website where you can host your JS/XML/CSS – you are good to go instantly. If not, try the Google Gadget Editor and save your files on google’s server.

I was lucky when it came to app hosting. Tata Indicom in Pune, gives static public IP’s for postpaid broadband connections. That means if I run apache on my server and dump my app files on /var/www/orkut folder (Ubuntu) then I can edit the files on my local machine while Orkut sandbox environment can fetch them straight from my machine – awesome! Now I get to use my favorite editor… yay!

App’s main view – Canvas

Profile view of the app

As you can see, my app does nothing intelligent – just lists my friends and their details. But what’s interesting is, I can detect at runtime that which view is being rendered – is it app’s main view or is the app being shown in my profile.

Think of this in more productive sense. If I am building an app for ApnaBill.com (lets say), I can display summary or something on the profile view and a more detailed analysis of the same thing in the app view – isn’t that interesting

What’s next? – Giving purpose to my app!

My example codebase – app.xml, canvas_view.js, profile_view.js
Please replace REPLACE_ME_1 with path to canvas_view.js and REPLACE_ME_2 with path to profile_view.js
Note – I am learning JS as I am proceeding with OpenSocial apps. Please use the above code at your own risk.

[update]
I am a big fan on “Emote” application on Orkut – so decided to examine how it works… loaded up Emote and inspected the “net” tab in Firebug and found this – http://www.rockyou.com/google_apps/emote_example/view/Emote_XML.php -if you can see, Emote is using completely different set of HTML for canvas and profile views. It also has included “dynamic-height” feature to hide the nasty scrollbars – interesting! You might also be interested in checking out the localization technique and the app headers – lots interesting information is there on how they should be used.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.