What goes in a mashup?

Mashups

Below are some illustrations that Catherine Lui '11 created for the first offering of the Mashups course in 2011.

The origin: Potato Mashup

Mashups - reimagined

Web Mashups

The process

There are three major steps in the process of building a mashup.

  1. Knowing the Data - the data for our web mashup will usually come from one (or many) external source, e.g., Google Books, Rotten Tomatoes, Yummly, Etsy, Facebook, Google Maps, Wikipedia, Wellesley Courses, etc. We need to answer a few questions about the data before starting to work:
    • In what format is the data transported? JSON, XML, HTML, CSV, text, etc.
    • Given the format, how is the data organized: as a DOM Tree that needs to be parsed, as an object of objects, etc.
    • Which fields of the data contain the information we need.
  2. Getting the Data - how do we request and receive the data? Depending on the API, we will need to consider different strategies.
    • For REST APIs, we will construct an HTTP request made up of the base URL of the service and a series of parameters, with an additional api key.
      • If the API supports CORS (cross-origin resource sharing), we can use an AJAX request to get the data asynchronously to our app. There are two methods we have seen, the Javascript method that uses the XMLHttpRequest object, or the $.getJSON() method from the jQuery library (this library has a generic method .ajax(), of which .getJSON() is one of the possible cases. In both these cases, the callback function is specified within the method's body.
      • If the REST API doesn't support CORS, we will need to use the JSONP method, that injects a script tag in the DOM and provides a callback function parameter as part of the request URL.
    • If the web service provides a Javascript API (Facebook, Google), we import the library, and use objects and methods defined in the library to request the data. The requests in this case contain only partial (relative URLs), but we will still have to supply callback functions to deal with the responses asynchronously.
  3. Presenting the Data - once the data has been received how do we present it in a meaningful and coherent way to the user. This subprocess might involve:
    • Clean, filter, reorganize the received data to fulfill the needs of our app.
    • Create HTML structures and provide CSS styling for parts of the page that will be updated dynamically by the data.
    • Write Javascript/jQuery functions that iterate through the data, create new HTML elements on the fly, insert them in the DOM, and apply styling or animation.

Depending on the nature of the app (does it have inputs for the user to make multiple requests), steps two and three will be repeated as long as the user continues to interact with our application.

What do we need to know?

This is a list of questions about many of the things that we need to be aware of (in some occasions) or really understand (in some others) in order to create Web Mashups.

  • What is the Internet and how it works?
  • What is the Web and how it works?
  • What is HTTP and why we need it?
  • What is a web server and how it works?
  • What is an API?
  • What is a REST API?
  • What is JSON, what is XML? How are they different? Why do we need them?
  • How can we get data from a remote web server to a client application?
  • What is the Same Origin Policy?
  • What is CORS?
  • What is JSONP?
  • What is the DOM?
  • What does it mean to inject a script element? How do we do it?
  • What is a callback function and why do we need it?
  • What happens when a callback function name is a parameter in an URL?
  • How do HTML, CSS, and Javascript/jQuery work together?