yap, open hack day, bangalore 2011
TRANSCRIPT
![Page 1: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/1.jpg)
![Page 2: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/2.jpg)
YAP: YAHOO! APPLICATION PLATFORMBy
Amit Kumar
Supriyo Bose
![Page 3: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/3.jpg)
WHAT IS YAP ?
“YAP is a platform that allows developers to build web applications that would be accessible across different Yahoo! properties.”
![Page 4: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/4.jpg)
PROGRAMMING MODELS
Yahoo! API/ Any Open API Developer Server
YAP Engine
Browser
“Cajoled” JS/HTMLRequest
Request + Add-On info
HTMLJS, CSS, YML
SERVER-SIDE
![Page 5: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/5.jpg)
PROGRAMMING MODELS
Developer Server
YAP Engine
Browser
“Cajoled” JS/HTML
io.makerequest
Signing + OAuth
CLIENT-SIDEio.datarequest
Yahoo! API/ Any Open API
![Page 6: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/6.jpg)
PROGRAMMING MODELS
Developer Server
YAP Engine
FLASHOAuth support
FLASH OBJECT
BROWSER
To 3rd PARTY SITE
Yahoo! API/ Any Open API
![Page 7: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/7.jpg)
Why build for YAP ?
![Page 8: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/8.jpg)
• 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
![Page 9: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/9.jpg)
• Discovery
![Page 10: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/10.jpg)
MY YAHOO!
![Page 11: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/11.jpg)
TOOLBAR
![Page 12: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/12.jpg)
GAMES
![Page 13: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/13.jpg)
YAHOO! MESSENGER
![Page 14: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/14.jpg)
PULSE
![Page 15: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/15.jpg)
Creating your first App
![Page 16: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/16.jpg)
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
![Page 17: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/17.jpg)
YahooSmallView
• No Javascript
• HTML,CSS and YML Lite (subset of YML)
• Faster
• Two states (default or personalized)
![Page 18: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/18.jpg)
YahooFullView
• Supports HTML, CSS, YML and JS
• Richer Interface
![Page 19: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/19.jpg)
YahooFullView
![Page 20: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/20.jpg)
CREATING YOUR FIRST APP
Go to http://developer.yahoo.com and click on My Projects
![Page 21: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/21.jpg)
CREATING YOUR FIRST APP
![Page 22: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/22.jpg)
CREATING YOUR FIRST APP
![Page 23: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/23.jpg)
CREATING YOUR FIRST APP
![Page 24: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/24.jpg)
PREVIEW YOUR APP
![Page 25: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/25.jpg)
PREVIEW VIEW
![Page 26: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/26.jpg)
CREATING YOUR FIRST APP
![Page 27: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/27.jpg)
LAUNCH YOUR APP !
![Page 28: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/28.jpg)
YOUR APP IS READY !
http://apps.yahoo.com/-3XNdoV62
![Page 29: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/29.jpg)
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
![Page 30: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/30.jpg)
YAP FEATURES
![Page 31: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/31.jpg)
OpenSocial: Common APIs, multiple destinations.
![Page 32: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/32.jpg)
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/
![Page 33: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/33.jpg)
OPENSOCIAL EXAMPLE
http://apps.yahoo.com/-EKalHy4k
![Page 34: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/34.jpg)
OPENSOCIAL EXAMPLE
https://github.com/kkunal/yap-hacks/tree/master/opensocial/api_examples
![Page 35: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/35.jpg)
OPENSOCIAL EXAMPLE
http://apps.yahoo.com/-hi0q6k74
![Page 36: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/36.jpg)
OPENSOCIAL EXAMPLE
https://github.com/kkunal/yap-hacks/tree/master/opensocial/api_examples
![Page 37: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/37.jpg)
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
![Page 38: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/38.jpg)
YML, a simple way to get more out of your App !
+
![Page 39: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/39.jpg)
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
![Page 40: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/40.jpg)
yml:swf
http://apps.yahoo.com/-JfamS46m
https://github.com/kkunal/yap-hacks/tree/master/yml/swf
![Page 41: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/41.jpg)
yml:a
http://apps.yahoo.com/-Mg5VBt6o
https://github.com/kkunal/yap-hacks/tree/master/yml/tab
![Page 42: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/42.jpg)
yml:profile-pic, yml:name etc
http://apps.yahoo.com/-MOtB6q4s
https://github.com/kkunal/yap-hacks/tree/master/yml/profile
![Page 43: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/43.jpg)
Looks too simple, there must be a catch ?!
![Page 44: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/44.jpg)
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
![Page 45: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/45.jpg)
YUI EXAMPLE
http://apps.yahoo.com/-EDNQYz4e
https://github.com/kkunal/yap-hacks/tree/master/yui
![Page 46: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/46.jpg)
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
![Page 47: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/47.jpg)
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 !
![Page 48: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/48.jpg)
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
![Page 49: YAP, Open Hack Day, Bangalore 2011](https://reader036.vdocuments.net/reader036/viewer/2022062703/554fb518b4c905ad218b54c4/html5/thumbnails/49.jpg)
QUESTIONS?
http://xkcd.com/246/