譯者 | 布加迪

審校 | 重樓

圍繞ChatGPT的最大賣點(diǎn)之一是它可以成為一種有效的編程工具。其想法是這樣的：您用自然語(yǔ)言描述需求，該聊天機(jī)器人生成滿足該需求的代碼。但是ChatGPT在這方面到底有多好呢？

還有什么比親自測(cè)試一下更好的方法呢？我們讓ChatGPT從頭開(kāi)始構(gòu)建一個(gè)簡(jiǎn)單的Web應(yīng)用程序。以下是我們測(cè)試的結(jié)果，以及您可以使用ChatGPT從頭開(kāi)始構(gòu)建一個(gè)網(wǎng)站的幾個(gè)步驟。

步驟1：為您的Web應(yīng)用程序生成藍(lán)圖

就像您在使用任何工具構(gòu)建Web應(yīng)用程序時(shí)所做的那樣，在讓ChatGPT發(fā)揮功效之前，您需要描繪您希望應(yīng)用程序所需外觀的藍(lán)圖以及構(gòu)建它所需的步驟。

對(duì)于我們的第一個(gè)任務(wù)，我們讓ChatGPT為一個(gè)簡(jiǎn)單的聊天應(yīng)用程序開(kāi)發(fā)一個(gè)藍(lán)圖。為此，我們描述了這個(gè)Web應(yīng)用程序的需求，然后讓聊天機(jī)器人詳細(xì)制定開(kāi)發(fā)該應(yīng)用程序的計(jì)劃。

使用上面的提示后，我們得到的結(jié)果如下：

您需要在您的ChatGPT帳戶上啟用“Show Me”插件，以生成像上面這樣的流程圖。您可以僅需幾個(gè)步驟安裝和使用ChatGPT插件，不過(guò)您需要付費(fèi)訂閱。

沒(méi)有插件，您會(huì)得到一個(gè)基于文本的藍(lán)圖或ASCII藝術(shù)流程圖。即使沒(méi)有插件，ChatGPT仍然應(yīng)該像下面的例子一樣提供應(yīng)用程序的清晰藍(lán)圖。

步驟2：將藍(lán)圖分割成更小的模塊

現(xiàn)在我們已描繪了一個(gè)大的藍(lán)圖，我們讓ChatGPT幫助我們將應(yīng)用程序分成更小的組件，以便我們可以單獨(dú)開(kāi)發(fā)，然后集成起來(lái)構(gòu)成完整的Web應(yīng)用程序。ChatGPT建議將其分為三個(gè)組件：

1. 注冊(cè)模塊

2. 登錄模塊

3. 聊天模塊

我們有其他的想法，但這里的目標(biāo)是讓ChatGPT做主。

1. 構(gòu)建注冊(cè)組件

我們徑直開(kāi)始構(gòu)建注冊(cè)組件。我們讓ChatGPT設(shè)計(jì)出一個(gè)合適的算法。在這里，我們通過(guò)指定只需要用戶的用戶名、電子郵件和注冊(cè)頭像來(lái)進(jìn)行干預(yù)。下面是提示：

結(jié)果如下：

接下來(lái)，我們提示ChatGPT構(gòu)建注冊(cè)組件。

雖然我們沒(méi)有將密碼字段包含在注冊(cè)過(guò)程中，但ChatGPT通過(guò)將密碼包含在生成的HTML代碼中做出了正確的選擇。我們?cè)跊](méi)有任何修改的情況下復(fù)制了代碼，下面是它在瀏覽器上的樣子。

接下來(lái)，我們提示ChatGPT生成PHP注冊(cè)腳本。首先，我們提示“編寫(xiě)用于處理表單提交的服務(wù)器端邏輯的PHP代碼”。雖然生成的腳本運(yùn)行良好，但它有很多漏洞。

沒(méi)有密碼散列，沒(méi)有錯(cuò)誤處理，而且容易發(fā)生SQL注入攻擊——ChatGPT只做了最基本的工作。解決這個(gè)問(wèn)題比較容易。我們只是讓ChatGPT“識(shí)別您剛生成的代碼中的所有錯(cuò)誤，然后使用已識(shí)別的內(nèi)容來(lái)優(yōu)化代碼”。這樣，我們的PHP注冊(cè)腳本就準(zhǔn)備好了。

要點(diǎn)提醒：

提示的具體措辭很重要。您需要非常清楚和具體地了解您需要ChatGPT做什么。當(dāng)我們只是讓它“用這段代碼修復(fù)問(wèn)題”時(shí)，它并沒(méi)有修復(fù)我們希望它修復(fù)的大部分問(wèn)題。

接下來(lái)，我們讓ChatGPT“編寫(xiě)SQL代碼，為PHP腳本中捕獲的數(shù)據(jù)創(chuàng)建數(shù)據(jù)庫(kù)”。下面是生成的SQL代碼：

下面是通過(guò)執(zhí)行SQL生成的表：

數(shù)據(jù)庫(kù)創(chuàng)建好后，我們嘗試了第一次注冊(cè)，沒(méi)有出現(xiàn)任何錯(cuò)誤。

2. 構(gòu)建登錄組件

在完成注冊(cè)組件之后，我們開(kāi)始構(gòu)建登錄組件。令人驚訝的是，盡管有額外的會(huì)話管理邏輯，它卻是最容易構(gòu)建的部分。

這是生成的登錄頁(yè)面。一個(gè)關(guān)鍵的亮點(diǎn)是它使用了與注冊(cè)頁(yè)面相同的顏色選項(xiàng)。

