Showing posts with label Yahoo API. Show all posts
Showing posts with label Yahoo API. Show all posts

Nov 18, 2009

Parsing Errors

While parsing our xml data to display it, our script sometimes used to stop working. This inpredictable behavior was very strange and it was difficult to find the problem. The error occured at the Ebay part. First we thought that it might be a problem with the Ebay server. Monitoring the parsing gave us only a small hint.
It must be a problem with the picture URL from the articles.
Working through the Ebay-response, we realized that tags "title", "currentPrice", "url" are mandatory. Some tags, like the "galleryURL" are not.

<item>
<title>Best 5 LED Bike Bicycle Tail Light Lamp &amp; Bike Holder</title>
<galleryURL>http://thumbs4.ebaystatic.com/pict/3204463049958080_1.jpg</galleryURL>
<viewItemURL>http://cgi.ebay.com/Best-5-LED-Bike-Bicycle-Tail-Light-Lamp-Bike-Holder_W0QQitemZ320446304995QQcmdZViewItemQQptZCycling_Parts_Accessories?hash=item4a9c1692e3</viewItemURL>
...
</item>
For parsing, we use this code:
var text="<table border='1'>";
for (var j=0;j<xmlData.getElementsByTagName("title").length;j++){
//loop for iterating over the item's title, URL, pic, and price
text=text+"<tr><td><a href='"+
//starting a new table row and starting the link
xmlData.getElementsByTagName("viewItemURL")[j].childNodes[0].nodeValue+
//gets the first URL
"'target=_blank>"+xmlData.getElementsByTagName("title")[j].childNodes[0].nodeValue+"</a></td><br />"+
// gets the first Title
"<td><img src="+xmlData.getElementsByTagName("galleryURL")[j].childNodes[0].nodeValue++" /></td>"+
// gets the first pictureURL
"<td>"+xmlData.getElementsByTagName("currentPrice")[j].childNodes[0].nodeValue+"</td></tr>";}
// gets the first Price, loop starts again, or ends.
text=text+"</table>";
// closing HTML table-tag
appDiv=document.getElementById("itemContent");
appDiv.innerHTML=text;

Today we implemented yahoo shopping. While parsing the shopping articles with this code:
for (i=0;i<Json_data.length;i++)
{
textYa=textYa+"<tr><td><a href='"+
//new tablerow, starting link
Json_data[i].Offer.Url+
//getting URL
"'>"+Json_data[i].Offer.ProductName+"</a></td>"
//getting Product Name
+"<td><img src="+Json_data[i].Offer.Thumbnail.Url+" />
//getting pic URL
</td><td>"+Json_data[i].Offer.Price+"</td></tr>";
//getting price
;}
}
textYa=textYa+"</table>";
YahooDiv=document.getElementById("yelpContent");
YahooDiv.innerHTML=textYa;
We had the same problems with this yahoo like we have with Ebay. We discovered that Yahoo Shopping returns not only "Offers" but "Catalogs" with not usable data. Now, before we try to access the data, we check for an Offers-object. If true, we work on. If not, we skip it. Checking for a picture URL works the same way. If it is undefined, we return only a blank.
With yahoo-shopping, we are working on the objects, things are not that easy with Ebay. As we use the getElementsByTagName()-function, we pick out all tags with the given tag-name.
This means that there are no gaps in the galleryURL. If one item does not have an galleryURL, the system takes the next one. In the case that, at least, one article has no galleryURL, the array of Elements is shorter than the array with the title-tags, causing the exception.
The workaround at the moment is to check for access to undefined variables and to avoid this by returning an empty string. It adds entries in the end of the array, if needed.

Maybe one of you has a good idea how to fix this bug. My idea, taking the item-tags and moving through the childs does not work...

Update:
Now, I got things working. Using try-catch parts allows us to insert a galleryURL everytime an exception is catched.
try {
if (items[no].getElementsByTagName("galleryURL")[0].childNodes[0].nodeValue==undefined) {
gal_Url=" ";} else {
gal_Url=items[no].getElementsByTagName("galleryURL")[0].childNodes[0].nodeValue;
}
}
catch (e) {
gal_Url=" ";
}


Code, written in a try-block is treated specially. If an error appears, the compiler does not stop the script, but it goes to the catch-part of the code. An additional option is to use a finally-part to perform some clean-up works that should be performed in the error or in the usual case.

Nov 12, 2009

Getting a Yahoo Pipes Badge

