AI赋能Automa二次开发
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，这是唯一聪明的做法。