H20 OpenSocial Hackathon By Nazroll & Marvin http://tinyurl.com/h20slides BarCamp KL 2009

Quick Intro It's Open. It's Social. It's up to you... OpenSocial is a set of common application programming interfaces (APIs) for web-based social network applications, developed by Google along with a number of other social networks. Social networks/Containers: Bebo, Engage.com, Friendster, hi5, Hyves, imeem, NetModular, mixi, MySpace, Ning, orkut, Plaxo, QuePasa, Six Apart, Freebar.com, LinkedIn, Tianji, Salesforce.com, Viadeo, Oracle, XING and Yahoo! Applications: Flixster, FotoFlexer, iLike, Newsgator, RockYou, Slide, Theikos, and VirtualTourist

Benefits For Application Developers Low cost start up for a broad distribution network Learn once, write anywhere Standards-based – HTML, XML, JavaScript Can build your own social network For Social Networks Faster development – more features, more quickly Can engage a much larger pool of third party developers than they could without a standard set of APIs Can devote their resources to strategic projects rather than extensive API and developer support

For Application Developers

Low cost start up for a broad distribution network

Learn once, write anywhere

Standards-based – HTML, XML, JavaScript

Can build your own social network

For Social Networks

Faster development – more features, more quickly

Can engage a much larger pool of third party developers than they could without a standard set of APIs

Can devote their resources to strategic projects rather than extensive API and developer support

OpenSocial Give Gifts Walkthrough iGoogle Developer Sandbox http://tinyurl.com/5vwwaz Add Google Gadget Editor - GGE http://www.google.com/ig/directory?type=gadgets&url=www.google.com/ig/modules/gge.xml Add OpenSocial Dev App - OSDA http://osda.appspot.com/ Orkut Sandbox http://sandbox.orkut.com (Signup under Developer link)

OpenSocial Give Gifts Walkthrough 1) Create application http://opensocial-resources.googlecode.com/svn/samples/tutorial/ 2) Install App to iGoogle/Orkut 3) Setup Friends 4) Run application 5) Now make yours!

Writing OpenSocial application Persistence API Understand Owner and Viewer Data JSON data Facilitates in switching format between data in text and to object Messages Information for application owner and owner friends Views Switching between application views i18n Application support for multi language Debugging How to debug your application

Persistence API

Understand Owner and Viewer Data

JSON data

Facilitates in switching format between data in text and to object

Messages

Information for application owner and owner friends

Views

Switching between application views

i18n

Application support for multi language

Debugging

How to debug your application

Persistence API Understand Owner and Viewer Data OpenSocial’s Persistence API are functions that allow your application the power to store and retrieve data for each of its users. Tips Read the Persistence API thoroughly and perform your own tests. Take time to think through the design of data access for your application. You should try to only write data to Viewer. To update Owner data, do a check when the Owner and Viewer is the same person, and then update the Viewer’s data. If Viewer data is not found, application should encourage viewer to install the application. Try to think of a way to retrieve all possible available data of Owner Friends or Viewer Friends to encourage application interaction and installation. During your test, try to get the data or any error during the retrieval to get familiar with the ACL. Identify which OpenSocial version you intend to deploy in. Not every OpenSocial containers out there is having the latest version.

Understand Owner and Viewer Data

OpenSocial’s Persistence API are functions that allow your application the power to store and retrieve data for each of its users.

Tips

Read the Persistence API thoroughly and perform your own tests.

Take time to think through the design of data access for your application.

You should try to only write data to Viewer. To update Owner data, do a check when the Owner and Viewer is the same person, and then update the Viewer’s data.

If Viewer data is not found, application should encourage viewer to install the application.

Try to think of a way to retrieve all possible available data of Owner Friends or Viewer Friends to encourage application interaction and installation.

During your test, try to get the data or any error during the retrieval to get familiar with the ACL.

Identify which OpenSocial version you intend to deploy in. Not every OpenSocial containers out there is having the latest version.

JSON data Facilitates in switching format between data in text and to object Static Class gadgets.json <static> Object parse (text) Parses a JSON string, producing a JavaScript value. <static> String stringify (v) Converts a JavaScript value to a JSON string. Sample: OSDA Fetching the Viewer's profile information output(gadgets.json.stringify(viewer));

Facilitates in switching format between data in text and to object

Static Class gadgets.json

<static> Object parse (text) Parses a JSON string, producing a JavaScript value.

<static> String stringify (v) Converts a JavaScript value to a JSON string.

Sample:

OSDA Fetching the Viewer's profile information output(gadgets.json.stringify(viewer));

Messages Information for application owner and owner friends (depends on container implementations) Post Activity opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, function() {}); Message <Require feature=&quot;minimessage&quot;/> gadgets.MiniMessage Email Run OSDA sample

Views View Type : Canvas, Home, Preview, Profile Views Definition: <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <Module> <ModulePrefs> <Require feature=&quot;views&quot; /> </ModulePrefs> <Content type=&quot;html&quot; view=&quot;preview,profile&quot;> ............. </Content> <Content type=&quot;html&quot; view=&quot;home,canvas&quot;> ............. </Content> </Module> Navigation: function navigateToCanvas() { var canvas = gadgets.views.getSupportedViews()[&quot;canvas&quot;]; gadgets.views.requestNavigateTo(canvas); }

i18n - Internationalization Application support for multi language <Locale messages=&quot;http://hosting.gmodules.com/..../ALL_ALL.xml&quot;/> <Locale lang=&quot;de&quot; messages=&quot;http://hosting.gmodules.com/..../de_ALL.xml&quot;/> <Locale lang=&quot;zh-cn&quot; messages=&quot;http://hosting.gmodules.com/..../zh_cn_ALL.xml&quot;/> <Locale lang=&quot;fr&quot; messages=&quot;http://hosting.gmodules.com/..../fr_ALL.xml&quot;/> <Locale lang=&quot;ja&quot; messages=&quot;http://hosting.gmodules.com/..../ja_ALL.xml&quot;/> <Locale lang=&quot;es&quot; messages=&quot;http://hosting.gmodules.com/..../es_ALL.xml&quot;/> <Locale lang=&quot;it&quot; messages=&quot;http://hosting.gmodules.com/..../it_ALL.xml&quot;/> <Locale lang=&quot;ru&quot; messages=&quot;http://hosting.gmodules.com/..../ru_ALL.xml&quot;/> Application XML Spec <div class=&quot;buttonBox&quot;><a href='javascript:void(0);' onclick='openQuestion();'> __MSG_btnnewq__ </a></div><br> Message Bundle Files <messagebundle> <msg name=&quot;btnnewq&quot;>New Question</msg> </messagebundle>

Debugging How to debug your application Using alert message might not be the best way to debug. Use a <div> to print unobtrusive message <div id=&quot; debug_div &quot; style=&quot;font-size:9pt; padding:5px; color: red;&quot;></div> Call print in your application code function print(msg) { debug_html = msg + debug_html; // Write debug HTML to div document.getElementById(&quot; debug_div &quot;).innerHTML = debug_html; } }

Resources Links iGoogle Developer Home http://code.google.com/apis/igoogle/docs/gs.html opensocial-resources http://code.google.com/p/opensocial-resources/ OpenSocial Developer Guide http://code.google.com/apis/opensocial/docs/0.8/devguide.html Orkut Developer Guide http://code.google.com/apis/orkut/docs/orkutdevguide/orkutdevguide-0.8.html H2O Sample Application Spec http://tinyurl.com/h20sample Tips The new iGoogle http://google.com/ig Paste in the address bar: New version: javascript:_dlsetp('v2=1'); Old version: javascript:_dlsetp('v2=0');