通过Cumul.io的整合使嵌入式分析变得简单起来

前端小工
97 阅读12分钟

浏览Twitter、LinkedIn、Reddit、Discord上的SaaS社区，你会看到一个共同的主题出现在其中的许多地方。这个主题可以有很多名字。BI、分析、洞察力等等。这很自然，我们做业务，收集数据，我们成功或失败。我们想研究这一切，对我们所拥有的数据进行一些理解，并采取行动。这种需求产生了许多项目和工具，使任何想研究数据的人的生活更容易一些。但是，当人类拥有时，人类想要更多。而在商业智能和分析的世界里，"更多 "往往是以嵌入、品牌、定制风格和访问等形式出现。这最终意味着开发人员有更多的工作和更多的时间需要考虑。所以，自然而然地，就有了对能够让你拥有一切的BI工具的需求。

让我们列举一下作为这些仪表盘的构建者和维护者可能面临的挑战：

  1. 你想在你自己的应用程序或平台中向终端用户或查看者提供这些仪表盘
  2. 你希望能够管理不同的仪表盘集合（即 "整合"）。
  3. 你希望能够授予特定用户对仪表盘和数据集集合的权利
  4. 你想确保用户能够访问只与他们相关的数据

Cumul.io提供了一个我们称之为 "**集成 "**的工具，帮助解决这些挑战。在这篇文章中，我将引导你了解什么是集成，以及如何设置一个集成。最酷的是，对于上面的大多数要点，只需要极少的代码，大部分都可以在Cumul.io的用户界面上设置。

一些背景 - 整合

Cumul.io中的集成是一种结构，它定义了一组打算一起使用的仪表盘（例如，在同一个应用程序中）。这也是我们用来将仪表盘嵌入应用程序的方法。换句话说，为了将仪表盘嵌入到一个应用程序中，我们让应用程序访问它们所属的集成。你可以将仪表盘与集成相关联，并管理集成的终端用户对这些仪表盘和他们使用的数据集的访问权限类型。一个仪表盘可能是多个集成的一部分，但它在不同的集成上可能有不同的访问权限。当涉及到嵌入时，有一些SDK可用来使生活变得简单，无论你的堆栈是什么样子。

一旦你有了Cumul.io账户，如果你是Cumul.io中一个组织的 "所有者"，你将能够通过集成标签管理和维护你的所有集成。让我们来看看一个Cumul.io账户的例子。下面你可以看到一个Cumul.io用户可能已经创建的仪表盘。

虽然这些是这个用户可能创建的所有仪表盘，但很可能不是所有的仪表盘都是为相同的终端用户或应用准备的。因此，这个Cumul.io账户的所有者将创建和维护一个集成（或更多！）💪让我们看看这对他们来说可能是什么样子。

所以，看起来这个Cumul.io账户的所有者维护着两个独立的应用程序。

现在让我们看看创建一个集成并将其仪表板嵌入到一个应用程序中的过程会是什么样子。好消息是，如前所述，你要做的很多步骤都可以在Cumul.io用户界面内完成。

免责声明：为了本文的目的，我将只专注于集成部分。因此，我将跳过所有与仪表盘创建和设计有关的内容，我们将从一套预制的假想仪表盘开始。

创建一个集成

为了简单起见，我们现在只创建一个集成。让我们想象一下，我们有一个分析平台，为我们的公司维护。有三个仪表盘，我们想提供给我们的终端用户：营销仪表盘、销售仪表盘和信息仪表盘。

比方说，在这个账户创建的或可以访问的所有仪表盘中，对于这个特定的项目，他们只想使用以下内容。

新的集成

为了创建集成，我们进入集成选项卡并选择新集成。弹出的对话已经让你知道你的下一步是什么了。

选择仪表板

接下来，你将能够选择哪些仪表盘将包括在这个集成中。你还可以给集成一个名字，在这里我决定将其命名为 "非常重要的集成"。

一旦你确认了你的选择，你将可以选择为每个仪表盘定义一个lug（强烈建议）。这些东西以后可以在将仪表盘嵌入到你的应用程序中时使用。你以后会发现，蛞蝓使你在前端代码中引用仪表盘变得很容易，如果需要的话，也使你更容易替换仪表盘（因为你不需要担心前端代码中的仪表盘ID）。

