Blog / Integrations
With the advent of low-code/no-code platforms, building applications has become much easier. Let’s dive into the functioning and step-by-step guide to integrate external API endpoints into the AppGyver.
With the advent of low-code/no-code platforms, building applications has become much easier. The AppGyver platform is one such no-code platform where you can develop applications without having to code.
Now that we have a clear understanding of the platform, let’s dive into the functioning and step-by-step guide to integrate external API endpoints into the platform.
Step 1: Open your Project in AppGyver & Go to the Data button
Open your project on AppGyver, go to the Data button at the top of the toolbar, to create new external data resources or edit the existing ones.
Step 2: Add Data Resources
Once you’re into the data tab go to the Add Data Resources by clicking on plus sign in the top right corner, which will have a dropdown of 5 different options from which we will select - Rest API direct Integration to integrate external API endpoint.
Step 3: Base Configuration
The resource configuration is split into base configuration and method configurations for GET collection, GET record, POST, PUT/PATCH and DELETE.
Here, you define the base configuration that will be applicable to all the API methods
Here, we will be using Canonic to generate all the required APIs endpoints that we need to integrate with AppGyver.
👉🏻 Canonic is a low-code platform for your backend that helps you craft APIs in minutes.
In Canonic, you can directly get your Base Configuration by:
Going to your project in Canonic → Docs section → Copy the URL
Once you have your URLs ready, get back on AppGyver and place them at the required spot as shown in the picture below.
With that, you have your base configuration ready! 💃
Now that we have our base config in place, let’s see how can we integrate all these different methods into our project.
The base URL will automatically reflect in all other tabs. So, all you now have to do is fill in the Relative path/ Response key and Test API call response.
For Get Collection, there’s no specific id required because we are retrieving the collection of data from a server.
Thus, will go in with the Relative path and Response key.
Response key - The JSON response from an API might include the actual data we are interested in inside a key of the main response object.
Which in Canonic’s case is data:
If you’ve correctly followed and tested, you’ll get something like this:
Similarly, all you have to do is copy the required URL which you get readily available with Canonic and put them in dedicated fields.
GET method is used to retrieve data from a server at the specified resource.
Now to retrieve some data, we need to specify which data we are required to fetch, and hence we’ll need to pass the id and Access Tokens (represent the authorization of a specific application to access specific parts of a user's data).
Access Tokens: This broadly has two steps
As we are using Canonic as our backend, the access tokens can be created within minutes.
Go to settings→ AccessTokens → Create A New Token → Give it a name and provide access → click on create → copy the value.
2. Embedding access Token in AppGyver:
In AppGyver, the access tokens need to be embedded in the HTTP Header section, where you’ll require the below fields:
In the config tab of AppGyver → Http Header → On the right-hand side panel fill all the required details:
Key: The exact key name of the authorization, usually Authorization
Label: Name this as per your understanding
Value type: Text
Description: Description of the token
Go to the Test tab to run a test and in the URL placeholder, mention the id of the product that we copied earlier.
Once the access token is in place, run a test (here you need to mention the id as well) and that’s it!
You’ve successfully retrieved data from a server ✅
A POST is used to create or update a resource on a server. POST data is sent to the server in the request body of the HTTP request.
Here, we will require to specify the data that we want to store in the server.
Let’s see how to do that 👇
As the base URL is already set we will just paste the required specific field on Relative path’s section.
Sending the Payload
Once done, Go to the test tab and custom object and mention the required name and description which will get updated in your backend, in this case - Canonic.
Similarly to delete the record, we will need to pass a specific id (which we want to delete).
(Ref above to get Product id from Canonic)
The same process will apply to PUT in which the method will search for the input if found will update it or will create a new record, quite similar to the steps we did in POST method.
If you will follow the steps right, you will be able to external API endpoints in AppGyver with ease! 🚀
Yes, that was it. Here are all the links you’ll require:
AppGyver - A no-code platform, enables you to build apps for all form factors, including mobile, desktop, browser, TV, and others.
Canonic - The simplest way for agile teams to build internal tools. You can create, manage & deploy powerful serverless backends for your websites, apps, and microservices using an intuitive low-code interface in minutes.
Start using canonic's fullstack solution to build internal tools for free