A Technical Overview
Chris Schalk, Google Developer Advocate

Jiwoong Lee, Web developer

Seoul - 11/18/2008
Agenda


    • OpenSocial History & Concepts
    • Building OpenSocial Applications
    • Hosting OpenSocial Applications
...
The OpenSocial History & Concepts




3                                       3
OpenSocial Roadmap


    • Version 0.5 was released in a “developer release” on Nov
    1st.
        • First “sandbox” was...
OpenSocial Roadmap


    • Version v0.8 (0.8.1) is current

    • Latest evolution of OpenSocial as defined by the
    Ope...
OpenSocial 0.9 - Coming Soon!

    • Goal:
       – Enable a faster development experience that is both secure and
       ...
OpenSocial Concepts - What is a Container?


    An OpenSocial “Container” is a website that can host
    OpenSocial appli...
OpenSocial Concepts - What is an Application?


     An “OpenSocial Application” is a gadget that uses social
    features...
Building OpenSocial Applications




9                                      9
Gadgets Basics
     A gadget spec:

     • Is an XML file.
     • Defines metadata about an OpenSocial app.
     • Is high...
Gadgets Basics
     A gadget server:

     •Takes the gadget spec as input.
     •Performs optimizations on the gadget spe...
Gadgets Basics
     A container:

     •Displays the social network’s user interface.
     •Opens an IFrame to the rendere...
Gadgets Basics
     Example gadget XML spec:
     •Uses HTML to print “Hello World”.
     •Colors the text red with CSS.
 ...
Gadgets Basics




14
Making Gadgets Social
     Gadgets can become social with OpenSocial JavaScript API

      OpenSocial API has three core s...
Integrating OpenSocial applications with external servers

        The OpenSocial persistence service provides a way to
  ...
Integrating OpenSocial applications with external servers

        An example request to an external server

             ...
Advanced OpenSocial App Development


      Arne will provide more detailed coverage on OpenSocial
       Application Deve...
Demonstration

     • Building simple OpenSocial Client Applications




19
Hosting OpenSocial Applications




20                                     2
                                       0
How to host OpenSocial Applications


     1. Can build your own server that implements
     OpenSocial specification…

  ...
Hosting OpenSocial Applications

     What is Shindig?

        • Gadget Server
            –Parses gadget XML, renders as...
How Shindig works
     • Gadget Server
     • OpenSocial Data Server

          Yoursite.com           Shindig

          ...
Why use Shindig?

     • Strong Open Source community

     • High quality production-ready code

     • Synchronized with...
Shindig success at hi5


     • Big Traffic
        • 10k req/sec Edge
        • 6k req/sec Origin


     • Hundreds of De...
Demonstration: Trying out Shindig




26                                       26
Adapting Shindig
     •   Adapting Shindig to your own social data


               Shindig

              Gadget Server

...
Demonstration: Shindig with MySQL




28                                       28
RESTful and RPC protocols
     Opens new development models
     • Background processing.
     • Easier Flash integration....
