dot 快速的未来正在你所在的城市举办的活动中到来。

加入我们在 Redis 发布活动
白色 Redis 标识 返回
搜索

如何使用 Redis 构建可视化项目管理应用程序

LinkedIn-icon
分享
LinkedIn-icon分享到 LinkedIn
Redis

Redis 增长团队

任务管理可能很艰苦。对于管理人员来说，监控彼此分散且不相关的任务仍然是他们职业中的常态，也是一个祸根。能够立即了解项目的进度，而无需浪费时间查找此信息，对任何管理人员来说都是一项宝贵的资产。

拥有一个可以清晰地显示每个任务进度的项目管理系统将节省时间，减少错误，并使管理人员能够更精确地计划他们的下一步行动。

这样的应用程序需要一个强大的数据库才能有效地将图形和资源显示给用户，这就是为什么这个 Launchpad 应用程序使用 Redis 创建了自己的项目管理应用程序。

RedisGraph 是此应用程序的起点，因为它能够简化高度连接数据的遍历并提供上下文洞察。

让我们看看他们是如何将这个项目变为现实的。但在我们深入研究之前，请务必查看我们在 Launchpad 上提供的各种激动人心的应用程序。

https://www.youtube.com/embed/PjqnpUQCD9U
  1. 你将构建什么？
  2. 你需要什么？
  3. 架构
  4. 入门
  5. 工作原理

1. 你将构建什么？

你将构建一个强大的可视化项目管理应用程序，它将帮助用户使用 Redis 可视化和分类任务，同时突出显示它们之间不同的关系。任务可以是想法、目标、史诗级功能、简单任务或错误。

从头到尾，此应用程序的核心目标是简化和简化监控任务集群。下面我们将带您完成每个步骤，以及所需组件及其功能。

2. 你需要什么？

  • Ruby on Rails: 首选的开源软件，用于构建 Web 应用程序
  • RedisGraph: 使用稀疏矩阵来表示图形中的邻接矩阵，并使用线性代数来查询图形。
  • PostgreSQL: 用作强大的开源对象关系数据库系统。
  • TailwindCSS: 用作实用优先的 CSS 框架，有助于构建用户界面。
  • Webpack: 用作模块捆绑器，将 JavaScript 文件捆绑在一起，以便在浏览器中使用。
  • Docker: 作为开发和运行应用程序的开放平台进行部署。

3. 架构

  • 该应用程序被设计为单个 Ruby on Rails 单体。该应用程序还使用 PostgreSQL 以关系方式存储其数据，并在使用 RedisGraph 的图形中存储数据。
  • 管理数据（如用户和项目）以关系方式存储，而任务的存储及其之间的关系则委托给图形存储。
  • 图形存储层具有一个小型定制构建的 DSL，它将 ActiveRecord 样式的函数调用转换为 RedisGraph 查询。
  • 纯 HTML 和 Javascript 是应用程序的遗传构成（Stimulus 用于交互性，D3.js/cola.js 用于图形可视化）
  • HTML 在发送到客户端之前在服务器端呈现。这意味着，不是使用 JSON 在服务器和客户端之间传输数据，而是发送 HTML，并且仅更改 DOM 的一部分被替换。有关更多信息，请参考 Turbo 和 Stimulus 文档。
  • 图形数据使用 D3 的 JSON 插件从 JSON 终结点获取。 Hotwire 用作框架以确保其功能保持高效。
  • 最后，UI 使用 TailwindCSS、Heroicons、Collecticons 和 QuillJS（用于富文本编辑器）构建。

4. 入门

先决条件

步骤 1. 安装先决条件

安装以下软件

  • Docker
  • Docker Compose

步骤 2. 克隆存储库

git clone https://github.com/redis-developer/code-red

首先，确保你有一个可用的 Docker 环境。拉取镜像并启动容器：

docker-compose up -d

code-red % docker-compose up -d                   
[+] Running 5/5
 ⠿ Network code-red_default       Created                                                                                                    0.1s
 ⠿ Container code-red_postgres_1  Started                                                                                                    1.6s
 ⠿ Container code-red_redis_1     Started                                                                                                    1.6s
 ⠿ Container code-red_reset_1     Started                                                                                                    3.3s
 ⠿ Container code-red_app_1       Started

步骤 3. 编译前端代码

docker-compose run --rm app bin/webpack

步骤 4. 设置 PostgreSQL 数据库

docker-compose exec app rails db:setup

数据库“codered_development”和“codered_test”将被创建。

设置完毕后，将示例数据加载到 PostgreSQL 和 Redis 数据库中

docker-compose exec app rails database:seed

docker-compose exec app rails database:seed
== Creating users ==
== Creating projects ==
== Creating tasks ==

应用程序现在应该可以通过 http://localhost:3000 访问。

5. 工作原理

创建任务

首先点击屏幕左上角的加号以创建新任务。然后，你将看到以下图像。在顶部，你可以为任务创建一个标题，并在下面的文本框中添加描述。

在标题下方，你将看到一组下拉菜单。最左侧，你可以决定任务的性质。在中间，你可以设置任务完成的截止日期，最右侧，你可以将任务分配给特定的人。

创建关系

此应用程序的核心优势是能够看到不同任务之间的关系，如以下图像所示。

为此，首先点击一个任务以访问其核心菜单。在这里，你将在底部看到一个名为“添加关系”的下拉菜单（见下图），你可以在这里决定此任务与其他任务之间的关系。

在这个栏的右侧，你可以选择要与之共享关系的任务。

如何查看任务

作为用户，你可能想要查看一个任务。一个弹出窗口应该显示标题、描述、截止日期、状态、类型以及分配任务的人。

修改任务