Continuing along the Yahoo Pipes topic, a question was raised as to how to publish a pipe on a website. Based on the documentation for the website I learned this can be accomplished with the help of a Pipes Badge. As stated in the documentation, "A Yahoo! Pipes badge allows you to have Pipes generated content on your blog, website, or social network".

There are three types of badges; a list badge, an image badge, and a map badge. The list badge is used for a simple list of items, description fields, and thumbnails. An image badge shows images present on a feed, displays images as a thumbnail, and description field if one is available. The third badge type is a map badge. If geocoding is available a dragable map is displayed with pin points.

To get a badge all that is required is to open a pipe by logging into yahoo.com and visiting pipes.yahoo.com. Next click the "Get as a badge" wizard seen on the pipe.






Next, select where the badge will be placed. If it's a basic web page select Embed.





Finally, you are presented with the javascript to use on the page which can be copied/pasted into your html file.




Here's how the pipe I created appears on a web page:

Once a pipe is created it's quite simple to integrate it into a web site. I thought this would be much more complicated than it was but after reviewing the documentation and trying it out myself I discovered it's super easy!

Nov 3, 2009

Creating a Simple Yahoo Pipe in Minutes

As a continuation from my last post on Yahoo Pipes I decided to try and create one to see just how simple it is. You have to have some basic knowledge on how to construct code to use it but I must say, it was truly very simple. The Pipe I created converts an RSS feed from German to English. My husband is German so I've been trying to learn as much of the language as I can given his parents do not speak English by reading news at tagesschau.de. It's hard to find the time with my husband to translate what I'm reading so I decided to try using a Pipe to translate the RSS feed for me. Here's how it was created:

Step 1: Add the components

All that is needed is to drag and drop the components from the list on the left. I added Fetch Feed and 2 Loops (each with a translate component). By default the Pipe Output component is automatically created when creating a pipe.




Step 2: Configure the components

In this step I placed the RSS URL into the Fetch Feed component and set the translation from German to English by selecting it from the component selection list.






Step 3: Connect the components

Now for the easiest part, connecting the components. All that you need to do is click on the bottom of one component and then click on the top of the next. It's that simple.



Here's what the finished product looks like:


This took me less than 5 minutes to create. A dubugger also exists and I found it ti also be quite helpful. It was amazingly simple. While the translation isn't perfect, it will at least help me understand what I'm looking at in German. I plan to play around with this more. It really is as easy as 1, 2, 3.

Oct 27, 2009

Yahoo Weather API

For the class project I wanted to implement a weather api to display current and future weather forecasts for a specific location. I was able to find what I needed in the Yahoo weather API. The Yahoo weather API uses a REST interface and returns the requested data in an RSS 2.0/XML 1.0 format. I want to show you how easy it is to implement this API into your own web page.

The first part of implementing Yahoo Weather into your web page is connecting to the Yahoo web service using the REST interface. Using AJAX and the request method (request.open("GET", url, true)), you use the following URL to connect and retrieve the weather data. To get weather for your desired location, insert your desired zip code after "p=".
http://xml.weather.yahoo.com/forecastrss?p=48226. By clicking on the link you will see the weather displayed as an RSS feed. (Remember to use a web proxy to connect to the server when making your AJAX request)

The next part is getting the weather information retrieved from your request into your web page.

1. Create a div element into your .html page.

2. Parse the data and insert the weather information into your div element. Below is the code I have used to insert the weather information into your web page





Code Broken Down:

var xmlDoc = request.responseXML;
This line of code takes the response from the request and converts it into a Document Object Model (DOM) object


var title = xmlDoc.getElementsByTagName('description')[0].firstChild.nodeValue;
Returns the results from the first description tag in the xml file and saves it as a variable

var dateTime = xmlDoc.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
Returns the results from the lastBuildDate tag in the xml file and saves it as a variable

var description = xmlDoc.getElementsByTagName('description')[1].firstChild.nodeValue;
Returns the results from the second description tag in the xml file and saves it as a variable

document.getElementById("weather").innerHTML = + title + dateTime + description;
Outputs the variables previously saved into a div on your web page

The final Product will look like this


Enjoy!!

Oct 24, 2009

Yahoo Pipes

Between Google and Yahoo you can find all the apps you need for the most part. When it comes to making a mashup I didn't think Yahoo would have anything to offer. Last week I discovered Yahoo Pipes (beta released to the public in 2007). It is defined by Yahoo as "a hosted service that lets you remix feeds and create new data mashups in a visual programming environment. The name of the service pays tribute to Unix pipes, which let programmers do astonishingly clever things by making it easy to chain simple utilities together on the command line." An example of the site in action is craiglook.com which is a mashup where Pipes uses aggregate RSS feeds from Craigslist.org.

