Google Devfest Singapore - OpenSocial
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Google Devfest Singapore - OpenSocial

on

  • 5,160 views

Google Devfest Singapore - OpenSocial

Google Devfest Singapore - OpenSocial

Statistics

Views

Total Views
5,160
Views on SlideShare
5,020
Embed Views
140

Actions

Likes
5
Downloads
117
Comments
0

6 Embeds 140

http://socialgadget.blogspot.com 128
http://www.slideshare.net 4
http://socialgadget.blogspot.hk 4
http://socialgadget.blogspot.de 2
http://192.168.10.100 1
http://socialgadget.blogspot.com.es 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Google Devfest Singapore - OpenSocial Presentation Transcript

  • 1. OpenSocial a standard for the social web Patrick Chanezon Singapore chanezon@google.com October 28th 2008
  • 2. Agenda • OpenSocial introduction • How to build OpenSocial applications • Hosting social applications • Social applications monetization • OpenSocial containers • Becoming an OpenSocial container • Google Friend Connect • Summary
  • 3. http://twitter.com/googledevapac
  • 4. OpenSocial Introduction Patrick Chanezon
  • 5. Making the web better by making it social What does social mean?
  • 6. What does Social mean? Eliette what do you do with your friends?
  • 7. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
  • 8. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
  • 9. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
  • 10. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
  • 11. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
  • 12. This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
  • 13. Raoul: a social object for Charlotte (3 year old)
  • 14. 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
  • 15. How do we socialize objects online without having to create yet another social network?
  • 16. OpenSocial A common API for social applications across multiple web sites
  • 17. The Trouble with Developing Social Apps Which site do I build my app for?
  • 18. Let’s work on that… Using OpenSocial, I can build apps for all of these sites!
  • 19. What’s offered by OpenSocial? • Activities o What are people up to on the web • People/Profile Info o Who do I know, etc. • Persistent datastore o Handles key/value pairs
  • 20. Today: 375 Million User Reach
  • 21. Where is OpenSocial live today? Live to Users: Live Developer Sandboxes: • MySpace • iGoogle • orkut • imeem • hi5 • CityIN • Freebar • Tianya • Friendster • Ning • Webon from Lycos • Plaxo Pulse • IDtail • Mail.ru • YiQi • lokalisten - New! • Netlog - New! • Viadeo - New! • Hyves - New! • 51.com - New! Individual Developer Links: http://code.google.com/apis/opensocial/gettingstarted.html
  • 22. OpenSocial “Containers”
  • 23. Containers in the region
  • 24. What’s in OpenSocial? • JavaScript API - Now • REST Protocol - New • Templates - Prototype in Shindig
  • 25. OpenSocial’s JavaScript API • OpenSocial JS API • Gadget JS API • Gadget XML schema • OpenSocial v0.7 is live • OpenSocial v0.8 is being deployed now • Specs and release notes: http://opensocial.org
  • 26. OpenSocial’s REST Protocol • Access social data without JavaScript • Works on 3rd party websites / phones / etc • Uses OAuth to allow secure access • Open source client libraries in development o Java, PHP, Python, <your fav language here> • Being deployed with OpenSocial v0.8 • Spec’s available at http://opensocial.org
  • 27. OpenSocial Templates • Writing JavaScript is hard • Writing templates is easy • Templates also give o Consistent UI across containers o Easy way to localize o More interesting content options when inlining into container (activities, profile views) o Ability to serve millions of dynamic pages per day without a server
  • 28. Design principles Create a template language that is: • Simple o Easy markup for creating UI and binding data • Fast o Supports server-side optimizations • Extensible o Standard reusable controls (buttons, lists, links, etc.) • Everywhere o Only need to include a single JavaScript file
  • 29. Concepts: • Markup o A set of standard tags and behaviors that provide developers with a simple, declarative language for assembling apps. • Templating o A set of standard elements implemented by containers. o A method for taking structured data and rendering UI elements in an arbitrary markup. • Data Pipelining o A method for grabbing OpenSocial and third-party data declaratively (or in script) and joining it to templates.
  • 30. Example: os:Image <os:Image key=quot;http://...quot;/>
  • 31. Example: osTabs, os:ShowPerson <os:Tabs name=quot;tabGroupquot;> <tab> <title>Tab 1</title> <body>This is the first tab.</body> </tab> ... <tab> <title>Tab 3</title> <body> <os:ShowPerson person=quot;${Viewer}quot;/> <div repeat=quot;ViewerFriendsquot;> <os:ShowPerson person=quot;${$this}quot;/> </div> </body> </tab> </os:Tabs>
  • 32. Example: Friends list (no templates)
  • 33. Example: Friends list (with templates)
  • 34. Template Status • High-level specification complete: o http://wiki.opensocial-templates.org • Prototype implementation available: o http://ostemplates-demo.appspot.com • GET INVOLVED! Tag feedback/suggestions appreciated: o http://tech.groups.yahoo.com/group/os-templates/ • Code for templates is in Shindig: patches welcome:-)
  • 35. OpenSocial is what you make it. • OpenSocial is an open source project. • The spec is controlled by the community. • Anyone can contribute and have a voice. • http://groups.google.com/group/opensocial/ o “OpenSocial and Gadgets spec” subgroup • OpenSocial Foundation o Get involved to nominate and elect board reps o http://www.opensocial.org/opensocial-foundation/
  • 36. A note on compliance • OpenSocial is designed for many sites • Building an app: o Technology o Policy • OpenSocial Compliance Tests o http://code.google.com/p/opensocial- resources/wiki/ComplianceTests
  • 37. OpenSocial Compliance test in orkut
  • 38. OpenSocial Compliance Matrix http://opensocial-compliance.appspot.com
  • 39. Other comments • Portable Contacts Alignment • Caja for JavaScript security
  • 40. A standard for everyone This work by Eliette Chanezon is licensed under a Creative Commons Attribution-Share Alike 3.0 License
  • 41. How To Build OpenSocial Applications
  • 42. Owner and Viewer Relationship Applications has views Owner Viewer has has Friends Friends
  • 43. Understanding the Gadget XML ModulePrefs define <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> characteristics of the <Module> gadget, such as title, author, etc. <ModulePrefs title=quot;Hello World!quot;> Module node <Require feature=quot;opensocial-0.7quot; /> defines the gadget. </ModulePrefs> <Content type=quot;htmlquot;> Require nodes should be added for all <![CDATA[ desired features <script> function init(){ alert(quot;hello worldquot;); } gadgets.util.registerOnLoadHandler(init); Define your gadget </script> html within Content node ]]> </Content> </Module>
  • 44. Retrieve Friend Information function getFriendData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER), 'viewer'); req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS), 'viewerFriends'); Place an Create a new data req.send(onLoadFriends); asynchronous call to the container. request object and add the desired sub- } requests. function onLoadFriends(response) { var viewer = response.get('viewer').getData(); var viewerFriends = response.get('viewerFriends').getData(); ///More code } Handle the returned data in callback
  • 45. Persisting Data function populateMyAppData() { Use a var req = opensocial.newDataRequest(); newUpdatePersonAppDa var data1 = Math.random() * 5; taRequest() to update data. var data2 = Math.random() * 100; req.add(req.newUpdatePersonAppDataRequest( quot;VIEWERquot;,quot;AppField1quot;, data1)); req.add(req.newUpdatePersonAppDataRequest( quot;VIEWERquot;,quot;AppField2quot;, data2)); req.send(requestMyData); }
  • 46. Fetching persisted data function requestMyData() { Use a var req = opensocial.newDataRequest(); newFetchPersonAppD var fields = [quot;AppField1quot;, quot;AppField2quot;]; ataRequest() to fetch data. req.add(req.newFetchPersonRequest( opensocial.DataRequest.PersonId.VIEWER),quot;viewerquot;); req.add(req.newFetchPersonAppDataRequest(quot;VIEWERquot;, fields), quot;viewer_dataquot;); req.send(handleReturnedData); AppData is returned as a } 2-level Map, with person id as the first key and function handleReturnedData(data) { propertyname as the next key var mydata = data.get(quot;viewer_dataquot;); var viewer = data.get(quot;viewerquot;); me = viewer.getData(); var appField1 = mydata[me.getId()][quot;AppField1quot;]; ///More code }
  • 47. Posting an Activity function postActivity(text) { var params = {}; requestCreateActivity is a request, a specific params[opensocial.Activity.Field.TITLE] = text; may choose to container var activity = opensocial.newActivity(params); ignore it. opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, callback); } postActivity(quot;This is a sample activity, created at quot; + new Date().toString())
  • 48. How to build an OpenSocial application Best Practices
  • 49. Best practices : Check for errors • Both the request and sub-requests can have errors, use hadError() to check. function response(data) { if (!data.hadError()) { ... } else { if (data.get(quot;reqquot;).hadError()) { alert(data.get(quot;reqquot;).getErrorMessage()); } } else { alert('Unknown error occurred'); };
  • 50. Best practices : Be specific • Specify which fields you want to use: only ID, NAME and THUMBNAIL_URL are returned by default function request() { var req = opensocial.newDataRequest(); var params = {}; params[opensocial.DataRequest.PeopleRequestFields .PROFILE_DETAILS] = [ opensocial.Person.Field.PROFILE_URL ]; req.add(req.newFetchPersonRequest( opensocial.DataRequest.PersonId.VIEWER, params), quot;reqquot;); req.send(response); };
  • 51. Best practices : Capability Discovery • Check for supported features and fields var supportsAboutMe = opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON, opensocial.Person.Field.ABOUT_ME ); if (gadgets.util.hasFeature('hi5')) { mediaItem.setField( hi5.ActivityMediaItemField.LINK, quot;http://linkurlquot;); }
  • 52. Best Practises : Use the container's cache Use the container's content cache function showImage() { imgUrl = 'http://foo.com/bar.png'; cachedUrl = gadgets.io.getProxyUrl(imgUrl); html = ['<img src=quot;', cachedUrl, 'quot;>']; document.getElementById('dom_handle').innerHTML = html.join(''); }; showImage(); • Also check out o Content-Rewriter feature o Preloading o Using App Data as content cache
  • 53. Best practises : Web development 101 • Control the caching of your content, http headers: o Cache-Control o Last-Modified o Expires o E-Tag • Reduce number of http requests o Combine JS and CSS files into one file o Combine images into single sprite + CSS positioning • Use Google's AJAX libraries API o <script src=quot;http://ajax.googleapis.com/.../prototype.js • Other techniques: o GZip content o Minify JS and CSS o See YSlow!
  • 54. 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
  • 55. Application Development Resources Specification http://opensocial.org/ http://groups.google.com/group/opensocial-and-gadgets-spec Code Samples and Tools http://code.google.com/opensocial http://code.google.com/p/opensocial-resources/ Getting started guide http://code.google.com/apis/opensocial/articles/tutorial/tutorial- 0.8.html
  • 56. Social Apps monetization Patrick Chanezon
  • 57. 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 • Virtual currency
  • 58. 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
  • 59. 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
  • 60. Container specifics
  • 61. Container Specific Extensions MySpace • photo albums • videos hi5 • status • presence • photo albums Netlog • credits api extension • translation tool for free Imeem • music metadata api
  • 62. Becoming an OpenSocial Container Bruno Rovagnati, Globant
  • 63. Becoming an OpenSocial Container • Question: o How do you become an OpenSocial container? • Answer: o The Apache incubator project “Shindig” serves this purpose!
  • 64. 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;
  • 65. Introduction to Shindig Architecture • Gadget Server • Social Data Server • Gadget Container JavaScript
  • 66. Gadget Server
  • 67. Social Server
  • 68. 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
  • 69. Shindig Server Side (Java) Architecture
  • 70. Shindig Client Side Libraries
  • 71. Opensocial – JS Library
  • 72. 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 { ... }
  • 73. 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; }
  • 74. 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; }
  • 75. 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); }
  • 76. 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!
  • 77. Implementing - Scale it Out! • Prevent Concurrency issues • Reduce Latency • Add Caching • Add more caching!
  • 78. Usage Example: Sample Container • Static html sample container • No effort to get up and running • No database or features
  • 79. 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
  • 80. 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)
  • 81. OpenSocial for the Enterprise: Exo Platforms
  • 82. 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/
  • 83. What is Friend Connect? Allows any site to become an OpenSocial container by simply copying a few snippets of code into your site http://www.google.com/friendconnect/
  • 84. Friend Connect gives ... • Users o ... more ways to do more things with my friends • Site owners o ... more (and more engaged) traffic for my site • App developers o ... more reach for my apps and ... make it easy
  • 85. OpenSocial Gadget Contest for Southeast Asia • To support the developer community and encourage innovation on the OpenSocial platform in Southeast Asia • Countries: Malaysia, Philippines, Singapore, Thailand, Vietnam • 4 winners per country: Nintendo Wii, Apple iPod Touch prizes • Judging panel: Google, eXo Platform, Friendster, Globant, hi5 • Dates: o Registration opens: Nov 15, 2008 o Registration ends: Jan 10, 2009 o Winners notified: Jan 23, 2009 o Results announced: Feb 6, 2009 • The REAL reward for local developers: winning gadgets to be promoted on OpenSocial partner websites to potentially reach hundreds of millions of Internet users worldwide • http://code.google.com/events/apacdevfest/contest
  • 86. Learn more code.google.com
  • 87. Q&A