opensocial kevin marks chris chabot agenda introduction - what is opensocial building an opensocial...
TRANSCRIPT
OpenSocial
Kevin MarksChris Chabot
Agenda
• Introduction - What is OpenSocial• Building an OpenSocial Application• Best Practices • Kinds of container• Becoming an OpenSocial container• Netlog Presentation
Why do we have so many users in
Beverly Hillsand
Schenectady
?
Why do we have so many users in
90210and
12345
?
The problem
The solution
Portable Contacts
REST API for Person and ContactsCompatible with OpenSocialhttp://portablecontacts.net
How to build an OpenSocial applicationThe BasicsChris Chabot
An OpenSocial Application
• HTML• Javascript• CSS
Gadget XML
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>
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}
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);}
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}
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())
How to build an OpenSocial applicationBest PracticesChris Chabot
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.
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
var supportsAboutMe = opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON, opensocial.Person.Field.ABOUT_ME );
if (gadgets.util.hasFeature('hi5')) { mediaItem.setField( hi5.ActivityMediaItemField.LINK, "http://linkurl");}
Best practices : Capability Discovery
• Check for supported features and fields
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 outo Content-Rewriter featureo Preloadingo Using App Data as content cache
Best practises : Web development 101
• Control the caching of your content, http headers:o Cache-Controlo Last-Modifiedo Expireso E-Tag
• Reduce number of http requestso Combine JS and CSS files into one fileo Combine images into single sprite + CSS positioning
• Use Google's AJAX libraries APIo <script src="http://ajax.googleapis.com/.../prototype.js
• Other techniques:o GZip contento Minify JS and CSSo See YSlow!
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 peako Means dealing with lots of scalability issues!o DB Sharding, memcache pools, server farms..
• Why not use a cloud service like:o Google App Engineo Joyent.como Amazon EC2
Specificationhttp://opensocial.org/http://groups.google.com/group/opensocial-and-gadgets-spec
Code Samples and Toolshttp://code.google.com/opensocialhttp://code.google.com/p/opensocial-resources/ Getting started guidehttp://code.google.com/apis/opensocial/articles/tutorial/tutorial-0.8.html
Application Development Resources
Kinds of ContainersKevin Marks
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
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
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
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
Owner and Viewerare defined by Container
The Application gets IDs and connections to other IDs
the Owner need not be a PersonIt could be an organisation
or a social object
Kinds of container - Social network sites
• Profile pageso Owner is profile page ownero Viewer may not be known, may be owner or other member
• Home pageso Owner is Viewer (must be logged in to see)
Examples• MySpace• Hi5• Orkut
Kinds of container - Personal dashboard
• like Home pageso Owner is Viewer (must be logged in to see)
• Friends may not be defined
Example:• iGoogle, My Yahoo
Kinds of container - Social Object site
• Pages reflect the object - movie, picture, producto Owner is the objecto Owner friends are people connected to the object
may be authors or fanso 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
Kinds of container - CRM systems
• Pages reflect the customer o Owner is the customero Owner friends are people connected to the customer
may be your colleagues, or other customerso Viewer is you, Viewer friends are your colleagues or
customers
Example:• Oracle CRM, Salesforce
Kinds of container - Any web site
• Owner is the siteo 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
Social Custodians
Becoming an OpenSocial ContainerChris Chabot
Becoming an OpenSocial Container
• Question: o How do you become an OpenSocial container?
• Answer: o The Apache incubator project “Shindig” serves this
purpose!
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"
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 Serviceo Activities Serviceo App Data Service
class MyPeopleService implements PeopleService {...}
class MyAppDataService implements AppDataService {...}
class MyActivitiesService implements ActivitiesService {... }
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;}
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; ....
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
Implementing - Make it a platform
• Add UI Elementso App Galleryo App Canvaso App Inviteso Notification Browser
• Developer Resourceso Developer Consoleo Application Statistics
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 & testing too• Use as inspiration (or copy) for creating your own social site• http://code.google.com/p/partuza
OpenSocial for intranet, portalsSun 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)
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 Serviceso Add UIo Scale it out
• Get involved, join the mailing list!
®friendster
Who's part of OpenSocial?
> 390 Million reached!
Learn more atcode.google.com