OpenSocial
Chris Chabot
Agenda
• Introduction
• Social Custodians
• Building an OpenSocial Application
• What's next for OpenSocial
• Kinds of con...
The problem
The solution
®friendster
Who's part of OpenSocial?
> 390 Million reached!
What does OpenSocial Provide
Social Custodians
Of course you can't 'trust' what
people tell you on the web any
more than you can 'trust' what
people tell you on megaphon...
Working out the social politics of
who you can trust and why is,
quite literally, what a very large
part of our brain has ...
How to build an OpenSocial application
The Basics
How to make an OpenSocial Application
HTML / CSS / JS
XML
Understanding the Gadget XML
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require ...
Retrieve Friend Information
function getFriendData() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRe...
Persisting Data
function populateMyAppData() {
var req = opensocial.newDataRequest();
var data1 = Math.random() * 5;
var d...
Fetching persisted data
function requestMyData() {
var req = opensocial.newDataRequest();
var fields = ["AppField1", "AppF...
Posting an Activity
function postActivity(text) {
var params = {};
params[opensocial.Activity.Field.TITLE] = text;
var act...
How to build an OpenSocial application
Best Practices
function response(data) {
if (!data.hadError()) {
...
} else {
if (data.get("req").hadError()) {
alert(data.get("req").get...
function request() {
var req = opensocial.newDataRequest();
 var params = {};
 params[opensocial.DataRequest.PeopleRequest...
var supportsAboutMe =
opensocial.getEnvironment().supportsField(
opensocial.Environment.ObjectType.PERSON,
         openso...
Best practices : Capability Discovery
Netlog
• credits api extension
• translation tool for free 
MySpace 
• photo albums
...
Best Practises : Use the container's cache
function showImage() {
imgUrl = 'http://foo.com/bar.png';
cachedUrl = gadgets.i...
Best Practises : Preloading Content
<ModulePrefs title="Test Preloads">
<Preload href="http://www.example.com" />
</Module...
Best practises : Web development 101
• Control the caching of your content, http headers:
o Cache-Control
o Last-Modified
...
Hosting your application
• Host it anywhere you want to, with any back-end
• Keep in mind: 
o Popular apps like iLike get ...
Specification
http://opensocial.org/
http://groups.google.com/group/opensocial-and-gadgets-spec
Code Samples and Tools
htt...
What's next for OpenSocial
OpenSocial 0.8 - REST API
• Access social data without JavaScript
• Works on 3rd party websites / phones / etc
• Uses OAut...
OpenSocial 0.8 - Templates
• Writing JavaScript is hard
• Writing templates is easy
• Templates also give
o Consistent UI ...
Example: Friends list (no templates)
 
Example: Friends list (with templates)
 
http://ostemplates-demo.appspot.com/
OpenSocial 0.8 - Other Changes
• Portable Contacts alignment
• Friends-of-Friends & filter support
• Life-Cycle events
• L...
OpenSocial 0.9 - Being formed now
• Proxied Content - Classic style of web development
• OSML - Server sided templating
• ...
Kinds of Containers
Containers provide a social context
• OpenSocial separates application logic from social context
• an app sees user ids - ...
Containers don’t choose users
• Containers set up the social model, users choose to join
• they grow through homophily and...
OpenSocial gets you to all their users
• You don't have to pick a site to specialise for
• You get to spread through multi...
Not just Social Network Sites
• Social network sites - Profiles and home pages
• Personal dashboards
• Sites based around ...
The Viewer and Viewer friends
Owner and Owner friends
Owner and Viewer
are defined by Container
The Application gets IDs and connections to other IDs
the Owner need not be a Person
It could be an organisation
or a social object
Kinds of container - Social network
sites
• Profile pages
o Owner is profile page owner
o Viewer may not be known, may be ...
Kinds of container - Personal
dashboard
• like Home pages
o Owner is Viewer (must be logged in to see)
• Friends may not b...
Kinds of container - Social Object site
• Pages reflect the object - movie, picture, product
o Owner is the object
o Owner...
Kinds of container - CRM systems
• Pages reflect the customer
o Owner is the customer
o Owner friends are people connected...
Kinds of container - Any web site
• Owner is the site
o Owner friends are site users
• Viewer is you,
o Viewer friends are...
Becoming an OpenSocial Container
Becoming an OpenSocial Container
• Question:
o How do you become an OpenSocial container?
• Answer:
o The Apache incubator...
What is Shindig ?
• Open source reference implementation of OpenSocial &
Gadgets specification
• An Apache Software Incuba...
Introduction to Shindig Architecture
• Gadget Server
• Social Data Server
• Gadget JavaScript
Gadget Server
Social Server
Implementing Shindig - PHP
• Integrate with your own data sources
o People Service
o Activities Service
o App Data Service...
Implementing Shindig - PHP
• Implement functions
function getActivities($ids)
{
$activities = array();
$res = mysqli_query...
Implementing Shindig - Java
import org.apache.shindig.social.opensocial.ActivitiesService;
public class SQLActivitiesServi...
public ResponseItem<List<Activity>> getActivities(List<String> ids,
SecurityToken token) {
Map<String, List<Activity>> all...
Implementing - Make it a platform
• Add UI Elements
o App Gallery
o App Canvas
o App Invites
o Notification Browser
• Deve...
Implementing - Scale it Out
• Prevent Concurrency issues
• Reduce Latency
• Add lots of Caching
Usage Example: Sample Container
• Static html sample container
• No effort to get up and running
• No database or features
Usage Example: Partuza
• Partuza is a Example social network site, written in PHP
• Allows for local gadget development & ...
OpenSocial for intranet, portals
Sun Microsystems
• Socialsite: Shindig + gadget based UI written in Java
• Open Source ht...
Becoming a Container - Summary
• Become an OpenSocial Container
o Get Shindig (PHP or Java)
 http://incubator.apache.org/...
mail.ru
Q & A
Learn more at
code.google.com
GDD Moscow - Open Social
GDD Moscow - Open Social
GDD Moscow - Open Social
GDD Moscow - Open Social
GDD Moscow - Open Social
GDD Moscow - Open Social
GDD Moscow - Open Social
GDD Moscow - Open Social
Upcoming SlideShare
Loading in …5
×

GDD Moscow - Open Social

1,187
-1

Published on

Slides from the OpenSocial session @ the 2008 Moscow GDD

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,187
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

GDD Moscow - Open Social

  1. 1. OpenSocial Chris Chabot
  2. 2. Agenda • Introduction • Social Custodians • Building an OpenSocial Application • What's next for OpenSocial • Kinds of container • Becoming an OpenSocial container • Partner Presentation
  3. 3. The problem
  4. 4. The solution
  5. 5. ®friendster Who's part of OpenSocial? > 390 Million reached!
  6. 6. What does OpenSocial Provide
  7. 7. Social Custodians
  8. 8. Of course you can't 'trust' what people tell you on the web any more than you can 'trust' what people tell you on megaphones, postcards or in restaurants Douglas Adams
  9. 9. Working out the social politics of who you can trust and why is, quite literally, what a very large part of our brain has evolved to do Douglas Adams
  10. 10. How to build an OpenSocial application The Basics
  11. 11. How to make an OpenSocial Application HTML / CSS / JS XML
  12. 12. Understanding the Gadget XML <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Hello World!"> <Require feature="opensocial-0.7" /> </ModulePrefs> <Content type="html"> <![CDATA[ <script> function init(){ alert("hello world"); } gadgets.util.registerOnLoadHandler(init); </script> ]]> </Content> </Module>
  13. 13. Retrieve Friend Information function getFriendData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER), 'viewer'); req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS), 'viewerFriends'); req.send(onLoadFriends); } function onLoadFriends(response) { var viewer = response.get('viewer').getData(); var viewerFriends = response.get('viewerFriends').getData(); ///More code }
  14. 14. Persisting Data function populateMyAppData() { var req = opensocial.newDataRequest(); var data1 = Math.random() * 5; var data2 = Math.random() * 100; req.add(req.newUpdatePersonAppDataRequest( "VIEWER","AppField1", data1)); req.add(req.newUpdatePersonAppDataRequest(          "VIEWER","AppField2", data2)); req.send(requestMyData); }
  15. 15. Fetching persisted data function requestMyData() { var req = opensocial.newDataRequest(); var fields = ["AppField1", "AppField2"]; req.add(req.newFetchPersonRequest( opensocial.DataRequest.PersonId.VIEWER),"viewer"); req.add(req.newFetchPersonAppDataRequest("VIEWER", fields), "viewer_data"); req.send(handleReturnedData); } function handleReturnedData(data) { var mydata = data.get("viewer_data"); var viewer = data.get("viewer"); me = viewer.getData();    var appField1 = mydata[me.getId()]["AppField1"]; ///More code }
  16. 16. Posting 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); } postActivity("This is a sample activity, created at " + new Date().toString())
  17. 17. How to build an OpenSocial application Best Practices
  18. 18. function response(data) { if (!data.hadError()) { ... } else { if (data.get("req").hadError()) { alert(data.get("req").getErrorMessage()); } } else { alert('Unknown error occurred'); }; Best practices : Check for errors • Both the request and sub-requests can have  errors, use hadError() to check.
  19. 19. 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), "req"); req.send(response); }; Best practices : Be specific • Specify which fields you want to use: only ID, NAME and THUMBNAIL_URL are returned  by default
  20. 20. var supportsAboutMe = opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON,          opensocial.Person.Field.ABOUT_ME  ); Best practices : Capability Discovery • Check for supported features and fields
  21. 21. Best practices : Capability Discovery Netlog • credits api extension • translation tool for free  MySpace  • photo albums • videos   if (gadgets.util.hasFeature('hi5')) { mediaItem.setField( hi5.ActivityMediaItemField.LINK,          "http://linkurl"); } Imeem • music metadata api   hi5 • status • presence • photo albums
  22. 22. Best Practises : Use the container's cache function showImage() { imgUrl = 'http://foo.com/bar.png'; cachedUrl = gadgets.io.getProxyUrl(imgUrl); html = ['<img src="', cachedUrl, '">']; document.getElementById('dom_handle').innerHTML = html.join(''); }; showImage(); Use the container's content cache • Also check out o Content-Rewriter feature
  23. 23. Best Practises : Preloading Content <ModulePrefs title="Test Preloads"> <Preload href="http://www.example.com" /> </ModulePrefs> gadgets.io.preloaded_ = {"http://www.example.com": {"body":"...","rc":200}}; Becomes: gadgets.io.makeRequest("http://www.example.com", response); So this will be instant:
  24. 24. 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="http://ajax.googleapis.com/.../prototype.js • Other techniques: o GZip content o Minify JS and CSS o See YSlow!
  25. 25. 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
  26. 26. 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 Application Development Resources
  27. 27. What's next for OpenSocial
  28. 28. OpenSocial 0.8 - REST API • 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>
  29. 29. OpenSocial 0.8 - 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
  30. 30. Example: Friends list (no templates)  
  31. 31. Example: Friends list (with templates)   http://ostemplates-demo.appspot.com/
  32. 32. OpenSocial 0.8 - Other Changes • Portable Contacts alignment • Friends-of-Friends & filter support • Life-Cycle events • Link Elements: gadgetsHelp, gadgetsSupport • Inline MessageBundles
  33. 33. OpenSocial 0.9 - Being formed now • Proxied Content - Classic style of web development • OSML - Server sided templating • Media & Album API • <Your Idea here> http://groups.google.com/group/opensocial-and-gadgets-spec
  34. 34. Kinds of Containers
  35. 35. Containers provide a social context • OpenSocial separates application logic from social context • an app sees user ids - the container makes them people • Users understand the social contract of the containers • Save apps and users from re-registration hell
  36. 36. Containers don’t choose users • Containers set up the social model, users choose to join • they grow through homophily and affinity • Network effect can bring unexpected userbases
  37. 37. OpenSocial gets you to all their users • You don't have to pick a site to specialise for • You get to spread through multiple friend groups • You'll be surprised by where your users are • so make sure you plan to localize
  38. 38. Not just Social Network Sites • Social network sites - Profiles and home pages • Personal dashboards • Sites based around a Social Object • Corporate CRM systems • Any web site How do we abstract these out? • Viewer + friends • Owner + friends
  39. 39. The Viewer and Viewer friends
  40. 40. Owner and Owner friends
  41. 41. Owner and Viewer are defined by Container The Application gets IDs and connections to other IDs
  42. 42. the Owner need not be a Person It could be an organisation or a social object
  43. 43. Kinds of container - Social network sites • Profile pages o Owner is profile page owner o Viewer may not be known, may be owner or other member • Home pages o Owner is Viewer (must be logged in to see) Examples • MySpace • Hi5 • Orkut
  44. 44. Kinds of container - Personal dashboard • like Home pages o Owner is Viewer (must be logged in to see) • Friends may not be defined Example: • iGoogle, My Yahoo
  45. 45. Kinds of container - Social Object site • Pages reflect the object - movie, picture, product o Owner is the object o Owner friends are people connected to the object  may be authors or fans o Viewer is looking at it, Viewer friends are people you may want to share with Example: • Imeem is a bit like this • Opportunity for sites like Flickr, YouTube
  46. 46. Kinds of container - CRM systems • Pages reflect the customer o Owner is the customer o Owner friends are people connected to the customer  may be your colleagues, or other customers o Viewer is you, Viewer friends are your colleagues or customers Example: • Oracle CRM, Salesforce
  47. 47. Kinds of container - Any web site • Owner is the site o Owner friends are site users • Viewer is you, o Viewer friends are your friends who have visited this site Example: • Google Friend Connect will enable this for any site
  48. 48. Becoming an OpenSocial Container
  49. 49. Becoming an OpenSocial Container • Question: o How do you become an OpenSocial container? • Answer: o The Apache incubator project “Shindig” serves this purpose!
  50. 50. 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 work"
  51. 51. Introduction to Shindig Architecture • Gadget Server • Social Data Server • Gadget JavaScript
  52. 52. Gadget Server
  53. 53. Social Server
  54. 54. Implementing Shindig - PHP • 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 { ... }
  55. 55. Implementing Shindig - PHP • Implement functions function getActivities($ids) { $activities = array(); $res = mysqli_query($this->db, ”SELECT…"); 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; }
  56. 56. Implementing Shindig - Java import org.apache.shindig.social.opensocial.ActivitiesService; public class SQLActivitiesService implements ActivitiesService { private SQLDataLayer sqlLayer; @Inject public SQLActivitiesService(SQLDataLayer sqlLayer) { this.sqlLayer = sqlLayer; ....
  57. 57. 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); } Implementing Shindig - Java
  58. 58. 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 Statistics
  59. 59. Implementing - Scale it Out • Prevent Concurrency issues • Reduce Latency • Add lots of Caching
  60. 60. Usage Example: Sample Container • Static html sample container • No effort to get up and running • No database or features
  61. 61. 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
  62. 62. 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)
  63. 63. Becoming a Container - Summary • Become an OpenSocial Container o Get Shindig (PHP or Java)  http://incubator.apache.org/shindig/ o Look at examples & documentation  http://www.chabotc.com/gdd o Implement Services o Add UI o Scale it out • Get involved, join the mailing list!
  64. 64. mail.ru
  65. 65. Q & A
  66. 66. Learn more at code.google.com

×