Benzan.Chen

AI工具在前端编程的实践与探索

 
  • 2023年 08月05日

2023年随着 ChatGPT 的爆火,其证明了自然语言处理和生成模型的巨大潜力,可以生成流畅、连贯的自然语言响应,使得人类与机器进行对话变得更加自然和易于理解。其中自然语言模型的一个应用场景就是 AI 辅助编程,本着拥抱变化的想法,在了解了基本的 AICG 概念后,本人在 VS Code 中使用了两个 AI 辅助编程插件约3个月,完成了3个前端项目。

下面的文章介绍了在我在生产实践中使用 AI 辅助编程工具的探索过程与心得,,希望对你有所帮助或启发。

AI 辅助编程工具对比

在这里由于我比较在乎编码过程的连贯性,所以我罗列对比的 AI 辅助编程工具都是有 IDE 插件的。

AI辅助编程工具对比

上图的四个工具,均是在目前支持 IDE 插件的工具。

Github Copolot 风评是比较优秀的,支持的语言也比较多,但是需要每个月10美元的费用,劝退门槛比较高,放弃。那么只剩下三个免费的工具了。

CodeGeeX 是国内比较出名的大模型公司出品,但是不支持 .vue 文件,而现在我公司前端团队的主要语言是 Vue。

CodeWhisperer 是亚马逊出品,而且基于亚马逊云的布局,在国内的链接情况也不错,但是也不支持 Vue。

Codeium 和 Github Copolot 同样是基于 ChatGPT3.0 , 而且功能齐全,支持 .vue 文件。

当然如果使用 Vue 语言,可以写 jsx 把 Vue 写在 .js 文件中,这样就能使用不支持 .vue 文件的插件,也算是一个曲线救国的途径,在三个月的过程中,我有尝试使用 CodeWhisperer 以及 Codeium,下面我基于我的使用实践总结出几个使用 AI 辅助编程工具的场景以及案例,希望对大家有启发。

应用场景与案例实践

首先在这里抛出使用 AI 辅助编程工具的四个关键词。

  • 牢记安全

    文中所罗列的 AI 辅助编程工具都是联网的,当然他们的主体公司都有保证会对用户的代码做一定的保密,但是我们还是需要有一定的保密安全意识,属于公司的保密数据,需要对于这些数据提前做一定的模糊处理,保证数据安全。同时 AI 辅助编程工具所输出的代码也未必是安全无漏洞的,在使用过程中,我们也需要对于代码做出审查。

  • 预设场景

    在目前的语言模型下面,模型能处理的内容有长度限制,因此我们需要把实际中的一个大需求分解场景并设置前提条件,一步一步拼凑成为成品,分解场景也可以避免边界无限延伸。

  • 严格验证

    AI 辅助编程工具输出的结果不可信,要有测试心态,需要对结果进行基本的边界测试。

  • 不断迭代

    AI 辅助编程工具输出的结果未必是我们所需要的,需要不断沟通引导纠正,得到更完善的结果。

下面我们牢记这四个关键词,然后从 AI 辅助编程工具的两个功能(代码自动推导、对话型 AI 辅助)的具体场景看看具体实践。

代码自动推导

函数名推导

函数名推导功能有一定的同一文件内的上下文联动,我们只需要在代码中书写一个语义正确的函数名,那么 AI 辅助编程工具就会根据语言自动推导出你需要的代码,这个功能需要对于英语有一定的熟悉程序,毕竟函数名都是英语。下面我举一个案例

通过月份获得季度: fun getQuarterByMonth()

通过月份获得季度

可以看出推导会得出多个结果,其中我们需要根据具体情况选择,然后某些情况下还需要对于代码做出一定的微调修正。

注释推导

注释推导,顾名思义就是当用户输入注释时候,会根据注释,自动推导代码,下面举的案例是字符串映射函数

// 函数 mapText 输入字符串变量 text 按照下面的映射输出字符串 HY:货源，SJ:升价，HT:合同，TC:停产，GJJ:过季节，BZZJ:包装证件，ZDZT:拟淘汰，BAS:不按时生产，DH:断货，ZTGJ:暂停购进，QT:其它

函数mapText

从 gif 演示可以看出细小而繁琐的功能函数可以使用注释推导功能。

对话型 AI 辅助

基本数据操作

该场景案例:存在下面数据,我们需要提取出一个数组,该数组不包括东莞市的,按照 percent 从大到小排序的前10位地方。

let data = {
  万宁市: {
    percent: 0.0002
  },
  三亚市: {
    percent: 0.0005
  },
  三明市: {
    percent: 0.0006
  },
  三门峡市: {
    percent: 0.0002
  },
  上海市: {
    percent: 0.0015
  },
  上饶市: {
    percent: 0.0023
  },
  东方市: {
    percent: 0.0002
  },
  东莞市: {
    percent: 0.0068
  },
  中山市: {
    percent: 0.0034
  },
  临汾市: {
    percent: 0.0003
  },
  临沂市: {
    percent: 0.0005
  },
  临沧市: {
    percent: 0.0005
  },
  临高县: {
    percent: 0.0002
  }
}

基本数据操作

对话聊天过程截图如上图,预设场景最简单的方法就是直接给一个数据 AI ,根据聊天过程我们最终可以提取出一段 js 代码如下

const newArray = Object.entries(data).map(([name, value]) => ({ name, ...value })).filter(obj => obj.name !== '东莞市').sort((a, b) => b.percent - a.percent);
console.log(newArray)

结果是符合我们的预期的。

创建可视化图表

这里举的案例是,使用下面数据,提取处理数据,使用表格显示,左边为区域名,顶部为品牌名,内容为对应的 num ,其中某些区域没有品牌的,数量显示为0。

let data = {
  仁和堂药业: [
    {
      deptName: "番禺区",
      num: 50,
    },
    {
      deptName: "白云区",
      num: 29,
    },
    {
      deptName: "天河区",
      num: 14,
    },
  ],
  大参林: [
    {
      deptName: "白云区",
      num: 28,
    },
    {
      deptName: "南沙区",
      num: 62,
    },
  ],
  柏恩医药: [
    {
      deptName: "增城区",
      num: 25,
    },
  ],
  海王星辰健康药房: [
    {
      deptName: "白云区",
      num: 33,
    },
  ],
};

需要拆分的场景比较多,所以在这里不放出聊天过程截图了,有兴趣的朋友可以试试,勇于尝试。

请求多个数据接口,归纳数据

该场景适用于外部数据的获取归纳,这里举的案例是存在高德地图web服务api-行政区划查询,我们需要请求获得全国所有省、市、区的中心点经纬度,输出一个 json 文件。

https://restapi.amap.com/v3/config/district?subdistrict=3&key=xxx

请求多个数据接口

使用上面聊天得出的代码,新建 Node 项目后运行,可以正确输出所需要的 json 文件。当然这里举的案例是只需要请求一次接口,就能获取全部数据,比较简单,当然复杂的场景,比如需要多次请求外部接口等,可以分解场景。

总结概括

上面的文章介绍了我在前端编程过程中使用 AI 辅助编程工具的场景与心得,我觉得 AI 辅助编程适用于小型、离散的场景，也可用于业务的快速实践试错。当然 AI 辅助编程还是有缺陷的,当你分解的场景足够多后,每一个场景对于开发者来说就是一个黑盒,后续遇到缺陷时候,开发者需要认真查看里面的代码,这时候你会感觉有一点点焦头烂额。

希望该文章对大家有所启发,谢谢。拥抱变化,让我们成为代码的审查者。

搜索