Open Social Intro Gdd Taipei

Introduction to OpenSocial

Chris Schalk, Developer Advocate

6/14/2008Taipei

3

Agenda

• OpenSocial Concepts

• Building OpenSocial Applications

• Hosting OpenSocial Applications

• Google Friend Connect

• OpenSocial Containers

4

Agenda






5

OpenSocial

OpenSocial makes this possible

Making the Web More Social

6

OpenSocial High Level Details

• A set of APIs that operate in standard Webtechnologies

• A reference Implementation: Shindig• Apache Open Source Project

• A huge community of developers

• Even bigger community of users!

7

OpenSocial Advantages

• Social Networks• Lots of features, minimal cost, showcase theirinnovations

• App Developers• Can reach 275+ Million Users

• Web Users• Lots of apps to choose from!

So what is the biggest advantage of OpenSocial?

Too many platforms!

Standards based

OpenSocial

Write once… Deploy everywhere

Single PlatformCooooool!

11

A small sample of OpenSocial partners

friendster®

12

Agenda






13

Building OpenSocial Applications

• Standards Based• HTML+JavaScript+CSS, LAMP, Cloudservices

• Provides Viral features to share apps

• Developer Sandboxes• MySpace, orkut, hi5, iGoogle,…

14

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…

15

Building JavaScript OpenSocial Applications

• If you know how to develop gadgets, you know how todevelop 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 Socialcapabilities

16

OpenSocial application in action

Gadget using JavaScript Client API communicates with OpenSocial server

OpenSocialServer

browser

JSON

Gadget XML SourceGadget XML Source

17

Understanding the OpenSocial JavaScript API

• 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

The core OpenSocial services:

18

OpenSocial JavaScript APIs overview

• Gadgets Core Utilities handling gadget preferences, IO, JSON

• Gadgets Feature-Specific Utilities for working with flash, window management,tabs, rpc, MiniMessage

Additional Gadgets services:

19

People & Friends Example

An example JavaScript function to request viewer andfriends info

function getFriendData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER),'viewer'); req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS), 'viewerFriends'); req.send(onLoadFriends);}

20

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

21

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("This is a sample activity, created at " + new Date().toString())}

22

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("VIEWER", "AppField1", data1)); req.add(req.newUpdatePersonAppDataRequest("VIEWER", "AppField2", data2)); req.send(requestMyData);}

23

Persistence Example

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

24

Demonstration: Building OpenSocial Applications

25

Integrating OpenSocial applications with external servers

• What if you need to store more data than yourcontainer allows?

• Solution: You can make independent requests outto external servers.• Use: gadgets.io.makeRequest

• Can also make authenticated requests using Oauth

• Can use cloud services from: Joyent, Amazon orAppEngine!

The OpenSocial persistence service provides a way to store/share small amounts of data on the OpenSocialserver, but…

26

Integrating OpenSocial applications with external servers

An example request to an external server

browser

OpenSocialServer

1. Initial request made from gadget2. Server routes request to external server

ExternalServer

gadgets.io.makeRequest

1 2

Requests can be secured using OAuth!

27

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

28

Agenda






29

How to host OpenSocial Applications

1. Can build your own server that implementsOpenSocial specification…

2. Or can use “Shindig” - Reference implementation forOpenSocial

• Gadget Server–Renders gadget XML as HTML/JS/CSS

• OpenSocial Data Server–RESTful API server (in-progress)

30 30

Shindig Architecture

• Gadget Server

• OpenSocial Data Server

Yoursite.com

GadgetGadgetServer

OpenSocialDataServer

Shindig

31

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

32

Demonstration: Trying out Shindig

32

33

Interacting with the REST API using Shindig

• Use simple REST calls instead!

– Does not require JavaScript

– Allows server-to-server communication

• Easily integrate with other server-side technologies:Java, PHP, Perl

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)

34 34

Shindig REST Architecture

• Gadget Server

• OpenSocial Data Server

• REST Server (in progress)

Yoursite.comGadget Server

OpenSocialDataServer

Shindig

OpenSocialREST Server

JSON or ATOM

REST

Java | PHP | Python C++ | Perl …

35

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

36

Agenda






37

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!

38


A hosted OpenSocial container solution

39

ingridmichaelson.com on Friend Connect

40

My new blog on Friend Connect

41


•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/

42

Agenda






43

• 275+ million users

• 88 million installs

OpenSocial Development

Current live OpenSocial developer sandboxes

• 2400+ apps

• 20,000+ developers

44

OpenSocial Platform

Q&A

謝謝您謝謝您!!

Technology

Open Social Intro Gdd Taipei