Marcel Prasetya (Software Engineer, Google Wave APIs Team) talks about "Google Wave API: Now and Beyond" as part of San Francisco Java User Group's November 10th, 2009 meetup event held in San Francisco, CA at Google Inc. http://www.sfjava.org/calendar/11573532/ Sponsored By: TEKsystems Inc., Marakana Inc., Packt Publishing Ltd., and JetBrains Inc. Organized and Recorded By: Marakana Inc.

1. Google Wave APIs
Marcel Prasetya
mprasetya@google.com
November 10, 2009

2. Overview - 3 Ps
Wave introduction
Google Wave (Product)
Google Wave APIs (Platform)
Embedding
Extensions (Gadgets, Robots, and Installers)
Wave Federation (Protocol)
Roadmap

3. Where is it?
Google's Developer Sandbox
https://wavesandbox.com
Google Wave Preview
https://wave.google.com/wave
API Documentation
http://code.google.com/apis/wave
Stay up-to-date on our blog
http://googlewavedev.blogspot.com/

4. Google Wave API - Embedding
Make waves available across the web

5. Embedding
Embed as a gadget
http://wave-api.appspot.com/public/gadgets/embed.xml
Or just add a piece of JavaScript to any page

6. Wave Embedding JS API
WavePanel
loadSearch(searchExpression) Load search panel
loadWave(waveId) Load wave by ID
setUIConfigObject(uiConfig) Set user interface configuration
init(frame) Initialize the IFrame (to be called last)
addReply() Add reply to the wave
More to come
UIConfig
setBgcolor(color) Background color
setColor(color) Text color
setFont(font) Font
setFontSize(fontSize) Font size
setHeaderEnabled(enabled) Display header (participants, etc)
setFooterEnabled(enabled) Display footer (tags, image and file menus)
setToolbarEnabled(enabled) Switch between wave and wave search
See http://code.google.com/apis/wave/embed/reference.html for the comple
reference

7. Example
<div id='waveframe' style='height:500px;width:100%'>
</div>
<script type='text/javascript'
src='http://wave-api.appspot.com/public/embed.js'>
</script>
<script type='text/javascript'>
var wavePanel = new WavePanel(
'http://wave.google.com/a/wavesandbox.com/');
wavePanel.loadWave('wavesandbox.com!w+PfYnNrZk%1');
var uiConfig = new WavePanel.UIConfig();
uiConfig.setColor('red');
uiConfig.setFont('courier new');
uiConfig.setFontSize('18px');
wavePanel.setUIConfigObject(uiConfig);
wavePanel.init(document.getElementById('waveframe'));
</script>
Demo!

8. Extensions
Do more with the Wave

9. Gadgets and Robots Extensions
Robot
Extension Hook
Gadget

10. Wave Gadgets
Put any web application inside the Wave and get:
Real-time state synchronization across clients
Playback
Real-time interaction with multiple people and robots
Participant support

11. Wave Gadget API
What gadget knows:
host
participants
state
mode (view, edit, playback)
What updates gadget receives:
participants
state
mode
What gadget changes:
state
Other standard gadget APIs are supported

12. Hosting Gadgets
Google Gadget Editor
http://code.google.com/apis/gadgets/docs/legacy/gs.html#GGE
App Engine
http://code.google.com/appengine/
Any other web hosting options
Your website.
Your friend's website.
etc...

13. Adding Gadgets to Waves
Toolbar Menu
The green gadget button
Robots
Add Gadgets from the Robot APIs
Debug Menu in sandbox
Debug -> Extensions -> Add Gadget...
Paste URL of your gadget

14. Gadget Code Example
General gadget wrapper
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Wave API
Gadget" height="300">
<Require feature="locked-domain" />
<Require feature="dynamic-height" />
<Require feature="wave" />
</ModulePrefs>
<Content type="html"><![CDATA[
Your html goes here.
]]></Content>
</Module>

15. Gadget Code Example
<script type="text/javascript">
function initialize() {
wave.setStateCallback(receiveState, this);
}
function receiveState(state) {
document.getElementById('state').innerHTML = String(state.get('counter'));
gadgets.window.adjustHeight();
}
function resetState() {
wave.getState().submitDelta({'counter' : '0'});
}
function updateState() {
var state = wave.getState();
var counter = parseInt(state.get('counter', '0'));
state.submitDelta({'counter' : ++counter});
}
gadgets.util.registerOnLoadHandler(initialize);
</script>
<div style="width: 100%; height: 100%">
<div id="state"></div><br/>
<button type="button" onclick="updateState()"> Increment Counter </button>
<button type="button" onclick="resetState()"> Reset Counter </button>
</div>

16. Gadget Ideas
Tic-tac-toe
Server-authoritative Poker
(robots + gadgets)
Collaborative TODO list
Whiteboard
Embedded browser
(collaborative surfing)

17. Robots
World peace or world domination?

18. Robot Concept
Robot is an automated (robotic) participant that lives in
the cloud that has full access to wave
It can listen to events on a wave, and respond with a
series of operations
Server-side extension, where Gadget is a client-side
extension
Currently available for Java and Python APIs on Google
App Engine

19. Robot Architecture Overview

