一文教会你前端开发如何使用chatGPT提高效率

2023-10-17 18:04:23 浏览数 (1)

想想chatGPT已经火起来快小一年了,每天看着新闻感叹,好厉害,好想学,闲暇之余翻着相关技术文章,总是一知半解,需要申请各种账号,奈何人懒,且笨还怕上当受骗,估一直拖延至此,过年回来刚刚遭受社会的毒打,无奈重新找了一份工作,恰逢新公司技术部门请了阿里大佬(清华计算机博士)来做chatGPT分享,很难不爱,浅浅记录一下入门

一,安装 

很多文章都有介绍,需要谷歌账号,邮箱啥的,太麻烦,咱们目标就是体验chatGPT,所以直接使用插件就行,感谢大佬们的努力。

1,打开谷歌自定义控制(就是右上角三个点)-> 更多工具 ->  扩展程序

2,点击左上角菜单,最下方打开谷歌应用商店

3,搜索 wetab 新标签,如下图(我本地已经安装好了),下载后应用扩展

4,当然直接安装chatGPT也可以,正版的在这

这个就得注册账号,登录巴拉巴拉的,比较麻烦,建议熟悉后使用

5,回到wetab安装后的界面 ,界面挺好看,不过这次主要使用其中的chatGPT

二,使用 

     首先进入可以看到这样一个界面

当然,聪明的你可以直接忽略上方的广告和打赏,开始正常使用

你可以把chatGPT当做一个正常程序员来对话,不过和他沟通的时候需要带上一点话术技巧,这个需要大家去自行摸索,比如下面例子:

作为一名前端开发程序员,你会使用vue3,ant design vue(可以是自己项目的框架),现在要实现一个xxx 功能,请给我具体实现方法 

然后针对答案进行逐步完善,chatGPT会根据上下文进行完善修复相关答案 

三,chatGPT能够帮前端开发干什么(其实是具体使用,想想大家都聪明绝顶这部分可有可无)

1·,代码解析

很多情况下我们需要协同合作,或者去修改老项目代码,但是你看到一个组件,没有注释,或者去接触一个新的框架,自己相关知识还不熟练,就避免不了去询问同事,这多少会麻烦到别人,也显得自己很low,有了chatGPT,可以自产自销,凡事不求人,我求AI

先上传代码,在加上代码解析,或者 直接告诉chatGPT 帮我解析一下代码都可以,针对不懂的点继续深入提问

2,代码注释

优秀的程序员往往离不开优秀的代码习惯,而代码注释是不可或缺的一部分,但是有的时候任务重,时间紧,往往不得不去做个舍取,这不,AI帮你一键,不满意的地方可以自己调整

 3,代码编写

AI不会骗你,但是AI会理解错你的意思,在用AI完成需求的时候,一定要描述清楚,可以通过多次提问的形式纠正,直到得出你想要的答案,也可以直接拆分成小的单元,AI生成代码并不能读取本地组件库,所以有时候会显得很low

下面还有完整方案,图片没有截取完整, 拿到代码后需要根据自己项目去调整,并不能保证可以直接使用,当然,比如生成一个处理数据函数这些,再也不用自己去想遍历循环,直接告诉AI帮你处理就可以

4,代码bug修复

需要上传完整代码,单页应用使用较多,可以根据代码推断出可能出现问题,看自己公司保密政策慎用,配合代码解析可以轻松定位问题

5,代码优化

会按照标准规范重新生成你的代码,可用于老旧代码优化,新项目都有自己的风格,无需多言


 下面开始一些是偏测试后端相关应用,就简单列举一下

6,写测试用例,告诉chatGPT需求点,自动生成文档

7,生成测试数据,mock数据

8,数据采集(python)

9,设计数据表结构

10,给数据表添加数据

11,搭建Flask Service

12,搭建uni-app demo

13,搭建web应用

14,安装Docker

其他的,编辑脚本,生成文案,生成海报,图片等等 功能庞大可以自行摸索

使用chatGPT可以从项目的新建到部署,从0到1,包括前端,服务端,测试等整个流程打通,根据技术分享来看,这不是前端的价钱,干的是全栈的活,我这边提取了部分前端相关记录一下

作者文字水平较差,也是想到哪写到哪,如有错误,还请指正,欢迎大家一起分享chatGPT使用心得,AI确实很强大,所以更要积极拥抱他

0 人点赞