JavaScript and BOSS- Open Hack Day Brazil
Upcoming SlideShare
Loading in...5
×
 

JavaScript and BOSS- Open Hack Day Brazil

on

  • 8,559 views

A quick introduction to the BOSS REST API and how to use it in JavaScript using YUI3. Make sure to also download the code examples:

A quick introduction to the BOSS REST API and how to use it in JavaScript using YUI3. Make sure to also download the code examples:
http://icant.co.uk/stuff/bosscodebr.zip

Statistics

Views

Total Views
8,559
Views on SlideShare
8,396
Embed Views
163

Actions

Likes
7
Downloads
94
Comments
1

14 Embeds 163

http://developer.yahoo.net 80
http://www.wait-till-i.com 22
http://developer.yahoo.com 16
http://www.slideshare.net 14
http://icant.co.uk 10
http://brhackday.pbworks.com 7
http://brhackday.pbwiki.com 5
http://static.slideshare.net 2
http://www.hanrss.com 2
http://chubbard.wikispaces.com 1
http://daniel-27.blogspot.com 1
http://1rbat.blogspot.com 1
http://student.kuleuven.be 1
http://alpha.spoonfeedr.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/yT1SNP
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript and BOSS- Open Hack Day Brazil JavaScript and BOSS- Open Hack Day Brazil Presentation Transcript

  • Who’s the BOSS? Christian Heilmann, Sao Paulo, Brazil, 06/11/2008 (brhackday08)
  • I’m Chris. Hello I am Chris
  • I live in London, England
  • But originally I am German
  • Doesn’t matter though, both countries keep losing against you playing football...
  • I like easy access to things.
  • I also like easy Math.
  • >
  • Here’s what I can help you with during hack day: JavaScript, Accessibility, YUI, CSS, APIs, Flickr, Delicious ...
  • Today I am here to tell you quickly something about BOSS.
  • So who’s the BOSS then?
  • BOSS is Build Your Own Search Service: http://developer.yahoo.com/search/boss/
  • To use it, you need a Application ID: https://developer.yahoo.com/wsregapp/
  • And there is full documentation available: http://developer.yahoo.com/search/boss/boss_guide/
  • Happy Hacking!
  • ... oh alright then ...
  • You can get the code examples I will show here: http://icant.co.uk/stuff/bosscodebr.zip
  • Say you want to search the web for donkeys.
  • Because Donkeys alright then ... ... oh Rock!
  • Using BOSS you can do this with a REST API and display the results any way you want!
  • The REST API: boss.yahooapis.com/ysearch/{type}/v1/{search}
  • The REST API: boss.yahooapis.com/ysearch/{type}/v1/{search} type is what you want to search: web: the interwebs news: new stuff images: pictures
  • The REST API: boss.yahooapis.com/ysearch/{type}/v1/{search} search is the term to look for (url-encoded) Put “” around terms to ensure the right order, f.e. “donkey fur” (you don’t want to see cats, do you?) Filter with a -, f.e. donkey -shrek Restrict to a site using site:, f.e. donkey site:flickr.com
  • The REST API: boss.yahooapis.com/ysearch/{type}/v1/{search} Other parameters: appid: your app ID (needed) count: amount of results start: where to start the counting region / lang: country and language format: xml or json sites: restrict to certain sites (comma separated)
  • Web search REST API: boss.yahooapis.com/ysearch/web/v1/{search} Extra parameters: filter: To filter out nasties, use filter=-porn-hate type: to search different types. You can use html, text, pdf, xl, msword, ppt or groups like msoffice and nonhtml. You can also do a type=msoffice,-xl
  • Image search REST API: boss.yahooapis.com/ysearch/images/v1/{search} Extra parameters: filter: no nudies dimensions: all, small, medium, large, wallpaper, widewallpaper refererurl: all images in that url url: image at that url
  • News search REST API: boss.yahooapis.com/ysearch/news/v1/{search} Extra parameters: age: how old the news are in days. Last five days would be “5d”
  • There are restrictions how to display results and information as to what data comes back.
  • For this, read the guide! http://developer.yahoo.com/search/boss/boss_guide/
  • Everybody Duck!
  • There will be code
  • The easiest way to use BOSS is using JavaScript.
  • http://boss.yahooapis.com/ ysearch/web/v1/donkeys? format=json&appid={id}
  • {quot;ysearchresponsequot;: {quot;responsecodequot;:quot;200quot;,quot;nextpagequot;:quot;/ysearch/web/ v1/donkeys? format=json&appid=[...]&start=10quot;,quot;totalhitsquot;:quot;492 215quot;,quot;deephitsquot;:quot;15700000quot;,quot;countquot;:quot;10quot;,quot;startquot;:quot;0 quot;,quot;resultset_webquot;:[{quot;abstractquot;:quot;Hyperlinked description of the domesticated mammal discussing its appearance, relationship to horses, economic <b>...</b> horses and <b>donkeys</b> were brought back <b>...</b>quot;,quot;clickurlquot;:quot;http:// lrd.yahooapis.com/ _ylc=X3oDMTU4b2NoaDR2BF9TAzIwMjMxNTI3MDIEYXBwaWQDV Fg2YjRYSFYzNEVuUFhXMHNZRXI1MWhQMXBuNU84S0FHcy5MUVN YZXIxWjdSbW1WclpvdXo1U3Z5WGtXc1ZrLQRwb3MDMARzZXJ2a WNlA1lTZWFyY2hXZWIEc2xrA3RpdGxlBHNyY3B2aWQDR3lDaEg wU081cTlmSktUNG1ndTVUUUJNdlNjaS4wa1ZUVndBQVF5Sw-- /SIG=11820sato/**http%3A//en.wikipedia.org
  • To use this across domains, simply define a callback parameter:
  • http://boss.yahooapis.com/ ysearch/web/v1/donkeys? format=json&callback=foundd onkeys&appid={id}
  • founddonkeys({quot;ysearchresponsequot;: {quot;responsecodequot;:quot;200quot;,quot;nextpagequot;:quot;/ysearch/web /v1/donkeys? format=json&callback=founddonkeys&appid=TX6b4XHV3 4EnPXW0sYEr51hP1pn5O8KAGs.LQSXer1Z7RmmVrZouz5SvyX kWsVk- &start=10quot;,quot;totalhitsquot;:quot;492215quot;,quot;deephitsquot;:quot;15700 000quot;,quot;countquot;:quot;10quot;,quot;startquot;:quot;0quot;,quot;resultset_webquot;: [{quot;abstractquot;:quot;Hyperlinked description of the domesticated mammal discussing its appearance, relationship to horses, economic <b>...</b> horses and <b>donkeys</b> were brought back <b>...</b>quot;,quot;clickurlquot;:quot;http:// lrd.yahooapis.com/ _ylc=X3oDMTU4cG05cXJwBF9TAzIwMjMxNTI3MDIEYXBwaWQD VFg2YjRYSFYzNEVuUFhXMHNZRXI1MWhQMXBuNU84S0FHcy5MU VNYZXIxWjdSbW1WclpvdXo1U3Z5WGtXc1ZrLQRwb3MDMARzZX
  • All you then need to do is put this url in a script node and write the founddonkeys function:
  • <div id=quot;searchresultsquot;></div> <script type=quot;text/javascriptquot;> function founddonkeys(o){ var donkeys = o.ysearchresponse.resultset_web; var results = document.createElement('ul'); for(var i=0,j=donkeys.length;i<j;i++){ var item = document.createElement('li'); var link = document.createElement('a'); var abstract = document.createElement('p'); link.setAttribute('href',donkeys[i].clickurl); link.innerHTML = donkeys[i].title; item.appendChild(link); abstract.innerHTML = donkeys[i].abstract; item.appendChild(abstract); results.appendChild(item); }
  • document.getElementById('searchresults').appendChild(r esults); } </script> <script type=quot;text/javascriptquot; charset=quot;utf-8quot; src=quot;http://boss.yahooapis.com/ysearch/web/v1/donkeys? format=json&callback=founddonkeys&appid=xxxquot;></script>
  • Two problems though:
  • First of all – without JavaScript there are no donkeys!
  • Secondly – you can only find donkeys!
  • The solution: Event Handling and dynamic script generation.
  • <p>Warning: this is terrible code, USE A LIBRARY INSTEAD!</p> <ul id=quot;searchesquot;> <li><a href=quot;http://search.yahoo.com/search?va=donkeysquot;> Search for Donkeys </a> </li> <li><a href=quot;http://search.yahoo.com/search?va=kittensquot;> Search for kittens </a> </li> </ul> <div id=quot;searchresultsquot;></div>
  • <script type=quot;text/javascriptquot; charset=quot;utf-8quot;> function founddonkeys(o){ var donkeys = o.ysearchresponse.resultset_web; var results = document.createElement('ul'); for(var i=0,j=donkeys.length;i<j;i++){ var item = document.createElement('li'); var link = document.createElement('a'); var abstract = document.createElement('p'); link.setAttribute('href',donkeys[i].clickurl); link.innerHTML = donkeys[i].title; item.appendChild(link); abstract.innerHTML = donkeys[i].abstract; item.appendChild(abstract); results.appendChild(item); } var resultsbox = document.getElementById('searchresults'); resultsbox.innerHTML = ''; resultsbox.appendChild(results); } var APIkey = 'TX6b4XHV34EnPXW0sYEr51hP1pn5O8KAGs'+ '.LQSXer1Z7RmmVrZouz5SvyXkWsVk-'; var searchlinks = document.getElementById('searches').getElementsByTagName('a'); for(var i=0;searchlinks[i];i++){
  • var APIkey = 'TX6b4XHV34EnPXW0sYEr51hP1pn5O8KAGs'+ '.LQSXer1Z7RmmVrZouz5SvyXkWsVk-'; var searchlinks = document.getElementById('searches'). getElementsByTagName('a'); for(var i=0;searchlinks[i];i++){ searchlinks[i].onclick = function(){ var searchterm = this.href.split('va=')[1]; var url = 'http://boss.yahooapis.com/ysearch/web/v1/' + searchterm + '?format=json&' + 'callback=founddonkeys' + '&appid=' + APIkey var s = document.createElement('script'); s.setAttribute('type','text/javascript'); s.setAttribute('src',url); document.getElementsByTagName('head')[0].appendChild(s); return false; } } </script>
  • *click*
  • Using the YUI library (YUI3 JavaScript and CSS grids) you can easily make this much cooler:
  • Now, that was JavaScript, what about the server side magic and BOSS?
  • Over to my colleague for some hot Python action...
  • Obrigado! Christian Heilmann | http://wait-till-i.com | twitter: codepo8