面向 ChatGPT 編程實現(xiàn)全棧開發(fā)的 18 種方法

這篇文章是上篇文章的擴展，追加了正則表達(dá)式、前端、數(shù)據(jù)庫、命令行、面試準(zhǔn)備等主題，涵蓋全棧開發(fā)的方方面面。

在《編程新手如何通過ChatGPT一天完成一個MVP產(chǎn)品》這篇教程中，學(xué)院君已經(jīng)給大家演示過面向 ChatGPT 編程的一些基本套路，今天這篇教程是一個更系統(tǒng)的介紹，希望對你提高日常開發(fā)效率、成為10倍生產(chǎn)力程序員有所幫助。

0、搭建框架

首先，ChatGPT 可以幫我們開啟想要編寫的任何新內(nèi)容的骨架結(jié)構(gòu)，從而提升日常編碼效率。GitHub Copilot 在這方面也做得很好。這里我們以遠(yuǎn)程下載圖片為例進(jìn)行演示。

在 VSCode 中，可以基于 ChatGPT 插件面向 ChatGPT 編程實現(xiàn)這段演示代碼，代碼生成后點擊 Insert 自動插入代碼到右側(cè)編輯區(qū)：

當(dāng)然，你也可以從第三方云存儲下載圖片豐富代碼實現(xiàn)細(xì)節(jié)：

除了具體代碼外，你還可以讓 ChatGPT 給出項目的通用目錄結(jié)構(gòu)（這也是代碼框架的一部分）作為參考：

1、代碼解釋

你可以拿出想要理解的任何代碼，比如上面這段 ChatGPT 自動生成的圖片下載代碼，讓 ChatGPT 對其進(jìn)行解釋：

可以看到這些解釋非常詳細(xì)，這比自己摸索試圖理解復(fù)雜的代碼要快得多，尤其是一些比較抽象的、封裝度比較高的底層代碼。比如紅黑樹的實現(xiàn)代碼，我看不懂這段插入節(jié)點的代碼，作者又沒有寫任何注釋，可以讓 ChatGPT 代勞：

2、改進(jìn)現(xiàn)有的代碼

通過描述你想要實現(xiàn)的目標(biāo)，讓 ChatGPT 對現(xiàn)有的代碼進(jìn)行改進(jìn)。比如這里假設(shè)圖片資源不存在，則退出不執(zhí)行后面的文件保存操作：

它會為你提供如何實現(xiàn)目標(biāo)的說明，包括修改后的代碼，非?？?。

3、使用正確的命名規(guī)范重寫代碼

當(dāng)重構(gòu)由非本地 Go 開發(fā)人員編寫的使用不同命名約定的代碼時，這非常有用：

注意到 ChatGPT 不僅為你提供更新后的代碼，還解釋了更改的原因。

4、使用正確的代碼風(fēng)格重寫代碼

當(dāng)審查（Review）和重構(gòu)（Rewrite）由非本地 Go 開發(fā)人員編寫的代碼時，這非常有幫助。ChatGPT 熟知 Go 語言代碼風(fēng)格，并將為你提供改進(jìn)代碼的建議，使其更易于閱讀：

5、簡化代碼

我們還可以讓 ChatGPT 簡化復(fù)雜的代碼，結(jié)果將是原始代碼的更緊湊版本，比如我們讓 ChatGPT 來簡化這段插入算法的示例代碼：

你可以對比運行下兩段代碼的運行結(jié)果，完全一致，但是 ChatGPT 提供的簡化版本顯然代碼更加簡潔。

6、編寫測試用例

這已經(jīng)成為我最喜歡的 ChatGPT 功能之一：詢問它是否可以幫助你測試一個函數(shù)，它將為你編寫測試用例。還是以上面這個插入排序函數(shù)為例：

Go 測試用例中一般是不包含 main 函數(shù)的，你可以讓 ChatGPT 中去掉 main 函數(shù)：

