GDD Moscow - Open Social

60 %
40 %
Information about GDD Moscow - Open Social

Published on November 25, 2008

Author: chabotc

Source: slideshare.net

Description

Slides from the OpenSocial session @ the 2008 Moscow GDD

 

OpenSocial Chris Chabot

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

Introduction

Social Custodians

Building an OpenSocial Application

What's next for OpenSocial

Kinds of container

Becoming an OpenSocial container

Partner Presentation

   

   

   

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 megaphones, postcards or in restaurants Douglas Adams

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

 

 

How to build an OpenSocial application The Basics

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

Understanding the Gadget XML <? xml version =&quot;1.0&quot; encoding =&quot;UTF-8&quot; ?> < Module >    < ModulePrefs title =&quot;Hello World!&quot;>      < Require feature =&quot;opensocial-0.7&quot; />    </ ModulePrefs >    < Content type =&quot;html&quot;>      <![CDATA[           <script>         function init(){            alert(&quot;hello world&quot;);        }        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 (      &quot; VIEWER &quot;,&quot; AppField1 &quot;, data1));   req.add(req. newUpdatePersonAppDataRequest (          &quot; VIEWER &quot;,&quot; AppField2 &quot;, data2));   req.send(requestMyData); }

Fetching persisted data function requestMyData() {   var req = opensocial.newDataRequest();   var fields = [&quot; AppField1 &quot;, &quot; AppField2 &quot;];   req.add(req. newFetchPersonRequest (   opensocial.DataRequest.PersonId.VIEWER),&quot; viewer &quot;);   req.add(req. newFetchPersonAppDataRequest (&quot; VIEWER &quot;,     fields), &quot; viewer_data &quot;);   req.send(handleReturnedData); } function handleReturnedData(data) {   var mydata = data.get(&quot; viewer_data &quot;);   var viewer = data.get(&quot; viewer &quot;);   me = viewer.getData();    var appField1 = mydata[me.getId()][&quot; AppField1 &quot;];   ///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(&quot; This is a sample activity, created at &quot; + new Date() .toString())

How to build an OpenSocial application Best Practices

Best practices : Check for errors function response(data) {  if (! data.hadError() ) {    ... } else {   if ( data.get(&quot;req&quot;).hadError() ) {    alert( data.get(&quot;req&quot;).getErrorMessage() );   }  } else {    alert('Unknown error occurred'); }; Both the request and sub-requests can have errors, use hadError() to check.

Both the request and sub-requests can have errors, use hadError() to check.

Best practices : Be specific 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;req&quot;);  req.send(response); }; Specify which fields you want to use: only ID, NAME and THUMBNAIL_URL are returned by default

Specify which fields you want to use: only ID, NAME and THUMBNAIL_URL are returned by default

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

Check for supported features and fields

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,          &quot; http://linkurl &quot;); } Imeem music metadata api   hi5 status presence photo albums

Netlog

credits api extension

translation tool for free

MySpace

photo albums

videos

 

Imeem

music metadata api

 

hi5

status

presence

photo albums

Best Practises : Use the container's 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(); Use the container's content cache Also check out Content-Rewriter feature

Also check out

Content-Rewriter feature

Best Practises : Preloading Content <ModulePrefs title=&quot; Test Preloads &quot;>   < Preload href =&quot; http://www.example.com &quot; /> </ModulePrefs> gadgets.io.preloaded_ = {&quot; http://www.example.com &quot;:{&quot; body &quot;:&quot; ... &quot;,&quot; rc &quot;: 200 }}; Becomes: gadgets.io.makeRequest (&quot; http://www.example.com &quot;, response); So this will be instant:

Best practises : Web development 101 Control the caching of your content, http headers: Cache-Control Last-Modified Expires E-Tag Reduce number of http requests Combine JS and CSS files into one file Combine images into single sprite + CSS positioning Use Google's AJAX libraries API   <script src=&quot;http://ajax.googleapis.com/.../prototype.js Other techniques: GZip content Minify JS and CSS See YSlow!

Control the caching of your content, http headers:

Cache-Control

Last-Modified

Expires

E-Tag

Reduce number of http requests

Combine JS and CSS files into one file

Combine images into single sprite + CSS positioning

Use Google's AJAX libraries API

  <script src=&quot;http://ajax.googleapis.com/.../prototype.js

Other techniques:

GZip content

Minify JS and CSS

See YSlow!

Hosting your application Host it anywhere you want to, with any back-end Keep in mind:  Popular apps like iLike get > 200k req / minute peak Means dealing with lots of scalability issues! DB Sharding, memcache pools, server farms.. Why not use a cloud service like: Google App Engine Joyent.com Amazon EC2

Host it anywhere you want to, with any back-end

Keep in mind: 

Popular apps like iLike get > 200k req / minute peak

Means dealing with lots of scalability issues!

DB Sharding, memcache pools, server farms..

Why not use a cloud service like:

Google App Engine

Joyent.com

Amazon EC2

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

What's next for OpenSocial

OpenSocial 0.8 - REST API Access social data without JavaScript Works on 3 rd party websites / phones / etc Uses OAuth to allow secure access Open source client libraries in development Java, PHP, Python, <your fav language here>

Access social data without JavaScript

Works on 3 rd party websites / phones / etc

