Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

YQL Tutorial

9,279 views

Published on

My 3 hour YQL tutorial deck from JSConf

Published in: Technology

YQL Tutorial

  1. YQL
  2. whY QL?
  3. dev
  4. dev
  5. dev
  6. dev
  7. dev
  8. dev
  9. dev
  10. dev
  11. dev
  12. dev
  13. dev
  14. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); …
  15. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } …
  16. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2
  17. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  18. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  19. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  20. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  21. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  22. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); ? … … if (flickcurl_prepare(fc, ? "flickr.photos.geo.correctLocation", parameters, count)) { … } … ? http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 ? http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  23. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); ? … … if (flickcurl_prepare(fc, ? "flickr.photos.geo.correctLocation", parameters, count)) { … } … ? http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 ? http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  24. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); … … if (flickcurl_prepare(fc, "flickr.photos.geo.correctLocation", parameters, count)) { … } … http://search.yahooapis.com/ ImageSearchService/V1/imageSearch? appid=YahooDemo&query=Corvette&results=2 http://weather.yahooapis.com/ forecastrss?p=FRXX0076&u=c
  25. dev YQL
  26. dev YQL
  27. dev Bindings YQL
  28. Demo time http://developer.yahoo.com/yql/console/
  29. Exercise 1 • write a query to search the web for “free wifi” Washington DC • find photos of kittens on flickr that were tagged with “awesome” • find the weather at SFO (san francisco airport)
  30. Solutions 1 • select * from search.web where query = '"washington dc" free wifi' • select * from flickr.photos.search where text ="kittens" and tags="awesome" • select * from weather.forecast where location in (select postal from geo.places where text="sfo")
  31. Demo time part deux http://developer.yahoo.com/yql/console/
  32. Exercise 2 • Get my (“sh1mmer”) twitter stream • Find articles about Obama in the New York Times • Google, Bing and Yahoo for dogs
  33. Solutions 2 • select * from twitter.user.timeline where id = "sh1mmer" • select * from nyt.article.search where query = "obama" • select * from query.multi where queries = 'select * from microsoft.bing.web where query="dogs";select * from google.search where q = "dogs"; select * from search.web where query="dogs"'
  34. YQL in Practice 20 tiny steps to a working application You’ll need: Firefox Firebug Text editor
  35. Step 1. Login to the console with your Yahoo! login http://developer.yahoo.com/yql/console
  36. Step 2. Find the statement box and run the first query with test.
  37. Step 3. Check out the formatted view.
  38. Step 4. Run the statement “desc html”
  39. Step 5. Find the keys, note the required keys.
  40. Step 6. Get some HTML: select * from html where url = "http:// hubblesite.org/gallery/album/the_universe"
  41. Step 7. Check out the result. See the HTML in there?
  42. Step 8. Open http://hubblesite.org/gallery/album/the_universe in Firefox. Right click on a thumbnail and click “Inspect Element”
  43. Step 9. Find the element in Firebug. Right click and select “Copy XPath”
  44. Step 10. Add and xpath = "" to your query. Paste in the XPath from Firebug
  45. Step 11. Test your statement and refine your XPath.
  46. Step 12. Add limit 10 to your statement
  47. Step 13. Let’s get out of the console. Copy the “Rest Query” url into a new tab
  48. Step 14. Let’s embed this in a web page. Download the files from http://github.com/sh1mmer/dotnet-yql-tutorial
  49. Step 15. Add <script type="text/javascript" src="yql_js_widget.js"></script> to your HTML page.
  50. Step 16. Add some style: <style type="text/css"> li.imgCnt{ list-style: none; background:#000000; margin: 3px; float: left; } li.imgCnt img{ border:0; margin:5px; } li.imgCnt div.imgTitle{ padding: 5px; font-size: 11px; text- align:center; } </style>
  51. Step 17. Add another script node. Add config = {};
  52. Step 18. Format the output: var format = '<li class="imgCnt"> <img src="{src}" alt="{alt}"></li>';
  53. Step 19. Add you query; var yqlQuery = "" and add your query.
  54. Step 20. Add the render code: yqlWidget.push(yqlQuery,config,format,'widge tContainer'); yqlWidget.render();
  55. Now in YUI 3
  56. <script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></ script> <script> YUI({ //Last Gallery Build of this module gallery: 'gallery-2010.01.27-20' }).use('gallery-yql', function(Y) { //Using events var q1 = new Y.yql('select * from github.user.info where (id = "davglass")'); q1.on('query', function(r) { //Do something here. }); q1.on('error', function(r) { //Do something here. }); //Or the callback approacha new Y.yql('select * from github.user.info where (id = "davglass")', function(r) { //Do something here. r.query; //The result r.error; //The error message }); }); </script>
  57. Advanced YQL Advanced Queries, I/U/D, Open Tables and Using YQL with JavaScript
  58. Basics select * from {table} where {key1} = "{value1}" and {key2} = {value2} select * from flickr.photos.search where text = "kittens" and tags = "domokun"
  59. Remote vs. Local
  60. select * from flickr.photos.search where text = "kittens" and tags = "domokun" Remote
  61. select * from flickr.photos.search where text = "kittens" and tags = "domokun" Remote
  62. select * from flickr.photos.search where text = "kittens" and tags = "domokun" Remote
  63. desc {table}
  64. Local
  65. select * from flickr.photos.search where text = "kittens" and tags = "domokun" and farm = 4
  66. Limits and Paging
  67. select * from flickr.photos.search where text = "kittens" and tags = "domokun" and farm = 4 limit 10
  68. WTF?!
  69. select * from flickr.photos.search(10) where text = "kittens" and tags = "domokun" and farm = 4
  70. OMG SRLY WTF?!
  71. select * from flickr.photos.search(20) where text = "kittens" and tags = "domokun" and farm = 4
  72. Ooo! 6 results... right...
  73. select * from flickr.photos.search(0) where text = "kittens" and tags = "domokun" and farm = 4 limit 10
  74. Limit Summary • limit 10 - give me max 10 results from the data you have • {table}(10) - get ten results from server • {table}(0) - get enough results from the server to fill my local limit with the local filters
  75. Offset
  76. select * from {table} (10) where foo = "bar" offset 10 vs. select * from {table} (10,10) where foo = "bar"
  77. select * from {table} (10) where foo = "bar" offset 10 <results> <result foo=”bar”>1</result> <results> <result foo=”qux”>2</result> <result foo=”bar”>1</result> ... ... <results> </results> <result foo=”qux”>8</result> <result foo=”bar”>9</result> </query> <result foo=”bar”>9</result> <result foo=”bar”>10</result> <result foo=”bar”>10</result> </results> </results> </query> </query>
  78. select * from {table} (10,10) where foo = "bar" <results> <result foo=”bar”>11</result> <results> <result foo=”qux”>12</result> <result foo=”bar”>11</result> ... ... <result foo=”qux”>18</result> <result foo=”bar”>20</result> <result foo=”qux”>19</result> </results> <result foo=”bar”>20</result> </query> </results> </query>
  79. Inner Queries
  80. select * from {table1} where {key1} in (select id from {table2});
  81. select * from flickr.photos.info where photo_id in (select id from flickr.photos.search where text="kitten")
  82. Multi-key
  83. select * from {table1} where ({key1}, {key2}) in (select foo, bar from {table2});
  84. select * from flickr.places where (lat, lon) in (select match1, match2 from regex where text in (select entry.point from usgs.earthquakes limit 10) and expression = "(-?d+.d+) (-?d+.d+)") and total != 0 limit 10
  85. Filters
  86. select * from {table}(20) | sort(field=”foo”, descending = “true”) | truncate 10
  87. Filters are always applied last, in order
  88. select * from {table}(20) | sort(field=”foo”, descending = “true”) | truncate 10 <results> <results> <results> <result foo=”bar”>1</result> <result foo=”bar”>20</result> <result foo=”bar”>20</result> <result foo=”qux”>2</result> <result foo=”qux”>19</result> <result foo=”qux”>19</result> ... ... ... <result foo=”qux”>18</result> <result foo=”qux”>3</result> <result foo=”qux”>13</result> <result foo=”bar”>19</result> <result foo=”bar”>2</result> <result foo=”bar”>12</result> <result foo=”bar”>20</result> <result foo=”bar”>1</result> <result foo=”bar”>11</result> </results> </results> </results> </query> </query> </query>
  89. Super-secret Filters • Xpath() • Regex() • ... there are more I can’t remember
  90. I/U/D
  91. I/U/D • Personally, I like calling it DUI
  92. I/U/D • Personally, I like calling it DUI • I’m always developing under the influence
  93. I/U/D • Personally, I like calling it DUI • I’m always developing under the influence • Insert / Update / Delete tables
  94. Just like SQL except... • INSERT - no where clause. period. • UPDATE - only remote keys • DELETE - only remote keys
  95. INSERT INTO wordpress.post (title, description, blogurl, username, password) VALUES ("Test Title", "This is a test body", "http://yqltest.wordpress.com", "yqltestuser", "password");
  96. It really is like SQL.
  97. Building Tables
  98. From this
  99. To This
  100. Tom Hughes-Croucher @sh1mmer croucher@yahoo-inc.com

×