Google
Developer
Day

 

Introduction to Opensocial

Chris Schalk,  Developer Advocate

6/14/2008
Taipei
- Opensocial Concepts

- Building Opensocial Applications
- Hosting Opensocial Applications
- Google Friend Connect

- Ope...
- Opensocial Concepts

- Building Opensocial Applications
- Hosting Opensocial Applications
- Google Friend Connect

- Ope...
Making the Web More Social

09/

 @
J. 

Look

fin’
E welt
OTHER. 

v . ‘ V"

 

Opensocial makes this possible
Opensocial High Level Details

 A set of APIs that operate in standard Web technologies

~ A reference Implementation:  Sh...
‘ Opensocial Advantages

0 Social Networks
- Lots of features,  minimal cost,  showcase their
innovations

0 App Developer...
orkut

Linked l l .  .

Too many platforms!
Laniaedfl
D Standards based

Opensocial

Friends

A P I Profiles
Activities

Write once. ..
Deploy everywhere
orkut

Linked l l .  .

Single Platform
Cooooool!
a A small sample of Opensocial partners

hi5 orkut ‘§"'VS'? S’lzf¢? e‘? a.‘? .€3{I! .HYVe: "'-r

iGoogle NETLC6'®P'°3°
ime...
- Opensocial Concepts

- Building Opensocial Applications
- Hosting Opensocial Applications
- Google Friend Connect

- Ope...
if t. _l3l! .l. l.! llfl9.. .Ql? §l! §99l. §lfl2l? ll9§! ll.9ll§ , ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,,...
‘ OpenSocia|  Client APIs

- Javascript API - for browser based client development

- Standard Web development technologie...
‘ Building Javascript OpenSocia|  Applications

- If you know how to develop gadgets,  you know how to
develop Javascript ...
‘ Opensocial application in action

Gadget using JavaScript Client API communicates
with OpenSocial server

OpenSocial
Ser...
Understanding the Opensocial Javascript API

The core Opensocial services: 

it People & Friends
- Access friends informat...
‘ Opensocial Javascript AP| s overview
Additional Gadgets services: 

- Gadgets Core
Utilities handling gadget preferences...
‘ People & Friends Example

An example Javascript function to request viewer and
friends info

