A simple front-end for your MariaDB datasource
11
February
2022
Resources

A simple front-end for your MariaDB datasource

A simple front-end for your MariaDB datasource
Vihar Kurama
0
 minutes ↗
#
crud
#
mysql
#
databases
#
guide
Resources

There are many parts to building an app, and designing UI elements can take up most of a developer’s time when building from scratch. However, with Appsmith, it’s possible to create a fully functional and custom frontend in minutes. A vast array of pre-built UI components that is widgets are available to help you build good-looking applications. Connecting data sources with Appsmith takes a few minutes, and you can quickly build tools on top of the database of your choice. For example, you can create admin panels to manage product catalogues, read content data from your database and use that to populate your e-commerce website, and then write more data and update your existing orders in the database. There are so many possibilities!

In this blog, I will teach you how to build a frontend that can connect to MariaDB as a datasource.

MariaDB Server is one of the most popular open-source relational databases. It’s made by the original developers of MySQL and guaranteed to stay open source. It is part of most cloud offerings and the default in most Linux distributions. It is built upon the values of performance, stability, and openness.

Getting Started: Connecting MariaDB on Appsmith

On Appsmith, it’s pretty straightforward to establish a connection with any datasource, including MariaDB; be it on cloud, self-hosted version or local environment.

What we need to make the connection are the endpoint, database name, and user credentials. With this in mind, let’s get started.

  • Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  • Create a new application under the dashboard under your preferred organization.
  • On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
  • Next, click on the Now, navigate to the Create New tab and choose MySQL datasource, you’ll see the following screenshot:
CleanShot 2022-02-03 at 00.54.54@2x.png
  • When you’re using MariaDB on a hosted service, all these details can be found under the configuration settings. For this example, I’m using a free MariaDB RDS on Amazon Web Services (AWS).
CleanShot 2022-02-03 at 00.56.52@2x.png
  • Rename the Datasource to MariaDB CRUD by double-clicking on the existing one.

Here’s what the configuration would look like:

CleanShot 2022-02-03 at 00.57.58@2x.png
  • Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. If it returns a successful message, hit the ‘Save’ button to establish a secure connection between Appsmith and MariaDB.

Creating a New Table on MariaDB

We are done with the basic configuration. Now, let’s create a new table and seed it to build a fully customisable CRUD app on MariaDB.

Note: After the connection is established, we can see all the (tables) under the connected datasource.

  • Click on the + icon next to Datasource and click on Create New + from the MYSQL CRUD we’ve just created.
  • This will redirect you to the query pane, where you can write MariaDB SQL queries, now rename the query to seedData, and choose to create from the template and paste the following in the query body:
create table projects(
    project_id int auto_increment,
    project_name varchar(255) not null,
    created_at timestamp default current_timestamp,
    primary key(project_id)
);

INSERT INTO projects (project_name, created_at)
  VALUES ('appsmith', '2022-02-02T19:11:23');


This is a simple SQL query that’ll create a projects table, the idea for us is to build a simple CRUD application, that’ll let us manage open-source projects.

Also, note that we’ve seeded the table with an insert statement where we added the appsmith project.

Alrighty, not that our table is created, let’s get into CRUD.

CRUD on MariaDB with Appsmith

Implementing the Read Operation

First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:

  • Click on the + icon next to the datasources and choose to Create New + from the MariaDB CRUD datasource.
  • Rename the query to getProjects
  • Copy the following SQL script to query all the Projects from the projects table:
SELECT * FROM projects LIMIT 10;


  • This is a simple query that returns all the projects present in the sample data item. Hit the RUN button to view all the results.
CleanShot 2022-02-03 at 01.07.32@2x.png

We now have our query; let's bind this onto the table widget; for this follow the below steps:

  • Click the + icon next to widgets on the sidebar, search for the table widget, and drag and drop it onto the canvas.
  • Configurations to any widget can be made through the property pane. Click on the table widget on the canvas, you will see the property pane docked to the sidebar on the right. Now, under the Table Data property, use the moustache syntax to bind the query:
{{getProjects.data}}


With this, we should see all the data displayed on the table. The column names can be configured and re-organized under the property pane.

CleanShot 2022-02-03 at 01.08.54@2x.png
Implementing the Create Operation

To add the create operation on MariaDB, let’s make UI.

  • Drag and drop a button widget onto the canvas. Open its property pane, set the onClick property to Open a New Modal, and choose Create New.
  • This will open up a new modal now; let’s drag and drop a few widgets to create a form that we can use to add new projects into our database.
CleanShot 2022-02-03 at 01.10.07@2x.png

Here, we have two input widgets to add to our project. We can configure the default values, labels, and placeholders by selecting the respective property panes. Now, let’s write the query that lets us create a new project on MariaDB.

Follow the steps below:

  • Click on the + icon next to the datasources and choose to Create New + from the MariaDB CRUD datasource
  • Rename the query to createProject
  • Copy the following SQL script:


Here, we have an insert query that collects all the data from the form widgets we've created. Note that we use the moustache syntax to bind the data from the widgets onto the query body.

Lastly, we’ll need to configure the submit button; for this, go back to the modal and set the button’s onClick property to execute a query and choose createProject under the events property:

CleanShot 2022-02-03 at 01.12.51@2x.png
Implementing the Update Operation

The Update operation is quite similar to the create operation. First, let’s build UI by creating a new custom column on the table by clicking on ADD A NEW COLUMN under the columns property.

Now, rename the column to Edit Project, and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a Button type. When clicked, a modal should open up with the necessary fields to update the item.

Now, copy-paste Modal1, and set the onClick property of the Edit Project button to open Modal2. Here, in the form, we can also set the default value to show existing information, to display this, use the selectedRow property from the table widget.

CleanShot 2022-02-03 at 01.14.09@2x.png

Let’s write the Edit query using SQL:

  • Click on the + icon next to the datasources and choose to Create New + from the MariaDB CRUD datasource
  • Rename the query to editProject
  • Copy the following SQL script:
