OpenSocial & hi5 UPDATES & ANATOMY Akash Garg, Paul Lindner, Ryan Heaton hi5 Networks November 27th, 2007

WHAT IS HI5? 3rd largest social networking website worldwide Large Spanish speaking social network Top 10 website (Alexa) 10+ billion pageviews / month Top 10 website in over 20 countries 70+ million registered users, 35+ million active users

3rd largest social networking website worldwide

Large Spanish speaking social network

Top 10 website (Alexa)

10+ billion pageviews / month

Top 10 website in over 20 countries

70+ million registered users, 35+ million active users

HI5 AND OPENSOCIAL Early OpenSocial partner/participant. Developer Sandbox - Available now sandbox.hi5.com Focus on international aspects of deploying widgets across our diverse user base. Why OpenSocial? Perfect timing, working on deep media integration with a number of partners, here and internationally. Don’t want to write a custom platform Embrace Open Standards instead (Atom/FOAF, etc)

Early OpenSocial partner/participant.

Developer Sandbox - Available now

sandbox.hi5.com

Focus on international aspects of deploying widgets across our diverse user base.

Why OpenSocial?

Perfect timing, working on deep media integration with a number of partners, here and internationally.

Don’t want to write a custom platform

Embrace Open Standards instead (Atom/FOAF, etc)

Sandbox V2 Permanent URLs for your App http://sandbox…./friend/apps/entry/hostname/path.xml Based on the URL of your Gadget XML Works in Anonymous / LoggedIn modes Indexable by Search Engines Pulls in data from your XML (Logo, About, Description, etc) Passing up_XXX params Compatible with Google Gadgets Tries to obey specified height/width values.

Permanent URLs for your App

http://sandbox…./friend/apps/entry/hostname/path.xml

Based on the URL of your Gadget XML

Works in Anonymous / LoggedIn modes

Indexable by Search Engines

Pulls in data from your XML (Logo, About, Description, etc)

Passing up_XXX params

Compatible with Google Gadgets

Tries to obey specified height/width values.

Sandbox v2 - UI Flourishes Coming Soon List of Friends that have Installed this App Linked Discussion Group for App Includes actual running application at the top of the Group page. Expected that App Owner can moderate these forums User Star Rankings of Applications. Metrics on Adds/Deletes/Usage New Gallery Coming Filter by Vendor/Category Order by Popularity, Usage, etc.

Coming Soon

List of Friends that have Installed this App

Linked Discussion Group for App

Includes actual running application at the top of the Group page.

Expected that App Owner can moderate these forums

User Star Rankings of Applications.

Metrics on Adds/Deletes/Usage

New Gallery Coming

Filter by Vendor/Category

Order by Popularity, Usage, etc.

More Futures Adding Full Read/Write Support Application Data Feeds Retrieving private data Data API (more on this later) Integrating into other parts of the hi5 site. Via Lightbox mode Fed with context from the page Albums/Images/Audio/Video

Adding Full Read/Write Support

Application Data

Feeds

Retrieving private data

Data API

(more on this later)

Integrating into other parts of the hi5 site.

Via Lightbox mode

Fed with context from the page

Albums/Images/Audio/Video

ANATOMY

PARTS IS PARTS Google Gadgets (iGoogle) Atom, AuthSub, and more Javascript fu from Blogger, Google Maps Add Largest Containers Add Largest App Developers Mix Well

Google Gadgets (iGoogle)

Atom, AuthSub, and more

Javascript fu from Blogger, Google Maps

Add Largest Containers

Add Largest App Developers

Mix Well

YOUR APP / GADGET Runs on the User Profile Page Can run on it’s own Canvas Page Interacts with an OpenSocial Container hi5, Orkut, Plaxo, MySpace, etc

Runs on the User Profile Page

Can run on it’s own Canvas Page

Interacts with an OpenSocial Container

hi5, Orkut, Plaxo, MySpace, etc

APP / GADGET CONSTRUCTION Use what you already know HTML CSS JavaScript Flash Sprinkle with JavaScript Toolkits help here jQuery Dojo script.aculo.us Firefox + Firebug / Venkman is essential!!

Use what you already know

HTML

CSS

JavaScript

Flash

Sprinkle with JavaScript

Toolkits help here

jQuery

Dojo

script.aculo.us

Firefox + Firebug / Venkman is essential!!

Open Social Basics - People, Activities, Data People Data Get Name/UserPic/URL for the owner / viewer Owner = where app is installed Viewer = who’s using app now Get Friends for Owner/Viewer Filter based on criteria Application Data Get/Set/Update attribute/value data Activity Data Get Activity Feed Entries Filter for your App Post Activity Feed Entries

People Data

Get Name/UserPic/URL for the owner / viewer

Owner = where app is installed

Viewer = who’s using app now

Get Friends for Owner/Viewer

Filter based on criteria

Application Data

Get/Set/Update attribute/value data

Activity Data

Get Activity Feed Entries

Filter for your App

Post Activity Feed Entries

DEFINE YOUR APPLICATION <Module> <ModulePrefs title=&quot;Social Hello World” author=“Elite Hackers” author_email=“feedback@example.com”> <Require feature=&quot;opensocial-0.5&quot;/> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ App goes here ]]> </Content> </Module>

<Module> <ModulePrefs title=&quot;Social Hello World” author=“Elite Hackers” author_email=“feedback@example.com”> <Require feature=&quot;opensocial-0.5&quot;/> </ModulePrefs> <Content type=&quot;html&quot;> <![CDATA[ App goes here ]]> </Content> </Module>

