ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to make a cool mashup without server-side scripting

Updated on May 22, 2014

Requirements

Resources :

  • A domain address
    Costs about $10. You can buy one here.
  • Hosting server
    You do not have to spend any money for this one. Sign up for a Google Appengine account to get free hosting service which can serve about 5 million visitors a month.

Knowledge of :

  • HTML
  • Simple Javascript

Access to :

What this mashup does

Looking at the above requirements, you might have guessed that we are making something with Amazon.com

Amazon Product Advertising API gives you a lot of operation, and the purpose of this hub is not to educate you about all of those. Here, we learn how to perform only one operation. Once you know this, it is trivial to learn to use the rest of the operations.

This mashup fetches a list of all the books that were written by an author, that are available on Amazon.com


Determining the Amazon API Operation

The following link will give you access to the list of operations you can perform using the Amazon API :http://docs.amazonwebservices.com/AWSECommerceService/latest/DG/

As we have to list all books written by a particular author, it is necessary that we search the Amazon database. For this reason, we choose to use the operation called ItemSearch

The operation can take several parameters, but we shall use only the following two parameters for this mashup :

  • Author : The value of this will be input by the user.
  • SearchIndex : This will always be Books, so that we list all the books.

Why use Yahoo Pipes

If you are asking, why is it that we need Yahoo Pipes, the simple answer is, so that we do not have to write any server-side code.

You can see that calling the Amazon APIs means that you have to request a URL with a querystring. In the absence of Yahoo Pipes, this would mean, your server has to do a cURL or wget to fetch the results from that request. Yahoo Pipes makes the necessary request, and returns the results in the form of JSON, allowing callbacks, so that client-side Javascript can do everything for you.

The advantage is that, you are saving on the bandwidth of your hosting service, and your Javascript code is going to be very simple.

Integrating with Yahoo Pipes

Follow these steps in sequence to build your Yahoo Pipe :

  1. Create a new pipe
  2. Click on User Inputs category, and select Text Input
  3. Set the properties of the newly added Text Input to the following, and leave the rest of the properties unchanged.
    Name = Author
    Prompt = Author
  4. Click on Url, and select URL Builder
  5. Set the properties of the newly added URL Builder to the following,
    Base = http://ecs.amazonaws.com/onca/xml?Service=AWSECommerceService&Operation=ItemSearch&SearchIndex=Books&AWSAccessKeyId=XXX&Author=XXX
    (Paste the entire URL)
    AWSAccessKeyId = [ Your access key id ]
    Author = Connect the Text Input we created in the previous step to the URL Builder's Author.
  6. Click on Sources, and select Fetch Data.
  7. Connect URL Builder's output to the Fetch Data box's URL.
  8. Connect the Fetch Data's output to the Pipe Output.

The final pipe should look like this

Final Pipe Screenshot
Final Pipe Screenshot

The Run Screen

After you run the pipe.
After you run the pipe.

Creating a HTML interface

Once your Yahoo Pipe is ready, save it, and then Run it. Right click on the "Get as JSON" and copy the link location.

The link location could be something like this : http://pipes.yahoo.com/pipes/pipe.run?Author=Crichton&_id=b7f22f8fc44bd09375680c2e0e3ed9c8&_render=json

Append the following to the above link :
&_callback=showBooks

This is to make a JSON callback. showBooks is a Javascript function that should be defined in your HTML page.

Enter the following content in your HTML page, to make the JSON request :

<html>
<head>
  <script>
      function showBooks(obj){

      }
  </script>
</head>
<body>
  <div id="booksContainer"></div>
  <script src="http://pipes.yahoo.com/pipes/pipe.run?...">
  </script>
</body>
</html>

Of course, in the src, you will be putting in your pipe's URL. So this is sufficient to make the JSON request. Now your showBooks function should be able to parse the JSON and render the results.

Well, this is how you print the Title of a book :

obj is the object that is passed to the showBooks function.
obj.value.items[0].Items.Item[x].ItemAttributes.Title

So, that is it. Loop through obj.value.items[0].Items.Item.length and add the title of each book to the booksContainer DIV element.

Conclusion

So, you just learnt about Amazon API and Yahoo Pipes and how both can work together. The prototype we created here is very rough indeed. You might have felt it is a long read, but the stuff is so simple and easy, that when you are doing it, it can be completed very quickly.

But now that you know how to use them, you can put in all your creativity to make tons of stuff with these technologies.

Some parting ideas :

  1. A natural language search interface for Amazon
  2. An interface that lists the topsellers from every category on Amazon
  3. Product comparison service


Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)