UPDATE projects SET    project_name = {{Input1Copy.text}}'    created_at ='{{Input2Copy.text}}'WHERE  project_id = "{{Table1.selectedRow.project_id}}";


Here, we have an edit query that collects all the data from the form widgets on Modal2. Note that we use the moustache syntax to bind the data from the widgets onto the query body.

We’ll now need to configure the submit button; for this, go back to Modal2 and set the button’s onClick property to execute a query and choose **_editProject_** under the events property:

Implementing the Delete Operation

The delete operation is pretty straightforward with the Table’s selectedRow property; before we dive into it, let’s create a new column on the table and set it to the button. For this:

  • Create a new custom column on the table by clicking on Add a New Column under the columns property.
  • Now, rename this column to ‘Delete Project,’ and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a button type.

Now, let’s write the Delete query using SQL:

  • Click on the + icon next to the datasources and choose the Create New + from the MariaDB CRUD datasource
  • Rename the query to deleteProject
  • Copy the following SQL script:
DELETE FROM projects  WHERE project_id = {{Table1.selectedRow.project_id}};


Set the Delete Project button’s onClick property to run the deleteProject query.

With these four operations configured, you will be able to read and analyze information from your database, edit the data, add or delete information and update records.

If you’re interested in using a database that is not listed on our website as an integration, please let us know about it by raising a PR on Github and we will do our best to include it at the earliest.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

A simple Front-end for Your SnowflakeDB Datasource
1
February
2022
Resources

A simple Front-end for Your SnowflakeDB Datasource

A simple Front-end for Your SnowflakeDB Datasource
Vihar Kurama
0
 minutes ↗
#
ui
#
admin
#
databases
#
crud
Resources

Designing UI elements can take up a majority of a developer’s time when building from scratch. However, with Appsmith, it’s possible to create a fully functional and custom frontend in minutes. A vast array of pre-built UI components, that is widgets are available to help you build good looking applications. Connecting data sources with Appsmith takes a few minutes, and you can easily build tools on top of the database of your choice. For example, you can build admin panels to manage product catalogues, read content data from your database and use that to populate your e-commerce website, and then write more data and update your existing orders in the database. The possibilities are countless.

In this blog, I will teach you how to build a frontend that can connect to SnowflakeDB as a datasource.

Snowflake is a cloud-based data warehouse-as-a-cloud-service (SaaS for DB) that requires no hardware or software installation. Snowflake handles the maintenance and tuning of cloud infrastructure. It is based on a new SQL database engine with unique features and advantages over a more traditional data warehousing technology approach.

Getting Started: Connecting Snowflake on Appsmith

On Appsmith, it’s pretty straightforward to establish a connection with any datasource, including SnowflakeDB; be it on cloud, self-hosted version or local environment.

What we need to make the connection are the endpoint, database name, and user credentials. With this in mind, let’s get started.

  • Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  • Create a new application under the dashboard under your preferred organization.
  • On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
  • Next, click on the Now, navigate to the Create New tab and choose SnowflakeDB datasource, you’ll see the following screenshot:
CleanShot 2022-01-26 at 23.05.25@2x.png
  • When you’re using Snowflake cloud, all these details can be found under the SnowflakeCloud settings:
CleanShot 2022-01-26 at 23.07.29@2x.png
  • Rename the Datasource to SnowflakeDB CRUD by double-clicking on the existing one.

Here’s what the configuration would look like:

CleanShot 2022-01-26 at 23.09.58@2x.png
  • Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. If it returns a successful message, hit the ‘Save’ button to establish a secure connection between Appsmith and SnowflakeDB.

We are done with the basic configuration. Now, let’s use the default database from SnowflakeDB to build a fully customisable CRUD app.

Note: After the connection is established, we can see all the sample data (tables) under the connected datasource.

CleanShot 2022-01-26 at 23.13.45@2x.png

Now that we have the sample data, in the next section, let’s build a fully-fledged CRUD application (on the customer table) on top of our SnowflakeDB using Appsmith.

CRUD on SnowflakeDB with Appsmith

Implementing the Read Operation

First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:

  • Click on the + icon next to the datasources and choose to Create New + from the SnowflakeDB CRUD datasource
  • Rename the query to getCustomers
  • Copy the following SQL script to query all the Customers from the CUSTOMER table:
SELECT * FROM TPCDS_SF100TCL.CUSTOMER LIMIT 10;


  • This is a simple query that returns all the customers present in the sample data item. Hit the RUN button to view all the results.
CleanShot 2022-01-26 at 23.17.06@2x.png

We now have our query; let's bind this onto the table widget; for this follow the below steps:

  • Click the + icon next to widgets on the sidebar, search for the table widget, and drag and drop it onto the canvas.
  • Configurations to any widget can be made through the property pane. Click on the table widget on the canvas, you will see the property pane docked to the sidebar on the right. Now, under the Table Data property, use the moustache syntax to bind the query:
{{getCustomers.data}}


With this, we should see all the data displayed on the table. The column names can be configured and re-organized under the property pane.

CleanShot 2022-01-26 at 23.19.19@2x.png

Implementing the Create Operation

To add the create operation on SnowflakeDB, let’s make UI.

Drag and drop a button widget onto the canvas. Open its property pane, set the onClick property to Open a New Modal, and choose Create New.

This will open up a new modal now; let’s drag and drop a few widgets to create a form that we can use to add new customers into our database.

CleanShot 2022-01-26 at 23.36.01@2x.png

Here, we have five input widgets to add our customers. We can configure the default values, labels, and placeholders by selecting the respective property panes. Now, let’s write the query that lets us create a new customer on SnowflakeDB.

Follow the steps below:

  • Click on the + icon next to the datasources and choose to Create New + from the SnowflakeDB CRUD datasource
  • Rename the query to insertCustomer
  • Copy the following SQL script:

