AI赋能Automa二次开发

需求

增加用户登录，控制用户权限：创建、运行和分享工作流；

工具

ChatGPT：解决方案

VSCode+Copilot：代码调整

Mysql：存储层，保存用户及权限存储

Node：服务层技术

Vue：展示层技术

DeepWiki：代码阅读

这里要重点介绍下deepwiki, 能够生成github上仓库的wiki文档，支持对最新代码仓库的问答。由最早的编程智能体Devin推出，值得信赖：）比如我们今天要研究的automa:

实现步骤

ChatGPT获取思路

问1：如何对automa进行二次开发？

答1 ：下面给出一个针对 Automa （https://github.com/automa-app/automa）的二次开发指南，帮助你在本地搭建、添加自定义动作（Action）、改 UI、打包并发布你的定制版扩展。如图：

问2：我期望增加用户及权限管理功能，后台管理员可以添加用户，分配权限，权限包括流程创建、流程运行、流程分享。打开automa首先进入登录界面，然后输入用户名密码，登录后，根据权限，可以进行相关操作。

答2：下面是一套为 Automa 扩展添加"用户 & 权限管理"功能的方案思路，包含后端设计、前端改造与权限控制三部分。你可以根据团队技术栈灵活调整细节。如图：

问3：一步步告诉我如何实现一、后端设计

答3 ：下面以 Node.js + Express + Sequelize + JWT 为例，分步讲解如何实现"后端设计"中的用户与权限管理部分。如图：

...

问4：一步步实现二、前端（扩展）改造

答4 ：下面分 5 步，逐步改造 Automa 扩展（假设基于 packages/extension 和 packages/ui 两部分），实现登录鉴权与前端权限控制。如图：

搭建二次开发环境

按照答1一步步操作，chrome安装本地unpacked扩展，会有报错，可以忽略，不影响功能。抽空再借助AI修复这个错误吧。

部分问题我最后进行了修复，可以查看我的完整对话记录，在附件中。

后端开发

按照答3一步步来，但是测试API时遇到问题。

问5：

测试登录API报错

答5 ：这个错误说明你的 req.body 为空，所以在解构时拿不到 username 和 password。通常有两种办法解决：

按方案一解决问题。

问6：我数据库中创建的用户ADMIN密码是123456，但是通过postman提交相同信息，返回： { "message": "密码错误" }

答6：下面我们一步步来定位和解决"密码错误"问题。

问7：分配权限提示无效操作，见附件，postman测试。

答7：出现 "无权操作" 的原因，通常有两种：

当前登录用户的 JWT 中不包含 ADMIN 权限
请求体格式不符合后端预期

下面一步步帮你排查并修复。

最终运行

服务启动

登录测试

授权测试

前端开发

根据答4一步步完成，此时点击浏览器上automa dev扩展的图标，显示一个比较丑陋的登录页面。

VSCode中打开automa项目路径，在copilot里完成一些代码调整。可惜目前copilot并不会记录所有聊天历史，所以只能根据回忆来写了。

问8：Login页面请修改样式，跟其他页面保持一致。

问9：登录成功后，跳转到home，并打开dashboard

问10：修改下插件automa首页，点击浏览器上插件图标时，直接打开dashboard

问11：automan有一个BackgroundUtils.openDashboard('');方法，打开一个控制面板。我期望点击浏览器上扩展图标，就运行该方法进入控制面板。

上述问题也可以DeepWiki中询问，这样可以定位到关键代码，问11的BackgroundUtils.openDashboard('');方法就是通过DeepWiki定位到的：

最终效果

点击扩展标签，进入登录页面。

输入用户名密码，点击登录进入工作流首页

后记

在这个思路的基础上，对automa的二开就能够比较顺利的开展了。

借助AI赋能，5个小时实现上述功能，要知道我的起点：

automa听说过，从来没看过代码及用过；
vue比较陌生，没有做过项目，只通过AI生成过代码。

期望能给其他有或者没有开发经验的人一点启发，AI时代，更重要的是你描述问题的能力，借助AI即可以弥补我们很多短板，也可以将我们的长处发挥到极致。拥抱AI，这是唯一聪明的做法。