我的面向AI编程之旅

近段时间来,人工智能技术在各个领域取得了巨大的突破,其中也包括代码编写领域。我也是也感受了一段时间,从最初的持怀疑态度,到现在基本都是在面向AI编程,以前遇到代码相关的问题,我会去问google,问百度,现在则是优先问chatgpt,下面和大家一起感受一下

从实现一个业务需求开始

最近项目中有一个需求是这样的,需要将若干个相同尺寸的base64图片合成为一张新的base64图片,对于canvas比较陌生的我来说,这个需求确实有点棘手,好在可以求助chatgpt,让我们一起来看看chatgpt帮忙写出的代码

// 此处为提供给chatgpt的提示词

请帮我实现一个ts版本的函数,该函数有2个参数,第一个参数base64图片数组,第二个参数是一个对象包含宽和高,该函数需要将base64图片数组中的每个非透明像素点合并为一个新的base64

carbon (1).png

经过验证,这个函数完全能满足我的需求。如果放在以前,我可能要先去了解canvas相关的api,然后去搜索一些相似案例,然后自己进行尝试,虽然最后也能解决,但是肯定没有在chatgpt的帮助下完成效率高。

生成类型定义

自从使用ts以后,我感受到它给我们许多好处,也经常为需要定义大量的字段类型而烦恼, 自从有了chatgpt我就不用再对着接口数据一个一个的手动去定义它的类型直接将数据丢给chatgpt,让它帮助我生成ts类型定义,这在数据量较大时候帮我节节省大量的时间以及重复工作

1.png

除了上述能力之外,我还体验了让它帮我们优化重构代码检查代码中的错误,以及写一些工具函数并生成对用的测试用例,甚至还可以将代码从一个技术栈切换到另一个技术栈,例如从vue3切换到react,均有不错的效果

除了chatgpt之外,copilot也帮我提升了很多开发效率,下面就来感受一下copilot的能力

逻辑联想

下图是我想要实现一个按钮的禁用逻辑,我刚写下部分代码,copilot就帮我联想出了完整的代码,我只需要按一下tab,就完成了这个需要3行代码才能实现的逻辑

1.gif

下图是我需要对一个图片进行导入,这里我先是在template里面对图片进行了定义,然后我在script里面对它进行引入,写到一半,copilot就已经帮我智能的联想出了这张图片的正确路径

dom.gif

下图是我需要在文字后面插入个箭头图片,但是最后一个文字后面不需要,copilot仍然可以准确猜想出我的想法

11.gif

下图实现了一个手机号的校验,可以看到我只输出了注意和定义了函数的名称(网速够快的话,甚至不需要定义函数名字,)之后,copilot就已经可以帮我们实现对用的代码了,对于正则类的一些工具函数,copilot游刃有余

3.gif

下图是登录流程中的校验逻辑,可以看到在使用copilot的情况下,可以节省多少时间
4.gif

上传文件逻辑也能很好的支持,如果没有copilot,这些代码你需要耗费多长时间,而在copilot的帮助下,几秒钟就可以完成

5.gif

下图是一个图片的导入,在上文<img src="@/assets/images/prev.png" class="prev-btn" />的帮助下, copilot准确的帮我们联想出了我们接下来的操作

6.gif

同时在我们对其进行事件逻辑编码的时候,也能进行友好的支持

7.gif

样式联想

当我需要自定义滚动条的颜色,可以看到我在输入到一半的时候,copilot可以帮我联想出完整的属性名称,同时也帮我联想出了一些属性值(虽然不是我想要的)

9.gif

同时也可以对属性进行补全,例如这里我写完数字之后自动联想出了px

10.gif

对于css这一块,copilot显得比较鸡肋,虽然copilot联想出了大量的代码,但大部分都不是我们想要的代码,主要原因还是在于css的属性定制性太大,copilot很难联想出来的准确的代码,当遇到这种情况时,我们无需理会就行,继续往下写就行了,只有当遇到我们想到的代码时才按下tab

总结

通过以上内容,我想大家可以感受copilotchatgpt已经非常强大,可以大大提高了我们的开发效率。然而我在使用过程中也遇到了一些问题,首先是他们对于稳定的网络环境依赖很高,这一点至关重要。其次chatgpt免费版已经足够我们使用,但copilot并不是免费的,需要付出一定的成本。最后在使用过程中,他们也并不是每次都能生成完美的代码,根据我的使用体验来说,想要提高它们生成的代码准确率,我们需要提供尽可能多的上下文信息,并且为变量命名选择语义化的名称。

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYt2Fo1U' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片