During our live events, a lot of discussion has happened around the concept of online services. One of the sites I’ve been showing off is Microsoft’s Popfly. The site has changed somewhat since I first began discussing it, introducing a gaming section. I want to let you know that the concept behind Popfly hasn’t changed — this is a very future-looking mashup technology. Not familiar with the concept of a mashup? Wikipedia defines it as: a web application that combines data from more than one source into a single integrated tool. This is one of the main concepts behind Popfly. It is a way to use data from several different sources, combining them into one new application. This is the mashup portion of my description. The "future-looking" portion comes from the ease with which new applications can be constructed within Popfly. You do not need to know how to code in order to create applications. Pieces of code already exist on the site (some created by Microsoft and some are user-submitted). These blocks can be combined together in such a way as to create an entirely new application which leverages data from an existing source (or even multiple sources). This is what the future looks like! It’s a world where anyone (even me!) can create a web application. Let’s take a look at an example.
This is the Popfly interface you see once you’ve logged into the mashup section. I have dragged two blocks (which represent individual pieces of traditional code) onto my canvas — one is an RSS Feed and the other is a Bubble Display. My intent is to create a new and better way to show off my latest blog posts (than an ordinary, boring, text-based feed). I can customize what each of these blocks is actually doing by clicking the wrench next to each. So, I begin by telling my RSS Feed block where to get its data (from my blog feed).
Once that is done, I need to tell it to pass the data to the display block, which I can do by simply connecting the dots. (Who knew programming could be so much fun, right?) Then, I need to tell my display box which data I want to show in which section. The options screen for the display box shows me the following drop-down menus, which I can use to display the data I want in the places I want it.
Now, my canvas looks like this:
That blue arrow shows data coming out of the RSS box and going into the Display box. Simple, right? Let’s see what my output looks like by clicking the run button.
This is the result of my program. Since I have no thumbnails associated with my individual blog posts, it uses the default built into the application. I’ll want to fix that. I also see the <p> marks at the beginning of the post, because the block is displaying the plain text it is being fed. The post is in HTML, so has that <p> at the beginning. I’ll need to fix that as well. Since I don’t know how to code, I can’t simply go in and edit the blocks, but that isn’t a problem in Popfly. All I need to do is change the data around a bit using another block. In this case, I am going to add the Text Helper block and configure it like so:
Now, my canvas looks like this:
and my output like this:
You can see it still has some HTML displaying in the second bubble, but it is definitely looking better! Ideally, I would have a block that takes plain text and strips the HTML codes (or even better, reads the HTML and turns it back into HTML text). The fact that the block doesn’t exist yet doesn’t need to daunt me, though. I could simply find someone to write this block for me. (A lot simpler and, most likely, less expensive, than if I asked someone to code me a web 2.0 application to show my blog feed in an attractive bubble-type display!)
I could even get fancy and, as a final touch (since I don’t have any cool images associated with my blog posts (and since it would be boring to have a picture of me on every single bubble)), I could incorporate a block into my program which will take a snapshot of the website provided by my RSS feed, turn it into a thumbnail, then output it to my Bubble block! I’m only limited by my imagination and the building blocks currently out on the site (and the time I have to spend on the project. In this case, I am headed out to play sand volleyball. While it isn’t as much fun as scuba-shark-para-kite-surfing, it will have to do tonight!)
As this kind of programming catches on, you will see more and more programmers writing blocks, rather than programs, so that people like us can leverage those blocks in our own creations!