javascript and boss- open hack day brazil

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.

... oh alright then ...

Because

Donkeys

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}

{"ysearchresponse":{"responsecode":"200","nextpage":"\/ysearch\/web\/v1\/donkeys?format=json&appid=[...]&start=10","totalhits":"492215","deephits":"15700000","count":"10","start":"0","resultset_web":[{"abstract":"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>","clickurl":"http:\/\/lrd.yahooapis.com\/_ylc=X3oDMTU4b2NoaDR2BF9TAzIwMjMxNTI3MDIEYXBwaWQDVFg2YjRYSFYzNEVuUFhXMHNZRXI1MWhQMXBuNU84S0FHcy5MUVNYZXIxWjdSbW1WclpvdXo1U3Z5WGtXc1ZrLQRwb3MDMARzZXJ2aWNlA1lTZWFyY2hXZWIEc2xrA3RpdGxlBHNyY3B2aWQDR3lDaEgwU081cTlmSktUNG1ndTVUUUJNdlNjaS4wa1ZUVndBQVF5Sw--\/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=founddonkeys&appid={id}

founddonkeys({"ysearchresponse":{"responsecode":"200","nextpage":"\/ysearch\/web\/v1\/donkeys?format=json&callback=founddonkeys&appid=TX6b4XHV34EnPXW0sYEr51hP1pn5O8KAGs.LQSXer1Z7RmmVrZouz5SvyXkWsVk-&start=10","totalhits":"492215","deephits":"15700000","count":"10","start":"0","resultset_web":[{"abstract":"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>","clickurl":"http:\/\/lrd.yahooapis.com\/_ylc=X3oDMTU4cG05cXJwBF9TAzIwMjMxNTI3MDIEYXBwaWQDVFg2YjRYSFYzNEVuUFhXMHNZRXI1MWhQMXBuNU84S0FHcy5MUVNYZXIxWjdSbW1WclpvdXo1U3Z5WGtXc1ZrLQRwb3MDMARzZX

All you then need to do is put this url in a script node and

write the founddonkeys function:

<div id="searchresults"></div> <script type="text/javascript"> 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(results); } </script> <script type="text/javascript" charset="utf-8" src="http://boss.yahooapis.com/ysearch/web/v1/donkeys?format=json&callback=founddonkeys&appid=xxx"></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="searches"> <li><a href="http://search.yahoo.com/search?va=donkeys"> Search for Donkeys </a> </li> <li><a href="http://search.yahoo.com/search?va=kittens"> Search for kittens </a> </li></ul><div id="searchresults"></div>

<script type="text/javascript" charset="utf-8"> 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...

Christian Heilmann | http://wait-till-i.com | twitter: codepo8

Obrigado!