Hi5 Opensocial Code Lab Presentation

9,244 views
9,171 views

Published on

Published in: Technology, Business
1 Comment
3 Likes
Statistics
Notes
  • please can you help me??
    can you sent me the code for views!!the html code for the views..please and show me where i put the number..!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,244
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
72
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Hi5 Opensocial Code Lab Presentation

  1. 1. hi5 OpenSocial Codelab
  2. 2. hi5 - Dominant Global Social Network <ul><li>We are one of the largest web sites in the world (#8 on Alexa) and the most global of all the social networking sites. </li></ul><ul><li>Over 70+ million registered members and ~40 million WW unique users </li></ul><ul><li>Most popular Spanish-speaking social network in the world </li></ul><ul><li>Top 10 in Latin America </li></ul><ul><li>Mexico, Colombia, Bolivia, Guatemala, Peru, Costa Rica, Nicaragua, Honduras, Ecuador, El Salvador </li></ul><ul><li>Top 10 in Rest of the World </li></ul><ul><li>Portugal, Greece, Romania, Cyprus, Thailand, Jamaica, Sri Lanka, Kuwait, Jordan, Oman </li></ul>
  3. 3. Hi5’s Demographics <ul><li>Broad reach across major demos: </li></ul><ul><ul><li>18 to 34 primary </li></ul></ul><ul><ul><li>Roughly 50%split male/female </li></ul></ul><ul><ul><li>US traffic: significant percentage is Hispanic </li></ul></ul><ul><li>Diverse traffic from Europe (25%), North America (15%) and Central & South America (31%), Asia (21%) </li></ul><ul><li>Offered in 14 languages </li></ul><ul><li>Grew big in most international countries with English first and then translated </li></ul><ul><li>Members use the site primarily to keep in touch with their friends. Users have limited self-expression tools - skins, widgets, etc. </li></ul>
  4. 4. Getting Started <ul><li>A text editor, or the hi5 Gadget Editor </li></ul><ul><li>Web hosting, or the built-in hosting in the hi5 Gadget Editor </li></ul><ul><li>A hi5 account </li></ul><ul><li>Access to the hi5 sandbox </li></ul>
  5. 5. Getting Started on sandbox.hi5.com
  6. 6. Two ways to get your App going Sample App lets you Edit
  7. 7. Editing Console
  8. 8. Preview Mode
  9. 9. Integration Points <ul><li>Preview Page </li></ul><ul><li>Profile Module </li></ul><ul><li>Canvas Page </li></ul><ul><li>Friend Updates </li></ul><ul><li>Notifications </li></ul><ul><li>App Invites </li></ul><ul><li>Emails </li></ul>
  10. 10. Hello World <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> </li></ul><ul><li><Module> </li></ul><ul><li><ModulePrefs title=&quot;Hello World!” author_email=”lou@hi5.com”> </li></ul><ul><li><Require feature=&quot;opensocial-0.7&quot; /> </li></ul><ul><li></ModulePrefs> </li></ul><ul><li><Content type=&quot;html&quot;> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>Hello, world! </li></ul><ul><li>]]> </li></ul><ul><li></Content> </li></ul><ul><li></Module> </li></ul>
  11. 11. Hello World <ul><li><Module> indicates that this XML file contains a gadget. </li></ul><ul><li><ModulePrefs> contains information about the gadget, and its author. </li></ul><ul><li>author_email must match your hi5 account’s email in the hi5 container </li></ul><ul><li><Require feature=&quot;opensocial-0.7&quot; /> denotes a required feature of the gadget — in this case, the OpenSocial API (v0.7). </li></ul><ul><li><Content type=&quot;html&quot;> indicates that the gadget's content type is HTML. </li></ul><ul><li><![ CDATA[…]]> contains the bulk of the gadget, including all of the HTML, CSS, and JavaScript (or references to such files). </li></ul>
  12. 12. Initialization <ul><li>gadgets.util.registerOnLoadHandler(init); </li></ul><ul><li>function init() { </li></ul><ul><li>loadFriends(); </li></ul><ul><li>} </li></ul>
  13. 13. Fetching Friends <ul><li>function loadFriends() { </li></ul><ul><li>var req = opensocial.newDataRequest(); </li></ul><ul><li>req.add(req.newFetchPersonRequest('VIEWER'), 'viewer'); </li></ul><ul><li>req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends'); </li></ul><ul><li>req.send(onLoadFriends); </li></ul><ul><li>} </li></ul>
  14. 14. Handle the Response
  15. 15. Handle the Response <ul><li>function onLoadFriends(data) { </li></ul><ul><li>var viewer = data.get('viewer').getData(); </li></ul><ul><li>var viewerFriends = data.get('viewerFriends').getData(); </li></ul><ul><li>html = new Array(); </li></ul><ul><li>html.push('<ul>'); </li></ul><ul><li>viewerFriends.each(function(person) { </li></ul><ul><li>html.push('<li>' + person.getDisplayName() + &quot;</li>&quot;); </li></ul><ul><li>}); </li></ul><ul><li>html.push('</ul>'); </li></ul><ul><li>document.getElementById('friends').innerHTML = html.join(''); </li></ul><ul><li>} </li></ul>
  16. 16. Adding App Data
  17. 17. Adding App Data
  18. 18. Adding App Data
  19. 19. Adding App Data <ul><li>var givenGifts = {}; </li></ul><ul><li>function giveGift() { </li></ul><ul><li>var nut = document.getElementById('nut').value; </li></ul><ul><li>var friend = document.getElementById('person').value; </li></ul><ul><li>givenGifts[friend] = nut; </li></ul><ul><li>var json = gadgets.json.stringify(givenGifts); </li></ul><ul><li>var req = opensocial.newDataRequest(); </li></ul><ul><li>req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER, 'gifts', json)); </li></ul><ul><li>req.send(); </li></ul><ul><li>} </li></ul>
  20. 20. Displaying App Data
  21. 21. Displaying App Data
  22. 22. Displaying App Data
  23. 23. Displaying App Data <ul><li>function updateGiftList(viewer, data, friends) { </li></ul><ul><li>var json = data[viewer.getId()]['gifts']; </li></ul><ul><li>if (!json) { </li></ul><ul><li>givenGifts = {}; </li></ul><ul><li>} </li></ul><ul><li>try { </li></ul><ul><li>givenGifts = gadgets.json.parse(json); </li></ul><ul><li>} catch (e) { </li></ul><ul><li>givenGifts = {}; </li></ul><ul><li>} </li></ul><ul><li>var options = ['a cashew nut', 'a peanut', 'a hazelnut', 'a red pistachio nut']; </li></ul><ul><li>var html = new Array(); </li></ul><ul><li>html.push('You have given:'); </li></ul><ul><li>html.push('<ul>'); </li></ul><ul><li>for (i in givenGifts) { </li></ul><ul><li>if (+(i) > 0) { </li></ul><ul><li>html.push('<li>' + friends[i] + ' received ' + options[givenGifts[i]] + '</li>'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>html.push('</ul>'); </li></ul><ul><li>document.getElementById('given').innerHTML = html.join(''); </li></ul><ul><li>} </li></ul>
  24. 24. Displaying App Data
  25. 25. Displaying App Data
  26. 26. Displaying App Data
  27. 27. Displaying App Data
  28. 28. Displaying App Data <ul><li>function updateReceivedList(viewer, data, friends) { </li></ul><ul><li>var viewerId = viewer.getId(); </li></ul><ul><li>var options = ['a cashew nut', 'a peanut', 'a hazelnut', 'a red pistachio nut']; </li></ul><ul><li>var html = new Array(); </li></ul><ul><li>html.push('You have received:<ul>'); </li></ul><ul><li>friends.each(function(person) { </li></ul><ul><li>var personData = data[person.getId()]; </li></ul><ul><li>if (personData) { </li></ul><ul><li>var json = data[person.getId()]['gifts']; </li></ul><ul><li>var gifts = {} </li></ul><ul><li>if (!json) { </li></ul><ul><li>gifts = {}; </li></ul><ul><li>} </li></ul><ul><li>try { </li></ul><ul><li>gifts = gadgets.json.parse(json); </li></ul><ul><li>} catch (e) { </li></ul><ul><li>gifts = {}; </li></ul><ul><li>} </li></ul><ul><li>for (i in gifts) { </li></ul><ul><li>if (+(i) > 0 && i == viewerId) { </li></ul><ul><li>html.push('<li>' + options[gifts[i]] + ' from ' + person.getDisplayName() + '</li>'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>html.push('</ul>'); </li></ul><ul><li>document.getElementById('recieved').innerHTML = html.join(''); </li></ul><ul><li>} </li></ul>
  29. 29. Displaying App Data
  30. 30. Resizing the Window
  31. 31. Resizing the Window
  32. 32. Creating Activity <ul><li>function createActivity(title) { </li></ul><ul><li>var opts = new Array(); </li></ul><ul><li>opts[opensocial.Activity.Field.TITLE] = title; </li></ul><ul><li>opts[opensocial.Activity.Field.STREAM_FAVICON_URL] = 'http://images.hi5.com/images/icons/_/update_widget.png'); </li></ul><ul><li>var activity = opensocial.newActivity(opts); </li></ul><ul><li>// Request the activity creation </li></ul><ul><li>opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH); </li></ul><ul><li>} </li></ul>
  33. 33. Creating Activity
  34. 34. Sending Notifications <ul><li>function sendNotifications(notification, toIds) { </li></ul><ul><li>var params = new Object(); </li></ul><ul><li>params[opensocial.Message.Field.TYPE] = opensocial.Message.Type.NOTIFICATION; </li></ul><ul><li>var message = opensocial.newMessage(notification, params); </li></ul><ul><li>opensocial.requestSendMessage(toIds, message); </li></ul><ul><li>} </li></ul>
  35. 35. Sending Notifications
  36. 36. Making Content Requests
  37. 37. Making Content Requests <ul><li>function getStatus() { </li></ul><ul><li>var authToken = this.sandbox.hi5Container.params['Hi5AuthToken']; </li></ul><ul><li>gadgets.io.makeRequest('http://api.hi5.com/rest/status/getStatus?userId='+viewer.getField(opensocial.Person.Field.ID) +'&Hi5AuthToken='+authToken, </li></ul><ul><li>function(response) { </li></ul><ul><li>var data = response.data; </li></ul><ul><li>console.debug(response.text); </li></ul><ul><li>var content = data.getElementsByTagName('content'); </li></ul><ul><li>if(content.length == 1) { </li></ul><ul><li>document.getElementById('status').innerHTML = &quot;Your status: &quot; + content.item(0).firstChild.nodeValue; </li></ul><ul><li>} </li></ul><ul><li>}, </li></ul><ul><li>{'METHOD' : 'GET', 'CONTENT_TYPE' : 'DOM'}); </li></ul><ul><li>} </li></ul>
  38. 38. Working With Views
  39. 39. Working With Views <ul><li><Content type=“html” view=“profile”> </li></ul><ul><li><![CDATA[ </li></ul><ul><li><script src=&quot;http://images.hi5.com/images/opensocial/gifts.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>gadgets.util.registerOnLoadHandler(initProfile); </li></ul><ul><li></script> </li></ul><ul><li><div id='main'> </li></ul><ul><li><div id='received’></div> </li></ul><ul><li></div> </li></ul><ul><li>]]> </li></ul><ul><li></Content> </li></ul>
  40. 40. Navigating to a View
  41. 41. Navigating to a View <ul><li>function navToCanvas() { </li></ul><ul><li>var views = gadgets.views.getSupportedViews(); </li></ul><ul><li>gadgets.views.requestNavigateTo(views['canvas']); </li></ul><ul><li>} </li></ul>
  42. 42. Applying a Skin
  43. 43. Applying a Skin
  44. 44. Other Features <ul><li>requestShareApp </li></ul><ul><li>requestSendMessage </li></ul><ul><ul><li>EMAIL, PRIVATE_MESSAGE, PUBLIC_MESSAGE </li></ul></ul><ul><li>Person Field extensions </li></ul><ul><ul><li>SMALL_IMG_URL, MEDIUM_IMG_URL, LARGE_IMG_URL </li></ul></ul><ul><li>Lifecycle Callbacks </li></ul><ul><li>Activity Templates </li></ul>
  45. 45. hi5 Roadmap <ul><li>March 15: Hackathon geared towards launch preparation. Apps will be considered for whitelisting from this date until launch. </li></ul><ul><li>March 31: Production launch </li></ul>

×