访问权限

然后，你将为其仪表盘使用的数据集设置集成的访问权限。在这里，我们将其设置为 "可以查看"。关于访问权限的更多信息以及它们的含义，请查看我们的 "将数据集关联到集成"。

过滤器和参数（以及多租户访问）

题外话：为了帮助多用户访问--这在这个假想的设置中是有意义的--Cumul.io可以对仪表板使用的数据集设置参数和过滤器。这意味着每个登录你的分析平台的用户只能在仪表盘中看到他们个人能访问的数据。你可以想象，在这种情况下，访问权将基于终端用户在公司的哪个部门工作。关于如何在Cumul.io设置多租户的更多信息，请查看我们的文章，"使用Auth0在Cumul.io仪表盘上设置多租户"。这可以在仪表盘设计过程中完成（我们跳过这个过程），这使我们更容易直观地看到过滤器的作用。但在这里，我们将在集成创建过程中设置这些过滤器。

在这里，我们设置数据集可能需要的过滤器。在这种情况下，由于我们根据用户的部门进行过滤，我们定义一个department 参数，并在此基础上进行过滤。

然后就可以了!一旦你完成了这些设置，你就成功创建了一个集成。下一个对话将给你指示，你的下一个步骤是什么，以嵌入你的集成。

现在，你将能够在你的集成标签中看到这个全新的集成。这也是你可以快速访问集成ID的地方，这个ID以后将被用于嵌入仪表盘。

好消息!在你的集成被创建后，你可以随时编辑它。你可以删除或添加仪表盘，改变仪表盘的塞子或访问权限。因此，你不必担心随着你的应用程序的变化和发展而创建新的集成。而且，由于编辑集成是在用户界面内进行的，你不需要担心让开发人员再次设置它。非技术性用户可以在旅途中适应这些集成。

嵌入仪表板

让我们看看我们想要达到的目的。我们想在一个定制的应用程序中提供仪表盘。很简单，用户登录到一个应用，该应用有仪表盘，他们看到的仪表盘是他们被允许看到的数据。例如，它可能看起来像下面这样。

有人对如何向终端用户提供仪表盘有一个非常具体的设想。他们想要一个侧边栏，在那里他们可以翻阅每个仪表盘。它也可能是完全不同的东西。我们要关注的是我们如何将这些仪表盘嵌入到我们的应用程序中，而不管主机应用程序是什么样子。

Cumul.io配备了一套公开可用的SDK。在这里，我将向你展示，如果你要使用Node SDK，你会怎么做。请查看我们的开发者文档，看看还有哪些SDK可用，以及如何使用它们的说明。

第1步：为你的终端用户生成SSO令牌

在你为你的最终用户生成SSO令牌之前，你必须确保你在Cumul.io创建了一个API密钥和令牌。你可以从你的Cumul.io简介中完成这个任务。应该是有访问权限的组织所有者来创建并使用这个API密钥和令牌来进行SSO授权请求。一旦你完成了这些，让我们首先创建一个Cumul.io客户端，这将在应用程序的服务器端完成。

const Cumulio = require("cumulio");

const client = new Cumulio({
  api_key: '<YOUR API KEY>',
  api_token: '<YOUR API TOKEN>',
});

现在我们可以为终端用户创建SSO令牌了。关于这个API调用和所需字段的更多信息，请查看我们关于生成SSO令牌的开发者文档。

let promise = client.create('authorization', {
  integration_id: '<THE INTEGRATION ID>',
  type: 'sso',
  expiry: '24 hours',
  inactivity_interval: '10 minutes',
  username: '< A unique identifier for your end user >',
  name: '< end-user name >',
  email: '< end-user email >',
  suborganization: '< end-user suborganization >',
  role: 'viewer',
  metadata: {}
});

在这里，注意我们如何添加了可选的metadata 字段。在这里，你可以提供你想要过滤仪表盘数据集的参数和值。在我们刚才的例子中，我们是根据部门进行过滤的，所以我们要把它添加到元数据中。理想情况下，你会从你使用的认证提供商那里获得这些信息。请看关于我们如何使用Auth0的详细解释。

