围绕 ChatGPT 的最大炒作之一是它可以成为一种有效的编程工具。这个想法如下:你用自然语言描述你想要的东西;聊天机器人会生成执行此操作的代码。但 ChatGPT 在这方面实际上有多好呢?

还有什么比测试更好的方法来找出答案呢?我们要求 ChatGPT 从头开始​​构建一个简单的 Web 应用程序。以下是我们的测试结果以及您可以使用 ChatGPT 从头开始​​构建网站的步骤。

第 1 步:为您的 Web 应用程序生成蓝图

就像您使用任何工具构建 Web 应用程序时所做的那样,在让 ChatGPT 运行之前,您需要制定您希望应用程序的外观的蓝图以及构建它所需的步骤。

对于我们的第一个任务,我们要求 ChatGPT 为一个简单的聊天应用程序开发蓝图。为此,我们描述了网络应用程序的要求,然后要求聊天机器人详细说明开发应用程序的计划。

ChatGPT prompt to develop blueprint for web app

使用上面的提示后,这是我们得到的结果:

Flowchart or blueprint of web app developed by chatgpt

您需要在您的 ChatGPT 帐户上启用“Show Me”插件才能生成像我们上面这样的流程图。尽管您需要高级订阅,但只需几个步骤即可安装和使用 ChatGPT 插件。

如果没有该插件,您将获得基于文本的蓝图或 ASCII 艺术流程图。那还是可以的。即使没有插件,ChatGPT 仍然应该提供应用程序的清晰蓝图,如下例所示。

text-based breakdown of web app by ChatGPT

第 2 步:将蓝图拆分为更小的模块

现在我们已经了解了大局,我们向 ChatGPT 寻求帮助,将应用程序拆分为更小的组件,我们可以单独开发这些组件,然后集成以形成完整的 Web 应用程序。 ChatGPT 建议将其分为三个部分:

  1. 注册模块
  2. 登录模块
  3. 聊天模块

我们还有其他想法,但目标是让 ChatGPT 做主。

1. 构建注册组件

我们直接开始构建注册组件。我们要求 ChatGPT 制定一个合适的算法。在这里,我们通过指定只需要用户的用户名、电子邮件和头像进行注册进行干预。这是提示:

Prompt for building the registration component

结果如下:

Algorithm for user registration

接下来,我们提示 ChatGPT 构建注册组件。

prompt to generate the registration component

尽管我们没有将密码字段包含在注册过程中,但 ChatGPT 通过将其包含在生成的 HTML 代码中做出了正确的调用。我们复制了代码,没有进行任何修改,下面是它在浏览器上的外观。

Registration page generated by ChatGPT

接下来,我们提示 ChatGPT 生成 PHP 注册脚本。首先,我们提示“为处理表单提交的服务器端逻辑编写 PHP 代码”。尽管生成的脚本运行良好,但它存在很多漏洞。

没有密码散列,没有错误处理,并且容易受到 SQL 注入——ChatGPT 只做了最低限度的工作。解决这个问题相对容易。我们只是要求 ChatGPT “识别出您刚刚生成的代码中的所有错误,然后使用识别出的点来优化代码。”这样,我们的 PHP 注册脚本就准备好了。

提示的措辞很重要。您需要非常清楚和具体地了解您需要 ChatGPT 做什么。当我们只是要求它“解决此代码的问题”时,它并没有解决我们希望它解决的大部分问题。有关编写 ChatGPT 提示的更多指导,这里有一些地方可以学习如何编写有效的提示。

接下来,我们要求 ChatGPT“编写 SQL 代码来为 PHP 脚本中捕获的数据创建数据库。" 这是生成的 SQL 代码:

Generated SQL code for the creating database by ChatGPT

这是通过执行 SQL 创建的表:

Database created by ChatGPT

数据库设置完毕后,我们尝试了第一次注册,并且没有任何错误。

2. 构建登录组件

取消注册组件后,我们开始使用登录组件。令人惊讶的是,尽管有额外的会话管理逻辑,但它是最容易构建的。

