{"id":18540,"date":"2022-07-20T11:06:39","date_gmt":"2022-07-20T05:36:39","guid":{"rendered":"https:\/\/www.dronahq.com\/?p=18540"},"modified":"2022-10-10T09:55:15","modified_gmt":"2022-10-10T04:25:15","slug":"supabase-ui","status":"publish","type":"post","link":"https:\/\/www.dronahq.com\/supabase-ui\/","title":{"rendered":"Create a Supabase UI dashboard using DronaHQ"},"content":{"rendered":"
Supabase is one of the most popular database solutions in the market. In this blog, we take a look at how we can create a task management app using DronaHQ where the data will be loaded from Supabase and how can you create a Supabase UI for a Supabase dashboard using DronaHQ instantly.<\/span><\/p>\n This task management app will be able to –<\/span><\/p>\n There can be many more functions that can be added to the task management Supabase UI app you are making depending on your requirements and needs but these are the few ones that we will be creating for now.<\/span><\/p>\n Supabase is a free and open-source alternative to Firebase. It offers every backend service you require to create a product. Supabase utilizes the real-time Postgres database. In essence, Supabase offers a Postgres database management interface that you can use to create tables and insert, amend, and delete data from them.<\/span><\/p>\n To access the data in the Postgres database, we can utilize the REST API or client libraries from Supabase. Accessing the database is only one aspect of Supabase. Additionally, it offers several pre-built solutions, like authentication, file storage, and real-time capabilities.<\/span><\/p>\n DronaHQ plays an important role here to create the UI for the data which you have on Supabase and hence helps you create a wonderful Supabse UI.<\/span><\/p>\n Prerequisite<\/strong><\/p>\n Basic knowledge of PostgreSQL is a must to understand and write queries for our task management Supabase UI app after connecting the Supabase connector. To get a detailed overview of connecting Supabase as a connector in DronaHQ studio, give a read to <\/span>Connecting to a Supabase database<\/span><\/a>.<\/span><\/p>\n To connect to Supabase from your App you need the Connection String.<\/span><\/p>\n <\/p>\n Now your Supabase connection is ready from within your Studio App. You can define queries as per your use case and bind the data to the Controls and Actions.<\/span><\/p>\n In DronaHQ Studio we will be creating the task management app for which we will be requiring five screens, 1 detailed view screen, 1 main screen, and 3 pop-ups for the following purposes –<\/span><\/p>\n This screen is the most informative screen of your task management app.<\/span><\/p>\n This Supabase UI app screen is going to have the following controls –<\/span><\/p>\n This control is an integral part of the Supabase UI and the task management app.<\/span><\/p>\n Along with this it also has buttons to which you can add functionalities which in turn will make the task management app functional and interactive.<\/span><\/p>\n Selecting the <\/span>Kanban<\/span><\/a> control\u00a0<\/span><\/p>\n This control has many properties which can be edited to suit your Supabase UI for the task management app.<\/span><\/p>\n These editable features involve theme, color, card size, buttons to be displayed, background color, and many more features which can be explored by you if you want to be clicking the link above.<\/span><\/p>\n But first of all, you need to add some queries for functions to be performed which can be added by selecting the add query option which will appear after you select the Supabase connector.<\/span><\/p>\n Queries added –<\/span><\/p>\n getatskdata – This is added to bring data from the Supabase database to the Supabase UI<\/span><\/p>\n Query –<\/span><\/p>\n SELECT * FROM “TaskManager”<\/span><\/p>\n Addtaskdata – This query will add a task with its details to the Supabase database via the Supabase UI<\/span><\/p>\n Query –\u00a0<\/span><\/p>\n INSERT INTO “TaskManager”<\/span><\/p>\n VALUES ({{id}}, ‘{{category}}’, {{duration}}, ‘{{task}}’, ‘{{details}}’);<\/span><\/p>\n Deletetaskdata – This will delete the task and its details from the Supabase database via the Supabase UI<\/span><\/p>\n Query –\u00a0<\/span><\/p>\n DELETE FROM “TaskManager”\u00a0<\/span><\/p>\n WHERE id ={{id}}<\/span><\/p>\n Movetaskdata – This query is there to provide the functionality to move the task from one category to another category on the Supabase UI which will also reflect in the Supabase database.<\/span><\/p>\n Query –\u00a0<\/span><\/p>\n UPDATE “TaskManager” SET “Category”='{{category}}’<\/span><\/p>\n WHERE id={{id}};<\/span><\/p>\n <\/p>\n Updatetaskdata – This query is there to update the task details on the Supabase UI which will also be reflected in the Supabse database.<\/span><\/p>\n Query –\u00a0<\/span><\/p>\n UPDATE “TaskManager” SET\u00a0 “Task” = ‘{{task}}’ , “Duration” = {{duration}} , “Details” = ‘{{details}}’ WHERE id ={{id}}<\/span><\/p>\n We need to add data from the Supabase database to represent it through the Supabase UI which can be done by clicking the connector after clicking the data option\u00a0<\/span><\/p>\n Then select the Supabase connector<\/span><\/p>\n Then the query named getatskdata to import all the data from the Supabase database to the Supabase UI<\/span><\/p>\n You can also select which columns you want to import to your Supabase UI from the Supabase database.<\/span><\/p>\n After you have completed the process, you have successfully added the data to your Supabase UI from your Supabse database.<\/span><\/p>\n After customization based on the requirement of your Supabase UI, this control will look like this –<\/span><\/p>\n I have added 3 buttons –<\/span><\/p>\n For this, we first need to toggle on the action buttons for performing\/triggering main functions in the task management app.<\/span><\/p>\n This is the action flow for moving a card from one category to another<\/p>\n This is the action flow that will cause the pop-up to appear to add the details for tasks<\/span><\/p>\n <\/p>\n This action flow is present to delete a task from the Supabase database\u00a0<\/span><\/p>\n This is the action that will cause the pop-up to appear to update the details of tasks<\/span><\/p>\n This action flow is present to comment on a task<\/span><\/p>\n All the action flows will be properly explained further as we go on when those specific functionalities will be discussed.<\/span><\/p>\n 1] Add a card<\/strong><\/p>\n This will add a task to the Supabase UI\/Kanban control\u00a0<\/span><\/p>\n After you click on it, a pop-up will appear where you can enter the details for the specific task to be added to the task management app.<\/span><\/p>\n For that, you will have to create a pop-up that will also be a part of the Supabase UI with the following controls –<\/span><\/p>\n All these controls can be edited by changing the properties to make the Supabase UI look better and more information can be viewed by clicking on those respective links.<\/span><\/p>\n This is what the pop-up will look like.<\/span><\/p>\n Now we also need to add action to the add button which we have added and to do that we will select the button click option from the action option.<\/span><\/p>\n After that, you need to add the action flow for the actions to take place in a specific order.<\/span><\/p>\n Here we have added the Supabase_addtaskdata connector by selecting the Suapabase server-side action of actually adding the data to the Supabase database.<\/span><\/p>\n You also need to select the fields in which the data will be added to the database.<\/span><\/p>\n The Toast and Toast_2 are there to display the message if the data has been successfully added or not which will be notified by the respective Toast.<\/span><\/p>\n After that, there is a function of sending a slack message to notify the user about the changes made via the Supabase UI to the Supabase database.<\/span><\/p>\n 2] Deleting a task<\/strong><\/p>\n On clicking the delete button, you will be able to set the action flow the same way you had done for the add button but we do not require a pop-up for this.<\/span><\/p>\n We have added the supabase_deletetask connector from the server side action to delete the data from the Supabase database via the Supabase UI.<\/span><\/p>\n We will reset the page to refresh the Supabase UI and also add a feature of sending a slack message to the user to notify them that the task has been deleted.<\/span><\/p>\n 3] Move task<\/strong><\/p>\n This will help you to drag and drop the task from one category to another category hence making changes to the Supabase database via the Supabase UI.<\/span><\/p>\n Supabase_movetask connector can be connected from the server side action to move the task from one category to another.<\/span><\/p>\n 4] Update task<\/strong><\/p>\n This will update a task to the Supabase UI\/Kanban control.<\/span><\/p>\n The way which we used for creating a pop-up for adding a task can be repeated here in order to create a pop-up for updating data.<\/span><\/p>\n After you click on it, a pop-up will appear where you can enter the details for the specific task to be updated in the task management app.<\/span><\/p>\n For that, you will have to create a pop-up that will also be a part of the Supabase UI with the following controls –<\/span><\/p>\n All these controls can be edited by changing the properties to make the Supabase UI look better and more information can be viewed by clicking on those respective links.<\/span><\/p>\n This is what the pop-up will look like.<\/span><\/p>\n Now we also need to add action to the update button which we have added and to do that we will select the button click option from the action option.<\/span><\/p>\n After that, you need to add the action flow for the actions to take place in a specific order.<\/span><\/p>\n Here we have added the Supabase_updatetaskdata connector by selecting the Suapabase server-side action of actually adding the data to the Supabase database.<\/span><\/p>\n You also need to select the fields whose data will be updated to the database.<\/span><\/p>\n The Toast and Toast_2 are there to display the message if the data has been successfully added or not which will be notified by the respective Toast.<\/span><\/p>\n After that, there is a function of sending a slack message to notify the user about the changes made via the Supabase UI to the Supabase database.<\/span><\/p>\n 5] Commenting on the task<\/span><\/p>\n\n
What is Supabase ?<\/b><\/h2>\n
<\/p>\n
Getting the Connection String<\/b><\/h2>\n
\n
<\/li>\n
\n
\nYou can copy the connection string or the connection parameters from here and paste them to your Supabase connector configuration.<\/span><\/b><\/b> <\/li>\n<\/li>\n
Build Supabase UI with DronaHQ<\/b><\/h2>\n
\n
Creating the home screen<\/b><\/h3>\n
Kanban control –<\/span><\/h4>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\n
<\/li>\n<\/ol>\n
Adding functionality to the buttons in Kanban control<\/b><\/h3>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
\n
<\/p>\n
<\/p>\n
<\/p>\n