The tool is boasted to be very robust. Here's a 4 minute tutorial on "Learn How to Build a Pipe in Just a Few Minutes":


This appears to look easy and all that is required is a Yahoo login. I haven't attempted to create anything with this tool yet but it is designed to minimize coding by using a GUI designer. Essentially, it's a way for noncoders to build mashups. There are many sample mashups that can be configured for your use. User's do not have to login when trying them out but a login is required to create them. It looks so easy that it is quite possible my father could build a mashup! Okay, that's stretching it but it sure does look easy.

Oct 12, 2009

An Intro To The Yahoo search API

Now that I have accustomed you to the Google maps api, I now want to show you how to use a basic Yahoo search api using Javascript Object Notation(JSON) and returning the requested data to an alert.

First you need to sign up for a yahoo search API key. Log into your yahoo account and then go to http://developer.yahoo.com/everything.html. On the right hand side of the page, click on Get App ID. You will be prompted to fill out a form in order to receive your personal APP ID which will allow you to successfully use Yahoo's API's. The form looks like the one shown below. Fill in the fields and then click continue. **Pay close attention to what you type into the Web Application Url, in this field put your people.emich.edu website address. (ie. http://people.emich.edu/jguest) By putting in this website address, it will allow you to run the yahoo api's from any webpage that resides under this pathing structure. (ie. http://people.emich.edu/jguest/yahoo/index.html.

Yahoo will send you an email providing you with a link to your own personalized API key.


The next steps will be to program your javascript to make a call to the yahoo search API , retrieve the data in JSON format, and display the data in an alert. For the sake of brevity I have included the code below to perform the steps mentioned above.


By going to the following website, you will see the above code in action with a popup with the name of our book Head First AJAX dynamically pulled from Yahoo. (You can grab the above code by clicking on view source of this website)
http://people.emich.edu/jguest/yahoo.html

Breakdown of Code:
http://shopping.yahooapis.com/ShoppingService/v3/productSearch?
This is default address for Yahoo's shopping search API and must be included for the shopping search

appid=insertyourappidhere
You need insert your appid into the url in order for the search to process successfully

&query=9780596515782
This query can be any item that you are searching on, I chose to use the ISBN of our book

&department=56
This narrowed down the search to a particular department within yahoo's shopping structure(does not need to be included for the search to succeed)

&output=json
Requests the output of the data to be in JSON format. JSON is easier to extract data from in Javascript than XML. (By default the data will be in XML format)

&callback=ws_results
This line tells yahoo to call the function ws_results upon return of the data

Javascript Object Notation is a beast that will need to be tackled in a later post, however I do want to show you what it looks like when returned from the above search.
ws_results ( {"Products":{"Product":[{"__ATTRIBUTES":{"type":"Catalog"},"Catalog":{ "Url":"http:\/\/shopping.yahoo.com\/p:Head%20First%20Ajax%3A:3005580366", "ProductName":"Head First Ajax:", "PriceFrom":"24.62", "PriceTo":"44.99", "Thumbnail":{"Url":"http:\/\/a367.yahoofs.com\/shopping\/3106661\/simg_t_t0596515782gif85?rm_____DIt5.XZzN","Height":"85","Width":"74"}, "ListImage":{"Url":"http:\/\/a367.yahoofs.com\/shopping\/3106661\/simg_t_t0596515782gif85?rm_____DIt5.XZzN","Height":"85","Width":"74"}, "GridImage":{"Url":"http:\/\/a367.yahoofs.com\/shopping\/3106661\/simg_t_t0596515782gif110?rm_____DwXmgnsZu","Height":"110","Width":"95"}, "Description":"Author: Rebecca M. Riordan. ",
"UserRating":{"MaxRating":5,"RatingUrl":"http:\/\/shopping.yahoo.com\/p:Head%20First%20Ajax%3A:3005580366:page=user-reviews","CreateRatingUrl":"http:\/\/shopping.yahoo.com\/p:Head%20First%20Ajax%3A:3005580366:page=post-reviews"},"Department":{"__ATTRIBUTES":{"ID":"56"},"Name":"Books"},"UPC":"0596515782","Relevancy":"9397","__ATTRIBUTES":{"ID":"3005580366"}}}],"__ATTRIBUTES":{"totalResultsAvailable":"1","totalResultsReturned":"1","firstResultPosition":"1"}}} );


By using dot notation as seen in the ws_results function, you are able to traverse the JSON structure and retrieve your data.

Enjoy!!