Prompt to generate login script

这是生成的登录页面。一个关键亮点是它使用与注册页面相同的颜色选项。

ChatGPT-generated login page

按照 ChatGPT 的指示创建“server.login.php”文件并添加生成的 PHP 脚本后,我们无需任何修改或调试即可首次成功登录。

3. 构建聊天组件

构建聊天组件是我们这个小实验的最后部分,也可能是最困难的部分。起初,我们只是要求 ChatGPT 编写聊天组件的代码。不用说,这是一次巨大的失败。对于您想要创建的任何更复杂的组件,您需要将其拆分为更小的组件并逐个处理它们。

我们向 ChatGPT 询问有关拆分聊天组件的建议,它建议我们创建三个页面:

  1. 聊天.php
  2. 发送消息.php
  3. 获取消息.php

当 ChatGPT 建议文件名时,在项目中使用不同的名称可能会无意中导致问题,因为聊天机器人将在其在整个项目中创建的所有代码中引用相同的名称。我们经历了一番艰难才发现。不要犯同样的错误。

创建 Chat.php 页面

首先,我们向 ChatGPT 详细说明了我们希望聊天界面的外观。

ChatGPT prompt to generate HTML for the Chat interface

运行生成的 HTML 代码后,我们得到了一个没有消息输入框的聊天界面。为了解决这个问题,我们只是提示 ChatGPT“重写代码以包含消息输入框和发送按钮。“ 这是第二次试验时生成的代码在浏览器上的外观。

sample chat interface generated by ChatGPT

每当生成的代码无法给出所需的结果或遗漏重要组件时,只需提示 ChatGPT 重写最后的代码即可。告诉它包含该组件或执行初始代码中未完成的任何操作。以下是有关如何使用 ChatGPT 进行编程的一些技巧。

创建“send-messages.php”和“Fetch-messages”页面

对界面感到满意后,我们继续构建脚本来处理聊天逻辑。为了能够从数据库发送和获取消息,ChatGPT 正确地强调了我们需要一个“消息”表。我们要求聊天机器人为消息表创建 SQL。

SQL to create chat messages table

生成 SQL 代码后,我们要求聊天机器人生成 PHP 脚本来处理消息逻辑。

ChatGPT prompts to send and receive messages

ChatGPT 为“send-messages.php”和“fetch-messages.php”页面生成了脚本。在运行这两个脚本时,我们终于遇到了第一个错误(这令人奇怪地令人满意)。尽管项目相对简单,但在不调试一行代码的情况下就进入到这个项目似乎有点好得令人难以置信。

事实证明,该错误是由 ChatGPT 引入对未声明的会话变量的检查引起的($_SESSION['user_id'])到我们的脚本中。我们怀疑这是由于从项目中休息了相当长的时间,导致 ChatGPT 忘记了项目中使用的一些上下文和变量名称。

使用ChatGPT构建应用程序时,请确保使用相同的聊天线程并尝试尽快完成相关组件。使用新的聊天线程或长时间休息可能会导致不一致。如果您在编码会话之间休息很长时间,ChatGPT 往往会忘记当前项目的一些细节(例如配色方案)。

也就是说,我们修复了错误并部署了代码。我们注册、登录并尝试了聊天功能。虽然我们能够从一个注册用户向另一个注册用户发送消息,但消息气泡的颜色和排列有点偏差。不过,对于一款耗时 1 小时 23 分钟才能完成的应用程序,我们不会过于严厉地评判它。

ChatGPT:优秀的编码助手

ChatGPT 显然是一个强大的编码助手。聊天机器人可以从简单的、有时不太清晰的指令中生成令人印象深刻的代码,这证明了其编码能力。

当然,它仍然有很多缺陷。有限的上下文窗口及其将多个独立构建的组件的逻辑结合在一起的能力是一个主要问题。但是,如果您熟悉方法,聊天机器人可以帮助您快速构建相当复杂的 Web 应用程序。