Skip to content

LESSON_GUIDE.md

Latest commit

 

History

History
227 lines (192 loc) · 7.59 KB

LESSON_GUIDE.md

File metadata and controls

227 lines (192 loc) · 7.59 KB

場景 3：函數生成

學習目標

  • 掌握 Inline Chat (Ctrl+I) 的使用技巧
  • ** 初次體驗 Agent 模式**：對比手動 vs Agent 生成的效率差異
  • 學習用自然語言描述複雜需求
  • 體驗 Agent 協助編程的價值
  • 了解何時應該選擇 Agent 模式

場景說明

您需要建立一個 CSV 數據處理工具，包含多個數據處理函數。這個場景將展示傳統方法 vs Agent 方法的差異，讓您開始體驗 Agent 模式的優勢。

學習重點：體驗 Agent 協助編程

  • 傳統方式：使用 inline chat 逐個生成函數
  • Agent 方式：讓 Agent 主動設計整個函數庫

初始專案結構

03-function-generation/
├── README.md (本檔案)
├── index.html
├── style.css
├── data-processor.js (主要工作檔案)
├── sample-data.csv (測試數據)
└── demo-script.js (展示完成後的範例)

Demo 劇本

第一部分：傳統 Inline Chat 方式 (8分鐘)

步驟 1：使用 Inline Chat 逐個生成函數

  1. 開啟 data-processor.js
  2. 找到 parseCSV 函數（已有函數簽名）
  3. 選取整個函數（包含大括號）
  4. 按下 Ctrl+I 開啟 inline chat
  5. 輸入：
實作這個函數，解析 CSV 字串並返回物件陣列

步驟 2：使用 Copilot Chat 生成函數

  1. 開啟 Copilot Chat (Ctrl+Alt+I)
  2. 選擇 Ask 模式
  3. 點擊 圖示，選擇 data-processor.js 加入 context
  4. 輸入：
生成一個 validateEmail 函數，使用正則表達式驗證電子郵件格式，返回 boolean
  1. 複製生成的程式碼，貼到對應位置

步驟 3：體驗 Ghost Text 自動完成

  1. 找到 convertDateFormat 函數（已有 TODO 註解）
  2. 將游標放在註解下方空行
  3. 開始輸入：
const parts =
  1. 暫停 1-2 秒，觀察灰色的 Ghost Text
  2. 按 Tab 接受建議，繼續按 Tab 完成整個函數

快速練習：用同樣方式完成 formatCurrency 和 normalizePhoneNumber

步驟 4：使用 Inline Chat 生成複雜函數

  1. 找到 calculateStatistics 函數
  2. 選取整個函數（包含大括號）
  3. 按 Ctrl+I 開啟 inline chat
  4. 輸入：
實作統計函數，計算平均值、中位數、最大值、最小值
  1. 按 Enter 送出，接受生成的程式碼

步驟 5：使用 Copilot Chat 生成導出函數

  1. 開啟 Copilot Chat (Ctrl+Alt+I)
  2. 選擇 Ask 模式
  3. 點擊 圖示，選擇 data-processor.js 加入 context
  4. 輸入：
生成 exportToCSV 函數，將物件陣列轉換為 CSV 格式字串
  1. 複製生成的程式碼，貼到對應位置

步驟 6：觀察傳統方式的特點

  • 優點：精確控制每個函數
  • 缺點：需要逐個思考和生成，耗時較長
  • 缺點：可能遺漏重要的輔助函數
  • 缺點：函數之間缺乏整體協調

第二部分：初探 Agent 模式 (2分鐘)

步驟 7：體驗 Agent 模式的差異

  1. 開啟 Copilot Chat (Ctrl+Alt+I)
  2. 選擇 Agent 模式
  3. 點擊 圖示，選擇 data-processor.js 加入 context
  4. 輸入：
完成這個 CSV 數據處理工具的所有函數實作

使用模式：Agent 注意：Agent 模式不支援 @workspace

觀察重點：注意 Agent 如何自主分析檔案、識別未完成的函數、並主動完成實作

步驟 8：觀察 Agent 模式的優勢

  • 主動思考：Agent 會主動考慮你沒想到的需求
  • 整體設計：確保函數庫的完整性和一致性
  • 最佳實踐：自動包含錯誤處理、型別檢查等
  • 效率提升：一次完成整個函數庫設計

