[Day27]用ChatGPT輔助程式開發

ChatGPT程式生成概述

ChatGPT 的程式生成功能可以讓開發人員的工作變得更加輕鬆。只需要輸入簡單的指示或描述，ChatGPT 就能快速生成相應的程式碼，無論是網頁設計、後端開發，還是資料分析，ChatGPT 都能提供合適的程式碼範本。你可以像這樣問它：「幫我用javascript撰寫一個踩地雷小遊戲」，它會立即生成程式碼並解釋每個步驟，這讓開發過程變得更簡單，特別適合需要快速產出程式碼或對某些語言不熟悉的開發人員。

ChatGPT可以為開發人員做什麼

ChatGPT 是開發人員的強大助手，能幫助解決各種開發中的挑戰，讓工作變得更有效率。以下是 ChatGPT 可以幫助你的幾個方面：

快速生成程式碼

ChatGPT 可以根據你的需求快速生成程式碼片段，像是HTML、CSS、Python、JavaScript 等語言。

範例：請ChatGPT生成登入表單畫面

解決程式碼問題

遇到程式錯誤或不知道如何實現某個功能時，ChatGPT 可以幫你分析問題，甚至提供修正的建議。

範例：如果輸出結果有錯誤，可以把程式碼貼到 ChatGPT，請它幫忙修正。修正後，ChatGPT 也會在下方解釋每個步驟。

程式碼優化建議

ChatGPT 能幫助你檢查程式碼，並提供優化建議，讓程式運行得更有效率。

範例：優化計算所有正整數總和的程式碼，ChatGPT 還會在下方詳細解釋。

學習新技術

如果需要快速學習一門新語言或框架，ChatGPT 可以提供簡單的教學，並指導你完成基本操作。

範例：假設你想學習 HTML，可以請 ChatGPT 提供基本的入門知識。ChatGPT 會列出相關的基礎內容，接著你可以針對這些項目進一步提問，獲得更多詳細資訊。

撰寫文件和註解

ChatGPT 能幫你撰寫清晰的程式碼註解或技術文件，確保專案文件易於理解。

範例：把程式碼貼上去後，請 ChatGPT 幫忙加上註解。ChatGPT 不僅會在程式碼中加入註解，還會在下方解釋程式碼的寫法。

用 ChatGPT 製作網頁

使用提示詞生成網頁

利用 ChatGPT 製作網頁很簡單，你只要將網站的結構和設計概念告訴 ChatGPT，它就能生成對應的 HTML、CSS，甚至 JavaScript 程式碼。

Step1：在ChatGPT輸入Prompt：「幫我用bootstrap, html, css撰寫個人作品集落地頁「內容需要包含banner、關於我、作品展示區域像相簿一樣，一列四張圖共兩列、聯絡方式分為兩欄，左邊是一張圖，右邊是表單欄有姓名、信箱、描述欄位，下方footer需要有copyright」，主色為藍色作為配色」

除了生成程式碼外，ChatGPT 還會在最下方詳細解釋程式碼的作用，讓你更清楚每一段程式碼的功能和用途。

Step2：在生成的程式碼區塊右上角，點擊「複製程式碼」按鈕。

Step3：你可以在JSBin中預覽生成的結果，將剛剛複製的程式碼貼到 HTML 標籤的區塊內，即可看到即時預覽效果。

Step4：接著，你可以根據生成的畫面自行調整樣式和新增內容，或者再次透過 ChatGPT 提問來製作符合你需求的網頁。在這裡，我簡單調整了「關於我們」和「我的作品」的標題間距，並將「我的作品」的背景改為白色。

調整前：

調整後，關於我們有灰色底，我的作品為白色底

使用wireframe生成網頁

你也可以將設計好的 wireframe（線框圖）上傳到 ChatGPT，透過描述設計意圖或風格，ChatGPT 能根據這些資訊生成完整的程式碼，針對生成的程式碼在做微調修改，大幅縮短寫程式碼的時間。

Step1：上傳一張wireframe圖片(網址)及輸入「幫我用bootstrap, html, css切出靜態頁面」描述詞。

建議wireframe線稿不要太複雜，避免chatgpt無法正確切出需求畫面

Step2：跟上面的Step2、Step3步驟一樣，將程式碼貼到JSBin中預覽生成的結果。

