SEA Open Hack - YAP

50
Y!OS and the Yahoo! Application Platform Jonathan LeBlanc - Technology Evangelist Yahoo! Developer Network Twitter: @jcleblanc

description

Yahoo! Application Platform (YAP) presentation for the South East Asia (SEA) Open Hack Day in Jakarta, Indonesia (November 2009)

Transcript of SEA Open Hack - YAP

Page 1: SEA Open Hack - YAP

Y!OS and the Yahoo! Application Platform

Jonathan LeBlanc - Technology EvangelistYahoo! Developer Network

Twitter: @jcleblanc

Page 2: SEA Open Hack - YAP

Presentation Topics – What We’ll Cover (Part 1)

• The Yahoo! Open Strategy (Y!OS)

• The Yahoo! Application Platform (YAP)

• What are Applications on YAP?

• Creating YAP Applications

• OAuth

• OpenID

• The Yahoo! Markup Language

Page 3: SEA Open Hack - YAP

Presentation Topics – What We’ll Cover (Part 2)

• OpenSocial Support-Code Samples for using the SDK and OpenSocial

• The YAP Social APIs

• Frontend Security using Caja

• Beta Support for the Yahoo! User Interface Library (YUI)

Page 4: SEA Open Hack - YAP

DEVELOPER.YAHOO.COMEXAMPLES | TUTORIALS | CODE SAMPLES

Page 5: SEA Open Hack - YAP

The Yahoo! Open Strategy (Y!OS)

Page 6: SEA Open Hack - YAP

The Yahoo! Application Platform (YAP)

Page 7: SEA Open Hack - YAP
Page 8: SEA Open Hack - YAP
Page 9: SEA Open Hack - YAP
Page 10: SEA Open Hack - YAP

Creating Applications

Create a Profile for Your Account

http://profiles.yahoo.com

Create an Application Using the Dashboard System

http://developer.yahoo.com/dashboard

Get Documentation and Resources

http://developer.yahoo.com/yos

Page 11: SEA Open Hack - YAP

Open ID – Single Account Sign-in

Page 12: SEA Open Hack - YAP

OAuth - Open Authentication

Page 13: SEA Open Hack - YAP
Page 14: SEA Open Hack - YAP

SDKs (Software Development Kits)

PHP, Python, Java, ActionScript 3,

Objective-C, and OpenSocial REST APIs

http://www.github.com/yahoo

Page 15: SEA Open Hack - YAP

OAuth – What Does the End-User See?

Page 16: SEA Open Hack - YAP

OAuth – What Does the End-User See?

Page 17: SEA Open Hack - YAP

Yahoo! Markup Language (YML)

Page 18: SEA Open Hack - YAP

Using the Yahoo! Markup language (YML)

YML Documentation

http://developer.yahoo.com/yap/guide/yapdev-yml.html

YML Samples

http://developer.yahoo.com/yap/guide/yml-code-exs.html

Page 19: SEA Open Hack - YAP

Questions?

Page 20: SEA Open Hack - YAP

Y!OS and the Yahoo! Application Platform

Jonathan LeBlanc - Technology EvangelistYahoo! Developer Network

Twitter: @jcleblanc

Page 21: SEA Open Hack - YAP

Presentation Topics – What We’ll Cover (Part 2)

• OpenSocial Support-Code Samples for using the SDK and OpenSocial

• The YAP Social APIs

• Frontend Security using Caja

• Beta Support for the Yahoo! User Interface Library (YUI)

Page 22: SEA Open Hack - YAP

OpenSocial 0.8 Support

Page 23: SEA Open Hack - YAP

What is OpenSocial?

• For developing applications on social networks• Accessing social data (profiles, connections)• Fetching and inserting activities

• Implemented by many containers• Develop once, distribute broadly

Page 24: SEA Open Hack - YAP

Fetching User Data & Making Requests

