A

Introduction to OpenSocial Chris Schalk, Developer Advocate 6/14/2008 Taipei

Agenda • OpenSocial Concepts • Building OpenSocial Applications • Hosting OpenSocial Applications • Google Friend Connect • OpenSocial Containers 3

OpenSocial Making the Web More Social OpenSocial makes this possible 5

OpenSocial High Level Details • A set of APIs that operate in standard Web technologies • A reference Implementation: Shindig • Apache Open Source Project • A huge community of developers • Even bigger community of users! 6

OpenSocial Advantages • Social Networks • Lots of features, minimal cost, showcase their innovations • App Developers • Can reach 275+ Million Users • Web Users • Lots of apps to choose from! So what is the biggest advantage of OpenSocial? 7

Too many platforms!

Standards based OpenSocial Write once… Deploy everywhere

Single Platform Cooooool!

A small sample of OpenSocial partners friendster ® 11

Building OpenSocial Applications • Standards Based • HTML+JavaScript+CSS, LAMP, Cloud services • Provides Viral features to share apps • Developer Sandboxes • MySpace, orkut, hi5, iGoogle,… 13

OpenSocial Client APIs • JavaScript API - for browser based client development Standard Web development technologies • HTML + Javascript, CSS, AJAX • Can integrate with 3rd party servers • PHP, Perl, Java, C/C++ • • RESTful API - for server based client development Based on Atom publishing protocol • Data transfer is Atom or JSON • More on RESTful API later… • 14

Building JavaScript OpenSocial Applications • If you know how to develop gadgets, you know how to develop JavaScript OpenSocial applications! Follows same approach as gadgets • • JavaScript/HTML/CSS embedded in an XML document • XML document containing gadget is hosted on the Internet OpenSocial applications are “gadgets++” • • Gadgets development, but with additional Social capabilities 15

OpenSocial application in action Gadget using JavaScript Client API communicates with OpenSocial server OpenSocial JSON Server browser Gadget XML Source 16

Understanding the OpenSocial JavaScript API The core OpenSocial services: • People & Friends Access friends information programmatically • • Activities See what you’re friends are up to • Share what you are doing • • Persistence Provide state without a server • Share data with your friends • 17

OpenSocial JavaScript APIs overview Additional Gadgets services: • Gadgets Core Utilities handling gadget preferences, IO, JSON • Gadgets Feature-Specific Utilities for working with flash, window management, tabs, rpc, MiniMessage 18

People & Friends Example An example JavaScript function to request viewer and friends info function getFriendData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER), 'viewer'); req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS), 'viewerFriends'); req.send(onLoadFriends); } 19

People & Friends Example Callback function for returned friend data function onLoadFriends(resp) { var viewer = resp.get('viewer').getData(); var viewerFriends = resp.get('viewerFriends').getData(); var html = 'Friends of ' + viewer.getDisplayName() + ‘:<br><ul>’; viewerFriends.each(function(person) { html += '<li>' + person.getDisplayName()+'</li>';}); html += '</ul>'; document.getElementById('friends').innerHTML = html; } 20

Activities Example 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()) } 21

Persistence Example Storing persisted data function populateMyAppData() { var req = opensocial.newDataRequest(); var data1 = Math.random() * 5; var data2 = Math.random() * 100; req.add(req.newUpdatePersonAppDataRequest(quot;VIEWERquot;, quot;AppField1quot;, data1)); req.add(req.newUpdatePersonAppDataRequest(quot;VIEWERquot;, quot;AppField2quot;, data2)); req.send(requestMyData); } 22

Persistence Example Fetching persisted data function requestMyData() { var req = opensocial.newDataRequest(); var fields = [quot;AppField1quot;, quot;AppField2quot;]; req.add(req.newFetchPersonRequest( opensocial.DataRequest.PersonId.VIEWER), quot;viewerquot;); req.add(req.newFetchPersonAppDataRequest(quot;VIEWERquot;, fields), quot;viewer_dataquot;); req.send(handleReturnedData); } 23

Demonstration: Building OpenSocial Applications 24

Integrating OpenSocial applications with external servers The OpenSocial persistence service provides a way to store/share small amounts of data on the OpenSocial server, but… • What if you need to store more data than your container allows? • Solution: You can make independent requests out to external servers. • Use: gadgets.io.makeRequest • Can also make authenticated requests using Oauth • Can use cloud services from: Joyent, Amazon or AppEngine! 25

Integrating OpenSocial applications with external servers An example request to an external server gadgets.io.makeRequest TIFFQuickTimeªsee this picture. and a (Uncompressed) decompressor are needed to OpenSocial External Server Server 1 2 browser 1. Initial request made from gadget 2. Server routes request to external server Requests can be secured using OAuth! 26

Additional OpenSocial application development resources • OpenSocial documentation, FAQ, Blog • http://code.google.com/opensocial • Further development resources • http://code.google.com/p/opensocial-resources • Development sandboxes available for: • orkut, hi5, MySpace, imeem, Netlog 27

How to host OpenSocial Applications 1. Can build your own server that implements OpenSocial specification… 2. Or can use “Shindig” - Reference implementation for OpenSocial • Gadget Server –Renders gadget XML as HTML/JS/CSS • OpenSocial Data Server –RESTful API server (in-progress) 29

Shindig Architecture • Gadget Server • OpenSocial Data Server Shindig Yoursite.com Gadget Server Gadget OpenSocial DataServer 30 30

Why use Shindig? • Strong open source community • High quality production-ready code • Update easily as OpenSocial evolves • Built in security using OAuth • Fully compliant with OpenSocial v0.7 • Shindig is language neutral (Java, PHP today…) 31

Demonstration: Trying out Shindig 32 32

Interacting with the REST API using Shindig Question: Why would you need a RESTful API? Answer: What if you wanted to access OpenSocial data from a server? (Outside of a browser/JavaScript environment) • Use simple REST calls instead! – Does not require JavaScript – Allows server-to-server communication • Easily integrate with other server-side technologies: Java, PHP, Perl 33

Shindig REST Architecture • Gadget Server • OpenSocial Data Server • REST Server (in progress) Shindig Gadget Server REST Yoursite.com OpenSocial REST Server Java | PHP | Python JSON or ATOM C++ | Perl … OpenSocial DataServer 34 34

Shindig success at hi5 • Big Traffic • 10k req/sec Edge • 6k req/sec Origin • Hundreds of Developers • 800+ Apps • 1 Billion hits/day … on 40 Shindig servers 35 35

Google Friend Connect • Personal Web sites (e.g.blogs) have readers, contacts, connections for a social graph • Can small personal websites host OpenSocial applications? Problem: blogger’s/Webmasters typically lack development resources! Solution: Google Friend Connect solves this problem! 37

Google Friend Connect A hosted OpenSocial container solution 38

ingridmichaelson.com on Friend Connect 39

My new blog on Friend Connect 40

Google Friend Connect •Users • … more ways to do more things with my friends •Site owners •… more (and more engaged) traffic for my site •App developers •... more reach for my apps • Sign up for the preview release! http://google.com/friendconnect/ 41

OpenSocial Development Current live OpenSocial developer sandboxes • 2400+ apps • 275+ million users • 20,000+ developers • 88 million installs 43

OpenSocial Platform Q&A A & Q ! 44

A

by noviceprogram on Jan 02, 2009

Accessibility

Categories

Upload Details

Usage Rights

Statistics

A — Presentation Transcript