January 23, 2021
Hot Topics:

Implementing Visual and Data Mashups Online

  • By Vlad Kofman
  • Send Email »
  • More Articles »

If Yahoo Pipes focuses on manipulation of raw data in "pipes," Microsoft Popfly focuses on visual manipulation of widgets to create new and unique services and applications. Mashups developed with Popfly can be saved and shared, and it also has very good online help.

MS Popfly is another very popular online application, and it offers a robust environment for manipulating "building blocks" that make up mashups. These blocks are essentially widgets that have some logic on how to get data from RSS feed, call a Web service API, or some other data source. Many of the blocks require a special API access key; this means that Microsoft developed partnerships with many popular sites, or made use of what APIs are already available. For example, keys are required for Facebook and Technorati, and can be generated through their APIs.

Figure 2: MS Popfly mashup editor

Google Editor is much more developer centric. It does not have a visual interface like Pipes or Popfly do, nor does it have a library of predefined widgets. The only interface it has is an editor for manual mashup coding.

Figure 3: Google Mashup Editor

Developing Mashups with Yahoo Pipes

So, what does it take to create a mashup online? The answer depends on the tool or site you will use. When using Intel Mashmaker, Yahoo Pipes, or MS Popfly, fairly sophisticated environments will let you visually compose by dragging and dropping various data sources, RSS feeds, and widgets. When using Google Editor or Serena Mashup Composer, a little more work and higher learning curve will be required.

Look at how to make a new mashup with Yahoo pipes. In this example, I'll be combining output from two news feeds (CNN Top Stories and Reuters Top Stories) and filtering them on the search keyword.

When you log in into the editor, all of the pipe building widgets and operations are on the left panel. To add a new data source, simply drag a corresponding widget onto the grid.

Figure 4: Step 1—New Yahoo Pipe

For this article, I have used two popular RSS news feeds, Reuters and CNN: http://feeds.reuters.com/reuters/topNews?format=xml and http://rss.cnn.com/rss/cnn_topstories.rss. Enter the feed URL and click on the Refresh link in the debug pane on the bottom. It will show the output from the pipe.

Repeat the same for the CNN feed.

Add a "Union" operation widget to combine the two news sources, and join the output from the widget by dragging a connecting wire between them.

Figure 5: Step 2—Two sources and union widget

Add another operation to output only unique items, in case there are two identical titles (this is probably unlikely in this case, but could be useful with other sources).

Figure 6: Step 3—Two sources and union widget and Unique widget

Page 2 of 3

This article was originally published on August 5, 2008

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date