Step3：生成的程式碼結果可能與您提供的參考圖不完全相同，你可以根據需求自行調整或加入更多區塊，也可以透過ChatGPT提問，提供更多細節或上傳具體的區塊圖片，讓ChatGPT幫你撰寫相應的程式碼，來滿足你的需求。

這裡請ChatGPT幫我撰寫這區塊的程式碼，上傳區塊圖片及Prompt：「幫我用bootstrap,html,css切出這區塊畫面」

Step4：將程式碼貼到正確的位置，使頁面設計更接近參考圖。

比較o1-mini 與 o1-preview寫程式

在使用聊天機器人輔助寫程式時，模型回應的風格和效率，會直接影響你解決問題的速度和深入程度。以下使用兩個不同版本的 ChatGPT 模型——o1-mini 和 o1-preview，並分析它們在回答程式碼問題時的差異。

下面的範例是我在撰寫表單功能時出現錯誤，向 o1-mini 和 o1-preview 提問後得到的回應。透過比較它們在說明方式、完整度、重點和思考速度上的不同，幫助你挑選最適合自己需求的模型。

說明內容方式

• o1-mini：
• • 說明較為簡潔直接，重點放在解決當前的問題，不會延伸太多到背景和理論部分。
  • 內容偏向於行動指導，直接指出如何修改或增補代碼，以解決具體的錯誤，較少提供深入的上下文分析。
  • 偏向於“快速修復”的風格，讓開發者能夠快速實施解決方案。
• o1-preview：
• • 說明更詳細且包含更多背景知識，會針對錯誤產生的原因做較為深入的分析。
  • 通常會提供更長的解釋，幫助開發者理解問題背後的邏輯，甚至會提供代碼的替代寫法，防止未來類似問題的發生。
  • 偏向於“全局解決”，不僅限於當前的錯誤，還會涉及代碼結構的優化。

完整度

• o1-mini：
• • 回答的完整度相對較低，重點放在解決方案，而不會進一步解釋每一步的具體原因。
  • 主要提供具體的代碼片段修改或添加的指示，快速解決當前錯誤，但缺乏理論層面的支持。
• o1-preview：
• • 回答的完整度高，涵蓋了解決方案以及錯誤的背景分析。
  • 除了解決當前問題外，還會建議如何改善整體的代碼質量，比如優化資料初始化邏輯或增強防錯能力。
  • 更關注於代碼的穩定性和長期可維護性，會提供進一步的修改建議來避免未來錯誤。

著重點

• o1-mini：
• • 著重於解決當下的錯誤，目標是快速修復，讓代碼能夠正確執行。
  • 不會花太多時間在錯誤的根本原因上，重點是讓使用者能儘快看到效果。
• o1-preview：
• • 著重於錯誤的根本原因分析，以及防止未來可能出現的問題。
  • 更加關注代碼的可讀性、可維護性，以及避免潛在的未來問題。

思考速度

• o1-mini：
• • 思考過程較為快速，直接產出解決方案，提供具體的代碼修正建議。適合那些只需要解決單一問題、快速實施解決方案的使用者。
• o1-preview：
• • 思考速度稍慢，因為它會花更多時間在問題的背景、可能的影響以及防止錯誤再次發生的策略上。這種模型更適合需要了解問題全貌和長期優化的情況。

比較之後發現，o1-mini 更傾向於快速解決問題，適合需要短時間內解決錯誤的情況；而 o1-preview 回答更全面，會提供詳細的解釋和背景知識，適合那些想要深入了解問題，並對代碼進行長期優化的人。

是否取代開發人員？

雖然 AI 工具越來越強大，能自動生成程式碼並解決技術問題，但它還是輔助工具。開發工作不僅僅是寫程式碼，還包括系統設計、架構規劃、問題解決和創意發揮，這些都需要人類的專業知識和經驗。

所以，AI 更像是開發人員的好幫手，可以幫助提升效率、減少錯誤，但不會完全取代人類的角色。開發人員可以利用 AI 來處理重複性高的工作，讓自己有更多時間專注在更具創意和挑戰性的部分。

總結

AI 可以幫助開發人員完成許多任務，但它仍無法取代人類的創造力和批判性思維，對於開發人員來說，學會如何與 AI 工具協作，是提升工作效率的關鍵。無論是生成程式碼還是進行程式設計，AI 都可以成為開發人員的一個強大助手。