function getFriendData() {
...
E People & Friends Example

Callback function for retumed friend data

function onLoadFriends(resp) {
var viewer =  resp. ...
Activities Example

Posting an Activity

function postActivity(text) {

var params =  {}; 
params[opensocial. Activity. Fi...
Persistence Example

Storing persisted data

function populateMyAppData() {

var
var
var

req

req. 

req. 

}

req =  ope...
Persistence Example

Fetching persisted data

function requestMyData() {
var req =  opensocial. newDataRequest(); 
var fie...
Demonstration:  Building Opensocial Applications

   

 

. ,.. u,a. ».. .. - » A

. -.. _ . .v. ..- l. ... ,. . 

Edit ap...
Integrating Opensocial applications with external servers

The OpenSocial persistence service provides a way to
store/ sha...
‘Integrating Opensocial applications with external servers

OpenSocial

Sen, “ F] External

2 Server

An example request t...
Additional Opensocial application development resources

Opensocial documentation,  FAQ,  Blog
http: //code. googIe. com/ ...
- Opensocial Concepts

- Building Opensocial Applications
- Hosting Opensocial Applications
- Google Friend Connect

- Ope...
it  . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. -

1. Can build your own server that ...
.. ..5.lllll. .dl.9.f'9ll. ll99.lll. le . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
Why use Shindig? 

Strong open source community

High quality production-ready code

Update easily as Opensocial evolves

...
Demonstration:  Trying out Shindig

   

“} ADRCF "‘--—-. 
:-z incubator

  

__~""° Apache Software Foundation

‘-ll: .’....
‘ Interacting with the REST API using Shindig

Question:  Why would you need a RESTful API? 

Answer: 

What if you wanted...
‘ Shindig REST Architecture

- Gadget Server
- Opensocial Data Server
- REST Server (in progress)

Shindig

REST Gadget Se...
Shindig success at hi5

Big Traffic
~ 10k req/ sec Edge

6k req/ sec Origin  M’ ii  

Hundreds of Developers

T 800+ Apps
...
- OpenSocial Concepts

- Building Opensocial Applications
- Hosting OpenSocia|  Applications
- Google Friend Connect

- Op...
Google Friend Connect

!  Personal Web sites (e. g.blogs) have readers,  contacts, 

connections for a social graph
I Can ...
Google Friend Connect

1 -
3
9;
> -<~
1 ) K
1;. ‘ J‘ Q J
A I 9:,  0"
l "’/  (.  ._ '

A hosted OpenSocial container solution
fl ingridmichaelson. com on Friend Connect

. a ml""

mg:  id.  *_
michaelsoxl‘

L’: 

. . .  ,. 
sum l ;5uy3'. ,
My new blog on Friend Connect

, . /5 .  . . . .  . l a
C0 «ii»:  ‘: ""*"°. ':': ':! .'°-r“€'- , l ‘ . 
‘ . - '4 l , ‘
. ,...
Jl

Google Friend Connect

«Users
-  more ways to do more things with my friends

isite owners
o. .. more (and more engage...
- OpenSocial Concepts

- Building Opensocial Applications
- Hosting OpenSocia|  Applications
- Google Friend Connect

- Op...
OpenSocial Development

Current live OpenSocial developer sandboxes

   

1 ! '-A"- W]
1,.   ‘W ‘ i; —myspace. com “Y”“'. ...
topensocial Platform

Q&A
Google!
Upcoming SlideShare
Loading in...5
×

A

1,561

Published on

Just a simple PDF for SlideShare.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,561
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Enter Title of Presentation HereGoogle Confidential<number>
  • Enter Title of Presentation HereGoogle Confidential<number>
  • Benefits of using Friend Connect
  • A

    1. 1. Google
    2. 2. Developer Day Introduction to Opensocial Chris Schalk, Developer Advocate 6/14/2008 Taipei
    3. 3. - Opensocial Concepts - Building Opensocial Applications - Hosting Opensocial Applications - Google Friend Connect - Opensocial Containers
    4. 4. - Opensocial Concepts - Building Opensocial Applications - Hosting Opensocial Applications - Google Friend Connect - Opensocial Containers
    5. 5. Making the Web More Social 09/ @ J. Look fin’ E welt OTHER. v . ‘ V" Opensocial makes this possible
    6. 6. 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 L Even bigger community of users!
    7. 7. ‘ Opensocial Advantages 0 Social Networks - Lots of features, minimal cost, showcase their innovations 0 App Developers - Can reach 275+ Million Users 0 Web Users - Lots of apps to choose from! So what is the biggest advantage of OpenSocial?
    8. 8. orkut Linked l l . . Too many platforms!
    9. 9. Laniaedfl D Standards based Opensocial Friends A P I Profiles Activities Write once. .. Deploy everywhere
    10. 10. orkut Linked l l . . Single Platform Cooooool!
    11. 11. a A small sample of Opensocial partners hi5 orkut ‘§"'VS'? S’lzf¢? e‘? a.‘? .€3{I! .HYVe: "'-r iGoogle NETLC6'®P'°3° imeem0 om Ning mixifl Gebo ENGAGE ORACLE’ YAHOO! xme" SIX apart AOL : e> Linkedfl viadeo = $§tua°ii’i’zj SQHIDIWIIIK1
    12. 12. - Opensocial Concepts - Building Opensocial Applications - Hosting Opensocial Applications - Google Friend Connect - Opensocial Containers
    13. 13. if t. _l3l! .l. l.! llfl9.. .Ql? §l! §99l. §lfl2l? ll9§! ll.9ll§ , ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, ,,, J» ~ Standards Based ~ HTML+JavaScript+CSS, LAMP, Cloud services * Provides Viral features to share apps ~' Developer Sandboxes ~ Myspace, orkut, hi5, iGoogle, ...
    14. 14. ‘ OpenSocia| 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++ - RESTfu| API - for server based client development - Based on Atom publishing protocol - Data transfer is Atom or JSON - More on RESTfu| API later. ..
    15. 15. ‘ Building Javascript OpenSocia| 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 OpenSocia| applications are “gadgets++" - Gadgets development, but with additional Social capabilities
    16. 16. ‘ Opensocial application in action Gadget using JavaScript Client API communicates with OpenSocial server OpenSocial Server
    17. 17. Understanding the Opensocial Javascript API The core Opensocial services: it People & Friends - Access friends information programmatically 4! Activities - See what you’re friends are up to - Share what you are doing as Persistence - Provide state without a server ‘ Share data with your friends
    18. 18. ‘ Opensocial Javascript AP| s overview Additional Gadgets services: - Gadgets Core Utilities handling gadget preferences, 10, J SON - Gadgets Feature-Specific Utilities for working with flash, window management, tabs, rpc, MiniMessage
    19. 19. ‘ 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. newFetchPeop1eRequest(VIEwER_FRIENDS), 'viewerFriends'); req. send(onLoadFriends); } I9
    20. 20. E People & Friends Example Callback function for retumed 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 += '<1i>' + person. getDisplayName()+'</ li>'; }); html += '</ u1>'; document. getElementById('friends'). innerHTML = html; }
    21. 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. 22. Persistence Example Storing persisted data function populateMyAppData() { var var var req req. req. } req = opensocial. newDataRequest(); datal = Math. random() * 5; data2 = Math. random() * 100; . add(req. newUpdatePersonAppDataRequest( "VIEWER", "AppField1", data1)); add(req. newUpdatePersonAppDataRequest("VIEwER", "AppField2", data2)); send(requestMyData);
    23. 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. newFetchPersonAppDataReqlIest("VIEWER", fields), "viewer_data"); req. send(handleReturnedData); }
    24. 24. Demonstration: Building Opensocial Applications . ,.. u,a. ».. .. - » A . -.. _ . .v. ..- l. ... ,. . Edit applications r . , ‘rt! !! I. ” cut! lnunho u ndnbyow puma. o m. _, .~. ., , 4]" ar - «. ..¢ 7 , o .7. I'rul'fill| ‘fl& . ,-_». «". q.. «. . .. . .-. .. . . _. '-u . , I‘-1‘! uvlalv n. .1 [. ‘VV" . i1 I‘: -»' '11.’. um. ;. . . _ -4: . _. ._. r. .- Y: ,, . .4-nu. . ;. .,-a . -,. . . u- mv nu n-u-~, -an >. - Va’! .1 pr, - . .._v-r-1.. . . ,. -, .,; . nua- . A paws. Own -a( . I mama- mm- . unuloquns . um». I17 0U§n1r, u,—¢ln 1 Vuluvuul Aur- ‘_ , 5:. rx-. ~.. ».. ..x, ..: ,.<t. . . -,-. ,. ;. _«. : . Lm Ham. v --mp-c . A h-vwutt on-ma 4| Ivwmh mum ' V - . A . ... . .4. . .m. u,, .v. ..— . ... ... ,.. * . A. -.. . ». .. . .u. ... ... .. V . I . ... .n. - -. on. 304! Hunts In--pa . r. .. uni ya. vs - _ rr _ . n.-~~. -.. ~>c. .-. au- '-I"-utr , . illkfif . v --u«. ... ban: 5
    25. 25. 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. . . a What if you need to store more data than your container allows? 4 Solution: You can make independent requests out to external servers. - Use: gadgets. io. makeRequest - Can also make authenticated requests using Oauth 4 Can use cloud services from: Joyent, Amazon or AppEngine!
    26. 26. ‘Integrating Opensocial applications with external servers OpenSocial Sen, “ F] External 2 Server An example request to an extemal server '1. Initial request made from gadget 2. Server routes request to external server Requests can be secured using O2'uth!
    27. 27. Additional Opensocial application development resources Opensocial documentation, FAQ, Blog http: //code. googIe. com/ opensocial Further development resources http: //code. google. com/ p/opensocial-resources Development sandboxes available for: orkut, hi5, Myspace, imeem, Netlog
    28. 28. - Opensocial Concepts - Building Opensocial Applications - Hosting Opensocial Applications - Google Friend Connect - Opensocial Containers
    29. 29. it . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. - 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 HTMLIJSICSS -: Opensocial Data Server —RESTful API server (in-progress)
    30. 30. .. ..5.lllll. .dl.9.f'9ll. ll99.lll. le . ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... - - Gadget Server - Opensocial Data Server . Sh’ d‘ Yours1te. com In lg Gadget Gadget _ Server Opensocial DataServer
    31. 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 OpenSocia| v0.7 Shindig is language neutral (Java, PHP today. ..)
    32. 32. Demonstration: Trying out Shindig “} ADRCF "‘--—-. :-z incubator __~""° Apache Software Foundation ‘-ll: .’. ~.. .«.1;v¢: 'v«-: :r'; ,i Shindig - on Apache Incubator projwcl for Opmsoclal and gadgets "ow ‘u-7 -w-uurwwu _ What is sh ndig7 Bart; s. i~4wt"‘, :‘. r'~ «.4-> lc, N1.if: ‘I' TJJ. ’ 'r m: c w1C(<"SC. ":r- ’": -""": .i- : ~n", *.. C. in I’ T’: -' r~n tr ". .'nl r: "nc(r~rr‘* n’ 5." '44; : ‘_, "| (‘I rr'm‘-*' 1'. *nr* ‘tr ' ‘mt . "r‘: ’v K Y‘i- . .. -L: -:ri' . . ‘r: .4'5c—: i- A7’ , _.‘a .11;_q_i_. .., ,-. ,_, -,-. ,. , .,. , II, , _, :. ,,. o Gnd. ,nlC: r1ulmnJavuscrigvt r; r-» . 4. V". -1~; ~:3 5c<_t"¢ 0' ~ xv -. ’1’Ik'. , o G: -Agni 5-nvrr ~ . . : ’I ~. I" _; < 1;‘ 'xI, 'L r. r.r‘ . ~= 'J: n.iI£L'r‘ o OpnnSo( : lCon‘_xlncrJIvIS: llpl . ‘ 1.‘ Jr »'Ocw‘ . ‘ "L' o OpunSOI. ‘~. alOll. I Suva: — . .r l _ l" Ccorbccii ‘<‘; .L, lAP~. .w. ~~ r. i . L ’~',3. iS: ';: l . .- lY‘n’l .1"J
    33. 33. ‘ 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
    34. 34. ‘ Shindig REST Architecture - Gadget Server - Opensocial Data Server - REST Server (in progress) Shindig REST Gadget Server YOL11‘Slte. COII1 ‘ Java l PHP Python C++ | Perl JSON or ATOM j OpenSocial REST Server OpenSociul DataServer
    35. 35. Shindig success at hi5 Big Traffic ~ 10k req/ sec Edge 6k req/ sec Origin M’ ii Hundreds of Developers T 800+ Apps 1 Billion hits/ day on 40 Shindig servers
    36. 36. - OpenSocial Concepts - Building Opensocial Applications - Hosting OpenSocia| Applications - Google Friend Connect - Opensocial Containers
    37. 37. Google Friend Connect ! Personal Web sites (e. g.blogs) have readers, contacts, connections for a social graph I Can small personal websites host Opensocial applications? Problem: blogger’s/ Webmasters typically lack development resources! Sol tition: Google Friend Connect solves this problem!
    38. 38. Google Friend Connect 1 - 3 9; > -<~ 1 ) K 1;. ‘ J‘ Q J A I 9:, 0" l "’/ (. ._ ' A hosted OpenSocial container solution
    39. 39. fl ingridmichaelson. com on Friend Connect . a ml"" mg: id. *_ michaelsoxl‘ L’: . . . ,. sum l ;5uy3'. ,
    40. 40. My new blog on Friend Connect , . /5 . . . . . . l a C0 «ii»: ‘: ""*"°. ':': ':! .'°-r“€'- , l ‘ . ‘ . - '4 l , ‘ . ,.. ... ... ~.. ... ... ..t. ... ,.. ... . . - . . _ —_«-: —. -1 ¢, m,; c,. ,[, Welcome to a sneak preview of my new blog , u,, ,._. ,, m RE CENT ENVRIES Eja- GOOGLI M1 (0-0 CON‘-(CY Anoth: r post B LOG “(XL Anolhrr qulch lost post
    41. 41. Jl Google Friend Connect «Users - more ways to do more things with my friends isite owners o. .. more (and more engaged) traffic for my site «App developers *. .. more reach for my apps Sign up for the preview release! http: IIgoogle. comIfriendconnectl
    42. 42. - OpenSocial Concepts - Building Opensocial Applications - Hosting OpenSocia| Applications - Google Friend Connect - OpenSocial Containers
    43. 43. OpenSocial Development Current live OpenSocial developer sandboxes 1 ! '-A"- W] 1,. ‘W ‘ i; —myspace. com “Y”“'. I . aplace for friends. . : my I‘ ’ , , , myspace. cn - 275+ million users ' 2400+ apps - 88 million installs - 20,000+ developers
    44. 44. topensocial Platform Q&A
    45. 45. Google!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×