0
OpenSocial
       a standard for the social web




 Colloque MATI - Le Web 2.0 et l'éducation
                           ...
OpenSocial’s goal:
Make the web more social




                           2
Making the web better
     by making it social

   What does social mean?
What does “social” mean?




           “Eliette, what do you do with your friends?”


                                   ...
What does “social” mean?




    This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alik...
“We look at each other”




                          6
What does “social” mean?




    This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alik...
“Talking”




            8
What does “social” mean?




    This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alik...
“Laughing”




             10
What does “social” mean?




    This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alik...
“We help each other”




                       12
What does “social” mean?




    This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alik...
“We read together”




                     14
What does “social” mean?




    This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alik...
“We do projects together”

                            16
Raoul: a social object for Charlotte (3 year old)
Jaiku’s Jyri Engeström's 5 rules for social
 networks: social objects
1. What is your object?
2. What are your verbs?
3. H...
How do we socialize objects
online
without having to create yet
another social network?
The social internet
A social website..
•  rovides a feature that becomes more engaging as the number of users
 P
grows.
• ...
The social internet
Some social websites...




                          22
The social internet
A social website..
•  as overhead to manage users and relationships.
 H
•  rows slowly because users m...
The social internet
A social network..
•  anages large numbers of users and relationships.
 M
• s slow to add new features...
The social internet
Many social networks...




                          25
The social internet
How do we add new features to social networks?
•  ake the social network a platform.
 M
•  ive creativ...
The social internet
A social application...
•  ets the social network manage users and relationships.
 L
•  dds new featur...
The social internet
Lots of social apps...




                         28
Need for a social API
How do we put apps in social networks?




                                         29
A day in the life of a social app developer




                                              30
A day in the life of a social app developer




                                              31
A day in the life of a social app developer




                                              32
A day in the life of a social app developer




                                              33
A day in the life of a social app developer




                                              34
A day in the life of a social app developer




                                              35
Introduction to OpenSocial
Numbers:
•  9+ implemented Containers
 1
•  0+ committed Containers
 4
•  000+ applications
 3
...
Today: 600 Million User Reach   37
OpenSocial “Containers”




                          38
Where is OpenSocial live today?




• Live to Users:                  Live Developer Sandboxes:
 •    MySpace             ...
The OpenSocial APIs
Versions:
•  .6 - Client-side APIs introduced
 0
•  .7 - Server-side APIs introduced
 0
