Embed Size (px)
DESCRIPTION
Citation preview
hi5 Platform
Pre-Launch Developer HackathonMarch 15, 2008
hi5 PlatformAbout hi5Developer ConsoleIntegration PointsApplication Discoveryhi5 OpenSocial ExtensionsWhy Develop for hi5?RoadmapDemo
hi5
The Truly Global Social Network
The Developer Console
Managing Your Applications
Developer ConsoleAdd and manage applications
Refresh metadata and i18n messagesManage other developersManage API KeysSubmit applications to the hi5 directoryView analytics
Simple in-line application editorMulti-language testing
hi5 Developer blog feed
Developer Console
Application Editor
Language Preview
Analytics
Anatomy of a hi5 Application
A seamless user experience within hi5
Integration PointsPreviewHomepage
My ApplicationsProfile Module
Draggable, minimizableSkins feature allows seamless UI integration
Canvas PageDedicated page for applicationsMonetization opportunity, allows embedded ad tags
Profile Module
Profile Module Action Links
Profile Navigation Tab
Canvas Page
Preview
Homepage
Application Discovery
Achieving massive distribution across the globe
Application DiscoveryApplication Directory
Categories, sorting and filteringApplication Homepage
My Friends' applicationsOther recommendationsManage your applications
Viral ChannelsFriend UpdatesNotificationsInvitesEmail (limited to 1 per user per app per day)
Application Directory
Applications Homepage
Friend UpdatesOn both homepage and profile pageCreated using the OpenSocial Activity API (requestCreateActivity)Publication not guaranteed but typically high (> 80%)
NotificationsSent using the OpenSocial request* API. (requestSendMessage, type=NOTIFICATION)Limited to 5 per user per app per day
InvitesAll apps have built-in invite flow from profile and canvas pages
Invites
Homepage Alerts
Email NotificationsLimited to 1 per user/app/day
hi5 Features
Extending OpenSocial to meet your needs
OpenSocial Feature: hi5 An optional feature that provides access to additional hi5-specific functionality.
New data requests (hi5 feature)Photos (hi5.fetchAlbumsDataRequest)Online Presence (hi5.fetchPresenceRequest)Status (hi5.fetchStatusRequest)
New fieldsLink for friend update media (hi5.ActivityMediaItemField.LINK)
Much more to come!
OpenSocial Feature: hi5-templateTemplating support, tag library, and facility for parameterizing i18n messages
<template xmlns:hi5="http://www.w3.org/1999/xhtml"></template>
<if test="expression"></if>
<else-if test="expression"></if>
<else></if>
<for-each var="variable" source="data-source"></for-each>
<apply-template name="template-name"/>
<hi5:name person="person-object"/>
<hi5:profile-pic [id="member-id" | person="person-object"] size="thumb | small"/>
<hi5:message key="property" [param="value"]*/>
OpenSocial Feature: hi5-lifecycleAllows developers to declare callback URLs for app installation and removal
Usage:
<Optional feature="hi5-lifecycle"> <Param name="installPingUrl" value="http://yourserver/handleInstall"/> <Param name="removePingUrl" value="http://yourserver/handleRemove"/></Optional>
Demo
hi5 Gifts Tutorial
Basic Gifts Tutorialhttp://lou.sandbox.hi5.com/friend/apps/entry/webvan.hi5.com/gadgets/gifts.xml
Gifts with i18nhttp://lou.sandbox.hi5.com/friend/apps/entry/www.webvan.hi5.com/friend/apps/developer/app/get/xml/5197
Template Demohttp://lou.sandbox.hi5.com/friend/apps/entry/www.sandbox.hi5.com/friend/apps/developer/app/get/xml/5206
Develop With Us
More reasons to develop for hi5
More reasons to develop for hi5...A new audience via our unique footprint in Latin America, Europe and Asia
Of the more than 80 million individuals registered with hi5, less than a third are also active on the other leading social networks, incl. FB, MySpace, Bebo, Friendster (comscore)
OpenSocial!Apps can be deeply embedded within hi5, as well as easily translated beyond hi5 to other OpenSocial-enabled websites
More reasons to develop for hi5...$$$
A dedicated canvas page that can be monetizedPromotions on the hi5 blog (one developer post/mo – rotating among our registered developers with popular apps)
Free Infrastructure from Joyenthi5 Developers could win one year of Joyent’s Free Accelerator™ scalable, on-demand infrastructure for their hi5 app! Limited number at launch, more to come
More reasons to develop for hi5...
Translation ServicesWe plan on offering translation support into Spanish to the first 100 high-quality applications approved for productionWe look forward to offering built-in translation support for all hi5 applications in multiple languages in future versions of the platform
hi5 Platform LaunchSeveral hundred apps in our sandbox that we are reviewing and working with developers to finalize. White-list style approach to ensure app quality and user-centric relevancy (guidelines to be published this week)
March 31st Public LaunchPublic rollout begins! We'll launch with as many applications that have met our guidelines and are ready to go live.
Important LinksDeveloper site
http://developer.hi5.com - All below links are accessible from here.
Developer Registration
http://sandbox.hi5.com/friend/apps/developer.do
API Documentation
http://api.hi5.com
Application Guidelines
http://www.hi5networks.com/platform/wiki/AppGuidelines
Bug Tracker
http://www.hi5networks.com/platform/report
Discussion Forumshttp://www.hi5networks.com/platform/discussion
Questions
The Gifts Tutorial
Step-by-step guide to building an OpenSocial app on hi5
Basic OpenSocial XML
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="Gifts Tutorial” author_email=”[email protected]”> <Require feature="opensocial-0.7" /> </ModulePrefs> <Content type="html"> <![CDATA[ Hello, world! ]]> </Content></Module>
Important Meta-data
<ModulePrefs title="Gifts Tutorial” author_email=”[email protected]” summary="short description for list views" description="long description for preview" thumbnail="http://yourhost/path_to_120x60_img" icon="http://yourhost/path_to_15x15_favicon" >
Initialization
gadgets.util.registerOnLoadHandler(init);
function init() { loadFriends();}
Fetching Friends
function 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 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('');}
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 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
Resizing the WindowIn Module element:<Require feature="dynamic-height"/>
After rendering content:gadgets.window.adjustHeight()
Creating Activity
function createActivity(title) {
var opts = new Array();
opts[opensocial.Activity.Field.TITLE] = title;
var mediaItems = new Array();var mediaItem = opensocial.newActivityMediaItem(opensocial.Activity.MediaItem.Type.IMAGE, viewer.
getField(opensocial.Person.Field.THUMBNAIL_URL));
// Add a media item link if supported if(gadgets.util.hasFeature('hi5') && opensocial.getEnvironment().supportsField(opensocial.Environment.
ObjectType.ACTIVITY_MEDIA_ITEM, hi5.ActivityMediaItemField.LINK)) {mediaItem.setField(hi5.ActivityMediaItemField.LINK, viewer.getField(opensocial.Person.Field.
PROFILE_URL));
}
var activity = opensocial.newActivity(opts);
// Request the activity creation
opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH);}
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 Notificationsvar viewerLink = viewer.getField(opensocial.Person.Field.PROFILE_URL);var notification = '<a href="' + viewerLink + '">' + viewer.getDisplayName() + '</a> gave you a ' + options[nut];var toIds = {};toIds.push(friend);sendNotifications(notification, toIds);
Making Content Requests
function getJournal() { gadgets.io.makeRequest('http://api.hi5.com/rest/feed/journal/userId', function(response) { var data = response.data; // do something with data }, {'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']);}
Using SkinsIn ModulePrefs:<Require feature="skins"/>
In Your Application:function setSkin() { document.write('<style type="text/css">'); document.write('.main {'); bgColor = gadgets.skins.getProperty(gadgets.skins.Property.BG_COLOR); if(bgColor) { document.write('background-color:' + bgColor + ';'); } document.write('}'); document.wrtie('</style>');}
Adding the hi5 OpenSocial API
In ModulePrefs:
<Optional feature='hi5'/>
Adding hi5 data requestsvar req = opensocial.newDataRequest();
req.add(req.newUpdatePersonAppDataRequest(opensocial.DataRequest.PersonId.VIEWER,'gifts', json));
req.add(req.newFetchPersonRequest('VIEWER'), 'viewer');
req.add(req.newFetchPersonRequest('OWNER'), 'owner');
req.add(req.newFetchPeopleRequest('VIEWER_FRIENDS'), 'viewerFriends');
req.add(req.newFetchPersonAppDataRequest('VIEWER', 'gifts'), 'data');
if(gadgets.util.hasFeature('hi5')) {
req.add(hi5.newFetchStatusRequest('OWNER'),'ownerStatus');
req.add(hi5.newFetchPresenceRequest('VIEWER_FRIENDS'),'viewerFriendsPresence');
}
req.send(onLoadFriends);
Documentation on hi5 js objects:http://www.hi5networks.com/platform/wiki/JsAPI (Work in progress)
hi5 REST API
api.hi5.com
RoadmapWe will add support to access more of our REST API via OpenSocial callsWe will move towards compliance with a standard OpenSocial REST API implementation
Sample App Code
http://webvan.hi5.com/gadgets/gifts.jshttp://webvan.hi5.com/gadgets/gifts.xml
