Slide 2: Google and the social Web
Patrick Chanezon @chanezon Google Mauro Gonzalez @gmaurol Globant 11/16/09
Post your questions for this talk on Twitter #devfest09 #opensocial
Slide 3: “The web is better when it's social.”
David Glazer, Google Engineering Director
Slide 4: Clock
4
Slide 5: Movies
5
Slide 6: Stocks
6
Slide 7: Google is Better When it’s Social
Slide 8: Google Docs
Collaboration is social
8
Slide 9: Google Reader
Sharing is social
9
Slide 10: Google Groups, Google Talk, Gmail
Communication is social
10
Slide 11: YouTube
Updates are social
11
Slide 12: Implicit Social Graphs
Slide 13: Google Contacts
– Contacts lets users manage relationships
13
Slide 14: Profiles
– Let users create a persona – Public image on the web – Available in search
14
Slide 15: What's Google Getting with Social?
• Richer web apps
More revenue Increased usage
More users
15
Slide 16: Recommendations for the Social Web
Use the same approach
– Interact with your friends where you are and where they are – Don't lock users into a single site – Take advantage of implicit social graphs
The result is more powerful, more useful applications
16
Slide 17: How Developers Benefit
Slide 18: How Developers Benefit
– Use Google's social graph
• In your own apps • To integrate with our apps • To add features to our apps
– Several technologies to accomplish these goals…
18
Slide 19: OpenSocial
– Common APIs for accessing social data
• People • Activities • App Data
– JavaScript, REST, and RPC implementations – Newest version, 0.9, just released
19
Slide 20: OpenSocial
Supporting products
20
Slide 21: Portable Contacts
– The coolest technology without a logo – Fully compatible with opensocial.Person API – Pulls the user's social graph into a 3rd party site (with the user's
permission)
21
Slide 22: Google Friend Connect
– Uses OpenSocial (gadgets, REST/RPC) – Allows site owners to mix in social data to existing sites – Cut and paste or – Deep integrations
22
Slide 23: Back to OpenSocial…
23
Slide 24: What They Have in Common
– Millions of users with a shared focus and demands – Common social graph and social data
• Uses the 'Friends' group in Contacts • App data is shared between app instances • The same endpoint is used for the REST/RPC protocols
24
Slide 25: iGoogle
OpenSocial
– Provides 'home' and 'canvas' views – requestShareApp and Updates for organic growth
25
Slide 26: Gmail
OpenSocial
– Provides 'nav' and 'canvas' views – Enabled as a Gmail Labs feature
26
Slide 27: Google Calendar
OpenSocial – Early preview
– Provides 'nav' and 'canvas' views – Includes google.calendar API extensions, eg:
• google.calendar.showEvent • google.calendar.subscribeToDates • google.calendar.getUserEvents
27
Slide 28: Google Calendar
OpenSocial
– Gadgets are all about making Calendar extensible – Bringing apps into Calendar – Private whitelist for now, open to developers in the near future – Check out the Developer Sandbox at I/O for a closer look at
more details
28
Slide 29: Container Cheat Sheet
Leverage social graph
Quick data entry
Dashboard view
Container-specific extensions
29
Slide 30: Quartermile: An Example Gadget
30
Slide 31: Quartermile: An Example Gadget
Slide 32: Quartermile
Gadget overview
– Track exercise with others – View stats – Quick, "smart" data entry box – Google App Engine backend
32
Slide 33: Quartermile
Architecture
Signed request
JSON
33
Slide 34: Quartermile
Designing for iGoogle
Leverage social graph
Quick data entry
Dashboard view
Container-specific extensions
34
Slide 35: Quartermile
Joining a team
– Load VIEWER_FRIENDS – Send result to backend – Return set of "interesting" teams
35
Slide 36: Quartermile
Retrieving friends (client)
var batch = osapi.newBatch(). add('viewer', osapi.people.getViewer()). add('friends', osapi.people.get({ userId: '@viewer', groupId: '@friends' })); batch.execute(callback);
36
Slide 37: Quartermile
Retrieving friends (compared with 0.8)
var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest('VIEWER'), 'viewer'); var friends = opensocial.newIdSpec({ 'userId':'VIEWER', 'groupId':'FRIENDS' }); req.add(req.newFetchPeopleRequest(friends), 'friends'); req.send(callback);
37
Slide 38: Quartermile
Getting a team list (client)
// ['2001', '2003', '3000'] function getInterestingTeams(ids) { var request = { 'method':'get_interesting_teams', 'data':ids }; osapi.http.post(SERVER, { body: gadgets.json.stringify(request) }). execute(displayTeams); }
38
Slide 39: Quartermile
Getting a team list (server)
// team_ids = [2001, 2003, 3000] teams = model_get_by_id(models.Team, team_ids) gql = models.Team.gql("ORDER BY count DESC") interesting_teams = gql.fetch(Settings.MAX_INTERESTING_TEAMS) return teams + interesting_teams
39
Slide 40: Quarter Mile
Displaying the list of teams (client)
//[{'team_id':2001, 'team_name':'Fitness Nuts'}, // {'team_id':2003, 'team_name':'Code Runners'}] function displayTeams(data) { var teams = data.teams; for (i in teams) { $('#interesting').append(jQuery('<li>' + teams[i].team_name + '</li>'); } }
40
Slide 41: Quartermile
Designing for Gmail
Leverage social graph
✓
Quick data entry
Dashboard view
Container-specific extensions
41
Slide 42: Quartermile
Recording an exercise
– User enters an activity – Gadget sends request to server – Response is rendered in the activity list
42
Slide 43: Quartermile
Recording an exercise (client)
// 'walked 1 mile' function saveExercise(text) { var request = { 'method':'create_activity', 'data':text }; osapi.http.post(SERVER, { body: gadgets.json.stringify(request) }). execute(updateExercises); }
43
Slide 44: Quartermile
Designing for Gmail part two
Leverage social graph
✓ ✓
Quick data entry
Dashboard view
Container-specific extensions
44
Slide 45: Quartermile
Displaying a dashboard
45
Slide 46: Quartermile
Navigating to the canvas view (client)
gadgets.views.requestNavigateTo('canvas');
46
Slide 47: Quartermile
Rendering charts (client)
var table = new google.visualization.DataTable(); table.addColumn('string', 'Timestamp'); for (i in data.accounts) { ... } var chart = new google.visualization.ColumnChart( document.getElementById('dash_chart')); chart.draw(table, {isStacked:true, width:600, height:400, legend:'bottom'});
47
Slide 48: Quartermile
Designing for Calendar
Leverage social graph
✓ ✓ ✓
Quick data entry
Dashboard view
Container-specific extensions
48
Slide 49: Quartermile
Viewing a slice of data
– User loads Calendar – User switches between dates or daily, weekly, or monthly view – List of activities updates based on the current view range
49
Slide 50: Quartermile
Specifying a date callback (client)
function changeDateView(dateRange) { var startTime = dateRange.startTime; var endTime = dateRange.endTime; updateRange(startTime, endTime); } google.calendar.subscribeToDates(changeDateView);
50
Slide 51: Quartermile
Finished gadget
Leverage social graph
✓ ✓ ✓ ✓
Quick data entry
Dashboard view
Container-specific extensions
51
Slide 52: Quarter Mile
Getting users
– Submit to container directory – Use available API calls for organic growth
• requestShareApp, Updates
– Cross promote – Advertise
52
Slide 53: Out to the Social Web
53
Slide 54: Out to the Social Web
Signed request
JSON
54
Slide 55: Google Friend Connect Integrations
• Wordpress • Drupal
55
Slide 56: Q&A
