[ad_1]
When working with no-code tools like Bubble, dealing with API data can often be frustrating. You may find yourself in situations where you need to manipulate or transform data before you can successfully use it in your application. Unfortunately, the limitations of no-code tools can make this task feel like an uphill battle. You may find yourself turning to maintenance problems or giving up altogether.
But what if there was a way to overcome these limitations? Enter the concept of a proxy server. By setting up a proxy server, you can intercept API calls made by your codeless application and make data changes quickly. This means you can take the raw API response, modify it to suit your needs, and pass it to your codeless tool for seamless integration.
Now, the idea of setting up a proxy server can sound intimidating, especially if you’re new to coding. But here’s the good news: it’s not as scary as it seems. With the right approach and tools, you can create a serverless API host that handles data transformations, without the need for complex infrastructure or server management.
In this article, we will guide you step by step in creating a serverless API proxy server designed for your application with no code. This proxy server will act as a bridge between your no-code platform and the API, allowing you to customize API responses to suit your application’s needs. By the end of this guide, you’ll have a solid solution that improves your no-code development skills and opens up new ways to work with API data.
So, let’s dive in and see how you can control your API’s data transformations and streamline your codeless development workflow.
Cloudflare staff
Cloudflare Servers are serverless cloud computing environments…in other words, you can run some JavaScript in the cloud and not have to deal with setting up your own server. And the best part is Cloudflare has a generous free plan.
Sign up for Cloudflare
First register an account with Cloudflare if you don’t have one. You can skip the register on the website and click on “Check out other products”.
Create a Hello World Worker
On the left nav, click “Employees and Pages”. In the middle of the screen click on “Create Employee”.
Next, you create a simple Hello World worker. Click on “Apply” at the bottom of the screen and finally, click on the applied URL, which looks like this:
Congratulations! Your Hello World worker is active.
Agent and Transformer
Set up a proxy
Back on the screen with the employee URL, click “Edit Code”.
On the left will be the Hello World code. Remove this code and replace it with:
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const apiKey = request.headers.get('Authorization');
if (!apiKey) {
return new Response('Missing Authorization header', { status: 401 });
}
const profileKey = request.headers.get('Profile-Key');
let apiUrl;
let requestOptions;
if (request.method === 'GET') {
// Get the API endpoint from the query parameter
apiUrl = new URL(request.url).searchParams.get('endpoint');
if (!apiUrl) {
return new Response('Missing endpoint parameter', { status: 400 });
}
// Decode the URL-encoded endpoint
apiUrl = decodeURIComponent(apiUrl);
requestOptions = {
method: 'GET',
headers: {
'Authorization': apiKey,
'Content-Type': 'application/json',
},
};
if (profileKey) {
requestOptions.headers['Profile-Key'] = profileKey;
}
} else if (request.method === 'POST' || request.method === 'PUT') {
// Parse the request body as JSON
const requestBody = await request.json();
apiUrl = requestBody.endpoint ?? new URL(request.url).searchParams.get('endpoint');
if (!apiUrl) {
return new Response('Missing endpoint parameter', { status: 400 });
}
requestOptions = {
method: request.method,
headers: {
'Authorization': apiKey,
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
};
if (profileKey) {
requestOptions.headers['Profile-Key'] = profileKey;
}
} else {
return new Response('Method not allowed', { status: 405 });
}
try {
// Make the API request with the appropriate options
const response = await fetch(apiUrl, requestOptions);
// Parse the response JSON
const data = await response.json();
// Transform the data structure based on the endpoint
const transformedData = transformData(data, apiUrl);
// Return the transformed data as the response with the returned response.status
return new Response(JSON.stringify(transformedData), {
status: response.status,
headers: { 'Content-Type': 'application/json' },
});
} catch (error) {
// Handle any errors
return new Response('Error occurred', { status: 500 });
}
}
function transformData(data, apiUrl) {
const endpoint = apiUrl.split('/').pop();
switch (endpoint) {
case 'endpoint':
// Check if the data is an object with a "data" property
if (data && typeof data === 'object' && 'data' in data) {
// Transform the data structure
const transformedData = {
data: [data.data],
};
return transformedData;
}
break;
case 'user':
// Check if the user endpoint is an object
if (data && typeof data === 'object') {
// Add in the timestamp
const transformedData = {...data};
data.myAddedDate = (new Date()).toISOString();
return transformedData;
}
break;
// Add more cases for other endpoint checks if needed
default:
break;
}
// Return the original data if no transformation is needed
return data;
}Click “Save and Apply” in the upper right corner.
There are two main functions in this code: handleRequest again transformData.
I handleRequest function makes a proxy for API calls. You will not need to change this function.
I transformData it is a function that performs data transformation and you will need to update this to handle your data needs. More on this later.
You can also find this code on github.
For now, let’s try to run this code.
Start proxy – GET
A few things are required to test the proxy server with the Ayrshare public API, but you are welcome to use any API:
Let’s start with a GET call to /user endpoint. In the middle panel at the end of your URL
?endpoint=https%3A%2F%2Fapp.ayrshare.com%2Fapi%2FuserThis is the URL-encoded value, which it translates to https://app.ayrshare.com/api/user.
For example:
Below the URL entry click on “+ Add Header”. Enter the key “Authorization” and the value “Bearer API_KEY” where API_KEY is your API key found in the Ayrshare Dashboard.
Now click on the “Submit” button.
You should see on the right panel 🟢 200 if everything is successful. Anywhere GET The URL may be used (be sure to include the URL code) through a proxy server.
Start proxy – SEND
You can do it again POST requests.
Change the URL to call the statistics repository, which retrieves the statistics from the post. Modify the query parameter of your employee URL to:
?endpoint=https%3A%2F%2Fapp.ayrshare.com%2Fapi%2Fanalytics%2FpostAlso, check the HTTP path from GET to POST (descending).
In the “Body” text box, enter:
{
"id": "bBbtup4YDUm6agvSkQA4",
"platforms": [
"facebook"
]
}When i id the ID of the published post, which you can easily do in the “Post” section of the Ayrshare dashboard.
After entering all the information, click “Submit”. The answer should also be 🟢 200.
Data Transformation
The last part transforms the data into your needs.
In the code section above:
function transformData(data, apiUrl) {
const endpoint = apiUrl.split('/').pop();
switch (endpoint) {
case 'endpoint':
// Check if the data is an object with a "data" property
if (data && typeof data === 'object' && 'data' in data) {
// Transform the data structure
const transformedData = {
data: [data.data],
};
return transformedData;
}
break;
case 'user':
// Check if the user endpoint is an object
if (data && typeof data === 'object') {
// Add in the timestamp
const transformedData = {...data};
data.myAddedDate = (new Date()).toISOString();
return transformedData;
}
break;
// Add more cases for other endpoint checks if needed
default:
break;
}
// Return the original data if no transformation is needed
return data;
}Within the switch statement, specify separate endpoints such as “posts” or “stats”. Then transform the data based on what that endpoint returns. In this example, if endpoint ends with “endpoint” and if there is a field named “data” in the data object, convert the object to an array and return the converted data. In the second example, if the end ends with “user” and “data” is an object, add the current timestamp myAddedDate in the thing.
You may add additional endpoints to the switch statement and actions at those endpoints, such as changing all element values from uppercase to lowercase.
The conclusion
If you’re comfortable with codeless tools but want to take your projects to the next level, learning a little JavaScript can be a game changer. By integrating JavaScript into your codeless operations, you can open up a whole new world of possibilities and customize your tools to better suit your needs.
But what about the complexity of setting up and maintaining servers? This is where serverless operations come into play. With serverless computing, you can run your JavaScript code without worrying about the underlying infrastructure. This means you can focus on writing and deploying your code, while the serverless platform takes care of the rest.
Now, if you’ve never written a line of JavaScript before, the thought of diving into it might seem intimidating. But don’t be afraid! With a little testing and the help of online resources like ChatGPT, you can quickly get up to speed. Start small, try the basic concepts, and gradually build your skills.
By combining the power of JavaScript and serverless functions with your existing codeless tools, you can streamline your workflow, automate repetitive tasks, and create complex solutions. So don’t be afraid to step out of your comfort zone and embrace the world of code. With a little effort and guidance, you’ll be surprised how much easier your life can be in a code-free world.
Source link
