Diving Into The Yahoo Open Stack @ SF PHP Meetup

0 %
100 %
Information about Diving Into The Yahoo Open Stack @ SF PHP Meetup

Published on April 3, 2009

Author: dustin.whittle

Source: slideshare.net


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

Diving into the Yahoo! Open Stack   Dus>n Whi3le – dus>n@yahoo‐inc.com  h3p://developer.yahoo.com/ 











Y! OS – The Open Stack  h3p://developer.yahoo.com/yos/ 






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 ‐ 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 


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) 



Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Yahoo! Open Stack & YQL - Technology - documents.mx

Diving Into The Yahoo Open Stack @ SF PHP Meetup. Yahoo! Query Language (YQL) Guide. SEA Open Hack - YQL
Read more

Grep My Mind | Wonder what’s on my mind? Now you know. - a ...

Welcome to Grep My Mind. ... Diving into the Yahoo! Open Stack – SF PHP Meetup April 2nd, ... Join the SF PHP Meetup for an exploration into the Yahoo!
Read more

Tips & Tricks - Grep My Mind

RSVP: Diving into the Yahoo! Open Stack. Join the SF PHP Meetup for an exploration into the Yahoo!
Read more

Yahoo Open Platform Stack - Technology - documents.mx

Share Yahoo Open Platform Stack. ... Diving Into The Yahoo Open Stack @ SF PHP Meetup. ... Open Yahoo! - An Audience ...
Read more

mark p. - New York Minecraft Meetup Group (New York, NY ...

Brooklyn Dumpster Diving Meetup. ... Kaltura Open Video Meetup. ... · Futurology · PHP · Bicycle Riding · Makerspaces ...
Read more


The New York City Vegetarian & Vegan Meetup https://www.meetup.com/vegetarian-nyc/ https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/c/b/9/3 ...
Read more

Product Hunt

Product Hunt is a curation of the best new products, every day. Discover the latest mobile apps, websites, and technology products that everyone's talking ...
Read more