Opensocial Codelab
-
Upload
pieter-de-schepper -
Category
Technology
-
view
1.391 -
download
0
Transcript of Opensocial Codelab
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="[email protected]"> <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="[email protected]"> <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