JavaScript and BOSS- Open Hack Day Brazil

56
Who’s the BOSS? Christian Heilmann, Sao Paulo, Brazil, 06/11/2008 (brhackday08)

description

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

Transcript of JavaScript and BOSS- Open Hack Day Brazil

Page 1: JavaScript and BOSS- Open Hack Day Brazil

Who’s the BOSS?

Christian Heilmann, Sao Paulo, Brazil, 06/11/2008 (brhackday08)

Page 2: JavaScript and BOSS- Open Hack Day Brazil

I’m Chris.

Hello I am Chris

Page 3: JavaScript and BOSS- Open Hack Day Brazil

I live in London, England

Page 4: JavaScript and BOSS- Open Hack Day Brazil

But originally I am German

Page 5: JavaScript and BOSS- Open Hack Day Brazil

Doesn’t matter though, both countries keep losing against

you playing football...

Page 6: JavaScript and BOSS- Open Hack Day Brazil

I like easy access to things.

Page 7: JavaScript and BOSS- Open Hack Day Brazil

I also like easy Math.

Page 8: JavaScript and BOSS- Open Hack Day Brazil

>

Page 9: JavaScript and BOSS- Open Hack Day Brazil

Here’s what I can help you with during hack day:

JavaScript, Accessibility, YUI, CSS, APIs, Flickr, Delicious ...

Page 10: JavaScript and BOSS- Open Hack Day Brazil

Today I am here to tell you quickly something about

BOSS.

Page 11: JavaScript and BOSS- Open Hack Day Brazil

So who’s the BOSS then?

Page 12: JavaScript and BOSS- Open Hack Day Brazil

BOSS is Build Your Own Search Service:

http://developer.yahoo.com/search/boss/

Page 13: JavaScript and BOSS- Open Hack Day Brazil

To use it, you need a Application ID:

https://developer.yahoo.com/wsregapp/

Page 14: JavaScript and BOSS- Open Hack Day Brazil

And there is full documentation available:

http://developer.yahoo.com/search/boss/boss_guide/

Page 15: JavaScript and BOSS- Open Hack Day Brazil

Happy Hacking!

Page 16: JavaScript and BOSS- Open Hack Day Brazil

... oh alright then ...

Page 17: JavaScript and BOSS- Open Hack Day Brazil

You can get the code examples I will show here:

http://icant.co.uk/stuff/bosscodebr.zip

Page 18: JavaScript and BOSS- Open Hack Day Brazil

Say you want to search the web for donkeys.

Page 19: JavaScript and BOSS- Open Hack Day Brazil

... oh alright then ...

Because

Donkeys

Rock!

Page 20: JavaScript and BOSS- Open Hack Day Brazil

Using BOSS you can do this with a REST API and display

the results any way you want!

Page 22: JavaScript and BOSS- Open Hack Day Brazil

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

Page 23: JavaScript and BOSS- Open Hack Day Brazil

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

Page 24: JavaScript and BOSS- Open Hack Day Brazil

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)

Page 25: JavaScript and BOSS- Open Hack Day Brazil

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

Page 26: JavaScript and BOSS- Open Hack Day Brazil

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

Page 27: JavaScript and BOSS- Open Hack Day Brazil

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”

Page 28: JavaScript and BOSS- Open Hack Day Brazil

There are restrictions how to display results and

information as to what data comes back.

Page 29: JavaScript and BOSS- Open Hack Day Brazil

For this, read the guide!http://developer.yahoo.com/search/boss/boss_guide/

Page 30: JavaScript and BOSS- Open Hack Day Brazil

Everybody Duck!

Page 31: JavaScript and BOSS- Open Hack Day Brazil

There will be code

Page 32: JavaScript and BOSS- Open Hack Day Brazil

The easiest way to use BOSS is using JavaScript.

Page 34: JavaScript and BOSS- Open Hack Day Brazil

{"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\

Page 35: JavaScript and BOSS- Open Hack Day Brazil

To use this across domains, simply define a callback

parameter:

Page 37: JavaScript and BOSS- Open Hack Day Brazil

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

Page 38: JavaScript and BOSS- Open Hack Day Brazil

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

write the founddonkeys function:

Page 39: JavaScript and BOSS- Open Hack Day Brazil

<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); }

Page 41: JavaScript and BOSS- Open Hack Day Brazil
Page 42: JavaScript and BOSS- Open Hack Day Brazil

Two problems though:

Page 43: JavaScript and BOSS- Open Hack Day Brazil

First of all – without JavaScript there are no donkeys!

Page 44: JavaScript and BOSS- Open Hack Day Brazil

Secondly – you can only find donkeys!

Page 45: JavaScript and BOSS- Open Hack Day Brazil

The solution: Event Handling and dynamic script

generation.

Page 46: JavaScript and BOSS- Open Hack Day Brazil
Page 47: JavaScript and BOSS- Open Hack Day Brazil

<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>

Page 48: JavaScript and BOSS- Open Hack Day Brazil

<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++){

Page 49: JavaScript and BOSS- Open Hack Day Brazil

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>

Page 50: JavaScript and BOSS- Open Hack Day Brazil

*click*

Page 51: JavaScript and BOSS- Open Hack Day Brazil

Using the YUI library (YUI3 JavaScript and CSS grids) you

can easily make this much cooler:

Page 52: JavaScript and BOSS- Open Hack Day Brazil
Page 53: JavaScript and BOSS- Open Hack Day Brazil
Page 54: JavaScript and BOSS- Open Hack Day Brazil

Now, that was JavaScript, what about the server side

magic and BOSS?

Page 55: JavaScript and BOSS- Open Hack Day Brazil

Over to my colleague for some hot Python action...

Page 56: JavaScript and BOSS- Open Hack Day Brazil

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

Obrigado!