INSERT INTO TPCDS_SF100TCL.CUSTOMER (C_FIRST_NAME,C_LAST_NAME, C_BIRTH_YEAR, C_BIRTH_COUNTRY, C_EMAIL_ADDRESS) VALUES ({{Input1.text}}, {{Input2.text}}, {{Input3.text}}, {{Input4.text}}, {{Input5.text}});


Here, we have an insert query that collects all the data from the form widgets we've created. Note that we use the moustache syntax to bind the data from the widgets onto the query body.

Lastly, we’ll need to configure the submit button; for this, go back to the modal and set the button’s onClick property to execute a query and choose insertCustomer under the events property:

CleanShot 2022-01-26 at 23.54.51@2x.png

Implementing the Update Operation

The Update operation is quite similar to the create operation. First, let’s build UI by creating a new custom column on the table by clicking on ADD A NEW COLUMN under the columns property.

Now, rename the column to Edit Customer, and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a Button type. When clicked, a modal should open up with the necessary fields to update the item.

Now, copy-paste Modal1, and set the onClick property of the Edit Customer button to open Modal2. Here, in the form, we can also set the default value to show existing information, to display this, use the selectedRow property from the table widget.

CleanShot 2022-01-27 at 00.44.39@2x.png

Let’s write the Edit query using SQL:

  • Click on the + icon next to the datasources and choose to Create New + from the SnowflakeDB CRUD datasource
  • Rename the query to editCustomer
  • Copy the following SQL script:
UPDATE TPCDS_SF100TCL.CUSTOMER SET    C_FIRST_NAME = "{{Input1Copy.text}}",    C_LAST_NAME = "{{Input2Copy.text}}",    C_BIRTH_YEAR = "{{Input3Copy.text}}",    C_BIRTH_COUNTRY = "{{Input4Copy.text}}",    C_EMAIL_ADDRESS = "{{Input5Copy.text}}",WHERE C_CUSTOMER_ID = {{Table1.selectedRow.C_CUSTOMER_ID}};


Here, we have an edit query that collects all the data from the form widgets on Modal2. Note that we use the moustache syntax to bind the data from the widgets onto the query body.

We’ll now need to configure the submit button; for this, go back to Modal2 and set the button’s onClick property to execute a query and choose **_editCustomer_** under the events property.

Implementing the Delete Operation

The delete operation is pretty straightforward with the Table’s selectedRow property; before we dive into it, let’s create a new column on the table and set it to the button. For this:

  • Create a new custom column on the table by clicking on Add a New Column under the columns property.
  • Now, rename this column to ‘Delete Customer,’ and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a button type.

Now, let’s write the Delete query using SQL:

  • Click on the + icon next to the datasources and choose the Create New + from the SnowflakeDB CRUD datasource
  • Rename the query to deleteCharacter
  • Copy the following SQL script:

DELETE FROM TPCDS_SF100TCL.CUSTOMER_DEMOGRAPHICS  WHERE C_CUSTOMER_ID = {{Table1.selectedRow.C_CUSTOMER_ID}};


Set the Delete Character button’s onClick property to run the deleteCharacter query.

With these four operations configured, you will be able to read and analyze information from your database, edit the data, add or delete information and update records.


We’ve got extensive documentation on the SnowflakeDB datasource integration!

If you’re interested in using a database that is not listed on our website as an integration, please let us know about it by raising a PR on Github and we will do our best to include it at the earliest.

Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

A Simple Front-end for Your ArangoDB Datasource
27
January
2022
Resources

A Simple Front-end for Your ArangoDB Datasource

A Simple Front-end for Your ArangoDB Datasource
Vihar Kurama
0
 minutes ↗
#
crud
#
dashboard
#
ui
#
databases
#
graph-database
Resources

A major pain point around building apps is designing the UI elements. Fortunately, with Appsmith, you create a custom frontend in minutes. Connecting datasources with Appsmith takes a few minutes, and you can easily build tools on top of the database of your choice. For example, you can build admin panels to manage product catalogs, read content data from your database and use that to populate your e-commerce website, and then write more data and update your existing orders in the database. The possibilities are countless.

In this blog, I will teach you how to build a frontend that can connect to ArangoDB as a datasource. 

ArangoDB is a free and open-source native multi-model database system developed by ArangoDB GmbH. The database system supports three data models with one database core and a unified query language AQL. Being multi-model, ArangoDB allows you to run ad-hoc queries on data stored in different models.

Getting-Started: Connecting ArangoDB on Appsmith

On Appsmith, it’s pretty straightforward to establish a connection with any datasource, including ArangoDB; be it on cloud, self-hosted version or local environment. 

What we need to make the connection are the endpoint, database name, and user credentials. With this in mind, let’s get started. 

  • Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  • Create a new application under the dashboard under your preferred organization.
  • On your Appsmith application, click on the + icon next to Datasources on the left navigation bar under Page1
  • Now, navigate to the Create New tab and choose ArangoDB datasource, you’ll see the following screenshot:


  • When you’re using ArangoDB cloud or a self-hosted instance, all these details can be found under the instance settings:


  • Ensure that the SSL mode is enabled so as to establish a secure connection.
  • Rename the Datasource to ArangoDB CRUD, by double clicking on the existing one.

Here’s how the configuration would look like: 


  • Next, click on the Test button at the bottom right of the screen. This will help you with understanding whether your configuration is valid or not. If it returns a successful message, hit the ‘Save’ button to establish a secure connection between Appsmith and ArangoDB.

Adding Seed Data on ArangoDB

We are done with basic configuration. Now, let’s create a collection on ArangoDb and push some data from Appsmith to the database. For this, you’ll need to open the ArangoDB endpoint and use the graphical user interface (GUI).


Let’s name the collection as ‘Characters’ and set the type as ‘Document’ 

Now let’s seed the collection with some data on Appsmith. 

