Gadgets and Social Applications
With OpenSocial


Vinoaj Vijeyakumaar
Customer Solutions Engineer
Google Southeast Asia

h...
What




                                             2
       Google Confidential and Proprietary
Foundation


Gadgets



Applications

               3
Gadgets and OpenSocial Applications




                Websites within websites
                                         ...
Gadgets and OpenSocial Applications




                              http://www.orkut.com/Main#Application.aspx?appId=439...
Why




                                            6
      Google Confidential and Proprietary
Reach your Audience Directly


                     SEM SEO


                        Your
                      Content

...
Gadgets & OpenSocial <3 RIAs
                               Consistent look and feel
                               across...
How




                                            9
      Google Confidential and Proprietary
Where do I put it?


I’ve built my RIA …

… I’ve wrapped it into a
 Gadget, an OpenSocial app,
 a widget …

… now where do...
Option 1: iGoogle

                    Established
                      user-base



                    Sandbox
        ...
Option 2: Gadget Ads
                       Rich Media Ad Format


                       Take your content out
          ...
Option 3: OpenSocial




                       13
OpenSocial




                                                   14
             Google Confidential and Proprietary
15
OpenSocial Containers




  friendster      ®
Large Reach




              … and more to come!
Popular SEA OpenSocial “containers”
                Thailand
                                     Vietnam
                ...
Significant APAC containers

China

• Xiaonei

• 51.com

• Tianya

• MySpace CN



India

• Orkut


                      ...
Getting Started with OpenSocial




                                                             20
                      ...
First Stop

                OpenSocial.org




             Also a social network (surprise surprise!)
                   ...
A day in the life of a social app developer




                                              22
A day in the life of a social app developer




                                              23
A day in the life of a social app developer




                                              24
A day in the life of a social app developer




                                              25
A day in the life of a social app developer




                                              26
Gadgets
A gadget spec:
• Is an XML file.
• Defines metadata about an OpenSocial app.
• Is highly cacheable and does not ne...
Gadgets
Example gadget XML spec:
• Uses HTML to print “Hello World”.
• Colors the text red with CSS.
• Dynamically adjusts...
Gadgets

JavaScript utility functions for gadgets:
•gadgets.io.makeRequest()

Make cross-domain AJAX calls to remote serve...
Gadgets

Add extra features to your gadget:
• dynamic-height - Change the size of your gadget in the container.
• views - ...
Gadgets




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




                                32
The OpenSocial JavaScript API
Representing users:
• Client-side, users must work with the VIEWER and the OWNER.




      ...
The OpenSocial JavaScript API
Multiple personalities:
• When you visit your own profile, you are both the VIEWER and the
O...
The OpenSocial JavaScript API
Working with people:
 • opensocial.Person - JavaScript representation of a user.




       ...
The OpenSocial JavaScript API
    An OpenSocial Person's fields:
                                                   •
    ...
The OpenSocial JavaScript API
Working with people:
 • A Collection represents many opensocial.Person objects.




        ...
The OpenSocial JavaScript API
Working with data:
 • Persistent data gives apps key, value storage directly on the containe...
The OpenSocial JavaScript API
Working with activities:
  • API to post information about what users are doing with your ap...
