Your SlideShare is downloading. ×
Opensocial Codelab
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Opensocial Codelab

1,113
views

Published on

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

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,113
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
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




























  • Transcript

    • 1. OPENSOCIAL CODELAB PIETER DE SCHEPPER Web Developer - Netlog JOCHEN DELABIE Web Developer - Netlog CHEWY TREWHELLA Developer Advocate - Google
    • 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. Netlog Sandbox http://en.netlog.com/go/developer/opensocial/ sandbox
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. Other features • Content requests • requestShareApp • Dynamic height • Netlog extensions
    • 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