Diving Into The Yahoo Open Stack @ SF PHP Meetup
Upcoming SlideShare
Loading in...5
×
 

Diving Into The Yahoo Open Stack @ SF PHP Meetup

on

  • 4,243 views

Slides presented at San Francisco PHP meetup on April 2nd, 2009.

Slides presented at San Francisco PHP meetup on April 2nd, 2009.

Statistics

Views

Total Views
4,243
Views on SlideShare
4,222
Embed Views
21

Actions

Likes
0
Downloads
38
Comments
0

6 Embeds 21

http://coderwall.com 11
http://static.slideshare.net 3
http://www.slideshare.net 3
http://www.jordimir.com 2
http://zanbyserve.com 1
http://localhost:3000 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Diving Into The Yahoo Open Stack @ SF PHP Meetup Diving Into The Yahoo Open Stack @ SF PHP Meetup Presentation Transcript

    • Diving into the Yahoo! Open Stack   Dus>n Whi3le – dus>n@yahoo‐inc.com  h3p://developer.yahoo.com/ 
    • EXAMPLES | TUTORIALS | CODE SAMPLES  DEVELOPER.YAHOO.COM 
    • FREEBSD | LINUX | APACHE | PHP | MYSQL | BUGZILLA | HADOOP | SYMFONY  YAHOO! IS POWERED BY OPEN SOURCE  TECHNOLOGIES 
    • W3C | MICROFORMATS | OAUTH | OPENID | OPENSOCIAL  YAHOO! EMBRACES OPEN STANDARDS 
    • RASMUS LERDORF | DOUG CROCKFORD | DOUG CUTTING | CHRISTIAN HEILMANN  YAHOO! HIRES OPEN SOURCE DEVELOPERS 
    • YUI | BROWSER PLUS | DESIGN PATTERNS | R3 | YSLOW + PERFORMANCE RULES  YAHOO! GIVES BACK TO OPEN SOURCE 
    • YQL | PIPES | BOSS | CONTACTS | UPDATES | MAIL | DELICIOUS | FLICKR | UPCOMING  | HOTJOBS | MAPS | FIREEAGLE | GEOLOCATION | LOCAL | TRAFFIC | WEATHER |  MUSIC | ANSWERS | SHOPPING | FINANCE | TRAVEL  YAHOO! SHARES ITS DATA THROUGH  OPEN APIS AND WEB SERVICES 
    • Hack Days | HackU | Tech Talks | YDN Theater  YAHOO! ENGAGES COMMUNITIES WITH  OPEN HACK EVENTS AROUND THE WORLD 
    • WE ARE OPEN AT YAHOO! 
    • PROGRESS. EVERYONE IS WORKING  TOGETHER! 
    • OPENID | XRDS | OAUTH | PORTABLE CONTACTS | OPEN SOCIAL  OPEN PLATFORMS + COLLABORATION 
    • Y! OS – The Open Stack  h3p://developer.yahoo.com/yos/ 
    • developer.yahoo.com 
    • developer.yahoo.com 
    • developer.yahoo.com 
    • developer.yahoo.com 
    • developer.yahoo.com 
    • SearchMonkey + BOSS 
    • A simple Blueprint Example 
    • What is Yahoo! 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  • 
    • Y! Developer Network – YUI JS  •  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 CSS  •  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 – Documenta>on  •  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/ 
    • 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/ 
    • Y! Open Stack – Doing the Dance   h3p://oauth.net/core/1.0 
    • A Query Language for the Web  SELECT  * FROM INTERNET 
    • Before YQL  •  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. 
    • Y! Open Stack – 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. 
    • YQL – Available Tables  YQL Command: SHOW tables  50 
    • YQL ‐ Verbs  •  3 Verbs  –  show: lists the supported tables  –  desc: describes the structure of a table  –  select: fetches data Tables, Verbs, Filters 
    • YQL – Table Contents  YQL Command: DESC social.connecOons  53 
    • YQL Statements ‐ Basics  Syntax  SELECT what  FROM collecOon  WHERE filter condiOon  IN (sub‐select)  LIMIT n OFFSET nshow: 
    • YQL Statements ‐ Collec>ons  Syntax ‐> Select ‐> Collec>on  •  FROM collecOon  •  Yahoo! WebServices  –  Social Dir, Upcoming, MyblogLog, Y!Local,  Search(BOSS)  •  External DataSources  –  XML, Atom, RSS, JSON, CSV, HTML  
    • YQL Statements – Where  Syntax ‐> Select ‐> WHERE clause  •  Table data can be filtered in the WHERE clause  either  –  Remotely by the table data source  –  Locally by the YQL engine (dot notaOon) 
    • YQL Statements ‐ Subselects  Syntax ‐> Select ‐> Sub‐Select  •  IN (SELECT ...)  –  Join across data sources  –  Field IN (select guid from ...)  –  Like SELECT but can return only N leaves  Get the profile for all my connec1ons:  select * from social.profile where guid in (select guid from social.connec?ons where  owner_guid = me) 
    • YQL ‐ Open Tables  Delicious  TwiXer  •  •  Dopplr  Weather  •  •  Friendfeed  Wesabe  •  •  Github  Whitepages  •  •  New York Times  Zillow  •  •  Shopping  ….  •  •  Available on github ‐ hXp://github.com/spullara/yql‐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  
    • YQL – API End Points  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 – Query Formats  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=quot;madonnaquot; LIMIT 3 OFFSET 10  Remove Table Size Control  ‐ SELECT what FROM table(0,500) WHERE condiOon  ‐ SELECT * FROM web.search(0,10) WHERE query=quot;madonnaquot; AND result.XXX = something  66 
    • YQL – Running a Query with YOS SDK  67 
    • YQL + PIPES 
    • YQL ‐ Examples  select * from social.connecOons  •  select * from delicious.feeds.popular  •  select * from flickr.photos.interesOngness  •  select * from friendfeed.status  •  select * from github.checkins  • 
    • 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 
    • Open Applica>on  Code Dive   What can you do with open apps?  84 
    • 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  YML Tags (Large View)  YML Lite Tags (Small View)  yml:a  yml:a  yml:ad  yml:audio  yml:audio  yml:form  yml:form  yml:if‐env  yml:friend‐selector  yml:name  yml:if‐env  yml:profile‐pic  yml:message  yml:pronoun  yml:name  yml:user‐badge  yml:profile‐pic  yml:pronoun  yml:share  yml:swf  yml:user‐badge   
    • Caja – What is it? 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. 
    • 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 – What is it? •  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 – 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  2‐Legged OAuth  getSessionedUser   setSmallView    (applicaOon)   (session)  getOwner                        (session)  query             (applicaOon)          getUser                           (session)  query                               (session)  getPresence                    (user)  setPresence                    (user)  listUpdates                      (user)  listConnecOonUpdates    (user)  insertUpdate                   (user)  deleteUpdate                  (user)  loadProfile                      (user)  getConnecOons              (user)  getContacts                    (user)  setSmallView                 (user) 
    • 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(quot;yosdk/lib/Yahoo.incquot;);  // Define values for keys required for authoriza>on  define(CONSUMER_KEY,quot;dj0yJmk9ZDNwaXdQSEZ…jquot;);  define(CONSUMER_SECRET,quot;37fe717538e0598e6c70d4262…quot;);  // 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=quot;28569531@N00quot; and text=quot;jumpquot;  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=quot;h3p://farm' . $v‐>farm . '.sta>c.flickr.com/' . $v‐>server . '/' . $v‐>id . '_' . $v‐ >secret . '_m.jpgquot; alt=quot;Image' . $k . 'quot;/>' ;  }  echo quot;<html><body>quot; . $imgs . '</body></html>’;  ?> 
    • YOSSDK – Finding connec>ons  <?php  // Include the PHP SDK for YSP library.  require_once(quot;yosdk/lib/Yahoo.incquot;);  // Define values for keys required for authorizaOon  define(CONSUMER_KEY,quot;dj0yJmk9ZDNwaXd…jquot;);  define(CONSUMER_SECRET,quot;37fe717538e0598e6…quot;);  $session=YahooSession::requireSession(CONSUMER_KEY,CONSUMER_SECRET);  // Define YQL queries for the Social Directory APIs  $query = quot;SELECT * FROM social.connecOons WHERE owner_guid=me LIMIT 2quot;;  $result = $session‐>query($query);  // Build the output HTML  echo(quot;<html><body><pre><h2>ConnecOon Data</h2>quot; );  var_dump($result) ;  echo(quot;</pre></body></html>quot;);  ?> 
    • 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 
    • Open App Code Dive   Lets build a social app live   117 
    • Building an Open App :  CommonGround  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 
    • Open Apps – A good founda>on  •  Scalable HosOng  –  Joyent – Free OpenSocial Accelerators  –  Google App Engine  –  Amazon EC2 + S3  •  Framework  –  PHP (symfony)  –  Python (Django)  –  Ruby (Rails) 
    • What will we learn?  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  • 
    • Five steps to an Open App  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 
    • 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 ‐  JSLint ‐ hXp://www.jslint.com  hXp://developer.yahoo.com/yos  YAP Main Overview ‐  PHP SDK ‐  hXp://developer.yahoo.com/yap  hXp://developer.yahoo.com/social/ YQL Docs ‐  sdk/  hXp://developer.yahoo.com/yql  AS3 SDK ‐  YML Docs ‐  hXp://developer.yahoo.com/flash/ hXp://developer.yahoo.com/yap/yml   yos/  YDN Forum –         hXp://developer.yahoo.com/forum  Caja ‐  YAP Dashboard ‐  hXp://code.google.com/p/google‐ hXp://developer.yahoo.com/ caja/   dashboard  Caja Support ‐  YQL Console ‐  hXp://developer.yahoo.com/yap/ hXp://developer.yahoo.com/yql/ guide/caja‐support.html   console   ApplicaOon Gallery ‐  hXp://apps.yahoo.com/myapps 
    • Open Apps Code Dive   Common Ques>ons   133 
    • •  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! 
    • ENJOY THE REST OF SF PHP MEETUP  EXAMPLES | TUTORIALS | CODE SAMPLES  DEVELOPER.YAHOO.COM