我有个一直在做的通知网关项目 Heimdallr,这几天 star 多了很多,发现在什么值得买有个博主介绍了我的项目,然后在评论里发现有人提到,配置太多了,看不明白。
我之前一直想做一个前端页面来进行配置的管理,但是这个项目的首要考虑之一就是“轻量”,所以没有使用数据库,也不想做 CRUD (多没意思)。同时,我本身是后端,对前端的理解仅停留在会写一点点 HTML 和 CSS ,所以一直很没有动手写过完整的前端网站。针对配置管理,朋友给了我一个灵感——一个生成 nginx 配置的网站。
做一个前端页面来生成配置就好了!趁热打铁,我花了大概十个多小时,通过和 GitHub Copilot 合作,上线了一个前端网站 —— Heimdallr Configurator,如下。它的功能就是在左侧编辑通知渠道和分组,右侧同步生成可以直接使用的配置文件,提供复制和导出功能。
以下是一些我总结的技巧:
我一直觉得 Copilot 这个名字取得很好,它的角色不是代替程序员进行编写,而是在程序员的指导下完成繁复的部分。作为机长,你需要了解你的目的地,以及途中经过的路标——对应地,你需要知道最终完成的效果,以及如何分步去完成。
在我的例子里,我知道需要先把页面分成左右两栏,左边做一个 tab ,底下一列卡片,每个卡片里放一个表单;右边做一个文本框和几个按钮,文本框实现同步左边表单变动生成配置内容,按钮实现复制、导出和重置功能等。将步骤拆分好后,再通过 Copilot 逐个去实现。
Copilot Chat 有一个选择上下文的功能,在光标没有选中文本时,上下文取当前窗口可见的行,选中了文本时,上下文为选中的文本(可以选中整个文件的全部文本),但是不能跨文件获取上下文。
当你不选择上下文时,Copilot 往往没法给出很具体的建议,它只会给出几个可能的原因。如果你碰巧不熟悉,一个个排查会浪费很多时间。如果你选择的上下文不对,Copilot 无法从中判断到有效信息,它会提示你,这时候重新选择,然后追问即可。在你不知道 bug 在哪里的情况下,可以先选中一段可能有问题的地方,描述问题,如果它表示这里没问题,再选择另一段追问即可。
尽量用简短的技术语言去描述你的需求,而不是自然语言。虽然大模型的能力能让它大致能理解“外行发言”,但正确的术语能避免它第一次给出的结果不满意的情况。例如上面写布局的例子,如果不指定使用 Tailwind CSS ,它给出的例子很可能是用原生的 CSS 写的。
另外,我个人建议使用英文与 Copilot Chat 交流,个人觉得交流起来更加方便、精准。而且有时候你跟它说中文,回答可能还是英文。
在代码比较简单的时候,也可以不用 Copilot Chat ,直接打注释。
篇幅有限,具体示例可以移步我的博客查看: https://ameow.xyz/archives/develop-a-frontend-site-with-copilot
如果你对文中提到的项目感兴趣,这里是它们的地址。
GitHub - LeslieLeung/heimdallr: 一个非常轻量的通知网关,可以聚合各种推送渠道,使用 Serverless 部署,几乎零成本运行。
1
foam 197 天前 via Android
执行力点赞
|
2
kanchi240 197 天前
@LeslieLeung 请问你的 code 用的是什么主题,很好看
|
3
LeslieLeung OP @kanchi240 Catppuccin Latte ,配合了一个叫 apc 的插件来改外观,这有一份配置文件可以参考: https://gist.github.com/LeslieLeung/1bcbac2cd25e28422bfcf1252e42faaf
|
4
kanchi240 197 天前
收到,多谢!
|