title | description | layout | author | gh-author | date | categories | tags |
---|---|---|---|---|---|---|---|
First day with APItools (at BattleHack) |
This weekend I attended BattleHack hackathon in San Francisco and I thought I could give APItools a try. Here are some thoughts and feedback about using APItools in hackathon conditions. |
blog |
Nicolas |
picsoung |
2014-04-02 |
blog |
hackathons CORS |
Published on 09 April 2014, by Nicolas Grenié
Nicolas Grenié is Hacker in Residence at 3scale and he's been using APItools internally for quite a few weeks already. Last weekend it was the first time APItools was used in a hackathon with the following results in Nicolas' team :)
Thank you Nicolas for the write up!
Earlier this week 3scale announced the launch of a new tool for API consumers: APItools. APItools enables developers to monitor and manage API traffic. The magic of it resides in "middleware" that are Lua script to help you modify inbound or outbound traffic.
This weekend I attended BattleHack hackathon in San Francisco and I thought I could give APItools a try. Here are some thoughts and feedback about using APItools in hackathon conditions.
With my teammate Thibaut we wanted to build a hack using LeapMotion to create a kiosk for tourists. The kiosk could be at an airport or shopping malls and should help tourists (or anybody) find what is happening around.
In terms of technology we wanted to build a hack using Javascript without any backend, everything in the client. We wil get local tweets using Twitter API, local photos from Instagram API and local events using SeatGeek API.
APItools lets you create a service for each API you are going to use.

So we created one for each, Twitter, Instagram and Seatgeek.
In each service you will define what is the API backend you want to hit (Twitter : *http://api.twitter.com/1.1/). APItools will then give you a url to hit this API instead of hitting it directly. It acts as a proxy.
So, In your app instead of calling http://api.twitter.com/1.1/search/tweets.json to search on tweets you will call http://{id}.my.apitools.com/search/tweets.json
As we were building a 100% client-based application we used jQuery $.ajax method to call APIs, and we faces what most of the people are facing today the classic No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
Using APItools helped us solved this problem.
Here is how we did it
var api_root = "http://{id}.my.apitools.com/";
var api_url = api_root+"trends/place.json?id=2487956" //Trending topics in San Francisco
$.ajax({
type: "GET",
url: api_url,
dataType: "jsonp",
success: function (response, status, xhr) {
console.log(response[0].trends);
},
error: function (xhr, err) {
console.log(xhr);
console.log(xhr.statusText);
}
});
If you are familiar with Twitter API you know that requests has to be authenticated with Authorization Bearer header. You don't see it in the above code, it's normal, we used APItools pipeline tool to pass it. Like this all the requests we make to our APItools url are already authenticate to hit twitter API.


Once you make calls in your application you can track them using Traces in APItools, you will see which one are passing and which one are failing, as well as all the information of the call (Headers, User-Agent,…).


If you are into analytics you can also have graphs to visualize your calls easily.
In the end APItools helped us during the development phase when we were trying calls to see which one were failing and why. It also helped us when we reach the API limit on a twitter endpoint, we saw it immediately in Traces. It also very useful when you develop apps with no backend and you want to bypass CORS error.
I am looking forward using APItools at other hackathons and I encourage hackers to give it a try,
Disclosure I am a Developer Evangelist at 3scale, company behind APItools