• Examples for OpenSocial & PHP• Fetching Profiles• Fetching and Inserting Updates• Fetching Connections• Making YQL Requests

Page 25: SEA Open Hack - YAP
Page 26: SEA Open Hack - YAP

Collecting User Data With PHP & OpenSocial 0.8

$session = YahooSession::requireSession($key, $secret, $app_id)$user = $session->getSessionedUser();$profile = $user->getProfile();

---------------------------------------------------------------------------------------------------------------

var req = opensocial.newDataRequest(); var params = {};params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [ opensocial.Person.Field.NAME, opensocial.Person.Field.THUMBNAIL_URL];

req.add(req.newFetchPersonRequest('VIEWER', params), 'viewer_profile');req.send(response);

Page 27: SEA Open Hack - YAP

Fetching Updates With PHP & OpenSocial 0.8

Page 28: SEA Open Hack - YAP

Getting Updates With PHP & OpenSocial 0.8

$session = YahooSession::requireSession($key, $secret, $app_id)

$user = $session->getSessionedUser();

$updates = $user->getUpdates();

-------------------------------------------------------------------------------var req = opensocial.newDataRequest();

var spec = new opensocial.IdSpec();

spec.setField(opensocial.IdSpec.Field.USER_ID, opensocial.IdSpec.PersonId.OWNER);

req.add(req.newFetchActivitiesRequest(spec), 'ownerActivities');

req.send(handleActivities);

Page 29: SEA Open Hack - YAP

Inserting Updates With PHP & OpenSocial 0.8

$session = YahooSession::requireSession($key, $secret, $app_id)

$user = $session->getSessionedUser();

$update = $user->insertUpdate($suid, $title, $link, $description);

--------------------------------------------------------------------------var params = {}, activity;

params[opensocial.Activity.Field.TITLE] = title;

params[opensocial.Activity.Field.BODY] = body;

activity = opensocial.newActivity(params);

opensocial.requestCreateActivity(

activity, opensocial.CreateActivityPriority.LOW, callback);

Page 30: SEA Open Hack - YAP

Fetching Connections With PHP & OpenSocial 0.8

Page 31: SEA Open Hack - YAP

Fetching Connections With PHP & OpenSocial 0.8

$session = YahooSession::requireSession($key, $secret, $app_id)

$user = $session->getSessionedUser();

$connections = $user->getConnections();

-------------------------------------------------------------------------var req = opensocial.newDataRequest();

var idspec = opensocial.newIdSpec({ 'userId' : 'OWNER', 'groupId' : 'FRIENDS' });

req.add(req.newFetchPersonRequest('OWNER'), 'get_owner');

req.add(req.newFetchPeopleRequest(idspec), 'get_friends');

req.send(responseFriends);

Page 32: SEA Open Hack - YAP

Making YQL Requests With PHP & OpenSocial 0.8

$session = YahooSession::requireSession($key, $secret, $app_id)

$query = $session->query(‘select * from maps.map where zip="94085" ’);

-------------------------------------------------------------------------var params = {};

var url = 'http://developer.yahoo.com/yql/console/?q=select%20*%20from%20flickr.photos.search%20where%20text%3D%22Times%20Square%22'

var callback = callbackFunc;

params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;

params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;

gadgets.io.makeRequest(url, callback, params);

Page 33: SEA Open Hack - YAP

Important URLs

OpenSocial Site Links

http://wiki.opensocial.org/index.php?title=Opensocial_(v0.8)

http://wiki.opensocial.org/index.php?title=Opensocial.Person_%28v0.8%29

Developer Network Links

http://developer.yahoo.com/yap/guide/os-supp-features.html

http://developer.yahoo.com/yap/guide/opensocial-examples.html

Page 34: SEA Open Hack - YAP

The Yahoo! Social APIs

Page 35: SEA Open Hack - YAP

What are the Social APIs?

Social Directory API Reference

http://developer.yahoo.com/social/rest_api_guide/social_dir_api.html

