π¨ Integrations
Upstash is a cloud-native serverless service with Redis compatible that provides an easy way to integrate Redis functionality into applications. In the context of ILLA Cloud, the Upstash integration allows users to leverage the features and capabilities of Upstash within the ILLA Cloud application.
This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Upstash in a few simple steps. ILLA Cloud is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Upstash, visit their website at https://upstash.com/(https://upstash.com/) Letβs begin!
Create an account on Upstash. You may sign in using your Amazon, Github or Google accounts alternatively.
After signing into your account on Upstash
, click on the Create database
button in Redis.
On the Upstash
dashboard, click Create database
.
Note: you can only have ONE database in the free tier.
For the database configuration, You can name your database the way you want. Here we name it db1
. Choose the primary region
and read region
based on your write and read user locations. Enable TSL/SSL
. Itβs optional to enable Eviction.
Click the create
button, we now have a database ready to use.
There are two ways to create a resource in Illa after signing into your Illa account.
Sign in to your Illa account, select **Resources**
on the top of the page, and click **Create New**
button.
Select Upstash
from the database list.
Connect to the database with the required parameters described in Connection Settings
below.
Click **Test Connection**
to see if we can successfully connect to the database. If yes, click Save Resources
, else, double check the hostname, port, username, and password is correct.
After creating a resource, the ready Upstash
will display as shown.
Sign in to your Illa account, create a project in Illa Builder on the **App**
page, and navigate to the Action List
at the bottom of the page. Click **new**
, then select Upstash
from the database list. Then, connect to the database with the required parameters described in Connection Settings
below.
Click **Test Connection**
to see if we can successfully connect to the database. If yes, click Save Resources
, else, double check the hostname, port, username, and password is correct.
Here we need to provide information for connecting to the Upstash database.
Properties | Required | Description |
---|---|---|
Name | required | The name for resource when creating actions in the ILLA. |
Hostname | required | The URL or IP address for your database |
Port | required | The server hostβs port number that you should use to connect. If you donβt specify a port, default port is β6379β. |
Password | required | Use this password for authentication. |
SSL option | required | whether to enable the SSL (recommend to enable) |
In order to fill in the required information, go to the database dashboard page and click on the database we have just created in your Upstash.
You may copy it by hovering the mouse over the endpoint, password, and port and clicking the copy text icon behind it.
In the Upstash integration configuration in ILLA Cloud, put the name you want for Name
, Endpoint
for hostname
, given Port
for Port
, and copy the encrypted Password
for Password
.
We have created an Upstash resource, we can add the action by selecting Upstash from the action list and choosing the Create action
button.
Now we have added the Upstash server as an action to our building page.
Properties | Description |
---|---|
Redis query | use query to retrieve and manipulate data stored in your Redis database |
Transformer | transforming data into the style you like using JavaScript |
Example usage:
GET
command to retrieve the value associated with a specific key. For example: GET key
.SET
command to set the value of a key. For example SET key value
.HSET
command to set a field-value pair in a hash. For example: HSET hashKey field value
.HGET
command to retrieve the value of a specific field in a hash. For example: HGET hashKey field
.LPUSH
or RPUSH
command to add an element to the beginning or end of a list, respectively. For example: LPUSH listKey value
.LRANGE
command to fetch a range of elements from a list. For example: LRANGE listKey start end
.SADD
command to add one or more elements to a set. For example: SADD setKey value1 value2
.SMEMBERS
command to get all the members of a set. For example: SMEMBERS setKey
.ZADD
command to add elements to a sorted set along with their scores. For example: ZADD sortedSetKey score1 member1 score2 member2
.ZRANGE
command to fetch a range of elements from a sorted set based on their scores. For example: ZRANGE sortedSetKey start end
.Note: You can refer to the Redis documentation for a fully comprehensive list of commands and their usage.
Next, we will demonstrate how to map the data from **Upstash**
to the table
component.
Let us create a table in Upstash called employee_profile
, including 4 columns name
, level
, age
, and married
.
Then we can create a new action for Upstash from the action list in ILLA Cloud and name upstash2.
To list all data in employee_profile put the code snippet below in the Redis query section.
GET employee_profile
Since the output data is a list of dictionary pair, we want to transform it into an array. In Transformer, enable it and put down the code below.
const jsonString = data[0].result;
// Parse the JSON string into a JavaScript object
const jsonData = JSON.parse(jsonString);
// Access the "employees" property and map it to a new array
const mappedArray = jsonData.employees.map((employee) => ({
name: employee.name,
level: employee.level,
age: employee.age,
married: employee.married,
}));
return mappedArray;
Click Save
and Run
to activate this action.
Next, we can add a table
component to the canvas.
In the Data Source
field in the Inspect page after clicking on the component, put {{upstash2.data}}
to retrieve the data from upstash.
The final look should be as shown.