Uses OAuth to allow secure access

Open source client libraries in development

Java, PHP, Python, <your fav language here>

OpenSocial 0.8 - Templates Writing JavaScript is hard Writing templates is easy Templates also give Consistent UI across containers Easy way to localize More interesting content options when inlining into container (activities, profile views) Ability to serve millions of dynamic pages per day without a server

Writing JavaScript is hard

Writing templates is easy

Templates also give

Consistent UI across containers

Easy way to localize

More interesting content options when inlining into container (activities, profile views)

Ability to serve millions of dynamic pages per day without a server

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 Link Elements: gadgetsHelp, gadgetsSupport Inline MessageBundles

Portable Contacts alignment

Friends-of-Friends & filter support

Life-Cycle events

Link Elements: gadgetsHelp, gadgetsSupport

Inline MessageBundles

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

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

Kinds of Containers

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

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

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

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

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

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 Owner is profile page owner Viewer may not be known, may be owner or other member Home pages Owner is Viewer (must be logged in to see) Examples MySpace Hi5 Orkut

Profile pages

Owner is profile page owner

Viewer may not be known, may be owner or other member

Home pages

Owner is Viewer (must be logged in to see)

Examples

MySpace

Hi5

Orkut

Kinds of container - Personal dashboard like Home pages Owner is Viewer (must be logged in to see) Friends may not be defined Example: iGoogle, My Yahoo

like Home pages

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, product Owner is the object Owner friends are people connected to the object may be authors or fans 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

Pages reflect the object - movie, picture, product

Owner is the object

Owner friends are people connected to the object

may be authors or fans

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 Owner is the customer Owner friends are people connected to the customer may be your colleagues, or other customers Viewer is you, Viewer friends are your colleagues or customers Example: Oracle CRM, Salesforce

Pages reflect the customer

Owner is the customer

Owner friends are people connected to the customer

may be your colleagues, or other customers

Viewer is you, Viewer friends are your colleagues or customers

Example:

Oracle CRM, Salesforce

Kinds of container - Any web site Owner is the site Owner friends are site users Viewer is you, Viewer friends are your friends who have visited this site Example: Google Friend Connect will enable this for any site

Owner is the site

Owner friends are site users

Viewer is you,

Viewer friends are your friends who have visited this site

Example:

Google Friend Connect will enable this for any site

Becoming an OpenSocial Container

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

Question:

How do you become an OpenSocial container?

Answer:

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&quot;

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&quot;

Introduction to Shindig Architecture Gadget Server Social Data Server Gadget JavaScript

Gadget Server

Social Data Server

Gadget JavaScript

Gadget Server

Social Server

Implementing Shindig - PHP Integrate with your own data sources People Service Activities Service App Data Service class MyPeopleService implements PeopleService { ... } class MyAppDataService implements AppDataService { ... } class MyActivitiesService implements ActivitiesService { ... }

Integrate with your own data sources

People Service

Activities Service

App Data Service

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

Implement functions

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

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

Implementing - Make it a platform Add UI Elements App Gallery App Canvas App Invites Notification Browser Developer Resources Developer Console Application Statistics

Add UI Elements

App Gallery

App Canvas

App Invites

Notification Browser

Developer Resources

Developer Console

Application Statistics

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

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                     

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

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, 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)

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)

Becoming a Container - Summary Become an OpenSocial Container Get Shindig (PHP or Java) http://incubator.apache.org/shindig/ Look at examples & documentation http://www.chabotc.com/gdd Implement Services Add UI Scale it out Get involved, join the mailing list!

Become an OpenSocial Container

Get Shindig (PHP or Java)

http://incubator.apache.org/shindig/

Look at examples & documentation

http://www.chabotc.com/gdd

Implement Services

Add UI

Scale it out

Get involved, join the mailing list!

mail.ru

Q & A

 

Learn more at code.google.com

Add a comment

Related presentations

Related pages

Google Developer Day (GDD) 2009 Moscow - Open & Social Web ...

Cris Chabot end part of presentation - as soon I fugure how to split video that larger that 10 minutes I upload rest of it - thank google now allow 1080p ...
Read more

OPEN SOCIAL en GDD 08 en Madrid - YouTube

Presentación de Open Social en el GDD 08 de Madrid
Read more

Festival • Moscow Open

Moscow Open 2016. Russian Chess Cup ... to the territory of Russian State Social ... in the Moscow Open 2014 festival, be registered on Moscow Chess ...
Read more

Moscow Open Social Academy | LinkedIn

See who you know at Moscow Open Social Academy, leverage your professional network, and get hired. Skip to main content. LinkedIn Home What is LinkedIn?
Read more

Moscow Open Social Academy | LinkedIn

Moscow Open Social Academy is here. Are you? ... Moscow, Russian Federation. Institute of Journalism and Literary Art Russian Federation. Sign up; Help Center;
Read more

Moscow Open Social University | Facebook

Moscow Open Social University. 7 likes · 1 talking about this. University
Read more

Moscow Open Social University (MOSU) - Guide to Russia

Russian colleges, universitites, institutes, academies and conservatories. Moscow Open Social University (MOSU)
Read more

moscow-open.com Международный кубок по ...

Congratulations, moscow-open.com got a very good Social Media Impact Score! Show it by adding this HTML code on your site:
Read more