Status API Reference

http://developer.yahoo.com/social/rest_api_guide/status_api.html

Contacts API Reference

http://developer.yahoo.com/social/rest_api_guide/contact_api.html

Updates API Reference

http://developer.yahoo.com/social/rest_api_guide/updates_api.html

Page 36: SEA Open Hack - YAP

Calling the Social APIs with the SDK Functions

Given:$ysession = YahooSession::requireSession(API_KEY, API_SECRET, APP_ID);$yuser = $ysession->getSessionedUser();

Social Directory API (Profile & Connections)$yuser->loadProfile();$yuser->getConnections($start, $count, $total);

Status API$yuser->getStatus();

Page 37: SEA Open Hack - YAP

Calling the Social APIs with the SDK Functions

Given:$ysession = YahooSession::requireSession(API_KEY, API_SECRET, APP_ID);$yuser = $ysession->getSessionedUser();

Contacts API$yuser->getContacts($start, $count);

Updates API$yuser->getUpdates($start, $count);

Page 38: SEA Open Hack - YAP

Front-End SecurityJavaScript / HTML / CSS

Page 39: SEA Open Hack - YAP

Front-end Security

Page 40: SEA Open Hack - YAP

Front-end Security: Caja

Caja Security

• Very secure model (whitelist methodology)

• Aims to protect end-users

• Full content control

IFrame Concerns

• Drive-by downloads

• No content restrictions

• Other known exploits

Page 41: SEA Open Hack - YAP

Front-end Security: Caja Cajoling Process

<script type="text/javascript">

function response(obj) {

if (obj.text){

document.getElementById('interact').setInnerHTML('Populated!');

document.getElementById('population').setInnerHTML(obj.errors);

}

}

</script>

Page 42: SEA Open Hack - YAP

Front-end Security: Caja Cajoling Process

var $dis = $v.getOuters(); $v.initOuter('onerror'); $v.so('response', ___.markFuncFreeze(function () { function response$_caller($dis, obj) { if ($v.r(obj, 'text')) { $v.cm($v.cm($v.ro('document'), 'getElementById', [ 'interact' ]), 'setInnerHTML', [ 'Populated!' ]); $v.cm($v.cm($v.ro('document'), 'getElementById', [ 'population' ]), 'setInnerHTML', [ $v.r(obj, 'errors') ]); } } response$_caller.FUNC___ = 'response$_caller'; var response;; response = $v.dis(___.primFreeze(response$_caller), 'response'); return response;

Page 43: SEA Open Hack - YAP

What isn’t supported in YAP?

Blacklisted HTML tags

http://developer.yahoo.com/yap/guide/caja-blacklist.html

Caja Limitations

http://developer.yahoo.com/yap/guide/what-are-cajas-limitations.html

Page 44: SEA Open Hack - YAP

What isn’t supported in YAP?

• AJAX functionality (use YML / OpenSocial)

• Most JavaScript libraries

• Script Source Includes (except YUI)

Page 45: SEA Open Hack - YAP

BETA YUI Support

Page 46: SEA Open Hack - YAP

How to Implement YUI

Implementing as includes

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

Insert content into a script block

Page 47: SEA Open Hack - YAP

Available Libraries

http://developer.yahoo.com/yap/guide/yui-support.html#libs-available

Page 48: SEA Open Hack - YAP

Important URLs

YUI Support in YAP

http://developer.yahoo.com/yap/guide/yui-support.html

Dependancy Configurator

http://developer.yahoo.com/yui/articles/hosting/

Page 49: SEA Open Hack - YAP

Questions?

Page 50: SEA Open Hack - YAP

Resources

Slides Available At:

http://www.slideshare.net/jcleblanc/yap-open-mail-overview

YAP Documentation and Tutorials:

http://developer.yahoo.com/yos

OpenSocial Documentation:

http://wiki.opensocial.org/index.php?title=JavaScript_API_Reference