Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Hi5 Hackathon Presentation

Nächste SlideShare
Ionic by Example
Ionic by Example
Wird geladen in …3

Hier ansehen

1 von 77 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (13)


Ähnlich wie Hi5 Hackathon Presentation (20)

Aktuellste (20)


Hi5 Hackathon Presentation

  1. 1. hi5 Platform Pre-Launch Developer Hackathon March 15, 2008
  2. 2. hi5 Platform About hi5 Developer Console Integration Points Application Discovery hi5 OpenSocial Extensions Why Develop for hi5? Roadmap Demo
  3. 3. hi5 The Truly Global Social Network
  4. 4. The Developer Console Managing Your Applications
  5. 5. Developer Console Add and manage applications Refresh metadata and i18n messages Manage other developers Manage API Keys Submit applications to the hi5 directory View analytics Simple in-line application editor Multi-language testing hi5 Developer blog feed
  6. 6. Developer Console
  7. 7. Application Editor
  8. 8. Language Preview
  9. 9. Analytics
  10. 10. Anatomy of a hi5 Application A seamless user experience within hi5
  11. 11. Integration Points Preview Homepage My Applications Profile Module Draggable, minimizable Skins feature allows seamless UI integration Canvas Page Dedicated page for applications Monetization opportunity, allows embedded ad tags
  12. 12. Profile Module
  13. 13. Profile Module Action Links
  14. 14. Profile Navigation Tab
  15. 15. Canvas Page
  16. 16. Preview
  17. 17. Homepage
  18. 18. Application Discovery Achieving massive distribution across the globe
  19. 19. Application Discovery Application Directory Categories, sorting and filtering Application Homepage My Friends' applications Other recommendations Manage your applications Viral Channels Friend Updates Notifications Invites Email (limited to 1 per user per app per day)
  20. 20. Application Directory
  21. 21. Applications Homepage
  22. 22. Friend Updates On both homepage and profile page Created using the OpenSocial Activity API (requestCreateActivity) Publication not guaranteed but typically high (> 80%)
  23. 23. Notifications Sent using the OpenSocial request* API. (requestSendMessage, type=NOTIFICATION) Limited to 5 per user per app per day
  24. 24. Invites All apps have built-in invite flow from profile and canvas pages
  25. 25. Invites
  26. 26. Homepage Alerts
  27. 27. Email Notifications Limited to 1 per user/app/day
  28. 28. hi5 Features Extending OpenSocial to meet your needs
  29. 29. OpenSocial Feature: hi5 An optional feature that provides access to additional hi5- specific functionality. New data requests (hi5 feature) Photos (hi5.fetchAlbumsDataRequest) Online Presence (hi5.fetchPresenceRequest) Status (hi5.fetchStatusRequest) New fields Link for friend update media (hi5.ActivityMediaItemField.LINK) Much more to come!
  30. 30. OpenSocial Feature: hi5-template Templating support, tag library, and facility for parameterizing i18n messages <template xmlns:hi5=quot;http://www.w3.org/1999/xhtmlquot;></template> <if test=quot;expressionquot;></if> <else-if test=quot;expressionquot;></if> <else></if> <for-each var=quot;variablequot; source=quot;data-sourcequot;></for-each> <apply-template name=quot;template-namequot;/> <hi5:name person=quot;person-objectquot;/> <hi5:profile-pic [id=quot;member-idquot; | person=quot;person-objectquot;] size=quot;thumb | smallquot;/> <hi5:message key=quot;propertyquot; [param=quot;valuequot;]*/>
  31. 31. OpenSocial Feature: hi5-lifecycle Allows developers to declare callback URLs for app installation and removal Usage: <Optional feature=quot;hi5-lifecyclequot;> <Param name=quot;installPingUrlquot; value=quot;http://yourserver/handleInstallquot;/> <Param name=quot;removePingUrlquot; value=quot;http://yourserver/handleRemovequot;/> </Optional>
  32. 32. Demo hi5 Gifts Tutorial
  33. 33. Basic Gifts Tutorial http://lou.sandbox.hi5.com/friend/apps/entry/webvan.hi5.com/gadgets/gifts.xml Gifts with i18n http://lou.sandbox.hi5.com/friend/apps/entry/www.webvan.hi5.com/friend/apps/developer/app/get/xml/5197 Template Demo http://lou.sandbox.hi5.com/friend/apps/entry/www.sandbox.hi5.com/friend/apps/developer/app/get/xml/5206
  34. 34. Develop With Us More reasons to develop for hi5
  35. 35. More reasons to develop for hi5... A new audience via our unique footprint in Latin America, Europe and Asia Of the more than 80 million individuals registered with hi5, less than a third are also active on the other leading social networks, incl. FB, MySpace, Bebo, Friendster (comscore) OpenSocial! Apps can be deeply embedded within hi5, as well as easily translated beyond hi5 to other OpenSocial- enabled websites
  36. 36. More reasons to develop for hi5... $$$ A dedicated canvas page that can be monetized Promotions on the hi5 blog (one developer post/mo – rotating among our registered developers with popular apps) Free Infrastructure from Joyent hi5 Developers could win one year of Joyent’s Free Accelerator™ scalable, on-demand infrastructure for their hi5 app! Limited number at launch, more to come
  37. 37. More reasons to develop for hi5... Translation Services We plan on offering translation support into Spanish to the first 100 high-quality applications approved for production We look forward to offering built-in translation support for all hi5 applications in multiple languages in future versions of the platform
  38. 38. hi5 Platform Launch Several hundred apps in our sandbox that we are reviewing and working with developers to finalize. White-list style approach to ensure app quality and user- centric relevancy (guidelines to be published this week) March 31st Public Launch Public rollout begins! We'll launch with as many applications that have met our guidelines and are ready to go live.
  39. 39. Important Links Developer site http://developer.hi5.com - All below links are accessible from here. Developer Registration http://sandbox.hi5.com/friend/apps/developer.do API Documentation http://api.hi5.com Application Guidelines http://www.hi5networks.com/platform/wiki/AppGuidelines Bug Tracker http://www.hi5networks.com/platform/report Discussion Forums http://www.hi5networks.com/platform/discussion
  40. 40. Questions
  41. 41. The Gifts Tutorial Step-by-step guide to building an OpenSocial app on hi5
  42. 42. Basic OpenSocial XML <?xml version=quot;1.0quot; encoding=quot;UTF-8quot; ?> <Module> <ModulePrefs title=quot;Gifts Tutorial” author_email=” lrm718@yahoo.com”> <Require feature=quot;opensocial-0.7quot; /> </ModulePrefs> <Content type=quot;htmlquot;> <![CDATA[ Hello, world! ]]> </Content> </Module>
  43. 43. Important Meta-data <ModulePrefs title=quot;Gifts Tutorial” author_email=”lrm718@yahoo.com” summary=quot;short description for list viewsquot; description=quot;long description for previewquot; thumbnail=quot;http://yourhost/path_to_120x60_imgquot; icon=quot;http://yourhost/path_to_15x15_faviconquot; >
  44. 44. Initialization gadgets.util.registerOnLoadHandler(init); function init() { loadFriends(); }
  45. 45. Fetching Friends function loadFriends() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest('VIEWER'), 'viewer'); req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends'); req.send(onLoadFriends); }
  46. 46. Handle the Response
  47. 47. Handle the Response function onLoadFriends(data) { var viewer = data.get('viewer').getData(); var viewerFriends = data.get('viewerFriends').getData(); html = new Array(); html.push('<ul>'); viewerFriends.each(function(person) { html.push('<li>' + person.getDisplayName() + quot;</li>quot;); }); html.push('</ul>'); document.getElementById('friends').innerHTML = html.join(''); }
  48. 48. Adding App Data
  49. 49. Adding App Data
  50. 50. Adding App Data
  51. 51. Adding App Data var givenGifts = {}; function giveGift() { var nut = document.getElementById('nut').value; var friend = document.getElementById('person').value; givenGifts[friend] = nut; var json = gadgets.json.stringify(givenGifts); var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER, 'gifts', json)); req.send(); }
  52. 52. Displaying App Data
  53. 53. Displaying App Data
  54. 54. Displaying App Data
  55. 55. Displaying App Data function updateGiftList(viewer, data, friends) { var json = data[viewer.getId()]['gifts']; if (!json) { givenGifts = {}; } try { givenGifts = gadgets.json.parse(json); } catch (e) { givenGifts = {}; } var options = ['a cashew nut', 'a peanut', 'a hazelnut', 'a red pistachio nut']; var html = new Array(); html.push('You have given:'); html.push('<ul>'); for (i in givenGifts) { if (+(i) > 0) { html.push('<li>' + friends[i] + ' received ' + options[givenGifts[i]] + '</li>'); } } html.push('</ul>'); document.getElementById('given').innerHTML = html.join(''); }
  56. 56. Displaying App Data
  57. 57. Displaying App Data
  58. 58. Resizing the Window In Module element: <Require feature=quot;dynamic-heightquot;/> After rendering content: gadgets.window.adjustHeight()
  59. 59. Creating Activity function createActivity(title) { var opts = new Array(); opts[opensocial.Activity.Field.TITLE] = title; var mediaItems = new Array(); var mediaItem = opensocial.newActivityMediaItem(opensocial.Activity.MediaItem.Type.IMAGE, viewer. getField(opensocial.Person.Field.THUMBNAIL_URL)); // Add a media item link if supported if(gadgets.util.hasFeature('hi5') && opensocial.getEnvironment().supportsField(opensocial.Environment. ObjectType.ACTIVITY_MEDIA_ITEM, hi5.ActivityMediaItemField.LINK)) { mediaItem.setField(hi5.ActivityMediaItemField.LINK, viewer.getField(opensocial.Person.Field. PROFILE_URL)); } var activity = opensocial.newActivity(opts);
  60. 60. Sending Notifications function sendNotifications(notification, toIds) { var params = new Object(); params[opensocial.Message.Field.TYPE] = opensocial. Message.Type.NOTIFICATION; var message = opensocial.newMessage(notification, params); opensocial.requestSendMessage(toIds, message); }
  61. 61. Sending Notifications var viewerLink = viewer.getField(opensocial.Person.Field.PROFILE_URL); var notification = '<a href=quot;' + viewerLink + 'quot;>' + viewer.getDisplayName() + '</a> gave you a ' + options[nut]; var toIds = {}; toIds.push(friend); sendNotifications(notification, toIds);
  62. 62. Making Content Requests function getJournal() { gadgets.io.makeRequest('http://api.hi5.com/rest/feed/journal/userId', function(response) { var data = response.data; // do something with data }, {'METHOD' : 'GET', 'CONTENT_TYPE' : 'DOM'} ); }
  63. 63. Working With Views
  64. 64. Working With Views <Content type=“html” view=“profile”> <![CDATA[ <script src=quot;http://images.hi5.com/images/opensocial/gifts.jsquot; ></script> <script> gadgets.util.registerOnLoadHandler(initProfile); </script> <div id='main'> <div id='received’></div> </div> ]]> </Content>
  65. 65. Navigating to a View
  66. 66. Navigating to a View function navToCanvas() { var views = gadgets.views.getSupportedViews(); gadgets.views.requestNavigateTo(views['canvas']); }
  67. 67. Using Skins In ModulePrefs: <Require feature=quot;skinsquot;/> In Your Application: function setSkin() { document.write('<style type=quot;text/cssquot;>'); document.write('.main {'); bgColor = gadgets.skins.getProperty(gadgets.skins.Property.BG_COLOR); if(bgColor) { document.write('background-color:' + bgColor + ';'); } document.write('}'); document.wrtie('</style>'); }
  68. 68. Adding the hi5 OpenSocial API In ModulePrefs: <Optional feature='hi5'/>
  69. 69. Adding hi5 data requests var req = opensocial.newDataRequest(); req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER,'gifts', json)); req.add(req.newFetchPersonRequest('VIEWER'), 'viewer'); req.add(req.newFetchPersonRequest('OWNER'), 'owner'); req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends'); req.add(req.newFetchPersonAppDataRequest('VIEWER', 'gifts'), 'data'); if(gadgets.util.hasFeature('hi5')) { req.add(hi5.newFetchStatusRequest('OWNER'),'ownerStatus'); req.add(hi5.newFetchPresenceRequest('VIEWER_FRIENDS'),'viewerFriendsPresence'); } req.send(onLoadFriends); Documentation on hi5 js objects: http://www.hi5networks.com/platform/wiki/JsAPI (Work in progress)
  70. 70. hi5 REST API api.hi5.com Roadmap We will add support to access more of our REST API via OpenSocial calls We will move towards compliance with a standard OpenSocial REST API implementation
  71. 71. Sample App Code http://webvan.hi5.com/gadgets/gifts.js http://webvan.hi5.com/gadgets/gifts.xml