Your SlideShare is downloading. ×
  • Like
YQL Tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

YQL Tutorial

  • 5,931 views
Published

My 3 hour YQL tutorial deck from JSConf

My 3 hour YQL tutorial deck from JSConf

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • YQL
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,931
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
115
Comments
1
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide


  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying
  • Lets take an example of a developer trying

























































  • remote keys are shown as keys






































Transcript

  • 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