I used Origami Studio, a prototyping tool, to create a working Phillips Hue controller.
Many design tools like Sketch and Framer X now include the ability to use live data from APIs. In May 2018, Origami Studio was updated to include a “network request” feature that allows prototypes to make POST and GET requests. Beyond simply reading data, prototypes can now create and update data in all the same ways as a real app. Combined with Origami Live, which allows prototypes to run independently on iOS, it’s possible to create a fully functional app without writing a line of code.
The Hue API is particularly fun for experiments because it controls real-life objects.
Turning my apartment lights on and off with a standalone prototype.
To turn a light on or off, the Hue API requires a PUT request with an access token in the request header. Origami Studio doesn’t support PUTs or headers, so I created a proxy server to format and forward its requests. The prototype sends a POST request to the proxy, and includes an options object in the request body. The proxy parses and transforms the options object, makes a request to the Hue API, and sends the response back to the prototype.
{
"body" : { "bri" : 0, "on" : 0 },
"json" : 1,
"headers" : {
"Authorization" : "Bearer <access-token>",
"Content-Type" : "application/json"
},
"method" : "PUT",
"uri" : "https://api.meethue.com/bridge/<whitelist-id>/lights/1/state"
}The POST request body.
app.post('/', ({body: requestBody}, proxyResponse) => {
const data = parseBody(requestBody);
const transformedData = transformBools(data, ['body.on', 'json']);
requestPromise(transformedData).then((response) => {
proxyResponse.send(response);
}).catch((error) => {
proxyResponse.send(error);
});
});Support for more request types is likely to land in Origami Studio soon. Many more ideas are possible with network requests: a search page that returns real results, a working chat app, an Apple TV remote, and so on.
The code and working files for this project are on my GitHub.