Introduction

This example application was developed using a combination of javascript with the excellent jQuery javascript framework, a smattering of PHP to help us make API calls, and some HTML/CSS for the fluffy bits.

» View the application

Source Files

The main source files for this application are available with comments:

• Javascript Source
• CSS Source
• A Simple Proxy in PHP

Or you can also download all the source files together to get the application up and running on your own machine - huddle-file-ferret.zip.

A Brief Overview

To make an API call using javascript, we use XMLHTTPRequest. jQuery offers an easy way to make asynchronous calls with the $.ajax() function. We could use the equivalent $.get() or $.getJSON() functions, but they do not provide the handy error handling capabilities that $.ajax() does.

Making cross-domain API Calls

Due to the security constraints of XMLHTTPRequest, we can't access data from another domain only using Javascript. So for this sample application, we're using a a very simple 'proxy' written in PHP (source provided). All this does is ferry your API request, using the cURL library, from your local application to the Huddle.net API server, and in turn return the response back to the application.
For more information about this, check out Yahoo!'s Developer Network for a great article on the subject.

Authentication

The Huddle.net API requires authentication using HTTP Basic Authentication.

Since we are using a proxy to access the API, it makes sense to handle all the HTTP authentication here. If you view the source code for the PHP proxy (proxy.php), there are a few values you'll need to change in order to get the application working for you:

			
// Define your API hostname here
define('API_HOST', 'https://api.huddle.net/v1/json/');

// Define your authentication detauls
$auth_header = YOUR_USERNAME.':'.YOUR_PASSWORD;
			
			

You should change YOUR_USERNAME and YOUR_PASSWORD to your own Huddle.net username and password (If you don't have one, sign up here). You shouldn't need to change the value of API_HOST. However, this value sets the hostname of the API.

Example API Call

* API Call with jQuery - getting a list of workspaces (https://api.huddle.net/service.svc/workspaces)

$.ajax({
	// Make the the /workspaces API call
	url : '/proxy.php?path=/workspaces', 
	type : 'GET',
	dataType : 'json',
	error : function() { 
		// If an HTTP error occurs, let's notify the user 
		// of the error.
		fileFerret.notifyError();
	}, 
	success : function(response) { 
	
		// API responses return a true/false "Success" property 
		// telling us whether an error was returned
		if (response.Success === false) {
			// An error occurred, notify the user of the error using
			// ther error message in the response
			fileFerret.notifyError(response.Error.Msg);
		} else {
			// A successful response, so let's do something with it!
			fileFerret.showWorkspaceSelector(response.Data);
		}
	},
	complete : function() { 
		// We hide the "loading" notification when we're done
		fileFerret.hideLoader();
	}
});