RESTful and RPC protocols
     Communication methods:
     •RESTful (Representational State Transfer)
     •RPC (Remote Pr...
RESTful and RPC protocols
     REST:
     •Resources are URLs.
     Example - People:
      • All people connected to the ...
RESTful and RPC protocols
     Querystring parameters customize requests:
      • Response format (JSON, XML, AtomPub)‫‏‬
...
RESTful and RPC protocols
     REST responses (Person):
      • JSON:
      {
          quot;idquot; : quot;example.org:34...
RESTful and RPC protocols
     REST responses (Person):
      • AtomPub:
      <entry xmlns=quot;http://www.w3.org/2005/At...
RESTful and RPC protocols

     REST has some disadvantages:

     •Batch support requires multiple HTTP requests, or a co...
RESTful and RPC protocols
     RPC:
     •One endpoint - parameters specify methods to call.
     •Batch support.
     •Sp...
RESTful and RPC protocols
     Client libraries are being created for PHP, Java, and Python.
        • Help you connect to...
RESTful and RPC protocols
     Sample: Fetch the current user’s friends:




38
RESTful and RPC protocols
     RESTful and RPC use OAuth for authentication
        • OAuth is an open standard.
        •...
OpenSocial RESTful/RPC and Mobile




40
Demonstration: Trying out the RESTful protocol

     String uid =    quot;05047698136432048591quot;;


     OpenSocialClie...
OpenSocial Future Updates - 0.9




42                                     4
                                       2
What’s coming in OpenSocial 0.9


     • HTML on your own Server
     • OpenSocial Templates
     • Other stuff..
       •...
Dynamic HTML from your own server
     Example gadget XML:
     <Content href=quot;http://developer.com/canvasquot;>
     ...
Using OpenSocial Templates

     Example gadget XML:


     <Content type=quot;htmlquot;>
      <h1>Welcome to the birthda...
Demonstration: Trying out OS Templates




           http://ostemplates-devapp.appspot.com/
46                           ...
The OpenSocial specification process




47                                          4
                                   ...
The OpenSocial specification process




48
The OpenSocial specification process




49
The OpenSocial specification process




50
Useful Links

 New Wiki! (Compliancy, Cross container development …)
   • http://wiki.opensocial.org

 Homepage & specific...
Questions




                 Q&A


52
Upcoming SlideShare
Loading in...5
×

Open Social Summit Korea Overview

2,566

Published on

An overview presentation on OpenSocial technology

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,566
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
98
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Open Social Summit Korea Overview

  1. 1. A Technical Overview Chris Schalk, Google Developer Advocate Jiwoong Lee, Web developer Seoul - 11/18/2008
  2. 2. Agenda • OpenSocial History & Concepts • Building OpenSocial Applications • Hosting OpenSocial Applications • OpenSocial Updates • The OpenSocial Specification Process 2
  3. 3. The OpenSocial History & Concepts 3 3
  4. 4. OpenSocial Roadmap • Version 0.5 was released in a “developer release” on Nov 1st. • First “sandbox” was made available on Orkut • Version 0.6 was released in December • Initial version of Shindig server software was launched as Apache incubator project • Other sandboxes came live - Hi5, Ning, Plaxo … • Version 0.7 (production) was released in January • MySpace, Hi5, Orkut began running 0.7 4
  5. 5. OpenSocial Roadmap • Version v0.8 (0.8.1) is current • Latest evolution of OpenSocial as defined by the OpenSocial development community • Updated JavaScript API • Now contains a RESTful protocol, RPC protocol • hi5, MySpace, orkut, iGoogle now support 0.8 • Specification: http://www.opensocial.org/Technical-Resources/opensocial-spec-v081 5
  6. 6. OpenSocial 0.9 - Coming Soon! • Goal: – Enable a faster development experience that is both secure and efficient Core principles: • Client-side and server-side processing • Standard set of tags with extensibility model – Example: <os:ShowPerson> • More 0.9 later…. 6
  7. 7. OpenSocial Concepts - What is a Container? An OpenSocial “Container” is a website that can host OpenSocial applications • Is an SNS that supports OpenSocial • Can serve Gadgets/OpenSocial Applications • Provides end user social experience • Provides access to site’s social graph through applications 7
  8. 8. OpenSocial Concepts - What is an Application? An “OpenSocial Application” is a gadget that uses social features • OpenSocial applications are gadgets that support the OpenSocial JavaScript APIs • Similar to traditional gadget • Encapsulated in an XML document • Container fetches XML document, parses content, serves rendered HTML/JS/CSS content in an iFrame • OpenSocial applications can rely on third party services 8
  9. 9. Building OpenSocial Applications 9 9
  10. 10. Gadgets Basics A gadget spec: • Is an XML file. • Defines metadata about an OpenSocial app. • Is highly cacheable and does not need a high performance server. Gadgets use existing web standards • XML to define metadata. • HTML for markup. • JavaScript for interactivity. • CSS for presentation. 10
  11. 11. Gadgets Basics A gadget server: •Takes the gadget spec as input. •Performs optimizations on the gadget spec. •Outputs HTML, JavaScript, and CSS as one document. 11
  12. 12. Gadgets Basics A container: •Displays the social network’s user interface. •Opens an IFrame to the rendered gadget. Containers and gadget servers are both run by the social network, but do not need to be on the same machine, or even domain. 12
  13. 13. Gadgets Basics Example gadget XML spec: •Uses HTML to print “Hello World”. •Colors the text red with CSS. •Dynamically adjusts the height of the gadget with JavaScript. <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;Hello World!quot;> <Require feature=quot;dynamic-heightquot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ <h1>Hello World</h1> <style type=quot;text/cssquot;> h1 { color: #dd0000; } </style> <script type=quot;text/javascriptquot;> gadgets.window.adjustHeight(); </script> ]]> </Content> </Module> 13
  14. 14. Gadgets Basics 14
  15. 15. Making Gadgets Social Gadgets can become social with OpenSocial JavaScript API OpenSocial API has three core services: •People & Friends • Access friends information programmatically •Activities • See what you’re friends are up to • Share what you are doing •Persistence • Provide state without a server • Share data with your friends 15
  16. 16. Integrating OpenSocial applications with external servers The OpenSocial persistence service provides a way to store/share small amounts of data on the OpenSocial server, but… • What if you need to store more data than your container allows? • Solution: You can make independent requests out to external servers. • Use: gadgets.io.makeRequest • Can also make authenticated requests using Oauth • Can use cloud services from: Joyent, Amazon or AppEngine! 16
  17. 17. Integrating OpenSocial applications with external servers An example request to an external server gadgets.io.makeRequest OpenSocial Server External 1 2 Server browser 1. Initial request made from gadget 2. Server routes request to external server Requests can be secured using OAuth 17
  18. 18. Advanced OpenSocial App Development Arne will provide more detailed coverage on OpenSocial Application Development at 3:00pm! 18
  19. 19. Demonstration • Building simple OpenSocial Client Applications 19
  20. 20. Hosting OpenSocial Applications 20 2 0
  21. 21. How to host OpenSocial Applications 1. Can build your own server that implements OpenSocial specification… 2. Or can use “Shindig” - Reference implementation for OpenSocial 21
  22. 22. Hosting OpenSocial Applications What is Shindig? • Gadget Server –Parses gadget XML, renders as HTML/JS/CSS • OpenSocial Data Server –Includes RESTful API server • Container JavaScript –Core gadgets, OpenSocial JavaScript environment http://incubator.apache.org/shindig 22
  23. 23. How Shindig works • Gadget Server • OpenSocial Data Server Yoursite.com Shindig Gadget Server Gadget OpenSocial DataServer 23 23
  24. 24. Why use Shindig? • Strong Open Source community • High quality production-ready code • Synchronized with specification • Language neutral (Java, PHP, …) 24
  25. 25. Shindig success at hi5 • Big Traffic • 10k req/sec Edge • 6k req/sec Origin • Hundreds of Developers • 1800+ Apps • 1 Billion hits/day … on 42 Shindig servers 25 25
  26. 26. Demonstration: Trying out Shindig 26 26
  27. 27. Adapting Shindig • Adapting Shindig to your own social data Shindig Gadget Server OpenSocialDataServer ActivityService Social Graph PersonService Data AppDataService 27
  28. 28. Demonstration: Shindig with MySQL 28 28
  29. 29. RESTful and RPC protocols Opens new development models • Background processing. • Easier Flash integration. • Mobile applications. 29
  30. 30. RESTful and RPC protocols Communication methods: •RESTful (Representational State Transfer) •RPC (Remote Procedure Call)‫‏‬ Formats: •XML •JSON •AtomPub 30
  31. 31. RESTful and RPC protocols REST: •Resources are URLs. Example - People: • All people connected to the given user: /people/{guid}/@all • All friends of the given user: /people/{guid}/@friends • Profile of the given user: /people/{guid}/@self • Profile of the authenticated user: /people/@me/@self • Supported Person fields: /people/@supportedFields 31
  32. 32. RESTful and RPC protocols Querystring parameters customize requests: • Response format (JSON, XML, AtomPub)‫‏‬ format={format} • Request extra fields fields={-join|,|field}. • Filtering: filterBy={fieldname} filterOp={operation}filterValue={value} updatedSince={xsdDateTime} networkDistance={networkDistance} • Paging: count={count} sortBy={fieldname} sortOrder={order} startIndex={startIndex} 32
  33. 33. RESTful and RPC protocols REST responses (Person): • JSON: { quot;idquot; : quot;example.org:34KJDCSKJN2HHF0DW20394quot;, quot;displayNamequot; : quot;Janeyquot;, quot;namequot; : {quot;unstructuredquot; : quot;Jane Doequot;}, quot;genderquot; : quot;femalequot; } • XML: <person xmlns=quot;http://ns.opensocial.org/2008/opensocialquot;> <id></id> <displayName></displayName> <name> <unstructured>Jane Doe</unstructured> </name> <gender>female</gender> </person> 33
  34. 34. RESTful and RPC protocols REST responses (Person): • AtomPub: <entry xmlns=quot;http://www.w3.org/2005/Atomquot;> <content type=quot;application/xmlquot;> <person xmlns=quot;http://ns.opensocial.org/2008/opensocialquot;> <name> <unstructured>Jane Doe</unstructured> </name> <gender>female</gender> </person> </content> <title/> <updated>2003-12-13T18:30:02Z</updated> <author/> <id>urn:guid:example.org:34KJDCSKJN2HHF0DW20394</id> </entry> 34
  35. 35. RESTful and RPC protocols REST has some disadvantages: •Batch support requires multiple HTTP requests, or a contrived URL scheme. •Specifying multiple users via querystring is difficult. Is ?uid=1234,5678 the same resource as ?uid=5678,1234 ? 35
  36. 36. RESTful and RPC protocols RPC: •One endpoint - parameters specify methods to call. •Batch support. •Specify collections of users through passed arguments, not URLs. Example - Fetch current user: • Request • Response POST /rpc HTTP/1.1 HTTP/1.x 207 Multi-Status Host: api.example.org Content-Type: application/json Authorization: <Auth token> { Content-Type: application/json quot;idquot; : quot;myselfquot;, { quot;resultquot; : { quot;methodquot; : quot;people.getquot;, quot;idquot; : quot;example.org:34KJDCSKJN2HHF0DW20394quot;, quot;idquot; : quot;myselfquot;, quot;namequot; : { quot;unstructuredquot; : quot;Jane Doequot;}, quot;paramsquot; : { quot;genderquot; : quot;femalequot; quot;useridquot; : quot;@mequot;, } quot;groupidquot; : quot;@selfquot; } } } 36
  37. 37. RESTful and RPC protocols Client libraries are being created for PHP, Java, and Python. • Help you connect to OpenSocial containers, and work with social data on your server. Sample: log into a container: 37
  38. 38. RESTful and RPC protocols Sample: Fetch the current user’s friends: 38
  39. 39. RESTful and RPC protocols RESTful and RPC use OAuth for authentication • OAuth is an open standard. • Client libraries will help make this process easier for developers. Sample: use OAuth to get an access token for a user: 39 3 9
  40. 40. OpenSocial RESTful/RPC and Mobile 40
  41. 41. Demonstration: Trying out the RESTful protocol String uid = quot;05047698136432048591quot;; OpenSocialClient client = new OpenSocialClient(quot;orkut.comquot;); client.setProperty(OpenSocialClient.Property.RESTFUL_BASE_URI, quot;http://orkut.com/social/rest/quot;); client.setProperty(OpenSocialClient.Property.TOKEN, quot;hpelsWNlP2SN8zkJiW6qBawcfxwquot;); client.setProperty(OpenSocialClient.Property.SHARED_SECRET, quot;AounHfbA8JLJxhMmAFCoffTKquot;); try { Person p; OpenSocialObject d; p = client.fetchPerson(uid); System.out.println(quot;Display name: quot; + p.getDisplayName() + quot;¥nquot;); Collection<Person> c = client.fetchFriends(uid); for (Person friend : c) { System.out.println(friend.getDisplayName() + quot; - quot; + friend.getId()); } } 41 41
  42. 42. OpenSocial Future Updates - 0.9 42 4 2
  43. 43. What’s coming in OpenSocial 0.9 • HTML on your own Server • OpenSocial Templates • Other stuff.. • http://wiki.opensocial.org/index.php?title=Spec_Changes 43
  44. 44. Dynamic HTML from your own server Example gadget XML: <Content href=quot;http://developer.com/canvasquot;> <os:PeopleRequest userId=quot;@viewerquot; groupId=quot;@friendsquot; fields=quot;name,birthdayquot; key=quot;ViewerFriendsquot;> </Content> Example PHP: <?php // Code here will pull POST param into $ViewerFriends echo quot;<h1>Welcome to the birthday app</h1>quot;; foreach ($ViewerFriends as $friend) { if ($friend['birthday']) { echo quot;<div>quot;.$friend['name'].quot;'s birthday isquot;. $friend['birthday']quot;</div>quot;; } } ?> 44
  45. 45. Using OpenSocial Templates Example gadget XML: <Content type=quot;htmlquot;> <h1>Welcome to the birthday app!</h1> <script type=quot;text/os-templatequot;> <os:PeopleRequest userId=quot;@viewerquot; groupId=quot;@friendsquot; fields=quot;name,birthdayquot; key=quot;friendsquot;> <div repeat=quot;${friends}quot;> ${Name}'s birthday is ${Birthday} </div> </script> </Content> 45
  46. 46. Demonstration: Trying out OS Templates http://ostemplates-devapp.appspot.com/ 46 46
  47. 47. The OpenSocial specification process 47 4 7
  48. 48. The OpenSocial specification process 48
  49. 49. The OpenSocial specification process 49
  50. 50. The OpenSocial specification process 50
  51. 51. Useful Links New Wiki! (Compliancy, Cross container development …) • http://wiki.opensocial.org Homepage & specification: • http://www.opensocial.org Get on the forums: • http://groups.google.com/group/opensocial Subscribe to the Shindig mailing list: • shindig-dev-subscribe@incubator.apache.org Help shape the specification: • http://groups.google.com/group/opensocial-and-gadgets-spec/ Check out Shindig: • http://incubator.apache.org/shindig OS Templates: • http://groups.google.com/group/opensocial-and-gadgets-spec/web/opensocial-templates 51
  52. 52. Questions Q&A 52
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×