0
YQL
whY QL?
dev
dev
dev
dev
dev
dev
dev
dev
dev
dev
dev
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
var map = new
          YMap(document.getElementById('map'));
          …
dev       var currentGeoPoint = new
          YG...
var map = new
          YMap(document.getElementById('map'));
          …
dev       var currentGeoPoint = new
          YG...
var map = new
      YMap(document.getElementById('map'));
      …
dev   var currentGeoPoint = new
      YGeoPoint( _c.Lat,...
dev




      YQL
dev




      YQL
dev



       Bindings




      YQL
Demo time
http://developer.yahoo.com/yql/console/
Exercise 1

• write a query to search the web for “free
  wifi” Washington DC
• find photos of kittens on flickr that were
  ...
Solutions 1
• select * from search.web where query =
  '"washington dc" free wifi'
• select * from flickr.photos.search wher...
Demo time part deux
  http://developer.yahoo.com/yql/console/
Exercise 2

• Get my (“sh1mmer”) twitter stream
• Find articles about Obama in the New York
  Times
• Google, Bing and Yah...
Solutions 2
•   select * from twitter.user.timeline where id =
    "sh1mmer"
•   select * from nyt.article.search where qu...
YQL in Practice
20 tiny steps to a working application

             You’ll need:
               Firefox
               Fi...
Step 1.
Login to the console with your Yahoo! login
  http://developer.yahoo.com/yql/console
Step 2.
 Find the statement box and
run the first query with test.
Step 3.
Check out the formatted view.
Step 4.
Run the statement “desc html”
Step 5.
    Find the keys,
note the required keys.
Step 6.
               Get some HTML:
  select * from html where url = "http://
hubblesite.org/gallery/album/the_universe"
Step 7.
 Check out the result.
See the HTML in there?
Step 8.
Open http://hubblesite.org/gallery/album/the_universe
                      in Firefox.
Right click on a thumbnail...
Step 9.
    Find the element in Firebug.
Right click and select “Copy XPath”
Step 10.
Add and xpath = "" to your query.
  Paste in the XPath from Firebug
Step 11.
Test your statement and
   refine your XPath.
Step 12.
Add limit 10 to your statement
Step 13.
      Let’s get out of the console.
Copy the “Rest Query” url into a new tab
Step 14.
        Let’s embed this in a web page.
            Download the files from
http://github.com/sh1mmer/dotnet-yql-t...
Step 15.
               Add
  <script type="text/javascript"
src="yql_js_widget.js"></script>
        to your HTML page.
Step 16.
                        Add some style:
<style type="text/css">
li.imgCnt{ list-style: none; background:#000000; ...
Step 17.
Add another script node.
   Add config = {};
Step 18.
         Format the output:
var format = '<li class="imgCnt">
<img src="{src}" alt="{alt}"></li>';
Step 19.
          Add you query;
var yqlQuery = "" and add your query.
Step 20.
Add the render code:

yqlWidget.push(yqlQuery,config,format,'widge
tContainer');
yqlWidget.render();
Now in YUI 3
<script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></
    script>

    <script>

    YUI({
    //Last Galle...
Advanced
                YQL
Advanced Queries, I/U/D, Open Tables and Using YQL
                  with JavaScript
Basics
select * from {table} where {key1} =
"{value1}" and {key2} = {value2}



select * from flickr.photos.search where te...
Remote vs. Local
select
     *
     from
     flickr.photos.search
     where
     text = "kittens"
     and
     tags = "domokun"

Remote
select
     *
     from
     flickr.photos.search
     where
     text = "kittens"
     and
     tags = "domokun"

Remote
select
     *
     from
     flickr.photos.search
     where
     text = "kittens"
     and
     tags = "domokun"

Remote
desc {table}
Local
select * from flickr.photos.search where text =
 "kittens" and tags = "domokun" and farm = 4
Limits and Paging
select * from flickr.photos.search where text =
"kittens" and tags = "domokun" and farm = 4 limit 10
WTF?!
select * from flickr.photos.search(10) where text =
   "kittens" and tags = "domokun" and farm = 4
OMG SRLY WTF?!
select * from flickr.photos.search(20) where text =
   "kittens" and tags = "domokun" and farm = 4
Ooo! 6 results... right...
select * from flickr.photos.search(0) where text =
"kittens" and tags = "domokun" and farm = 4 limit 10
Limit Summary

• limit 10 - give me max 10 results from the
  data you have
• {table}(10) - get ten results from server
• ...
Offset
select * from {table} (10) where foo = "bar" offset 10

                         vs.

   select * from {table} (10,10) whe...
select * from {table} (10) where foo = "bar" offset 10




      <results>
        <result foo=”bar”>1</result>         <r...
select * from {table} (10,10) where foo = "bar"




            <results>
              <result foo=”bar”>11</result>
    ...
Inner Queries
select * from {table1}
           where
         {key1} in
(select id from {table2});
select * from flickr.photos.info
              where
           photo_id in
            (select id
   from flickr.photos.sea...
Multi-key
select * from {table1}
              where
       ({key1}, {key2}) in
(select foo, bar from {table2});
select * from flickr.places
                        where
                     (lat, lon) in
        (select match1, match2...
Filters
select * from {table}(20) |
     sort(field=”foo”,
  descending = “true”) |
        truncate 10
Filters are always
applied last, in order
select * from {table}(20) | sort(field=”foo”, descending = “true”) | truncate 10




        <results>                     ...
Super-secret Filters

• Xpath()
• Regex()
• ... there are more I can’t remember
I/U/D
I/U/D

• Personally, I like calling it DUI
I/U/D

• Personally, I like calling it DUI
• I’m always developing under the influence
I/U/D

• Personally, I like calling it DUI
• I’m always developing under the influence
• Insert / Update / Delete tables
Just like SQL except...

• INSERT - no where clause. period.
• UPDATE - only remote keys
• DELETE - only remote keys
INSERT INTO wordpress.post
    (title, description, blogurl,
  username, password) VALUES
("Test Title", "This is a test b...
It really is like SQL.
Building Tables
From this
To This
Tom Hughes-Croucher
          @sh1mmer
    croucher@yahoo-inc.com
YQL Tutorial
YQL Tutorial
Upcoming SlideShare
Loading in...5
×

YQL Tutorial

6,120

Published on

My 3 hour YQL tutorial deck from JSConf

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,120
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
123
Comments
1
Likes
10
Embeds 0
No embeds

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 of "YQL Tutorial"

    1. 1. YQL
    2. 2. whY QL?
    3. 3. dev
    4. 4. dev
    5. 5. dev
    6. 6. dev
    7. 7. dev
    8. 8. dev
    9. 9. dev
    10. 10. dev
    11. 11. dev
    12. 12. dev
    13. 13. dev
    14. 14. var map = new YMap(document.getElementById('map')); … dev var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon ); map.addMarker(currentGeoPoint); …
    15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. dev YQL
    26. 26. dev YQL
    27. 27. dev Bindings YQL
    28. 28. Demo time http://developer.yahoo.com/yql/console/
    29. 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. 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. 31. Demo time part deux http://developer.yahoo.com/yql/console/
    32. 32. Exercise 2 • Get my (“sh1mmer”) twitter stream • Find articles about Obama in the New York Times • Google, Bing and Yahoo for dogs
    33. 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. 34. YQL in Practice 20 tiny steps to a working application You’ll need: Firefox Firebug Text editor
    35. 35. Step 1. Login to the console with your Yahoo! login http://developer.yahoo.com/yql/console
    36. 36. Step 2. Find the statement box and run the first query with test.
    37. 37. Step 3. Check out the formatted view.
    38. 38. Step 4. Run the statement “desc html”
    39. 39. Step 5. Find the keys, note the required keys.
    40. 40. Step 6. Get some HTML: select * from html where url = "http:// hubblesite.org/gallery/album/the_universe"
    41. 41. Step 7. Check out the result. See the HTML in there?
    42. 42. Step 8. Open http://hubblesite.org/gallery/album/the_universe in Firefox. Right click on a thumbnail and click “Inspect Element”
    43. 43. Step 9. Find the element in Firebug. Right click and select “Copy XPath”
    44. 44. Step 10. Add and xpath = "" to your query. Paste in the XPath from Firebug
    45. 45. Step 11. Test your statement and refine your XPath.
    46. 46. Step 12. Add limit 10 to your statement
    47. 47. Step 13. Let’s get out of the console. Copy the “Rest Query” url into a new tab
    48. 48. Step 14. Let’s embed this in a web page. Download the files from http://github.com/sh1mmer/dotnet-yql-tutorial
    49. 49. Step 15. Add <script type="text/javascript" src="yql_js_widget.js"></script> to your HTML page.
    50. 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. 51. Step 17. Add another script node. Add config = {};
    52. 52. Step 18. Format the output: var format = '<li class="imgCnt"> <img src="{src}" alt="{alt}"></li>';
    53. 53. Step 19. Add you query; var yqlQuery = "" and add your query.
    54. 54. Step 20. Add the render code: yqlWidget.push(yqlQuery,config,format,'widge tContainer'); yqlWidget.render();
    55. 55. Now in YUI 3
    56. 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. 57. Advanced YQL Advanced Queries, I/U/D, Open Tables and Using YQL with JavaScript
    58. 58. Basics select * from {table} where {key1} = "{value1}" and {key2} = {value2} select * from flickr.photos.search where text = "kittens" and tags = "domokun"
    59. 59. Remote vs. Local
    60. 60. select * from flickr.photos.search where text = "kittens" and tags = "domokun" Remote
    61. 61. select * from flickr.photos.search where text = "kittens" and tags = "domokun" Remote
    62. 62. select * from flickr.photos.search where text = "kittens" and tags = "domokun" Remote
    63. 63. desc {table}
    64. 64. Local
    65. 65. select * from flickr.photos.search where text = "kittens" and tags = "domokun" and farm = 4
    66. 66. Limits and Paging
    67. 67. select * from flickr.photos.search where text = "kittens" and tags = "domokun" and farm = 4 limit 10
    68. 68. WTF?!
    69. 69. select * from flickr.photos.search(10) where text = "kittens" and tags = "domokun" and farm = 4
    70. 70. OMG SRLY WTF?!
    71. 71. select * from flickr.photos.search(20) where text = "kittens" and tags = "domokun" and farm = 4
    72. 72. Ooo! 6 results... right...
    73. 73. select * from flickr.photos.search(0) where text = "kittens" and tags = "domokun" and farm = 4 limit 10
    74. 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. 75. Offset
    76. 76. select * from {table} (10) where foo = "bar" offset 10 vs. select * from {table} (10,10) where foo = "bar"
    77. 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. 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. 79. Inner Queries
    80. 80. select * from {table1} where {key1} in (select id from {table2});
    81. 81. select * from flickr.photos.info where photo_id in (select id from flickr.photos.search where text="kitten")
    82. 82. Multi-key
    83. 83. select * from {table1} where ({key1}, {key2}) in (select foo, bar from {table2});
    84. 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. 85. Filters
    86. 86. select * from {table}(20) | sort(field=”foo”, descending = “true”) | truncate 10
    87. 87. Filters are always applied last, in order
    88. 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. 89. Super-secret Filters • Xpath() • Regex() • ... there are more I can’t remember
    90. 90. I/U/D
    91. 91. I/U/D • Personally, I like calling it DUI
    92. 92. I/U/D • Personally, I like calling it DUI • I’m always developing under the influence
    93. 93. I/U/D • Personally, I like calling it DUI • I’m always developing under the influence • Insert / Update / Delete tables
    94. 94. Just like SQL except... • INSERT - no where clause. period. • UPDATE - only remote keys • DELETE - only remote keys
    95. 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. 96. It really is like SQL.
    97. 97. Building Tables
    98. 98. From this
    99. 99. To This
    100. 100. Tom Hughes-Croucher @sh1mmer croucher@yahoo-inc.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×