GET PEOPLE DATA function init() { jQuery('#listfriends_message').html('Requesting friends...'); var req = opensocial.newDataRequest(); req.add (req.newFetchPersonRequest('VIEWER'), 'viewer'); req.add(req.newFetchPeopleRequest ('VIEWER_FRIENDS'), 'viewerFriends'); req.send(onLoadFriends); }

function init() {

jQuery('#listfriends_message').html('Requesting friends...');

var req = opensocial.newDataRequest();

req.add (req.newFetchPersonRequest('VIEWER'), 'viewer');

req.add(req.newFetchPeopleRequest ('VIEWER_FRIENDS'), 'viewerFriends');

req.send(onLoadFriends);

}

GET/SAVE APPLICATION DATA var colorvalue = “red”; var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest( 'VIEWER', ’favorite_color', colorvalue)); req.send();

var colorvalue = “red”;

var req = opensocial.newDataRequest();

req.add(req.newUpdatePersonAppDataRequest( 'VIEWER', ’favorite_color', colorvalue));

req.send();

POST ACTIVITY DATA var activity = opensocial.newActivity( opensocial.newStream(&quot;main&quot;, &quot;gift stream&quot;), “ Paul chose “ + colorvalue + “as his fave” ); opensocial.requestCreateActivity(activity, &quot;HIGH&quot;);

var activity = opensocial.newActivity(

opensocial.newStream(&quot;main&quot;, &quot;gift stream&quot;),

“ Paul chose “ + colorvalue + “as his fave”

);

opensocial.requestCreateActivity(activity, &quot;HIGH&quot;);

Coming Soon OpenSocial Fetch Securely communicate with your application Container Information What container am I running in.. Navigation Profile to Canvas Canvas to Canvas Custom URL paths

OpenSocial Fetch

Securely communicate with your application

Container Information

What container am I running in..

Navigation

Profile to Canvas

Canvas to Canvas

Custom URL paths

Request* APIs Initiate Container Specific Actions RequestMessage() RequestAddFriend() Request*()

Initiate Container Specific Actions

RequestMessage()

RequestAddFriend()

Request*()

Google Gadgets Extensions Many Containers will support these IG_Fetch() retrieve remote content IG_Prefs Store preferences data locally Internationalization UI Elements (Tabs, Drag, Flash etc)

Many Containers will support these

IG_Fetch()

retrieve remote content

IG_Prefs

Store preferences data locally

Internationalization

UI Elements (Tabs, Drag, Flash etc)

Data APIs Just Starting Implementation Will Provide For: Mobile Clients Server-to-Server communication Desktop Clients Etc. Likely Based on OAuth + AtomPub We currently support some calls with hi5 proprietary authentication methods. Create Activity Feed Entry

Just Starting Implementation

Will Provide For:

Mobile Clients

Server-to-Server communication

Desktop Clients

Etc.

Likely Based on OAuth + AtomPub

We currently support some calls with hi5 proprietary authentication methods.

Create Activity Feed Entry

Data APIs - Implementation Based on Enunciate Author Ryan Heaton Adhering to the Google Specification was difficult Required changes to enunciate to conform.

Based on Enunciate

Author Ryan Heaton

Adhering to the Google Specification was difficult

Required changes to enunciate to conform.

What is Enunciate? A Web service Development Framework Binds Java code to Web service requests Validates the binding at compile-time. Generates documentation from the Java code. Builds and packages the application. The Web service API is developed and maintained in code, not in XML and configuration files.

A Web service Development Framework

Binds Java code to Web service requests

Validates the binding at compile-time.

Generates documentation from the Java code.

Builds and packages the application.

The Web service API is developed and maintained in code, not in XML and configuration files.

Enunciate and OpenSocial Enunciate supports the OpenSocial Data API Maps Java service interfaces to REST endpoints. Supports multiple formats, including XML and JSON. URL ”context parameters” e.g. http://api.hi5.com/feeds/people/{person-id}/friends JSONP callbacks X-HTTP-Method-Override Header

Enunciate supports the OpenSocial Data API

Maps Java service interfaces to REST endpoints.

Supports multiple formats, including XML and JSON.

URL ”context parameters”

e.g. http://api.hi5.com/feeds/people/{person-id}/friends

JSONP callbacks

X-HTTP-Method-Override Header

Enunciate and OpenSocial @XmlRootElement public class Entry { String id; Date updated; String title; @XmlElement ( name = ”link” )‏ List<Link> links; }

@XmlRootElement

public class Entry {

String id;

Date updated;

String title;

@XmlElement ( name = ”link” )‏

List<Link> links;

}

Enunciate and OpenSocial @RESTEndpoint public interface PersonService { @Verb ( VerbType.read )‏ @Noun (”people”)‏ Entry getPerson(@ProperNoun String id) throws NotFoundException; ... }

@RESTEndpoint

public interface PersonService {

@Verb ( VerbType.read )‏

@Noun (”people”)‏

Entry getPerson(@ProperNoun String id)

throws NotFoundException;

...

}

Bonus Features Compile-time validation (as opposed to runtime validation). HTML documentation generated from the JavaDocs. Option to publish also via SOAP, GWT-RPC, and (coming soon!) AMF. Application conformance to Java specifications and standards.

Compile-time validation (as opposed to runtime validation).

HTML documentation generated from the JavaDocs.

Option to publish also via SOAP, GWT-RPC, and (coming soon!) AMF.

Application conformance to Java specifications and standards.

What Next? Deliver on the Promise Finalize Security Concerns Caja, Blacklists Open Source Project Apache Shindig Reference Implementation Centralized Directory Open Open Social Directory.

Deliver on the Promise

Finalize Security Concerns

Caja, Blacklists

Open Source Project

Apache Shindig Reference Implementation

Centralized Directory

Open Open Social Directory.

Questions? ?