7、探索替代方案

有的時候，我們可能面對的是一段并不是性能最好的代碼實現(xiàn)，比如基準(zhǔn)測試后得出一段代碼性能并不是很理想，需要尋求另一種更好的實現(xiàn)方式。這個時候，可以讓 ChatGPT 給我們提供思路，當(dāng)你想要探索不同的解決方案時，這非常有用。

下面以一段斐波那契數(shù)列的遞歸實現(xiàn)優(yōu)化為例進(jìn)行演示：

這里 ChatGPT 給出了兩種替代方案，都很靠譜。

8、翻譯代碼

每當(dāng)你想要將某些代碼從一種語言轉(zhuǎn)換到另一種語言時，可以請求 ChatGPT 幫助翻譯，這對它來說是小菜一碟：

非常棒！

9、編寫文檔

這是我最喜歡的另一個技巧之一。詢問 ChatGPT 編寫代碼的文檔，它通常可以很好地完成。它甚至?xí)⑹褂檬纠ㄔ谖臋n中：

10、調(diào)試代碼&修復(fù)問題

如果你在代碼中遇到困難并且找不到錯誤，可以向 ChatGPT 尋求幫助。它可能只需要幾秒鐘就能夠找到錯誤原因所在。我不知道你的情況如何，但對我來說有時候會比 ChatGPT 要花費更長的時間。

我們以前面的下載圖片為例進(jìn)行演示：

不僅能找到問題，還能給出修復(fù)后的代碼，調(diào)試代碼的時間是不是大幅提升了呢？

當(dāng)然，ChatGPT 也有不靠譜的時候，如果修復(fù)后的代碼仍然存在問題，你也可以根據(jù)運行后的報錯，進(jìn)一步給 ChatGPT 進(jìn)行提示，讓它嘗試給出更準(zhǔn)確的答案，這部分之前主要是搜索引擎的使用場景，往后會隨著 ChatGPT 的日益智能被逐步替代。

11、正則表達(dá)式

寫正則表達(dá)式相信對很多開發(fā)者來說都是個很痛苦的事情，之前我們的做法通常是去搜索引擎搜索某個需求對應(yīng)正則表達(dá)式的寫法，然后去驗證，雖然也有類似 regex101 這樣的網(wǎng)站提供集常見模式、構(gòu)建、測試于一體的友好服務(wù)，但與 ChatGPT 這種能直接理解人類自然語言，同時又能嫁接和計算機溝通的機器人相比，顯然后者更加高效直接：

我覺得日后對于寫正則表達(dá)式的需求，可以直接交給 ChatGPT 了，這比自己摸索測試要高效很多，又可以提前下班的一個小技巧。

12、學(xué)習(xí)新語言/技能

以上的演示都是在一個語言內(nèi)部，現(xiàn)在，我們嘗試把我們的視野放得更廣一些，從 Go 語言到其他語言、到命令行、到前端、到數(shù)據(jù)庫、到全棧開發(fā)。

學(xué)習(xí)一門新語言/框架/技術(shù)可以直接找 ChatGPT 給我們推薦相關(guān)的網(wǎng)站、博客、圖片以及學(xué)習(xí)路線圖。比如我想要學(xué)習(xí) Rust：

我們還可以就某個資源進(jìn)一步提問，比如我想要了解《Rust 編程之道》這本書的目錄結(jié)構(gòu)和整體介紹：

最后，我們還可以讓 ChatGPT 給出 Rust 這門語言的學(xué)習(xí)路線圖 —— 如何從入門到精通：

非常棒。更多你感興趣的問題，可以直接問 ChatGPT，我這里就不詳細(xì)展開了。

13、命令行助手

Bash 命令

日常開發(fā)/運維過程中，經(jīng)常需要和各種終端命令打交道，有了 ChatGPT 后，就再也不用為這種瑣碎的事情耗費精力了，比如我想要找到 Linux 系統(tǒng)下某個目錄所有 jpg 文件，并輸出文件名到文本文件，可以這么做：

是不是非常高效直接？你可以問 ChatGPT 任何你需要的 Bash 命令的寫法，堪稱日常運維必備佳品，又一個可以提前下班的小技巧 Get。

當(dāng)然，你也可以輕松將其轉(zhuǎn)化為 Windows Dos 命令行的命令：

Git 命令

日常開發(fā)中另一個需要經(jīng)常打交道的就是 Git 命令了，不過如果你日常使用的都是圖形化的 Git 客戶端，可能使用頻率會低一些，和 Bash 命令一樣，我們可以詢問 ChatGPT 任何 Git 命令的寫法：

Vi 命令

現(xiàn)在使用 Vi 編輯器的程序員很少了，但是在 Linux 系統(tǒng)上運維，有的時候還是難免需要用到幾個 Vi 命令（Linux 默認(rèn)編輯器就是 Vi），有了 ChatGPT 之后，這就很簡單了，因為遇事不決問 ChatGPT 就好了：

除了 Vi 編輯器外，各種 IDE 的快捷鍵也不在話下：

ChatGPT 在手，那些各種命令行、快捷鍵的 Cheatsheet 以及桌面、桌墊都可以扔進(jìn)垃圾桶了。

14、數(shù)據(jù)庫助手

除了讓 ChatGPT 幫我們編寫各種命令行命令外，還可以讓它幫我們生成各種 SQL 語句，這是程序員日常提效的另一個重要領(lǐng)域。

創(chuàng)建數(shù)據(jù)表

比如我想要構(gòu)建一個博客網(wǎng)站，需要一張文章表：

如果想要指定字段，可以這么做（作為一個 NLP 模型，ChatGPT 能夠理解自然語言，沒有任何格式約束）：

可以為指定字段設(shè)置索引：

插入假數(shù)據(jù)

數(shù)據(jù)表創(chuàng)建好了之后，可以為其填充一些假數(shù)據(jù)用于測試：

如果想要通過代碼插入，方便基于需求對數(shù)據(jù)進(jìn)行調(diào)整，也可以讓 ChatGPT 生成對應(yīng)的代碼，甚至指定使用的 ORM 框架，比如 gorm：

查詢數(shù)據(jù)表

有了數(shù)據(jù)之后，就可以對數(shù)據(jù)進(jìn)行查詢了，比如，我們想要在某個側(cè)邊欄展示瀏覽數(shù)最高的 10 篇文章：

更復(fù)雜一點，我們需要在熱門文章列表展示作者信息，這需要連表查詢：

非常棒，是不是？更新、刪除這里就不一一演示了，你只需要通過自然語言提供你的需求，SQL 的事情讓 ChatGPT 幫你完成即可，提前下班小技巧 +N。

15、HTML & CSS

有了后端和數(shù)據(jù)庫之后，接下來向前端邁進(jìn)，完成面向 ChatGPT 實現(xiàn)全棧開發(fā)的最后一環(huán)。讓我們回到這篇教程的起點，從遠(yuǎn)程下載的圖片最后需要在頁面上展示，我們可以讓 ChatGPT 幫我們實現(xiàn)對應(yīng)的 HTML&CSS 代碼：

詳細(xì)代碼就不貼出來了，比較長，大家自己去體驗就好了，我們可以去 HTML Playgroud 去體驗下效果，看起來很不賴：

Tailwind CSS

當(dāng)然，如果你對 CSS 框架有要求，可以讓 ChatGPT 輕松幫你完成轉(zhuǎn)化工作：

16、JavaScript

僅有 HTML&CSS 是沒法和后端進(jìn)行交互的，所以需要引入 JavaScript，不過，面向 ChatGPT 編程也無需感知這些技術(shù)層面的術(shù)語，只需要通過自然語言給它提需求就好。

