Building a simple mashup step by step with Popfly

If you don't know what is Popfly, please read my previous post for an introduction : Popfly: Let's have fun!

Here my goal is just to show you the few steps involved during the creation of a complete mashup with Popfly, for those of you who do not want to bother asking for an invitation nor watching a webcast, or maybe fed up with beta things?
Just look below and discover how to build a Blaugh carousel in 35 sec (4 steps)!! 

One of the options in the home page at www.popfly.ms is to "Create a Mashup", and is kindly enough to remind us the definition of a mashup.

Building a mashup with Popfly is just a matter of using at last two existing blocks and link them together.

So here we go, click on "Create a mashup" !!

 

1. From the Blocks list on the left pane, drag and drop the Blaugh block on the work surface.
Note: the list is already impressive, an easy way to find a block is to begin typing letters in the search box and results appears live in an AJAX way.

The block appears with a 3d effect (Silverlight), and can be configured with the wrench icon (but we do not even need that now).

Click on the bulb icon to get a list of blocks which would work well with the current one.

2. Add a Carousel block.

3. Link both blocks together by clicking on the blue disc:


4. You are done!
Note that the work area's background displays a preview of your mashup :

Click on preview to test your mashup : the page shows a 3d carousel displaying last 20 Blaugh pictures!

 

Advanced steps ;-) click on the wrench to configure a block :

You can customize inputs (parameters) of each available operations (web service). By default, you see that my carousel's parameters has been filled with data output from the Blaugh's block : very smart!!

Also hungry coders will be happy to read that you can add custom code in your mashup, so you can tweak the generated JavaScript to fit your needs.

See you on a next post to learn what you can do with your mashup.

2 Comments

  • Great stuff! I was planning on writing a few tutorial posts like this but you seem to be saving me some work ;-)

    Sriram Krishnan
    Popfly team

  • Very amazing. I have been dreaming of such a visual tool box for my PC, where the numerous boxes represent file operations, calls, etc...If I see it correctly Silverlight is in essence WPF, so the basic UI could probably be ripped off quite well.

    I think Yahoo pipes wants to do something similar but I didn't look much into it.

    Apart from the really weird name (popfly...what comes next, pushdive?) good stuff.

Comments have been disabled for this content.