RIAction Social Applications in the Cloud 20090226

Gadgets and Social Applications

Google Confidential and Proprietary 1

Gadgets and Social ApplicationsWith OpenSocial

Vinoaj VijeyakumaarCustomer Solutions EngineerGoogle Southeast Asia

http://friendfeed.com/vinoaj

What

Google Confidential and Proprietary

What

2

Foundation

Gadgets

Applications

3

Gadgets and OpenSocial Applications

4

Websites within websites

Gadgets and OpenSocial Applications

5

http://www.orkut.com/Main#Application.aspx?appId=43931632273

Why


Why

6

Reach your Audience Directly

Your

SEM SEO

77

Content

Gadgets & OpenSocial

How


How

9

Where do I put it?

Ive built my RIA

Ive wrapped it into a Gadget, an OpenSocial app, Gadget, an OpenSocial app, a widget

now where do I put it?10

Option 1: iGoogle

Established user-base

Sandbox

11

Sandbox supports OpenSocial

Option 2: Gadget Ads

Rich Media Ad Format

Take your content out to where your users are actively engaged

12

Interaction Tracking

Option 3: OpenSocial

13

OpenSocial


OpenSocial

14

OpenSocial Containers

friendster

Large Reach

and more to come!

Popular SEA OpenSocial containers

MalaysiaFriendsterMySpace

ThailandHi5

imeem PhilippinesFriendster

imeem

VietnamYahoo!360

Hi5

MySpaceimeem

SingaporeFriendster

imeem

Orkut

IndonesiaFriendster

imeem

Significant APAC containers

China

Xiaonei

51.com

Tianya

MySpace CN

India

Orkut

19

Getting Started with OpenSocial


Getting Started with OpenSocial

20

First Stop

OpenSocial.org

Also a social network (surprise surprise!)21

A day in the life of a social app developer

22


23


24


25


26

GadgetsA gadget spec: Is an XML file. Defines metadata about an OpenSocial app. Is highly cacheable and does not need a high performance server.Gadgets use existing web standards XML to define metadata. HTML for markup.

27

HTML for markup. JavaScript for interactivity. CSS for presentation.

GadgetsExample gadget XML spec: Uses HTML to print Hello World. Colors the text red with CSS. Dynamically adjusts the height of the gadget with JavaScript.

28

Hello World

h1 { color: #dd0000; }

gadgets.window.adjustHeight();

]]>

Gadgets

JavaScript utility functions for gadgets:gadgets.io.makeRequest()

Make cross-domain AJAX calls to remote servers.gadgets.json.parse() and gadgets.json.stringify()

Native JSON support.

29

Native JSON support.gadgets.util.escapeString()

Make text safe for display via innerHTML.gadgets.util.registerOnLoadHandler()

Execute code when the page is finished loading.

Gadgets

Add extra features to your gadget: dynamic-height - Change the size of your gadget in the container. views - Navigate between different surfaces of the container. skins - Make your gadget change its styles to match the container. Containers may offer custom features...

30

Gadgets

31

The OpenSocial JavaScript API is a gadget feature, too!

The OpenSocial JavaScript API

3232

The OpenSocial JavaScript APIIt's people!

The OpenSocial JavaScript APIRepresenting users: Client-side, users must work with the VIEWER and the OWNER.

33

The OpenSocial JavaScript APIMultiple personalities: When you visit your own profile, you are both the VIEWER and the OWNER.

34

The OpenSocial JavaScript APIWorking with people:

opensocial.Person - JavaScript representation of a user.

35

ABOUT_ME ACTIVITIES ADDRESSES AGE BODY_TYPE BOOKS CARS CHILDREN CURRENT_LOCATION DATE_OF_BIRTH

JOB_INTERESTS JOBS LANGUAGES_SPOKEN LIVING_ARRANGEMENT LOOKING_FOR MOVIES MUSIC NAME NETWORK_PRESENCE NICKNAME

The OpenSocial JavaScript APIAn OpenSocial Person's fields:

SEXUAL_ORIENTATION SMOKER SPORTS STATUS TAGS THUMBNAIL_URL TIME_ZONE TURN_OFFS TURN_ONS TV_SHOWS

36

DATE_OF_BIRTH DRINKER EMAILS ETHNICITY FASHION FOOD GENDER HAPPIEST_WHEN HAS_APP HEROES HUMORID INTERESTS

NICKNAME PETS PHONE_NUMBERS POLITICAL_VIEWS PROFILE_SONG PROFILE_URL PROFILE_VIDEO QUOTES RELATIONSHIP_STATUS RELIGION ROMANCE SCARED_OF SCHOOLS

TV_SHOWS URLS

The OpenSocial JavaScript APIWorking with people:

A Collection represents many opensocial.Person objects.

