OpenSocial Kevin Marks Chris Chabot Agenda Introduction - What is OpenSocial Building an OpenSocial Application Best Practices Kinds of container Becoming.

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

Testing Web Applications & Services Testing Web Applications & Web Services.
OpenSocial CS : Survey of Contemporary Technologies.
Extreme User Interfaces for Alfresco Kevin Dorr Sr. Solutions Engineer Americas Channel.
Amazon CloudFront An introductory discussion. What is Amazon CloudFront? 5/31/20122© e-Zest Solutions Ltd. Amazon CloudFront is a web service for content.
W alkie Doggie is a web application that allows dog owners to help each other with their dog walks. It’s main feature is the walkies, which are the user’s.
OpenSocial Europe 2010 Welcome!. Who am I? Developer Evangelist, Apps Market, Jive Software (mark dot weitzel at jivesoftware.com) President, OpenSocial.
Project 1 Introduction to HTML.
JSP: JavaServer Pages Juan Cruz Kevin Hessels Ian Moon.
Multiple Tiers in Action
Analysis and Performance Information Systems 337 Prof. Harry Plantinga.
Open Social A Quick Introduction and Tutorial. What is Open-Social in a Nutshell? Open-Social provides a API specification for social networking sites.
2/9/2004 Web and HTTP February 9, /9/2004 Assignments Due – Reading and Warmup Work on Message of the Day.
2440: 141 Web Site Administration Web Server-Side Programming Professor: Enoch E. Damson.
Toward an OpenSocial Life Science Gateway Wenjun Wu, Michael E. Papka, Rick Stevens.
Google App Engine Google APIs OAuth Facebook Graph API
Mark Phillip markphillip.com 200s, 304s, Expires Headers, HTTP Compression, And You.
Presented by…. Group 2 1. Programming language 2Introduction.
22-Aug-15 | 1 |1 | Help! I need more servers! What do I do? Scaling a PHP application.
OpenSocial ANATOMY AND LIFE CYCLE Paul Lindner, Architect, Hi5 Networks November 27th, 2007.
Joel Bapaga on Web Design Strategies Technologies Commercial Value.
Drupal Training Syllabus Chaitanya Lakshmi
By Lavanya Lakshman Balachandar Sankar 7/24/2010 YAP – Yahoo Application Platform.
From 5250 to 2014 Moving forward quicker than you think! YKK, São Paulo 11 April 2014 By Niels Liisberg CTO System & Method A/S Copenhagen Denmark.
JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX.
First things, First Do you belong in here? – 10 – 12 – Comp. Discovery or Keyboard/Comp Apps – Do you have any experience with Web Page Design?????
Rich Internet Applications for the Enterprise Creating RIA from your Oracle database using TURBO Enterprise Web 2.0 Presented By: John Krahulec Bizwhazee.
HTML, XHTML, and CSS Sixth Edition Chapter 1 Introduction to HTML, XHTML, and CSS.
1 Apache. 2 Module - Apache ♦ Overview This module focuses on configuring and customizing Apache web server. Apache is a commonly used Hypertext Transfer.
1 Accelerated Web Development Course JavaScript and Client side programming Day 2 Rich Roth On The Net
Creating Dynamic Web Pages Using PHP and MySQL CS 320.
Peter Laird. | 1 Building Dynamic Google Gadgets in Java Peter Laird Managing Architect WebLogic Portal BEA Systems.
Asynchronous Javascript And XML AJAX : an introduction UFCEUS-20-2 : Web Programming.
Putting Performance Best Practices Together to Create the Perfect SPA Chris Love2Dev.com.
JS (Java Servlets). Internet evolution [1] The internet Internet started of as a static content dispersal and delivery mechanism, where files residing.
Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 
ICM – API Server & Forms Gary Ratcliffe.
ICM – API Server Gary Ratcliffe. 2 Agenda Webinar Programme API Server Overview JSON-RPC iCM API Service API Server and Forms New services under.
WEB SERVER SOFTWARE FEATURE SETS
Fundamentals of Web DevelopmentRandy Connolly and Ricardo HoarFundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy.
HTML Concepts and Techniques Fifth Edition Chapter 1 Introduction to HTML.
Configuring and Deploying Web Applications Lesson 7.
Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.
UNDERSTANDING YOUR OPTIONS FOR CLIENT-SIDE DEVELOPMENT IN OFFICE 365 Mark Rackley
8 th Semester, Batch 2009 Department Of Computer Science SSUET.
Apache Solr Dima Ionut Daniel. Contents What is Apache Solr? Architecture Features Core Solr Concepts Configuration Conclusions Bibliography.
Wes Preston DEV 202. Audience: Info Workers, Dev A deeper dive into use-cases where client-side rendering (CSR) and SharePoint’s JS Link property can.
Customizing Share Document Previews Will Abson Senior Integrations Engineer and Share Extras Project Lead
Google Analytics Graham Triggs Head of Repository Systems, Symplectic.
© 2014 IBM Corporation Activity Streams Integration IBM Connections 5.0 Workshop Author: Paul Godby IBM Ecosystem Development Duration: 45 minutes.
Basics Components of Web Design & Development Basics, Components, Design and Development.
Enhance Your Page Load Speed And Improve Traffic.
Portlet Development Konrad Rokicki (SAIC) Manav Kher (SemanticBits) Joshua Phillips (SemanticBits) Arch/VCDE F2F November 28, 2008.
Web Development. Agenda Web History Network Architecture Types of Server The languages of the web Protocols API 2.
Office 365 Development July 2014.
Amazon Web Services (aws)
Project 1 Introduction to HTML.
Overview Blogs and wikis are two Web 2.0 tools that allow users to publish content online Blogs function as online journals Wikis are collections of searchable,
Scalable Web Apps Target this solution to brand leaders responsible for customer engagement and roll-out of global marketing campaigns. Implement scenarios.
Chapter 1 Introduction to HTML.
Data Virtualization Tutorial… CORS and CIS
Time is the enemy: Ten Core Lessons for Achieving Peak
Project 1 Introduction to HTML.
Platform as a Service.
PHP Training at GoLogica in Bangalore
Scalable Web Apps Target this solution to brand leaders responsible for customer engagement and roll-out of global marketing campaigns. Implement scenarios.
RESTful Web Services.
TN19-TCI: Integration and API management using TIBCO Cloud™ Integration
Mark Quirk Head of Technology Developer & Platform Group
Yale Digital Conference 2019
Presentation transcript:

