Hi5 Opensocial Code Lab Presentation

  • 9,032 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • please can you help me??
    can you sent me the code for views!!the html code for the views..please and show me where i put the number..!!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,032
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
71
Comments
1
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?>
    • <Module>
    • <ModulePrefs title=&quot;Hello World!” author_email=”lou@hi5.com”>
    • <Require feature=&quot;opensocial-0.7&quot; />
    • </ModulePrefs>
    • <Content type=&quot;html&quot;>
    • <![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=&quot;opensocial-0.7&quot; /> denotes a required feature of the gadget — in this case, the OpenSocial API (v0.7).
    • <Content type=&quot;html&quot;> 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_FRIENDS'), '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() + &quot;</li>&quot;);
    • });
    • 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 = &quot;Your status: &quot; + 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=&quot;http://images.hi5.com/images/opensocial/gifts.js&quot;></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