Slideshare.net (beta)

Slide 1: hi5 OpenSocial Codelab

Slide 2: hi5 - Dominant Global Social We are o ne o f the Networkb site s in the w o rld large st w e (#8 o n Ale xa) and the m o 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 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

Slide 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.

Slide 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

Slide 5: Getting Started on sandbox.hi5.com

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

Slide 7: Editing Console

Slide 8: Preview Mode

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

Slide 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>

Slide 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).

Slide 12: Initialization gadgets.util.registerOnLoadHandler(init); function init() { loadFriends(); }

Slide 13: Fetching Friends function loadFriends() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest('VIEWE R'), 'viewer'); req.add(req.newFetchPeopleRequest('VIEWE R_FRIENDS'), 'viewerFriends'); req.send(onLoadFriends); }

Slide 14: Handle the Response

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

Slide 16: Adding App Data

Slide 17: Adding App Data

Slide 18: Adding App Data

Slide 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.Pe rsonId.VIEWER, 'gifts', json)); req.send(); }

Slide 20: Displaying App Data

Slide 21: Displaying App Data

Slide 22: Displaying App Data

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

Slide 24: Displaying App Data

Slide 25: Displaying App Data

Slide 26: Displaying App Data

Slide 27: Displaying App Data

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

Slide 29: Displaying App Data

Slide 30: Resizing the Window

Slide 31: Resizing the Window

Slide 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); }

Slide 33: Creating Activity

Slide 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); }

Slide 35: Sending Notifications

Slide 36: Making Content Requests

Slide 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.getFi eld(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'}); }

Slide 38: Working With Views

Slide 39: Working With Views <Content type=“html” view=“profile”> <![CDATA[ <script src="http://images.hi5.com/images/opensocial/gifts.js"></scrip t> <script> gadgets.util.registerOnLoadHandler(initProfile); </script> <div id='main'> <div id='received’></div> </div> ]]> </Content>

Slide 40: Navigating to a View

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

Slide 42: Applying a Skin

Slide 43: Applying a Skin

Slide 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

Slide 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