在按照ChatGPT的指示創(chuàng)建“server.login.php”文件并添加生成的PHP腳本之后，我們?cè)跊](méi)有任何修改或調(diào)試的情況下進(jìn)行了第一次成功登錄。

3.構(gòu)建聊天組件

構(gòu)建聊天組件是我們這個(gè)小實(shí)驗(yàn)的最后一個(gè)部分，可能也是最困難的部分。首先，我們只是讓ChatGPT為聊天組件編寫(xiě)代碼。不用說(shuō)，這是一個(gè)巨大的失敗。對(duì)于您想要?jiǎng)?chuàng)建的任何應(yīng)用程序比較復(fù)雜的組件，您需要將其拆分成更小的組件，并逐個(gè)處理它們。

我們?cè)儐?wèn)了ChatGPT關(guān)于拆分聊天組件的建議，它建議我們創(chuàng)建三個(gè)頁(yè)面：

1. Chat.php

2. Send-messages.php

3. Fetch-messages.php

要點(diǎn)提醒：

當(dāng)ChatGPT建議文件名時(shí)，在項(xiàng)目中使用不同的名稱可能會(huì)無(wú)意中導(dǎo)致問(wèn)題，因?yàn)榱奶鞕C(jī)器人將在整個(gè)項(xiàng)目中創(chuàng)建的所有代碼中引用相同的名稱。對(duì)此我們深有體會(huì)。別犯同樣的錯(cuò)誤。

創(chuàng)建Chat.php頁(yè)面

首先，我們向ChatGPT詳細(xì)說(shuō)明了我們希望聊天界面的外觀。

在運(yùn)行生成的HTML代碼之后，我們有了一個(gè)沒(méi)有消息輸入框的聊天界面。為了解決這個(gè)問(wèn)題，我們只是提示ChatGPT“重寫(xiě)代碼以包含消息輸入框和發(fā)送按鈕”。下面是生成的代碼在瀏覽器上第二次試用時(shí)的樣子。

要點(diǎn)提醒：

每當(dāng)生成的代碼未能提供期望的結(jié)果或遺漏重要的組件時(shí)，只需提示ChatGPT重寫(xiě)最后的代碼。告訴它添加組件或執(zhí)行初始代碼中未完成的任何操作。

創(chuàng)建“send-messages.php”和“Fetch-messages”頁(yè)面

對(duì)界面感到滿意后，我們繼續(xù)構(gòu)建腳本來(lái)處理聊天邏輯。為了能夠從數(shù)據(jù)庫(kù)中發(fā)送和獲取消息，ChatGPT正確地強(qiáng)調(diào)了我們需要一個(gè)“消息”表。我們讓聊天機(jī)器人為消息表創(chuàng)建一個(gè)SQL。

在生成SQL代碼之后，我們讓聊天機(jī)器人生成PHP腳本來(lái)處理消息傳遞邏輯。

ChatGPT為“send-messages.php”頁(yè)面和“fetch-messages.php”頁(yè)面生成了腳本。在運(yùn)行這兩個(gè)腳本時(shí)，我們終于碰到了第一個(gè)錯(cuò)誤（奇怪的是，這令人滿意）。在沒(méi)有調(diào)試任何一行代碼的情況下對(duì)項(xiàng)目進(jìn)行如此深入的研究似乎有點(diǎn)好得難以置信，盡管它比較簡(jiǎn)單。

事實(shí)證明，錯(cuò)誤是由于ChatGPT在腳本中引入了對(duì)未聲明的會(huì)話變量（$_SESSION['user_id']）的檢查。我們懷疑這是由于ChatGPT忘記了項(xiàng)目中使用的一些上下文和變量的名稱。

要點(diǎn)提醒：

在使用ChatGPT構(gòu)建應(yīng)用程序時(shí)，請(qǐng)確保使用相同的聊天線程，并盡量盡快完成相關(guān)組件。使用新的聊天線程或長(zhǎng)時(shí)間休息可能會(huì)導(dǎo)致不一致。如果您在編碼會(huì)話之間休息很長(zhǎng)時(shí)間，ChatGPT往往會(huì)忘記當(dāng)前項(xiàng)目的一些細(xì)節(jié)（比如顏色方案）。

話雖如此，我們修復(fù)了這個(gè)漏洞，并部署了代碼。我們注冊(cè)、登錄并嘗試了聊天功能。雖然我們可以將一個(gè)注冊(cè)用戶的消息發(fā)送給另一個(gè)注冊(cè)用戶，但是消息框的顏色和排列有些偏差。然而，對(duì)于一個(gè)花了1小時(shí)23分鐘完成的應(yīng)用程序，我們不會(huì)太苛刻地評(píng)判它。

ChatGPT：一款優(yōu)秀的編程助手

ChatGPT顯然是一款功能強(qiáng)大的編程助手。該聊天機(jī)器人可以從簡(jiǎn)單的、有時(shí)不太清楚的指令生成令人印象深刻的代碼，這證明了其出色的編程能力。

當(dāng)然，它仍然有很多缺陷。有限的上下文窗口及其將來(lái)自多個(gè)獨(dú)立構(gòu)建的組件的邏輯連接在一起的能力是一大問(wèn)題。然而，該聊天機(jī)器人可以幫助您快速構(gòu)建相當(dāng)復(fù)雜的Web應(yīng)用程序，如果您知道怎么做的話。

原文標(biāo)題：How to Build a Web App With ChatGPT，作者：Maxwell Timothy