A few weeks ago, I had the idea of creating a Google Map with a marker for each of my previous Airbnb trip. Simple and nice idea, right? As a developer, I thought that it would be great to just find a way to fetch the data of my previous trips. Then, I had a lot of other ideas and statistics to calculate with just this personal data… For example it would be great to have the total amount of money spent on the platform, the total number of days spent in an Airbnb, split that data by years… Too many cool ideas to achieve with just the data of my previous trips! I began looking for an official Airbnb API but I quickly realised there is not any…

If you search online a bit like I did, you’ll find some unofficial documentation and some drafts of libraries and adapters in several programming languages, but nothing really maintained or serious.

That’s when I tried to find a way to spy on the calls the Airbnb Android application was making. I managed to do that using Man in the Middle Proxy (mitmproxy). The technique is to use Transparent Proxying and connect both your computer and smartphone to the same Wifi, but changing your smartphone Wifi settings to use your computer as the gateway instead of your usual router. You also need to install a custom certificate on your device to spy on the HTTPS. And finally need to set your computer firewall to redirect HTTP and HTTPS connection to the proxy.

The mitmproxy console is amazing. You really see the calls made by your smartphone in real time and can inspect both the request and the response. Moreover, it also pretty-prints the JSON output for free. A note about this technique is that HTTPS connections may be rejected by the client application if it implements certificate pinning (aka checking). By chance for the Airbnb application, it was still working fine using an old 5.1 Android smartphone.

In a matter of a few dozen minutes I was able to write down the 2/3 API endpoints needed for my prototype application : one authorization endpoint, one endpoint to get a condensed list of the logged user previous bookings and an endpoint to get the details of a booking.

Great! The next step was checking that I was actually able to make the same requests using an external tool. I used Postman (a nice Chrome extension to make API calls and inspect responses) to check the 3 endpoints and hopefully was able to get the good responses from the Airbnb servers. Now I was on the good path, everything left was to actually code the prototype.

The beginning was to write the first Node.js modules to make the calls to the API. After looking for npm modules, I found out “request”, then “request-promise” and “request-promise-native” which basically encapsulate all responses in asynchronous Promises.

The source code written for the Airbnb API adapter is there : https://github.com/nicolasblanco/my-bnb-memories/blob/master/src/airbnb_api_adapter.js

After managing to make the same calls, I decided to try Electron. Electron is the technology created by Github. It makes it possible to create stand-alone web applications using a Node engine and a Chrome view. It’s now used by many applications including Atom, Visual Studio Code and Slack.

The main reason to choose Electron and to create a stand alone application was mainly to be able to do the calls to the Airbnb API natively. By using a classical front-end web application in the browser it would have been impossible because of CORS. I didn’t want to proxy the requests, so going native was the first obvious choice. It was also a good excuse for me to try out this technology!

The first biggest challenge when trying Electron was to actually find a good way to setup a front-end JS framework to use : Vue.js 2 or Angular 2 ? My choice was eventually to try Vue.js 2, mainly because it’s just targeting the view. I chose Vue-cli to create the components-based architecture with Webpack to build the distribution and Vue Material to design the Graphical User Interface. Good choices, eventually I have no regrets, the setup was totally fluid.

The second challenge was to find a good way to communicate between the Electron main process which would do the native requests and the Vue front-end application. Eventually Electron provide an IPC object (Inter Process Communication) which can be used to respond to asynchronous messages both on the back-end and front-end using callbacks.

After some hours of work my first prototype is there… It’s not doing a lot but it manages to log into my own Airbnb account, fetches my previous trips, sets markers on a Google Maps (yeah!), displays cards with the main picture of the listings and even some bar chart with the total price paid for each booking.

Finally you may find the full source code of this early prototype here: