譯者 | 布加迪

審校 | 重樓

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

還有什么比親自測試一下更好的方法呢？我們讓ChatGPT從頭開始構建一個簡單的Web應用程序。以下是我們測試的結果，以及您可以使用ChatGPT從頭開始構建一個網站的幾個步驟。

步驟1：為您的Web應用程序生成藍圖

就像您在使用任何工具構建Web應用程序時所做的那樣，在讓ChatGPT發揮功效之前，您需要描繪您希望應用程序所需外觀的藍圖以及構建它所需的步驟。

對于我們的第一個任務，我們讓ChatGPT為一個簡單的聊天應用程序開發一個藍圖。為此，我們描述了這個Web應用程序的需求，然后讓聊天機器人詳細制定開發該應用程序的計劃。

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

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

沒有插件，您會得到一個基于文本的藍圖或ASCII藝術流程圖。即使沒有插件，ChatGPT仍然應該像下面的例子一樣提供應用程序的清晰藍圖。

步驟2：將藍圖分割成更小的模塊

現在我們已描繪了一個大的藍圖，我們讓ChatGPT幫助我們將應用程序分成更小的組件，以便我們可以單獨開發，然后集成起來構成完整的Web應用程序。ChatGPT建議將其分為三個組件：

1. 注冊模塊

2. 登錄模塊

3. 聊天模塊

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

1. 構建注冊組件

我們徑直開始構建注冊組件。我們讓ChatGPT設計出一個合適的算法。在這里，我們通過指定只需要用戶的用戶名、電子郵件和注冊頭像來進行干預。下面是提示：

結果如下：

接下來，我們提示ChatGPT構建注冊組件。

雖然我們沒有將密碼字段包含在注冊過程中，但ChatGPT通過將密碼包含在生成的HTML代碼中做出了正確的選擇。我們在沒有任何修改的情況下復制了代碼，下面是它在瀏覽器上的樣子。

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

沒有密碼散列，沒有錯誤處理，而且容易發生SQL注入攻擊——ChatGPT只做了最基本的工作。解決這個問題比較容易。我們只是讓ChatGPT“識別您剛生成的代碼中的所有錯誤，然后使用已識別的內容來優化代碼”。這樣，我們的PHP注冊腳本就準備好了。

要點提醒：

提示的具體措辭很重要。您需要非常清楚和具體地了解您需要ChatGPT做什么。當我們只是讓它“用這段代碼修復問題”時，它并沒有修復我們希望它修復的大部分問題。

接下來，我們讓ChatGPT“編寫SQL代碼，為PHP腳本中捕獲的數據創建數據庫”。下面是生成的SQL代碼：

下面是通過執行SQL生成的表：

數據庫創建好后，我們嘗試了第一次注冊，沒有出現任何錯誤。

2. 構建登錄組件

在完成注冊組件之后，我們開始構建登錄組件。令人驚訝的是，盡管有額外的會話管理邏輯，它卻是最容易構建的部分。

這是生成的登錄頁面。一個關鍵的亮點是它使用了與注冊頁面相同的顏色選項。

在按照ChatGPT的指示創建“server.login.php”文件并添加生成的PHP腳本之后，我們在沒有任何修改或調試的情況下進行了第一次成功登錄。

3.構建聊天組件

構建聊天組件是我們這個小實驗的最后一個部分，可能也是最困難的部分。首先，我們只是讓ChatGPT為聊天組件編寫代碼。不用說，這是一個巨大的失敗。對于您想要創建的任何應用程序比較復雜的組件，您需要將其拆分成更小的組件，并逐個處理它們。

我們詢問了ChatGPT關于拆分聊天組件的建議，它建議我們創建三個頁面：

1. Chat.php

2. Send-messages.php

3. Fetch-messages.php

要點提醒：

當ChatGPT建議文件名時，在項目中使用不同的名稱可能會無意中導致問題，因為聊天機器人將在整個項目中創建的所有代碼中引用相同的名稱。對此我們深有體會。別犯同樣的錯誤。

創建Chat.php頁面

首先，我們向ChatGPT詳細說明了我們希望聊天界面的外觀。

在運行生成的HTML代碼之后，我們有了一個沒有消息輸入框的聊天界面。為了解決這個問題，我們只是提示ChatGPT“重寫代碼以包含消息輸入框和發送按鈕”。下面是生成的代碼在瀏覽器上第二次試用時的樣子。

要點提醒：

每當生成的代碼未能提供期望的結果或遺漏重要的組件時，只需提示ChatGPT重寫最后的代碼。告訴它添加組件或執行初始代碼中未完成的任何操作。

創建“send-messages.php”和“Fetch-messages”頁面

對界面感到滿意后，我們繼續構建腳本來處理聊天邏輯。為了能夠從數據庫中發送和獲取消息，ChatGPT正確地強調了我們需要一個“消息”表。我們讓聊天機器人為消息表創建一個SQL。

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

ChatGPT為“send-messages.php”頁面和“fetch-messages.php”頁面生成了腳本。在運行這兩個腳本時，我們終于碰到了第一個錯誤（奇怪的是，這令人滿意）。在沒有調試任何一行代碼的情況下對項目進行如此深入的研究似乎有點好得難以置信，盡管它比較簡單。

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

要點提醒：

在使用ChatGPT構建應用程序時，請確保使用相同的聊天線程，并盡量盡快完成相關組件。使用新的聊天線程或長時間休息可能會導致不一致。如果您在編碼會話之間休息很長時間，ChatGPT往往會忘記當前項目的一些細節（比如顏色方案）。

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

ChatGPT：一款優秀的編程助手

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

當然，它仍然有很多缺陷。有限的上下文窗口及其將來自多個獨立構建的組件的邏輯連接在一起的能力是一大問題。然而，該聊天機器人可以幫助您快速構建相當復雜的Web應用程序，如果您知道怎么做的話。

原文標題：How to Build a Web App With ChatGPT，作者：Maxwell Timothy