这个请求将返回一个JSON对象，其中包含一个授权ID和令牌，随后被用作密钥/令牌组合，以嵌入客户端的仪表盘。

你还可以选择在这里添加一些很酷的东西，那就是一个CSS属性。这将允许你为每个用户（或用户组）定义自定义的外观和感觉。对于同样的应用，安吉丽娜和布拉德的营销仪表盘可以是这样的。

第二步：嵌入

我们在那里跳得有点早。我们为终端用户创建了SSO令牌，但我们还没有将仪表盘真正嵌入到应用程序中。让我们来看看这个。首先，你应该安装并导入Web组件：

import '@cumul.io/cumulio-dashboard';

导入该组件后，你可以像使用HTML标签一样使用它。这是你将嵌入你的仪表盘的地方：

<cumulio-dashboard
  dashboardId="< a dashboard id >"
  dashboardSlug="< a dashboard slug >"
  authKey="< SSO key from step 1 >"
  authToken="< SSO token from step 1 >">
</cumulio-dashboard>

在这里你有几个选择。你可以为你想嵌入的任何仪表盘提供仪表盘ID，或者你可以提供我们在集成设置中定义的仪表盘lug（这就是为什么我强烈建议这样做，这样做更容易阅读）。关于如何嵌入仪表盘的更详细的信息，你也可以查看我们的开发者文档。

当然，完成这一步的一个好方法就是在你的HTML文件中定义仪表盘组件的骨架，然后从你的应用程序的客户端填入其余部分。我做了以下工作，当然这不是唯一的方法。

我添加了一个ID为dashboard 的仪表盘组件：

<cumulio-dashboard id="dashboard"></cumulio-dashboard>

然后，我在客户端代码中检索了这个组件，如下所示：

const dashboardElement = document.getElementById("dashboard");

然后，我从我的应用程序的服务器端请求SSO令牌，它返回所需的密钥和令牌以添加到仪表板组件中。让我们假设我们有一个包装函数getDashboardAuthorizationToken() ，为我们做这个，并返回服务器端SSO令牌请求的响应。接下来，我们只需相应地填入仪表板组件：

const authorizationToken = await getDashboardAuthorizationToken();
if (authorizationToken.id && authorizationToken.token) {
  dashboardElement.authToken = authorizationToken.token;
  dashboardElement.authKey = authorizationToken.id;
  dashboardElement.dashboardSlug = "marketing|sales|leads";
}

请注意，在前面的步骤中，我选择了为我的仪表盘定义slugs，这些仪表盘是这个整合的一部分。这意味着我可以避免查找仪表盘的ID，并将dashboardId 作为dashboardElement 的参数之一。相反，我只需提供一个slugsmarketing,sales 或leads ，就可以了。当然，你必须在你的应用程序中设置某种选择过程，以决定你在哪里以及何时嵌入哪个仪表盘。

就这样，伙计们!我们已经成功地在Cumul.io中创建了一个集成，并且在几行代码中，我们已经能够将其仪表盘嵌入到我们的应用程序中 🎉 现在想象一下，你必须同时维护多个应用程序的场景，无论是在同一公司内还是在不同的公司内。无论你的情况如何，我相信你可以想象，如果你有许多仪表盘，而每个仪表盘都要去不同的地方，并且每个仪表盘都要有不同的访问权限，这取决于它们在哪里，而且我们还要继续下去。这怎么可能很快就失去控制。整合允许你以简单和整洁的方式管理这些，所有这些都在一个地方，正如你所看到的，主要是在Cumul.io用户界面内。

在这里，你可以做的还有很多，我们还没有详细介绍。例如，添加用户特定的自定义主题和CSS。我们也没有讨论你如何在仪表盘中设置参数和过滤器，或者你如何从你的主机应用程序中使用它们，以便你有一个多用户设置。如果你有兴趣，你可以在下面找到一些关于这些步骤的有用教程和文档的链接。

avatar
文章
阅读
粉丝