CHEWY TREWHELLADeveloper Advocate - Google

JOCHEN DELABIEWeb Developer - Netlog

OPENSOCIALCODELAB

PIETER DE SCHEPPERWeb Developer - Netlog

Getting Started

• Text Editor or Google Gadget Editor

• Web Hosting or built-in hosting from Google Gadget Editor

• You need a Netlog Account

• You can start developing in the Netlog Sandbox

Netlog Sandbox

http://en.netlog.com/go/developer/opensocial/sandbox

Gadget Basics

Hello World example<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Hello World" author="Pieter De Schepper" author_email="pieter@netlog.com"> <Require feature="opensocial-0.8"/> </ModulePrefs> <Content type="html"> <![CDATA[ Hello World! ]]> </Content></Module>

Gadget Basics

• <Module> implies that the XML describes a gadget

• <ModulePrefs> contains information about the gadget, its author and its basic characteristics

• <Require feature="opensocial-0.8"/> specifies to the container to load a certain feature, in this case opensocial 0.8

• <Content type="html"> indicates that the gadget’s content type is html

• <![CDATA[...]] contains all HTML, CSS, JavaScript that makes the gadget to what it is

Writing your first Social Gadget

function loadFriends(){ var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer'); var viewerFriends = opensocial.newIdSpec({ "userId" : "VIEWER", "groupId" : "FRIENDS" }); var opt_params = {}; opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100; req.add(req.newFetchPeopleRequest(viewerFriends, opt_params), 'viewerFriends'); req.send(onLoadFriends);}

function init(){ loadFriends();} gadgets.util.registerOnLoadHandler(init);

Request Friends of viewer

Writing your first Social Gadget

function onLoadFriends(data){ var viewer = data.get('viewer').getData(); var viewerFriends = data.get('viewerFriends').getData(); var html = new Array(); html.push('Friends of ' + viewer.getDisplayName()); html.push('<ul>'); viewerFriends.each(function(person) { if (person.getId()) { html.push('<li>' + person.getDisplayName() + "</li>"); } }); html.push('</ul>'); document.getElementById('friends').innerHTML = html.join('');}

Handling the data

Using App Data

function saveScore(score){ var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest("VIEWER", 'score', score)); req.send(onSaveScore);}

function onSaveScore(data){ if(!data.hadError()) { alert("Score saved!"); }}

Saving App Data

Using App Data

function getScore(){ var req = opensocial.newDataRequest(); var viewer = opensocial.newIdSpec({ "userId" : "VIEWER" }); req.add(req.newFetchPersonRequest("VIEWER"), 'viewer'); req.add(req.newFetchPersonAppDataRequest(viewer, 'score'), 'data'); req.send(onGetScore);}

function onGetScore(data){ var viewer = data.get('viewer').getData(); var data = data.get('data').getData(); document.getElementById('score').innerHTML = "Your current score is " + data[viewer.getId()]['score'];}

Retrieving App Data

Creating activity

function createActivity(score){ var activityParams = {}; activityParams[opensocial.Activity.Field.TITLE] = "got a new highscore!"; activityParams[opensocial.Activity.Field.BODY] = "The score was " + score;

var activity = opensocial.newActivity(activityParams); opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, onCreateActivity);}

function onCreateActivity(data){ if(!data.hadError()) { alert("Activity created!"); }}

Creating activity

Sending notifications

function sendNotification(toUserID, fromName){ var recipients = [toUserID]; var msg = fromName + " has challenged you to a game of poker"; var params = {}; params[opensocial.Message.Field.TYPE] = opensocial.Message.Type.NOTIFICATION; var message = opensocial.newMessage(msg, params); opensocial.requestSendMessage(recipients, message);}

Sending notifications

Making use of views

<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Views" author="Pieter De Schepper" author_email="pieter@netlog.com"> <Require feature="opensocial-0.8"/> <Require feature="views"/> </ModulePrefs> <Content type="html" view="canvas"> <![CDATA[ Hello Canvas!<br/> <a href="#" onclick="gadgets.views.requestNavigateTo('profile')">To profile view</a> ]]> </Content> <Content type="html" view="profile"> <![CDATA[ Hello Profile!<br/> <a href="#" onclick="gadgets.views.requestNavigateTo('canvas')">To canvas view</a> ]]> </Content></Module>

Other features

• Content requests

• requestShareApp

• Dynamic height

• Netlog extensions

Usefull links

• Netlog OpenSocialhttp://en.netlog.com/go/developer/opensocial

• Netlog Sandboxhttp://en.netlog.com/go/developer/opensocial/sandbox

• OpenSocial referencehttp://code.google.com/apis/opensocial/docs/index.html

• Gadget referencehttp://code.google.com/apis/gadgets/devguide_landing.html

• OpenSocial Tutorialhttp://wiki.opensocial.org/index.php?title=OpenSocial_Tutorial