一些在编写高质量且具功能性代码方面的AI实践应用，我已有所探索，其于你编程那会儿可提供诸多便利。于工作当中，我一直在用网页工具，还有那种（我们能够把它视作GPT的一个变体，毕竟它们是基于同一核心技术构建的） 。
核心概括
得到解决问题的端对端指令集群，又或是编写涵盖多个类以函数的完备用例的代码。除此之外，它会对生成的代码予以解释，而这是在自动完成之际所不能够提供的。
接下来，我将介绍在编程时运用 AI 的六种方法：
CSS 生成 ( )
我进行 Dr Droid 的构建时，设定个自行编应用且创建新增组件的目标，我们用 Figma 做了原型，可把它嵌入页面设计里，仍需些技巧，我主要搞后端开发，编写 CSS 处理网格、移动适配性及间距对我有点难，我创建个含 HTML 元素的类，在提示里描述了我们 Figma 原型中的元素。为这个类增添了CSS，它依据一些实际测量作出了预测，我稍后能够对其予以调整，然而它已然将我在挑选使用哪些CSS样式上的疑惑给解决了。
输入：
针对三个类别去定义 CSS，其中一个类别是父 div，另外两个类别皆是子 div，再者呢，这两个子 div 应当实现水平对齐，而且它们内部文字均要分别完成对齐到左以及对齐到右这样的操作。
输出：
.parentDiv { flex-direction: 'inherit'; display: 'flow-root'; padding: '2px';}
.leftDiv { width: '30%'; height: '100%'; background: 'white'; float: 'left'; border: '1px solid black'; text-align: 'left';}
.rightDiv { width: '70%'; height: '100%'; background: 'white'; float: 'right'; border: '1px solid black'; text-align: 'right';}
利用 编写函数：专注于排序和数据操作
在Dr Droid平台之上，我们要大量进行数据转换，以此来达成各种功能。经过测试表明那，在依据提示编写这些转换函数之际，展现出极为雄厚的实力。它对于参考既往字段描绘全新字段也颇为擅长，能够编写出让两个数据对象合并成为一个具备不同模式的单一对象的函数。
比如说，那是我所需要的一个函数，这个函数要在数组里合并 JSON 对象，合并的依据是它们的两个字符串键，合并以后要给出按第三个数字键的别样统计。它能够在你的代码环境里边进行编写，编写的时候不需要对变量重新命名，并且你能够告知它运用哪个库去执行 。
输入：
构造一个函数，此函数于数组里对 JSON 对象予以合并，分别在它们的两个字符串类型的键上呈现，同时给出第三个数字类型键的平均值以及中位数的统计结果，。
输出：
用一个函数，这个函数叫mergeJsonArray，它有几个参数，参数分别为jsonArray，还有key1，还有key2，再还有key3 。 let mergedJson = {}; let mergedJsonArray = ;
jsonArray.forEach(item => {要是（在合并后的 JSON 里存在 item 这个项下的 key1 这个键所对应的值），那么。如果，在合并后的 JSON 里，在 item 的 key1 所对应的值里，存在 item 的 key2 所对应的那个内容，那么。对于合并后的 JSON，在其基于某个键值对的项所对应的子项里，基于另一个键值对的子项，去执行添加操作，添加值为依赖于第三种键值对而对应的项里所存的值 。 } else {mergedJson当中，item依据key1所对应的值，在其内部，又依据item依据key2所对应的值，找到对应的位置，然后将[item依据key3所对应的值]放入该位置；。 } } else { mergedJson[item[key1]] = {}; mergedJson[item[key1]][item[key2]] = [item[key3]]; } });
针对合并后的 JSON 中的每个 key1，予以循环遍历，通过 for 循环结构，将 key1 作为每次循环的对象，进行后续操作。针对合并后的 JSON 中键1 对应的值，对于其中的每个键2 ，进行如下操作，。 let sum = 0.0; let median = 0.0; let mean = 0.0; let count = 0; let min = 0.0; let max = 0.0;
被合并的JSON里的键1对应的内容里的键2所对应的每一项，对于每一项而言 => {。 sum += item; count += 1; });
mean = sum / count;
将合并后的json中的，键为key1的子对象里，键为key2的数组进行排序，按照比较函数a减b的结果来排序，该比较函数返回a与b相减的结果。以中值为例，它等于合并后的 JSON 中，键值为第一键名那里的值里，键值为第二键名那种情况的值里，取其长度除以二后向下取整所得索引对应的值； 。
首先，提取出mergedJson中key1对应的值，接着，在这个值里找到key2对应的值，然后，取这个值中的第一个元素，。找到 `mergedJson` 中，键为 `key1` 里面的内容，再找到其中键为 `key2` 里面的内容，取其长度减一对应的那个元素，赋值给 `max` ， 。
mergedJsonArray.push({ [key1]: key1, [key2]: key2, 'count': count, 'sum': sum, 'mean': mean, 'median': median, 'min': min, 'max': max }); } } return mergedJsonArray;}
Co-pilot 的代码编写：识别并运用重复模式
我正针对测试环境，编写一个会跨多个数据库表开展操作的数据删除脚本呢，这些表都设置有时间戳列，然而其名称却皆不相同，我于注释里，以逗号分隔的形式，列出了所有的表名，随后编写了第一张表的删除SQL查询，还运用了整个删除命令的连接光标，做完这些后，Co - pilot开始自动建议，为这些表中的每一个进行迭代，选择代码块，同时还依据其中时间戳列的名称，去修改它们的列名 。可是呢，它没办法领会那个把可能删除掉的顺序，它仅仅是依照模型文件里所书写的顺序来开展行动的。
我于，和Text之中运用了Co-pilot插件。我发觉，插件于推荐方面更具智能特性，特别是在应对其他文件里的类定义的上下文之际。
仅需进行少量变量调整，借助描述需求来使用，进而生成整个 React.js 组件。
对于名为 react - flow 的 React.js 库，我在使用它的时候，有个想法是定制部分组件，用来替换库里面原有的部分，我的目的是给它添加个性化的视觉效果，同时还要在组件顶部增添一带附加性质的文字，虽然文档把怎样用新组件替换原有组件介绍得头头是道，可就是没明确指出怎样在保留原功能的情形下进行扩展。
于是，我向 提出了问题：
在react - flow里，怎样去创建自定义的边，这条边呢，它是那种粗大的呈现紫色的线条，而且呀，其末端是有着一个大箭头样的东西的。
以下是我收到的答复：
import React from 'react';
常量自定义边等于，（因为它要接收）标识，源点X坐标，源点Y坐标，目标点X坐标，目标点Y坐标，样式等于（空对象）这些参数，之后返回一个函数体（这里函数体未给出具体内容），标点符号。常量“edgePath”被赋值为这样的字符串，该字符串开始为“M”，接着是“空格”，然后是“sourceX”，接着是逗号，再接着是“sourceY”，接着是“空格”，然后是“L”，接着是“空格”，然后是“targetX。
// 计算箭头的角度取出目标Y减去源Y的差值，取出目标X减去源X的差值，将目标Y减去源Y的差值作为参数，将目标X减去源X的差值作为参数，使用Math.atan2函数，以目标Y减去源Y。制定常量名为arrowLength，其值设定为10，此10所指代的是箭头的长度 。
// 计算箭头头部的点 const arrowPoints = [取，目标X减去，箭头长度乘以，余弦值，该余弦值为，角度减去，圆周率除以6的差，再取，目标Y减去，箭头长度乘以，正弦值，该正弦值为，角度减去，圆周率除以6的差，所构成的坐标点 。 [targetX, targetY],将目标X减去箭头长度乘以余弦值，此余弦值为角度加上六分之派，再将目标Y减去箭头长度乘以正弦值，此正弦值同样为角度加上六分之派，得到这样的结果，两个值分别为目标X减去箭头长度乘以余弦值，此余弦值为角度加上六分之派，以及目标Y减去箭头长度乘以正弦值，此正弦值为角度加上六分之派后得到的值 。 ];
return ( <> id={id} d={edgePath} style={{ fill: 'none', strokeWidth: '4px', stroke: 'violet', ...style, // 允许覆盖样式 }} /> 先将箭头点数组中的每个点数组转换为逗号分隔的字符串，再将这些字符串用空格连接起来，形成一个字符串，最后将这个字符串放在一个包含它的对象属性值中，这个对象属性名为points 。 fill="violet" stroke="violet" strokeWidth="1" /> );};
export default CustomEdge;
// 在你的 React Flow 图中使用自定义边缘组件引入，ReactFlow，来自，'react-flow-renderer'，。从 './CustomEdge' 导入 CustomEdge， 。
const elements = [// ... 你的节点和边];
const App = => { return (
);};
export default App;
这段代码，我仅需针对其所选定的 CSS 样式做些许微调。这段代码为我节约了大概 30 分钟之长的编码时间，而且代码能够顺利地运行。
朝着 索要代码片段sublime text snippet，要是运行没办法成功，去反馈错误信息， 会依据反馈来进行修正一直到问题被解决 。
擅于依照详尽的反馈去优化自身答案，然而，反馈并非仅仅是请求再次生成或者寻觅更佳的解决方案，你同样能够于反馈里给出上下文信息，例如，我打算在react - flow图当中达成节点的自动布局功能发觉有一个名为cola的布局可达成此目标，鉴于在网络上难以找寻到具体实现的示例我向提问：
给我一段示例代码，用以呈现怎样运用react - flow以及cola布局去排布我的节点，。
输出：
import React from 'react';import ReactFlow ，其中 ReactFlowProvider ，以及 addEdge ，还有 removeElements ，另外 Controls ，均来自于 'react-flow-renderer' 。从 'react-flow-renderer/dist/layoutCola' 那里导入 'ColaLayout'，。
const MyFlowComponent = => { const initialElements = [有着标识符为“1”，类型属于“input”，数据当中包含着名为“label”且值为“Input Node”的内容，而且其位置处于横坐标为“0”，纵坐标也为“0”之处的一个对象 。其标识为“2”，所依数据含“标签”为“节点二号”，所处位置横坐标为“200”，纵坐标为“50”， 。有着标识为“3”的单独个体，其关联的数据内具有带标签“Node 3”的部分，它所处的位置是横坐标为400，纵坐标为100 。存在一个标识为“e1 - 2”的，来源是“1”的，目标为“2”的事物 。具有标识为“e2 - 3”，来源是“2”，目标为“3 。”。
];
在定义函数时，存在一种情况，把它称之为 `onLoad`，其参数是一个名为 `reactFlowInstance` 的具体对象，当处于这种特定的函数定义情境下。reactFlowInstance进行fitView操作，以此来让图形能够适应视口，。 };
const layout = { type: 'cola', edgeLength: 180, animate: true, randomize: false, maxSimulationTime: 1500, };
return (
);};
将默认的，以MyFlowComponent之名进行导出 。
// 使用 npm 安装 cola:运用软件包管理器npm，安装名为react - flow以及react - flow - renderer这两个软件包,了：1150778770。
然而，就算我依照提示做了安装，代码依旧没办法运行，反倒出现了一个错误。
于是，我再次向 提问：
它给予我这般的错误情形，“未找到：错误：路径 ./dist/ 并非源自” 。
输出：
我就这个致使混淆的情况表达歉意。看起来，模块不再于react - flow - 包内直接具备可用的状态了。若要在React Flow里运用“cola”布局算法，你能够安装react - flow - dagre包，这个包给出了涵盖“cola”布局的额外布局选项。
然后， 提供了替代的代码块，并且推荐我安装一个新的库：
# 使用 npm运行npm，执行安装操作，安装名为react - flow的软件包，以及名为react - flow - renderer的软件包，还有名为react - flow - dagre的软件包。
但这次安装过程中出现了错误：
npm出现错误，错误代码为404，表示未找到sublime text snippet，是通过GET方式请求查询，未能查找到相关内容，标点符号为破折号，最后显示未找到 。
此时此刻，已然清楚知晓我的需求，就算我未曾主动进行询问，它也已然开始给出别的建议，指引我达成节点布局的原本意图。最终，即便从来没有运用 cola 布局，我依旧实现了我的目标，我的问题得以解决 。
最近这段时间，我计划要在Kafka集群跟服务之间构建起消息连接。虽说Kafka给出了对应的连接器，然而我对于这方面的知识掌握得并不够。我在网络上寻觅了一些配置示例，即便我找到了详细描述Kafka连接到S3桶的示例，可是我却没有找到把它用作数据接收端的示例。于是乎，我向它询问了该怎么去操作，它给出了一整套完整的指导步骤用以帮我达成这个操作。我于网上搜寻了此答案，欲弄明白它是自行产生的，还是依据其他示例推导而来的，然而结果发觉并无相似的文章。
局限性与挑战
即便AI编程辅助工具显著地提升了编程效率，然而我们也得清晰地意识到，它可不是毫无瑕疵的。我们不能够全然依靠它所生成的代码，而是应当一步步地去检查以及测试它的输出结果。
我在使用过程中，也发现了一些局限性：
有的时候，会产生出来一些于当下代码所处环境当中并不存在的变量，这有可能是由于尽管在编码的进程里面顾及到了变量予以命名时的逻辑性，然而却没办法确保代码能够正确地运行。
当去向其查询某些工具或者技术的操作指南之际，有可能因为它训练数据库的时效性方面的问题，输出的结果有时候会看上去显得过时，有些工具或许已经开展了更新，界面同样发生了改变，跟所提供的结果并不一致，我在运用AWS的一些服务之时就碰到过这样的情形。
你有没有于处在工作期间借助 AI 去协助进行编程呢，你持有怎样的看法以及拥有何种经验呀。
如有侵权请联系删除！
TAGS：
