ProgrammableWeb API Example Apps

Sample applications demonstrating the ProgrammableWeb API

And here's some other ideas...

Use the API advanced search functions to build a plugin that finds web services directly from your favorite IDE, like "all telephony APIs that support SOAP". Then just feed the IDE the WSDL from PW and generate the code shell.
Create a visualization of the connections between popular APIs based on the mashups people build with them
Combine with the Google Chart API to graph API usage

JavaScript PW Member Google Map

This member mashup shows a consumer of the JSON members feed. The feed can be inserted into your page as JSON using a SCRIPT tag using your API key. Note how we use the geo=1 parameter to retrieve only users who have geo data. Also note how we use the callback parameter to tell the json response what javascript function to call with the data. We store the data in a global variable while we wait for Google Maps to load, then we load the data.

<script src="http://api.programmableweb.com/members?geo=1&alt=json&apikey=123&callback=load" 
	type="text/javascript"></script>

The response of a json feed is an array object as a parameter to load. In our example we define pwfeed as a global variable in the receiving page.

var pwfeed;

The functions load2() and createMarker() should be fairly familiar to anyone who has developed Google Maps. The load() function gets the data from getPWMemPoints() and feeds it into the Google Maps API via the createMarker() function.

function load2() {
	var map = new GMap2(document.getElementById("map"));
	// ...
}

function createMarker(point, url, text, title) {
	var marker = new GMarker(point);
	// ...
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(link);
	});
	return marker;
}

The getPWMemPoints() function reads the pwfeed variable and formats the data that we wish to display into arrays of arrays.

function getPWMemPoints() {
	var data1 = new Array();
	for (i = 0; i < pwfeed.entries.length; i++)
	{
		var e = new Array();
		var d = new Array(pwfeed.entries[i].longitude, 
			pwfeed.entries[i].latitude, 
			pwfeed.entries[i].edit, pwfeed.entries[i].title,
			pwfeed.entries[i].location);
		e.push(d);
		data1.push(e);
	}
	return data1;
}

The load() function converts this array into calls to createMarker().

	var data2 = getPWMemPoints();
	for (i=0; i<data2.length; i++) {
		for (j=0; j<data2[i].length; j++) {
			url1[j] = data2[i][j][2];
			text1[j] = data2[i][j][3];
		}
		// ...
		map.addOverlay(createMarker(new GLatLng(data2[i][0][0], data2[i][0][1]),
			url1, text1, data2[i][0][4]));
	}

PHP Auto-Create Mashup Profile

This App is a PHP page that creates a new mashup request on ProgrammableWeb comparable to our add page. The benefit to a mashup author is that this process can be automated while the add page cannot. The code uses curl in a similar manner to the Mashup request but does a post of an XML entry.

See the demo here: [Demo]
Download source here: [source]

The createMashup function takes parameters of title, url, author, description, and image as described in the user guide. An API key is required as always.

	$apikey = '123';
	$pw = new PWeb($apikey);
	$ret = $pw->createMashup($_POST['title'], $_POST['url'], 
		$_POST['author'], $_POST['description'], 
		$_POST['image']);

C# SOAP eCommerce API WSDL Finder

This app is a command-line application for C#/Mono (tested on Windows XP and Linux) that retrieves the first page of SOAP APIs from ProgrammableWeb's API feed. It is a trivial exercise to modify this program to output these WSDLs to an array of strings for use in your own application. As in the PHP and Java interfaces, the C# interface contains three functions available to the user for API calls: requestMashups, requestMembers, and requestApis.

Download source here: [source]

As above in the PHP example code, we create a PWeb object with the API key. We call requestApis with the protocol parameter set to "SOAP" and we receive an XmlDocument object with the API feed. The built-in utility printWsdls prints the title and wsdl of the API (if available).

	String apikey = "123";
	PWeb pw = new PWeb(apikey);
	XmlDocument doc2 = pw.requestApis("", "", "", "", "", "SOAP", "");
	PWeb.printWsdls(doc2);

Java Photo API Finder

Quite similar to the above C# App, this App is a command-line application for Java (tested on multiple platforms) that retrieves the first page of APIs tagged photo from ProgrammableWeb's API feed.

Download source here: [source]

As above in the C# example code, we create a PWeb object with the API key. We call requestApis with the tags parameter set to "photo" and we receive an XmlDocument object with the API feed. The built-in utility printEntries prints the title and url of the API.

	String apikey = "123";
	PWeb pw = new PWeb(apikey);
	Document doc2 = pw.requestApis("", "", "photo", "", "", "", "");
	PWeb.printEntries(doc2);

PHP Chart of API Protocols

The PHP Chart of API Protocols generates a Google Chart of the top 10 Most Popular APIs chart using the ProgrammableWeb API (popularity in this case meaning number of mashups in our directory using that API).

To do this, it uses cURL to retrieve the APIs feed several times with different arguments.

http://api.programmableweb.com/apis/?protocol=$k

This application uses regex to retrieve the value from the <openSearch:totalResults> tag.

One note: Google Charts truncates data larger than 255, so you must divide your values by a value larger than 1/255 of the total.

Download source here: [source]

JavaScript Chart of API Protocols

The JavaScript Chart of API Protocols generates the same graph as above using JavaScript and the JSON APIs feed.

The urls used to invoke the PW API are shown here:

http://api.programmableweb.com/apis?alt=json&callback=loadTotal
http://api.programmableweb.com/apis?protocol=Atom&alt=json&callback=loadAtom

When each JSON data set is loaded, it calls a function which sets the data in the global variable.

The body onload event executes the function loadResult() which calculates the graph and draws it.

Download source here: [source]

JavaScript Chart of Top 10 APIs

The JavaScript Chart of Top 10 APIs generates a graph of the top 10 APIs sorted by Usage (in terms of mashups listed in the ProgrammableWeb directory). The two static JSON feeds are apis sorted by number of mashups and the mashups feed.

Their urls are:

http://api.programmableweb.com/apis?alt=json&sort=mashups&callback=loadTopApis
http://api.programmableweb.com/mashups?alt=json&callback=loadMashups

These call back loadTopApis and loadMashups respectively. When the body loads, it calls loadAll, which then dynamically loads JSON feeds for the mashups of each of the top 10 APIs.

The pattern used for the url is:

url + '/mashups?apikey=' + apikey + '&alt=json&callback=loadApiMashups'

where url is of the form:

http://api.programmableweb.com/apis/google-maps

When each of these load, they call loadApiMashups(), which sets the data in the global variable and advances the progress bar. When the all the JSON data is loaded, the final function loadResult() is executed which calculates the data and draws the graph.

Download source here: [source]

JavaScript-powered API Search Widget

The PW API Search Widget allows a user to search for APIs by name or description on another website. The invocation code is simple enough to put on almost any website. The code uses Kent Brewster's well known case-hardened JavaScript techniques to generate HTML and code from our JSON API Feed. An initial query can be given in the invocation code to start the search with a term that the website desires.

<link rel="stylesheet" href="http://api.programmableweb.com/samples/pwsearch.css" type="text/css" />
<div id="pwsearch">
  <script src="http://api.programmableweb.com/samples/pwsearch.js">{"query":"Find an API"}</script>
</div>

Download source here: [source]