Integration with Meta-API
Tags: api, tutorial, headlesscms, webdev
Published: 2022-06-08 07:51:16

[Flotiq](flotiq.com) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p88h33eezujn4565or1f.png)
 
## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhxbewnzqcpukkbq9e84.png)
 
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39isf33792k0em2o5yyy.png)
 
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](https://flotiq.com/docs/panel/predefined-content-types/) with an extra property named `stock_quantity`.

> Note: If you are new to Flotiq, check the [Dashboard > Content Types](https://flotiq.com/docs/panel/content-types/) section in the docs
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibr5jix63cvhmnh5nmgl.png)
 
Now it's time to add some example data. As we are creative, we added more sophisticated data than "Lorem ipsum" :)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16qu4c6puw75lo4ps0t3.png)
 
### 3. Get your OpenAPI Specification

This is a crucial step in Flotiq. Let's open your `API Doc` and download `OpenAPI Specification`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwqt1lfv79jiui00om4h.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn5rtn41pgvm5wus3ldj.png)
  
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkav21qhgmzupc6scgza.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4je67ak06oww7tfv7x4.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggaine4jisghgkodisi2.png)
 
In the `Choose the API` step, find your Flotiq API.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bbdh96do7qtiom9y6a9.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pcngyidulvbwxrymfvt.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2ba1tttccmzqvt2rj1y.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en32tuaxqt87cd0izfan.png)
  
Next, click "Continue with 2 connectors" and go through the following steps with values to create your Spell.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93uljdkjqtu4wgn5ifes.png)
 
Now you should see the edit Spell view.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4el3skbu32bdu47h0fv.png)
 
### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmtvu0cma29khbj0mpi3.png)
 
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](https://flotiq.com/docs/API/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qoqkxmb7lxdvn6b580e.png)
 
Approve your settings and go back to the errors list clicking "x" in the sidebar.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc3mowx1wdbfw21zskxg.png)
 
The next step is to authenticate the Google Spreadsheet connector. Click "Fix" next to "Google Spreadsheet".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1tpbt6o5lr2pc4hweju.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db2ylu7aso35k5lwi6ls.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl0pbd73b8gpit0wpsfd.png)
 
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
];
```
And in the Google Spreadsheet connector code replace null with our dataRow:
```  
values: [
        dataRow
    ]
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydyt05ytw9wm14py6bnb.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua2hxadt3nwiqzceu9w4.png)
 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp4eiuu44mgc6mt0nf9i.png)
 
## 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:

- [Deploy your Spell](https://docs.meta-api.io/docs/deployment/versions) to run it with a simple HTTP request
- Try to [schedule the Spell](https://docs.meta-api.io/docs/deployment/Scheduler) - run our stock report once an hour
- Fire the Spell automagically after product update using [Flotiq Webhooks](https://flotiq.com/docs/panel/webhooks/)