前端X chatGPT

前⾔

在我们前端开发中，我们经常需要⾯对各种各样的挑战和问题。⽆论是接⼿⽼项⽬、新技术的源码阅 读，还是前后端并⾏开发后的接⼝联调等情况，我们都需要时刻保持警觉，以便快速解决问题并提⾼开 发效率。本⽂将讨论前端开发中常⻅的问题，包括代码缺少注释、缺少接⼝类型声明、mock数据⽣ 成、不同数据结构的转换、React组件开发⼯具类的单元测试。我们将介绍如何借助chatGPT解决这些 问题，以及在⽇常开发中如何避免它们。希望这篇⽂章都能给你带来⼀些有⽤的⻅解和思路,作为抛砖引 ⽟提⾼前端的开发效率。

如何搭建⼀个⾃⼰的chatGPT应⽤

如何搭建⼀个⾃⼰的chatGPT应⽤。前先想想如何将⼤象塞⼊冰箱。第⼀步打开冰箱、第⼆步放⼊⼤ 象、第三步关上冰箱。现在回到我们的主题，我们⼀步步的介绍如何使⽤node.js搭建⼀个⾃⼰的 chatGPT应⽤。

第⼀步 新建项⽬ 完成package.json以及依赖的安装

mkdir chatGPT

cd chatGPT

npm init -y npm install express @openai/openai-api dotenv nodemon

Express是⼀个流⾏的Node.js框架，@openai/openai-api是⼀个OpenAI API的客户端，dotenv是⼀个⽤ 于从.env⽂件中加载环境变量的模块。

第⼆步获取 openai_api_key

在完成安装后，我们需要设置环境变量。我们可以在项⽬根⽬录下创建⼀个名为.env的⽂件，并将以下 内容添加到⽂件中：

OPENAI_API_KEY=< your_openai_api_key>

登陆后查看⾃⼰的openai_api_key

第三步 新建⼀个服务，创建⼀个名为app.js的⽂件

const express = require("express");

const cors = require("cors");

const dotenv = require('dotenv')

const { Configuration, OpenAIApi } = require("openai"); //调⽤chatgpt的openAIApi

const app = express();

const PORT = 3000; dotenv.config() // 调⽤.env的openapi的key

const GPT_API_KEY = process.env.GPT_API_KEY

if (!GPT_API_KEY) {

console.log("请配置 ChatGPT API Key")

return

}

const configuration = new Configuration({ apiKey: GPT_API_KEY, });

const openai = new OpenAIApi(configuration);

app.use(express.urlencoded({ extended: true }));

app.use(express.json());

app.use(cors());