For this, follow the steps below:

  • Click on the + icon next to Datasource and click on Create New + from the ArangoDB CRUD we’ve just created.
  • This will redirect you to the query pane, where you can write ArangoDB AQL queries, now rename the query to seedData, and choose to create from the template and paste the following in the query body:
LET data = [
    { "name": "Robert", "surname": "Baratheon", "alive": false, "traits": ["A","H","C"] },
    { "name": "Jaime", "surname": "Lannister", "alive": true, "age": 36, "traits": ["A","F","B"] },
    { "name": "Catelyn", "surname": "Stark", "alive": false, "age": 40, "traits": ["D","H","C"] },
    { "name": "Cersei", "surname": "Lannister", "alive": true, "age": 36, "traits": ["H","E","F"] },
    { "name": "Daenerys", "surname": "Targaryen", "alive": true, "age": 16, "traits": ["D","H","C"] },
    { "name": "Stannis", "surname": "Baratheon", "alive": false, "traits": ["H","O","P","M"] },
    { "name": "Melisandre", "alive": true, "traits": ["G","E","H"] },
    { "name": "Margaery", "surname": "Tyrell", "alive": false, "traits": ["M","D","B"] },
    { "name": "Jeor", "surname": "Mormont", "alive": false, "traits": ["C","H","M","P"]}}
]
FOR d IN data
    INSERT d INTO Characters


  • Lastly hit the RUN button on the top-right on the query. This will add some seed characters to our database. 

Now that we have our seed data, in the next section, let’s build a fully-fledged CRUD application on top of our ArangoDB using Appsmith. 

CRUD on ArangoDB with Appsmith

Implementing the Read Operation

First, let’s read our seed data from the database and display it on a beautiful table widget. Follow the below steps:

  • Click on the + icon next to the datasources and choose to Create New + from the ArangoDB CRUD datasource
  • Rename the query to readCharacters
  • Copy the following AQL script to query all the items from the Characters collection:
FOR c IN Characters
    RETURN c
  • This is a simple for-loop that iterates on the collection and returns every item. Hit the RUN button to view all the results.


We now have our query; let's bind this onto the table widget; for this follow the below steps:


  • Click the + icon next to widgets on the sidebar, search for the table widget, and drag and drop it onto the canvas.
  • Configurations to any widget can be made through the property pane. Click on the table widget on the canvas, you will see the property pane docked to the sidebar on the right. Now, under the Table Data property, use the moustache syntax to bind the query:
{{readCharacters.data}}


With this, we should see all the data displayed on the table. The column names can be configured and re-organized under the property pane. 

Implementing the Create Operation

To add the create operation on ArangoDB, let’s make UI. 

  • Drag and drop a button widget onto the canvas. Open its property pane, set the onClick property to Open a New Modal, and choose Create New.
  • This will open up a new modal now; let’s drag and drop a few widgets to create a form that we can use to create new characters in our database.


Here, we have three input widgets, a checkbox, and a multi-select widget to add our characters. We can configure the default values, labels and placeholders by selecting the respective property panes. Now, let’s write the query that lets us create a new item on ArangoDB. 

Follow the steps below:

  • Click on the + icon next to the datasources and choose to Create New + from the ArangoDB CRUD datasource
  • Rename the query to insertCharacter
  • Copy the following AQL script:
INSERT {
    "name": "{{Input1.text}}",
    "surname": "{{Input2.text}}",
    "alive": {{Checkbox1.isChecked}},
    "age": {{Input3.text}},
    "traits": {{MultiSelect1.selectedOptionValues}}
} INTO Characters


Here, we have an insert query that collects all the data from the form widgets we've created. Note that we use the moustache syntax to bind the data from the widgets onto the query body.

Lastly, we’ll need to configure the submit button, for this, go back to the modal and set the button’s onClick property to execute a query and choose insertCharacter under the events property:


Implementing the Update Operation

The Update operation is quite similar to the create operation.

  • Let’s first build UI by creating a new custom column on the table by clicking on ADD A NEW COLUMN under columns property.
  • Now, rename the column to Edit Character, and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a Button type. When clicked, a modal should open up with the necessary fields to be able to update the item. 
  • Now, copy paste Modal1, and set the onClick property of the Edit Character button to open Modal2. Here, in the form, we can also set the default value to show existing information, to display this, use the selectedRow property from the table widget.


Let’s write the Edit query using AQL:

  • Click on the + icon next to the datasources and choose to Create New + from the ArangoDB CRUD datasource
  • Rename the query to editCharacter
  • Copy the following AQL script:
REPLACE "{{Table1.selectedRow._key}}" WITH {
    "name": "{{Input1Copy.text}}",
    "surname": "{{Input2Copy.text}}",
    "alive": {{Checkbox1Copy.isChecked}},
    "age": {{Input3Copy.text}},
    "traits": {{MultiSelect1Copy.selectedOptionValues}}
} IN Characters


Here, we have an edit query that collects all the data from the form widgets on Modal2. Note that we use the moustache syntax to bind the data from the widgets onto the query body.

Next, configure the submit button, for this, go back to Modal2 and set the button’s onClick property to execute a query and choose editCharacter under the events property.


Implementing the Delete Operation

The delete operation is pretty straightforward with the Table’s selectedRow property, before we dive into it, let’s create a new column on the table and set it to the button. For this:

  • Create a new custom column on the table by clicking on Add a New Column under the columns property.
  • Now, rename this column to Delete Character, and click on the cog icon next to it, to configure column settings. Under this, we’ll see column-type properties set to a button type.

Now, let’s write the Delete query using AQL:

  • Click on the + icon next to the datasources and choose Create New + from the ArangoDB CRUD datasource
  • Rename the query to deleteCharacter
  • Copy the following AQL script:


REMOVE "{{Table1.selectedRow._key}}" IN Characters


Set the Delete Character button’s onClick property to run the deleteCharacter query. 


