RIAction Social Applications in the Cloud 20090226

  • 1,374 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,374
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
105
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. What 2 Google Confidential and Proprietary
  • 3. Foundation Gadgets Applications 3
  • 4. Gadgets and OpenSocial Applications Websites within websites 4
  • 5. Gadgets and OpenSocial Applications http://www.orkut.com/Main#Application.aspx?appId=43931632273 5
  • 6. Why 6 Google Confidential and Proprietary
  • 7. Reach your Audience Directly SEM SEO Your Content 7
  • 8. Gadgets & OpenSocial <3 RIAs Consistent look and feel across networks Rapid deployment Fluid interfaces Enhanced user experience 8
  • 9. How 9 Google Confidential and Proprietary
  • 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. Option 1: iGoogle Established user-base Sandbox supports OpenSocial 11
  • 12. Option 2: Gadget Ads Rich Media Ad Format Take your content out to where your users are actively engaged Interaction Tracking 12
  • 13. Option 3: OpenSocial 13
  • 14. OpenSocial 14 Google Confidential and Proprietary
  • 15. 15
  • 16. OpenSocial Containers friendster ®
  • 17. Large Reach … and more to come!
  • 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. Significant APAC containers China • Xiaonei • 51.com • Tianya • MySpace CN India • Orkut 19
  • 20. Getting Started with OpenSocial 20 Google Confidential and Proprietary
  • 21. First Stop OpenSocial.org Also a social network (surprise surprise!) 21
  • 22. A day in the life of a social app developer 22
  • 23. A day in the life of a social app developer 23
  • 24. A day in the life of a social app developer 24
  • 25. A day in the life of a social app developer 25
  • 26. A day in the life of a social app developer 26
  • 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. 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. 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. 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. 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. The OpenSocial JavaScript API “It's people!” 32
  • 33. The OpenSocial JavaScript API Representing users: • Client-side, users must work with the VIEWER and the OWNER. 33
  • 34. The OpenSocial JavaScript API Multiple personalities: • When you visit your own profile, you are both the VIEWER and the OWNER. 34
  • 35. The OpenSocial JavaScript API Working with people: • opensocial.Person - JavaScript representation of a user. 35
  • 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. The OpenSocial JavaScript API Working with people: • A Collection represents many opensocial.Person objects. 37
  • 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. 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. 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. RESTful and RPC protocols Servers talking to servers 41
  • 42. RESTful and RPC protocols Opens new development models •Background processing. •Easier Flash integration. •Mobile applications. 42
  • 43. RESTful and RPC protocols Communication methods: • RESTful (Representational State Transfer) • RPC (Remote Procedure Call) Formats: • XML • JSON • AtomPub 43
  • 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. 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. 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. 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. OpenSocial Tools What sets us apart from the animals 48
  • 49. Shindig Writing a gadget server is difficult: • Fast changing API - hard to keep up. • Standardization is hard to get right. • Costs $ / ¥ / 元 ! 49
  • 50. OpenSocial Dev App Development tool to test out JS code in different containers http://osda.appspot.com 50
  • 51. Client Libraries •OpenSocial PHP Client Library •OpenSocial Java Client Library •OpenSocial Ruby Client Library •OpenSocial Python Client Library 51
  • 52. “But I didn’t show up today to deal with PHP, Java, Python or Ruby” 52
  • 53. ActionScript Client Library (beta) • http://opensocial-resources-zh.googlecode.com/svn/trunk/opensocial- actionscript-client/0.8/doc/index.html 53
  • 54. 54
  • 55. Challenges Nobody said this was going to be easy 55
  • 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. 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. Challenges Scaling is hard: • Easy to start and get some users. 58
  • 59. Challenges Scaling is hard: • Being popular on one social network can push your server to the limit... 59
  • 60. Scaling is hard: •...being popular on many networks will push you right over. 60
  • 61. Help solve these problems •OpenSocial is Open •Get involved with the community at opensocial.org •Help shape the Open & Social Web 61
  • 62. Resources 62
  • 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. Learn more http://code.google.com http://opensocial.org 64
  • 65. Stay updated at http://apacdeveloper.blogspot.com/ http://cse-sea.blogspot.com 65