You will be creating a web application that mixes together several sources of web information.
You will learn how to use a RESTful web API.
Overview.
You are working for a company that does English as a second language instruction.
Your instructors want a web-based application that lets them easily show students an English word along with a set of pictures representing that word.
They would also like the application to also show the translation into a small set of languages (the native languages of the students in a particular class).
Your job is to build a web application mashup using several of Microsoft's web service APIs (Bing Search API and Translator API).
The Ajax lecture on the schedule page has links to relevant examples that make use of these APIs.
I will provide you with an API key that you can use during the assignment.
If you like, you can register with Bing as a developer to get access to Bing's APIs yourself (free up to 5K/month search, 2M character of translation).
You should develop your web application using HTML, JavaScript, and/or PHP.
You may NOT use any external or inlined JavaScript libraries that you did not personally write.
The overall behavior of the application is demonstrated in the above video.
You are free to implement the look-and-feel of the page as you see fit, but it should meet the requirements below.
Getting started.
You should first deploy the PHP pages providing a search proxy and a translation proxy to your VM's web server.
You will need to modify the PHP file to put in the API key I provided.
You can test your proxy pages by also deploying the test HTML pages for search and translation to your server.
Requirements:
Page has a text entry field allowing one or more words to be typed.
Page has a button that causes a new image and translated word(s) to be loaded.
Hitting return in text field should cause a new image and translated word(s) to be loaded.
The image and translations should be immediately erased when the button is pressed.
The image and each language translation should be loaded in parallel, populating each relevant page element as soon as the result for that element arrives.
This implies you will need multiple XMLHttpRequest objects, one for each concurrent request.
You should display 10 images for the English word or phrase. If Bing returns fewer than 10 results, display just the number returned.
Images can be of different resolutions if you want, but should maintain their original aspect ratio and should not be warped.
You should display the thumbnail version of the image, not the full resolution version (this makes the page much more responsive).
Clicking on the image causes it to cycle through the 10 images, from the top result to the last result.
After clicking on the tenth image, it should cycle back to the first image.
If one or more of the web API queries fails to return a result (e.g. a bogus word), your page should not generate a JavaScript error.
The exact languages and the number of languages displayed should be easily configurable by changing no more than two lines of code. Include a comment describing how to configure the page.
Can I use a single XMLHttpRequest object to make multiple parallel requests? No. You'll need to create multiple objects.
All my Ajax requests are served by the same onreadystatechange callback function.
Is there a way to tell which request a particular response came from?
Not that I could find.
You may be able to figure it out based on the response generated by the web service.
Another option would be to design your code so it works without this knowledge.
Or you could have different callback functions for each type of request, though this may be a little inelegant.
Can I make the languages dynamically configurable in the web application?
Sure, but this is not a requirement.
Submission.
I will be testing your program on the URL specified in the header of your source.
I will be using the Firefox browser.
I will be turning on the developer console to see if I can cause any JavaScript errors.
You also need to submit your source file(s) to the Moodle dropbox.
The Moodle timestamp is the completion time for the assignment.
