Introducing OpenSocial “Building Social Ajax applications with OpenSocial” Chris Schalk Developer Advocate Google
Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul>...
Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul>...
What is OpenSocial? <ul><li>OpenSocial is a set of common APIs for building social applications across the web  </li></ul>...
Why OpenSocial is Important? <ul><li>The Web is better when its social </li></ul><ul><li>Isn’t the Web social already? </l...
The problem of social network development “ .. But what if you want to build an application that will run on multiple soci...
OpenSocial  solves  this problem
OpenSocial solves this problem
What can OpenSocial do for the Web? <ul><li>It’s about  more ,  more ,  more   </li></ul><ul><li>More   applications  can ...
OpenSocial is not  Google Social <ul><li>The evolution of OpenSocial… </li></ul><ul><li>“ It is about working with open st...
OpenSocial in the US Pictures of hackerthon Partner Hackathon at SixApart in San Francisco Pictures of container meeting N...
OpenSocial in Japan Pictures of hackerthon 関連ドキュメントの 日本語化を検討中 Pictures of container meeting 世界でも最も   Social Site  が成功している国...
OpenSocial in India Pictures of hackerthon Hacking in Delhi Pictures of container meeting Did a multi-city tour in Fall 07...
Who’s working on OpenSocial? Over 200 other influential companies… amiando Animoto Appirio Bebo Bleacher Report BonstioNet...
OpenSocial is not just for  friends <ul><li>There is an untapped  Enterprise  potential   </li></ul><ul><li>Instead of fri...
OpenSocial Roadmap <ul><li>Version 0.5 was released in a “developer release” on Nov 1st. </li></ul><ul><ul><li>First “sand...
Gartner Technology Hype curve Case Study:  OpenSocial Case Study: OpenSocial
OpenSocial Roadmap a la the “Hype curve” Case Study:  OpenSocial Case Study: OpenSocial
Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul>...
OpenSocial APIs overview <ul><li>People and Friends  Data API   Access friends information programmatically   </li></ul><u...
OpenSocial APIs overview <ul><li>Gadgets Core     Utilities handling gadget preferences, IO, JSON   </li></ul><ul><li>Gadg...
Core Services - People & Friends /** * Request for friend info when the page loads. */ function getData() { var req = open...
Core Services - People /** * Callback function for returned friend data. */ function  onLoadFriends (response) { var viewe...
Core Services - Activities /** * Posting a simple text activity */ function postActivity(text) { var params = {}; params[o...
Core Services - Persistence /** * Storing data */ function populateMyAppData() { var req = opensocial.newDataRequest(); va...
Core Services - Persistence /** * Fetching data */ function requestMyData() { var req = opensocial.newDataRequest(); var f...
Core Services - Persistence /** * Displaying persisted data */ function handleReturnedData(data) { var mydata = data.get(&...
Demonstration <ul><li>Building some simple OpenSocial apps in Orkut </li></ul><ul><ul><li>Displaying your friends </li></u...
Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul>...
OpenSocial’s Container - Shindig <ul><li>What is Shindig? </li></ul><ul><ul><li>“ OpenSource software that allows you to  ...
Shindig Components Shindig Gadget Server Gadget Container JavaScript OpenSocial Container JavaScript Gadget Rendering Serv...
Shindig in Action Running the application Request is made from Client Data is returned and rendered Application Installati...
Demonstration <ul><li>Checking out the Shindig website </li></ul><ul><li>Running and Debugging Shindig from Eclipse </li><...
Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul>...
OpenSocial’s REST APIs <ul><li>Why are REST APIs needed? </li></ul><ul><ul><li>“ What if you don’t have a JavaScript envir...
With REST APIs OpenSocial can go Mobile! <ul><li>The OpenSocial  Mobile  environment potential is obviously huge   </li></...
With REST APIs OpenSocial can go Mobile!
Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul>...
Where to find more info on OpenSocial <ul><li>OpenSocial APIs </li></ul><ul><ul><li>code.google.com/opensocial </li></ul><...
Questions?
Upcoming SlideShare
Loading in …5
×

Ajaxworld Opensocial Presentation

6,569 views

Published on

The presentation I gave at AjaxWorld East.

Published in: Technology, Business

Ajaxworld Opensocial Presentation

  1.  
  2. Introducing OpenSocial “Building Social Ajax applications with OpenSocial” Chris Schalk Developer Advocate Google
  3. Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul><ul><ul><li>JavaScript APIs </li></ul></ul><ul><ul><li>Container Software - Shindig </li></ul></ul><ul><ul><li>REST APIs </li></ul></ul><ul><li>Where to find more information on OpenSocial </li></ul>
  4. Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul><ul><ul><li>JavaScript APIs </li></ul></ul><ul><ul><li>Container Software - Shindig </li></ul></ul><ul><ul><li>REST APIs </li></ul></ul><ul><li>Where to find more information on OpenSocial </li></ul>
  5. What is OpenSocial? <ul><li>OpenSocial is a set of common APIs for building social applications across the web </li></ul><ul><li>It is being developed by Google in conjunction with partners from the Web/Social Application development community </li></ul>
  6. Why OpenSocial is Important? <ul><li>The Web is better when its social </li></ul><ul><li>Isn’t the Web social already? </li></ul><ul><li>100s of millions of users already have signed up for social networks around the world </li></ul><ul><li>That’s great, but we believe it can get better </li></ul>
  7. The problem of social network development “ .. But what if you want to build an application that will run on multiple social websites?” <ul><li>Problem: Developers have to learn multiple APIs to publish in multiple environments </li></ul><ul><li>Solution: OpenSocial allows developers to write applications to a common standard API that will run on multiple websites! </li></ul><ul><li>As each social website opens its environment to developers, it exposes an API </li></ul>
  8. OpenSocial solves this problem
  9. OpenSocial solves this problem
  10. What can OpenSocial do for the Web? <ul><li>It’s about more , more , more </li></ul><ul><li>More applications can be built by developers </li></ul><ul><li>More websites can run these applications </li></ul><ul><li>More users can use these applications </li></ul>For Web developers this equates to distribution , distribution , distribution!
  11. OpenSocial is not Google Social <ul><li>The evolution of OpenSocial… </li></ul><ul><li>“ It is about working with open standards and open partners in a collaborative fashion to build the best technology” </li></ul>
  12. OpenSocial in the US Pictures of hackerthon Partner Hackathon at SixApart in San Francisco Pictures of container meeting Numerous Hackathons held both at Google and at Partners sites <ul><li>On Site Google Hackathons </li></ul><ul><ul><li>We supplied Power, Wifi, & Pizza! </li></ul></ul>
  13. OpenSocial in Japan Pictures of hackerthon 関連ドキュメントの 日本語化を検討中 Pictures of container meeting 世界でも最も Social Site が成功している国の一つ <ul><li>パートナーのオンライン / </li></ul><ul><li>オフラインの参加をサポート </li></ul><ul><ul><li>ハッカーソン </li></ul></ul><ul><ul><li>OpenSocial Container Provider Meeting </li></ul></ul>
  14. OpenSocial in India Pictures of hackerthon Hacking in Delhi Pictures of container meeting Did a multi-city tour in Fall 07 - introducing OpenSocial <ul><li>Kicking off Hackathon in Bangalore </li></ul><ul><ul><li>OpenSocial Container Provider Meeting </li></ul></ul>
  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 …
  16. OpenSocial is not just for friends <ul><li>There is an untapped Enterprise potential </li></ul><ul><li>Instead of friends just sharing photos, messages business partners can interact via social networks </li></ul><ul><li>Google is now partnering with many influential business application providers </li></ul>
  17. OpenSocial Roadmap <ul><li>Version 0.5 was released in a “developer release” on Nov 1st. </li></ul><ul><ul><li>First “sandbox” was made available on Orkut </li></ul></ul><ul><li>Version 0.6 was released in December </li></ul><ul><ul><li>Initial version of Shindig server software was launched as Apache incubator project </li></ul></ul><ul><ul><li>Other sandboxes came live - Hi5, Ning, Plaxo … </li></ul></ul><ul><li>Version 0.7 (production) was released in January </li></ul><ul><ul><li>MySpace, Hi5, Orkut officially launching “very soon” </li></ul></ul>
  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
  20. Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul><ul><ul><li>JavaScript APIs </li></ul></ul><ul><ul><li>Container Software - Shindig </li></ul></ul><ul><ul><li>REST APIs </li></ul></ul><ul><li>Where to find more information on OpenSocial </li></ul>
  21. OpenSocial APIs overview <ul><li>People and Friends Data API Access friends information programmatically </li></ul><ul><li>Activities Data API See what you’re friends are up to Share what you are doing </li></ul><ul><li>Persistence Data API </li></ul><ul><ul><li>Share data with your friends, the world </li></ul></ul>The core OpenSocial services include:
  22. OpenSocial APIs overview <ul><li>Gadgets Core Utilities handling gadget preferences, IO, JSON </li></ul><ul><li>Gadgets Feature-Specific Utilities for working with flash, window management, tabs, rpc, MiniMessage </li></ul>Additional Gadgets services include:
  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:
  29. Demonstration <ul><li>Building some simple OpenSocial apps in Orkut </li></ul><ul><ul><li>Displaying your friends </li></ul></ul><ul><li>Reviewing other OpenSocial applications </li></ul>
  30. Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul><ul><ul><li>JavaScript APIs </li></ul></ul><ul><ul><li>Container Software - Shindig </li></ul></ul><ul><ul><li>REST APIs </li></ul></ul><ul><li>Where to find more information on OpenSocial </li></ul>
  31. OpenSocial’s Container - Shindig <ul><li>What is Shindig? </li></ul><ul><ul><li>“ OpenSource software that allows you to serve OpenSocial applications” </li></ul></ul><ul><li>Is currently an Apache Software Incubator project </li></ul><ul><ul><li>Heavy partner involvement: Ning championed </li></ul></ul><ul><ul><li>Open source reference implementation of OpenSocial & Gadgets technologies </li></ul></ul><ul><li>It’s Goal: </li></ul><ul><ul><li>“ To serve as an easy to use OpenSocial “container in a box” </li></ul></ul>
  32. Shindig Components Shindig Gadget Server Gadget Container JavaScript OpenSocial Container JavaScript Gadget Rendering Servlet <ul><li>Gadget Server </li></ul><ul><ul><li>Renders gadget XML (i.e. from gmodules.com) </li></ul></ul><ul><ul><li>Gadget Container JavaScript </li></ul></ul><ul><li>OpenSocial Container JavaScript </li></ul><ul><ul><li>JavaScript environment for people, activities, persistence </li></ul></ul><ul><li>OpenSocial Gateway Server </li></ul><ul><ul><li>WIP! </li></ul></ul>
  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
  34. Demonstration <ul><li>Checking out the Shindig website </li></ul><ul><li>Running and Debugging Shindig from Eclipse </li></ul><ul><li>Trying out the SampleContainer </li></ul>
  35. Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul><ul><ul><li>JavaScript APIs </li></ul></ul><ul><ul><li>Container Software - Shindig </li></ul></ul><ul><ul><li>REST APIs </li></ul></ul><ul><li>Where to find more information on OpenSocial </li></ul>
  36. OpenSocial’s REST APIs <ul><li>Why are REST APIs needed? </li></ul><ul><ul><li>“ What if you don’t have a JavaScript environment?” </li></ul></ul><ul><li>Progress is now being made on the specification for OpenSocial REST APIs! </li></ul><ul><ul><li>A new proposal is been published </li></ul></ul><ul><ul><ul><li>Posted in “ opensocial-and-gadgets-spec ” Google Group </li></ul></ul></ul><ul><ul><li>Currently receiving feedback </li></ul></ul>
  37. With REST APIs OpenSocial can go Mobile! <ul><li>The OpenSocial Mobile environment potential is obviously huge </li></ul><ul><li>Since OpenSocial based on common Web standards programming is straightforward </li></ul><ul><ul><li>HTML/JavaScript </li></ul></ul><ul><ul><li>Flash/Flash Lite </li></ul></ul><ul><ul><li>REST APIs (Upcoming) </li></ul></ul>
  38. With REST APIs OpenSocial can go Mobile!
  39. Agenda <ul><li>What is OpenSocial and Why is it important? </li></ul><ul><li>A Technical Overview of OpenSocial </li></ul><ul><ul><li>JavaScript APIs </li></ul></ul><ul><ul><li>Container Software - Shindig </li></ul></ul><ul><ul><li>REST APIs </li></ul></ul><ul><li>Where to find more information on OpenSocial </li></ul>
  40. Where to find more info on OpenSocial <ul><li>OpenSocial APIs </li></ul><ul><ul><li>code.google.com/opensocial </li></ul></ul><ul><ul><li>code.google.com/p/opensocial-resources </li></ul></ul><ul><li>Shindig </li></ul><ul><ul><li>incubator.apache.org/shindig </li></ul></ul><ul><li>(Me) [email_address] </li></ul>
  41. Questions?

×