Google Wave API: Now and Beyond


Published on

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.

Sponsored By: TEKsystems Inc., Marakana Inc., Packt Publishing Ltd., and JetBrains Inc.
Organized and Recorded By: Marakana Inc.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Google Wave API: Now and Beyond

  1. 1. Google Wave APIs Marcel Prasetya November 10, 2009
  2. 2. Overview - 3 Ps Wave introduction Google Wave (Product) Google Wave APIs (Platform) Embedding Extensions (Gadgets, Robots, and Installers) Wave Federation (Protocol) Roadmap
  3. 3. Where is it? Google's Developer Sandbox Google Wave Preview API Documentation Stay up-to-date on our blog
  4. 4. Google Wave API - Embedding Make waves available across the web
  5. 5. Embedding Embed as a gadget Or just add a piece of JavaScript to any page
  6. 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 for the comple reference
  7. 7. Example <div id='waveframe' style='height:500px;width:100%'> </div> <script type='text/javascript' src=''> </script> <script type='text/javascript'> var wavePanel = new WavePanel( ''); wavePanel.loadWave('!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. 8. Extensions Do more with the Wave
  9. 9. Gadgets and Robots Extensions Robot Extension Hook Gadget
  10. 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. 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. 12. Hosting Gadgets Google Gadget Editor App Engine Any other web hosting options Your website. Your friend's website. etc...
  13. 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. 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. 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. 16. Gadget Ideas Tic-tac-toe Server-authoritative Poker (robots + gadgets) Collaborative TODO list Whiteboard Embedded browser (collaborative surfing)
  17. 17. Robots World peace or world domination?
  18. 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. 19. Robot Architecture Overview
  20. 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. 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. 22. Extension Installers Shrink-wrap your gadgets and robots
  23. 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. 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. 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. 26. Wave Federation Federate this.
  27. 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: The spec is iterating: it's developing in the open
  28. 28. What is Wave Federation?
  29. 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. 30. Wave Data Model Wave collection of wavelets Wavelet collection of participants and documents unit of concurrency unit of wave federation
  31. 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: “" id: "conv+3sG7”
  32. 32. When and where to Federate? An AddParticipant operation contains an address from another wave provider e.g address, milton@initech. com A participant’s domain determines where to send ops
  33. 33. Example: Bob on Acmewave wants to talk to Milton at Initech Corp. Bob's client sends AddParticipant(“milton@initech-corp. com”) looks up's waveserver pushes the AddParticipant operation requests the wavelet history For future ops on that wavelet, will: accepts ops from transmits ops to "passively" accepts ops from acmewave The result: Bob and Milton are happily waving each other
  34. 34. Wave Federation Architecture - Delta Flow
  35. 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. 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 ( com/p/wave-protocol): Wave Model + Operational Transformation FedOne: Basic Prototype Client/Server With an early crypto library
  37. 37. What we've done... Opened up a federation port on 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 federate-this.html Demo
  38. 38. Roadmap But wait... there's more!
  39. 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
  40. 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. 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
  42. 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. 43. Thank you! Thanks for listening and good luck!