Planet CakePHP

While I've known of Yahoo Pipes for awhile, I never really thought to use it until now. Pipes is a neat tool that Yahoo has put together to allow you to mashup feeds, filter feeds and create a completely new feed.

Commonly, I've seen people take feeds from a number of different sources on a particular subject and combine them into a master feed. For example, they want a master CakePHP feed but want to grab only posts that actually mention CakePHP.

However, my goal was a little different. For a little fundraising effort, I decided to use the Chipin service. The problem is that they only offer a Flash widget. Flash doesn't work everywhere (like on the iPhone). With no API to be found, I noticed that the widget pulls in an XML file. Cross domain restrictions prevent me from really doing anything with it unless I want to use server-side code. (Which you could definitely do and I could stop this article right here…)

Being a JavaScript fiend, I decided to check out Pipes and get that XML feed turned into a JSON object.

Setting up Yahoo Pipes

For Chipin, this process was fairly straightforward. Within Pipes, grab an object from the left and drag it onto the canvas. In this case, "Fetch Data" will allow you to grab an XML or JSON document (which is exactly what we want!). Plug the Chipin URL in and then link the window to the Pipes Output window.

What's the Chipin URL, you ask? I traced out the call from Flash and it's very straightforward. When you embed the script, the widget points to:

http://widget.chipin.com/widget/id/a90ee12345b4d634

Take that ID and attach it to the end of the XML call, like so:

http://widget.chipin.com/widgetfeed/id/a90ee12345b4d634

Save the pipe and then click on the Run Pipes link at the top of the page. You should now see the pipe with a number of links such as Get as RSS and Get as JSON. Since we're interested in the JSON, copy the URL from the Get as JSON link. We're almost there. With the JSON URL in hand, add &_callback=myfunction to the end of it. When embedded as a script tag in your page, it'll run myfunction and pass the JSON object as its first parameter.

Here's a quick code example that can determine how much money has been raised from a campaign:

<script>
	function myfunction(o) {
		alert(o.value.items[0].collectedAmount);
	}
</script>
<script src="http://pipes.yahoo.com/[...]&_render=json&_callback=myfunction"></script>

Yahoo Pipes automatically wraps the Chipin result with its own metadata. As a result, you need to dig down through the object to get at what you need. With data in hand, modify the DOM to do your dastardly deeds.

You can take a look at the example to see how everything came together. If you'd like to see what the example looks like in the final implementation, you may check out my Adoption Fundraising campaign.

While I haven't given Yahoo Pipes much interest up until now, it looks like I have plenty of reason to consider it now.