Custom data sources in Vizydrop

How to create custom data connector for Airtable

Dear friends, as you know our platform has a set of built-in app connectors to visualize data from links, files, Google sheets and etc. Sometimes you may want to visualize data from your custom data sources and apps. So we have added the possibility to connect custom data sources. I am going to show how to build and visualize data from Airtable.

Create app connector

It is required to have some software development skills to implement app connector. The HTTP protocol is going to be used for communicating with Vizydrop, so you may choose any language and platform. I am going to use Node.js. Please take a look at our guide related to building app connectors at https://trello.vizydrop.com/api/v1/docs/custom_apps/overview. It will make the next steps more clear.

We have to implement several routes to build a very simple connector to Airtable.

1. Implement GET route available at “/”. It should contain app meta with it’s name, authentication and available sources. I am using the “express” module to simplify my life. Please take a look at how it is done here.
2. Provide app logo by implementing “/logo” GET route. The code can be found here
3. Implement validation of user credential by adding “/validate” POST route to your server. Airtable API key can be validated only on retrieving data, so I do nothing on validation and return the name of Airtable account obfuscated with * to keep it secure. You can find it here.
4. Implement route responsible for retrieving the data which should be available at “/” via POST method. This is how it is done for Airtable.

As you may notice my custom connector supports one source called “Table” and one API key authentication way to connect to Airtable API. Source has two parameters: Airtable Base Id and Table name (both required by default)

Browse source code of app connector to Airtable at our public repository: https://github.com/vizydrop/airtable

Make connector’s HTTP server up and running

Your app should be deployed and available via permanent address. Use Heroku, Amazon, Google Cloud or some other platforms. I am going to use codesandbox.io.

My Airtable app is up and running at https://1v7l2ook67.sse.codesandbox.io (please note it can not be used for production).

Add a connector to apps gallery in Vizydrop

Now we need to let Vizydrop know about our awesome connector.

The following steps should be done:

1. Click “Create Chart”
2. Click “Add custom connector”
3. Provide HTTP(s) URL to your connector into the form and save it

Visualize your data table

Create an account for Airtable by providing an API key, configure Airtable source and you are ready for visualizing your data. I am going to visualize flowers uploaded to Airtable at https://airtable.com/shr9M0RMTXK1CMWNy.

Please let us know about your questions or comments.

You may try our platform at https://vizydrop.com or https://trello.vizydrop.com