React Dashboard 终极指南。第一部分：概述和分析后端

这是使用 React、GraphQL 和 Cube.js 构建动态分析仪表板和应用程序指南的第一部分，您可以在此处找到完整指南

另外，您可以在下面看到最终应用程序的演示。在线演示可在此处获取。

如今，我们几乎在任何应用程序中都能看到分析仪表板和报告功能。在我的 Web 开发人员生涯中，我构建了数十种不同的仪表板，从用于衡量应用程序性能的内部工具，到带有交互式报表构建器和动态仪表板的面向客户的门户。

我不能说我一直都喜欢这个过程。几年前，我把所有 HTML（包括仪表板和图表）都渲染到服务器上，然后尝试用一些 jQuery 和一些 hack 来实现动态化。后端是巨大的单体应用程序，处理大量任务，包括分析处理，最终往往导致速度缓慢、效率低下且难以维护。如今，得益于微服务、容器、前端框架和许多优秀的图表库，构建这样的分析仪表板和报表生成器变得更加容易，也更加有趣。

在本教程中，我们将逐步学习如何构建一个全栈分析应用程序，包括报表生成器和动态仪表板。我们将采用微服务架构构建应用程序，并将前端与后端分离。部分功能将依赖 AWS 服务，但您也可以轻松使用自己的微服务替代它们，我们将在本教程的后面部分介绍。

您可以在这里查看我们将要构建的最终应用程序。下图展示了我们应用程序的架构。

我们先来看看后端 -

我们将把仪表板数据存储在PostgreSQL中，这是一个免费的开源关系数据库。对于那些没有 Postgres 或想使用其他数据库的用户，我将在本教程的后面提供一些有用的链接，介绍如何在不同的数据库（例如 MongoDB）上进行相同的设置。

接下来，我们将安装Cube.js并将其连接到数据库。Cube.js 是一个用于构建分析型 Web 应用程序的开源框架。它在数据库之上创建了一个分析 API，并处理 SQL 组织、缓存、安全、身份验证等功能。

我们还将使用AWS Cognito进行用户注册和登录，并使用AWS AppSync作为 GraphQL 后端。您也可以选择使用自己的身份验证服务以及 GraphQL 后端。但为了简单起见，本教程将主要使用 AWS 服务。

前端是一个 React 应用程序。我们将使用 Cube.js 开发环境生成一个包含报表生成器和仪表板的 React 仪表板样板。它使用Create React App来创建所有配置，并将所有组件连接在一起，以便与 Cube.js API 和 GraphQL 后端配合使用。最后，对于可视化，我们将使用 Recharts，一个功能强大且可自定义的基于 React 的图表库。

设置数据库和Cube.js

我们首先需要准备一个数据库。我们将使用PostgreSQL数据库，但其他任何关系数据库也应该可以正常工作。如果您想使用 MongoDB，则需要添加一个 MongoDB BI 连接器。它允许您在 MongoDB 数据上执行 SQL 代码。您可以从 MongoDB 网站轻松下载。

还有一件事需要注意，那就是复制。由于性能问题，对生产数据库运行分析查询被认为是一种不好的做法。Cube.js 可以显著减少数据库的工作负载，但我仍然建议连接到副本数据库。

如果您没有仪表板的任何数据，您可以下载我们的示例电子商务 Postgres 数据集。

$ curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
$ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql

现在，让我们安装 Cube.js 并创建后端服务。在终端中运行以下命令：

$ npm install -g cubejs-cli
$ cubejs create react-dashboard -d postgres

我们刚刚创建了一个新的 Cube.js 服务，并配置为使用 Postgres 数据库。Cube.js 使用以 开头的环境变量CUBEJS_进行配置。要配置与数据库的连接，我们需要指定数据库类型和名称。在 Cube.js 项目文件夹中，将 的内容替换.env为以下内容：

CUBEJS_API_SECRET=SECRET
CUBEJS_DB_TYPE=postgres
CUBEJS_DB_NAME=ecom

如果您使用不同的数据库，请参阅此文档以了解如何连接到您选择的数据库。

现在，让我们运行 Cube.js Playground。它将帮助我们构建一个简单的数据模式，测试图表，然后生成一个 React 仪表板样板。在 Cube.js 项目文件夹中运行以下命令：

$ node index.js

接下来，在浏览器中打开http://localhost:4000来创建 Cube.js 数据模式。

Cube.js 使用数据模式生成 SQL 代码，该代码将在数据库中执行。数据模式并非 SQL 的替代品。它旨在使 SQL 可重用，并赋予其结构，同时保留其所有功能。数据模式的基本元素是度量值和维度。

衡量指标指的是定量数据，例如销售单位数、独立访问次数、利润等等。

维度是指分类数据，例如状态、性别、产品名称或时间单位（例如，天、周、月）。

数据模式是一段 JavaScript 代码，它定义了度量和维度，以及它们如何映射到 SQL 查询。以下是该模式的示例，可用于描述用户的数据。

cube(`Users`, {
  sql: `SELECT * FROM users`,

  measures: {
    count: {
      sql: `id`,
      type: `count`
    }
  },

  dimensions: {
    city: {
      sql: `city`,
      type: `string`
    },

    signedUp: {
      sql: `created_at`,
      type: `time`
    },

    companyName: {
      sql: `company_name`,
      type: `string`
    }
  }
});

Cube.js 可以根据数据库表生成简单的数据模式。让我们选择orders、、和表line_items，然后单击“生成模式”。它将生成 4 个模式文件，每个表一个。productsproduct_categories

生成架构后，我们可以导航到“构建”选项卡，选择一些度量和维度来测试架构。在“构建”选项卡中，您可以使用不同的可视化库构建示例图表，并检查图表的创建过程，从生成的 SQL 一直到用于渲染图表的 JavaScript 代码。您还可以检查发送到 Cube.js 后端的 JSON 查询。

生成仪表板模板

下一步是生成前端应用程序的模板。导航到“Dashboard App”，选择 React 和 Recharts，然后点击“Create dashboard app”按钮。

生成应用程序并安装所有依赖项可能需要一些时间。完成后，dashboard-app你的 Cube.js 项目文件夹中会有一个文件夹。要启动前端应用程序，请前往 Playground 中的“Dashboard App”选项卡，然后点击“Start”按钮，或者在文件夹中运行以下命令dashboard-app：

$ npm start

确保 Cube.js 后端进程已启动并运行，因为我们的前端应用程序使用了它的 API。前端应用程序运行在http://localhost:3000上。如果你在浏览器中打开它，你应该能够看到一个带有查询生成器的“Explore”选项卡和一个空的“Dashboard”选项卡。你可以随意创建一些图表并将它们保存到仪表板。

我们生成的应用程序使用 Apollo GraphQL 客户端将仪表板项目存储到本地存储中。在下一部分中，我们将使用 AWS AppSync 添加持久存储，并使用 AWS Cognito 进行用户身份验证。