Pipes and Google Mashup Editor

10,709 views

Published on

Building a simple pipe to display job data from Guardian and Times on a map

Published in: Technology, News & Politics
3 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
10,709
On SlideShare
0
From Embeds
0
Number of Embeds
195
Actions
Shares
0
Downloads
202
Comments
3
Likes
10
Embeds 0
No embeds

No notes for slide

Pipes and Google Mashup Editor

  1. 1. Yahoo! Pipes and Google Mashup Editor
  2. 2. Yahoo! Pipes What is it?
  3. 3. Yahoo! Pipes <ul><li>Yahoo! Says: </li></ul><ul><ul><ul><li>“Rewire the web” </li></ul></ul></ul><ul><ul><ul><li>and </li></ul></ul></ul><ul><ul><ul><li>“Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.” </li></ul></ul></ul>
  4. 4. Yahoo! Pipes <ul><li>ReadWriteWeb says: </li></ul><ul><ul><ul><li>“...with pipes, the Web essentially becomes a giant database that can be queried and remixed in any number of ways” </li></ul></ul></ul>
  5. 5. Yahoo! Pipes <ul><li>Why would I want to do that? </li></ul>
  6. 6. Yahoo! Pipes <ul><li>Why would I want to do that? </li></ul><ul><ul><li>Got two or more sources of information you want to use together? </li></ul></ul>
  7. 7. Yahoo! Pipes <ul><li>Why would I want to do that? </li></ul><ul><ul><li>Got two or more sources of information you want to use together? </li></ul></ul><ul><ul><li>Got information in different formats? </li></ul></ul>
  8. 8. Yahoo! Pipes <ul><li>Why would I want to do that? </li></ul><ul><ul><li>Got two or more sources of information you want to use together? </li></ul></ul><ul><ul><li>Got information in different formats? </li></ul></ul><ul><ul><li>Got an idea but not sure how to implement it? </li></ul></ul>
  9. 9. Yahoo! Pipes <ul><li>Benefits...? </li></ul>
  10. 10. Yahoo! Pipes <ul><li>Benefits...? </li></ul><ul><ul><li>Easy to use tools provided </li></ul></ul>
  11. 11. Yahoo! Pipes <ul><li>Benefits...? </li></ul><ul><ul><li>Easy to use tools provided </li></ul></ul><ul><ul><li>Publishing, hosting and distribution taken care of </li></ul></ul>
  12. 12. Yahoo! Pipes <ul><li>Benefits...? </li></ul><ul><ul><li>Easy to use tools provided </li></ul></ul><ul><ul><li>Publishing, hosting and distribution taken care of </li></ul></ul><ul><ul><li>No (or very little) coding necessary </li></ul></ul>
  13. 13. Yahoo! Pipes <ul><li>Let's make a pipe! </li></ul><ul><ul><li>http://pipes.yahoo.com </li></ul></ul>
  14. 15. Yahoo! Pipes <ul><li>Signup </li></ul><ul><li>or </li></ul><ul><li>Login using your Yahoo! ID or Flickr login </li></ul>
  15. 17. Yahoo! Pipes <ul><li>Create your pipe graphically </li></ul><ul><li>Drag and drop modules to build a pipe </li></ul>
  16. 19. Yahoo! Pipes <ul><li>Start with the feed source(s) </li></ul><ul><li>Work your way towards the pipe output </li></ul>
  17. 20. Yahoo! Pipes <ul><li>Let's build a pipe that: </li></ul><ul><ul><li>gets job data from various sources </li></ul></ul><ul><ul><li>displays the information in an interesting way </li></ul></ul><ul><ul><li>we can publish for others to use </li></ul></ul>
  18. 24. Yahoo! Pipes <ul><li>Copy the RSS URL from the browser address bar </li></ul><ul><li>Paste it into the Feed module in your pipe </li></ul>
  19. 26. Yahoo! Pipes <ul><li>Connect your Feed module to your pipe output </li></ul><ul><li>Ta-da! You've made a working pipe. </li></ul>
  20. 28. Yahoo! Pipes <ul><li>But, that's not much better than the original feed </li></ul><ul><li>Let's add another source </li></ul>
  21. 33. Yahoo! Pipes <ul><li>Add a Union module </li></ul><ul><li>Combines up to 5 different feeds </li></ul>
  22. 35. Yahoo! Pipes <ul><li>Filter results </li></ul><ul><ul><li>Ensure we only get “developer” roles </li></ul></ul>
  23. 38. Yahoo! Pipes <ul><li>Filter results </li></ul><ul><ul><li>Ensure we only get “developer” roles </li></ul></ul><ul><ul><li>Add a filter rule that allows only this subset </li></ul></ul>
  24. 39. Yahoo! Pipes <ul><li>Filter results </li></ul><ul><ul><li>Ensure we only get “developer” roles </li></ul></ul><ul><ul><li>Add a filter rule that allows only this subset </li></ul></ul><ul><ul><li>Can we check what we're doing as we go along? </li></ul></ul>
  25. 40. Yahoo! Pipes <ul><li>Yes, use the debugger pane </li></ul><ul><ul><li>Gives us a quick preview of the pipe output </li></ul></ul>
  26. 41. Yahoo! Pipes <ul><li>Yes, use the debugger pane </li></ul><ul><ul><li>Gives us a quick preview of the pipe output </li></ul></ul><ul><ul><li>Here we see how it has reduced the result set from 55 items to 24 items </li></ul></ul>
  27. 44. Yahoo! Pipes <ul><li>Saving the pipe allows us to then run it </li></ul>
  28. 47. Yahoo! Pipes <ul><li>Great. So now we have a combined feed of jobs from The Guardian and The Times. </li></ul><ul><li>What else can we do with it? </li></ul>
  29. 49. Yahoo! Pipes <ul><li>Create a badge </li></ul><ul><ul><li>adds a widget to blogging systems like Blogger, TypePad, Wordpress </li></ul></ul><ul><ul><li>or </li></ul></ul><ul><ul><li>provides a <script> tag to paste into any web page </li></ul></ul>
  30. 52. Yahoo! Pipes <ul><li>Create a widget to add to </li></ul><ul><ul><li>My Yahoo! </li></ul></ul><ul><ul><li>Google homepage </li></ul></ul><ul><ul><li>Google Reader </li></ul></ul><ul><ul><li>Netvibes </li></ul></ul>
  31. 55. Yahoo! Pipes <ul><li>Get instant or daily email alerts as the feed updates </li></ul><ul><li>Get instant messenger alerts </li></ul><ul><li>Get mobile alerts (USA only, I think) </li></ul>
  32. 57. Yahoo! Pipes <ul><li>Output as JSON </li></ul><ul><ul><li>Lightweight </li></ul></ul><ul><ul><li>Easy for Javascript developers to work with </li></ul></ul>
  33. 59. Yahoo! Pipes <ul><li>Output as RSS </li></ul><ul><ul><li>Use in your favourite newsreader </li></ul></ul><ul><ul><li>Import as data source for Google Mashups Editor </li></ul></ul>
  34. 61. Yahoo! Pipes <ul><li>Pretty useful, hmm? </li></ul><ul><li>But not very exciting. Can we 'make it funky'? </li></ul>
  35. 62. Yahoo! Pipes <ul><li>Let's try and put the jobs on a map </li></ul>
  36. 63. Yahoo! Pipes <ul><li>Let's try and put the jobs on a map </li></ul><ul><li>First, we need to find the location for each job </li></ul>
  37. 65. Yahoo! Pipes <ul><li>Location Extractor is a module which searches the item titles and descriptions for likely place names. </li></ul><ul><li>It then creates a location item containing latitude and longitude information, and outputs it in GeoRSS format for use by other services </li></ul>
  38. 67. Yahoo! Pipes <ul><li>If we run the pipe now, we get a different output </li></ul>
  39. 69. Yahoo! Pipes <ul><li>Again, we can output this in various formats </li></ul><ul><ul><ul><li>Google homepage </li></ul></ul></ul><ul><ul><ul><li>Blogger widget </li></ul></ul></ul>
  40. 72. Yahoo! Pipes <ul><li>But we're still not quite there yet </li></ul><ul><li>I want to present the data in a combined list and map format. </li></ul><ul><li>With integration between the two </li></ul>
  41. 73. Google Mashups Editor (GME) What is it?
  42. 74. Google Mashups Editor (GME) <ul><li>Google says: </li></ul><ul><ul><ul><li>“...an interactive development environment in which you edit, compile, test, and manage your applications” </li></ul></ul></ul><ul><ul><ul><li>“ ...a development environment that allows the user to place interacting modules on a Web page and provide them with data from a variety of feeds” </li></ul></ul></ul>
  43. 75. Google Mashups Editor (GME) <ul><li>Uses standard languages: </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><li>XML </li></ul></ul>
  44. 76. Google Mashups Editor (GME) Unfortunately, it's STILL in closed beta
  45. 77. Google Mashups Editor (GME) But you can request access here: http://code.google.com/support/mashupeditorsignup/
  46. 79. Google Mashups Editor (GME) <ul><li>You write, test and save your files within the editor </li></ul><ul><li>Like Google Docs or Calendar, you can access your projects from anywhere </li></ul>
  47. 81. Google Mashups Editor (GME) <ul><li>Create a new project </li></ul><ul><li>Small set of custom Google tags describe what goes where </li></ul><ul><li>Each Mashup must have at least <gm:page></gm:page> </li></ul>
  48. 83. Google Mashups Editor (GME) <ul><li>Write your page using HTML </li></ul><ul><li>Use Google tags to insert special features </li></ul><ul><li><gm:list> adds a list to the page </li></ul><ul><li>data attribute is where you put your feed </li></ul><ul><ul><ul><li>In our case, the RSS link from our pipe </li></ul></ul></ul>
  49. 86. Google Mashups Editor (GME) <ul><li><gm:map> adds a Google map to the page </li></ul><ul><li>Data attribute can link to the id of an element which already has a data sourced specified </li></ul>
  50. 89. Google Mashups Editor (GME) <ul><li><gm:handleEvent> allows each page element to respond to clicks from another page element </li></ul><ul><li>src attribute should be the id of the element to listen to clicks from </li></ul><ul><li>We'll add one for the list and one for the map </li></ul>
  51. 90. Google Mashups Editor (GME) <ul><li><gm:template> is a chunk of code which page elements can use </li></ul><ul><li>Give it an id <gm:template id=”xxx”> </li></ul><ul><li>Reference the template from a page element using template=”” attribute </li></ul>
  52. 91. Google Mashups Editor (GME) <ul><li><gm:text ref=&quot;atom:title&quot;> access the title element of the current feed item </li></ul><ul><li>NOTE: GME converts RSS to Atom on import </li></ul><ul><li><gm:link ref=&quot;link/@href&quot; label=&quot;link...&quot;/> uses Xpath to find the right link from the feed. </li></ul>
  53. 94. Google Mashups Editor (GME) <ul><li>This app is now publically available at </li></ul><ul><ul><li>http://combinejobs.googlemashups.com/ </li></ul></ul>
  54. 97. Google Mashups Editor (GME) <ul><li>You can now deploy your app as a Google Gadget by using this URL: </li></ul><ul><ul><li>http://combinejobs.googlemashups.com/gadget.xml </li></ul></ul><ul><ul><li>Can be submitted to Google's Gadget Directory </li></ul></ul>
  55. 100. <ul><li>Pipes: http://pipes.yahoo.com </li></ul><ul><li>Blog: http://blog.pipes.yahoo.net/ </li></ul><ul><li>Group: http://discuss.pipes.yahoo.com/ </li></ul><ul><li>Our pipe: http://pipes.yahoo.com/pipes/pipe.info_id=zo_zXlOu3RGJITC4rbQIDg </li></ul><ul><li>GME: http://code.google.com/gme/ </li></ul><ul><li>The Editor: http://editor.googlemashups.com/editor </li></ul><ul><li>Our project: http://combinejobs.googlemashups.com/ </li></ul><ul><li>Search Flickr in German: </li></ul><ul><ul><ul><li>http://pipes.yahoo.com/pipes/pipe.info?_id=3vDET7JJ3RGxD6T_MlrX_Q </li></ul></ul></ul><ul><li>Twitters by hour/day: </li></ul><ul><ul><ul><li>http://pipes.yahoo.com/pipes/pipe.edit?_id=ery0fdqM3RGKlYHC_g6H4A </li></ul></ul></ul><ul><ul><ul><li>http://xefer.com/twitter/kottke </li></ul></ul></ul><ul><li>Houses for sale on Gumtree: </li></ul><ul><ul><ul><li>http://pipes.yahoo.com/pipes/pipe.info?_id=vPQtpfT_2xG8k7axzKky6g </li></ul></ul></ul>

×