嵌入式分析SDK - CLI快速入门

我们构建了一个单行命令来启动Metabase，并帮助您在应用程序中获得一个嵌入式仪表板。此API密钥设置无法在生产环境中使用；它仅用于您在本地机器上快速试用SDK。生产环境设置需要专业版/企业版许可证和JWT单点登录。

先决条件

• Docker（应在您的机器上运行）
• Node.js 20.x LTS 或更高版本。
• 许可证（可选 - 仅当您想试用多租户时）。
• 数据库（您可以连接到您应用程序的数据库）。

您不需要运行中的Metabase；该工具将为您在Docker上设置一个Metabase。

快速入门CLI命令

进入您的React应用程序并运行

npx @metabase/embedding-sdk-react@latest start

CLI工具将引导您完成设置。有相当多的部分需要组合，以下是该命令所做内容的概述：

• 前置条件检查
• 数据库连接（可选）
• Metabase 设置
• 多租户权限设置（可选）
• React组件设置
• 看：Metabase已嵌入您的应用程序

前置条件检查

该工具将检查以下内容：

• 您已在React应用程序的顶层目录中运行该命令。
• 您已安装SDK（如果尚未安装，CLI将为您安装SDK并将其添加为package.json中的依赖项）。
• 您的机器上已启动并运行Docker。

数据库连接（可选）

该工具将询问您是否要连接数据库。使用箭头键选择“是”或“否”。该工具将使用此数据库生成一个嵌入式仪表板。

如果您选择“否”，脚本将使用Metabase自带的示例数据库创建一个仪表板以进行嵌入。

如果您选择“是”，该工具将提示您连接到数据库。选择您的数据库引擎。您需要提供数据库的主机、端口、用户名和密码。该工具将连接到数据库，并提示您选择数据库中的表进行嵌入。选择1-3个表。如果您想查看多租户功能，请选择包含用户ID的表。Metabase将对这些表进行X射线分析，以创建要嵌入的仪表板。

Metabase 设置

该工具将要求您提供一个电子邮件地址，用于在 Metabase 中创建第一个管理员帐户。该电子邮件地址无需是真实地址（该工具不会设置 SMTP 服务器）；该电子邮件地址仅用于登录该工具将设置的 Metabase。

接下来，该工具将在 Docker 上启动 Metabase。这需要一些时间。要查看 Docker 容器的状态，请使用 docker ps 命令。或者花时间反思一下您最近做出的好选择。

Metabase 启动并运行后，该工具将使用您提供的电子邮件创建一个管理员用户，并为该 Metabase 生成一个API 密钥。

该工具将提示您选择 1-3 个表进行嵌入。您可以按选择，切换所有，反转选择，然后按继续。

多租户权限设置（可选）

如果您拥有专业版/企业版许可证，该工具可以设置权限。要获取许可证，请注册自托管 Metabase 专业版免费试用。

如果您选择设置多租户并连接到自己的数据库，该工具将询问您要用于限制表的列（例如，用户 ID 列）。Metabase 将根据该列中的值设置该表的行级安全性。

该工具还将设置一个模拟 Express 服务器来处理 JWT。该工具将询问您应该将服务器代码保存在何处（默认值：./mock-server）。它将使用npm install安装服务器的依赖项。

您需要在另一个终端会话中启动模拟服务器。进入模拟服务器的目录并运行

npm run start

React组件设置

接下来，该工具将生成示例 React 组件文件。默认情况下，该工具会将它们保存在您的 React 应用程序的 ./src/components/metabase 中，但如果您愿意，该工具会提示您将它们保存到不同的目录（例如 ./src/analytics）。它会生成几个演示组件供您试用主题和用户切换功能：

• AnalyticsDashboard - 嵌入 Metabase 仪表板的仪表板组件。
• AnalyticsPage - 嵌入带包装提供程序的仪表板页面。在实际应用程序中，您必须将 MetabaseProvider 单独添加到您应用程序的根 App 组件（或您添加其他提供程序的位置）。
• ThemeSwitcher - 在浅色和深色主题之间切换。
• UserSwitcher - 在虚拟用户之间切换。
• AnalyticsProvider - 一个提供程序，为示例主题切换器和用户切换器组件添加演示状态。
• EmbeddingProvider - 一个将 MetabaseProvider 与演示主题和身份验证配置打包在一起的提供程序。

玩转该工具后，您可以删除这些文件，并准备设置自己的主题和用户管理。

将 Metabase/React 组件添加到您的应用程序

您需要将 Metabase/React 组件添加到您的应用程序。在您的客户端应用程序中添加一个导入，如下所示：

import { AnalyticsPage } from "./components/metabase/analytics-page";

确保 from 路径有效（根据您的应用程序，您可能需要将组件移动到新目录）。

然后您需要将 <AnalyticsPage /> 组件添加到您应用程序中的一个页面。例如：

function App() {
  return (
    <div className="App" style={{ width: "1200px", height: "800px" }}>
      <AnalyticsPage />
    </div>
  );
}

export default App;

看：Metabase已嵌入您的应用程序

启动您的应用程序，并访问您添加 <AnalyticsPage /> 组件的页面。您应该会看到一个嵌入式仪表板。

您还可以查看该工具设置的 Metabase。Metabase 应该在 https://:3366 上运行。您可以在 METABASE_LOGIN.json 中找到您的登录凭据。

延伸阅读

• 使用示例应用程序和 JWT 快速入门