<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Floorplanner Tech Blog &#187; API</title>
	<atom:link href="http://techblog.floorplanner.com/tag/api/feed/" rel="self" type="application/rss+xml" />
	<link>http://techblog.floorplanner.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Thu, 19 Nov 2009 04:00:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Debug your web service with HTTP Client</title>
		<link>http://techblog.floorplanner.com/2009/05/26/debug-your-web-service-with-http-client/</link>
		<comments>http://techblog.floorplanner.com/2009/05/26/debug-your-web-service-with-http-client/#comments</comments>
		<pubDate>Tue, 26 May 2009 09:51:42 +0000</pubDate>
		<dc:creator>Gert-Jan</dc:creator>
				<category><![CDATA[API]]></category>
		<category><![CDATA[Floorplanner]]></category>
		<category><![CDATA[curl]]></category>
		<category><![CDATA[http client]]></category>
		<category><![CDATA[testing]]></category>
		<category><![CDATA[web service]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=642</guid>
		<description><![CDATA[The last couple of weeks we&#8217;ve been working on a big integration project. The largest real estate portal of The Netherlands, Funda, uses Floorplanner to deliver interactive floor plans to their clients. They use our API&#8217;s to seamlessly integrate the Floorplanner into their back end system and front end website.
One of our API&#8217;s is our [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F05%2F26%2Fdebug-your-web-service-with-http-client%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F05%2F26%2Fdebug-your-web-service-with-http-client%2F" height="61" width="51" /></a></div><p>The last couple of weeks we&#8217;ve been working on a big integration project. The largest real estate portal of The Netherlands, <a href="http://www.funda.nl">Funda</a>, uses Floorplanner to deliver <a href="http://www.funda.nl/koop/dronten/huis-4217508-de-morinel-43-45/plattegrond/">interactive floor plans </a>to their clients. They use our API&#8217;s to seamlessly integrate the Floorplanner into their back end system and front end website.</p>
<p>One of our API&#8217;s is our RESTful web service. With it one can manage users, project, floors, designs etc. We set up a whole testing suite around it, but every now and then I wanted to test a single method by hand. For this I used the command line tool <a href="http://curl.haxx.se/">cURL</a> which looks something like this (getting all users):</p>

<div class="wp_syntax"><div class="code"><pre class="curl" style="font-family: Monaco,monospace;">curl -H &quot;Content-Type: application/xml&quot; 
-u &quot;username:password&quot; 
-X GET https://floorplanner.com/users.xml</pre></div></div>

<p>It works, but it&#8217;s kind of a hassle. One day <a href="https://twitter.com/whenyouneedmi">Michel</a> showed me <a href="http://ditchnet.org/httpclient/">HTTP Client</a>: </p>
<blockquote><p><i>A Mac OS X Leopard developer tool for debugging HTTP services by graphically creating &#038; inspecting complex HTTP messages.</i></p></blockquote>
<p>HTTP Client makes testing a web service by hand much easier. You can select any REST method you need from a pull down menu. Setting up your header is done by a few mouse clicks and the result is nicely formatted. </p>
<p><img src="http://techblog.floorplanner.com/wp-content/uploads/2009/05/afbeelding-1-600x421.png" alt="HTTP Client sample" title="HTTP Client sample" width="600" height="421" class="alignnone size-large wp-image-652" /></p>
<p>The only thing that didn&#8217;t seem to work out of the box was Basic HTTP Authentication. I found a workaround for this: add the authorization to the header myself. To do this use &#8220;Authorization&#8221; as header name. For the header value you have to encode the username and password with <a href="http://en.wikipedia.org/wiki/Base64">Base64</a> with a &#8220;:&#8221; as separator. For example in PHP: base64_encode(username:password). There are also a couple of websites around where you can encode a string to Base64. When you have the encoded string, you can add &#8220;Basic <i>encoded string here</i>&#8221; as a header value and you&#8217;re ready to roll.</p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2009/05/26/debug-your-web-service-with-http-client/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating a REST API for a Flash application</title>
		<link>http://techblog.floorplanner.com/2009/02/25/creating-a-rest-api-for-a-flash-application/</link>
		<comments>http://techblog.floorplanner.com/2009/02/25/creating-a-rest-api-for-a-flash-application/#comments</comments>
		<pubDate>Wed, 25 Feb 2009 16:49:47 +0000</pubDate>
		<dc:creator>Willem van Bergen</dc:creator>
				<category><![CDATA[Flash+ActionScript]]></category>
		<category><![CDATA[Ruby on Rails]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[caveats]]></category>
		<category><![CDATA[DELETE]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[PUT]]></category>
		<category><![CDATA[request]]></category>
		<category><![CDATA[REST]]></category>
		<category><![CDATA[XML]]></category>

		<guid isPermaLink="false">http://techblog.floorplanner.com/?p=486</guid>
		<description><![CDATA[We have been working hard to implement an XML-based REST-style API for Floorplanner and some of our partners are using it already to access their users and plans. We now have started to use this API ourselves.
The Floorplanner Flash application communicates with our servers to load and save projects and designs. The backend for this [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F02%2F25%2Fcreating-a-rest-api-for-a-flash-application%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Ftechblog.floorplanner.com%2F2009%2F02%2F25%2Fcreating-a-rest-api-for-a-flash-application%2F" height="61" width="51" /></a></div><p>We have been working hard to implement an XML-based REST-style API for Floorplanner and some of our partners are using it already to access their users and plans. We now have started to use this API ourselves.</p>
<p>The Floorplanner Flash application communicates with our servers to load and save projects and designs. The backend for this functionality used to be written in PHP. Eliminating this PHP application simplifies our server setup, eases development and reduces our maintenance burden. To rewrite this functionality in Rails, we decided to eat our own dogfood and use the REST API to load and save designs. Why reinvent the wheel?</p>
<p>However, while implementing the changes it the Flash application, we found that it did not work out of the box, because of some limitations in ActionScript. Note that we still use ActionScript 2, so some of these issues may not be relevant for ActionScript 3. In this post, we will detail what these issues are and how we overcame them.</p>
<h3> Using a separate format </h3>
<p>Our REST API uses the XML format supplied by Rails. Because we had to make some changes to make it work from ActionScript, we decided to add a distinct format that we could implement differently without altering the behavior of the default XML API. Adding a new format, called &#8220;flash&#8221; can be done in Rails by adding a MIME alias to your environment:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;"><span style="color:#6666ff; font-weight:bold;">Mime::Type</span>.<span style="color:#9900CC;">register_alias</span> <span style="color:#996600;">&quot;application/xml&quot;</span>, <span style="color:#ff3333; font-weight:bold;">:flash</span></pre></div></div>

<p>Now we can send different responses based on this format:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;">respond_to <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>format<span style="color:#006600; font-weight:bold;">|</span>
  <span style="color:#CC0066; font-weight:bold;">format</span>.<span style="color:#9900CC;">xml</span>   <span style="color:#006600; font-weight:bold;">&#123;</span> ... <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color:#008000; font-style:italic;"># default API behavior</span>
  <span style="color:#CC0066; font-weight:bold;">format</span>.<span style="color:#9900CC;">flash</span> <span style="color:#006600; font-weight:bold;">&#123;</span> ... <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color:#008000; font-style:italic;"># do something different</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<h3> HTTP status codes </h3>
<p>REST APIs use HTTP status codes to return whether a call succeeded, and if not, why. Flash however uses the browser to perform HTTP requests. The browser only returns something to Flash if the request was successful. So, if an error code is used if a request failed together with some error messages, these error messages will not be delivered to Flash and cannot be displayed to the user. We resolved this by always sending the HTTP OK status.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;">respond_to <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>format<span style="color:#006600; font-weight:bold;">|</span>
  <span style="color:#CC0066; font-weight:bold;">format</span>.<span style="color:#9900CC;">xml</span>   <span style="color:#006600; font-weight:bold;">&#123;</span> render <span style="color:#ff3333; font-weight:bold;">:xml</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#0066ff; font-weight:bold;">@project</span>.<span style="color:#9900CC;">errors</span>, <span style="color:#ff3333; font-weight:bold;">:status</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006666;">422</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
  <span style="color:#CC0066; font-weight:bold;">format</span>.<span style="color:#9900CC;">flash</span> <span style="color:#006600; font-weight:bold;">&#123;</span> render <span style="color:#ff3333; font-weight:bold;">:xml</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> XML.<span style="color:#9900CC;">failure</span><span style="color:#006600; font-weight:bold;">&#40;</span>@project.<span style="color:#9900CC;">errors</span>, <span style="color:#006666;">422</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#125;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Our <code>XML.failure</code> method will return something like:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family: Monaco,monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;failure</span> <span style="color: #000066;">status</span>=<span style="color: #ff0000;">&quot;422&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;error</span> <span style="color: #000066;">on</span>=<span style="color: #ff0000;">&quot;name&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>A project should have a name!<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/error<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/failure<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Note that other HTTP success statuses than 200 work in Safari and Firefox, but not in Internet Explorer. So, never return a 201 (<code>:created</code>), because Internet Explorer will not send the result to Flash!</p>
<h3> PUT and DELETE requests </h3>
<p>REST-style APIs use HTTP PUT requests to alter objects and DELETE requests to destroy objects. Most browsers do not support these request type. It is not supported by ActionScript either, because Flash uses the browser to send the request. </p>
<p>To overcome this problem, these types of requests can be simulated in Rails by sending a <code>_method</code> parameter along with a POST request. Unfortunately, this does not work when calling the REST API. The POST request body cannot be used to send additional variables, because it is used for the XML payload.</p>
<p>We solved this issue by creating additional routes for POST requests to the <code>update</code> and <code>destroy</code> actions of our resource controllers. Our <code>routes.rb</code> file now looks like this:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family: Monaco,monospace;">  map.<span style="color:#9900CC;">resources</span> <span style="color:#ff3333; font-weight:bold;">:projects</span>, <span style="color:#ff3333; font-weight:bold;">:member</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color:#ff3333; font-weight:bold;">:update</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:post</span>, <span style="color:#ff3333; font-weight:bold;">:destroy</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:post</span> <span style="color:#006600; font-weight:bold;">&#125;</span></pre></div></div>

<p>These routes route to exactly the same methods as the default REST actions (<code>ProjectsController#update</code> and <code>ProjectsController#destroy</code>), so no additional code is needed. The following calls are now equivalent:</p>
<pre>
PUT    /projects/123.xml
POST   /projects/123/update.xml
POST   /projects/123/update.flash

DELETE /projects/123.xml
POST   /projects/123/destroy.xml
POST   /projects/123/destroy.flash
</pre>
<h3>The result </h3>
<p>It requires some stretching of the pure REST principles, but doing so is worth it: we can now reuse the code we use for our API to handle Flash application calls and we can eliminate the PHP backend.</p>
]]></content:encoded>
			<wfw:commentRss>http://techblog.floorplanner.com/2009/02/25/creating-a-rest-api-for-a-flash-application/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