With these four operations configured, you will be able to read and analyze information from your database, edit the information, add or delete information and update records.

We’ve got extensive documentation on the ArangoDB datasource integration, along with a video explainer

If you’re interested in using a database that is not listed on our website as an integration, please let us know about it by raising a PR on Github and we will do our best to include it at the earliest. 
Join our growing community on Discord, and follow us on Youtube and Twitter to stay up to date.

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n
8
November
2021
Resources

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n

The Modern Stack to Build Internal Tools: Supabase, Appsmith, n8n
Vihar Kurama
0
 minutes ↗
#
applications
#
community
#
crud
#
automation
#
beginners
Resources

Developers spend quite a bit of time building internal tools, admin panels, and applications for back-office tasks that help automate everyday essential business processes. These involve multiple efforts, from maintaining a special database to writing lots of frontend and backend code. But, what if we told you that you could utilize a modern stack to build such applications that can help with your backend, frontend and automation tasks? Sounds good right? It is!

We’re happy to introduce a great new stack to build applications: The Supabase, Appsmith and n8n stack (SAN Stack) for developers to build and maintain modern custom internal tools.

What is the SAN Stack?

SAN stands for Supabase, Appsmith and n8n, after the three emerging and notable software that makes up the stack.

Supabase: The open-source firebase alternative to creating a backend in minutes. Start your project with a Postgres database, authentication, instant APIs, real-time subscriptions and storage.

Appsmith: An open-source framework to build custom business software with pre-built UI widgets that connect to any data source, and can be controlled extensively using JavaScript.

n8n: An extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your custom functions, logic and apps.

This stack lets you build any application within minutes. You can use Supabase for the database and backend, Appsmith for UI and adding functionality, and n8n for automating background tasks.

One of Appsmith’s co-founders and head of product, Nikhil Nandagopal broke down the basics of app building into three steps.

CleanShot 2021-11-08 at 11.20.37@2x.png

This has gained quite some traction among developers, especially those looking to build internal tools or applications.

Why Supabase, Appsmith, and n8n?

  • Free / Opensource: Supabase and Appsmith are fully open-sourced and can be self-hosted on their servers. While n8n follows a fair-code distribution model and always has visible source code, which is available to self-host.
  • Low-code yet high functionality: All three platforms follow the principles of the low-code model to help developers deploy and scale their applications in the fastest way possible. However, devs can utilize SQL, JavaScript, and data structures to customize their applications.
  • Editing Experience: Supabase, Appsmith, and n8n have an excellent UI interface and provide rich editing and debugging experience for developers right from the beginning. Both Appsmith and n8n provide a drag and drop interface for building UI and automation workflows, respectively. In comparison, Supabase offers a live SQL editor to test out and play with your database and has the power to export them into APIs directly from the platform.
  • Collaboration: When working with teams, all three platforms offer great collaboration tools; you can share these applications or workflows with anyone and set specific permissions such as view-only or edit mode. They are consistently being improved in their future roadmap.
  • Self-hosted: Developers can self-host all three platforms on their servers for free. It is useful when you want your data to be more secure, have complete control over customization, and have custom domain options.
  • Fantastic Community: The community is incredible across all three platforms; they provide excellent support and a transparency roadmap. New feature requests or existing bugs are immediately taken care of based on the priority. And with a great community, content gets better and better, and they provide rich documentation and many tutorials for devs to get started.

Build a Simple Ticket Manager Using SAN Stack

There are so many tools and applications that can be built across the SAN stack. Here are a couple of examples: An Employee Survey Dashboard and a Ticket Management Admin panel.

Using the SAN stack, you can build any dashboard in just minutes.

As an example, I will show you how to create a support dashboard manager application.

Using this application:

  • Users will be able to create or raise new tickets for a particular query
  • The support team will be able to see these tickets and assign them to engineers
  • When the tickets are resolved, we will be sending an automated email to the users
CleanShot 2021-11-08 at 12.20.33@2x.png

Let's get started!

Set up your Backend on Supabase

