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

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

先决条件

• 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 应该在 http://localhost:3366 运行。您可以在 METABASE_LOGIN.json 找到您的登录凭据。

延伸阅读

• 示例应用和 JWT 快速入门