出品| CSDN（ID：）

我探索了一些實用的人工智能應用程序，用于編寫高質量的功能代碼，這些代碼可以在您編程時提供很多便利。 我在工作中一直使用 Web Tools 和 GPT（我們可以將其視為 GPT 的變體，因為它們都基于相同的核心技術構建）。

核心總結

：獲取端到端指令集來解決問題，或編寫涵蓋多個類和函數的完整用例的代碼。 此外，它還會解釋生成的代碼，這是自動完成功能無法實現(xiàn)的。

接下來我將介紹在編程中使用AI的六種方式：

CSS 生成()

在構建 Dr Droid 的過程中，我設定了自己編寫應用程序并創(chuàng)建新組件的目標。 雖然我們使用 Figma 來創(chuàng)建原型，但將其嵌入到頁面設計中仍然需要一些技巧。 我主要從事后端開發(fā)，因此編寫 CSS 來處理網格、移動適配性和間距對我來說有點困難。 我創(chuàng)建了一個包含 HTML 元素的類，并在提示中描述了 Figma 原型中的元素。 將 CSS 添加到此類可以根據一些實際測量進行預測，我可以稍后對其進行調整，但它解決了我對選擇要使用的 CSS 樣式的困惑。

進入：

"""定義3個類別的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平臺上，我們需要進行大量的數據轉換來實現(xiàn)各種功能。 經過測試，根據提示編寫這些轉換函數表現(xiàn)出了很強的實力。 它還擅長參考舊字段描述新字段，以及編寫將兩個數據對象合并為具有不同模式的單個對象的函數。

例如，我需要一個函數，根據兩個字符串鍵將 JSON 對象組合到一個數組中，并為第三個數字鍵提供不同的統(tǒng)計信息。 它可以在您的代碼環(huán)境中編寫，而無需重命名變量，并且您可以告訴它使用哪個庫來執(zhí)行。

進入：

"""編寫一個函數，將 JSON 對象合并到數組中的兩個字符串鍵上，并給出第三個數字鍵的平均值和中位數統(tǒng)計信息"""

輸出：

function mergeJsonArray(jsonArray, key1, key2, key3) {  let mergedJson = {};  let mergedJsonArray = [];
  jsonArray.forEach(item => {    if (item[key1] in mergedJson) {      if (item[key2] in mergedJson[item[key1]]) {        mergedJson[item[key1]][item[key2]].push(item[key3]);      } else {        mergedJson[item[key1]][item[key2]] = [item[key3]];      }    } else {      mergedJson[item[key1]] = {};      mergedJson[item[key1]][item[key2]] = [item[key3]];    }  });
  for (const key1 in mergedJson) {    for (const key2 in mergedJson[key1]) {      let sum = 0.0;      let median = 0.0;      let mean = 0.0;      let count = 0;      let min = 0.0;      let max = 0.0;
      mergedJson[key1][key2].forEach(item => {        sum += item;        count += 1;      });
      mean = sum / count;
      mergedJson[key1][key2].sort((a, b) => a - b);      median = mergedJson[key1][key2][Math.floor(mergedJson[key1][key2].length / 2)];
      min = mergedJson[key1][key2][0];      max = mergedJson[key1][key2][mergedJson[key1][key2].length - 1];
      mergedJsonArray.push({        [key1]: key1,        [key2]: key2,        'count': count,        'sum': sum,        'mean': mean,        'median': median,        'min': min,        'max': max      });    }  }    return mergedJsonArray;}

編碼副駕駛：識別和應用重復模式

我正在為跨多個數據庫表操作的測試環(huán)境編寫數據刪除腳本。 這些表都有時間戳列，但名稱不同。 我在注釋中以逗號分隔的格式列出了所有表名，然后編寫了第一個表的刪除 SQL 查詢，以及整個刪除命令的連接游標用法。 完成此操作后，Co-pilot 開始自動為這些表中的每次迭代建議代碼塊，同時還根據其中時間戳列的名稱修改其列名稱。 然而，它無法理解可能的刪除順序，它只能按照模型文件中寫入的順序進行。

我將 Co-pilot 插件與 Text 結合使用。 我發(fā)現(xiàn)該插件的建議更加智能，尤其是在處理其他文件中的類定義的上下文時。

通過描述需求生成整個React.js組件，只需要調整幾個變量

當我使用一個名為react-flow的React.js庫時，我想自定義一些組件來替換庫中的原始部分。 我的目標是為其添加個性化的視覺效果，以及在組件頂部添加一些附加文本。 盡管該文檔詳細描述了如何用新組件替換原有組件，但沒有明確提及如何在保留原有功能的情況下對其進行擴展。

所以，我問了一個問題：

如何在反應流中創(chuàng)建自定義邊緣。 該邊緣是一條紫色粗線，末端有一個大箭頭。

以下是我收到的回復：

import React from 'react';
const CustomEdge = ({ id, sourceX, sourceY, targetX, targetY, style = {} }) => {  const edgePath = `M ${sourceX},${sourceY} L ${targetX},${targetY}`;
  // 計算箭頭的角度  const angle = Math.atan2(targetY - sourceY, targetX - sourceX);  const arrowLength = 10;// 箭頭的長度
// 計算箭頭頭部的點  const arrowPoints = [    [targetX - arrowLength * Math.cos(angle - Math.PI / 6), targetY - arrowLength * Math.sin(angle - Math.PI / 6)],    [targetX, targetY],    [targetX - arrowLength * Math.cos(angle + Math.PI / 6), targetY - arrowLength * Math.sin(angle + Math.PI / 6)],  ];
  return (    <>              id={id}        d={edgePath}        style={{          fill: 'none',          strokeWidth: '4px',          stroke: 'violet',          ...style, // 允許覆蓋樣式        }}      />              points={arrowPoints.map(p => p.join(',')).join(' ')}        fill="violet"        stroke="violet"        strokeWidth="1"      />      );};
export default CustomEdge;
// 在你的 React Flow 圖中使用自定義邊緣組件import ReactFlow from 'react-flow-renderer';import CustomEdge from './CustomEdge';
const elements = [// ... 你的節(jié)點和邊];
const App = () => {  return (    
'500px' }}>          
  );};
export default App;

對于這段代碼，我只需要對選定的 CSS 樣式進行一些細微的調整。 這段代碼節(jié)省了我大約30分鐘的編碼時間，并且代碼運行順利。

請求代碼片段。 如果操作失敗，會反饋錯誤信息。 將根據反饋進行修正，直至問題解決。

擅長根據詳細反饋完善答案。 但是，反饋不僅僅是請求再次構建或尋找更好的解決方案，您還可以在反饋中提供上下文信息。 例如，我想實現(xiàn)react-flow圖中節(jié)點的自動布局。 我發(fā)現(xiàn)有一個叫cola的布局可以達到這個目的。 由于網上很難找到具體的實現(xiàn)例子，所以問：

給我一個示例代碼，展示如何使用反應流和可樂布局來排列我的節(jié)點

輸出：

import React from 'react';import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls } from 'react-flow-renderer';import { ColaLayout } from 'react-flow-renderer/dist/layoutCola';
const MyFlowComponent = () => {  const initialElements = [    { id: '1', type: 'input', data: { label: 'Input Node' }, position: { x: 0, y: 0 } },    { id: '2', data: { label: 'Node 2' }, position: { x: 200, y: 50 } },    { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },    { id: 'e1-2', source: '1', target: '2' },    { id: 'e2-3', source: '2', target: '3' },
  ];
  const onLoad = (reactFlowInstance) => {    reactFlowInstance.fitView();  // 使圖形適應視口  };
  const layout = {    type: 'cola',    edgeLength: 180,    animate: true,    randomize: false,    maxSimulationTime: 1500,  };
  return (    <div style={{ height: '500px' }}>      <ReactFlowProvider>        <ReactFlow elements={initialElements} onLoad={onLoad} layout={layout}>          <Controls />        ReactFlow>      ReactFlowProvider>    div>  );};
export default MyFlowComponent;
// 使用 npm 安裝 cola:npm install react-flow react-flow-renderer

然而，盡管我按照提示安裝了，代碼仍然無法運行，出現(xiàn)錯誤。

于是，我又問：

它給了我這個錯誤“未找到：錯誤：路徑./dist/不是來自”。

輸出：

對于造成的混亂，我深表歉意。 看來該模塊不再直接在react-flow-包中可用。 要在React Flow中使用“cola”布局算法，您可以安裝react-flow-dagre包，它提供了包括“cola”布局在內的其他布局選項。

然后，提供了替代代碼塊并建議我安裝一個新庫：

# 使用 npmnpm install react-flow react-flow-renderer react-flow-dagre

但是這次安裝過程中出現(xiàn)了錯誤：

npm 錯誤！ 404 未找到 - 獲取 - 未找到

既然它了解了我的需求，即使我不主動提出問題sublime text 自動編碼，它也開始提出其他建議sublime text 自動編碼，引導我實現(xiàn)節(jié)點布局的初衷。 最后，盡管沒有使用可樂布局，但我實現(xiàn)了我的目標，我的問題也解決了。

最近打算在Kafka集群和服務之間建立消息連接。 雖然Kafka提供了相應的連接器，但是我對它的了解還不夠。 我在網上查找了一些配置示例，雖然我找到了配置Kafka連接到S3存儲桶的詳細示例，但我沒有找到將其用作數據接收器的示例。 所以我詢問如何做到這一點，它提供了一套完整的分步說明來幫助我做到這一點。 我在網上搜索了這個答案，以確定它是自行生成的還是基于其他示例得出的，但沒有找到類似的文章。

限制和挑戰(zhàn)

雖然AI編程輔助工具極大地提高了編程效率，但我們也必須清醒地認識到它并不完美。 我們不能僅僅依賴它生成的代碼，而應該逐步檢查和測試它的輸出。

我在使用過程中也發(fā)現(xiàn)了一些限制：

有時，會生成一些當前代碼上下文中不存在的變量。 這可能是因為，雖然在編碼過程中考慮了變量命名的邏輯，但無法保證代碼的正確運行。

在查詢某些工具或技術的操作指南時，由于其訓練數據庫的時效性，有時輸出結果可能會顯得過時。 某些工具可能已經更新，其界面也發(fā)生了變化，與提供的結果不一致。 我在使用AWS的一些服務時也遇到過這種情況。

你已經在工作中使用AI輔助編程了嗎？ 您有什么意見和經驗？

如有侵權請聯(lián)系刪除！