DEV Community

likayeltsova for flotiq

Posted on • Originally published at flotiq.com

Integration with Meta-API

Flotiq is an API-first headless CMS that works with any technology, framework, and language.
Meta API (https://meta-api.io/)is a platform for integrating and automating APIs. It uses a Connectors to represent API endpoint and a Spells to define automation and data exchange between Connectors. You can define workflows for data mixing predefined APIs.
There are over 480 public APIs in Catalog, including popular apps like Gmail, Google Calendar, Google Spreadsheet, Twitter, etc.
Meta-API dashboard

Flotiq + Meta-API + Google Spreadsheets use case

This guide shows how to add your private Flotiq API to Meta-API and prepare an example Spell. In our case, we will create a report in Google Spreadsheet based on product stock quantity.
Image description

1. Create an empty sheet in Google Spreadsheets

Let's prepare our spreadsheet to use in further steps. We add two columns (Date, Stock Quantity) and a chart with the default config for these columns.
Image description

Notice the spreadsheet id. It's located in the URL https://docs.google.com/spreadsheets/d/[___here___]/edit#gid=0. We will use it in the next steps.

2. Model your data in Flotiq

Sign in to your Flotiq account and make sure that you have added your Content Type Definitions. In our example, we use predefined Product CTD with an extra property named stock_quantity.

Note: If you are new to Flotiq, check the Dashboard > Content Types section in the docs
Image description

Now it's time to add some example data. As we are creative, we added more sophisticated data than "Lorem ipsum" :)
Image description

3. Get your OpenAPI Specification

This is a crucial step in Flotiq. Let's open your API Doc and download OpenAPI Specification.
Image description
Image description

We use the content of the downloaded file in the next step.

4. Add your Flotiq API to Meta-API

Why there is no predefined Flotiq API in the Meta-API catalog?

The Main concept of Flotiq is that your API Specification represents your set of content definitions literally. Your API represents your endpoints, with your models consisting of your properties. In short, Flotiq API contains different endpoints for each user to be more personalized.
We assume that you have an account on Meta-API platform and you are logged in. Go to the Catalog of API and click "Add an API".
Image description

In the Add an API to the catalog modal, go to the bottom and fill the Open API Specification field with data retrieved in step 2. Other fields (except Category) should auto-complete.
Image description

And that's it. We have our private Flotiq API in our private Meta-API Catalog. Now we can use it to create a Spell.

5. Create a Spell that connects Flotiq with any other API

When our API is added to Catalog, we can add a data flow between Flotiq and other applications. Go to the Spells section in Meta-API dashboard and click Create a new Spell.
Image description

In the Choose the API step, find your Flotiq API.
Image description

Next, choose Connector, which means the configurable endpoint you want to call. Select a products list endpoint (GET /api/v1/content/product). Click Use.
Image description

Now it is time to connect Flotiq with other applications.
In our example we choose Google Spreadsheet API, and append Connector (which match POST /v4/spreadsheets/{spreadsheetId}/values/{range}:append endpoint).
A "Google Spreadsheet Append" connector is responsible for appending the values to a selected spreadsheet.
Image description
Image description

Next, click "Continue with 2 connectors" and go through the following steps with values to create your Spell.
Image description

Now you should see the edit Spell view.
Image description

6. Authenticate your Connectors

As you can see in the right sidebar, there are a few alerts. To update our configuration, click the "Fix" button next to Flotiq User API.

Image description

In the settings panel for Flotiq User API, click "Configure Authentication", and paste here your API Key from Flotiq

Note: If you are new to Flotiq, check how to obtain your Flotiq API Key
Image description

Approve your settings and go back to the errors list clicking "x" in the sidebar.
Image description

The next step is to authenticate the Google Spreadsheet connector. Click "Fix" next to "Google Spreadsheet".
Image description

This configuration is slightly different from Flotiq because it uses oAuth2.0. Use the "One-click Auth with Meta Api" wizard to authenticate.
Image description

There are also a few properties that should be updated in Google Spreadsheet Connector settings.
Please set: - spreadsheetId value to spreadsheet id obtained in the first step, - valueInputOption to USER_ENTERED, - range to A2.
Image description

We are almost ready!

7. Add code to process data

In the previous steps, we were focused on the sidebar in the spell configuration view. Now let's move to the section with code.
It is up to you what transformations you will create here. In our case, we will sum up all product storage quantities and place them next to the current date.
So, update the code - add this snippet below //#endregion End of Flotiq User API connector:

const dataRow = [
    (new Date()).toLocaleString(), // date
    flotiqUserApiResult.data.reduce((sum, prod) => (sum + prod.stock_quantity), 0) // quantity
];
Enter fullscreen mode Exit fullscreen mode

And in the Google Spreadsheet connector code replace null with our dataRow:

values: [
        dataRow
    ]
Enter fullscreen mode Exit fullscreen mode

Image description

That's it! It's so simple to code your custom transformations. Ready to test?

8. Test the flow

Click the "Run" button on the right-bottom to test our Spell.
Image description

Run succeeded. You can browse execution logs in the dashboard, but more exciting is our spreadsheet. Meanwhile, we made a few extra "Runs" and changed product quantities in the Flotiq dashboard.
Image description

Next steps

As you can see, there are almost endless possibilities to use Flotiq and Meta-API integration.
We suggest you play with Flotiq and Meta-API:

Top comments (0)