不写一行代码,让AI帮你开发明道云插件,上架赚钱

分享 Ai插件视图  收藏
5 / 402

前言

明道云这两天发布的 11.2 版本推出了插件市场,开发者可以将自己开发的插件(目前指视图插件)发布到市场,定价销售。

什么是视图插件呢?

明道云的平台能力,也许可以满足用户 95% 的需求,但剩下 5% 的需求可能非常个性化,难以通过平台的需求迭代进行满足,而通过插件架构,明道云提供了这种个性化需求的满足能力。

视图插件又叫「自定义视图」,当 HAP 的表格、看板、层级、日历、画廊、详情、甘特图等系统视图不能满足用户视图展示需求的时候,开发者可以通过自己编写代码实现一个完全自定义的视图页面,用于展示工作表的记录数据。自定义视图支持搜索、筛选、统计、快速筛选和筛选列表等操作,还可以通过 HAP 公共 JavaScript 接口实现调用系统组件,比如展示记录详情弹窗、调用新建记录窗口等等。

视图插件的开发是需要有一定的前端开发基础的,大多数明道云的普通用户可能都是业务人员,并不具备这样的开发能力,但通过本文的方法,哪怕你没有任何编程基础,也能够轻松地开发出满足自己需要的插件,甚至上架到明道云市场中,也许能够获得一定的收益。而对于技术人员,通过本文方法,也能更加高效地开发出自己想要的插件视图。

案例

我们先看几个例子,这三款插件均是通过本文方法,在 1 小时内开发出来的,并均已上架明道云市场。而我个人,没有任何编程基础,不会写一行代码。

录音视图

123.001.jpeg

明道云的表单中并没有提供录音的字段,附件字段也只能上传现有的音频文件,虽然通过明道云的“自定义字段”功能也能够开发出录音字段来,但是受限于 iframe 权限的问题,需要跳转新窗口才能完成录音,在 Web 端还好,但 APP 上阻止了弹出窗口,无法给予权限,因此自定义字段开发的录音字段在移动端就没法用了(H5 可以)。

通过插件开发的录音视图,不仅不需要跳转新窗口,在各端均可以使用,而且可以有更多的拓展空间。例如:

  • 录音时,通过 AI 实时转录录音内容(通义听悟等均支持),在视图中显示一个文本窗口,以做会议纪要等用途;
  • 录音完成后,通过 AI 提取录音内容,自动进行后续操作,如创建费用报销记录、创建采购表单等,并且将创建后的表单显示在视图中,供修改确认;

因时间关系,我并没有完成后续开发, 若有更多进展,会发布新的插件到明道云市场中,欢迎关注。

排行榜视图

222.001.jpeg

根据表单内的数据,呈现一个人员排行榜的页面,用以表彰或激励。例如,根据销售订单表,显示销售业绩排名和销售部门排名;或者根据学习积分表,显示学习排行榜等。

Markdown 编写视图

333.001.jpeg

明道云主要用于构建企业中后端的业务管理系统,构建类似文档笔记一类的应用,使用体验并不算好,在明道云 11.2 版本中,文本字段支持了 Markdown 格式,配合此视图,我们可以大幅增强明道云在这方面的使用体验。

通过这款视图,我们可以直接在界面上撰写、编辑 Markdown 格式的文字内容,并提供良好的呈现效果,还有显示大纲、导出为 PDF,进行内容搜索等功能,在知识库、方案输出等场景都可以得到很好的应用。

这是我同事李江开发的插件视图,同样是通过本文介绍的工具完成。

步骤

接下来,我将详细为你介绍,以上三款插件是如何开发出来的,照着此方法,你也可以很快开发出类似的插件视图。

我们需要使用到一款工具:Cursor

1.png

Cursor 是一个将 AI 技术与代码编辑器深度融合的工具。它通过内置先进的 AI 模型(例如 OpenAI 的 ChatGPT 和 Anthropic 的 Claude),帮助开发者显著提升编程效率,为开发者提供智能代码补全、错误检测、代码优化等功能。与传统代码编辑器相比,Cursor 不仅是一个编写代码的平台,更是一个能够理解代码上下文并提供智能建议的编程伙伴。目前,Cursor 是使用 AI 编写代码的最佳方式之一。

简单来说,Cursor 就是一款能够通过 AI 自动生成代码,而且可以自动替我们完成相关程序操作的工具。虽然它满屏的代码看起来有一点心里压力,但我们只需要关心右侧和他的对话窗口即可。

一、下载安装 Cursor

访问 https://www.cursor.com/cn ,下载 Cursor 到本地完成安装。

2.png

打开 Cursor 后,在第一个弹出的界面这里,输入“中文”,后面 Cursor 与你的交流就会用中文回复你。然后一直下一步注册账号登陆。

二、完成明道云视图开发初始化

4.png

进入这个界面后,我们选择“Open Project”创建一个文件夹,开发的插件就会放进这个文件夹里。

5.png

这就是我们接下来开发视图插件的界面了,右边的对话框是一会儿我们和 AI 对话的窗口,但在让 AI 帮我们写插件之前,我们需要完成插件视图的开发准备。

56.png

使用 Chrome 浏览器,打开任意一个工作表,添加视图,选择“+ 开发视图插件”,会弹出如上界面。