app.post("/convert", async (req, res) => {

// 解构 JSON 对象

let { value } = req.body;

// 向 ChatGPT 提问 prompt

const prompt = `Convert the JSON object into Typescript interfaces \n ${value} Please’

const completion = await openai.createChatCompletion({ model: "gpt-3.5-turbo", //调⽤的chatGPT模型 messages: [{ role: "user", content: prompt }], });

res.json({ message: "Successful", response: completion.data.choices[0].message.content, }); });

app.listen(PORT, () => {

console.log(`Node.js 服务正在监听 ${PORT} 端⼝ ...`);

});

编辑package.json script下添加 "start": "nodemon index.js"

执⾏ npm start

第四步 ⽤create-react-app⽣成⼀个应⽤

import Editor from "@monaco-editor/react";

const App = () => {

const [value, setValue] = useState("");

const handleSubmit = () => {

fetch("http://localhost:3000/convert", {

method: "POST",

body: JSON.stringify({ value, }),

headers: { "Content-Type": "application/json", },

}) .then((res) => res.json())

.then((data) => {

setOutput(data.response.trim());

})

.catch((err) => console.error(err));

return (

            <main className='app'>

                  <Editor

                        height='90vh'

className='editor'

defaultLanguage='json'

defaultValue='{ }'

value={value}

onChange={(value) => setValue(value)}

                  />

                        < button className='runBtn' onClick={handleSubmit}>

提交

</button>

            </main>

)

};

添加⼀个monaco-editor以及提交按钮

代码注释&源码解读

代码注释是开发过程中⾮常重要的⼀步。通过注释，我们可以清晰地了解代码的意义，以及代码的设计 思路和实现⽅式。⽽在实际开发中，接⼿⽼项⽬、阅读新技术的源码, 我们往往会遇到注释不够详细、 代码逻辑不清晰、代码⻛格不统⼀等问题。这时候，我们可以使⽤ChatGPT来帮助我们⾃动⽣成注释。 下⾯是⼀个简单的例⼦：

复制helloworld function 到editer

function helloworld(str:string): string {

return `hello world ${str}`

}

修改app.js prompt提示词 'Add Chinese comments for the function' 回到浏览器点击 "提交" 按钮

// 函数名：getName

// 参数：str，类型为字符串

// 返回值：字符串类型的 'hello world'

function getName(str:string): string {

return 'hello world'

}

当源码较为复杂的时候，为了便于阅读了解代码，尽可能多的为代码添加上注释，我们改⼀下 prompt 提示词 'Add Chinese comments for each line of code'

缺少接⼝类型声明

在前后端接⼝联调过程中，⼀个常⻅的问题是接⼝的类型声明。特别是在使⽤TypeScript开发的项⽬ 中，类型声明是⾮常重要的，可以帮助开发⼈员更快速地找到问题。使⽤ChatGPT，你可以快速⽣成不 同类型的接⼝声明，⽐如RESTful接⼝、Swagger接⼝等等 我们以宠物店宠物信息接⼝为例：

{ "code": 0,

"data": {

"name": "Hello Kity",

"photoUrls": [ "http://dummyimage.com/400x400" ],

"id": 3,

"category": {

"id": 71,

"name": "Cat"

},

"tags": [ { "id": 22, "name": "Cat" } ],

"status": "sold" }

}

修改我们的prompt提示词 'Convert the JSON object into Typescript interfaces' 点击提交 就会得到ts的 类型声明了

interface Category { id: number; name: string; }

interface Tag { id: number; name: string; }

interface Data {

name: string;

photoUrls: string[];

id: number; category:

Category; tags: Tag[];

status: string;

}

interface Response { code: number; data: Data; }

mock数据⽣成

在前后端并⾏开发过程中，前端开发⼈员需要⾃⼰编写⼀些mock数据来模拟接⼝的返回结果。使⽤ ChatGPT，你可以快速⽣成⼀些随机的mock数据，从⽽更快速地进⾏⻚⾯开发。以下是⼀个mock数据 示例代码：

以产品信息接⼝为例

{

    product: '自行车',

    pid: 'c2hMXWk',

    item: [

      { price: 111 },

      { avater: './a.png', goodsInfo: 'Giant品牌的公路城市自行车' }

    ]

  }

修改我们的prompt提示词 `const A = ${obj} 请输出一个js array，其有3个子元素，且子元素key和对象A保持一致，元素value的类型和对象A同结构节点位置的同名的key的value的类型保持一致，根据对象的key名的含义mock生成对应的value，且当value的type为string类型时其值在整个数组中是能不重复的, 不需要任何解释` 点击提交（这次我们⽤中⽂作为我们的提示词）

[

  {

    product: '洗衣机',

    pid: 'm3iPLq2',

    item: [

      { price: 777 },

      { avater: './e.png', goodsInfo: '小天鹅洗衣机洗洗更健康' }

    ]

  },

  {

    product: '电视机',

    pid: 'n9oKJU1',

    item: [

      { price: 3999 },

      { avater: './h.png', goodsInfo: '索尼电视机，畅享视觉盛宴' }

    ]

  },

  {

    product: '冰箱',

    pid: 'p6rZBQ3',

    item: [

      { price: 1999 },

      { avater: './i.png', goodsInfo: '海尔冰箱，让生活更美好' }

    ]

  }

]

不同数据结构的转换

在开发中，经常需要进⾏⼀些数据类型的转换。⽐如，将⼀些从后端接⼝返回的数据转换成前端需要的 数据格式，或者将⼀些复杂的数据结构进⾏简化。使⽤ChatGPT，你可以快速⽣成⼀些⼯具类，帮助你 ⾃动化地进⾏数据类型转换。以下是⼀个数据类型转换示例代码：

{

"code": 0,

"data": { "name": "Hello Kity",

"photoUrls": [ "http://dummyimage.com/400x400" ],

"id": 3, "category": { "id": 71, "name": "Cat" },

"tags": [ { "id": 22, "name": "Cat" } ], "status": "sold" }

}

转换为 data 转变为 => result photoUrls 转变为 => imgurl

{

"code": 0,

"result": { "name": "Fido",

"imgurl": [ "http://dummyimage.com/400x400" ],

"id": 5, "category": { "id": 65, "name": "Dog" },

"tags": [ { "id": 23, "name": "Dog" } ],

"status": "available" }

}

修改我们的prompt提示词 提供⼀个⽅法将对象{obj1}转换为{obj2}

得到转换的function

function deepCopyAndTransform(obj) { // ⾸先进⾏深拷⻉

let copy = JSON.parse(JSON.stringify(obj));

// 然后对拷⻉的对象进⾏转换

copy.result = { name: copy.data.name, imgurl: copy.data.photoUrls }; delete copy.data.name;

delete copy.data.photoUrls;

return copy;

}

React组件开发⼯具类的单元测试

在React开发中，单元测试是⾮常重要的，可以帮助我们更快速地找到问题。但是，编写单元测试需要 考虑很多细节，⽐如测试⽤例的编写、模拟数据的⽣成等等。使⽤ChatGPT，你可以快速⽣成⼀些基本 的测试⽤例，从⽽更快速地进⾏单元测试。以下是⼀个单元测试⽤例示例代码：

import React from 'react';

class Button extends React.Component {

handleClick = () => { console.log('Button clicked!'); }

render() { return ( Click me! ); } }

export default Button;

⽼规矩 修改我们的prompt提示词 '编写这个react组件 基于jest的单元测试' 点击提交

import React from 'react';

import { render, fireEvent } from '@testing-library/react';

import Button from './Button';

describe('Button', () => {

test('renders a button element with the given text',

() => {

const buttonText = 'Click me!';

const { getByText } = render( );

const buttonElement = getByText(buttonText);

expect(buttonElement).toBeInTheDocument();

expect(buttonElement.tagName).toBe('BUTTON'); });

test('calls the onClick function when clicked', () => {

const onClickMock = jest.fn();

const { getByText } = render();

const buttonElement = getByText('Click me!'); fireEvent.click(buttonElement); expect(onClickMock).toHaveBeenCalledTimes(1); });

});

总结

综上所述，使⽤ChatGPT可以帮助前端开发⼈员更快速、更⾼效地完成⼀些常⻅的⼯作。⽆论是在代码 注释、接⼝类型声明、mock数据⽣成、数据类型转换还是单元测试⽤例编写等⽅⾯，ChatGPT都能够 提供⼀些有⽤的⼯具和帮助

本文作者：众安保险-技术研发中心-徐翔