The OpenSocial JavaScript API
Post an activity:

   function postActivity(text) {
      var params = {};
      params[open...
RESTful and RPC protocols
Servers talking to servers




                             41
RESTful and RPC protocols
Opens new development models
•Background processing.
•Easier Flash integration.
•Mobile applicat...
RESTful and RPC protocols
Communication methods:
• RESTful (Representational State Transfer)
• RPC (Remote Procedure Call)...
RESTful and RPC protocols
REST:
• Resources are URLs.
Example - People:
 • All people connected to the given user:
     /p...
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
Authentication:
• Both protocols use OAuth to identify users and apps.

• Depending on what the ...
OpenSocial Tools
What sets us apart from the animals




                                      48
Shindig
Writing a gadget server is difficult:

• Fast changing API - hard to keep up.
• Standardization is hard to get rig...
OpenSocial Dev App
Development tool to test out JS code in different containers




http://osda.appspot.com
              ...
Client Libraries


•OpenSocial PHP Client Library
•OpenSocial Java Client Library
•OpenSocial Ruby Client Library
•OpenSoc...
“But I didn’t show
 up today to deal
 with PHP, Java,
 Python or Ruby”
                     52
ActionScript Client Library (beta)
• http://opensocial-resources-zh.googlecode.com/svn/trunk/opensocial-
  actionscript-cl...
54
Challenges
Nobody said this was going to be easy




                                        55
Challenges

Cross container development is still tricky:
• Containers may not follow the standard.
• Containers may follow...
Challenges

No central directory
• Hard for apps to spread to many containers.
• Apps need to work with different install ...
Challenges
Scaling is hard:
• Easy to start and get some users.




                                      58
Challenges
Scaling is hard:
• Being popular on one social network can push your server to the limit...




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




                                     60
Help solve these problems


•OpenSocial is Open

•Get involved with the
 community at opensocial.org


•Help shape the Ope...
Resources




            62
Resources

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

•   OpenSocial Spec, Foundation, Reference: http://opensocial.org...
Learn more
http://code.google.com
http://opensocial.org




                         64
Stay updated at
http://apacdeveloper.blogspot.com/
http://cse-sea.blogspot.com




                                     65
Upcoming SlideShare
Loading in...5
×

RIAction Social Applications in the Cloud 20090226

1,468

Published on

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

No Downloads
Views
Total Views
1,468
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
105
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

RIAction Social Applications in the Cloud 20090226

  1. 1. Gadgets and Social Applications With OpenSocial Vinoaj Vijeyakumaar Customer Solutions Engineer Google Southeast Asia http://friendfeed.com/vinoaj 1 Google Confidential and Proprietary
  2. 2. What 2 Google Confidential and Proprietary
  3. 3. Foundation Gadgets Applications 3
  4. 4. Gadgets and OpenSocial Applications Websites within websites 4
  5. 5. Gadgets and OpenSocial Applications http://www.orkut.com/Main#Application.aspx?appId=43931632273 5
  6. 6. Why 6 Google Confidential and Proprietary
  7. 7. Reach your Audience Directly SEM SEO Your Content 7
  8. 8. Gadgets & OpenSocial <3 RIAs Consistent look and feel across networks Rapid deployment Fluid interfaces Enhanced user experience 8
  9. 9. How 9 Google Confidential and Proprietary
  10. 10. Where do I put it? I’ve built my RIA … … I’ve wrapped it into a Gadget, an OpenSocial app, a widget … … now where do I put it? 10
  11. 11. Option 1: iGoogle Established user-base Sandbox supports OpenSocial 11
  12. 12. Option 2: Gadget Ads Rich Media Ad Format Take your content out to where your users are actively engaged Interaction Tracking 12
  13. 13. Option 3: OpenSocial 13
  14. 14. OpenSocial 14 Google Confidential and Proprietary
  15. 15. 15
  16. 16. OpenSocial Containers friendster ®
  17. 17. Large Reach … and more to come!
  18. 18. Popular SEA OpenSocial “containers” Thailand Vietnam Hi5 Yahoo!360 Philippines imeem Hi5 Friendster imeem Malaysia Friendster MySpace imeem Indonesia Singapore Friendster Friendster imeem imeem Orkut
  19. 19. Significant APAC containers China • Xiaonei • 51.com • Tianya • MySpace CN India • Orkut 19
  20. 20. Getting Started with OpenSocial 20 Google Confidential and Proprietary
  21. 21. First Stop OpenSocial.org Also a social network (surprise surprise!) 21
  22. 22. A day in the life of a social app developer 22
  23. 23. A day in the life of a social app developer 23
  24. 24. A day in the life of a social app developer 24
  25. 25. A day in the life of a social app developer 25
  26. 26. A day in the life of a social app developer 26
  27. 27. Gadgets 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. 27
  28. 28. Gadgets 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> 28
  29. 29. Gadgets JavaScript utility functions for gadgets: •gadgets.io.makeRequest() Make cross-domain AJAX calls to remote servers. •gadgets.json.parse() and gadgets.json.stringify() Native JSON support. •gadgets.util.escapeString() Make text safe for display via innerHTML. •gadgets.util.registerOnLoadHandler() Execute code when the page is finished loading. 29
  30. 30. Gadgets Add extra features to your gadget: • dynamic-height - Change the size of your gadget in the container. • views - Navigate between different surfaces of the container. • skins - Make your gadget change its styles to match the container. • Containers may offer custom features... <?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> 30
  31. 31. 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! 31
  32. 32. The OpenSocial JavaScript API “It's people!” 32
  33. 33. The OpenSocial JavaScript API Representing users: • Client-side, users must work with the VIEWER and the OWNER. 33
  34. 34. The OpenSocial JavaScript API Multiple personalities: • When you visit your own profile, you are both the VIEWER and the OWNER. 34
  35. 35. The OpenSocial JavaScript API Working with people: • opensocial.Person - JavaScript representation of a user. 35
  36. 36. The OpenSocial JavaScript API An OpenSocial Person's fields: • • SEXUAL_ORIENTATION JOB_INTERESTS • ABOUT_ME • • SMOKER JOBS • ACTIVITIES • • SPORTS LANGUAGES_SPOKEN • ADDRESSES • • STATUS LIVING_ARRANGEMENT • AGE • • TAGS LOOKING_FOR • BODY_TYPE • • THUMBNAIL_URL MOVIES • BOOKS • • TIME_ZONE MUSIC • CARS • • TURN_OFFS NAME • CHILDREN • • TURN_ONS NETWORK_PRESENCE • CURRENT_LOCATION • • TV_SHOWS NICKNAME • DATE_OF_BIRTH • • URLS PETS • DRINKER • PHONE_NUMBERS • EMAILS • POLITICAL_VIEWS • ETHNICITY • PROFILE_SONG • FASHION • PROFILE_URL • FOOD • PROFILE_VIDEO • GENDER • QUOTES • HAPPIEST_WHEN • RELATIONSHIP_STATUS • HAS_APP • RELIGION • HEROES • ROMANCE • HUMORID • SCARED_OF • INTERESTS • SCHOOLS 36
  37. 37. The OpenSocial JavaScript API Working with people: • A Collection represents many opensocial.Person objects. 37
  38. 38. 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. 38
  39. 39. 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 39
  40. 40. 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. 40
  41. 41. RESTful and RPC protocols Servers talking to servers 41
  42. 42. RESTful and RPC protocols Opens new development models •Background processing. •Easier Flash integration. •Mobile applications. 42
  43. 43. RESTful and RPC protocols Communication methods: • RESTful (Representational State Transfer) • RPC (Remote Procedure Call) Formats: • XML • JSON • AtomPub 43
  44. 44. 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 44
  45. 45. 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} 45
  46. 46. 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> 46
  47. 47. RESTful and RPC protocols Authentication: • Both protocols use OAuth to identify users and apps. • Depending on what the application needs to do, it can use two-legged or three-legged OAuth. 47
  48. 48. OpenSocial Tools What sets us apart from the animals 48
  49. 49. Shindig Writing a gadget server is difficult: • Fast changing API - hard to keep up. • Standardization is hard to get right. • Costs $ / ¥ / 元 ! 49
  50. 50. OpenSocial Dev App Development tool to test out JS code in different containers http://osda.appspot.com 50
  51. 51. Client Libraries •OpenSocial PHP Client Library •OpenSocial Java Client Library •OpenSocial Ruby Client Library •OpenSocial Python Client Library 51
  52. 52. “But I didn’t show up today to deal with PHP, Java, Python or Ruby” 52
  53. 53. ActionScript Client Library (beta) • http://opensocial-resources-zh.googlecode.com/svn/trunk/opensocial- actionscript-client/0.8/doc/index.html 53
  54. 54. 54
  55. 55. Challenges Nobody said this was going to be easy 55
  56. 56. Challenges Cross container development is still tricky: • Containers may not follow the standard. • Containers may follow the standard but have different policies. • Follow best practices: http://tinyurl.com/4nuzll 56
  57. 57. Challenges No central directory • Hard for apps to spread to many containers. • Apps need to work with different install processes. • Directory approval requirements vary from container to container. 57
  58. 58. Challenges Scaling is hard: • Easy to start and get some users. 58
  59. 59. Challenges Scaling is hard: • Being popular on one social network can push your server to the limit... 59
  60. 60. Scaling is hard: •...being popular on many networks will push you right over. 60
  61. 61. Help solve these problems •OpenSocial is Open •Get involved with the community at opensocial.org •Help shape the Open & Social Web 61
  62. 62. Resources 62
  63. 63. 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/ • OpenSocial Across Containers video: http://tinyurl.com/4nuzll • 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 63
  64. 64. Learn more http://code.google.com http://opensocial.org 64
  65. 65. Stay updated at http://apacdeveloper.blogspot.com/ http://cse-sea.blogspot.com 65
  1. A particular slide catching your eye?

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

×