从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. 点击左侧面板中的“表格编辑器”（表格图标）以创建一个新表格。我们将创建一个名为 Product 的单一表格，其模式如下：

5. 点击保存以保存表结构。

我们的表现在已经准备好了！

将数据写入Supabase

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

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

pip install supabase

7. 获取您的项目URL和API密钥。点击左侧面板上的设置（齿轮图标），然后点击'API'。URL列在项目URL框中，而API密钥列在项目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. 创建一个包含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=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在网页应用加载时立即查询数据库（然后由于every参数，每60秒再次查询）。您的最终仪表板应该看起来像这样：

结论

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

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