Upload
megan-eskey
View
5.884
Download
1
Embed Size (px)
Citation preview
Diving into the Yahoo! Open Stack
h3p://developer.yahoo.com/hacku/ Dus>n Whi3le – dus>n@yahoo‐inc.com
DEVELOPER.YAHOO.COM EXAMPLES|TUTORIALS|CODESAMPLES
YAHOO! IS POWERED BY OPEN SOURCE TECHNOLOGIES
FREEBSD|LINUX|APACHE|PHP|MYSQL|BUGZILLA|HADOOP|SYMFONY
YAHOO! EMBRACES OPEN STANDARDS W3C|MICROFORMATS|OAUTH|OPENID|OPENSOCIAL
YAHOO! HIRES OPEN SOURCE DEVELOPERS RASMUSLERDORF|DOUGCROCKFORD|DOUGCUTTING|CHRISTIANHEILMANN
YAHOO! GIVES BACK TO OPEN SOURCE YUI|BROWSERPLUS|DESIGNPATTERNS|R3|YSLOW+PERFORMANCERULES
YAHOO! SHARES ITS DATA THROUGH OPEN APIS AND WEB SERVICES
YQL|PIPES|BOSS|CONTACTS|UPDATES|MAIL|DELICIOUS|FLICKR|UPCOMING|HOTJOBS|MAPS|FIREEAGLE|GEOLOCATION|LOCAL|TRAFFIC|WEATHER|
MUSIC|ANSWERS|SHOPPING|FINANCE|TRAVEL
YAHOO! ENGAGES COMMUNITIES WITH OPEN HACK EVENTS AROUND THE WORLD
HackDays|HackU|TechTalks|YDNTheater
WE ARE OPEN AT YAHOO!
PROGRESS. EVERYONE IS WORKING TOGETHER!
OPEN PLATFORMS + COLLABORATION OPENID|XRDS|OAUTH|PORTABLECONTACTS|OPENSOCIAL
The goals of Yahoo! Open Strategy
Y! OS – Establish a social dimension
• UnderlyingsocialplaOorm• SocialAPIsw/OpenSocial
• Unifiedprofilesystem
• RichconnecTons• UpdatesacrossYahoo!
• Linkyourexternalaccounts
Y! OS – Unified Open Profile
Y! OS – Unified Open Profile
Y! OS – Unified Open Profile
Y! OS – Open to 3rd‐par>es like never before
• Yahoo!DeveloperNetwork• DeveloperTools(YUI,etc)
• SocialAPIs• Profiles• ConnecTons• Updates
• DataAPIs• OAuth
• Yahoo!QueryLanguage• Yahoo!ApplicaTonPlaOorm
• OpenSocial
h3p://developer.yahoo.com/yos/
Y! OS – The Open Stack
Y! Developer Network
The Yahoo! Developer Network offers open source tools and open data APIs to make it easy for developers to build
applica>ons and mashups.
• 50+ APIs / Web Services – Developer Dashboard – Tutorials + Code Samples – API Documenta>on
• Yahoo! User Interface libraries + ASTRA • Design Pa3erns Library • PHP / Python / Ruby Dev Centers • Blogs / Theater / Events / Evangelism
What is Yahoo! Developer Network?
• JavaScriptFramework– UTliTes‐YAHOO,Dom,Event,AnimaTon,BrowserHistoryManager,ConnecTonManager,Cookie,DataSource,DragandDrop,Element,Get,ImageLoader,JSON,Resize,Selector,Loader
– Controls/Widgets‐AutoComplete,Bu^on,Calendar,Charts,ColorPicker,DataTable,ImageCropper,RichTextEditor,Slider,Uploader
– Container(Module,Overlay,Panel,ToolTp,Dialog),LayoutManager,Menu,TabView,TreeView
– Debug–Logger,Profiler,Test
Y! Developer Network – YUI JS
• CSSFoundaTon– Reset‐NeutralizesbrowserCSSstyles– Base‐AppliesconsistentstylefoundaTon– Fonts‐FoundaTonfortypographyandfont‐sizing– Grids‐Thousandsofwireframelayouts
• UserInterfaceDesignPa^ernsLibrary– ProvensoluTonstocommoninterfaces– h^p://developer.yahoo.com/ypa^erns/
– GradeBrowserSupport/ProgressiveEnhancement
Y! Developer Network – YUI CSS
• Morethan275funcTonalexamples– h^p://developer.yahoo.com/yui/examples/
• Yslow+PerformanceRules– h^p://developer.yahoo.com/performance
• YUIBlog– h^p://yuiblog.com/
• MailingList@Yahoo!Groups– h^p://tech.groups.yahoo.com/group/ydn‐javascript/
Y! Developer Network – Documenta>on
Y! Developer Network
SearchMonkey + BOSS
A simple Blueprint Example
Yahoo! Open Stack ‐ OAuth
Yahoo! Open Stack ‐ OAuth • 2‐legged&3‐leggedOAuth• ConsumerKey/ConsumerSecret• SimilartoproprietaryBBAuth,butopenstandard
h3p://developer.yahoo.com/oauth/
h3p://oauth.net/core/1.0
Y! Open Stack – Doing the Dance
Yahoo! Open Stack ‐ OpenID
• OpenIDmakesiteasyforyoutodeliverasimplifiedloginexperienceforyourusers
• Yahoo!isanOpenID2.0provider–youcanuseyourYahoo!usernameonanopenidenabledsite
h3p://developer.yahoo.com/openid/
Y! OS – Rewire Yahoo!
• UpdatesacrossYahoo!• OpenAppsforMyYahoo
• OpenAppsforMobile
Y! Open Stack – Social APIs
• SocialDirectory(read)
• Contacts(read)
• UserStatus(read/write)
• Updates(read/write)
• h3p://developer.yahoo.com/social
A Query Language for the Web
• ThousandsofWebServicesthatprovidevaluabledata
• RequireDeveloperstoreaddocumentaTonandformURLs/queries.
• Dataisisolated• Needscombining,tweaking,shapingevenaleritgetstothedeveloper.
Y! Open Stack – YQL
• SQL‐LikeLanguage– SynonymouswithDataaccess
– Familiartodevelopers– Expressiveenoughtogettherightdata.
• SelfDescribing‐show,desctable• Allowsyoutoquery,filterandjoindataacrossWebServices.
Y! Open Stack – YQL
61
YQLCommand:DESCsocial.connecTons
YQL – Table Contents
• 3 Verbs
– show: lists the supported tables – desc: describes the structure of a table – select: fetches data Tables, Verbs, Filters
YQL ‐ Verbs
YQL Statements ‐ Basics
SELECTwhatFROMcollecTon
WHEREfiltercondiTon
IN(sub‐select)
LIMITnOFFSETnshow:
Syntax
YQL Statements ‐ Collec>ons
• FROMcollecTon• Yahoo!WebServices
– SocialDir,Upcoming,MyblogLog,Y!Local,Search(BOSS)
• ExternalDataSources– XML,Atom,RSS,JSON,CSV,HTML
Syntax ‐> Select ‐> Collec>on
• TabledatacanbefilteredintheWHEREclauseeither– Remotelybythetabledatasource– LocallybytheYQLengine(dotnotaTon)
Syntax ‐> Select ‐> WHERE clause
YQL Statements – Where
YQL Statements ‐ Subselects
• IN(SELECT...)– Joinacrossdatasources– FieldIN(selectguidfrom...)– LikeSELECTbutcanreturnonlyNleaves
Syntax ‐> Select ‐> Sub‐Select
Get the profile for all my connec1ons:
select * from social.profile where guid in (select guid from social.connec?ons where owner_guid = me)
• ChangingtheTableSize– Yahoo!Tablesarelimitedtoasmallnumberbydefault(10)
– IncreasesetsizeasparameterstoCollecTon
select * from local.search(100) where zip=‘94089’ and query=‘pizza’
Syntax ‐> Select ‐> Table Size
select * from local.search where zip=‘94089’ and query=‘pizza’
YQL Statements – Table
• Filters: limi?ng condi?ons for the output data. – Follows a where clause Tables, Verbs, Filters
• select * from social.contact where guid=me
• select * from flickr.photos.search where text=”Cat”
YQL ‐ Filters
72
YQLCommand:SHOWtables
YQL – Available Tables
• Delicious• Dopplr• Friendfeed• Github• NewYorkTimes• Shopping
• Twi^er• Weather• Wesabe• Whitepages
• Zillow• ….
Availableongithub‐h^p://github.com/spullara/yql‐tables/
YQL ‐ Open Tables
YQL – Open Tables
YQL – Open Tables
YQL – Open Tables
YQL – Open Tables
• SchemadefinesmappingbetweenYQLandEndpoint
• Keyscaneitherbequery,pathormatrixparameters
• Keyscanbemarkedasrequired
• YQLCompilervalidatesexistenceofrequiredkeys
78
ProjecTon‐SELECTwhatFROMtable‐SELECT*FROMsocial.connecTons
LocalandRemoteFiltering‐SELECTwhatFROMtableWHEREfilter‐SELECT*FROMsocial.profileWHEREguid=me
Sub‐selects‐JoiningData‐SELECTwhatFROMtableWHEREfieldvalueIN(SELECT...)‐SELECT*FROMsocial.profileWHEREguidIN(SELECTguidFROMsocial.connecTonsWHEREowner_guid=me)
LocalPagingControl‐SELECTwhatFROMtableWHEREfilterLIMIT10OFFSET50‐SELECT*FROMweb.searchWHEREquery="madonna"LIMIT3OFFSET10
RemoveTableSizeControl‐SELECTwhatFROMtable(0,500)WHEREcondiTon‐SELECT*FROMweb.search(0,10)WHEREquery="madonna"ANDresult.XXX=something
YQL – Query Formats
OAuthEndpoint• h^p://query.yahooapis.com/v1/yql?q=...
PublicEndpoint• h^p://query.yahooapis.com/v1/public/yql?q=
YQLConsole• h^p://developer.yahoo.com/yql/console
YQL – API End Points
YQL + PIPES
81
YQL – Running a Query
• select*fromsocial.connecTons
• select*fromdelicious.feeds.popular
• select*fromflickr.photos.interesTngness
• select*fromfriendfeed.status
• select*fromgithub.checkins
YQL ‐ Examples
Y! Open Stack – Applica>on Planorm
• Allows developers the opportunity to deploy their own web based applica>ons on Yahoo!
• Mul>ple Views: Small and Canvas
• Social Context: the new Yahoo! Social Directory
• Developer Dashboard • OpenSocial 0.8 Javascript APIs
Y! Open Stack – Open Applica>ons
102
Open Applica>on Code Dive
What can you do with open apps?
What is YML?
• YML tags make it easy for you to create applica>ons that access social data, such as a list of the user’s friends.
• Similar in format to XML, YML provides func>onality to Open Applica>ons in a safe and standardized fashion. yml:friend‐selector yml:visible‐to‐friends
• Will begin integra>ng into OSML
What is YML?
• Dynamic and secure interac>ons: Several YML tags provide UI widgets and rich interac>ons that normally require untrusted javascript.
YML Tags (Large View)
yml:ayml:adyml:audioyml:formyml:friend‐selectoryml:if‐envyml:messageyml:nameyml:profile‐picyml:pronounyml:shareyml:swfyml:user‐badge
YML Lite Tags (Small View)
yml:ayml:audioyml:formyml:if‐envyml:nameyml:profile‐picyml:pronounyml:user‐badge
YML Tags
CajaisaJavaScriptsandboxofsorts.ItsaniTzesJavaScriptandHTML,removingunsafecode.Thatcodethenrunsinthebrowser.ThisallowsYahootosafelyincludeexternally
createdJavaScript.Developersshouldexpectthattheycannotdoeverythingtheywould
normallydoinawebapplicaTon.
Caja – What is it?
Y! Open Stack – Caja
• HTML/CSS/JavaScriptsecurer
• Enforcesstandards
• OneofthefirsttointegrateCaja(andkeepitrunning)
• h^p://code.google.com/p/google‐caja
• h^p://developer.yahoo.com/yap/guide/caja‐support.html
• CajapreventstheuseofarbitraryAcTveXcomponents,useofevalandiframes.
• ExternallibrarieslikeYUIarenotsupported.• Itdoesnotallowdocument.writebutinnerHTMLisallowed.
• ObjectsinCajacannotbeextendedbyuseofobj.prototype.
• Nodirectaccesstorealglobalobjects.
Caja – What is it?
Caja – JavaScript Before Cajoling
Caja – JavaScript Arer Cajoling
Caja & JavaScript – What doesn’t work? • eval()
• newFuncTon()
• Stringsaseventhandlers(node.onclick='...';)
• Namesendingwithdouble/tripleunderscores
• withfuncTon(with(obj){...})
• Implicitglobalvariables(specifyvarvariable)
• CallingamethodasafuncTon
• document.write
• window.event
• .onclick
• OpenSocialgadgets.io.makeRequestreturnJS
Caja & HTML – What doesn’t work? • namea^ributeswithgadgets.io.makeRequest
• Customa^ributes
• Customtags
• Unclosedtags
• <embed>
• <iframe>
• <linkrel=‘…
• javascript:void(0)• Radiobu^onsinIE
• RelaTveurl’s
Caja & IFRAME – Concerns
IFrame Concerns
• Drive‐bydownloads
• Phishinga^acks
• NorealcontentrestricTons
Caja Implementa>on
• Blacklistall/Whitelistsomemodel
Caja & CSS – What doesn’t work? • *hacks
• _hacks
• IEcondiTonals
• Insert‐alerclearfix
• expression()
• @import
• BackgroundimagesinIE
Caja – Best Prac>ces
• UseOpenSocialJavaScriptstandards• UseW3Cstandards
• UseYMLwhereverpossible
• UnittestallJavaScript• ReadthedocumentaTon(h^p://developer.yahoo.com/yos)
• ParTcipateintheforums(h^p://developer.yahoo.net/
forum/)
Caja Prac>cal – Running an AJAX Request
Caja Prac>cal – Working with JSON
Caja Prac>cal – Assigning Click Handlers
• CajaclientsidesaniTzerstripsJavaScriptwhen
insertedinDOMfollowingAJAXrequests
• HowdoIassignclickhandlersthen?
Given: DOM Node with an ID
<divid=‘myClickDiv’>ClickMe!</div>
Caja Prac>cal – Assigning Click Handlers
Caja Prac>cal – Assigning Click Handlers
Step 2 – Define your callback func>on
Y! Open Stack – SDKs
PHP SDK Currently Available Open and OAuth Applica>ons
Ac>onScript 3 SDK Currently Available Open Applica>ons
Java SDK in Development Open and OAuth Applica>ons
Installing the YOS PHP SDK
1. Download the SDK
– http://developer.yahoo.com/social/sdk
2. Unzip yos_php_sdk-1.1
3. Get a Developer Key
– http://developer.yahoo.com/dashboard
4. Start to write some code
YOSSDK – Methods 3‐Legged OAuth
getSessionedUser (session)getOwner (session)getUser (session)query (session)getPresence (user)setPresence (user)listUpdates (user)listConnecTonUpdates (user)insertUpdate (user)deleteUpdate (user)loadProfile (user)getConnecTons (user)getContacts (user)setSmallView (user)
2‐Legged OAuth
setSmallView (applicaTon)query (applicaTon)
YOSSDK – 2‐Legged OAuth
UsedFor:
‐ PublicuserdataandopenAPIs
<?php // Include the PHP SDK for YSP library. require_once("yosdk/lib/Yahoo.inc");
// Define values for keys required for authoriza>on define(CONSUMER_KEY,"dj0yJmk9ZDNwaXdQSEZ…j"); define(CONSUMER_SECRET,"37fe717538e0598e6c70d4262…");
// The YahooApplica>on class is used for two‐legged authoriza>on, which doesn't need user authoriza>on. $two_legged_app = new YahooApplica>on(CONSUMER_KEY,CONSUMER_SECRET);
// Create queries for Flickr $yql_request = 'select * from flickr.photos.search where user_id="28569531@N00" and text="jump" limit 6';
// Make the request $results = $two_legged_app‐>query($yql_request); $photos = $results‐>query‐>results‐>photo;
// Build the output HTML foreach($photos as $k=>$v) { $imgs .= '<img src="h3p://farm' . $v‐>farm . '.sta>c.flickr.com/' . $v‐>server . '/' . $v‐>id . '_' . $v‐>secret . '_m.jpg" alt="Image' . $k . '"/>' ; } echo "<html><body>" . $imgs . '</body></html>’; ?>
YOSSDK – 3‐Legged OAuth
UsedFor:
‐ Privatedataaccess
<?php//IncludethePHPSDKforYSPlibrary.require_once("yosdk/lib/Yahoo.inc");
//DefinevaluesforkeysrequiredforauthorizaTondefine(CONSUMER_KEY,"dj0yJmk9ZDNwaXd…j");define(CONSUMER_SECRET,"37fe717538e0598e6…");
$session=YahooSession::requireSession(CONSUMER_KEY,CONSUMER_SECRET);
//DefineYQLqueriesfortheSocialDirectoryAPIs$query="SELECT*FROMsocial.connecTonsWHEREowner_guid=meLIMIT2";$result=$session‐>query($query);
//BuildtheoutputHTMLecho("<html><body><pre><h2>ConnecTonData</h2>");var_dump($result);echo("</pre></body></html>");?>
YOSSDK – Finding connec>ons
YOSSDK – Crea>ng an update
3‐LeggedOAuth
YOSSDK – Se�ng the status of a user
3‐LeggedOAuth
YOSSDK – Upda>ng the small view
136
YAP Applica>ons How do I get started?
Experience: BasicWebDevKnowledge–HTML/CSS/Javascript
What we are building: Commonground–Findoutwhatyouhaveincommonwithyoursocialgraph:music,movies,books,hobbies.
What we will use: YOSSDK,YQL,YAP
Building a YAP App : CommonGround
• SimpleScalableHosTng– Joyent–FreeOpenSocialAccelerators– GoogleAppEngine– AmazonEC2+S3
• Framework– PHP(symfony)
– Python(Django)– Ruby(Rails)
Y! Applica>on Planorm – A good start
• HowtoworkwiththeYOSSDK• UsingsocialapisthroughYQL• UsinganywebdatathroughYQLapis• DisplayingsocialdatawithYMLandYAP
What will we learn?
• CreateanapplicaTonindeveloperdashboard• SetapplicaTonurlindevelopertool• BuildapplicaTon• Previewindevelopertool• Pushliveindevelopertool• Pushtogallery
What does it take?
h3p://developer.yahoo.com/dashboard
CommonGround available on GitHub
h3p://github.com/dwhi3le/commonground
MyApps+FeaturedApplicaTons
149
YAP Code Dive Lets build a social app live
150
YAP Code Dive Common Ques>ons
Ge�ng Started ‐ Documenta>on Y!OSMainOverview‐
h^p://developer.yahoo.com/yosYAPMainOverview‐
h^p://developer.yahoo.com/yapYQLDocs‐
h^p://developer.yahoo.com/yqlYMLDocs‐
h^p://developer.yahoo.com/yap/ymlYDNForum–h^p://developer.yahoo.com/forumYAPDashboard‐
h^p://developer.yahoo.com/dashboard
YQLConsole‐h^p://developer.yahoo.com/yql/console
ApplicaTonGallery‐h^p://apps.yahoo.com/myapps
JSLint‐h^p://www.jslint.com
PHPSDK‐h^p://developer.yahoo.com/social/sdk/
AS3SDK‐h^p://developer.yahoo.com/flash/yos/
Caja‐h^p://code.google.com/p/google‐caja/
CajaSupport‐h^p://developer.yahoo.com/yap/guide/caja‐support.html
• IhaveanexisTngOpenSocialapplicaTon.HowdoIgetstarted?
• IhaveanexisTngFacebookapplicaTon.HowdoIgetstarted?
• CanIputadsinmyapplicaTon?
• HowdoIauthenTcateOAuthusingJavaScript?
• Noneofmystylesaredisplaying,what’shappening?
• WhyPHP/AS3forthefirstSDK?
• setSmallViewisnotworking?What’sgoingon?
• HowdousersfindmyapplicaTon?
QUESTIONS? (Iwillbearoundforthewholeevent,sopleasedosayhelloandaskquesTons)
WANT TO JOIN YAHOO? WE ARE HIRING AND HAVE INTERNSHIPS!
DEVELOPER.YAHOO.COM EXAMPLES|TUTORIALS|CODESAMPLES
ENJOY THE REST OF HACKU