Dear friends, as you know visual report editor has a set of built-in app connectors to visualize data from links, Github 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 Add Custom App Guide from our Trello cluster or you can find it in a visual reports guide of your Targetprocess instance. Reading the guide 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 its name, authentication and available sources.
2. Provide app logo by implementing "/logo" GET route.
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.
4. Implement route responsible for retrieving the data which should be available at "/" via POST method.
Explore the source code of app connector to Airtable at our public repository: https://github.com/vizydrop/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)
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 for testing my connector. My Airtable app is up and running at https://1v7l2ook67.sse.codesandbox.io (please do not use for production reports).
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 Report"
2. Click "Add custom connector"
3. Provide HTTP(s) URL to your connector into the form and save it
Visualize your data
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.