如何利用人工智能帮助我编码

为什么它比你想象的好和更糟糕

ChatGPT中文站 — Photo by Growtika on Unsplash

7年前，我正在为Merlin Guides编写代码，这是一个在软件内部进行交互培训变得简单的工具。我需要编写的其中一个算法是"isElementVisible"，听起来很简单，但是当你意识到页面上的元素可以互相重叠，可能会有模糊/阴影，并且它们可以设置为不可见（甚至具有负的x和y坐标）——这就变成了一个更难的问题。 Translation: 7年前，我为Merlin Guides编写代码，这是一款使软件内的交互培训变得简单的工具。其中一个我必须编写的算法是“isElementVisible”，看起来相当简单，但当你意识到页面上的元素可以相互重叠，可能存在模糊/阴影，并且它们可以拥有使其不可见的设置（甚至具有负的x和y坐标）时，问题就变得更加困难了。

我提起这个问题是因为我过去几乎每周都要重写算法，并进行学习和优化。当我第一次听说ChatGPT可以编写代码时，我简直不敢相信，于是我立刻问它这件事——希望展示我有多聪明，以及他们的回答有多糟糕。不到一秒钟的时间，它已经写出了大约95%的最终算法的代码...... 简直令人发疯。

随着我重新开始编码，我想分享一下我如何利用它帮助我更快、更好地编码，减少了很多的沮丧感。我通常使用Bard（谷歌版），但你也可以使用ChatGPT、CoPilot、必应等等来实现以下操作。

同时，请注意，我认为无论您是编程的初学者还是经验丰富的老手，都将从它们中获得许多好处。无论是从书籍中解决代码问题，还是不通过Stackoverflow，您都会受益匪浅。

1 - 从头开始编写代码

这可能是显而易见的一点，但你可以解释一个问题，工具将为你编写代码。然而，我发现你对自己想要的东西越精确，代码就会越好。这里是一个示例提示：

编写2个React组件（React版本18）以显示天气。第一个组件写出今天的天气，并包括华氏温度（其中内部的按钮使用摄氏度，使用本地存储保留设置），带有当前天气的图标以及从中获取的位置。第二个组件显示接下来的5天，比第一个组件的尺寸小。它们应该能够在另一个组件中添加，只需依次列出它们即可。

您将会注意到，如果您运行这个程序，您将会得到两个组件以及它们的实现方式。您还会注意到它已经为您选择了一个API，并要求将位置的代码硬编码。因此，我们可以继续完善这个程序，比如只需像与其他开发人员交流一样写。

将API更改为使用雅虎的免费API，并且将位置从硬编码更改为使用API查找用户位置。

您现在将看到您的其中一个组件的更改，按照我们的要求准确执行。我很少能找到完美的提示进行初始操作，因此能够看到输出并提出更改建议非常有帮助。

2 — 编写特定的功能

您可以加快工作流程的一种方法是先搭建应用程序的基本框架（按照您希望的方式），然后只需粘贴类/函数列表并要求它为您编写代码。例如：

请填写以下代码，以在浏览器/Chrome扩展程序中运行。

import MiniSearch from '../../../../libraries/minisearch-min';

export default class SearchIndex { 使用关键字 class 来定义一个名为 SearchIndex 的类 {

_createNewIndex(docs) {}

重新索引并返回结果。

添加文档(document) {}

updateDocument(document) {} 更新文档(document) {}

removeDocument(document) {}移除文档(document) {}

搜索（term）{}

}

在这种情况下，它同时输出了类别，并且给出了如何在Chrome扩展中使用它的一些示例！您可以看到，我已经选择了一个我想要使用的特定库，它能够正确识别并实现它。

3 — 修复代码中的错误

如果你有一个特定的函数不像你想的那样工作，你可以将代码粘贴到聊天窗口并询问为什么它不起作用。它不仅会给出解决方案，还会解释为什么你的代码没有起作用，例如：

为什么这段代码不起作用？function multipleWhenPositive(x,y) { return x * y; }

在这种情况下，它检测函数名称并将其改写为检查是否为正数。非常令人印象深刻-当然，这需要您事先编写好的函数名称（在此类问题上，您可以提出一个问题并要求它编写良好的函数名称！）

4 — 修复运行时错误

如果您曾经编写过一些代码，而编译器给您报错，或者在您运行代码时在控制台或浏览器中看到错误，那么您可以利用这个错误来修复它（而不是在StackOverflow上阅读大量评论）。您可以粘贴代码和错误，并要求它为您修复。例如，我正在编写一些用于生成SSL Pem文件的代码，但在加载时一直出现错误。只需粘贴代码并说：

我从生成的 PEM 得到以下错误，您能请修复代码中的错误吗？“错误：错误：0480006C:PEM 程序::没有起始行”

能够编写起始行（并且事后还添加了结束行，以便了解接下来可能遇到的错误）。

5 - 写测试

我是一个坚信程序员应该要么写测试要么编写代码，但（在这个新的人工智能范式里）他们不应该同时编写两者的人。因此，根据你是哪一类开发者（或者你是否了解什么是TDD），你可以选择相反的方式，但是我更喜欢编写代码的乐趣，所以你可以要求它为你编写测试。注意，我建议你要么使用一个已经有效的示例测试（比如“使用下面的格式为以下函数编写测试”），要么非常精确地说明你所使用的测试框架。

请注意，在上面的示例中，当我们让AI为我们编写代码时，你可以随时要求它创建测试，以节省后续的时间（并帮助你发现生成的代码中的问题）。

6 — 设置！

如果你和我一样，没有准备好的清晰模板来完成项目，那么可以直接让它为你完成会很有帮助。例如，你可以说：

我正在创建一个Chrome扩展，用于记录页面的主要要点并将它们存储在外部数据库中以供日后参考。请使用像Gulp这样的运行器创建应用程序的框架，其中包括单元测试和E2E测试。

这为我们创建了一个Gulp文件，但它实际上没有包含一些文件，您可以添加后续问题，例如：

将所需的JavaScript和JSON文件写出

现在创建一些示例测试文件，以便达到80%或以上的代码覆盖率。

在短时间内，您将具备快速开发和强大测试系统的完整Chrome扩展系统的基础知识。

奖金——快速设计

如果你正在创建一个前端界面，通常在开始阶段你的设计看上去可能显得有些平淡，频繁刷新千百次只能看到无聊的按钮和输入框，这样的情况下，你可以要求给你的元素添加样式，我建议你说“以……的风格”，但是你提供的细节越多越好。比如说：

这是我的HTML，请使其外观类似于Google的设计系统，美观且易于使用。

然后它能够添加一些CSS使其看起来更加漂亮！你还可以要求它使用现有的样式，例如，我现在在请求样式时使用这个“请只使用Tailwind CSS类，不要使用自定义类”，或者“将其作为主要颜色 #0099FF”。它永远无法胜过一个设计师或完全与你自己的设计系统相同，但对于快速原型设计（或非常具体的类）来说，它确实非常有帮助。