Hi5 opensocial-code-lab-presentation-1203814696810018-3

500 views

Published on

i just added dsc and edited itt

Published in: Real Estate, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
500
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hi5 opensocial-code-lab-presentation-1203814696810018-3

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

×