關鍵對比分析

傳統方式 Agent 模式
逐個生成函數 整體設計函數庫
被動回應需求 主動分析需求
可能遺漏功能 完整功能覆蓋
需要多次互動 一次完成設計
手動協調函數 自動確保一致性

重點提示

Inline Chat (Ctrl+I) 使用技巧：

  1. 必須選取範圍：需要先選取函數或程式碼區塊
  2. 即時生成：直接在需要的位置生成程式碼
  3. 上下文感知：會考慮周圍的程式碼
  4. 快速迭代：不滿意可以立即重新生成
  5. 保持焦點：不需要切換到聊天視窗

自然語言生成技巧：

  1. 詳細描述：清楚說明函數的輸入、輸出和邏輯
  2. 指定語言：明確說明使用的程式語言
  3. 包含範例：可以提供輸入輸出範例
  4. 錯誤處理：記得要求包含錯誤處理

函數命名最佳實踐：

  • 使用動詞開頭（get、set、calculate、validate）
  • 清楚表達函數功能
  • 遵循專案的命名慣例
  • 加上有意義的參數名稱

Demo 重點

  1. 展示 Ctrl+I 的便利性和速度
  2. 比較 inline chat 和 Chat 視窗的使用場景
  3. 示範如何透過良好命名獲得更好的建議
  4. 強調迭代改進的重要性
  5. 展示 Agent 在 UI 設計上的能力
  6. 對比傳統方式與 Agent 的效率差異

常用提示詞範例

數據驗證類：

生成一個驗證台灣手機號碼格式的函數
生成一個檢查信用卡號是否有效的函數（Luhn算法）
生成一個驗證統一編號的函數

數據轉換類：

生成一個將 snake_case 轉換為 camelCase 的函數
生成一個將數字轉換為中文大寫金額的函數
生成一個將 RGB 顏色轉換為 HEX 格式的函數

數據處理類：

生成一個去除陣列中重複元素的函數
生成一個深度合併兩個物件的函數
生成一個將扁平數據轉換為樹狀結構的函數

預期成果

完成本場景後，您應該：

  • 熟練使用 Ctrl+I 快速生成函數
  • 掌握自然語言生成函數的技巧
  • 了解如何透過函數簽名觸發自動完成
  • 建立一個功能完整的數據處理工具集

延伸練習

  1. 嘗試生成一個複雜的排序函數（支援多欄位排序）
  2. 使用 inline chat 重構現有函數
  3. 生成對應的單元測試函數
  4. 組合多個函數完成一個完整的數據處理流程

第三部分：UI 快速美化 (Agent 應用) (5分鐘)

步驟 9：使用 Agent 改進界面設計

  1. 開啟 Copilot Chat，選擇 Agent 模式
  2. 點擊 圖示，同時選擇：
    • index.html
    • style.css
  3. 輸入完整的設計需求：
請改進這個 CSV 數據處理工具的界面設計：
1. 優化步驟指引的視覺效果，讓當前步驟更突出
2. 改進工具卡片的懸停效果和動畫
3. 添加載入和處理數據時的動畫效果
4. 優化響應式設計，確保手機端體驗良好
5. 使用現代化的配色方案和陰影效果

使用模式：Agent

步驟 10：觀察 Agent 的設計決策

觀察重點：

  • Agent 會同時修改 HTML 結構和 CSS 樣式
  • 主動添加互動效果和動畫
  • 考慮使用者體驗的細節
  • 添加視覺反饋機制

步驟 11：測試改進後的界面

  1. 重新整理瀏覽器查看效果
  2. 測試各項互動：
    • 工具卡片的懸停效果
    • 處理數據時的視覺反饋
    • 在不同設備上的顯示效果

UI 設計 Agent 的優勢：

  • 整體性思考：不只改樣式，還會優化 HTML 結構
  • 使用者體驗：自動添加載入狀態、錯誤提示等
  • 現代化設計：應用最新的 CSS 技術和設計趨勢
  • 響應式考量：確保在各種設備上都有良好體驗

挑戰任務

使用學到的技巧，完成以下函數：

  1. mergeCSVFiles() - 合併多個 CSV 檔案
  2. pivotTable() - 將數據轉換為樞紐分析表
  3. detectAnomalies() - 檢測數據中的異常值