iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0

前言

在軟體開發領域,AI 正逐漸成為不可或缺的工具,是否曾經遇到過需要迅速撰寫程式碼,但時間不夠或對某些語言不熟悉的情況?對於開發人員來說,AI 不只是輔助工具,它能大幅提升工作效率,幫助解決複雜的問題,甚至自動生成程式碼。
這篇文章將帶你了解ChatGPT在程式生成中的應用,幫助你更有效率地優化開發流程。

ChatGPT程式生成

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

ChatGPT能為開發者做什麼

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

快速生成程式碼

ChatGPT 可以根據你的需求快速生成程式碼片段,像是HTML、CSS、Python、JavaScript 等語言。
範例:請ChatGPT生成登入表單畫面
https://ithelp.ithome.com.tw/upload/images/20240915/20112053qatoiHE5Q4.png
https://ithelp.ithome.com.tw/upload/images/20240915/20112053sUQBKR7ooH.png

解決程式碼問題

遇到程式錯誤或不知道如何實現某個功能時,ChatGPT 可以幫你分析問題,甚至提供修正的建議。
範例:如果輸出結果有錯誤,可以把程式碼貼到 ChatGPT,請它幫忙修正。修正後,ChatGPT 也會在下方解釋每個步驟。
https://ithelp.ithome.com.tw/upload/images/20240915/2011205368LguweFFm.png

程式碼優化建議

ChatGPT 能幫助你檢查程式碼,並提供優化建議,讓程式運行得更有效率。
範例:優化計算所有正整數總和的程式碼,ChatGPT 還會在下方詳細解釋。
https://ithelp.ithome.com.tw/upload/images/20240915/20112053B9c3Wi9wS3.png

學習新技術

如果需要快速學習一門新語言或框架,ChatGPT 可以提供簡單的教學,並指導你完成基本操作。
範例:假設你想學習 HTML,可以請 ChatGPT 提供基本的入門知識。ChatGPT 會列出相關的基礎內容,接著你可以針對這些項目進一步提問,獲得更多詳細資訊。
https://ithelp.ithome.com.tw/upload/images/20240915/20112053g2ILdisl5N.png

撰寫文件和註解

ChatGPT 能幫你撰寫清晰的程式碼註解或技術文件,確保專案文件易於理解。
範例:把程式碼貼上去後,請 ChatGPT 幫忙加上註解。ChatGPT 不僅會在程式碼中加入註解,還會在下方解釋程式碼的寫法。
https://ithelp.ithome.com.tw/upload/images/20240915/20112053neomgEEaZz.png

用 ChatGPT 製作網頁

使用提示詞生成網頁

利用 ChatGPT 製作網頁很簡單,你只要將網站的結構和設計概念告訴 ChatGPT,它就能生成對應的 HTML、CSS,甚至 JavaScript 程式碼。
Step1:在ChatGPT輸入Prompt:「幫我用bootstrap, html, css撰寫個人作品集落地頁「內容需要包含banner、關於我、作品展示區域像相簿一樣,一列四張圖共兩列、聯絡方式分為兩欄,左邊是一張圖,右邊是表單欄有姓名、信箱、描述欄位,下方footer需要有copyright」,主色為藍色作為配色」
https://ithelp.ithome.com.tw/upload/images/20240915/20112053ZYKwzwems6.png
除了生成程式碼外,ChatGPT 還會在最下方詳細解釋程式碼的作用,讓你更清楚每一段程式碼的功能和用途。
https://ithelp.ithome.com.tw/upload/images/20240915/20112053oPtW8ZoB1O.png
Step2:在生成的程式碼區塊右上角,點擊「複製程式碼」按鈕。
https://ithelp.ithome.com.tw/upload/images/20240915/20112053l4RBu7nDkx.png
Step3:你可以在JSBin中預覽生成的結果,將剛剛複製的程式碼貼到 HTML 標籤的區塊內,即可看到即時預覽效果。
https://ithelp.ithome.com.tw/upload/images/20240915/20112053Qzi0HpXwFm.png
Step4:接著,你可以根據生成的畫面自行調整樣式和新增內容,或者再次透過 ChatGPT 提問來製作符合你需求的網頁。在這裡,我簡單調整了「關於我們」和「我的作品」的標題間距,並將「我的作品」的背景改為白色。
調整前:
https://ithelp.ithome.com.tw/upload/images/20240915/20112053ERWYuv5cDg.png
調整後,關於我們有灰色底,我的作品為白色底
https://ithelp.ithome.com.tw/upload/images/20240917/20112053vc67KPOYrT.png

使用wireframe生成網頁

你也可以將設計好的 wireframe(線框圖)上傳到 ChatGPT,透過描述設計意圖或風格,ChatGPT 能根據這些資訊生成完整的程式碼,針對生成的程式碼在做微調修改,大幅縮短寫程式碼的時間。
Step1:上傳一張wireframe圖片(網址)及輸入「幫我用bootstrap, html, css切出靜態頁面」描述詞。
建議wireframe線稿不要太複雜,避免chatgpt無法正確切出需求畫面
https://ithelp.ithome.com.tw/upload/images/20240915/20112053IhSFNqQDL8.png
Step2:跟上面的Step2、Step3步驟一樣,將程式碼貼到JSBin中預覽生成的結果。
https://ithelp.ithome.com.tw/upload/images/20240915/20112053fPQ90kkW1U.png
Step3:生成的程式碼結果可能與您提供的參考圖不完全相同,你可以根據需求自行調整或加入更多區塊,也可以透過ChatGPT提問,提供更多細節或上傳具體的區塊圖片,讓ChatGPT幫你撰寫相應的程式碼,來滿足你的需求。
這裡請ChatGPT幫我撰寫這區塊的程式碼,上傳區塊圖片及Prompt:「幫我用bootstrap,html,css切出這區塊畫面」
https://ithelp.ithome.com.tw/upload/images/20240915/20112053QyzwzHG9ng.png
Step4:將程式碼貼到正確的位置,使頁面設計更接近參考圖。
https://ithelp.ithome.com.tw/upload/images/20240915/20112053M8DF5sqvkG.png

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

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

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

說明內容方式

  • 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 都可以成為開發人員的一個強大助手。


上一篇
[Day26]用AI工具,讓數據分析更簡單
下一篇
[Day28]GitHub Copilot:提升開發效率的AI程式助手
系列文
掌握生成式AI,讓AI成為你得力助手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言