GITBOOK-180: Supabase integration to Lowcoder

FalkWolsky · gitbook-bot · commit c557b6954845 · 2024-09-10T17:07:11.000Z
diff --git a/docs/.gitbook/assets/Screenshot 2024-09-08 at 6.16.10 PM.png b/docs/.gitbook/assets/Screenshot 2024-09-08 at 6.16.10 PM.png
diff --git a/docs/.gitbook/assets/frame_generic_light.png b/docs/.gitbook/assets/frame_generic_light.png
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -77,6 +77,11 @@
   * [SQL Databases](connect-your-data/data-sources-in-lowcoder/sql-databases/README.md)
     * [MySQL](connect-your-data/data-sources-in-lowcoder/sql-databases/mysql.md)
     * [MariaDB](connect-your-data/data-sources-in-lowcoder/sql-databases/mariadb.md)
+    * [Supabase](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/README.md)
+      * [Supabase PostgreSQL](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-postgresql.md)
+      * [Supabase Assets API](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-assets-api.md)
+      * [Supabase Management API](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-management-api.md)
+      * [Supabase RealTime](connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-realtime.md)
     * [PostgreSQL](connect-your-data/data-sources-in-lowcoder/sql-databases/postgresql.md)
     * [Microsoft SQL Server](connect-your-data/data-sources-in-lowcoder/sql-databases/microsoft-sql-server.md)
     * [Oracle](connect-your-data/data-sources-in-lowcoder/sql-databases/oracle.md)
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/README.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/README.md
@@ -0,0 +1,23 @@
+# Supabase
+
+Supabase is an open-source backend-as-a-service (BaaS) platform that provides developers with a set of tools to build, manage, and scale applications. It aims to simplify the process of setting up a backend by offering various services out of the box, similar to Firebase, but with an emphasis on open standards and flexibility.
+
+### Key Features :
+
+1. **PostgreSQL Database**: Provides a managed PostgreSQL database with SQL querying, relational data, and full-text search capabilities.
+2. **Realtime Subscriptions**: Enables live updates by sending data changes (insert, update, delete) to connected clients in real time.
+3. **Authentication**: Built-in authentication system supporting email/password, OAuth providers (Google, GitHub), and custom auth systems.
+4. **Storage**: Offers scalable storage for managing media files like images and videos, ideal for handling user uploads.
+5. **RESTful API**: Automatically generates RESTful APIs based on your database schema for easy interaction with the backend.
+6. **Edge Functions**: Serverless functions that allow you to write custom backend logic without managing servers.
+7. **Open-Source**: Fully open-source, enabling hosting on your own infrastructure and avoiding vendor lock-in.
+8. **Frontend Integration**: Supports modern frontend frameworks like React, Vue, and Next.js, with SDKs for seamless backend interaction.
+
+### Use Cases for Supabase :
+
+* Building applications with real-time features like chat apps or live collaboration tools.
+* Projects that require user authentication and role-based access control.
+* Storing and managing media files like images, videos, or documents.
+* Rapidly building and scaling applications without setting up custom backend infrastructure.
+
+Let's explore some of the core features of Supabase, one by one.
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-assets-api.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-assets-api.md
@@ -0,0 +1,24 @@
+# Supabase Assets API
+
+The **Supabase Storage** (or Assets/Storage) feature provides a scalable, secure, and easy-to-use solution for managing and serving files such as images, videos, documents, and other types of media. This feature is built to handle file storage needs for modern web and mobile applications, offering direct integration with your backend database and user authentication systems.
+
+### Prerequisites :&#x20;
+
+* Get the Supabase Project parameteres from API settings from your Supabase Project.
+
+### Connecting to Supabase Assets API :&#x20;
+
+Follow the steps below :&#x20;
+
+1. Create a new data source in two ways. Note that this permission is restricted to workspace admins and developers.
+   1. Navigate to the **Data Sources** tab on [Lowcoder Homepage](http://app.lowcoder.cloud/) and click **New data source**.
+   2. When creating a new query in the app editor, click **+ New** > **+ New data source**.
+2. Navigate to **Assets & Storage** section and click on **Supabase Assets** option.
+3. Set its name and configure general settings, including your Supabase Project URL and API key.
+4. Click **Save**, and it will be saved to your data source library.
+
+### Demo :&#x20;
+
+Let's show you how we can use the Supabase Storage feature to Upload and Retrieve data to/from Supabase.&#x20;
+
+{% embed url="https://demos.lowcoder.cloud/demo/cm0p82k14000110hfpa1xr8da" %}
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-management-api.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-management-api.md
@@ -0,0 +1,2 @@
+# Supabase Management API
+
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-postgresql.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-postgresql.md
@@ -0,0 +1,26 @@
+# Supabase PostgreSQL
+
+Every Supabase project is a dedicated PostgreSQL database, trusted by millions of developers. PostgreSQL is a powerful open-source relational database management system (RDBMS), renowned for stability, scalability, and robustness. It is an ideal choice for applications that require data consistency and reliability.
+
+### Prerequisites <a href="#prerequisites" id="prerequisites"></a>
+
+* Get PostgreSQL database connection parameters from the database owner.
+* Refer to IP allowlist to add IP addresses of Lowcoder to your allowlist (if needed).
+
+### Connect to PostgreSQL data source <a href="#connect-to-postgresql-data-source" id="connect-to-postgresql-data-source"></a>
+
+Follow the steps below:
+
+1. Create a new data source in two ways. Note that this permission is restricted to workspace admins and developers.
+   * Navigate to the **Data Sources** tab on [Lowcoder Homepage](http://app.lowcoder.cloud/) and click **New data source**.
+   * When creating a new query in the app editor, click **+ New** > **+ New data source**.
+2. Select **Database** > **PostgreSQL** as the data source type.
+3. Set its name and configure general settings, including host, port, and database name. You can also set the user name and a password.
+4. (Optional) Click **Test connection** to check whether the new data source is successfully connected.
+5. Click **Save**, and it will be saved to your data source library.
+
+### Demo :&#x20;
+
+{% embed url="https://demos.lowcoder.cloud/demo/clzmno7d50b0prfaixv9i8nxc" %}
+
+\
diff --git a/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-realtime.md b/docs/connect-your-data/data-sources-in-lowcoder/sql-databases/supabase/supabase-realtime.md
@@ -0,0 +1,86 @@
+# Supabase RealTime
+
+Supabase's **Realtime** feature is a powerful service that allows developers to build interactive, real-time applications by enabling instant updates to frontend clients when the underlying database changes. It is built on top of PostgreSQL's `logical replication` feature and uses WebSockets to push changes to subscribed clients. Here's a detailed explanation of how it works and its key features:
+
+### How Supabase RealTime Works
+
+* **PostgreSQL Logical Replication**: Supabase RealTime leverages PostgreSQL’s logical replication feature to stream database changes (inserts, updates, deletes) in real-time. Logical replication is a native PostgreSQL feature that captures changes from specific tables or schemas.
+* **WebSocket Connection**: Once changes are detected via logical replication, they are broadcasted to all connected clients using WebSockets. Clients can subscribe to database tables or specific channels, and any changes are immediately pushed to them.
+
+### Key Features of Supabase RealTime
+
+* **Table Subscriptions**: You can subscribe to changes in specific database tables. For example, if you have a `users` table and want to know when a new user is created or updated, you can subscribe to this table, and Supabase will notify the client in real-time.
+* **Event Types**: Supabase RealTime supports three types of events that clients can subscribe to:
+  * **INSERT**: Triggered when a new row is added to the table.
+  * **UPDATE**: Triggered when an existing row is modified.
+  * **DELETE**: Triggered when a row is deleted from the table.
+* **Row-Level Security**: Supabase RealTime respects PostgreSQL’s row-level security (RLS) policies. This ensures that clients can only receive updates for rows they have permission to access. You can enforce fine-grained security policies on a per-table or per-row basis.
+* **Custom Channels**: In addition to subscribing to database changes, Supabase RealTime allows you to create and subscribe to custom channels for broadcasting arbitrary events, which can be useful for other real-time features in your app, such as chat or live notifications.
+* **Filter Queries**: You can filter the real-time data updates to receive notifications only for specific changes that match certain conditions. This helps in optimizing the flow of real-time updates for clients that are interested in specific data.
+
+More details related to Supabase RealTime can be be found here on their official website :[https://supabase.com/docs/guides/realtime](https://supabase.com/docs/guides/realtime)&#x20;
+
+### Setting Up Supabase RealTime :&#x20;
+
+#### 1. Enable RealTime
+
+First, make sure Realtime is enabled in your Supabase project. This is usually done in the Supabase dashboard by toggling on the Realtime feature for specific tables or schemas.
+
+<figure><img src="../../../../.gitbook/assets/frame_generic_light.png" alt=""><figcaption><p>Enabling RealTime on a Supabase Table</p></figcaption></figure>
+
+#### 2. Client Side Subscription / Initiating Connection
+
+Once RealTime is enabled, initiate the connection to Supabase through a Stream query. Following is the formate for Stream query that you can use to make the connection to Supabase.
+
+```
+wss://{{your_supabase_project_reference_id}}.supabase.co/realtime/v1/websocket?apikey={{your_supabase_project_api_key}}&log_level=info&vsn=1.0.0
+```
+
+Supabase Project reference ID can be found in **Settings > Project Settings > General Settings.**
+
+API key can be found in **Settings > Configuration > API > Project API keys.** Use the Anon Public key.
+
+#### 3. Requesting Features/Services to use
+
+After a successful connection, you need to subscribe to the changes on a Schema/Table that you want to listen to. PostgreSQL changes ( Insert, Update, Delete ) on an individual/multiple Tables in a Schema or all the tables in a Schema.&#x20;
+
+```
+{
+   "event": "phx_reply",
+   "topic": string,
+   "payload": {
+      "response": {
+         "postgres_changes": [
+            {
+               "id": number,
+               "event": "*" | "INSERT" | "UPDATE" | "DELETE",
+               "schema": string,
+               "table": string,
+               "filter": string + '=' + "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "in" +  '.' + string
+            }
+         ]
+      },
+      "status": "ok" | "error"
+   },
+   "ref": string
+}
+```
+
+#### 4. Keeping the Connection alive
+
+The connection get timeout automatically after some time. So, to keep the connection alive we need to send the heartbeat after every 30 seconds. Use following code to send the Heartbeat request :&#x20;
+
+```
+{
+   "event": "heartbeat",
+   "topic": "phoenix",
+   "payload": {},
+   "ref": string
+}
+```
+
+### Demo&#x20;
+
+Now, let's show you a working demo where in a Ecommerce App, Admins will get RealTime notifications from Supabase whenever a Customer creates a new Order .
+
+{% embed url="https://demos.lowcoder.cloud/demo/cm0tnfr4t0mc1k62w6s22yolv" %}
