現今網頁開發流程中，AI 輔助工具如 ChatGPT 和 GitHub Copilot 已成為不可或缺的角色。本文旨在提供一個實用的，引導讀者瞭解如何運用這些工具提升開發效率。從 ChatGPT 的基本操作到 Copilot 的程式碼生成技巧，文章將逐步深入，並以電子商務網站的開發案例，實際展現如何結合 AI 工具構建網頁應用程式。透過清晰的程式碼範例和解說，讀者將學習如何撰寫有效的提示，以及如何根據需求調整 AI 生成的程式碼，最終達到事半功倍的開發效果。
使用 AI 助手：ChatGPT 與 GitHub Copilot 簡介
入門：ChatGPT 使用方法
對於非開發者而言，使用 ChatGPT 相當簡單，只需存取 ChatGPT 網站或安裝 Android/iOS 應用程式並登入 OpenAI 帳戶即可開始使用，無需額外安裝步驟。若需詳細操作步驟，請參考 OpenAI 的官方檔案和網站。
熟悉 ChatGPT 介面
登入 OpenAI 帳戶後，即可開始使用 ChatGPT。以下是介面主要功能的介紹：
- 新對話與隱藏側邊欄按鈕：螢幕左側的「新對話」按鈕可用於隨時開始新的對話，無需任何前後文。側邊欄亦可隱藏。
- 對話歷史：左側邊欄記錄了之前的對話內容，可進行編輯、分享或刪除，亦可選擇關閉對話歷史功能。
- 帳戶設定：點選左下角的帳戶名稱，可存取帳戶資訊，包括設定、登出、幫助和常見問題。若未訂閱 ChatGPT Plus，則會顯示升級按鈕。
- 使用者提示：使用者的問題或提示顯示在對話視窗中間，並附有帳戶頭像或縮寫。
- ChatGPT 回應：ChatGPT 的回應顯示在左側帶有標誌。右側提供「複製」、「大拇指向上」和「大拇指向下」等選項，可將文字複製到剪貼簿並提供回應準確性的反饋。
- 重新生成回應：若遇到問題或不滿意的答案，可點選「重新生成回應」，ChatGPT 將根據最新的提示生成新的回覆。
- 文字輸入區域：在此輸入提示和問題。
- ChatGPT 版本資訊：在文字輸入區域下方，會顯示免責宣告：「ChatGPT 可能會犯錯，請檢查重要資訊。」目前已不再顯示 ChatGPT 模型版本資訊。
自定義指令與提示
若擁有高階版本，可在個人資料層級設定自定義指令，將組態套用到所有新對話中。
撰寫第一個提示
只需使用自然語言提問並與 ChatGPT 對話，便可開始取得知識。例如：
請用條列式說明機器學習的流程。
ChatGPT 將提供類別似以下的回應（注意：每次的回應都不盡相同）。
本章重點回顧
本章介紹了 GitHub Copilot 和 ChatGPT，包括其功能、工作原理及使用方法。同時探討了它們的能力與限制，並示範如何安裝和使用這些工具，以及如何透過提示進行互動。
建構應用程式的外觀：HTML 與 Copilot 簡介
建構網頁應用程式涉及使用 HTML 進行標記、CSS 進行樣式設計，以及 JavaScript 增加互動性。從靜態網頁發展至今，我們已能使用框架構建大型應用程式。無論使用框架還是函式庫，基礎依然是 HTML、CSS 和 JavaScript。善用 AI 助手不僅能提升效率，還需要具備相關領域的工作知識。
方法論與實踐
本文將遵循特定的方法論：
- 定義商業問題：首先討論需要解決的商業問題。
- 劃分問題：將問題分解為更易管理的部分。
- 制定提示策略：根據問題型別，建議適當的提示策略。
本章提到的提示輸出可能會根據訓練資料、已開啟的檔案以及之前的輸入內容而有所不同。
使用 HTML 和 Copilot 構建應用程式外觀
在本章中，我們將探討如何利用 GitHub Copilot 生成基本的 HTML 程式碼，並應用不同的提示技巧來獲得所需的內容。
商業問題：電子商務
電子商務是一個非常有趣的領域，存在許多待解決的問題。例如，您需要提供一個技術平台，讓使用者能夠購買商品。這意味著您需要建立各種解決方案來處理付款、商品管理、物流運輸等。
從資料的角度來看，您需要分析客戶行為，以確保庫存數量正確、商品價格合理等。簡而言之，電子商務是一個複雜且有趣的領域，本文將會多次提到它。
問題領域
本章重點關注網頁開發人員的角色，因此讓我們討論一下電子商務中網頁開發人員面臨的問題。通常，作為網頁開發人員，您需要解決兩個到三個主要角色的問題：
- 客戶：客戶可以瀏覽和購買商品、管理帳戶等。
- 後台：公司需要技術解決方案來管理庫存、商品資訊、付款解決方案等。
- 資料儲存：網頁開發人員需要確保資料可以儲存在產品、訂單和客戶資訊等領域。
問題分解：識別功能
為了將問題領域分解為可以寫入提示輸入的內容，讓我們再次關注客戶和後台這兩個角色。以下是將問題分解為可構建的功能的嘗試。
讓我們從客戶角色和「身份驗證」這個主要領域開始。讓我們嘗試將其分解為客戶應該能夠執行的操作。以下是我們應該支援的操作：
- 登入：使用者應該能夠登入。
- 登出：使用者應該能夠登出。
- 建立新使用者：應該能夠建立新使用者。
- 更新密碼：現有使用者應該能夠更新密碼。
- 重設密碼：如果使用者忘記密碼，應該能夠以安全的方式重設密碼。
現在，我們已經有一套「身份驗證」領域的功能，並且對應該支援的不同操作有了更好的理解。在開始使用 AI 助手之前，您應該將問題領域分解到這個詳細程度。
提示策略
那麼，我們如何選擇提示策略？我們的策略是關於如何提示；我們會寫一個提示還是多個短提示？這也與我們如何使用所選的 AI 助手 GitHub Copilot，以及如何將提示輸入到工具中有關。
在 GitHub Copilot 中，有兩種主要的方法可以寫提示：使用聊天功能或直接在文字檔案中輸入註解或程式碼。在本章中，我們將使用後一種方法，直接在文字檔案中輸入。我們的經驗是，這兩種方法都是有效的，您可以在解決問題的過程中交替使用它們。
網頁結構
網頁是由 HTML 定義的，所有這些頁面都由稱為檔案物件模型（DOM）的樹狀結構組成。DOM 具有以下部分：
<html>
內容解密：
這段程式碼定義了 HTML 檔案的根元素 <html>，它是整個 HTML 檔案的容器。所有其他 HTML 元素都包含在 <html> 元素中。
使用 GitHub Copilot 生成 HTML 程式碼
在接下來的章節中，我們將展示如何在開啟的文字檔案中生成標記程式碼。在本章結束時，您將看到我們如何重新審視電子商務使用案例。
@startuml
skinparam backgroundColor #FEFEFE
skinparam defaultTextAlignment center
skinparam rectangleBackgroundColor #F5F5F5
skinparam rectangleBorderColor #333333
skinparam arrowColor #333333
title 使用 GitHub Copilot 生成 HTML 程式碼
rectangle "瀏覽商品" as node1
rectangle "購買商品" as node2
rectangle "檢視商品詳情" as node3
rectangle "付款" as node4
node1 --> node2
node2 --> node3
node3 --> node4
@enduml
此圖示展示了客戶與電子商務網站之間的互動流程，包括瀏覽商品、購買商品、檢視商品詳情和付款等操作。
圖表解密：
這個圖表顯示了客戶在電子商務網站上的操作流程。首先，客戶可以瀏覽商品列表，然後檢視特定商品的詳情。如果客戶決定購買商品，則會進入訂單處理流程，最終完成付款。這個流程展示了客戶與網站之間的互動關係。
使用 HTML 和 GitHub Copilot 構建應用程式外觀
HTML 基礎結構
首先，我們來瞭解 HTML 的基本結構。一個標準的 HTML 檔案由根元素 <html>開始，內部包含 <head> 和 <body> 兩個主要部分。<head> 部分用於定義頁面的後設資料，如標題、樣式表連結等；而 <body> 部分則包含頁面的可見內容。
<html>
<head>
</head>
<body>
</body>
</html>
內容解密：
<html>是整個 HTML 檔案的根元素。<head>包含了與檔案相關的後設資料，如標題、字元編碼宣告、外部樣式表或指令碼。<body>包含了檔案的可見內容，如文字、影像、超連結等。
結合 GitHub Copilot 提升開發效率
GitHub Copilot 是一款由 GitHub 和 OpenAI 合作開發的 AI 工具，可以根據上下文提供程式碼建議。要使用 Copilot，我們需要在檔案中新增註解作為提示。
簡單提示
讓我們嘗試在 HTML 檔案中新增一個簡單的提示：
<!-- create a page with a title and list -->
<HTML
內容解密：
- 在 HTML 檔案中，我們使用
<!-- -->來新增註解，這些註解可以作為 GitHub Copilot 的提示。 - 輸入
<HTML後，Copilot 將根據上下文生成相應的 HTML 結構。
Copilot 可能會生成類別似以下的程式碼：
<html lang="en">
<head>
<title>My First Page</title>
</head>
<body>
<h1>My First Page</h1>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</body>
</html>
內容解密：
- Copilot 根據提示生成了一個基本的 HTML 結構，包括標題和列表。
- 它自動補全了必要的標籤，如
<title>、<h1>和<ul>。
提供更多上下文以獲得更好的輸出
透過提供更多上下文，我們可以獲得更精確的程式碼生成結果。例如：
<!-- create a page with a title and list, each item should have fields title, description and completed -->
內容解密：
- 在這個提示中，我們明確了列表專案的結構，包括標題、描述和完成狀態。
- 這使得 Copilot 能夠生成更符合預期的程式碼。
生成的程式碼可能如下所示：
<html>
<head>
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<ul>
<li>
<h2>Item 1</h2>
<p>Item 1 description</p>
<p>Completed: <input type="checkbox" checked></p>
</li>
<li>
<h2>Item 2</h2>
<p>Item 2 description</p>
<p>Completed: <input type="checkbox"></p>
</li>
</ul>
</body>
</html>
內容解密：
- Copilot 正確理解了我們的意圖，生成了一個 Todo List 的結構。
- 它為每個列表項生成了標題、描述和完成狀態的 checkbox。
接受提示建議以擴充套件功能
當我們提供更詳細的提示時，Copilot 可以生成更複雜的結構。例如：
<!-- create a page with a header, main part, and a footer. Use dark theme. -->
內容解密：
- 在這個提示中，我們要求 Copilot 生成一個具有頁首、主體和頁尾的頁面，並使用暗色主題。
- 這使得 Copilot 能夠提供更全面的程式碼建議。
Copilot 可能會生成一系列的註解，建議進一步的改進，如使用 Flexbox 佈局和 CSS 變數等。
內容解密：
- Copilot 的建議超出了原始提示，提供了更多關於頁面佈局和樣式的建議。
- 這表明 Copilot 不僅能理解我們的直接需求，還能提供額外的最佳化建議。
利用 HTML 和 Copilot 構建應用程式的外觀
在現代網頁開發中，使用合適的工具可以大幅提升開發效率。GitHub Copilot 是一個強大的 AI 工具，能夠幫助開發者快速生成 HTML 程式碼，從而專注於更高層次的設計和功能實作。
初始 HTML 結構
首先，我們來建立一個基本的 HTML 結構。以下是一個簡單的範例，展示如何使用 Copilot 生成基本的網頁結構：
<!-- 使用 CSS 變數設定背景顏色 -->
<html>
<head>
<title>範例頁面</title>
<link rel="stylesheet" href="style.css">
</head>
<header>
<nav>
<a href="#">首頁</a>
<a href="#">關於我們</a>
<a href="#">聯絡我們</a>
</nav>
</header>
<body>
<main>
<section>
<h1>第一部分</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
<img src="https://picsum.photos/200/300" alt="隨機圖片">
</section>
<!-- 更多部分內容 -->
</main>
<footer>
<!-- 底部欄內容 -->
<div>
<h1>第一欄</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
<img src="https://picsum.photos/200/300" alt="隨機圖片">
</div>
<!-- 更多欄位內容 -->
</footer>
</body>
</html>
內容解密：
- HTML 結構：上述程式碼展示了一個基本的 HTML 結構，包括
header、main和footer部分。 - CSS 參照：透過
<link rel="stylesheet" href="style.css">參照外部 CSS 檔案，用於樣式設計。 - 導航欄：在
header中建立了一個簡單的導航欄，包含三個連結。 - 主要內容：在
main中定義了多個section，每個包含標題、段落和圖片。 - 底部欄：在
footer中建立了多個欄位，用於展示額外資訊。
電子商務網站的實作
接下來，我們將使用 Copilot 來建立一個電子商務網站所需的各個頁面。
登入頁面
首先，建立一個 login.html 檔案，並在頂部新增以下提示：
<!-- 一個包含使用者名稱和密碼輸入框、登入按鈕以及建立使用者和忘記密碼連結的頁面，應適配手機和桌面裝置 -->
Copilot 將生成類別似以下的程式碼：
<html>
<head>
<title>登入</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="container">
<div class="login">
<h1>登入</h1>
<form action="login.php" method="post">
<input type="text" name="username" placeholder="使用者名稱" required="required" />
<input type="password" name="password" placeholder="密碼" required="required" />
<button type="submit" class="btn btn-primary btn-block btn-large">登入</button>
</form>
<a href="register.php">建立使用者</a>
<a href="forgot.php">忘記密碼</a>
</div>
</div>
</body>
</html>
內容解密：
- 登入表單：建立了一個包含使用者名稱和密碼輸入框的表單，以及一個登入按鈕。
- 連結：增加了建立使用者和忘記密碼的連結。
- 樣式參照：參照了外部 CSS 檔案
login.css用於樣式設計。
產品列表頁面
建立一個 products.html 檔案，並新增以下提示：
<!-- 一個包含多個產品的列表頁面，每個產品包含文字、詳情頁連結、隨機圖片、描述和“加入購物車”按鈕 -->
Copilot 將生成類別似以下的程式碼：
<html>
<head>
<title>產品列表</title>
<link rel="stylesheet" href="css/products.css">
</head>
<body>
<div class="container">
<div class="products">
<h1>產品列表</h1>
<!-- 多個產品項 -->
<div class="product">
<div class="product-image">
<img src="https://picsum.photos/200/300" alt="產品圖片">
</div>
<div class="product-text">
<h2>產品名稱</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
<a href="product.php">檢視詳情</a>
<button type="submit" class="btn btn-primary btn-block btn-large">加入購物車</button>
</div>
</div>
<!-- 更多產品項 -->
</div>
</div>
</body>
</html>
內容解密：
- 產品列表：建立了一個包含多個產品項的列表，每個產品項包含圖片、名稱、描述和操作按鈕。
- 樣式設計：透過參照外部 CSS 檔案
products.css進行樣式設計。