•  .81 (curren...
Gadgets
Not widgets, not sprockets, not gidgets, not wadgets




                                                       41
Gadgets
A gadget spec:
• s an XML file.
 I
•  efines metadata about an OpenSocial app.
 D
• s highly cacheable and does no...
Gadgets
A gadget server:
•  akes the gadget spec as input.
 T
•  erforms optimizations on the gadget spec.
 P
•  utputs HT...
Gadgets

A container:
•  isplays the social network’s user interface.
 D
•  pens an IFrame to the rendered gadget.
 O




...
Gadgets
Example gadget XML spec:
•  ses HTML to print “Hello World”.
 U
•  olors the text red with CSS.
 C
•  ynamically a...
Gadgets
Requesting the gadget XML spec:
1. The client requests an app to be rendered.




                                ...
Gadgets
Requesting the gadget XML spec:
1. The client requests an app to be rendered.
2. The container fetches the gadget ...
Gadgets
Requesting the gadget XML spec:
1. The client requests an app to be rendered.
2. The container fetches the gadget ...
Gadgets
Requesting the gadget XML spec:
•  ecause the gadget spec is simple, it can be cached easily.
 B
•  aching reduces...
Gadgets
Requesting a cached gadget XML spec:
1.  he client requests an app to be rendered. The container already
  T
 has ...
Gadgets
Requesting a cached gadget XML spec:
1.  he client requests an app to be rendered. The container already
  T
 has ...
Gadgets
What kind of rewriting is done by the gadget server?
•  ewrite links to use content proxies.
 R
•  ewrite relative...
Gadgets
What are views?
•  adgets can render in different locations on a container.
 G
•  endering area changes from small...
Gadgets




iGoogle quot;homequot; view:
•  n iGoogle, the quot;homequot; view is a small,
 O
private page that does not a...
Gadgets




          iGoogle quot;canvasquot; view:
          •  arge private view, allows ads.
           L



         ...
Gadgets
Working with views in the gadget XML:
•  Content> sections are repeated for each view.
 <
•  dd a view=quot;view n...
Gadgets

JavaScript utility functions for gadgets:
•  adgets.io.makeRequest()
 g
Make cross-domain AJAX calls to remote se...
Gadgets
gadgets.io.makeRequest():
•  ake cross-domain AJAX calls to remote servers.
 M



Remote content:
•  ost interesti...
Gadgets
Requesting remote content:
1.  he rendered app calls gadgets.io.makeRequest() to fetch
  T
 remote content. This c...
Gadgets
Requesting remote content:
1.  he rendered app calls gadgets.io.makeRequest() to fetch
  T
 remote content. This c...
Gadgets
Requesting remote content:
1.  he rendered app calls gadgets.io.makeRequest() to fetch
  T
 remote content. This c...
Gadgets

Add extra features to your gadget:
•  ynamic-height - Change the size of your gadget in the container.
 d
•  iews...
Gadgets




          <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?
          ><Module> <ModulePrefs title=quot;H...
The OpenSocial JavaScript API
“It's people!”




                                64
The OpenSocial JavaScript API
Representing users:
•  lient-side, users must work with the VIEWER and the OWNER.
 C




   ...
The OpenSocial JavaScript API
Multiple personalities:
•  hen you visit your own profile, you are both the VIEWER and the O...
The OpenSocial JavaScript API
 OpenSocial requests:
 •  n OpenSocial DataRequest is created.
  A
 •  equests are added to ...
The OpenSocial JavaScript API
OpenSocial responses:
•  esponses are bundled according to the keys specified in the request...
The OpenSocial JavaScript API
Working with people:
 • opensocial.Person - JavaScript representation of a user.




       ...
The OpenSocial JavaScript API
Request one person:
   req.add(req.newFetchPersonRequest(idspec, opt_params), quot;keyquot;)...
The OpenSocial JavaScript API
Methods available on an OpenSocial Person:
• getDisplayName()
 Gets a text display name for ...
The OpenSocial JavaScript API
     An OpenSocial Person's fields:
• 
     ABOUT_MEACTIVITIESADDRESSESAGEBODY_TYPEBOOKSCARS...
The OpenSocial JavaScript API
Working with people:
 • A Collection represents many opensocial.Person objects.




        ...
The OpenSocial JavaScript API
Request many people:
   var idspec = opensocial.newIdSpec({
     “userId” : “OWNER”,
     “g...
The OpenSocial JavaScript API
Working with data:
 • Persistent data gives apps key, value storage directly on the containe...
The OpenSocial JavaScript API
Set persistent data:
   req.add(req.newUpdatePersonAppDataRequest(idspec, key, value));

  •...
The OpenSocial JavaScript API
Fetch persistent data:
   var idspec = opensocial.newIdSpec({
     quot;userIdquot; : quot;O...
The OpenSocial JavaScript API
Fetch persistent data:
  • Data is returned as an object indexed by ID number, then as an ob...
The OpenSocial JavaScript API
Working with activities:
 • API to post information about what users are doing with your app...
The OpenSocial JavaScript API
Post an activity:
   function postActivity(text) {
      var params = {};
      params[opens...
RESTful and RPC protocols
Servers talking to servers




                             81
RESTful and RPC protocols
Opens new development models
•  ackground processing.
 B
•  asier Flash integration.
 E
•  obile...
RESTful and RPC protocols
Communication methods:
•  ESTful (Representational State Transfer)
 R
•  PC (Remote Procedure Ca...
RESTful and RPC protocols
REST:
•  esources are URLs.
 R

Example - People:
 • All people connected to the given user:
   ...
RESTful and RPC protocols
Querystring parameters customize requests:
 • Response format (JSON, XML, AtomPub)
   format={fo...
RESTful and RPC protocols
REST responses (Person):
 • JSON:

 { quot;idquot; : quot;example.org:34KJDCSKJN2HHF0DW20394quot...
RESTful and RPC protocols
REST responses (Person):
 • AtomPub:


 <entry xmlns=quot;http://www.w3.org/2005/Atomquot;> <con...
RESTful and RPC protocols
REST:
•  erform operations using different HTTP methods on each URL.
 P


               CRUD:  ...
RESTful and RPC protocols
REST has some disadvantages:
•  atch support requires multiple HTTP requests, or a contrived URL...
RESTful and RPC protocols
RPC:
•  ne endpoint - parameters specify methods to call.
 O
•  atch support.
 B
•  pecify colle...
RESTful and RPC protocols
Authentication:
•  oth protocols use OAuth to identify users and apps.
 B
•  epending on what th...
RESTful and RPC protocols
Client libraries are being created for PHP, Java, and Python.
•  elp you connect to OpenSocial c...
RESTful and RPC protocols
RESTful and RPC use OAuth for authentication
•  Auth is an open standard.
 O
•  lient libraries ...
RESTful and RPC protocols
•  nce OAuth is used, you can store a user token for later access.
 O

Sample: use an existing t...
RESTful and RPC protocols
•  nce authentication has happened, requests are easy:
 O

Sample: Fetch the current user:




 ...
RESTful and RPC protocols
Sample: Fetch the current user’s friends:




                                            96
Development Models
How OpenSocial apps are built




                                97
OpenSocial Tools
What sets us apart from the animals




                                      98
Shindig
Writing a gadget server is difficult:
•  ast changing API - hard to keep up.
 F
•  tandardization is hard to get r...
Shindig
Apache Shindig to the rescue!
•  pen Source project.
 O
•  vailable in Java and PHP.
 A
•  un by itself and connec...
OpenSocial Dev App
Development tool to test out JS code in different containers




http://osda.appspot.com
              ...
Upcoming Features
Caja and Templates




                     102
Caja
When JavaScript goes bad
•  adgets can be a new vector for phishing, spam, malware.Social spread of
 G
gadgets can sp...
Caja
Caja is:

  • A capability-based Javascript sanitizer.An Open Source project from
   Google.Optional but recommended ...
Templates
Need for a templating language:
•  evelopers need a simple way to convert OpenSocial data to HTML.
 D
•  OM mani...
Templates




<script type=quot;text/javascriptquot;    src=quot;http://ostemplates-demo.appspot.co
templates.jsquot;></sc...
Templates
Templates developer application available:




http://ostemplates-devapp.appspot.com/
                          ...
The OpenSocial specification process
“We can fix it, we have the technology”




                                         ...
The OpenSocial specification process


http://opensocial.org/

A social Network for the OpenSocial developer community



...
The OpenSocial specification process




                                       110
The OpenSocial specification process




                                       111
The OpenSocial specification process




                                       112
The OpenSocial specification process




                                       113
Container Specific Extensions
MySpace
                 •  photo albums
                     •  videos

hi5
               ...
Challenges
Nobody said this was going to be easy




                                        115
Challenges


    This lumberjack will
    thank anyone who
       helps solve the
   following problems...




           ...
Challenges
Cross container development is still tricky:
•  ontainers may not follow the standard.
 C
•  ontainers may foll...
Challenges
No central directory
•  ard for apps to spread to many containers.
 H
•  pps need to work with different instal...
Challenges
Scaling is hard:
•  asy to start and get some users.
 E




                                      119
Challenges
Scaling is hard:
•  eing popular on one social network
 B
can push your server to the limit...




            ...
Scaling is hard:
• ..being popular on many networks
 .
will push you right over.




                                     ...
Hosting your application

 •  Host it anywhere you want to, with any back-end
 •  Keep in mind:
    o  Popular apps like i...
OpenSocial Apps Monetization




                               123
OpenSocial Monetization
 •  Ads from Ad Networks
   o  AdSense, RightMedia
   o  BuddyPoke, Rate My Friend
 •  Brand/Priva...
Success Story: Buddy Poke




 •    #1 OpenSocial app on orkut
 •    8M installs for orkut, hi5, MySpace
 •    $1-2 CPM
 •...
Success Story: PhotoBuzz




•    6M+ installs on hi5 and orkut
•    CPM $1-3, especially good on orkut
•    4M buzzes per...
Shindig




          127
Becoming an OpenSocial Container


•  Question:
   o  How do you become an OpenSocial container?
•  Answer:
   o  The Apac...
What is Shindig ?

•  Open source reference implementation of OpenSocial &
   Gadgets specification
•  An Apache Software ...
Introduction to Shindig Architecture
•  Gadget Server
•  Social Data Server
•  Gadget Container JavaScript
Gadget Server
Social Server
Social Server - RESTful API
                    •  Preview available on
                             o  iGoogle
          ...
Shindig Server Side (Java) Architecture
Shindig Client Side Libraries
Opensocial – JS Library
Implementing Shindig - Data sources
            •  Integrate with your own data sources
                          o  Peopl...
Implementing Shindig - PHP
                    •  Implement functions

function getActivities($ids)
{
   $activities = arr...
Implementing Shindig - Java
Code at http://chrisschalk.com/shindig_docs/io/shindig-io.html
import org.apache.shindig.socia...
Implementing Shindig - Java
  public ResponseItem<List<Activity>> getActivities(List<String>
ids,
     SecurityToken token...
Implementing - Make it a platform
•  Add UI Elements
   o  App Gallery
   o  App Canvas
   o  App Invites
   o  Notificati...
Implementing - Scale it Out!
•    Prevent Concurrency issues
•    Reduce Latency
•    Add Caching
•    Add more caching!
Usage Example: Sample Container
•  Static html sample container
•  No effort to get up and running
•  No database or featu...
Usage Example: Partuza
•    Partuza is a Example social network site, written in PHP
•    Allows for local gadget developm...
OpenSocial for intranet, portals
Sun Microsystems
    •  Socialsite: Shindig + gadget based UI written in Java
         • ...
OpenSocial for the Enterprise: Exo
Platforms
Summary
•  Become an OpenSocial Container
   o  Get Shindig (PHP or Java)
   o  Look at examples & documentation
   o  Imp...
Google Friend Connect




                        148
What is Friend Connect?
Google Friend Connect lets a site owner instantly awaken and
    strengthen the community that vis...
Friend Connect gives ...

•  Users
          more ways to do more things with my friends
  o ...

•  Site owners
   o ... ...
Friend Connect is a hub
Social Networks can plug one or more of the following into it

•    Login
•    Profile
•    Friend...
Friend Connect APIs...for all tastes

•  Non developers
   •  Source a script to add OpenSocial
      gadgets on the page
...
Conclusion




             154
Open Stack
Conclusion
•  OpenSocial is mature and successful
•  An open stack is emerging on the server:
   oauth, openid, portable c...
Resources




            157
Resources

• OpenSocial Tutorial: http://rurl.org/ss3

• OpenSocial Spec, Foundation, Reference: http://opensocial.org

• ...
Learn more
code.google.com




                  159
OpenSocial - Montreal 2009 - Colloque MATI - Le Web 2.0 et l'éducation
OpenSocial - Montreal 2009 - Colloque MATI - Le Web 2.0 et l'éducation
Upcoming SlideShare
Loading in...5
×

OpenSocial - Montreal 2009 - Colloque MATI - Le Web 2.0 et l'éducation

4,274

Published on

State of opensocial and how it applies for education.

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,274
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
153
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Transcript of "OpenSocial - Montreal 2009 - Colloque MATI - Le Web 2.0 et l'éducation"

  1. 1. OpenSocial a standard for the social web Colloque MATI - Le Web 2.0 et l'éducation Montreal Patrick Chanezon March 19 2009 chanezon@google.com 1
  2. 2. OpenSocial’s goal: Make the web more social 2
  3. 3. Making the web better by making it social What does social mean?
  4. 4. What does “social” mean? “Eliette, what do you do with your friends?” 4
  5. 5. What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 5
  6. 6. “We look at each other” 6
  7. 7. What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 7
  8. 8. “Talking” 8
  9. 9. What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 9
  10. 10. “Laughing” 10
  11. 11. What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 11
  12. 12. “We help each other” 12
  13. 13. What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 13
  14. 14. “We read together” 14
  15. 15. What does “social” mean? This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License 15
  16. 16. “We do projects together” 16
  17. 17. Raoul: a social object for Charlotte (3 year old)
  18. 18. Jaiku’s Jyri Engeström's 5 rules for social networks: social objects 1. What is your object? 2. What are your verbs? 3. How can people share the objects? 4. What is the gift in the invitation? 5. Are you charging the publishers or the spectators? http://tinyurl.com/yus8gw
  19. 19. How do we socialize objects online without having to create yet another social network?
  20. 20. The social internet A social website.. •  rovides a feature that becomes more engaging as the number of users P grows. •  ses relationships between people to present users interesting information. U 21
  21. 21. The social internet Some social websites... 22
  22. 22. The social internet A social website.. •  as overhead to manage users and relationships. H •  rows slowly because users must sign up to use the site. G What if we remove the overhead? •  evelopers can focus D on providing features, not managing users. 23
  23. 23. The social internet A social network.. •  anages large numbers of users and relationships. M • s slow to add new features. I 24
  24. 24. The social internet Many social networks... 25
  25. 25. The social internet How do we add new features to social networks? •  ake the social network a platform. M •  ive creative developers the tools to add the features themselves. G 26
  26. 26. The social internet A social application... •  ets the social network manage users and relationships. L •  dds new features to the social network. A •  ets users “install” the application without signing up for new accounts. L •  rows quickly because users are already communicating with each other. G 27
  27. 27. The social internet Lots of social apps... 28
  28. 28. Need for a social API How do we put apps in social networks? 29
  29. 29. A day in the life of a social app developer 30
  30. 30. A day in the life of a social app developer 31
  31. 31. A day in the life of a social app developer 32
  32. 32. A day in the life of a social app developer 33
  33. 33. A day in the life of a social app developer 34
  34. 34. A day in the life of a social app developer 35
  35. 35. Introduction to OpenSocial Numbers: •  9+ implemented Containers 1 •  0+ committed Containers 4 •  000+ applications 3 •  00,000,000+ of users 4 In Thailand: 8 M users 36
  36. 36. Today: 600 Million User Reach 37
  37. 37. OpenSocial “Containers” 38
  38. 38. Where is OpenSocial live today? • Live to Users: Live Developer Sandboxes: •  MySpace •  iGoogle •  orkut •  imeem •  hi5 •  CityIN •  Freebar •  Tianya •  Friendster •  •  Plaxo Pulse Webon from Lycos •  IDtail •  Mail.ru •  YiQi •  lokalisten •  Netlog •  Viadeo •  Hyves •  51.com – •  LinkedIn •  MyAOL! - •  Ning Full List: http://opensocial.org/ 39
  39. 39. The OpenSocial APIs Versions: •  .6 - Client-side APIs introduced 0 •  .7 - Server-side APIs introduced 0 •  .81 (current) - Server-side APIs finalized 0 Client-side: •  adgets XML G •  adgets JavaScript G •  penSocial JavaScript O Server-side: •  ESTful protocol R •  PC protocol R 40
  40. 40. Gadgets Not widgets, not sprockets, not gidgets, not wadgets 41
  41. 41. Gadgets A gadget spec: • s an XML file. I •  efines metadata about an OpenSocial app. D • s highly cacheable and does not need a high performance server. I Gadgets use existing web standards •  ML to define metadata. X •  TML for markup. H •  avaScript for interactivity. J •  SS for presentation. C 42
  42. 42. Gadgets A gadget server: •  akes the gadget spec as input. T •  erforms optimizations on the gadget spec. P •  utputs HTML, JavaScript, and CSS as one document. O 43
  43. 43. Gadgets A container: •  isplays the social network’s user interface. D •  pens an IFrame to the rendered gadget. O Containers and gadget servers are both run by the social network, but do not need to be on the same machine, or even domain. 44
  44. 44. Gadgets Example gadget XML spec: •  ses HTML to print “Hello World”. U •  olors the text red with CSS. C •  ynamically adjusts the height of the gadget with JavaScript. D <?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> 45
  45. 45. Gadgets Requesting the gadget XML spec: 1. The client requests an app to be rendered. 46
  46. 46. Gadgets Requesting the gadget XML spec: 1. The client requests an app to be rendered. 2. The container fetches the gadget XML spec from its host. 47
  47. 47. Gadgets Requesting the gadget XML spec: 1. The client requests an app to be rendered. 2. The container fetches the gadget XML spec from its host. 3. The container renders the gadget into HTML, which is displayed to the client. 48
  48. 48. Gadgets Requesting the gadget XML spec: •  ecause the gadget spec is simple, it can be cached easily. B •  aching reduces the load on your server, great when you have millions of C users. 49
  49. 49. Gadgets Requesting a cached gadget XML spec: 1.  he client requests an app to be rendered. The container already T has a copy of the spec stored in its cache. 50
  50. 50. Gadgets Requesting a cached gadget XML spec: 1.  he client requests an app to be rendered. The container already T has a copy of the spec stored in its cache. 2.  he container renders the gadget into HTML, which is displayed T to the client. 51
  51. 51. Gadgets What kind of rewriting is done by the gadget server? •  ewrite links to use content proxies. R •  ewrite relative links to full paths (some containers). R •  eturn only content for the current view. R 52
  52. 52. Gadgets What are views? •  adgets can render in different locations on a container. G •  endering area changes from small to large. R •  ertain pages might be public, some are private. C •  ontainers may have different policies depending on the page, C especially when the gadget displays ads. •  iews provide a way for gadgets to provide different functionality depending V on where it is rendered. 53
  53. 53. Gadgets iGoogle quot;homequot; view: •  n iGoogle, the quot;homequot; view is a small, O private page that does not allow ads. 54
  54. 54. Gadgets iGoogle quot;canvasquot; view: •  arge private view, allows ads. L 55
  55. 55. Gadgets Working with views in the gadget XML: •  Content> sections are repeated for each view. < •  dd a view=quot;view namequot; attribute to each section. A •  ontent sections may support multiple views, for example C view=quot;home,canvasquot; <?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; view=quot;homequot;> <! [CDATA[ ... ]]> </Content> <Content type=quot;htmlquot; view=quot;canvasquot;> <! [CDATA[ ... ]]> </Content></Module> 56
  56. 56. Gadgets JavaScript utility functions for gadgets: •  adgets.io.makeRequest() g Make cross-domain AJAX calls to remote servers. •  adgets.json.parse() and gadgets.json.stringify() g Native JSON support. •  adgets.util.escapeString() g Make text safe for display via innerHTML. •  adgets.util.registerOnLoadHandler() g Execute code when the page is finished loading. 57
  57. 57. Gadgets gadgets.io.makeRequest(): •  ake cross-domain AJAX calls to remote servers. M Remote content: •  ost interesting gadgets will need to M work with content stored on different servers. •  JAX cannot cross domains, so you A cannot request content from your own server. •  SONP is only really good for one-way J data transfer. •  adgets with millions of users can G overwhelm a remote site. 58
  58. 58. Gadgets Requesting remote content: 1.  he rendered app calls gadgets.io.makeRequest() to fetch T remote content. This call is sent to the container. 59
  59. 59. Gadgets Requesting remote content: 1.  he rendered app calls gadgets.io.makeRequest() to fetch T remote content. This call is sent to the container. 2.  he container requests content from the specified URL. T 60
  60. 60. Gadgets Requesting remote content: 1.  he rendered app calls gadgets.io.makeRequest() to fetch T remote content. This call is sent to the container. 2.  he container requests content from the specified URL. T 3.  he container returns the response to the application, which renders T the data. 61
  61. 61. Gadgets Add extra features to your gadget: •  ynamic-height - Change the size of your gadget in the container. d •  iews - Navigate between different surfaces of the container. v •  kins - Make your gadget change its styles to match the container. s •  ontainers may offer custom features... C <?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[ ... ]]> </Content></Module> 62
  62. 62. Gadgets <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ? ><Module> <ModulePrefs title=quot;Hello Social!quot;> <Require feature=quot;opensocial-0.8quot; /> </ ModulePrefs> <Content type=quot;htmlquot;> <! [CDATA[ ... ]]> </Content></ Module> The OpenSocial JavaScript API is a gadget feature, too! 63
  63. 63. The OpenSocial JavaScript API “It's people!” 64
  64. 64. The OpenSocial JavaScript API Representing users: •  lient-side, users must work with the VIEWER and the OWNER. C 65
  65. 65. The OpenSocial JavaScript API Multiple personalities: •  hen you visit your own profile, you are both the VIEWER and the OWNER. W 66
  66. 66. The OpenSocial JavaScript API OpenSocial requests: •  n OpenSocial DataRequest is created. A •  equests are added to the DataRequest. R •  he DataRequest is sent to the server asynchronously. T •  hen the request finishes, the supplied callback will be called. W function request() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(quot;OWNERquot;), quot;get_ownerquot;); req.add(req.newFetchPersonRequest(quot;VIEWERquot;), quot;get_viewerquot;); req.add(req.newFetchActivitiesRequest(quot;VIEWERquot;), quot;vactivitiesquot;); req.add(req.newFetchPersonAppDataRequest(quot;OWNERquot;, quot;*quot;), quot;odataquot;); ... req.send(response);}; function response(data) { ... }; gadgets.util.registerOnLoadHandler(request); 67
  67. 67. The OpenSocial JavaScript API OpenSocial responses: •  esponses are bundled according to the keys specified in the request. R •  heck for an error at the global response level. C •  heck for an error at the specific response level. C •  se getData() to retrieve the actual information in a request. U function response(data) { if (data.hadError()) { if (data.get(quot;get_ownerquot;).hadError()) { ... } if (data.get(quot;get_viewerquot;).hadError()) { ... } ... } var owner = data.get(quot;get_ownerquot;).getData(); var viewer = data.get(quot;get_viewerquot;).getData(); }; 68
  68. 68. The OpenSocial JavaScript API Working with people: • opensocial.Person - JavaScript representation of a user. 69
  69. 69. The OpenSocial JavaScript API Request one person: req.add(req.newFetchPersonRequest(idspec, opt_params), quot;keyquot;); • idspec can be either “VIEWER”, “OWNER” or an ID number. • opt_params contains extra request parameters, such as which profile fields to fetch. newFetchPersonRequest responses: var owner = data.get(quot;keyquot;).getData(); alert(owner.getDisplayName()); • Data contains a single opensocial.Person object. • Person objects can contain lots of information, such as addresses, companies, phone numbers, favorite movies, and thumbnail urls. 70
  70. 70. The OpenSocial JavaScript API Methods available on an OpenSocial Person: • getDisplayName() Gets a text display name for this person; guaranteed to return a useful string. getField(key, opt_params) Gets data for this person that is associated with the specified key. getId() Gets an ID that can be permanently associated with this person. isOwner() Returns true if this person object represents the owner of the current page. isViewer() Returns true if this person object represents the currently logged in user. 71
  71. 71. The OpenSocial JavaScript API An OpenSocial Person's fields: •  ABOUT_MEACTIVITIESADDRESSESAGEBODY_TYPEBOOKSCARSCHILDRENCURRENT_ LOCATIONDATE_OF_BIRTHDRINKEREMAILSETHNICITYFASHIONFOODGENDERHAPPIES T_WHENHAS_APPHEROESHUMORIDINTERESTS • SEXUAL_ORIENTATION • SMOKER • SPORTSSTATUSTAGS • THUMBNAIL_URL • TIME_ZONETURN_OFFSTURN_ONSTV_SHOWSURLS • JOB_INTERESTSJOBSLANGUAGES_SPOKEN •  LIVING_ARRANGEMENTLOOKING_FORMOVIESMUSICNAMENETWORK_PRESENCENICK NAMEPETSPHONE_NUMBERSPOLITICAL_VIEWSPROFILE_SONGPROFILE_URLPROFILE _VIDEOQUOTESRELATIONSHIP_STATUSRELIGIONROMANCESCARED_OFSCHOOLS 72
  72. 72. The OpenSocial JavaScript API Working with people: • A Collection represents many opensocial.Person objects. 73
  73. 73. The OpenSocial JavaScript API Request many people: var idspec = opensocial.newIdSpec({ “userId” : “OWNER”, “groupId” : “FRIENDS” }); req.add(req.newFetchPeopleRequest(idspec, opt_params), quot;keyquot;); • idspec is an object that can represent groups of people. “userId” can be “VIEWER” or “OWNER” or an ID, and “groupId” can be “SELF”, “FRIENDS”, or the name of a group. • opt_params contains extra request parameters, such as which profile fields to fetch, and how to order or filter the returned people. newFetchPersonRequest responses: var owner_friends = data.get(quot;keyquot;).getData(); owner_friends.each(function (person) { alert(person.getDisplayName()); }); • Data contains a Collection of opensocial.Person objects. Iterate over these by using the each() method. 74
  74. 74. The OpenSocial JavaScript API Working with data: • Persistent data gives apps key, value storage directly on the container. • String only, but conversion to JSON allows for storage of complex objects. • Storage per app per user - scales well with growth. • Ideal for settings, customizations. 75
  75. 75. The OpenSocial JavaScript API Set persistent data: req.add(req.newUpdatePersonAppDataRequest(idspec, key, value)); • idspec can only be “VIEWER”. • key is the name under which this data will be stored. • value is a string representing the data to store. 76
  76. 76. The OpenSocial JavaScript API Fetch persistent data: var idspec = opensocial.newIdSpec({ quot;userIdquot; : quot;OWNERquot;, quot;groupIdquot; : quot;SELFquot; }); req.add(req.newFetchPersonAppDataRequest(idspec, keys), quot;keyquot;); req.add(req.newFetchPersonRequest(quot;OWNERquot;), quot;ownerkeyquot;); • idspec is an object that can represent groups of people, the same as newFetchPeopleRequest. • keys is a list of persistent data keys to retrieve the data for. • The owner is requested because the data returned is indexed by user ID and we want the owner’s data. newFetchPersonAppDataRequest responses: var app_data = data.get(quot;keyquot;).getData(); var value = app_data[owner.getId()][key]; 77
  77. 77. The OpenSocial JavaScript API Fetch persistent data: • Data is returned as an object indexed by ID number, then as an object indexed by key name, even if there is only data returned for one user! { quot;1234567890quot; : { quot;key1quot; : quot;value1quot; } } • One person, multiple keys: { quot;1234567890quot; : { quot;key1quot; : quot;value1quot;, quot;key2quot; : quot;value2quot; } } • Multiple people: { quot;1234567890quot; : { quot;key1quot; : quot;value1quot; }, quot;2345678901quot; : { quot;key1quot; : quot;value2quot; } } 78
  78. 78. The OpenSocial JavaScript API Working with activities: • API to post information about what users are doing with your app. • Many containers have support for images and some HTML. • Channel to grow your application. orkut MySpace hi5 79
  79. 79. The OpenSocial JavaScript API Post an activity: function postActivity(text) { var params = {}; params[opensocial.Activity.Field.TITLE] = text; var activity = opensocial.newActivity(params); opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, callback); }; • Assign the activity text to the TITLE field. • Call opensocial.newActivity() to create a new Activity instance. • Call opensocial.requestCreateActivity() to post the activity to the container. 80
  80. 80. RESTful and RPC protocols Servers talking to servers 81
  81. 81. RESTful and RPC protocols Opens new development models •  ackground processing. B •  asier Flash integration. E •  obile applications. M 82
  82. 82. RESTful and RPC protocols Communication methods: •  ESTful (Representational State Transfer) R •  PC (Remote Procedure Call) R Formats: •  ML X •  SON J •  tomPub A 83
  83. 83. RESTful and RPC protocols REST: •  esources are URLs. R 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 84
  84. 84. 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={va lue} updatedSince={xsdDateTime} networkDistance={networkDistance} • Paging: count={count} sortBy={fieldname} sortOrder={order} startIndex={startIndex} 85
  85. 85. 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> 86
  86. 86. 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> 87
  87. 87. RESTful and RPC protocols REST: •  erform operations using different HTTP methods on each URL. P CRUD: HTTP: •  reate •  OST C P •  etrieve •  ET R G •  pdate •  UT U P •  elete •  ELETE D D 88
  88. 88. RESTful and RPC protocols REST has some disadvantages: •  atch support requires multiple HTTP requests, or a contrived URL B scheme. •  pecifying multiple users via querystring is difficult. Is S ?uid=1234,5678 the same resource as ?uid=5678,1234 ? 89
  89. 89. RESTful and RPC protocols RPC: •  ne endpoint - parameters specify methods to call. O •  atch support. B •  pecify collections of users through passed arguments, not URLs. S Example - Fetch current user: • Request • Response POST /rpc HTTP/1.1Host: HTTP/1.x 207 Multi-StatusContent-Type: api.example.orgAuthorization: application/json{ quot;idquot; : quot;myselfquot; quot;resultquot; : <Auth token>Content-Type: { quot;idquot; : quot;example.org:34KJDCSKJN2HHF0DW20394quot;, application/json{ quot;methodquot; : quot;namequot; : { quot;unstructuredquot; : quot;Jane Doequot;}, quot;people.getquot;, quot;idquot; : quot;myselfquot; quot;genderquot; : quot;femalequot; }} quot;paramsquot; : { quot;useridquot; : quot;@mequot;, quot;groupidquot; : quot;@selfquot; }} 90
  90. 90. RESTful and RPC protocols Authentication: •  oth protocols use OAuth to identify users and apps. B •  epending on what the application needs to do, it can use two-legged D or three-legged OAuth. Two-legged OAuth: •  he application authenticates directly with the container. T •  erform non-user specific operations: P • Update persistent data for app users. • Can request information for users who have shared their profile information with the app. Three-legged OAuth: •  he user tells the container to give profile access to the application. T •  erform user specific operations: P • Post activities. • Fetch friends of the current user. 91
  91. 91. RESTful and RPC protocols Client libraries are being created for PHP, Java, and Python. •  elp you connect to OpenSocial containers, and work with social H data on your server. Sample: log into a container: 92
  92. 92. RESTful and RPC protocols RESTful and RPC use OAuth for authentication •  Auth is an open standard. O •  lient libraries will help make this process easier for developers. C Sample: use OAuth to get an access token for a user: 93
  93. 93. RESTful and RPC protocols •  nce OAuth is used, you can store a user token for later access. O Sample: use an existing token: 94
  94. 94. RESTful and RPC protocols •  nce authentication has happened, requests are easy: O Sample: Fetch the current user: 95
  95. 95. RESTful and RPC protocols Sample: Fetch the current user’s friends: 96
  96. 96. Development Models How OpenSocial apps are built 97
  97. 97. OpenSocial Tools What sets us apart from the animals 98
  98. 98. Shindig Writing a gadget server is difficult: •  ast changing API - hard to keep up. F •  tandardization is hard to get right. S •  osts ¥ / ! C 99
  99. 99. Shindig Apache Shindig to the rescue! •  pen Source project. O •  vailable in Java and PHP. A •  un by itself and connect to an R existing social site to add OpenSocial support. •  oal: Launch a G new (simple) container in under an hour’s worth of work http://incubator.apache.org/shindig/ 100
  100. 100. OpenSocial Dev App Development tool to test out JS code in different containers http://osda.appspot.com 101
  101. 101. Upcoming Features Caja and Templates 102
  102. 102. Caja When JavaScript goes bad •  adgets can be a new vector for phishing, spam, malware.Social spread of G gadgets can spread bad gadgets too.Caja reduces threats with a JavaScript sanitizer as an additional quot;sandboxquot; on top of iFrame protection. 103
  103. 103. Caja Caja is: • A capability-based Javascript sanitizer.An Open Source project from Google.Optional but recommended for OpenSocial containers.Will eventually be secure enough to run gadgets inline instead of in iframes. http://code.google.com/p/google-caja/ 104
  104. 104. Templates Need for a templating language: •  evelopers need a simple way to convert OpenSocial data to HTML. D •  OM manipulation is slow and ugly. D • nnerHTML is unsafe. i 105
  105. 105. Templates <script type=quot;text/javascriptquot; src=quot;http://ostemplates-demo.appspot.co templates.jsquot;></script> <script type=quot;text/os-templatequot;> <b>$ wner.displayName}'s friends</b> <ul> <li repeat=quot;friendsquot;>$ isplayName}</li> </ul> </script> <script type=quot;text/javascriptquot;> nction loadData() { var req = opensocial.newDataRequest(); q.add(req.newFetchPersonRequest('OWNER'), 'owner'); var idSpecFrien ensocial.newIdSpec( {'userId':'OWNER', 'groupId':'FRIENDS'}); q.add(req.newFetchPeopleRequest(idSpecFriends), 'friends'); q.send(function(data) os.Container.processDocument(data); }); } dgets.util.registerOnLoadHandler(loadData); </script> http://ostemplates-demo.appspot.com/ 106
  106. 106. Templates Templates developer application available: http://ostemplates-devapp.appspot.com/ 107
  107. 107. The OpenSocial specification process “We can fix it, we have the technology” 108
  108. 108. The OpenSocial specification process http://opensocial.org/ A social Network for the OpenSocial developer community 109
  109. 109. The OpenSocial specification process 110
  110. 110. The OpenSocial specification process 111
  111. 111. The OpenSocial specification process 112
  112. 112. The OpenSocial specification process 113
  113. 113. Container Specific Extensions MySpace •  photo albums •  videos hi5 •  status •  presence •  photo albums Netlog •  credits api extension •  translation tool for free Imeem •  music metadata api
  114. 114. Challenges Nobody said this was going to be easy 115
  115. 115. Challenges This lumberjack will thank anyone who helps solve the following problems... David Glazer, Director of Engineering, Google OpenSocial Foundation board member 116
  116. 116. Challenges Cross container development is still tricky: •  ontainers may not follow the standard. C •  ontainers may follow the standard but have different policies. C •  ollow best practices: F http://tinyurl.com/4nuzll 117
  117. 117. Challenges No central directory •  ard for apps to spread to many containers. H •  pps need to work with different install processes. A •  irectory approval requirements vary from container to container. D 118
  118. 118. Challenges Scaling is hard: •  asy to start and get some users. E 119
  119. 119. Challenges Scaling is hard: •  eing popular on one social network B can push your server to the limit... 120
  120. 120. Scaling is hard: • ..being popular on many networks . will push you right over. 121
  121. 121. Hosting your application •  Host it anywhere you want to, with any back-end •  Keep in mind: o  Popular apps like iLike get > 200k req / minute peak o  Means dealing with lots of scalability issues! o  DB Sharding, memcache pools, server farms.. •  Why not use a cloud service like: o  Google App Engine o  Joyent.com o  Amazon EC2
  122. 122. OpenSocial Apps Monetization 123
  123. 123. OpenSocial Monetization •  Ads from Ad Networks o  AdSense, RightMedia o  BuddyPoke, Rate My Friend •  Brand/Private Label App o  Sony Ericsson MTV Roadies app on orkut •  Sell virtual or real goods •  Free -> Freemium •  Referrals Technology •  Virtual currency platforms: socialgold •  New opensocial payment api proposal
  124. 124. Success Story: Buddy Poke •  #1 OpenSocial app on orkut •  8M installs for orkut, hi5, MySpace •  $1-2 CPM •  #1 App for App Engine w/ millions daily PV
  125. 125. Success Story: PhotoBuzz •  6M+ installs on hi5 and orkut •  CPM $1-3, especially good on orkut •  4M buzzes per day •  Small team of 4 people, profitable
  126. 126. Shindig 127
  127. 127. Becoming an OpenSocial Container •  Question: o  How do you become an OpenSocial container? •  Answer: o  The Apache incubator project “Shindig” serves this purpose!
  128. 128. What is Shindig ? •  Open source reference implementation of OpenSocial & Gadgets specification •  An Apache Software Incubator project •  Available in Java & PHP •  http://incubator.apache.org/shindig It’s Goal: “Shindig's goal is to allow new sites to start hosting social apps in under an hour's worth of workquot;
  129. 129. Introduction to Shindig Architecture •  Gadget Server •  Social Data Server •  Gadget Container JavaScript
  130. 130. Gadget Server
  131. 131. Social Server
  132. 132. Social Server - RESTful API •  Preview available on o  iGoogle o  Orkut o  Hi5 •  New development models o  Server to server & Mobile! •  Try it out: curl http://localhost:8080/social/rest/people/john.doe/@all
  133. 133. Shindig Server Side (Java) Architecture
  134. 134. Shindig Client Side Libraries
  135. 135. Opensocial – JS Library
  136. 136. Implementing Shindig - Data sources •  Integrate with your own data sources o  People Service o  Activities Service o  App Data Service class MyPeopleService implements PeopleService { ... } class MyAppDataService implements AppDataService { ... } class MyActivitiesService implements ActivitiesService { ... }
  137. 137. Implementing Shindig - PHP •  Implement functions function getActivities($ids) { $activities = array(); $res = mysqli_query($this->db, ”SELECT…quot;); while ($row = @mysqli_fetch_array($res, MYSQLI_ASSOC)) { $activity = new Activity($row['activityId'], $row['personId']); $activity->setStreamTitle($row['activityStream']); $activity->setTitle($row['activityTitle']); $activity->setBody($row['activityBody']); $activity->setPostedTime($row['created']); $activities[] = $activity; } return $activities; }
  138. 138. Implementing Shindig - Java Code at http://chrisschalk.com/shindig_docs/io/shindig-io.html import org.apache.shindig.social.opensocial.ActivitiesService; public class SQLActivitiesService implements ActivitiesService { private SQLDataLayer sqlLayer; @Inject public SQLActivitiesService(SQLDataLayer sqlLayer) { this.sqlLayer = sqlLayer; }
  139. 139. Implementing Shindig - Java public ResponseItem<List<Activity>> getActivities(List<String> ids, SecurityToken token) { Map<String, List<Activity>> allActivities = sqlLayer.getActivities(); List<Activity> activities = new ArrayList<Activity>(); for (String id : ids) { List<Activity> personActivities = allActivities.get(id); if (personActivities != null) { activities.addAll(personActivities); } } return new ResponseItem<List<Activity>>(activities); }
  140. 140. Implementing - Make it a platform •  Add UI Elements o  App Gallery o  App Canvas o  App Invites o  Notification Browser •  Developer Resources o  Developer Console o  Application Gallery •  Scale it Out!
  141. 141. Implementing - Scale it Out! •  Prevent Concurrency issues •  Reduce Latency •  Add Caching •  Add more caching!
  142. 142. Usage Example: Sample Container •  Static html sample container •  No effort to get up and running •  No database or features
  143. 143. Usage Example: Partuza •  Partuza is a Example social network site, written in PHP •  Allows for local gadget development & testing too •  Use as inspiration (or copy) for creating your own social site •  http://code.google.com/p/partuza
  144. 144. OpenSocial for intranet, portals Sun Microsystems •  Socialsite: Shindig + gadget based UI written in Java •  Open Source https://socialsite.dev.java.net/ Upcoming from Impetus •  Zest: Shindig + Drupal (PHP) •  Zeal: Shindig + Liferay (Java)
  145. 145. OpenSocial for the Enterprise: Exo Platforms
  146. 146. Summary •  Become an OpenSocial Container o  Get Shindig (PHP or Java) o  Look at examples & documentation o  Implement Services o  Add UI o  Scale it out •  Resources & Links: o  http://www.chabotc.com/gdd/
  147. 147. Google Friend Connect 148
  148. 148. What is Friend Connect? Google Friend Connect lets a site owner instantly awaken and strengthen the community that visits their web site… …and it’s very easy to use. simply copying a few snippets of code into your site http://www.google.com/friendconnect/
  149. 149. Friend Connect gives ... •  Users more ways to do more things with my friends o ... •  Site owners o ... more (and more engaged) traffic for my site •  App developers o ... more reach for my apps and ... make it easy
  150. 150. Friend Connect is a hub Social Networks can plug one or more of the following into it •  Login •  Profile •  Friends List •  Activities Users can leverage all their existing online social ressources: openid logins, friend’s graphs, activity stream sinks
  151. 151. Friend Connect APIs...for all tastes •  Non developers •  Source a script to add OpenSocial gadgets on the page •  Client side developers •  JS API (like Maps & Search): use OpenSocial directly in the page •  Server side developers •  REST API
  152. 152. Conclusion 154
  153. 153. Open Stack
  154. 154. Conclusion •  OpenSocial is mature and successful •  An open stack is emerging on the server: oauth, openid, portable contacts •  2009 will be the year of the activity stream: •  Twitter’s rise •  Facebook redesign •  Friendfeed is the best in that category today •  ActivityStream workgroup to standardize the pipes
  155. 155. Resources 157
  156. 156. Resources • OpenSocial Tutorial: http://rurl.org/ss3 • OpenSocial Spec, Foundation, Reference: http://opensocial.org • Caja: http://code.google.com/p/google-caja/ • Shindig: http://incubator.apache.org/shindig/ • My opensocial links: http://delicious.com/chanezon/opensocial • OpenSocial Templates: http://ostemplates-demo.appspot.com/ • OpenSocial Dev App: http://osda.appspot.com • Partuza: http://partuza.nl • OpenSocial Specification Proposals: http://groups.google.com/group/opensocial-and-gadgets-spec/topics 158
  157. 157. Learn more code.google.com 159
  1. A particular slide catching your eye?

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

×