OpenSocial Kevin Marks Chris Chabot

Agenda Introduction - What is OpenSocial Building an OpenSocial Application Best Practices Kinds of container Becoming an OpenSocial container Netlog Presentation

Why do we have so many users in Beverly Hills and Schenectady ?

Why do we have so many users in and ?

The problem

The solution

Portable Contacts REST API for Person and Contacts Compatible with OpenSocial

How to build an OpenSocial application The Basics Chris Chabot

An OpenSocial Application HTML Javascript CSS Gadget XML

Understanding the Gadget XML <![CDATA[ function init(){ alert("hello world"); } gadgets.util.registerOnLoadHandler(init); ]]>

Retrieve Friend Information function getFriendData() { var req = opensocial.newDataRequest(); req.add(req.newFetchPersonRequest(VIEWER), 'viewer'); req.add(req.newFetchPeopleRequest(VIEWER_FRIENDS), 'viewerFriends'); req.send(onLoadFriends); } function onLoadFriends(response) { var viewer = response.get('viewer').getData(); var viewerFriends = response.get('viewerFriends').getData(); ///More code }

Persisting Data function populateMyAppData() { var req = opensocial.newDataRequest(); var data1 = Math.random() * 5; var data2 = Math.random() * 100; req.add(req.newUpdatePersonAppDataRequest( "VIEWER","AppField1", data1)); req.add(req.newUpdatePersonAppDataRequest( "VIEWER","AppField2", data2)); req.send(requestMyData); }

Fetching persisted data function requestMyData() { var req = opensocial.newDataRequest(); var fields = ["AppField1", "AppField2"]; req.add(req.newFetchPersonRequest( opensocial.DataRequest.PersonId.VIEWER),"viewer"); req.add(req.newFetchPersonAppDataRequest("VIEWER", fields), "viewer_data"); req.send(handleReturnedData); } function handleReturnedData(data) { var mydata = data.get("viewer_data"); var viewer = data.get("viewer"); me = viewer.getData(); var appField1 = mydata[me.getId()]["AppField1"]; ///More code }

Posting an Activity function postActivity(text) { var params = {}; params[opensocial.Activity.Field.TITLE] = text; var activity = opensocial.newActivity(params); opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, callback); } postActivity("This is a sample activity, created at " + new Date().toString())

How to build an OpenSocial application Best Practices Chris Chabot

function response(data) { if (!data.hadError()) {... } else { if (data.get("req").hadError()) { alert(data.get("req").getErrorMessage()); } } else { alert('Unknown error occurred'); }; Best practices : Check for errors Both the request and sub-requests can have errors, use hadError() to check.

function request() { var req = opensocial.newDataRequest(); var params = {}; params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [ opensocial.Person.Field.PROFILE_URL ]; req.add(req.newFetchPersonRequest( opensocial.DataRequest.PersonId.VIEWER, params), "req"); req.send(response); }; Best practices : Be specific Specify which fields you want to use: only ID, NAME and THUMBNAIL_URL are returned by default

var supportsAboutMe = opensocial.getEnvironment().supportsField( opensocial.Environment.ObjectType.PERSON, opensocial.Person.Field.ABOUT_ME ); if (gadgets.util.hasFeature('hi5')) { mediaItem.setField( hi5.ActivityMediaItemField.LINK, " } Best practices : Capability Discovery Check for supported features and fields

Best Practises : Use the container's cache function showImage() { imgUrl = ' cachedUrl = gadgets.io.getProxyUrl(imgUrl); html = [' ']; document.getElementById('dom_handle').innerHTML = html.join(''); }; showImage(); Use the container's content cache Also check out o Content-Rewriter feature o Preloading o Using App Data as content cache

Best practises : Web development 101 Control the caching of your content, http headers: o Cache-Control o Last-Modified o Expires o E-Tag Reduce number of http requests o Combine JS and CSS files into one file o Combine images into single sprite + CSS positioning Use Google's AJAX libraries API o <script src=" Other techniques: o GZip content o Minify JS and CSS o See YSlow!

Hosting your application Host it anywhere you want to, with any back-end Keep in mind: o Popular apps like iLike get > 200k req / minute peak o Means dealing with lots of scalability issues! o DB Sharding, memcache pools, server farms.. Why not use a cloud service like: o Google App Engine o Joyent.com o Amazon EC2

Specification Code Samples and Tools Getting started guide html Application Development Resources

Kinds of Containers Kevin Marks

Containers provide a social context OpenSocial separates application logic from social context an app sees user ids - the container makes them people Users understand the social contract of the containers Save apps and users from re-registration hell

Containers don’t choose users Containers set up the social model, users choose to join they grow through homophily and affinity Network effect can bring unexpected userbasesuserbases

OpenSocial gets you to all their users You don't have to pick a site to specialise for You get to spread through multiple friend groups You'll be surprised by where your users are so make sure you plan to localizelocalize

Not just Social Network Sites Social network sites - Profiles and home pages Personal dashboards Sites based around a Social Object Corporate CRM systems Any web site How do we abstract these out? Viewer + friends Owner + friends

Owner and Viewer are defined by Container The Application gets IDs and connections to other IDs

the Owner need not be a Person It could be an organisation or a social object

Kinds of container - Social network sites Profile pages o Owner is profile page owner o Viewer may not be known, may be owner or other member Home pages o Owner is Viewer (must be logged in to see) Examples MySpace Hi5 Orkut

Kinds of container - Personal dashboard like Home pages o Owner is Viewer (must be logged in to see) Friends may not be defined Example: iGoogle, My Yahoo

Kinds of container - Social Object site Pages reflect the object - movie, picture, product o Owner is the object o Owner friends are people connected to the object  may be authors or fans o Viewer is looking at it, Viewer friends are people you may want to share with Example: Imeem is a bit like this - opportunity for sites like Flickr, YouTube

Kinds of container - CRM systems Pages reflect the customer o Owner is the customer o Owner friends are people connected to the customer  may be your colleagues, or other customers o Viewer is you, Viewer friends are your colleagues or customers Example: Oracle CRM, Salesforce

Kinds of container - Any web site Owner is the site o Owner friends are site users Viewer is you, o Viewer friends are your friends who have visited this site Example: Google Friend Connect will enable this for any site

Social Custodians

Becoming an OpenSocial Container Chris Chabot

Becoming an OpenSocial Container Question: o How do you become an OpenSocial container? Answer: o The Apache incubator project “Shindig” serves this purpose!

What is Shindig ? Open source reference implementation of OpenSocial & Gadgets specification An Apache Software Incubator project Available in Java & PHP It’s Goal: “Shindig's goal is to allow new sites to start hosting social apps in under an hour's worth of work"

Introduction to Shindig Architecture Gadget Server Social Data Server Gadget JavaScript

Gadget Server

Social Server

Implementing Shindig - PHP Integrate with your own data sources o People Service o Activities Service o App Data Service class MyPeopleService implements PeopleService {... } class MyAppDataService implements AppDataService {... } class MyActivitiesService implements ActivitiesService {... }

Implementing Shindig - PHP Implement functions function getActivities($ids) { $activities = array(); $res = mysqli_query($this->db, ”SELECT…"); while ($row $activity = new Activity($row['activityId'], $row['personId']); $activity->setStreamTitle($row['activityStream']); $activity->setTitle($row['activityTitle']); $activity->setBody($row['activityBody']); $activity->setPostedTime($row['created']); $activities[] = $activity; } return $activities; }

Implementing Shindig - Java import org.apache.shindig.social.opensocial.ActivitiesService; public class SQLActivitiesService implements ActivitiesService { private SQLDataLayer public SQLActivitiesService(SQLDataLayer sqlLayer) { this.sqlLayer = sqlLayer;....

public ResponseItem > getActivities(List ids, SecurityToken token) { Map > allActivities = sqlLayer.getActivities(); List activities = new ArrayList (); for (String id : ids) { List personActivities = allActivities.get(id); if (personActivities != null) { activities.addAll(personActivities); } } return new ResponseItem >(activities); } Implementing Shindig - Java

Implementing - Make it a platform Add UI Elements o App Gallery o App Canvas o App Invites o Notification Browser Developer Resources o Developer Console o Application Statistics

Implementing - Scale it Out Prevent Concurrency issues Reduce Latency Add lots of Caching

Usage Example: Sample Container Static html sample container No effort to get up and running No database or features

Usage Example: Partuza Partuza is a Example social network site, written in PHP Allows for local gadget development & testing too Use as inspiration (or copy) for creating your own social site

OpenSocial for intranet, portals Sun Microsystems Socialsite: Shindig + gadget based UI written in Java Open Source Upcoming from Impetus Zest: Shindig + Drupal (PHP) Zeal: Shindig + Liferay (Java)

Becoming a Container - Summary Become an OpenSocial Container o Get Shindig (PHP or Java)  o Look at examples & documentation  o Implement Services o Add UI o Scale it out Get involved, join the mailing list!

® friendster Who's part of OpenSocial? > 390 Million reached!

Learn more at code.google.com