i just added dsc and edited itt

1. hi5 OpenSocial Codelab

2. hi5 - Dominant Global Social Network
We 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
world
Top 10 in Latin America
Mexico, Colombia, Bolivia, Guatemala, Peru, Costa Rica,
Nicaragua, Honduras, Ecuador, El Salvador
Top 10 in Rest of the World
Portugal, Greece, Romania, Cyprus, Thailand, Jamaica, Sri
Lanka, Kuwait, Jordan, Oman

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 & South
America (31%), Asia (21%)
 Offered in 14 languages
 Grew big in most international countries with English first and then
translated
 Members use the site primarily to keep in touch with their friends. Users
have limited self-expression tools - skins, widgets, etc.

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. Getting Started on sandbox.hi5.com

6. Two ways to get
your App going
Sample App lets
you Edit

7. Editing Console

8. Preview Mode

9. Integration Points
• Preview Page
• Profile Module
• Canvas Page
• Friend Updates
• Notifications
• App Invites
• Emails

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. 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 gadget's 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. Initialization
gadgets.util.registerOnLoadHandler(init);
function init() {
loadFriends();
}

13. Fetching Friends
function loadFriends() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest('VIEWER'),
'viewer');
req.add(req.newFetchPeopleRequest('VIEWER_F
RIENDS'), 'viewerFriends');
req.send(onLoadFriends);
}

14. Handle the Response

15. 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() + "</li>");
});
html.push('</ul>');
document.getElementById('friends').innerHTML = html.join('');
}

16. Adding App Data

17. Adding App Data

18. Adding App Data

19. 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();
}

20. Displaying App Data

21. Displaying App Data

22. Displaying App Data

23. 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('');
}

24. Displaying App Data

25. Displaying App Data

26. Displaying App Data

27. Displaying App Data

28. Displaying App Data
function 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. Displaying App Data

30. Resizing the Window

31. Resizing the Window

32. Creating Activity
function 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. Creating Activity

34. 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);
}

35. Sending Notifications

36. Making Content Requests

37. Making Content Requests
function 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. Working With Views

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. Navigating to a View

41. Navigating to a View
function navToCanvas() {
var views = gadgets.views.getSupportedViews();
gadgets.views.requestNavigateTo(views['canvas']);
}

42. Applying a Skin

43. Applying a Skin

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. hi5 Roadmap
March 15: Hackathon geared towards launch
preparation. Apps will be considered for
whitelisting from this date until launch.
March 31: Production launch