This document provides an overview of OpenSocial and how to build OpenSocial applications and containers. It discusses OpenSocial specifications and features, how to build OpenSocial gadgets and applications using JavaScript and XML, best practices, hosting options, and how to implement an OpenSocial container using the Apache Shindig project in Java or PHP by integrating with social data sources and services. It also discusses different types of OpenSocial containers like social networks, personal dashboards, and CRM systems.

2. OpenSocial
Chris Chabot

3. Agenda
• Introduction
• Social Custodians
• Building an OpenSocial Application
• What's next for OpenSocial
• Kinds of container
• Becoming an OpenSocial container
• Partner Presentation

7. The problem

8. The solution

9. ®friendster
Who's part of OpenSocial?
> 390 Million reached!

11. What does OpenSocial Provide

12. Social Custodians

13. 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

14. 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

17. How to build an OpenSocial application
The Basics

18. How to make an OpenSocial Application
HTML / CSS / JS
XML

19. 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>

20. 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
}

21. 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);
}

22. 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
}

23. 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())

24. How to build an OpenSocial application
Best Practices

25. 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.

26. 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

27. var supportsAboutMe =
opensocial.getEnvironment().supportsField(
opensocial.Environment.ObjectType.PERSON,
opensocial.Person.Field.ABOUT_ME
);
Best practices : Capability Discovery
• Check for supported features and fields

28. 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

29. 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

30. 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:

31. 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!

32. 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

33. 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

34. What's next for OpenSocial

35. 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>

36. 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

37. Example: Friends list (no templates)

38. Example: Friends list (with templates)
http://ostemplates-demo.appspot.com/

39. OpenSocial 0.8 - Other Changes
• Portable Contacts alignment
• Friends-of-Friends & filter support
• Life-Cycle events
• Link Elements: gadgetsHelp, gadgetsSupport
• Inline MessageBundles

40. 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

41. Kinds of Containers

42. 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

43. 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

44. 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

45. 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

46. The Viewer and Viewer friends

47. Owner and Owner friends

48. Owner and Viewer
are defined by Container
The Application gets IDs and connections to other IDs

49. the Owner need not be a Person
It could be an organisation
or a social object

50. 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

51. 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

52. 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

53. 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

54. 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

55. Becoming an OpenSocial Container

56. Becoming an OpenSocial Container
• Question:
o How do you become an OpenSocial container?
• Answer:
o The Apache incubator project “Shindig” serves this
purpose!

57. 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"

58. Introduction to Shindig Architecture
• Gadget Server
• Social Data Server
• Gadget JavaScript

59. Gadget Server

60. Social Server

61. 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
{
...
}

62. 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;
}

63. 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;
....

64. 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

65. 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

66. Implementing - Scale it Out
• Prevent Concurrency issues
• Reduce Latency
• Add lots of Caching

67. Usage Example: Sample Container
• Static html sample container
• No effort to get up and running
• No database or features

68. 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

69. 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)

70. 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!

71. mail.ru

72. Q & A

74. Learn more at
code.google.com