The presentation I gave at AjaxWorld East.

2. Introducing OpenSocial “Building Social Ajax applications with OpenSocial” Chris Schalk Developer Advocate Google

8. OpenSocial solves this problem

9. OpenSocial solves this problem

15. Who’s working on OpenSocial? Over 200 other influential companies… amiando Animoto Appirio Bebo Bleacher Report BonstioNet Brad Anderson Bunchball, Inc BuyFast Cardinal Blue Software Chakpak Chronus Corporation Ci&T Inc come2play CurrentTV E-junkie Engage.com eTwine Holdings, Inc. Fendoo Ltd Flixster FotoFlexer Friendster Grimmthething Guerreiro Consult HedgeStop.com Hi5 Hungry Machine Hyves IG.com (Division of Brasil Telecom) iFamily, Inc iLike Imeem Indeed.com KlickSports, Inc. LabPixies Ltd. LimitNone LinkedIn LjmSite LoveMyGadgets LuvGoogleGadgets Mesa Dynamics, LLC Mixi MuseStorm Inc MySpace Netvibes NewsGator Nike Ning NY Times Shelfari O Globo Online Oberon Media Oracle Orkut Outside.In PayPal Plaxo PROTRADE Puxa Qloud RockYou Salesforce.com …

18. Gartner Technology Hype curve Case Study: OpenSocial Case Study: OpenSocial

19. OpenSocial Roadmap a la the “Hype curve” Case Study: OpenSocial Case Study: OpenSocial

23. Core Services - People & Friends /** * Request for friend info when the page loads. */ function getData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER), 'viewer' ); req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS), 'viewerFriends' ); req.send( onLoadFriends ); }; Getting info on you and your friends :

24. Core Services - People /** * Callback function for returned friend data. */ function onLoadFriends (response) { var viewer = response.get( 'viewer' ).getData(); var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’; var viewerFriends = response.get( 'viewerFriends' ).getData(); viewerFriends.each(function(person) { html += '<li>' + person.getDisplayName() + '</li>';}); html += '</ul>'; document.getElementById('message').innerHTML = html; }; Getting info on you and your friends : Generated output:

25. Core Services - Activities /** * Posting a simple text activity */ function postActivity(text) { var params = {}; params[opensocial.Activity.Field.TITLE] = text; var activity = opensocial.newActivity(params); opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, callback ); } postActivity(&quot;This is a sample activity, created at &quot; + new Date().toString()); Posting an Activity : Activities in Orkut:

26. Core Services - Persistence /** * Storing data */ function populateMyAppData() { var req = opensocial.newDataRequest(); var data1 = Math.random() * 5; var data2 = Math.random() * 100; req.add(req.newUpdatePersonAppDataRequest(&quot;VIEWER&quot;, &quot;AppField1&quot;, data1)); req.add(req.newUpdatePersonAppDataRequest(&quot;VIEWER&quot;, &quot;AppField2&quot;, data2)); req.send(requestMyData); }; Requesting to persist data:

27. Core Services - Persistence /** * Fetching data */ function requestMyData() { var req = opensocial.newDataRequest(); var fields = [&quot;AppField1&quot;, &quot;AppField2&quot;]; req.add(req.newFetchPersonRequest( opensocial.DataRequest.PersonId.VIEWER), &quot;viewer&quot;); req.add(req.newFetchPersonAppDataRequest(&quot;VIEWER&quot;, fields), &quot;viewer_data&quot;); req.send(handleReturnedData); } Requesting to persist data:

28. Core Services - Persistence /** * Displaying persisted data */ function handleReturnedData(data) { var mydata = data.get(&quot;viewer_data&quot;); var viewer = data.get(&quot;viewer&quot;); me = viewer.getData(); // me is global var var data = mydata[me.getId()]; htmlout += &quot;AppField1: &quot; + data[&quot;AppField1&quot;] + &quot;<br/>&quot;; htmlout += &quot;AppField2: &quot; + data[&quot;AppField2&quot;] + &quot;<br/>&quot;; var div = document.getElementById('content_div'); div.innerHTML = htmlout; } Displaying the fetched ( persisted ) data: Generated output:

33. Shindig in Action Running the application Request is made from Client Data is returned and rendered Application Installation Gadget XML is loaded and cached on OpenSocial Container Gadget XML Source

38. With REST APIs OpenSocial can go Mobile!

41. Questions?