陈禹廷 前言
好久没有更新文章了，最近因为一些工作上的事情，领导想让我在团队中负责ai的落地，带领团队进行实践。趁此机会刚好发一篇文章记录一下。其实关于ai辅助开发我从2023年10月通义灵码第一次发布的时候就开始接触并使用了，后续2024年底开始使用cursor付费版。
管理系统ai辅助开发录屏
视频中的开发速度是基于已存在的基础业务组件，如果没有这些业务组件开发效率不会这么快。项目中如果没有业务组件，那么封装业务组件是必须的，为了代码质量以及后续维护的便捷度。
管理系统业务组件封装参考我之前的这篇文章，该文章对于现在的我，写法还有很大优化空间，毕竟快三年了，但是设计思想是不过时的，大家可以参考一下，封装组件也是ai的强项，可以用ai进行协助。
ai如何落地
市面上目前推出的各种编程ai宣传视频以及示例都指向无代码，或者尽量不写代码的方式。宣传它们有多快多智能。但实际落地到项目中完全不是一回事。因为你不能保证你写的项目是新项目，如果是老旧项目，如果是无规范项目，如果是对UI样式要求1:1还原的项目，此时ai很难在一开始让你进行生产力提速。
对ai的期望
大部分对它的期望都是快速提升生产力，并产出高质量，高可维护性的代码。我个人的实践后其实更多偏向于渐进式的提升。不要想着一上来ai就要解决项目中的问题和痛点。因为这些痛点如果你原来没有能力解决，那么现在依然解决不了，ai是让你已经有解决问题的能力后加速你解决问题的过程，而不是你都不知道怎么解决问题，它就能帮你解决问题。
ai的痛点
对于前端开发来说，高保真的还原ui图的项目，比如app，小程序，官网，广告页等。这种情况下不管是图生代码还是文生代码，你都会发现生成的代码没法用，样式会有差距，此时你就需要去修改或者验证，这种情况下其实比自己直接写样式结构还要慢，因为自己写你不需要去验证。因为写的过程就是验证过程。
渐进式应用ai的几个典型场景
碎片化提示
当你安装ai后，你就当它不存在，正常去进行你原来的开发任务。此时你在开发过程中会发现它开始给你进行提示了。选择对你有用的提示。当你开发几个模块后，不管是样式结构或者是业务功能，它都会帮助你，而你也逐渐开始习惯了它的存在。
提问
当你有无法解决的业务功能（函数算法），你可以直接添加当前目录为上下文，并向ai发起提问，提问的结构要清晰，比如我要什么什么。典型的就是我有一个数据结构[1,2,3]想让它变为'1,2,3'。给ai提问时提供你的输入以及你想要的输出。此时ai就会给你完成从输入到输出的计算过程或转换方式。不管任何问题你只要明确你的输入和输出，ai就能很快理解。
代码优化
当你已经习惯ai的存在后，如果你的开发能力并不强，且你发现你在项目中有很多痛点，比如维护困难，提效速度慢，此时你应该逐步去解决这些问题，以组件为例子，当你写好一个组件后，你让它帮你优化这个组件，达到使用方便，扩展方便。
ai的真正作用
我个人认为ai的作用并不是提效，对于企业或者老板来说他们肯定是觉得提效是最重要的，但是对于个人来说我觉得不是。你应该把ai当做一个技术很强且全面的老师，你要学习它每次给你优化后的代码，学习这些优秀的处理方式，快速的提升自己的开发能力。当你强化了自己的开发能力之后你会发现你自己本身的开发速度以及质量就提高了。当你提高之后你再使用它就是强强联合，你就能快速开发好的代码。本质上你越强它越强。这也是为什么很多资深工程师用了ai之后他的进步速度非常快。
ai提效之后的时间应该用来做什么
当业务开发时间已经不像原来那样赶了，不再需要天天加班了，对于还想要继续提升的人，此时你应该专注于项目专注于业务，思考从项目架构中是否还有优化的空间，思考业务功能上是否符合直觉，去看市面上优秀的用例，看看相同的业务对方是用什么方式去实现的，对于开发者来说开发能力重要，理解业务的能力以及拓展业务的能力也很重要，很多时候一个好的开发其实就是一个好的产品经理，不要仅仅只专注于代码实现。
结语
当你初次接触ai时，不要对于ai的期望过高，不要受它宣传视频的影响，一接入就要如何如何。这些都是当你彻底熟悉以及在你开发项目中进行过多次任务迭代后，你才能达到宣传级快速开发的效果。对于ai的使用，我的建议是一步步来，在开发过程中体会它给你带来的好处，然后在使用过程中逐步解放自己的思想。
不要陷入ai能帮我做什么的误区，而是你能把什么事情转化为让ai去做，请记住一切都是由你作为出发点。
以上视频中的开发示例只是ai应用的一点点展示，还有很多很多ai可以帮助你完成的事情，不同的场景，不同的业务，不同的需求及处理方式这些就需要你在自己的项目中进行体验了。希望大家都能从ai身上获得成长及帮助。
管理系统项目中旧模块与新模块使用封装好的业务组件对比
旧模块
痛点：视图和逻辑未分离，每个模块都有重复的关于分页，查询等冗余逻辑，后续维护十分耗费时间精力，从观感上来看，让人没有阅读代码的动力
dom结构1
dom结构2
js结构1
js结构2
新模块
优化点：视图和逻辑分离，开发时只需要关注数据配置。公共功能全部抽离出去。减少页面代码量保持干净整洁。让人阅读起来不费力，维护或者修改业务需求时，只需要定义数据结构即可。当有了ai辅助后，定义数据结构的功能也可以让ai自动生成，快速提升开发效率。
dom结构1
js结构1
js结构2
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)