比如，假設(shè)這個卡片對應(yīng)的是視頻網(wǎng)站列表的某個視頻，鼠標(biāo)移上去就會自動播放視頻，我們直接把自然語言需求提供給 ChatGPT，它就會給我們生成對應(yīng)的 JavaScript 實現(xiàn)代碼：

不僅給出了整體實現(xiàn)的思路和代碼，還考慮到瀏覽器兼容性及對應(yīng)的處理方式，非常棒。

與后端交互

這里并沒有調(diào)用后端接口，完全是前端瀏覽器行為，為了保護(hù)視頻原始鏈接，這里我們將其改造為從后端 API 接口獲取視頻鏈接：

Vue 組件

當(dāng)然，和 CSS 一樣，這里也可以使用流行的 JavaScript 框架來替換原生的實現(xiàn)代碼，比如 Vue 或者 React，這里我們以 Vue 為例進(jìn)行演示：

完整代碼這里就不貼出來了，感興趣的同學(xué)可以自己去嘗試。甚至你還可以通過 TypeScript 實現(xiàn)這段代碼，只需要在需求中附加這個約束就好了。

17、面試準(zhǔn)備

好了，至此，我想，我已經(jīng)從前端、后端、數(shù)據(jù)庫、Devops 等維度覆蓋了面向 ChatGPT 編程實現(xiàn)全棧開發(fā)的方方面面，你已經(jīng)具備成為 Prompt 工程師（面向 ChatGPT 編程就是 Prompt 驅(qū)動）的理論基礎(chǔ)，勤加練習(xí)，就可以成為一名合格的 Prompt 工程師，接下來，就到了找工作的環(huán)節(jié)，在這個環(huán)節(jié)，我們?nèi)匀豢梢越柚?ChatGPT 幫我們做好面試準(zhǔn)備工作。

寫簡歷

提供你的履歷、技能、項目經(jīng)驗，讓 ChatGPT 自動幫你生成簡歷：

還不錯，給我提供了基本的模板，然后我們稍加填充和潤色就可以用了。

模擬面試

簡歷一旦通過篩選，就可以進(jìn)入面試環(huán)節(jié)了，我們可以根據(jù)對應(yīng)公司和崗位的要求（網(wǎng)上可以搜索到信息，或者咨詢 ChatGPT 也可以），讓 ChatGPT 給我們做模擬面試。

首先我們可以讓 ChatGPT 幫我們生成面試問題：

如果哪一題不會，可以立即問 ChatGPT：

非常方便，有沒有？你不妨可以試試看，通過 ChatGPT 準(zhǔn)備一次面試，然后看看效果。

題外話

在面向 ChatGPT 編程的過程中，需要記住以下兩點，這也是使用 ChatGPT 編程的兩個大前提：

• 我擁有超過X年的編程經(jīng)驗，我知道我在做什么。

• 我不相信別人的代碼（包括我的代碼），我也不相信 ChatGPT 的輸出。

使用 ChatGPT 不是說讓它替我完成所有工作，使用 ChatGPT 是為了讓我的產(chǎn)出和效率提升 10 倍。

ChatGPT 只是一個工具，而不是主導(dǎo)者，工具是給人使用的，能否最大化工具價值也在于使用它的人。主導(dǎo)者永遠(yuǎn)在人，在我。

何況，ChatGPT 也是有缺陷的。我發(fā)現(xiàn)它在處理代碼時會出錯，它不是總是對的，但這就是為什么我會在這里：監(jiān)督它。我們一起形成了一個更完美的聯(lián)盟。另外，那些詆毀這個工具的開發(fā)者正在忽略它的價值。

更多關(guān)于 ChatGPT 的學(xué)習(xí)實踐探討，請關(guān)注我或者點擊閱讀原文了解極客書房最新動態(tài)，你還可以加入極客進(jìn)階成長訓(xùn)練營解鎖更多福利：