YAP, Open Hack Day, Bangalore 2011
-
Upload
kalsamitkumar -
Category
Technology
-
view
662 -
download
3
Transcript of 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/