Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,064
On Slideshare
2,064
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Transcript

  • 1. Introduction to OpenSocial Chris Schalk, Developer Advocate 6/14/2008 Taipei
  • 2. Agenda • OpenSocial Concepts • Building OpenSocial Applications • Hosting OpenSocial Applications • Google Friend Connect • OpenSocial Containers 3
  • 3. Agenda • OpenSocial Concepts • Building OpenSocial Applications • Hosting OpenSocial Applications • Google Friend Connect • OpenSocial Containers 4
  • 4. OpenSocial Making the Web More Social OpenSocial makes this possible 5
  • 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
  • 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
  • 7. Too many platforms!
  • 8. Standards based OpenSocial Write once… Deploy everywhere
  • 9. Single Platform Cooooool!
  • 10. A small sample of OpenSocial partners friendster ® 11
  • 11. Agenda • OpenSocial Concepts • Building OpenSocial Applications • Hosting OpenSocial Applications • Google Friend Connect • OpenSocial Containers 12
  • 12. Building OpenSocial Applications • Standards Based • HTML+JavaScript+CSS, LAMP, Cloud services • Provides Viral features to share apps • Developer Sandboxes • MySpace, orkut, hi5, iGoogle,… 13
  • 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
  • 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
  • 15. OpenSocial application in action Gadget using JavaScript Client API communicates with OpenSocial server OpenSocial JSON Server browser Gadget XML Source 16
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 23. Demonstration: Building OpenSocial Applications 24
  • 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
  • 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
  • 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
  • 27. Agenda • OpenSocial Concepts • Building OpenSocial Applications • Hosting OpenSocial Applications • Google Friend Connect • OpenSocial Containers 28
  • 28. 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
  • 29. Shindig Architecture • Gadget Server • OpenSocial Data Server Shindig Yoursite.com Gadget Server Gadget OpenSocial DataServer 30 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
  • 31. Demonstration: Trying out Shindig 32 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
  • 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
  • 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
  • 35. Agenda • OpenSocial Concepts • Building OpenSocial Applications • Hosting OpenSocial Applications • Google Friend Connect • OpenSocial Containers 36
  • 36. 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
  • 37. Google Friend Connect A hosted OpenSocial container solution 38
  • 38. ingridmichaelson.com on Friend Connect 39
  • 39. My new blog on Friend Connect 40
  • 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
  • 41. Agenda • OpenSocial Concepts • Building OpenSocial Applications • Hosting OpenSocial Applications • Google Friend Connect • OpenSocial Containers 42
  • 42. OpenSocial Development Current live OpenSocial developer sandboxes • 2400+ apps • 275+ million users • 20,000+ developers • 88 million installs 43
  • 43. OpenSocial Platform Q&A A & Q ! 44