Building a simple mashup step by step with Popfly

popfly4de16ba 6f01 4142 9c72 56d90d37325d

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.

derertrtyfaedb7 5f67 4e5f 8e40 b29c6e23d4bf

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.

ddfdfdf d4111bce 1c77 4afa b7d2 a735996854ff

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:

imageb5c f5a7 4939 b531 0e6576f57bc6

imagebabb92 ef40 4226 8e04 04d8dfae2779

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

fgghuy b63503a7 e399 4386 abf0 9694dc2d72e0

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

imagebfa30a8 aaf5 4a80 9aa3 69f0f9b10381

 

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

imagec8f16 2860 46de ac57 4ec9e1b9532c

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.