Upstash

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!

Set up your Back end on Upstash

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.

Create Upstash in ILLA Cloud

There are two ways to create a resource in Illa after signing into your Illa account.

• Create in Resources

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.

• Create in Builder

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.

Connection Settings

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.

Create Actions

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.

Configure Upstash

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:

1. Get Values:
   • Get a value: Use the GET command to retrieve the value associated with a specific key. For example: GET key.
2. Set Values:
   • Set a value: Use the SET command to set the value of a key. For example SET key value.
3. Hash Operations:
   • Set field-value pairs in a hash: Use the HSET command to set a field-value pair in a hash. For example: HSET hashKey field value.
   • Get a value from a hash: Use the HGET command to retrieve the value of a specific field in a hash. For example: HGET hashKey field.
4. List Operations:
   • Add an element to a list: Use the LPUSH or RPUSH command to add an element to the beginning or end of a list, respectively. For example: LPUSH listKey value.
   • Retrieve elements from a list: Use the LRANGE command to fetch a range of elements from a list. For example: LRANGE listKey start end.
5. Set Operations:
   • Add elements to a set: Use the SADD command to add one or more elements to a set. For example: SADD setKey value1 value2.
   • Retrieve elements from a set: Use the SMEMBERS command to get all the members of a set. For example: SMEMBERS setKey.
6. Sorted Set Operations:
   • Add elements to a sorted set: Use the ZADD command to add elements to a sorted set along with their scores. For example: ZADD sortedSetKey score1 member1 score2 member2.
   • Retrieve elements from a sorted set: Use the 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.

Use case

Next, we will demonstrate how to map the data from **Upstash** to the table component.

Step 1 Add an action

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.

Step 2 Add Components

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.

Step 3 Test

The final look should be as shown.