dot Redis 8 来了—而且是开源的

了解更多
White Redis Logo 返回
搜索

如何使用 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，该 DSL 将 ActiveRecord 风格的方法调用转换为 RedisGraph 查询。
  • Plain 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 中。任务是一个图形节点，具有以下属性

  • 标题: 任务标题
  • 描述: 富文本、多行任务描述
  • 截止日期: 日期
  • 状态: 待办、进行中、审核或完成之一
  • 类型: 想法、目标、史诗、功能、任务或错误之一 – 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 页面。