Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 (A...
Benefits <ul><li>  </li></ul><ul><li>For Application Developers </li></ul><ul><li>  </li></ul><ul><ul><li>Low cost start u...
OpenSocial Give Gifts Walkthrough iGoogle Developer Sandbox http://tinyurl.com/5vwwaz   Add Google Gadget Editor - GGE htt...
OpenSocial Give Gifts Walkthrough   1) Create application           http://opensocial-resources.googlecode.com/svn/samples...
Writing OpenSocial application <ul><ul><li>     Persistence API  </li></ul></ul><ul><li>                Understand Owner a...
Persistence API  <ul><li>Understand Owner and Viewer Data </li></ul><ul><li>  </li></ul><ul><li>OpenSocial’s Persistence A...
JSON data <ul><li>Facilitates in switching format between data in text and to object </li></ul><ul><li>  </li></ul><ul><ul...
Messages Information for application owner and owner friends (depends on container implementations)   Post Activity openso...
Views View Type : Canvas, Home, Preview, Profile   Views Definition:   <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&...
i18n - Internationalization Application support for multi language      <Locale messages=&quot;http://hosting.gmodules.com...
Debugging How to debug your application   Using alert message might not be the best way to debug. Use a <div> to print uno...
Resources Links iGoogle Developer Home http://code.google.com/apis/igoogle/docs/gs.html opensocial-resources http://code.g...
Upcoming SlideShare
Loading in …5
×

BarCamp KL H20 Open Social Hackathon

528 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

BarCamp KL H20 Open Social Hackathon

  1. 1. H20  OpenSocial Hackathon By Nazroll & Marvin http://tinyurl.com/h20slides BarCamp KL 2009
  2. 2. 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 
  3. 3. Benefits <ul><li>  </li></ul><ul><li>For Application Developers </li></ul><ul><li>  </li></ul><ul><ul><li>Low cost start up for a broad distribution network </li></ul></ul><ul><ul><li>Learn once, write anywhere </li></ul></ul><ul><ul><li>Standards-based – HTML, XML, JavaScript </li></ul></ul><ul><ul><li>Can build your own social network </li></ul></ul><ul><li>  </li></ul><ul><li>For Social Networks </li></ul><ul><li>  </li></ul><ul><ul><li>Faster development – more features, more quickly </li></ul></ul><ul><ul><li>Can engage a much larger pool of third party developers than they could without a standard set of APIs </li></ul></ul><ul><ul><li>Can devote their resources to strategic projects rather than extensive API and developer support </li></ul></ul>
  4. 4. 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)
  5. 5. 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!
  6. 6. Writing OpenSocial application <ul><ul><li>    Persistence API  </li></ul></ul><ul><li>               Understand Owner and Viewer Data </li></ul><ul><ul><li>    JSON data </li></ul></ul><ul><li>                 Facilitates in switching format between data in text and to object </li></ul><ul><ul><li>    Messages </li></ul></ul><ul><li>                 Information for application owner and owner friends </li></ul><ul><ul><li>    Views </li></ul></ul><ul><li>                 Switching between application views </li></ul><ul><ul><li>    i18n </li></ul></ul><ul><li>                 Application support for multi language </li></ul><ul><ul><li>    Debugging </li></ul></ul><ul><li>                How to debug your application </li></ul>
  7. 7. Persistence API <ul><li>Understand Owner and Viewer Data </li></ul><ul><li>  </li></ul><ul><li>OpenSocial’s Persistence API are functions that allow your application the power to store and retrieve data for each of its users. </li></ul><ul><li>Tips </li></ul><ul><ul><li>Read the Persistence API thoroughly and perform your own tests. </li></ul></ul><ul><ul><li>Take time to think through the design of data access for your application. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>If Viewer data is not found, application should encourage viewer to install the application. </li></ul></ul><ul><ul><li>Try to think of a way to retrieve all possible available data of Owner Friends or Viewer Friends to encourage application interaction and installation. </li></ul></ul><ul><ul><li>During your test, try to get the data or any error during the retrieval to get familiar with the ACL. </li></ul></ul><ul><ul><li>Identify which OpenSocial version you intend to deploy in. Not every OpenSocial containers out there is having the latest version. </li></ul></ul>
  8. 8. JSON data <ul><li>Facilitates in switching format between data in text and to object </li></ul><ul><li>  </li></ul><ul><ul><li>Static Class gadgets.json </li></ul></ul><ul><ul><li><static>  Object parse (text) Parses a JSON string, producing a JavaScript value.  </li></ul></ul><ul><ul><li><static>  String stringify (v) Converts a JavaScript value to a JSON string.    </li></ul></ul><ul><ul><li>Sample: </li></ul></ul><ul><li>OSDA Fetching the Viewer's profile information   output(gadgets.json.stringify(viewer)); </li></ul>
  9. 9. 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
  10. 10. 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); }
  11. 11. 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>
  12. 12. 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;                  }            } 
  13. 13. 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');    

×