Skip to main content

Neon

Neon in Illa is a database integration that allows you to connect and interact with a Neon database. Neon is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.

With the Neon integration in Illa, you can query, insert, update, and delete data from a Neon database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Neon database.

This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Neon in a few simple steps. ILLA 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 Neon, visit their website at https://neon.tech/ Let's begin!

Set up your Back end on Neon​

On the Neon dashboard, click New project and set the name to adminPanel.

neon_create_project

Then we can navigate to the project page.

neon_create_project_1

Importing data through sample SQL queries.

neon_create_sql

We now have sample database set up.

neon_sample_data

Create Neon​

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

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select Neon from the database list.

action_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 Neon will display as shown.

neon_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select Neon from the database list. Then, connect to the database with 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 Neon database.

neon_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Connection stringoptionala configuration setting that is used to specify the details of a connection to an external data source, such as a database or API.
HostnamerequiredThe URL or IP address for your database
PortrequiredThe server host's port number that you should use to connect. If you don't specify a port, default port is '5432'.
DatabaserequiredThe name of the database
Usernamerequiredthe username you wish to use when logging in to the Neon server.
PasswordrequiredUse this password for authentication.

There are two ways to fill in the information for configuring Neon.

  • Parsing given connection string

In Neon project page, scrolling done, we have a given connection string in Direct Connection.

neon_connection

Note: Tapping the blur shows the hidden numbers, then we may copy it.

After pasting the string into the connection string text area in configuration, click Parse.

neon_parsing

We have all the information filled out automatically for us.

neon_parse_done

  • Manually Fill out the information.

We can also find required information from the project page and manually fill them in to the configuration in Illa.

Create Actions​

We have created a Neon resource, we can add the action by selecting Neon from action list and choosing the Create action button.

neon_resource_list

Now we have added the Neon server as an action to our building page.

neon

Configure Neon​

PropertiesDescription
SQL querysql commands to fetch (select), insert, update, delete data from database
Transformertransforming data into the style you like using JavaScript

Example usage:

  • Select
SELECT * FROM users ORDER BY lastname;
  • Insert
INSERT INTO users

    (firstname, lastname, email)

VALUES

    (

        {{ NewUser.data.firstNameInput }},

        {{ NewUser.data.lastNameInput }},

        {{ NewUser.data.emailInput }}

    );
  • Update
UPDATE users
  SET firstname = '{{form1.updatedProfile.first }}'
  WHERE id = {{ form1.updatedProfile.uid }};
  • Delete
DELETE FROM users WHERE id = {{ form1.updatedProfile.uid }};