V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
LeslieLeung
V2EX  ›  分享创造

联手 Copilot,我在 10 个小时内上线了一个前端网站

  •  
  •   LeslieLeung · 198 天前 · 2154 次点击
    这是一个创建于 198 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我有个一直在做的通知网关项目 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 部署,几乎零成本运行。

    GitHub - LeslieLeung/heimdallr-configurator

    4 条回复    2024-04-17 16:19:17 +08:00
    foam
        1
    foam  
       197 天前 via Android
    执行力点赞
    kanchi240
        2
    kanchi240  
       197 天前
    @LeslieLeung 请问你的 code 用的是什么主题,很好看
    LeslieLeung
        3
    LeslieLeung  
    OP
       197 天前
    @kanchi240 Catppuccin Latte ,配合了一个叫 apc 的插件来改外观,这有一份配置文件可以参考: https://gist.github.com/LeslieLeung/1bcbac2cd25e28422bfcf1252e42faaf
    kanchi240
        4
    kanchi240  
       197 天前
    收到,多谢!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1300 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 23:33 · PVG 07:33 · LAX 16:33 · JFK 19:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.