Hi5 opensocial-code-lab-presentation-1203814696810018-3
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 447 views

i just added dsc and edited itt

i just added dsc and edited itt

Statistics

Views

Total Views
447
Views on SlideShare
445
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • hi5 OpenSocial Codelab
  • 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
  • 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.
  • 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
  • Getting Started on sandbox.hi5.com
  • Two ways to getyour App going Sample App lets you Edit
  • Editing Console
  • Preview Mode
  • Integration Points• Preview Page• Profile Module• Canvas Page• Friend Updates• Notifications• App Invites• Emails
  • 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>
  • 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).
  • Initializationgadgets.util.registerOnLoadHandler(init);function init() { loadFriends();}
  • Fetching Friendsfunction loadFriends() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER), viewer); req.add(req.newFetchPeopleRequest(VIEWER_F RIENDS), viewerFriends);req.send(onLoadFriends);}
  • Handle the Response
  • 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();}
  • Adding App Data
  • Adding App Data
  • Adding App Data
  • 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();}
  • Displaying App Data
  • Displaying App Data
  • Displaying App Data
  • 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();}
  • Displaying App Data
  • Displaying App Data
  • Displaying App Data
  • Displaying App Data
  • 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();}
  • Displaying App Data
  • Resizing the Window
  • Resizing the Window
  • 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);}
  • Creating Activity
  • 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);}
  • Sending Notifications
  • Making Content Requests
  • 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});}
  • Working With Views
  • 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>
  • Navigating to a View
  • Navigating to a Viewfunction navToCanvas() { var views = gadgets.views.getSupportedViews(); gadgets.views.requestNavigateTo(views[canvas]);}
  • Applying a Skin
  • Applying a Skin
  • 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
  • hi5 RoadmapMarch 15: Hackathon geared towards launch preparation. Apps will be considered for whitelisting from this date until launch.March 31: Production launch