37

The OpenSocial JavaScript APIWorking with data:

Persistent data gives apps key, value storage directly on the container. String only, but conversion to JSON allows for storage of complex

objects. Storage per app per user - scales well with growth. Ideal for settings, customizations.

38

The OpenSocial JavaScript APIWorking with activities:

API to post information about what users are doing with your app. Many containers have support for images and some HTML. Channel to grow your application.

39

orkut MySpace hi5

The OpenSocial JavaScript APIPost 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);};

Assign the activity text to the TITLE field.

40

Assign the activity text to the TITLE field. Call opensocial.newActivity() to create a new Activity instance. Call opensocial.requestCreateActivity() to post the activity to the

container.

RESTful and RPC protocols

4141

RESTful and RPC protocolsServers talking to servers

RESTful and RPC protocolsOpens new development modelsBackground processing.Easier Flash integration.Mobile applications.

42

RESTful and RPC protocolsCommunication methods: RESTful (Representational State Transfer) RPC (Remote Procedure Call)Formats: XML JSON AtomPub

43

AtomPub

RESTful and RPC protocolsREST: Resources are URLs.

/people/{guid}/@all

All people connected to the given user:Example - People:

All friends of the given user:

44

/people/{guid}/@friends

/people/{guid}/@self

Profile of the given user:

/people/@me/@self

Profile of the authenticated user:

/people/@supportedFields

Supported Person fields:

RESTful and RPC protocols

Response format (JSON, XML, AtomPub)

Request extra fields

Filtering:

fields={-join|,|field}.

format={format}

Querystring parameters customize requests:

45

Filtering:

Paging:

filterBy={fieldname} filterOp={operation}filterValue={value}updatedSince={xsdDateTime}networkDistance={networkDistance}

count={count} sortBy={fieldname} sortOrder={order} startIndex={startIndex}

RESTful and RPC protocolsREST responses (Person):

{ "id" : "example.org:34KJDCSKJN2HHF0DW20394", "displayName" : "Janey", "name" : {"unstructured" : "Jane Doe"}, "gender" : "female"}

JSON:

XML:

46

Jane Doe female

XML:

RESTful and RPC protocolsAuthentication: Both protocols use OAuth to identify users and apps.

Depending on what the application needs to do, it can use two-legged or three-legged OAuth.

47

OpenSocial Tools

4848

OpenSocial ToolsWhat sets us apart from the animals

Shindig

Writing a gadget server is difficult:

Fast changing API - hard to keep up. Standardization is hard to get right. Costs $ / / !

49

OpenSocial Dev AppDevelopment tool to test out JS code in different containers

50

http://osda.appspot.com

Client Libraries

OpenSocial PHP Client LibraryOpenSocial Java Client LibraryOpenSocial Ruby Client LibraryOpenSocial Ruby Client LibraryOpenSocial Python Client Library

51

But I didnt show up today to deal up today to deal with PHP, Java, Python or Ruby

52

ActionScript Client Library (beta) http://opensocial-resources-zh.googlecode.com/svn/trunk/opensocial-

actionscript-client/0.8/doc/index.html

53

Challenges

5555

ChallengesNobody said this was going to be easy

Challenges

Cross container development is still tricky: Containers may not follow the standard. Containers may follow the standard but have different policies. Follow best practices: http://tinyurl.com/4nuzll

56

Challenges

No central directory Hard for apps to spread to many containers. Apps need to work with different install processes. Directory approval requirements vary from container to container.

57

ChallengesScaling is hard: Easy to start and get some users.

58

ChallengesScaling is hard: Being popular on one social network can push your server to the limit...

59

Scaling is hard:...being popular on many networks will push you right over.

6060

Help solve these problems

OpenSocial is Open

Get involved with the Get involved with the community at opensocial.org

Help shape the Open & Social Web

61

Resources

6262

Resources

Resources

OpenSocial Tutorial: http://rurl.org/ss3

OpenSocial Spec, Foundation, Reference: http://opensocial.org

Caja: http://code.google.com/p/google-caja/

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

OpenSocial Across Containers video: http://tinyurl.com/4nuzll

63

OpenSocial Across Containers video: http://tinyurl.com/4nuzll

OpenSocial Templates: http://ostemplates-demo.appspot.com/

OpenSocial Dev App: http://osda.appspot.com

Partuza: http://partuza.nl

OpenSocial Specification Proposals: http://groups.google.com/group/opensocial-and-gadgets-spec/topics

63

Learn more http://code.google.com

64

http://code.google.comhttp://opensocial.org

Stay updated athttp://apacdeveloper.blogspot.com/

65

http://apacdeveloper.blogspot.com/http://cse-sea.blogspot.com

Technology

RIAction Social Applications in the Cloud 20090226