yap, open hack day, bangalore 2011

YAP: YAHOO! APPLICATION PLATFORMBy

Amit Kumar

Supriyo Bose

WHAT IS YAP ?

“YAP is a platform that allows developers to build web applications that would be accessible across different Yahoo! properties.”

PROGRAMMING MODELS

Yahoo! API/ Any Open API Developer Server

YAP Engine

Browser

“Cajoled” JS/HTMLRequest

Request + Add-On info

HTMLJS, CSS, YML

SERVER-SIDE

PROGRAMMING MODELS

Developer Server

YAP Engine

Browser

“Cajoled” JS/HTML

io.makerequest

Signing + OAuth

CLIENT-SIDEio.datarequest

Yahoo! API/ Any Open API

PROGRAMMING MODELS

Developer Server

YAP Engine

FLASHOAuth support

FLASH OBJECT

BROWSER

To 3rd PARTY SITE

Yahoo! API/ Any Open API

Why build for YAP ?

• Yahoo!’s huge footprint• 600+ million users• 330+ million unique visitors per month• Multiple destinations:

• My Yahoo!• Toolbar• Games• Messenger• Pulse

• OpenSocial: Build for the web

• Discovery

MY YAHOO!

TOOLBAR

GAMES

YAHOO! MESSENGER

PULSE

Creating your first App

GADGET XML

App is defined by the Gadget XML. Conforms to OpenSocial gadgets API specification

http://developer.yahoo.com/yap/guide/gadgets-xml-config.html

YahooSmallView

• No Javascript

• HTML,CSS and YML Lite (subset of YML)

• Faster

• Two states (default or personalized)

YahooFullView

• Supports HTML, CSS, YML and JS

• Richer Interface

YahooFullView

CREATING YOUR FIRST APP

Go to http://developer.yahoo.com and click on My Projects

CREATING YOUR FIRST APP

CREATING YOUR FIRST APP

CREATING YOUR FIRST APP

PREVIEW YOUR APP

PREVIEW VIEW

CREATING YOUR FIRST APP

LAUNCH YOUR APP !

YOUR APP IS READY !

http://apps.yahoo.com/-3XNdoV62

CODE SNIPPET: USING PHP SDK

Download the PHP SDK from:http://developer.yahoo.com/social/sdk/php/

https://github.com/kkunal/yap-hacks/tree/master/social

YAP FEATURES

OpenSocial: Common APIs, multiple destinations.

OpenSocial is a collection of common APIs for web-based social network applications.

We are 0.8/0.9 compliant.

URL

OpenSocial Home http://code.google.com/apis/opensocial/

Foundation http://www.opensocial.org/opensocial-foundation/

OpenSocial and YAP http://developer.yahoo.com/blogs/ydn/posts/2010/07/opensocial_and_yap/

OPENSOCIAL EXAMPLE

http://apps.yahoo.com/-EKalHy4k

OPENSOCIAL EXAMPLE

https://github.com/kkunal/yap-hacks/tree/master/opensocial/api_examples

OPENSOCIAL EXAMPLE

http://apps.yahoo.com/-hi0q6k74

OPENSOCIAL EXAMPLE

https://github.com/kkunal/yap-hacks/tree/master/opensocial/api_examples

OpenSocial APIs can also be invoked on the server side.

Yahoo! Open Social REST End Point: http://appstore.apps.yahooapis.com/social/rest

Examples of this are at:

https://github.com/yahoo/yos-social-php5/tree/master/examples

YML, a simple way to get more out of your App !

+

YML – YAHOO! MARKUP LANGUAGE

• XML-syntax

• Yahoo! Markup Language (YML) provides functionality to Open Applications in a safe and standardized fashion.

• Adds functionality to Open Application.

yml:ayml:adyml:audioyml:customizeyml:formyml:friend-selectoryml:if-env yml:include

yml:messageyml:nameyml:profile-picyml:pronounyml:shareyml:swfyml:user-badge

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

yml:swf

http://apps.yahoo.com/-JfamS46m

https://github.com/kkunal/yap-hacks/tree/master/yml/swf

yml:a

http://apps.yahoo.com/-Mg5VBt6o

https://github.com/kkunal/yap-hacks/tree/master/yml/tab

yml:profile-pic, yml:name etc

http://apps.yahoo.com/-MOtB6q4s

https://github.com/kkunal/yap-hacks/tree/master/yml/profile

Looks too simple, there must be a catch ?!

Caja

• Caja is a system that transforms ordinary HTML and JavaScript into a secured form by removing unsafe HTML/CSS/Javascript

• Enables Yahoo! to embed third party applications safely.

• Caja is an open source project sponsored by Google.

• Validating your Javascript using:

• http://www.jslint.com• http://cajadores.com/demos/testbed

• Caja works well with YUI 2.8 ! Prefer YUI over external libraries.

Refer :

• Cheatsheet

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

YUI EXAMPLE

http://apps.yahoo.com/-EDNQYz4e

https://github.com/kkunal/yap-hacks/tree/master/yui

YAP PARAMETERS

Parameters YAP passes:

• User Agent

• Parameters for OAuth calls

• User guid

For complete list of parameters, seehttp://developer.yahoo.com/yap/guide/yap-params.html

Developer Server

YAP Engine

Request with parameters

Browser

“Cajoled” JS/HTMLRequest

YAP BEST PRACTICES

• Build for YAP. Don’t build elsewhere and test on YAP.

• Prefer YUI over other JS libraries.

• Adhere to W3C standards.

• Avoid Caja problems by:

• Pushing more logic to server-side.• Referring to our Cheatsheet !

IMPORTANT LINKS

Get started ! URL

YAP Developer Guide http://developer.yahoo.com/yap/guide/index.html

Yahoo! Social SDKs http://developer.yahoo.com/social/sdk/

github samples https://github.com/kkunal/yap-hacks

Cheatsheet

Other References URL

Yahoo! Developer Network http://developer.yahoo.com

OpenSocial Home http://code.google.com/apis/opensocial/

Google Caja Project http://code.google.com/p/google-caja

All Developer Guides http://developer.yahoo.com/documentation

QUESTIONS?

http://xkcd.com/246/