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
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)
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.
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.
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
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
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
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!!
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
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>
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); }
GET/SAVE APPLICATION DATA 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;);
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
Request* APIs 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)
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
Data APIs - Implementation 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.
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 and OpenSocial @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; ... }
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.
What Next? Deliver on the Promise Finalize Security Concerns Caja, Blacklists Open Source Project Apache Shindig Reference Implementation Centralized Directory Open Open Social Directory.
Questions? ?

Hi5 Open Social

  • 1.
    OpenSocial & hi5UPDATES & ANATOMY Akash Garg, Paul Lindner, Ryan Heaton hi5 Networks November 27th, 2007
  • 2.
    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
  • 3.
    HI5 AND OPENSOCIALEarly 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)
  • 4.
    Sandbox V2 PermanentURLs 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.
  • 5.
    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.
  • 6.
    More Futures AddingFull 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
  • 7.
  • 8.
    PARTS IS PARTSGoogle Gadgets (iGoogle) Atom, AuthSub, and more Javascript fu from Blogger, Google Maps Add Largest Containers Add Largest App Developers Mix Well
  • 9.
    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
  • 10.
    APP / GADGETCONSTRUCTION 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!!
  • 11.
    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
  • 12.
    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>
  • 13.
    GET PEOPLE DATAfunction 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); }
  • 14.
    GET/SAVE APPLICATION DATAvar colorvalue = “red”; var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest( 'VIEWER', ’favorite_color', colorvalue)); req.send();
  • 15.
    POST ACTIVITY DATAvar activity = opensocial.newActivity( opensocial.newStream(&quot;main&quot;, &quot;gift stream&quot;), “ Paul chose “ + colorvalue + “as his fave” ); opensocial.requestCreateActivity(activity, &quot;HIGH&quot;);
  • 16.
    Coming Soon OpenSocialFetch Securely communicate with your application Container Information What container am I running in.. Navigation Profile to Canvas Canvas to Canvas Custom URL paths
  • 17.
    Request* APIs InitiateContainer Specific Actions RequestMessage() RequestAddFriend() Request*()
  • 18.
    Google Gadgets ExtensionsMany Containers will support these IG_Fetch() retrieve remote content IG_Prefs Store preferences data locally Internationalization UI Elements (Tabs, Drag, Flash etc)
  • 19.
    Data APIs JustStarting 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
  • 20.
    Data APIs -Implementation Based on Enunciate Author Ryan Heaton Adhering to the Google Specification was difficult Required changes to enunciate to conform.
  • 21.
    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.
  • 22.
    Enunciate and OpenSocialEnunciate 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
  • 23.
    Enunciate and OpenSocial@XmlRootElement public class Entry { String id; Date updated; String title; @XmlElement ( name = ”link” )‏ List<Link> links; }
  • 24.
    Enunciate and OpenSocial@RESTEndpoint public interface PersonService { @Verb ( VerbType.read )‏ @Noun (”people”)‏ Entry getPerson(@ProperNoun String id) throws NotFoundException; ... }
  • 25.
    Bonus Features Compile-timevalidation (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.
  • 26.
    What Next? Deliveron the Promise Finalize Security Concerns Caja, Blacklists Open Source Project Apache Shindig Reference Implementation Centralized Directory Open Open Social Directory.
  • 27.