About a week ago I read an article written by Marshal Kirkpatrick called How to build an RSS and Blog News Site for your project. In short, Marshall basically outlined how he had built an RSS-based microsite for the JavaOne conference. The article was great, and although I believed I knew almost everything about refining RSS feeds, I actually learned a thing or two.

Towards the end of the article, Marshall started to dive into the presentation process but confessed that he was not very involved in that portion of the project. At this point, I started thinking about MindTouch Deki Wiki, and how to integrate the filtered and refined RSS feeds using the wiki’s application platform. Deki Wiki is a powerhouse when it comes to aggregating and mashing up content, so it was a fairly reasonable thought. To that end, I figured I would put a couple of demos together to show you how to use Deki Wiki to easily build a similar app. I’ll also demo some of the more advanced stuff like using Dapper to scrape and mashup web apps.

RSS presentation

It’s pretty straight forward. By using the Deki Wiki Extension Dialog () , you can quickly and easily display your RSS feeds as lists, tables, or tabs. Also, since the interface is a wiki, users can easily manipulate the manner in which they want their RSS feeds to display. Create a table, drop your RSS feed in there, maybe add some CSS in the markup view and off you go.

In the screen shot below, you can see that I quickly added two RSS lists into a table and clicked save. Taking Marshall’s advice, I used Google Blogsearch to find and filter my blogsearch. Unfortunately, I didn’t take the time to weed out the duplicates or format the HTML as suggested, but I know that I could have if I had the time. At Google Blogsearch I used the following two search queries:

• (MindTouch and Mozilla) – “Re:”
• (MindTouch or Deki Wiki)

Using Deki Script the RSS feeds look like this, respectively. Keep in mind you don’t have to write Deki Script unless you really want to. You can use the extensions manager to insert and manage all Deki Script.

• {{ feed.list{feed: “http://blogsearch.google.com/blogsearch_feeds?hl=en&q=(MindTouch+and+Mozilla)+-+%22Re:%22&ie=utf-8&num=10&output=rss”, max: “30″} }}
• {{ feed.list{feed: “http://blogsearch.google.com/blogsearch_feeds?hl=en&q=(Deki+Wiki)+-+%22Re:%22&ie=utf-8&num=10&output=rss”, max: “30″} }}

Using Dapper to Make a Mashup in Deki Wiki

Let’s take this a step further and integrate some other cool applications. I’ll also add some Deki Script to make it as interactive as possible. Let’s start off with two of our most beloved services, Dapper and Yelp. First, using Yelp, I decided to search around for something that interests me. I quickly found the San Diego Nightlife page. I then went to Dapper.net and pieced together my Dapp; I created the values TopTitle, TopDescription, and VenuList. It only took two minutes to create my Dapp, and then I was back over to Deki Wiki. In Deki Wiki, I clicked Edit on my page and using the using the Extension Manager I inserted my Dapp. If you look above the Extension Manger you’ll be able to see a glimpse of the Deki Script that is being created for you.

Again, here is the Deki Script that was entered to retrieve both the TopTitle and TopDescription respectively:

• {{ dapp.html{name: “YelpSanDiegoNightclub”} }}
• {{ dapp.value{name: “YelpSanDiegoNightclub”, xpath: “Top/TopDescription”} }}

Easy, huh? Let’s move along. Next, let’s take the value from our first Dapp (TopTitle) and use it in some other extensions. I’m going to use the TopTile value in a Flickr Slideshow, a Google blog search RSS Feed, and a Google Video search, and then show the list of other ’second rank’ venues. Here is the mashed up Deki Script in the same order:

• {{ flickr.slideshow{tags: dapp.value{name:”YelpSanDiegoNightclub” }, width: “250″, height: “250″} }}
• {{ google.SearchBlogs{search: dapp.value{name:”YelpSanDiegoNightclub” } } }}
• {{ google.searchvideos{search: dapp.value{name:”YelpSanDiegoNightclub” } } }}
• {{ dapp.list{name: “YelpSanDiegoNightclub”, xpath: “VenueList”} }}

As you will see below, I’ve arranged the extensions throughout the page to my liking. I floated the flickr slideshow to the right and then then listed the rest of the extensions throughout the page.

And here’s the final result! The awesome part about this example is that whenever the Yelp community decides another venue is more popular, your entire mashup is updated with the new venue’s info.

The next (more advanced) topic I’ll jump into is parameterized templates, but I’ll save that post for another day. Stay tuned!

Damien Howley
DamienH[at]mindtouch.com
@DamienH