你可以修改任务的标题、描述、截止日期、状态、类型和分配的人。这样做很简单。点击一个任务，你将拥有

删除任务

要删除一个任务，只需点击任务菜单底部右侧的垃圾桶图标即可。在删除任务之前，应该显示一个确认模态。

获取关系

添加关系

作为用户，你可能想要在两个任务之间创建关系。关系应该具有以下类型

blocks`/`blocked_by`,`parent_of`/`child_of

或者

related

删除关系

在某些时候，你可能想要删除一个关系。在删除任务之前，不应该显示任何确认模态。

如何创建项目

项目以关系方式存储在 PostgreSQL 中。一个项目具有以下属性

id: 用户标识符

user: 项目所有者

name: 项目的人类可读名称

该项目链接到一个图形（使用 id 作为图形名称）。一个图形具有许多任务。

如何创建任务

任务以节点的形式存储在 Redis Graph 中。任务是一个图形节点，具有以下属性

  • Title: 任务标题
  • Description: 富文本，任务的多行描述
  • Deadline: 日期
  • Status: 待办事项、进行中、审核或已完成之一
  • Type: 想法、目标、史诗级、功能、任务或错误之一 - user: 分配者

一个任务可以通过关系链接到许多其他任务。

如何创建关系

关系以边的形式存储在 Redis Graph 中。关系是有向图形边，具有以下属性

from: 源节点

type: 以下之一

Blocked By

Child Of

Related To

to: 目标节点

关系存储为有向边，但在界面中，两个方向都会被渲染。例如，如果任务 A 被任务 B 阻塞，则任务 B 将显示为“阻塞任务 A”。也可以在两个方向上添加关系。

如何获取任务

一个图形具有许多任务，这些任务使用以下 Redis Graph 查询获取

"GRAPH.QUERY" "055616f0-a130-42b1-a3fd-81b7c8a3ef1b" "MATCH (n:Task) RETURN n" "--compact"

如何创建/更新任务

使用以下查询创建和更新任务及其所有属性

"GRAPH.QUERY" "055616f0-a130-42b1-a3fd-81b7c8a3ef1b" "MERGE (n:Task {id: 'f5ec1f25-0cee-49d0-9a85-1043f04ea845'}) SET n.created_at = '2021-05-15 10:20:28 UTC', n.updated_at = '2021-05-15 10:20:28 UTC', n.graph = '#<Graph name=055616f0-a130-42b1-a3fd-81b7c8a3ef1b>', n.id = 'f5ec1f25-0cee-49d0-9a85-1043f04ea845', n.title = 'Submit hackathon app', n.description = '<p>Description of my task</p>', n.deadline = '2021-05-15', n.status = 'todo', n.type = 'task', n.user_id = '25714246-be92-4d96-b1ce-cbb57aaf4747'" "--compact"

如何删除任务

使用以下查询删除任务

"GRAPH.QUERY" "055616f0-a130-42b1-a3fd-81b7c8a3ef1b" "MATCH (n:Task {id: 'f5ec1f25-0cee-49d0-9a85-1043f04ea845'}) DELETE n" "--compact"

如何获取关系

任务的相关节点始终根据关系类型进行查询。使用以下查询获取相关任务。

"GRAPH.QUERY" "055616f0-a130-42b1-a3fd-81b7c8a3ef1b" "MATCH (n:Task {id: 'c9bc52a0-c436-499c-954c-da40e82f50b2'}) -[r:blocked_by]-> (m:Task) RETURN n, m, type(r) AS t" "--compact"

如何添加关系

两个任务使用以下查询彼此链接。

"GRAPH.QUERY" "055616f0-a130-42b1-a3fd-81b7c8a3ef1b" "MATCH (n:Task {id: '1ad21814-69d7-47d0-a7bb-de678b86c653'}), (m:Task {id: '07427e6b-7bba-44e4-b967-8fb5ca098053'}) MERGE (n) -[r:blocked_by]-> (m)" "--compact"

如何删除关系

两个任务使用以下查询彼此解除链接。

"GRAPH.QUERY" "055616f0-a130-42b1-a3fd-81b7c8a3ef1b" "MATCH (n:Task {id: '1ad21814-69d7-47d0-a7bb-de678b86c653'}) -[r:related_to]-> (m:Task) DELETE r" "--compact"

领域特定语言 (DSL)

构建 DSL 以适应和简化图形持久性。其功能是提供一个小型但强大的接口，该接口对于习惯使用 Active Record 的 API 的开发人员来说会很熟悉。实现此构建的主要类可以在 app/graph/dsl.rb 中找到。

以下是一个查询示例。

query = graph
  .match(:n, from.class.name, id: from.id)
  .to(:r, type)
  .match(:m, to.class.name)
  .delete(:r)

query.to_cypher

# => "MATCH (n:Task {id: 'c9bc52a0-c436-499c-954c-da40e82f50b2'}) -[r:blocked_by]-> (m:Task) DELETE r"

query.execute

# => []

结论：通过任务可视化赋能管理者

对于任何希望最大限度地提高效率并超越竞争对手的组织来说，断开连接和隐藏的任务都是威胁。

能够利用能够提供任务及其关系清晰可视化的应用程序的管理者可以更井然有序，线性思考，并在高压情况下更快地做出决策。

RedisGraph 是一个关键组件，因为它允许以高效的方式传输数据，同时投影每个任务及其关系的可视化。

如果您想了解更多有关此应用程序的信息，您可以访问 Redis Launchpad。在那里，请务必探索所有 我们提供的其他创新应用程序。

谁创建了这个应用程序？

Florian Dejonckheere

Florian 是一位经验丰富的 Ruby on Rails 开发人员，在 NephroFlow 担任软件工程师。

您可以在这里查看他的 Github 页面。