嵌入式分析SDK - 使用示例应用快速入门

本指南将使用示例React应用设置嵌入式分析SDK，但您也可以根据自己的应用程序进行操作。

先决条件

• Node.js 18.x LTS或更高版本（用于示例应用）。
• Metabase版本v1.51或更高版本.

快速入门概述

我们将对Metabase和示例应用进行一些设置。

为嵌入设置Metabase

1. 安装Metabase企业版（如果尚未安装）
2. 激活您的许可证
3. 启用嵌入
4. 启用使用JWT的SSO

启动示例应用

1. 获取示例应用.
2. 设置应用环境.
3. 运行应用服务器以处理JWT身份验证并托管嵌入式Metabase组件。
4. 运行客户端应用，其中将包含使用SDK构建的Metabase组件。

然后调整样式。

让我们开始。

安装Metabase企业版

您可以在带有免费试用的云计划上运行Metabase Pro。

或本地运行。这里是一个docker单行命令

docker run -d -p 3000:3000 --name metabase metabase/metabase-enterprise:latest

您还可以下载JAR文件，然后按如下方式运行

java -jar metabase.jar

默认情况下，Metabase将在https://127.0.0.1:3000上运行。

如果您遇到困难，请查看我们的安装文档。

激活您的许可证

要启用自托管时的JWT SSO，您需要激活您的许可证。云上的Metabase Pro计划会为您处理此问题。

在Metabase中启用嵌入

从任何Metabase页面，点击右上角的齿轮图标，然后选择管理设置 > 设置 > 嵌入。

开启

• 嵌入式分析SDK
• 静态嵌入

否则，整个设置将无法成功。

启用使用JWT的SSO

从任何Metabase页面，点击右上角的齿轮图标，然后选择管理设置 > 设置 > 身份验证。

在名为JWT的卡片上，点击设置按钮。

JWT身份提供者URI

在JWT身份提供者URI字段中粘贴

localhost:9090/sso/metabase

或将您的云URL替换为/localhost。

JWT签名密钥使用的字符串

点击生成密钥按钮。

复制密钥并将其粘贴到您的.env文件中的环境变量METABASE_JWT_SHARED_SECRET中。

应用程序服务器将使用此密钥来签署令牌，这样 Metabase 就知道应用程序对内容的请求是经过授权的。

保存并启用 JWT

务必点击 保存并启用 按钮，否则一切都将无效。

设置示例应用程序

克隆 Metabase Node JS React SDK 嵌入示例应用。

git clone [email protected]:metabase/metabase-nodejs-react-sdk-embedding-sample.git

设置应用环境

在示例应用程序的主目录中，将 .env.example 模板复制到 .env。

cp .env.example .env

在 .env 中，确保 REACT_APP_METABASE_INSTANCE_URL 和 METABASE_INSTANCE_URL 指向您的 Metabase 实例 URL，例如 https://127.0.0.1:3000。

您的 .env 可能看起来像这样

# FRONTEND
PORT=3100
REACT_APP_METABASE_INSTANCE_URL="https://127.0.0.1:3000"
REACT_APP_JWT_PROVIDER_URI="https://127.0.0.1:9090/sso/metabase"

# BACKEND
BACKEND_PORT=9090
METABASE_INSTANCE_URL="https://127.0.0.1:3000"
METABASE_JWT_SHARED_SECRET="TODO"

设置应用程序服务器

切换到 server 目录

cd server

安装包

npm install

启动服务器

npm start

设置客户端应用程序

切换到 client 目录。

安装包

npm install

此命令将安装 Metabase 嵌入式分析 SDK 以及应用程序的其他依赖项。

启动客户端

在另一个终端中，切换到 client 目录

cd client

安装依赖项

npm install

启动客户端应用程序

npm start

您的浏览器应该会自动打开应用程序。默认情况下，应用程序在 https://127.0.0.1:3100 上运行。

此时，您应该已经可以正常运行了

在您的应用程序中，您将看到一个嵌入的 InteractiveQuestion 组件。

<MetabaseProvider config={config} theme={theme}>
  <InteractiveQuestion questionId={questionId} />
</MetabaseProvider>

尝试更改 客户端应用程序 中的某些 theme 选项以样式化组件。