Posts Tagged ‘google wave’

Creating a tweet gadget for Google Wave

Saturday, October 10th, 2009

This week bani sent me an invite for trying Google Wave. It’s a great tool and if it remains as open as Google says it will I think it can really change the way we communicate over the internets. I mean, it’s much more flexible than e-mail and it takes collaboration to another level. But, as I said, IMO the “key for success” in this case is to stay open and to support the creation of other servers and implementations(as PyGoWave [which deserves a blog post]).

But enough of cheap talk, I’ll show you the code.

My first “useful” piece of code for Wave is a Tweet Gadget. It’s a simple Google Gadget that takes advantage of the Wave extensions for interacting with the Wave user. What the gadget does is very simple, it takes a tweet id and using the Twitter API it places the tweet inside the Wave. It’s a simple way to quote a tweet.

I must say that the original idea is not mine, it’s rbp‘s idea. We were chatting using Google Wave and he wanted to quote a tweet. That’s how we started looking ways of doing it.

Stateless gadget

I started writing a simple gadget that using the Google Gadgets API makes a request using the Twitter API and shows the tweet in the wave. The problem of this first version was that it does not keep the state, so if you reload/rejoin the wave, you won’t see the tweet, but instead you will see the text box for entering the tweet id.

In this first version you can see how to make a JSON Async Request using the Google Gadgets API. It’s very simple, all you need to do is to set the parameter gadgets.io.RequestParameters.CONTENT_TYPE to gadgets.io.ContentType.JSON and then call gadgets.io.makeRequest(url, callback, params) where callback is a function that receives the JSON object.A very simple example:


function myCallback(obj) {
jsondata = obj.data;
// access the attributes as jsondata['key']
// ...
}
function makesJSONRequest(url) {
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
gadgets.io.makeRequest(url, myCallback, params);
}

Adding state

Until now the gadget is a simple Google Gadget as it does not use any feature of Google Wave. Also it’s not so useful because it can’t keep the tweet id when you leave the Wave. And worse, people will never see the tweet you quoted. One of the main differences between simple Google Gadgets and Wave Gadgets is their ability to keep, set and change state. By state I mean information. You can keep user preferences, a game score or a tweet id (or even a tweet).

I decided that the easiest way was to store the tweet as it will appear in the wave (with HTML entities and everything). The new version will keep the tweet information when the user enters the tweet id, so everybody in the wave can see the quoted tweet.

You can see the Gadget code to understand how state works in Google Wave, but what’s most important:

  • use a callback (with wave.setStateCallback()) to be aware of state changes
  • wave.getState() returns an state dict-like object which you can set and get information from
  • use wave.getState().get(‘key’) for getting an information
  • and wave.getState().submitDelta({‘key1:’ value1, ‘key2′: value2} for setting information

And that’s it. It’s very simple, hope you enjoy it :)