The first step is to set up the backend for the application; for this, we will be using a Postgres database on Supabase.

  1. If you are new to Supabase, you can create a new account (it's free!) or sign in with your existing credentials.
  2. You will be redirected to the Supabase dashboard; here, you can manage all your projects.
  3. Create a new project, and set the name to Support Dashboard. Create a new table by clicking on the Create Table option on the side navigation.
  4. Supabase gives us many ways to add data to the tables, from writing queries to creating schemas using UI to simply uploading CSV files; developers can choose any option.
  5. For our support dashboard, we will be creating a table by uploading a CSV file on Supabase.
CleanShot 2021-11-08 at 12.21.48@2x.png

The DB is now set up; let's use Appsmith to connect this PostgresDB and build UI for the application. For this, we might need to note down the connection info from project settings on Supabase. Following is how it looks like:

CleanShot 2021-11-08 at 12.22.58@2x.png

Build UI on Appsmith and Writing Queries

Our backend is ready; now, let's connect it to Appsmith to build UI and add functionalities. Follow the below steps:

  1. If you are new to Appsmith, you can create a new account (it's free!) or sign in with your existing credentials.
  2. After we sign in, we will be redirected to a dashboard to create a new application.
  3. Next, let's connect a new data source. To do this, click on the + icon next to the Datasources from the sidebar and choose PostgresDB.
  4. Now, copy the database connection details from Supabase to here and click on the test button to validate the authentication.
CleanShot 2021-11-08 at 12.23.58@2x.png

Awesome, we now have established a connection to our data source. Next, let’s build UI using widgets on Appsmith.

  • Click on the + icon next to widgets and drag and drop a Tab widget. We can configure using the property pane by clicking on the cog icon on the top-right corner.
  • As seen in the below screenshot, we have added four tabs to support the dashboard.
CleanShot 2021-11-08 at 12.24.46@2x.png
  • Now, we will add a button that should open a modal and have a form to raise a new ticket when clicked. For this, just drag and drop a new button widget from the widgets section and move it on canvas.
  • Add a few input widgets and a button to submit the form; this is how the form looks after the UI is complete:
CleanShot 2021-11-08 at 12.25.29@2x.png
  • We now have the UI to create a ticket. Let’s write two queries on Appsmith that will allow us to create tickets and list tickets. To do this, click on the + icon next to the data sources and use the Supabase connection here to create a new query.
  • Rename the query to create_new_ticket under the query pane; here we can write SQL that can collect inputs using moustache bindings. Following is how it looks like:
INSERT INTO PUBLIC."tickets"("id","createdAt","user","updatedAt","description",
"status","priority","category","assignedTo")
VALUES('{{appsmith.store.ticket.id}}','{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_user.text}}', 
'{{moment().format('yyyy-mm-ddHH:MM:ss')}}','{{c_description.text}}','{{c_status.selectedOptionValue}}',
'{{c_proporty.selectedOptionValue}}',
'{{c_category.selectedOptionValue}}','{{c_assignee.selectedOptionValue}}');
On Appsmith, we can use moustache bindings anywhere across the app to bind data or write javascript code to customize and add functionalities to your widgets.
  • Lastly, we now set the onClick property for the button to execute a query and select the create_new_ticket. And just like that, we should be able to create new tickets on the application.
  • Now, let’s write one more query where we could list all the tickets that users create. We will name this query get_tickets; the following is the SQL snippet.
SELECT * FROM public."tickets";
  • Now, drag and drop a table widget onto the tab widget under the Assigned To Me tab. Open the property pane and add the following snippet to bind the tickets:
{{get_tickets.data.filter(t => t.assignedTo === 'confidence@appsmith.com' && t.status !== 'closed')}}

Fantastic, we should be able to see all the tickets assigned to the specific user! It’s that’s simple to write custom JS to configure our internal applications on Appsmith. Now let’s use a webhook and build automation that sends Emails from the ticket using n8n!

Building an Extendable Workflow on n8n

If you want to build an internal tool that requires sending emails, then n8n is the way to go. n8n is a tool that can be used to automate workflows between your favorite web apps (such as Slack, Google Drive, Dropbox, etc.). However, n8n can be used to connect almost any two web apps that you use. Now, let's create a workflow and use a webhook to send requests to n8n from Appsmith.

  • If you are new to n8n, sing-up for their cloud version here.
  • Next, create a new workflow by selecting New under the workflow menu
  • Now, drag and drop a Webhook node onto the canvas; you can configure the nodes by clicking on them.
  • Now set the HTTP method to POST and copy the TEST URL

Awesome, now that we have the Webhook, let’s connect it with Appsmith by adding it as a data source.

  • On the appsmith application, click on the + icon next to the data source and create a new API.
  • Set the API type to POST and paste the API webhook URL,
  • Now paste the following code snippet under the body tab to collect input from the dashboard.
{"message": "({this. params. message})","email": (this. params. email})","ticket": "((appsmith. store. ticket. id}}"}
  • Next, connect a Gmail node to the webhook and authenticate with your Google ID.
  • To pass the data from the webhook to the Gmail node, configure the message property by using the variable selector nodes on the left pane.
  • Lastly, make sure you set the workflow state to active.

And just like that, we should be able to send Emails using n8n without writing any piece of code.

CleanShot 2021-11-08 at 12.28.38@2x.png

Building this app from scratch, including writing snippets of code, is likely to take 30 minutes! Isn’t that fast?

If you're looking for a modern approach to building internal applications, check out Supabase, Appsmith, and n8n! These tools are straightforward, powerful, and can help you build apps faster than ever. So what are you waiting for? Start building your next internal app today.

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support
2
November
2021
Monthly Round-up

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support

October Roundup: Widget Improvements, New Appsmith functions, and ARM Architecture Support
Vihar Kurama
0
 minutes ↗
#
announcement
#
applications
#
app-development
#
community
#
crud
Monthly Round-up

We’re back again this month with updates from the last 30 days. We like to work hard! We’ve shipped many features, fixed bugs, and launched Hacktoberfest with a series of fun events. You can check them out here.

Widget, UI, and UX Improvements

#1 Menu Buttons on Table Widget 

Tables on Appsmith are one of the most loved widgets, and yes, we’ve upgraded them again! We can use menu buttons inside the table widget on any particular column to create menus and customize them. Open the column settings from the table’s property pane and set the column type to the menu button to see them in action! And just like that, we should be able to see a menu button on our table. Additionally, you can add more items to this by configuring the Menu Items property. That’s not all, and you can further customize the items to have icons, border radius, box shadows, and more!

#2 A New Sparkling White UI

Notice anything new? Yes, we have improved our whole design system to help developers focus more on their application editing on Appsmith. Right from searching through apps on the dashboard to building them using queries and widgets, everything is white! 

#3 Option to Hide/Unhide Properties from Property Pane

At Appsmith, we consistently focus on adding new properties and features to widgets, and sometimes it can get a bit overwhelming to see all of these at the same time! To make it less cumbersome, we’ve added an option to hide and unhide a few properties. Developers can concentrate on what’s important. To use this feature, toggle the dropdown arrow inside the property pane. You will see an option to collapse the various options within the pane. For example, in the picture below, only the header option has been made visible.

New Appsmith Functions!

You can bid goodbye to refresh buttons! Developers had to use refresh buttons on Appsmith Appsmith to be able tore-run the queries. We recognized this pain point. Now there’s a cool new feature to periodically run APIs and DB queries. You can configure these by using the  setInterval and clearInterval functions!

The setInterval function executes a trigger callback at a given interval. Here’s how you can use it while dynamically binding queries onto widgets:

setInterval(callbackFunction: Function, interval: number, id?: string)
// setInterval(() => { Query1.run() }, 10000, "myTimer");

The clearInterval function stops executing the trigger callback started with the setInterval method.

clearInterval(id: string)// clearInterval("myTimer");

Appsmith Deployments

#1 Helm Chart Support

Helm charts are now added for Appsmith deployments on Kubernetes deployments. These include application deployments with basic default support. Additionally, developers can add custom configuration for persistent volume data, custom ingress controller and secure with TLS certificate

#2 Support for Deploying Appsmith on ARM Architecture 

Previously, many developers had reported issues regarding docker-based installation of Appsmith on ARM architectures. Now, we had rectified them and had added extensive support for M1 MacBook users.  Following are the changes that we made to the scripts for docker installation:

  • We heavily refactored Dockerfile to build the image that is able to support both AMD64 and ARM64 architecture
  • We have updated docker.env.sh with additional environment variables and renamed the existing MongoDB credential variables
  • We added a document to build an image for multiple architectures using Docker buildx

Quit Buggin! Cheers to our Updated Debugging Experience

We have improved the debugging experience by adding hint and errors messages for different cases when working on queries and binding them onto widgets. To make these messages more efficient, we added a new attribute named readableError to the ActionExecutionResult object, returned to the client post after actions are executed. With this, we should be able to understand and solve complex errors quickly. Not just that, we have seen many APIs failing because of using duplicate headers or query parameters, so we have added a few hint messages to help you debug faster.


We’ve got a host of other bug fixes and updates too, be sure to check out our release notes here

See you next month with more updates! Do follow us on Twitter, Youtube, and Linkedin to stay up to date.  

Building CRUD Apps with Firebase
27
May
2021
Tutorial

Building CRUD Apps with Firebase

Building CRUD Apps with Firebase
Confidence Okoghenun
0
 minutes ↗
#
apps
#
crud
#
firebase
Tutorial


Since its release back in 2012, Firebase has received lots of love from the developer community because it aims to remove the burdens many engineers have to deal with during development, including database, storage, authentication, hosting, and more.

One of its core products, the Firestore database, has been a game-changer in the database world because it allows highly flexible schemaless database access. But sometimes, it can be a bit challenging to work with, especially for new developers trying to build CRUD apps with Firestore.

Firestore and, by extension, Firestore is a great product, but it's only one side of the coin. However, to build production-grade applications, an interface is required for users to interact with and services provided by Firebase. Appsmith is the open-source UI framework that fills this gap if you're making something for your colleagues. Appsmith saves you the time of building UI and routers, focusing on the logic and the architecture of your app.

In this article, I will show you how to build CRUD applications using Firestore with Appsmith. We're going to cover the core concepts of Firestore, such as connecting to the database, reading data, and writing to the database by building a Todo app.

Here's what the finished application will look like:

gif show completed todo app

Awesome! Let’s start hacking away.

Connecting to Firestore

Firstly, we need to create an app on Appsmith. Go ahead and sign in to your Appsmith account and click on the + create new app button. You should then be taken to a new app where we can begin building our Todo app. You might also want to rename the app from Untitled Application to something like Todo app.

Now that we have a new app setup, we can go on to connect to Firestore. Click on the + button to the right of the DB Queries section, and then the new data source button. We’ll be connecting to Firestore, so select Firestore from the list of supported databases.

On the opened form, fill in your Firebase connection credentials. Note that your Project Id can be gotten from your project settings in the Firebase console. Also your Database URL is <your_project_id>.firebaseio.com.

image showing Firestore connection form

Lastly, you’ll need your Service Account Credentials. Go to the Service accounts tab in your project settings on Firebase. Click on the Generate new private key button. It’s going to download a JSON file, so copy its content and paste it in the Service Account Credentials input.

Save your connection and we’re good to go!

Reading data from Firestore

Now we have a connection to the database and we can begin to make use of it. Assume that we have a bunch of todos from the database with the following structure:

{
  "due": Date,
  "task": String,
  "created": Date
}

We can easily fetch todos from the database by writing a query. Click on the New Query button on the Firestore card, and let us write a query to get todos.

Give this query a nice name i.e _gettodos. Its Method will be set to Get Documents in Collection. For the collection path, fill in your collection path. And we can go ahead to set the Order By to ["-created"], doing this will sort the documents by their created date. Here’s my query:

image showing query to get todos

Click on the Run button and you’ll get an array of todos from your Firestore database.

Now we can go back to the canvas and display this data using a List widget. Head to the widgets section and drag in a List widget into the canvas. On its configuration menu (called Property pane), replace the content of the Items field with the bellow binding that pulls in data from the get_todos query into the widget:

{
{get_todos.data}
}
gif showing how to bind data to the list widget

You wouldn’t notice any change but rest assured that we’re now feeding data from the query into the widget. Now we can go on to display the todos on the List widget.

You can delete the Image widget in the list as we do not have images in our todos

Drag in a few Text widgets to display the todos text and due dates. For each of the respective Text widgets, use the following bindings in their Text property to display data: For the task field

{
{currentItem.task}
}

For the due date field. We’re using the built in moment library to format the due date

{
{moment(currentItem.due).fromNow()}
}
gif showing how to bind data to task and due date text wiegets

Great work! The app is coming to life!

Creating new Todos

Wouldn’t it be cool if we could create new todos? Yeah, let’s do that.

We’ll need a form for this. So, drag in a Modal widget into the canvas. You can close up the modal because will need a button on the UI to open it up. To do this, drag a Button widget into the canvas. On its property pane, set the onClick Action to showModal and the Modal Name to the modal we just created, that is Modal1.

Now clicking on the button should automatically open the modal. Sweet!

On the modal, we’ll need a few new widgets to capture the todo information. So go ahead and drag in an Input widget to collect the task info, and a Datepicker widget to collect the due date info. A screenshot of mine is shown below:

image show my form modal configuration
It is also important to rename the widgets so that we can easily access them later on. Here’s a gif showing how you can do that:
gif show how to update widget names

Awesome! Now we can go ahead to write the query to create a todo.

Like we did previously, go ahead and create a new query using the Firestore datasource we earlier configured. You can call your query _createtodo and set’s its Document Path to:

todo_app/{{Math.random().toString(36).substring(7)}}

What we have above generates a random string ID for the document. Then set its Body to grab data from the Input widgets we configured on the modal:

{
    "task": "{{task_input.text}}",
    "created": "{{moment().format()}}",
    "due": "{{due_datepicker.selectedDate}}"
}

Awesome! Now we can go back to write an onClick Action for the confirm button on the Modal widget. Enable the Javascript mode by click on the small JS button close to it and set it’s content to:

{
{create_todo.run(() => {
    get_todos.run();
    closeModal('Modal1');
})}
}
image showing the confirm button configuration

The script above will run the _createtodo query, after which it will update the list by running the _gettodos query and the close form modal.

Go ahead and give it a try. Fill in a task and set a due date, click on the button to see the magic happen!

Deleting a Todo

The last feature we’ll like to add to our app is the ability to delete a to-do that has been completed. We’ll need a few new tricks to do this.

Let’s go-ahead to write a delete query. Call this _deletetodo. Set this query’s Method to Delete Document then it’s “Document Path* to the following binding which will read the todo_path from the local store API on appsmith:

{{appsmith.store.todo_path}}

Now, let’s go and drag a Button widget into the list. For the button’s onClick Action, we need to store the current todos path in the local store and then run the delete_todo query. We’ll also need to update the list by running the get_todos query. Here’s what you need:

{{
    (() => {
      storeValue('todo_path', currentItem._ref.path);
      delete_todo.run(() => get_todos.run());
    })();
}}
image showing delete todo button configuration

Paste that in and give it a test run. Cool right?

Conclusion

We’ve been able to create a full blow CRUD todo Firebase app using Appsmith. Here a gif of the app in action:

gif showing completed app in use

Awesome! Now you can click on the DEPLOY button to deploy it and share the app with friends (be sure to update sharing permissions by clicking on the SHARE button).

If you found this helpful, show some love and leave a star on our GitHub repo https://github.com/appsmithorg/appsmith.

Generate a CRUD App from Any Database with One Click!
26
August
2021
Announcement

Generate a CRUD App from Any Database with One Click!

Generate a CRUD App from Any Database with One Click!
Vihar Kurama
0
 minutes ↗
#
crud
#
databases
#
ui
#
open-source
#
javascript
Announcement

Most apps on the internet are actually CRUD applications. What this means is that any basic app does the following functions: Create, Read, Update, and Delete (CRUD). In fact, if you look at Twitter, it’s a simple CRUD app where users can create tweets, read tweets, update tweets (like re-tweets) and delete tweets! CRUD apps are used on a daily basis by several businesses and organizations to maintain their day-to-day workflows. For example, in an enterprise organization, HR departments would be using a CRUD application to manage staff and keep track of existing employees.

Well, at Appsmith, we know how important CRUD applications are for internal operations. Why should something so critical to an organization's success be difficult to make? Well, we took matters into our hands and we made it super easy to make one. What if we said that you can now make the entire CRUD application with all the UI, logic, and complete control in just one click? Yes. You read that right!

We’re super excited to announce our new feature called the “Generate New Page from Database” With this, you can build CRUD applications within no time. We’ll discuss a bit more about our approach in shipping this feature in this blog, and also talk about how you can use this feature on the Appsmith framework.

So What’s This Feature All About?

The idea of the “Generate New Page” feature is rather simple, we wanted to ship a feature that would help developers save time in building UI and writing queries for basic CRUD applications. Now, all that users have to do is just open the canvas for a new application, connect a data source and then click on the “Generate New Page” option. And here’s what this will do:

First, it will create four new queries for you from the selected data source that will do the following:

  • CREATE new data (rows) into the table
  • Read all the data from the selected table
  • Update a particular row item in the table
  • Delete the selected row item in the table

These straightforward CRUD operations will be automatically generated for users!

As for the UI, this feature will automatically create a new table and fill all the data in the table using the read query. However, users can customize the rows based on specific use-cases after the application is generated.

Next, when users click on the ‘Create Row’ button, it will open a modal to insert new rows into the table. This option will use the ‘Create’ query.

To update the data in a particular row, users can use the Update Row container on the right, where they will be able to update any row data by selecting from the table and using the form. This will be using the ‘Update’ query.

Finally, inside the table, the last column will be populated with buttons which when clicked will delete the entire selected row by using the ‘Delete’ query.

What a breeze! Not just that, the table comes with powerful features where users can search, filter or sort contents of the table by configuring it.

Following is the screenshot of the entire generated UI.

UI.png

Now, we’ll talk about how to use this feature!

How To Use the Generate New Page from Database Feature

In order to be able to use this feature, the first step is to connect a new data source on the Appsmith application.

If you’re new to Appsmith follow the steps below:

  1. If you’re an existing user sign in to your account or you can sign-up here for free.
  2. After you sign in you’ll be redirected to the Appsmith dashboard where you can create a new application by clicking on the Create New button.
  3. This will create a new Appsmith application, now to connect a data source click on the + icon next to the Datasource option on the left navigation bar.
  4. You can choose from a wide range of options here, in case if you want to test it you can use the mock-users database.
  5. Next, under the active data sources click on the GENERATE NEW PAGE option.

You’ll see the following options:

Options.png

Now, you can select the table and add a searchable column. As soon you click on the Generate Page, you’ll see the UI where all the CRUD operations can be performed.

Hola, and with just one click the entire application is generated. Hope you love this new feature.


Follow us on Twitter and Linkedin to stay up to date with more news and announcements!

We love feedback, and we want to know your thoughts. Write to us with your ideas, opinions, or even send us brickbats on marketing@appsmith.com.

If you want to write a blog for us, send me an email and I’ll make it happen: vihar@appsmtih.com.