Upload
dustin-whittle
View
2.938
Download
3
Embed Size (px)
DESCRIPTION
Slides presented at San Francisco PHP meetup on April 2nd, 2009.
Citation preview
Diving into the Yahoo! Open Stack
h3p://developer.yahoo.com/ Dus>n Whi3le – dus>n@yahoo‐inc.com
DEVELOPER.YAHOO.COM EXAMPLES | TUTORIALS | CODE SAMPLES
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 RASMUS LERDORF | DOUG CROCKFORD | DOUG CUTTING | CHRISTIAN HEILMANN
YAHOO! GIVES BACK TO OPEN SOURCE YUI | BROWSER PLUS | DESIGN PATTERNS | R3 | YSLOW + PERFORMANCE RULES
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
Hack Days | HackU | Tech Talks | YDN Theater
WE ARE OPEN AT YAHOO!
PROGRESS. EVERYONE IS WORKING TOGETHER!
OPEN PLATFORMS + COLLABORATION OPENID | XRDS | OAUTH | PORTABLE CONTACTS | OPEN SOCIAL
h3p://developer.yahoo.com/yos/
Y! OS – The Open Stack
developer.yahoo.com
developer.yahoo.com
developer.yahoo.com
developer.yahoo.com
developer.yahoo.com
SearchMonkey + BOSS
A simple Blueprint Example
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?
• JavaScript Framework – UOliOes ‐ YAHOO, Dom, Event, AnimaOon, Browser History Manager, ConnecOon Manager, Cookie, DataSource, Drag and Drop, Element, Get, ImageLoader, JSON, Resize, Selector, Loader
– Controls / Widgets ‐ AutoComplete, BuXon, Calendar, Charts, Color Picker, DataTable, ImageCropper, Rich Text Editor, Slider, Uploader
– Container (Module, Overlay, Panel, ToolOp, Dialog), Layout Manager, Menu, TabView, TreeView
– Debug – Logger, Profiler, Test
Y! Developer Network – YUI JS
• CSS FoundaOon – Reset ‐ Neutralizes browser CSS styles – Base ‐ Applies consistent style foundaOon – Fonts ‐ FoundaOon for typography and font‐sizing – Grids ‐ Thousands of wireframe layouts
• User Interface Design PaXerns Library – Proven soluOons to common interfaces – hXp://developer.yahoo.com/ypaXerns/
– Grade Browser Support / Progressive Enhancement
Y! Developer Network – YUI CSS
• More than 275 funcOonal examples – hXp://developer.yahoo.com/yui/examples/
• YSlow + Performance Rules – hXp://developer.yahoo.com/performance
• YUI Blog – hXp://yuiblog.com/
• Mailing List @ Yahoo! Groups – hXp://tech.groups.yahoo.com/group/ydn‐javascript/
Y! Developer Network – Documenta>on
Yahoo! Open Strategy
Y! OS – Unified Open Profile
Y! OS – Open to 3rd‐par>es like never before
• Yahoo! Developer Network • Developer Tools (YUI, etc)
• Social APIs • Profiles • ConnecOons • Updates
• Data APIs • OAuth
• Yahoo! Query Language • Yahoo! ApplicaOon Plahorm
• OpenSocial
Yahoo! Open Stack ‐ OAuth
Yahoo! Open Stack ‐ OAuth • 2‐legged & 3‐legged OAuth • Consumer Key / Consumer Secret • Similar to proprietary BBAuth, but open standard
h3p://developer.yahoo.com/oauth/
h3p://oauth.net/core/1.0
Y! Open Stack – Doing the Dance
A Query Language for the Web
SELECT * FROM INTERNET
• Thousands of Web Services that provide valuable data
• Require developers to read documentaOon and form URLs/queries.
• Data is isolated • Needs combining, tweaking, shaping even aker it gets to the developer.
Before YQL
• SQL‐Like Language – Synonymous with Data access
– Familiar to developers – Expressive enough to get the right data
• Self Describing ‐ show, desc table • Allows you to query, filter and join data across Web Services.
Y! Open Stack – YQL
50
YQL Command: SHOW tables
YQL – Available Tables
• 3 Verbs
– show: lists the supported tables – desc: describes the structure of a table – select: fetches data Tables, Verbs, Filters
YQL ‐ Verbs
53
YQL Command: DESC social.connecOons
YQL – Table Contents
YQL Statements ‐ Basics
SELECT what FROM collecOon
WHERE filter condiOon
IN (sub‐select)
LIMIT n OFFSET nshow:
Syntax
YQL Statements ‐ Collec>ons
• FROM collecOon • Yahoo! WebServices
– Social Dir, Upcoming, MyblogLog, Y!Local, Search(BOSS)
• External DataSources – XML, Atom, RSS, JSON, CSV, HTML
Syntax ‐> Select ‐> Collec>on
• Table data can be filtered in the WHERE clause either – Remotely by the table data source – Locally by the YQL engine (dot notaOon)
Syntax ‐> Select ‐> WHERE clause
YQL Statements – Where
YQL Statements ‐ Subselects
• IN (SELECT ...) – Join across data sources – Field IN (select guid from ...) – Like SELECT but can return only N leaves
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)
• Delicious • Dopplr • Friendfeed • Github • New York Times • Shopping
• TwiXer • Weather • Wesabe • Whitepages
• Zillow • ….
Available on github ‐ hXp://github.com/spullara/yql‐tables/
YQL ‐ Open Tables
YQL – Open Tables
YQL – Open Tables
YQL – Open Tables
YQL – Open Tables
• Schema defines mapping between YQL and Endpoint
• Keys can either be query, path or matrix parameters
• Keys can be marked as required
• YQL Compiler validates existence of required keys
OAuth Endpoint • hXp://query.yahooapis.com/v1/yql?q=...
Public Endpoint • hXp://query.yahooapis.com/v1/public/yql?q=
YQL Console • hXp://developer.yahoo.com/yql/console
YQL – API End Points
66
ProjecOon ‐ SELECT what FROM table ‐ SELECT * FROM social.connecOons
Local and Remote Filtering ‐ SELECT what FROM table WHERE filter ‐ SELECT * FROM social.profile WHERE guid = me
Sub‐selects ‐ Joining Data ‐ SELECT what FROM table WHERE fieldvalue IN (SELECT ...) ‐ SELECT * FROM social.profile WHERE guid IN (SELECT guid FROM social.connecOons WHERE owner_guid=me)
Local Paging Control ‐ SELECT what FROM table WHERE filter LIMIT 10 OFFSET 50 ‐ SELECT * FROM web.search WHERE query="madonna" LIMIT 3 OFFSET 10
Remove Table Size Control ‐ SELECT what FROM table(0,500) WHERE condiOon ‐ SELECT * FROM web.search(0,10) WHERE query="madonna" AND result.XXX = something
YQL – Query Formats
67
YQL – Running a Query with YOS SDK
YQL + PIPES
• select * from social.connecOons
• select * from delicious.feeds.popular
• select * from flickr.photos.interesOngness
• select * from friendfeed.status
• select * from github.checkins
YQL ‐ Examples
Y! Open Stack – Applica>on Pladorm
• Allows developers to deploy their own web based applica>ons on Yahoo!
• Mul>ple Views: Small and Canvas
• Social Context: the new Yahoo! Social Directory
• OpenSocial 0.8 Javascript APIs
Y! Open Stack – Open Applica>ons
84
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
YML Tags (Large View)
yml:a yml:ad yml:audio yml:form yml:friend‐selector yml:if‐env yml:message yml:name yml:profile‐pic yml:pronoun yml:share yml:swf yml:user‐badge
YML Lite Tags (Small View)
yml:a yml:audio yml:form yml:if‐env yml:name yml:profile‐pic yml:pronoun yml:user‐badge
YML Tags
Caja is a JavaScript sandbox of sorts. It saniOzes JavaScript and HTML, removing unsafe code. That code then runs in the browser. This allows Yahoo to safely include externally
created JavaScript. Developers should expect that they cannot do everything they would
normally do in a web applicaOon.
Caja – What is it?
Y! Open Stack – Caja
• HTML / CSS / JavaScript securer
• Enforces standards
• One of the first to integrate Caja (and keep it running)
• hXp://code.google.com/p/google‐caja
• hXp://developer.yahoo.com/yap/guide/caja‐support.html
• Caja prevents the use of arbitrary AcOveX components, use of eval and iframes.
• External libraries like YUI are not supported. • It does not allow document.write but innerHTML is allowed.
• Objects in Caja cannot be extended by use of obj.prototype.
• No direct access to real global objects.
Caja – What is it?
Caja – JavaScript Before Cajoling
Caja – JavaScript Amer Cajoling
Caja & JavaScript – What doesn’t work? • eval()
• new FuncOon()
• Strings as event handlers (node.onclick = '...';)
• Names ending with double / triple underscores
• with funcOon (with (obj) { ... })
• Implicit global variables (specify var variable)
• Calling a method as a funcOon
• document.write
• window.event
• .onclick
• OpenSocial gadgets.io.makeRequest return JS
Caja & HTML – What doesn’t work? • name aXributes with gadgets.io.makeRequest
• Custom aXributes
• Custom tags
• Unclosed tags
• <embed>
• <iframe>
• <link rel=‘…
• javascript:void(0) • Radio buXons in IE
• RelaOve url’s
Caja & IFRAME – Concerns
IFrame Concerns
• Drive‐by downloads
• Phishing aXacks
• No real content restricOons
Caja Implementa>on
• Blacklist all / Whitelist some model
Caja & CSS – What doesn’t work? • * hacks
• _ hacks
• IE condiOonals
• Insert‐aker clear fix
• expression()
• @import
• Background images in IE
Caja – Best Prac>ces
• Use OpenSocial JavaScript standards • Use W3C standards
• Use YML wherever possible
• Unit test all JavaScript • Read the documentaOon (hXp://developer.yahoo.com/yos)
• ParOcipate in the forums (hXp://developer.yahoo.net/
forum/)
Caja Prac>cal – Running an AJAX Request
Caja Prac>cal – Working with JSON
Caja Prac>cal – Assigning Click Handlers
• Caja client side saniOzer strips JavaScript when
inserted in DOM following AJAX requests
• How do I assign click handlers then?
Given: DOM Node with an ID
<div id=‘myClickDiv’>Click Me!</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) listConnecOonUpdates (user) insertUpdate (user) deleteUpdate (user) loadProfile (user) getConnecOons (user) getContacts (user) setSmallView (user)
2‐Legged OAuth
setSmallView (applicaOon) query (applicaOon)
YOSSDK – 2‐Legged OAuth
Used For:
‐ Public user data and open APIs
YOSSDK – 3‐Legged OAuth
Used For:
‐ Private data access
<?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>’; ?>
<?php // Include the PHP SDK for YSP library. require_once("yosdk/lib/Yahoo.inc");
// Define values for keys required for authorizaOon define(CONSUMER_KEY,"dj0yJmk9ZDNwaXd…j"); define(CONSUMER_SECRET,"37fe717538e0598e6…");
$session=YahooSession::requireSession(CONSUMER_KEY,CONSUMER_SECRET);
// Define YQL queries for the Social Directory APIs $query = "SELECT * FROM social.connecOons WHERE owner_guid=me LIMIT 2"; $result = $session‐>query($query);
// Build the output HTML echo("<html><body><pre><h2>ConnecOon Data</h2>" ); var_dump($result) ; echo("</pre></body></html>"); ?>
YOSSDK – Finding connec>ons
YOSSDK – Crea>ng an update
3‐Legged OAuth
YOSSDK – Se�ng the status of a user
3‐Legged OAuth
YOSSDK – Upda>ng the small view
117
Open App Code Dive Lets build a social app live
Experience: Basic Web Dev Knowledge – PHP/HTML/CSS/Javascript
What we are building: Common ground – Find out what you have in common with your social graph: music, movies, books, hobbies.
What we will use: YOSSDK, YQL, YAP
Building an Open App : CommonGround
• Scalable HosOng – Joyent – Free OpenSocial Accelerators – Google App Engine – Amazon EC2 + S3
• Framework – PHP (symfony)
– Python (Django) – Ruby (Rails)
Open Apps – A good founda>on
• How to work with the YOS SDK • Using social apis through YQL • Using any web data through YQL apis • Displaying social data with YML and YAP
What will we learn?
1. Create an applicaOon in developer dashboard 2. Set applicaOon URL in developer tool 3. Build applicaOon 4. Preview in developer tool 5. Push live in developer tool
Five steps to an Open App
h3p://developer.yahoo.com/dashboard
CommonGround available on GitHub
h3p://github.com/dwhi3le/commonground
My Apps + Featured ApplicaOons
Ge�ng Started ‐ Documenta>on Y!OS Main Overview ‐
hXp://developer.yahoo.com/yos YAP Main Overview ‐
hXp://developer.yahoo.com/yap YQL Docs ‐
hXp://developer.yahoo.com/yql YML Docs ‐
hXp://developer.yahoo.com/yap/yml YDN Forum – hXp://developer.yahoo.com/forum YAP Dashboard ‐
hXp://developer.yahoo.com/dashboard
YQL Console ‐ hXp://developer.yahoo.com/yql/console
ApplicaOon Gallery ‐ hXp://apps.yahoo.com/myapps
JSLint ‐ hXp://www.jslint.com
PHP SDK ‐ hXp://developer.yahoo.com/social/sdk/
AS3 SDK ‐ hXp://developer.yahoo.com/flash/yos/
Caja ‐ hXp://code.google.com/p/google‐caja/
Caja Support ‐ hXp://developer.yahoo.com/yap/guide/caja‐support.html
133
Open Apps Code Dive Common Ques>ons
• I have an exisOng OpenSocial applicaOon. How do I get started?
• I have an exisOng Facebook applicaOon. How do I get started?
• Can I put ads in my applicaOon?
• How do I authenOcate OAuth using JavaScript?
• None of my styles are displaying, what’s happening?
• Why PHP / AS3 for the first SDK?
• setSmallView is not working? What’s going on?
• How do users find my applicaOon?
QUESTIONS? (I will be around for the whole event, so please do say hello and ask quesOons)
WANT TO JOIN YAHOO? WE ARE HIRING AND HAVE INTERNSHIPS!
DEVELOPER.YAHOO.COM EXAMPLES | TUTORIALS | CODE SAMPLES
ENJOY THE REST OF SF PHP MEETUP