OPENSOCIAL
     CODELAB

PIETER DE SCHEPPER
Web Developer - Netlog

JOCHEN DELABIE
Web Developer - Netlog


CHEWY TREWHELL...
Getting Started



• Text Editor or Google Gadget Editor
• Web Hosting or built-in hosting from Google
  Gadget Editor
• Y...
Netlog Sandbox

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


Hello World example
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?>
<Module>
	 <ModulePrefs title=...
Gadget Basics

•    <Module>   implies that the XML describes a gadget
•    <ModulePrefs>contains information about the
  ...
Writing your first Social Gadget



Request Friends of viewer
function loadFriends()
{
	   var req = opensocial.newDataRequ...
Writing your first Social Gadget



Handling the data
function onLoadFriends(data)
{
	    var viewer = data.get('viewer').g...
Using App Data



Saving App Data
function saveScore(score)
{
	   var req = opensocial.newDataRequest();
	   req.add(req.n...
Using App Data



Retrieving App Data
function getScore()
{
	   var req = opensocial.newDataRequest();
	   var viewer = op...
Creating activity



Creating activity
function createActivity(score)
{
	   var activityParams = {};
	   activityParams[op...
Sending notifications



Sending notifications
function sendNotification(toUserID, fromName)
{
	   var recipients = [toUserI...
Making use of views


<?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?>
<Module>
	   <ModulePrefs title=quot;Viewsqu...
Other features



• Content requests
• requestShareApp
• Dynamic height
• Netlog extensions
Usefull links


•   Netlog OpenSocial
    http://en.netlog.com/go/developer/opensocial

•   Netlog Sandbox
    http://en.n...
Upcoming SlideShare
Loading in...5
×

Opensocial Codelab

1,136

Published on

OpenSocial Codelab Presentation at Netlog Developer Day at Kinepolis, Brussels on 2th of April 2009

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

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

No notes for slide




























  • Opensocial Codelab

    1. 1. OPENSOCIAL CODELAB PIETER DE SCHEPPER Web Developer - Netlog JOCHEN DELABIE Web Developer - Netlog CHEWY TREWHELLA Developer Advocate - Google
    2. 2. 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
    3. 3. Netlog Sandbox http://en.netlog.com/go/developer/opensocial/ sandbox
    4. 4. Gadget Basics Hello World example <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;Hello Worldquot; author=quot;Pieter De Schepperquot; author_email=quot;pieter@netlog.comquot;> <Require feature=quot;opensocial-0.8quot;/> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ Hello World! ]]> </Content> </Module>
    5. 5. Gadget Basics • <Module> implies that the XML describes a gadget • <ModulePrefs>contains information about the gadget, its author and its basic characteristics • specifies to the <Require feature=quot;opensocial-0.8quot;/> container to load a certain feature, in this case opensocial 0.8 • indicates that the gadget’s <Content type=quot;htmlquot;> content type is html • contains all HTML, CSS, JavaScript <![CDATA[...]] that makes the gadget to what it is
    6. 6. Writing your first Social Gadget Request Friends of viewer function loadFriends() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer'); var viewerFriends = opensocial.newIdSpec({ quot;userIdquot; : quot;VIEWERquot;, quot;groupIdquot; : quot;FRIENDSquot; }); 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);
    7. 7. Writing your first Social Gadget Handling the data 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() + quot;</li>quot;); } }); html.push('</ul>'); document.getElementById('friends').innerHTML = html.join(''); }
    8. 8. Using App Data Saving App Data function saveScore(score) { var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest(quot;VIEWERquot;, 'score', score)); req.send(onSaveScore); } function onSaveScore(data) { if(!data.hadError()) { alert(quot;Score saved!quot;); } }
    9. 9. Using App Data Retrieving App Data function getScore() { var req = opensocial.newDataRequest(); var viewer = opensocial.newIdSpec({ quot;userIdquot; : quot;VIEWERquot; }); req.add(req.newFetchPersonRequest(quot;VIEWERquot;), '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 = quot;Your current score is quot; + data[viewer.getId()]['score']; }
    10. 10. Creating activity Creating activity function createActivity(score) { var activityParams = {}; activityParams[opensocial.Activity.Field.TITLE] = quot;got a new highscore!quot;; activityParams[opensocial.Activity.Field.BODY] = quot;The score was quot; + score; var activity = opensocial.newActivity(activityParams); opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, onCreateActivity); } function onCreateActivity(data) { if(!data.hadError()) { alert(quot;Activity created!quot;); } }
    11. 11. Sending notifications Sending notifications function sendNotification(toUserID, fromName) { var recipients = [toUserID]; var msg = fromName + quot; has challenged you to a game of pokerquot;; var params = {}; params[opensocial.Message.Field.TYPE] = opensocial.Message.Type.NOTIFICATION; var message = opensocial.newMessage(msg, params); opensocial.requestSendMessage(recipients, message); }
    12. 12. Making use of views <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;Viewsquot; author=quot;Pieter De Schepperquot; author_email=quot;pieter@netlog.comquot;> <Require feature=quot;opensocial-0.8quot;/> <Require feature=quot;viewsquot;/> </ModulePrefs> <Content type=quot;htmlquot; view=quot;canvasquot;> <![CDATA[ Hello Canvas!<br/> <a href=quot;#quot; onclick=quot;gadgets.views.requestNavigateTo('profile')quot;>To profile view</a> ]]> </Content> <Content type=quot;htmlquot; view=quot;profilequot;> <![CDATA[ Hello Profile!<br/> <a href=quot;#quot; onclick=quot;gadgets.views.requestNavigateTo('canvas')quot;>To canvas view</a> ]]> </Content> </Module>
    13. 13. Other features • Content requests • requestShareApp • Dynamic height • Netlog extensions
    14. 14. Usefull links • Netlog OpenSocial http://en.netlog.com/go/developer/opensocial • Netlog Sandbox http://en.netlog.com/go/developer/opensocial/sandbox • OpenSocial reference http://code.google.com/apis/opensocial/docs/index.html • Gadget reference http://code.google.com/apis/gadgets/devguide_landing.html • OpenSocial Tutorial http://wiki.opensocial.org/index.php?title=OpenSocial_Tutorial
    1. A particular slide catching your eye?

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

    ×