1. 其他教程
  2. 从 Supabase 数据创建仪表板

从 Supabase 数据创建仪表盘

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

先决条件：首先，您需要一个免费的 Supabase 账户，您可以在这里注册：https://app.supabase.com/

在这个端到端指南中，您将学习如何

  • 在 Supabase 中创建表格
  • 使用 Supabase Python 客户端向 Supabase 写入数据
  • 使用 Gradio 在实时仪表盘中可视化数据

如果您已经在 Supabase 上有数据想要在仪表盘中可视化，您可以跳过前两个部分，直接进入可视化数据！

在 Supabase 中创建表格

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

1. 首先在 Supabase 中创建一个新项目。登录后，点击“New Project”（新项目）按钮。

2. 为您的项目命名并设置数据库密码。您还可以选择定价计划（对于我们的目的，免费套餐就足够了！）。

3. 在数据库启动（可能需要长达 2 分钟）期间，您将看到您的 API 密钥。

4. 点击左侧窗格中的“Table Editor”（表格图标）来创建一个新表格。我们将创建一个名为 Product 的表格，其模式如下：

product_idint8
inventory_countint8
pricefloat8
product_namevarchar

5. 点击 Save（保存）以保存表格模式。

我们的表格现在已准备就绪！

向 Supabase 写入数据

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

6. 在您的终端中运行以下命令安装 supabase

pip install supabase

7. 获取您的项目 URL 和 API 密钥。点击左侧窗格中的 Settings（齿轮图标），然后点击 'API'。URL 列在 Project URL（项目 URL）框中，而 API 密钥列在 Project API keys（项目 API 密钥）中（带有标签 service_role, secret）。

8. 现在，运行以下 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 行数据！

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

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

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

9. 编写一个函数，从 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. 创建一个小型 Gradio 仪表盘，其中包含 2 个条形图，每分钟绘制所有项目的价格和库存并实时更新

import gradio as gr

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

dashboard.queue().launch()

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

结论

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

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

←

从 BigQuery 数据创建仪表板

从 Google 表格创建实时仪表板

→
gradio