Embed Size (px)
Citation preview
hi5 OpenSocial Codelab
hi5 - Dominant Global Social NetworkWe are o ne o f the large st w e b site s in the w o rld
(#8 o n Ale xa) and the mo st glo bal o f all the so cial ne tw o rking site s.
Over 70+ million registered members and ~40 million WW unique users
Most popular Spanish-speaking social network in the world
Top 10 in Latin AmericaMexico, Colombia, Bolivia, Guatemala, Peru, Costa
Rica, Nicaragua, Honduras, Ecuador, El Salvador
Top 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 & 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.
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 get your 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=”[email protected]”> <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 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).
Initialization
gadgets.util.registerOnLoadHandler(init);
function init() { loadFriends();}
Fetching Friendsfunction loadFriends() { var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), '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 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();}
Displaying App Data
Displaying App Data
Displaying App Data
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('');}
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 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);}
Sending Notifications
Making Content Requests
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'});}
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 View
function 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 Roadmap
March 15: Hackathon geared towards launch preparation. Apps will be considered for whitelisting from this date until launch.
March 31: Production launch