20. Smiley
No emoticons? No problem, Smiley can help.
"""Smiley robot."""
from waveapi import events
from waveapi import robot
def OnBlipSubmitted(properties, context):
blip = context.GetBlipById(properties['blipId'])
document = blip.GetDocument()
contents = blip.GetDocument().GetText()
smiley = ':)'
smiles = []
i = contents.find(smiley)
while i >= 0:
smiles.append(i)
i = string.find(smiley, i + 2)
for s in reversed(smiles):
document.SetTextInRange(document.Range(s, s + 2), unichr(0x263A) + ' ')
document.SetAnnotation(
document.Range(s, s + 1), 'style/backgroundColor', rgb(253,252,63))
if __name__ == '__main__':
smiley = robot.Robot('Smiley')
smiley.RegisterHandler(
events.BLIP_SUBMITTED, OnBlipSubmitted)
smiley.Run()

21. Robot Ideas
Addie (Calculator bot)
Facty (Fact-checking bot)
Spammy (Spam-blip deleting bot)
Arnie (Terminates other bots)
Publishy (Publish wave content to an external database)
Maily (Email integration)

22. Extension Installers
Shrink-wrap your gadgets and robots

23. Extension Installer API
Extension bundles are XML-based manifest files.
Hooks are "listeners" on the client that can execute
actions, such as inserting a gadget or adding a
participant.
Hooks Actions
New Wave
Toolbar Menus Insert Gadget
Keyboard shortcuts Add Participant
Macros Create New Wave
etc Apply Annotation
etc

24. Example
<extension
name="Yes/No/Maybe Gadget"
description="Select yes, no or maybe."
thumbnailUrl="...">
<author name="Google"/>
<menuHook
location="TOOLBAR"
text="Insert a Yes/No/Maybe gadget."
iconUrl="...">
<insertGadget url="..."/>
</menuHook>
</extension>

25. You can
Publish your extension manifest publicly
Add your extension via...
Debug Menu -> Add Extension...
Paste your extension URL
Install/Uninstall your extension

26. Wave Federation
Federate this.

27. Federation
Google Wave is a product
Wave is a technology
wave is to Google Wave
email is to Gmail
Enables independent wave providers to interoperate
Draft Federation Protocol Spec: http://waveprotocol.org/
The spec is iterating: it's developing in the open

28. What is Wave Federation?

29. Why Wave Federation?
Encourage adoption of wave as technology and ensure
users have a choice in their wave provider
The internet is built on open APIs and standard protocols
We don't want wave to be a silo'ed communication
tool
Avoid different organizations building Wave like systems
that don't interoperate

30. Wave Data Model
Wave
collection of wavelets
Wavelet
collection of participants
and documents
unit of concurrency
unit of wave federation

31. Wave Federation: Sharing Wavelets
Wave servers run OT/CC
A wave servers shares wavelet updates to federated wave
servers
Still only one server owns a wavelet. The wavelet id
determines which domain owns it
domain: “initech-corp.com"
id: "conv+3sG7”

32. When and where to Federate?
An AddParticipant operation contains an address from
another wave provider
e.g address bob@acmewave.com, milton@initech.
com
A participant’s domain determines where to send ops

33. Example: Bob on Acmewave wants to talk
to Milton at Initech Corp.
Bob's client sends AddParticipant(“milton@initech-corp.
com”)
acmewave.com looks up initech-corp.com's
waveserver
acmewave.com pushes the AddParticipant operation
initech-corp.com requests the wavelet history
For future ops on that wavelet, acmewave.com will:
accepts ops from initech-corp.com
transmits ops to initech-corp.com
initech-corp.com "passively" accepts ops from
acmewave
The result: Bob and Milton are happily waving each other

34. Wave Federation Architecture -
Delta Flow

35. Data stays in your network
On-premise solution
If you don't add anyone from the outside the data
stays in your network
Scenario: confidential chat between colleagues in a
company

36. Where we've come so far...
Published the (draft) protocol spec
Google Wave Federation Protocol
Google Wave Conversation Model (incl. Blip model)
Open sourced ~40K lines of code (http://code.google.
com/p/wave-protocol):
Wave Model + Operational Transformation
FedOne: Basic Prototype Client/Server
With an early crypto library

37. What we've done...
Opened up a federation port on WaveSandbox.com
This port is still highly experimental
Updated the FedOne client/server
The client does a better job displaying OT
The server understands the new protocol manifest
Published a Google Wave Contributors Licensing Agreement
Encourages community-based development for open source
patches
http://googlewavedev.blogspot.com/2009/11/wavesandboxcom-
federate-this.html
Demo

38. Roadmap
But wait... there's more!

39. Recent Features
Extensions:
annotateSelection to markup selected text
Gadget edit/view mode distinction:
setModeCallback()
Robot Java and Python Client Libraries
Auto-generation of capabilities.xml
Federation:
Opened federation port on WaveSandbox.com

40. Features in Development
Extensions:
New hook for regular expressions
Enables more seamless interaction with robots
Robots:
v0.2 Wire Protocol
Active API (via OpenSocial RPC)
Allows robot to send operations on demand,
authenticated with OAuth, to the robot proxy via
OpenSocial RPC
Gadgets:
OpenSocial JS Support
Provides a common API to access social information

41. What's Next?
Extensions:
Dynamic Extension Gallery
Improved Extension Installation Flow
Robots:
New robot operations (fetch wave, search wave)
Robots performance improvements
Gadgets:
Gadgets latency reduction
Diff-on-open support
Federation:
Open port on wave.google.com

42. Future Features
Extensions:
Internationalization Support
Extension Store
Robots:
Non-AppEngine Robots
Gadgets:
UI Wave Library
Caja Support
Inline gadgets
Embed:
Read-only anonymous embed access
More display configuration options

43. Thank you!
Thanks for listening and good luck!