嵌入式分析 SDK - CLI 快速入门
嵌入式分析 SDK 仅在 Pro 和 Enterprise 计划（包括自托管和 Metabase Cloud）中可用。
我们构建了一个单一命令，可以启动 Metabase 并帮助您在应用程序中嵌入仪表板。此设置（使用 API 密钥）在生产环境中无效；它仅供您在本地计算机上快速尝试 SDK。生产环境需要 Pro/Enterprise 许可证，以及 JWT 认证的 SSO。
先决条件
- Docker（应在您的机器上运行）
- Node.js 20.x LTS 或更高版本。
- 许可证（可选 - 仅当您想尝试多租户功能时）。
- 数据库（您可以连接到您应用程序的数据库）。
您不需要运行 Metabase；该工具会在 Docker 上为您设置 Metabase。
快速入门 CLI 命令
进入您的 React 应用程序并运行
npx @metabase/embedding-sdk-react@latest start
CLI 工具将引导您完成设置过程。需要整合许多组件，以下是该命令功能的概述：
先决条件检查
该工具将检查以下内容：
- 您已在 React 应用程序的顶层目录中运行该命令。
- 您已安装 SDK（如果您尚未安装，CLI 会为您安装 SDK 并将其添加为
package.json中的依赖项）。 - 您的机器上已安装并正在运行 Docker。
数据库连接（可选）
该工具将询问您是否有要连接的数据库。使用箭头键选择“是”或“否”。该工具将使用此数据库来生成嵌入式仪表板。
如果您回答“否”，脚本将使用 Metabase 自带的示例数据库来创建一个可嵌入的仪表板。
如果您选择“是”，该工具将提示您连接到数据库。选择您的数据库引擎。您需要提供数据库的主机、端口、用户名和密码。该工具将连接到数据库，并提示您选择要嵌入的表。选择 1-3 个表。如果您想体验多租户功能，请选择一个包含用户 ID 列的表。Metabase 将 X-ray 这些表以创建要嵌入的仪表板。
Metabase 设置
该工具将要求您提供一个电子邮件地址，以在 Metabase 中创建第一个管理员帐户。该电子邮件地址不必是真实的（该工具不会设置 SMTP 服务器）；它仅用于登录工具设置的 Metabase。
接下来，该工具将在 Docker 中启动一个 Metabase。这需要一些时间。要查看 Docker 容器的状态，请使用 docker ps 命令。或者，您可以花点时间反思一下最近做出的好决定。
一旦 Metabase 启动并运行，该工具将使用您提供的电子邮件创建一个管理员用户，并为此 Metabase 生成一个 API 密钥。
然后，该工具将提示您选择 1-3 个要嵌入的表。您可以按
权限设置（含多租户，可选）
如果您拥有 Pro/EE 许可证，该工具可以设置权限。要获取许可证，请注册 自托管 Metabase Pro 的免费试用版。
如果您选择设置多租户并连接到自己的数据库，该工具将询问您要用来限制表的列（例如，用户 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 文件中找到您的登录凭据。
延伸阅读
阅读其他版本的 Metabase 的文档。