我们首先需要选择一个插件模版,如果你对这些并不了解,选择默认的“React 基础示例模版”即可。

6.png

接着,复制界面中第一个黑色背景方框中的代码(安装插件开发专用的终端命令行工具),到 Cursor 中粘贴,然后回车(Send)。

请注意,如果你是 mac,需要在这个命令前加 sudo,即:

sudo npm install -g mdye-cli

7.png

Cursor 会出现这样一个卡片,点击后,光标在“Password:“后高亮,此时输入电脑的开机密码进行授权。

注意:输入密码时,界面不会有任何显示,直接输入后回车即可。

等待一段时间,你应该能看到这样的界面。

8.png

此时复制明道界面中的第二命令(第二个黑色背景方框中的代码),到 Cursor 的聊天框中回车,即:

mdye --version

9.png

你可能会看到这样的报错,但没有关系,我们不需要考虑发生了什么问题,直接让 Cursor 帮我们处理即可。可以这样告诉 Cursor:

无需询问我自动尝试所有可能的方案帮我解决这个问题

10.png

Cursor 会开始自己解决问题,最后显示如图这样的版本号,就代表“插件开发专用的终端命令行工具(CLI)”安装成功了。

12.png

接着,我们要逐一复制明道云界面中,第 3 步的 4 条命令到 Cursor 中,让他执行。首先复制第一条。

注意:不要复制我截图中的命令,复制你自己明道云界面中的命令,每一次这个命令都不一样。

13.png

当你看到如图这个界面后,点击这个命令行的卡片,然后回车。这一步的意思是,创建明道云插件视图的文件夹名称。

14.png

当你回车后,Cursor 应该会开始自动执行后续的命令,最后帮你启动项目开发环境。但如果你的 Cursor 并没有自动执行后续步骤,你就自行复制明道云界面上,第 3 步的剩下几条命令到 Cursor 中执行即可。

15.png

将 Cursor 中显示的地址复制粘贴到明道云界面上,点击加载。一般都是

http://localhost:3000/bundle.js

image.png

当你看到这个界面,就代表视图插件开发的初始化已经完成了,接下来就让我们开始发挥我们的创意吧。

三、开发明道云插件视图

首先,你需要明确你的需求,比如:

开发一个录音的视图允许用户调用浏览器的麦克风权限进行录音录音后能够回放录音内容并且自动创建一条当前工作表中的明道云记录写入录音时间录音人录音文件

其次,我们得让 Cursor 根据明道云插件视图的开发规则来开发,否则不一定能够应用上。而且,我们需要 Cursor 在上一步安装的明道云视图开发的环境中开发,不能让它新建一个环境,所以我们需要复制一下我们当前文件夹的路径给它。

17.png

参考明道云视图插件的开发文档https://help.mingdao.com/extensions/developer/view/ 在当前环境mdye_view_67d3c34a081928afc4c73c2a 下完成开发。

18.png

我们将需求整理后,贴在 Cursor 的对话框中进行回车。

20.png

当 Cursor 告诉你它开发完成后,如果它说已经“构建代码完成”、“文件上传成功”,代表着 Cursor 不仅帮我们完成了开发, 而且已经插件发布到了明道云上,我们已经可以使用了。

21.png

点击这个界面的清除

22.png

选择一个“已提交”的代码。你就能看到你开发的插件视图了,可以试试效果。

但如果你的 Cursor 并没有帮你把插件发布到明道云,或者不知道发生了什么原因,你无法看到这样的界面,你可以直接告诉 Cursor,“启动开发环境”、”提交发布代码“或者”我在界面上没看到任何效果“等等。总而言之,有任何问题,告诉 Cursor,让他去帮你处理和分析。

23.png

此时界面并不好看,很可能也只实现了我们的部分需求,还可能有一些报错,别担心,继续与 Cursor 沟通,让它不断调整即可。

123.001.jpeg

经过不断调整修改后的视图。

总结

通过 Cursor,哪怕你和我一样,完全没有开发基础,完全看不懂一行代码也没关系,通过与它进行自然语言的对话,我们完全能够开发出满足我们需求的插件视图。但这里面也有一些需要注意的点。

比如 Cursor 使用了不同的 AI 模型,不同模型的代码能力,解决问题的能力有差别也有差距,目前效果最好的是“Claude-3.7-sonnet”,在让 Cursor 帮你写代码的时候,需要注意你选择的模型。

还有 Cursor 并不是免费的,它有试用,但你达到一定的对话次数后,就需要付费了,Pro 用户 20 美金/月。

最后就是和 Cursor 对话的技巧,虽然它很聪明,但我们最好把需求写得非常明确,而不是让它猜,如果你明确知道要调用哪个接口,告诉它接口地址和调用示例;或者让它把数据写到哪个字段,告诉它字段 ID。实在不确定哪里出了问题,可以让它在界面上做一个日志区域,显示所有执行日志,方便排查问题。

随着明道云进一步开放插件能力,我们不仅能够开发出视图插件、字段插件,还能够开发工作流插件、图表插件等,在明道云现有的应用构建能力上,进一步拓展明道云的能力边界,实现更复杂的企业级应用系统。