从 Supabase 数据创建仪表板

标签：表格、仪表板、绘图

Supabase是一个基于云的开源后端，它提供 PostgreSQL 数据库、身份验证和其他用于构建 Web 和移动应用程序的有用功能。 在本教程中，你将学习如何从 Supabase 读取数据并在 Gradio Dashboard 上实时绘制数据。

Supabase is a cloud-based open-source backend that provides a PostgreSQL database, authentication, and other useful features for building web and mobile applications. In this tutorial, you will learn how to read data from Supabase and plot it in real-time on a Gradio Dashboard.

先决条件：首先，你需要一个免费的 Supabase 帐户，你可以在此处注册：https: //app.supabase.com/

Prerequisites: To start, you will need a free Supabase account, which you can sign up for here: https://app.supabase.com/

在此端到端指南中，你将学习如何：

In this end-to-end guide, you will learn how to:

• 在 Supabase 中创建表

  Create tables in Supabase

• 使用 Supabase Python Client 将数据写入 Supabase

  Write data to Supabase using the Supabase Python Client

• 使用 Gradio 在实时仪表板中可视化数据

  Visualize the data in a real-time dashboard using Gradio

如果你已经在 Supabase 上拥有想要在仪表板中可视化的数据，则可以跳过前两部分并直接进入可视化数据！

If you already have data on Supabase that you'd like to visualize in a dashboard, you can skip the first two sections and go directly to visualizing the data!

在 Supabase 中创建表

首先，我们需要一些数据来可视化。 按照这个优秀的指南，我们将创建虚假的商业数据并将其放入 Supabase。

First of all, we need some data to visualize. Following this excellent guide, we'll create fake commerce data and put it in Supabase.

1. Start by creating a new project in Supabase. Once you're logged in, click the "New Project" button

2. 首先在 Supabase 中创建一个新项目。 登录后，单击“新建项目”按钮

3. Give your project a name and database password. You can also choose a pricing plan (for our purposes, the Free Tier is sufficient!)

4. 为你的项目提供名称和数据库密码。 你还可以选择定价计划（就我们而言，免费套餐就足够了！）

5. You'll be presented with your API keys while the database spins up (can take up to 2 minutes).

6. 当数据库启动时（最多可能需要 2 分钟），你将看到 API 密钥。

7. Click on "Table Editor" (the table icon) in the left pane to create a new table. We'll create a single table called Product, with the following schema:

8. 单击左侧窗格中的“表格编辑器”（表格图标）以创建新表格。 我们将创建一个名为 Product 的表，其架构如下：

5. Click Save to save the table schema.

6. 单击保存以保存表架构。

我们的桌子现在准备好了！

Our table is now ready!

向 Supabase 写入数据

下一步是将数据写入 Supabase 数据集。 我们将使用 Supabase Python 库来执行此操作。

The next step is to write data to a Supabase dataset. We will use the Supabase Python library to do this.

6. Install supabase by running the following command in your terminal:

7. 通过在终端中运行以下命令来安装 supabase ：

pip install supabase

7. Get your project URL and API key. Click the Settings (gear icon) on the left pane and click 'API'. The URL is listed in the Project URL box, while the API key is listed in Project API keys (with the tags service_role, secret)

8. 获取你的项目 URL 和 API 密钥。 单击左侧窗格中的设置（齿轮图标），然后单击“API”。 URL 列在项目 URL 框中，而 API 密钥列在项目 API 密钥中（带有标签 service_role 、 secret ）

9. Now, run the following Python script to write some fake data to the table (note you have to put the values of SUPABASE_URL and SUPABASE_SECRET_KEY from step 7):

10. 现在，运行以下 Python 脚本将一些假数据写入表（请注意，你必须输入第 7 步中的 SUPABASE_URL 和 SUPABASE_SECRET_KEY 的值）：

import supabase

# Initialize the Supabase client
client = supabase.create_client('SUPABASE_URL', 'SUPABASE_SECRET_KEY')

# Define the data to write
import random

main_list = []
for i in range(10):
    value = {'product_id': i, 
             'product_name': f"Item {i}",
             'inventory_count': random.randint(1, 100), 
             'price': random.random()*100
            }
    main_list.append(value)

# Write the data to the table
data = client.table('Product').insert(main_list).execute()

返回你的 Supabase 仪表板并刷新页面，你现在应该看到 Product 表中填充了 10 行！

Return to your Supabase dashboard and refresh the page, you should now see 10 rows populated in the Product table!

在实时 Gradio 仪表板中可视化数据

最后，我们将使用相同的 supabase Python 库从 Supabase 数据集中读取数据，并使用 gradio 创建实时仪表板。

Finally, we will read the data from the Supabase dataset using the same supabase Python library and create a realtime dashboard using gradio.

注意：如果你没有完成前面的部分，我们将重复本节中的某些步骤（例如创建 Supabase 客户端）。 如第 7 步所述，你将需要数据库的项目 URL 和 API 密钥。

Note: We repeat certain steps in this section (like creating the Supabase client) in case you did not go through the previous sections. As described in Step 7, you will need the project URL and API Key for your database.

9. Write a function that loads the data from the Product table and returns it as a pandas Dataframe:

10. 编写一个函数，从 Product 表加载数据并将其作为 pandas Dataframe 返回：

import supabase
import pandas as pd

client = supabase.create_client('SUPABASE_URL', 'SUPABASE_SECRET_KEY')

def read_data():
    response = client.table('Product').select("*").execute()
    df = pd.DataFrame(response.data)
    return df

10. Create a small Gradio Dashboard with 2 Barplots that plots the prices and inventories of all of the items every minute and updates in real-time:

11. 创建一个带有 2 个条形图的小型 Gradio 仪表板，每分钟绘制一次所有项目的价格和库存并实时更新：

import gradio as gr

with gr.Blocks() as dashboard:
    with gr.Row():
        gr.BarPlot(read_data, x="product_id", y="price", title="Prices", every=60)
        gr.BarPlot(read_data, x="product_id", y="inventory_count", title="Inventory", every=60)

dashboard.queue().launch()

请注意，通过将函数传递给 gr.BarPlot() ，我们让 BarPlot 在 Web 应用程序加载后立即查询数据库（然后由于 every 参数，每 60 秒再次查询一次）。 你的最终仪表板应如下所示：

Notice that by passing in a function to gr.BarPlot(), we have the BarPlot query the database as soon as the web app loads (and then again every 60 seconds because of the every parameter). Your final dashboard should look something like this:

结论

就是这样！ 在本教程中，你学习了如何将数据写入 Supabase 数据集，然后读取该数据并将结果绘制为条形图。 如果你更新 Supabase 数据库中的数据，你会注意到 Gradio 仪表板将在一分钟内更新。

That's it! In this tutorial, you learned how to write data to a Supabase dataset, and then read that data and plot the results as bar plots. If you update the data in the Supabase database, you'll notice that the Gradio dashboard will update within a minute.

尝试向此示例（或使用不同的数据集）添加更多图表和可视化，以构建更复杂的仪表板！

Try adding more plots and visualizations to this example (or with a different dataset) to build a more complex dashboard!