New Feature: Amazon Zuggest!
UPDATE: Since originally posting, the site’s been getting a lot more traffic than usual so I’ve made some improvements to Zuggest.
I incorporated some zuggestions (groan) which folks emailed so the overall UI is a little nicer. I’m definitely HTML impaired. I’ve also improved caching on my server so Amazon doesn’t get such a big whack. Still tweaking things but have definitely learned a lot over the last few days.
-=====================-
UPDATE: Jeff Barr of Amazon has posted a link to Zuggest on the Amazon Web Services Blog. Thanks Jeff!
I’ve also upgraded to the latest Amazon web service WSDL. Tonnes more information available such as list, new and used prices, even inventory levels on used items! Great stuff.
-=====================-
You’ve got to make life interesting and I just couldn’t resist! After hearing all the buzz about XMLHttp (eh, it’s been out for 2 years already) I figured I’d take a look at it. This is my take on “Google Suggest” only with Amazon so I’ve called it “Amazon Zuggest” – TAKE A LOOK AT IT HERE.
This is a technology experiment in creation of Rich Internet User Interfaces using asynchronous communication from a browser to the server to gather data while the user’s doing something else.
While you type, the page gets results without a page refresh and without having to hit “submit” all the time.
HOW IT WORKS The technology involved is Javascript, Web Services, SOAP, XMLHttp, XML, C# and ASP.NET.
The Javascript runs in the browser and fires once you’re done typing. It looks for something to search on. If it finds something, it shoots a request using XMLHttp to my webserver.
The webserver constructs a SOAP request and sends it to the Amazon Web Services server (AWS ECM 4.0). Amazon sends back a SOAP response to my server, this response is then parsed into HTML. I think this is where Zuggest differs from Google Maps.
I think Maps is sending back XML to the browser and that gets XSLT’d into HTML on the browser. I do that part on the web server and stream HTML to the browser.
Lastly, I cache all the results on my side and check the cache before I query anything. I also cache the results on the browser side, so if you’ve searched for something you can just mouseover the history to bring it straight back, instantly. All in the blink of an eye.
So you might say well why not just issue the Web Service request or a REST request directly from the browser to the AWS server, eliminating the extra hop through my server. The main reason for this convoluted Web Service approach through my server is the security constraints around the client-side javascript blending content from other sources.
You can’t issue XMLHttp requests from the browser back to a domain other than the one the original page was served from. Otherwise this would be REALLY fast, as in Google Suggest. Google Maps works the same way.
I’ve tested it in Firefox and IE6 without too many problems. Again, this is an experiment so it’s a little rough around the edges. It would be a little nicer if I wasn’t restricted to 1 request every second max to Amazon.
UPDATES:
Question from Jonathan Sambrook:
Does the Amazon API allow you to use amazon.co.uk ? Answer: Yes. There are WSDLs available for the US, UK, DE, JP, FR and CA Locales although Zuggest only searches the US right now.
Question from Roshawn Dawson: You said that you are using Soap. Are you using a code-behind file? Answer: Yes. The XMLHttpRequest is sent to my ASP.NET page from the browser. The code-behind constructs the SOAP message, etc. etc.
What do you think? Would love to hear your thoughts or happy to link to other experiments like this.
This thing is nice. Howd you figure it out?
Cant you make it faster?
I Love it! Is the source available? Or could you point me into the right direction?
Steve
Sorry, no source code just yet. I want to work out the kinks. Its only been 72 hours since I wrote this thing and already my sites getting hammered.
Look for some subtle improvements over the next few days, better caching, better HTML and hopefully better performance.
Two suggestions – make the image display use fixed width tables, only search on whole word changes since the results arent going to change much per-letter.
Its because Im searching the entire catalog. If you said CJ Cherryh and I was just searching books, youd probably get a better result.
Very interesting. Im sure it is not your fault, buy why the high percentage of weird retrievals? For instance, entering in the relatively unique author name CJ Cherryh results in a couple of her books, but also things like a wood tool case and movies like the Village. Is that the quality of the info from Amazon?
Id second the “weird results” thing
I tried with “ireland” and its really weird.
Only the 6th o 7th result is ireland-related
I think that you could gain money by simply becoming affiliate of Amazon. For every purchase made by zuggest youd gain a %.
Works with Apple WebKit (OmniWeb, Safari, etc.)
does the servlet need to send back a specific content type? any more info on servlet side would be appreciated
Ive updated the description above, tried to be a little more descriptive this time.
Man, this is awesome, especially considering the fact that you are using AWS as the example.
Can you point me to some of your resources, or, better yet, make available the source code? Freakin cool!
Props for the updated description. However, you said that you are using Soap. Are you using a code-behind file? If so, how do you use it with the Javascript functions? This baffles me!!!
Does the Amazon API allow you to use amazon.co.uk (or the other CCds) instead of .com?
BTW, this is v.nice
This might sound like a lame question, but how do you place the results of the Soap call into the xmlHttpRequest object? Or am I right in guessing that the results are automatically inserted in the object?
When looking at the zuggest2.js file, the doHTTP function creates a new url. Is this url an actual page on your server? If not, then how can you pass it to your server and read it from server-side code?
Got it! Took me long enough, but Ive got it. However, theres a problem if searching for, say, A+. No data is returned. Wonder why that is. Anyway thanks for the inspiration!
great site. question: how do you make sure that youre not querying amazon more than 1 time each second? if multiple users access your site at the same time do add their requests to a temporary list of requests to be made with one-second intervals?
You have developed an amazing web app! I suspect it is subject to the same limitations of any website that employs Javascript, namely if the user has javascript turned off it doesnt work. Also it works on some browsers but not all. In case you are interested, I tried it on several browsers with the following results:
OS: Mac OS 10.2.8
Works on:
Firefox 1.0
Mozilla 1.7.2
Doesnt work on:
Safari 1.0.3
Internet Explorer 5.2
Opera 6.0
Windows XP Pro
Works on:
Firefox 1.0.3
Mozilla 1.7.5
Internet Explorer 6.0
Doesnt work on:
Opera 7.54
Great work!
Works with opera 8
super
Fabulous example of how open APIs and loosely coupled systems can make amazing things possible. If more enterprise IT systems were built with SOAP, RSS, and other open http-based APIs, enterprise systems integration would look very different than it typically does now. <a href=”http://www.emediacommunications.biz/blog/archives/000072.html”>[noted in my blog]</a><p>
Great job on Zuggest!
Really great
how do search books on “C++” The C++ keyword doesnt work.
I am British, so I cant use it for now, but it looks great.
its fantastic job and its greate to see such good ajax example and this is a very good apporch to ajax .. good keep itup dude
one more request dude if u can write some tutorial or docs with some example…? it would be helpful to other programmer..
regards
-skonealone
An excellent and applicable use of AJAX. Great work.
Great approach! There seems to be a few select *on the fringe* sites out there using Ajax and doing it extremely well, I havent seen this done before!
Great example of use of AJAX with Web Services. I am going to write a post about it in my French blog. Thanks.
I dont understand it, but this always seems to find the book Im looking for instantly… way better than Amazons native search.
Really Great.. Good combination of ajax and web service..
but why did u choose ASP.NET. any specific reason?
Ill be trying this with PHP.
Hi Francis and thanks for the inspiration
Ive just developed my own AJAX implementation of Amazon Web Services, feel free to check it out.
Best regards.
Filip
http://BrainKing.com
I forgot to add, my server side piece of code is written in Java.
Here is the code to display entries from database as Google Suggest . It is an combination of ASP + JS . works with acces database . Download the full source code and see example at
http://www.guwahatiwebhosting.com/ajax/dynamiclist/index.asp
Wow, this is great. So much better than anything on Amazons own site.
HI its working simply superb
can i some code snippets of this program
thanks in advance
regards
satya
Hi Satya, Im afraid I cannot email the code but I am currently writing a book on Amazon Mashups which you can find on Amazon.com. The book will explain Zuggest and other projects in detail along with plenty of sample code to build your own mashups. Search Amazon for Francis Shanahan to find the book. Regards,
-fs
Francis done a really great work, but I just wonder whether is it possible to retreive data from other web site also, like http://www.walmart.com, http://www.shopping.com etc.
I like this zuggest service for sure. But. I got some headache about the page reload that occur if I press ENTER in the search box. Then I’m back to the original “zeppelin” search again and my search key is gone.. Well, maybe something about my firefox but I thought it was worth mentioning.. Eat that code now! =)
This is awesome, I haven’t seen anything like this on the web. Nice.
Really cool Francis, guess I’ll have to wait for a Spanish version of Amazon.
Cheers.
An excellent and applicable use of AJAX. Great work.
I like this cool stuff with amazon zuggest
Very Cool !!
Amazing application, great work indeed..
Hi
I am trying to produce the same effect with products and categories from my local server, I’d love to see your request functions when you are typing in, I think I’ve got the sending to page request working where it returns the values syncronously but if this is open source and you wouldn’t mind, I’d love to see it.
Thanks
Gareth
Gareth; If you install an sniffer like Fiddler (free) you’ll see the exact request I’m making back to Amazon. I use a proxy on my own server for speed. I recommend my book (of course I do) if you have further questions.
Good work, ive used bits and pieces of this for a little idea of mine..
Cool
, it seems to be a bit slow. I bet this can be faster…
Great application Francis. Congratulations. I think you have very creative applications. I will discuss later with you the possibility of using this schema for trade information applications. Do you Twitt?
Thanks. Success. Best regards.
I get a 404 error