Skip to content

Commit 677d777

Browse files
yulin0629yulin0629
committed
feat: 實作場景 1-4 雙狀態展示系統
- 新增 demos/ 目錄存放完成版本 - 場景 1：從空白功能到完整待辦事項應用 - 場景 2：展示 @workspace 深度分析能力 - 場景 3：從基礎結構到完整 CSV 處理工具 - 場景 4：從 Bug 滿滿到完美運作的購物車 - 實作雙按鈕 UI：🔴 初始狀態 / ✅ 完成狀態 - 所有功能經 Playwright 深度測試驗證 為學員提供清楚的學習前後對比展示。
1 parent 784fc2d commit 677d777

20 files changed

Lines changed: 3549 additions & 8 deletions

‎demos/01-completed/LESSON_GUIDE.md‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
# 場景 1：初次對話體驗
2+
3+
## 學習目標
4+
- 了解 GitHub Copilot 的**基本 Chat 功能**
5+
- 學習如何使用 **ask** 功能進行對話
6+
- **理解 @workspace 的重要性和實際差異**
7+
- 掌握**程式碼自動完成**的基礎操作
8+
- 熟悉 Copilot Chat 介面和快捷鍵
9+
- **建立使用 Copilot 的基礎認知**（為後續 Agent 學習打基礎）
10+
11+
## 場景說明
12+
您是一位剛開始使用 GitHub Copilot 的開發者，想要了解這個工具的基本功能。這個階段**專注於傳統 Chat 功能**（0% Agent），通過簡單的對話體驗建立基礎認知，特別是 **@workspace 與一般對話的重要差異**。
13+
14+
## 初始專案結構
15+
```
16+
01-first-experience/
17+
├── README.md (本檔案)
18+
├── index.html
19+
├── style.css
20+
└── script.js (空白檔案，待完成)
21+
```
22+
23+
## 事前準備：選擇正確的模型
24+
25+
在開始之前，請確認使用 **GPT-4.1** 模型：
26+
1. 開啟 Copilot Chat (`Ctrl+Alt+I`)
27+
2. 點擊 Chat 面板右上角的 設定圖示
28+
3. 在 Model 選項中選擇 **GPT-4.1**
29+
4. 確認顯示 "Using GPT-4.1"
30+
31+
**為什麼選擇 GPT-4.1？**
32+
- 更準確的程式碼生成
33+
- 更好的專案理解能力
34+
- Edit 模式效果最佳
35+
36+
## Demo 劇本
37+
38+
### 階段 1：快速熟悉 Chat + @workspace 對比 (3分鐘)
39+
40+
#### 步驟 1：開啟並體驗基本 Chat
41+
1. 在 VS Code 中開啟本資料夾 (`01-first-experience/`)
42+
2. 按下 `Ctrl+Alt+I` (或 `Cmd+Option+I`) 開啟 Copilot Chat
43+
3. **一般提問**：
44+
```
45+
你好！我想建立一個簡單的待辦事項網頁，請告訴我基本的檔案結構和需要的功能？
46+
```
47+
**使用模式：Ask**
48+
49+
#### 步驟 2：體驗 @workspace 的差異
50+
**開啟新對話**
51+
- 點擊 Chat 面板右上角的「+」或「New Chat」按鈕
52+
- 或使用快捷鍵：`Ctrl+L`
53+
54+
```
55+
@workspace 我想了解這個專案的結構，請告訴我現在有哪些檔案？
56+
```
57+
**使用模式：Ask**
58+
59+
**觀察差異**：
60+
- **一般對話**：給通用建議
61+
- **@workspace**：能看到實際檔案，給出針對性回答
62+
63+
### 階段 2：核心 Chat 功能展示 (4分鐘)
64+
65+
#### 步驟 3：**了解專案結構**
66+
```
67+
@workspace 這個專案有哪些檔案？每個檔案的用途是什麼？
68+
```
69+
**使用模式：Ask**
70+
71+
#### 步驟 4：**獲取學習建議**
72+
```
73+
@workspace 我是初學者，想了解待辦事項應用通常有哪些功能？學習 JavaScript 時應該注意什麼？
74+
```
75+
**使用模式：Ask**
76+
77+
### 階段 3：程式碼自動完成體驗 (3分鐘)
78+
79+
#### 步驟 5：體驗 Ghost Text（僅體驗，不深入實作）
80+
1. 開啟 `script.js` 檔案
81+
2. 在檔案最下方（註解後面）開始輸入：
82+
- 輸入：`// 學習 GitHub Copilot`，按 Enter 換行
83+
- 在下一行輸入：`console.log(`
84+
- 暫停 1-2 秒，觀察灰色的 Ghost Text 建議
85+
3. 看到建議後，按 `Tab` 鍵接受
86+
4. 繼續輸入 `// 待辦事項`，觀察新的建議
87+
88+
**重點觀察**：
89+
- Ghost Text 會以灰色文字顯示建議
90+
- 按 `Tab` 接受，按 `Esc` 拒絕
91+
- 建議會根據你的註解和程式碼上下文改變
92+
93+
### 階段 4：Edit 模式實作 (5分鐘)
94+
95+
#### 步驟 6：準備 Edit 模式的 Context
96+
**開啟新對話**
97+
1. 在 Chat 視窗中，點擊輸入框左側的 **** 圖示
98+
2. 選擇「Add Files」
99+
3. 勾選以下檔案：
100+
- `index.html` (重要！讓 Copilot 了解 DOM 結構)
101+
- `script.js` (要編輯的檔案)
102+
4. 確認檔案已加入（會顯示在輸入框上方）
103+
104+
**為什麼要加入 index.html？**
105+
讓 Copilot 看到按鈕和列表的 ID，才能生成正確的程式碼
106+
107+
#### 步驟 7：使用 Edit 模式完成功能
108+
1. 在 Chat 上方選擇 **Edit** 模式（預設是 Ask）
109+
2. 輸入簡單的指令：
110+
```
111+
實作待辦事項的新增功能，點擊按鈕要能新增項目到列表
112+
```
113+
**使用模式：Edit**
114+
115+
3. Copilot 會顯示修改預覽
116+
4. 檢視程式碼，確認使用了正確的 ID (`todoInput`, `addButton`, `todoList`)
117+
5. 點擊 **Accept** 接受修改
118+
119+
#### 步驟 8：測試成果
120+
1. 開啟 `index.html`：
121+
- **方法 1**：在檔案總管找到檔案，直接拖曳到瀏覽器
122+
- **方法 2**：如果有安裝 Live Server 擴充功能，右鍵選擇「Open with Live Server」
123+
- **方法 3**：在檔案總管雙擊 `index.html`，用預設瀏覽器開啟
124+
2. 測試新增待辦事項功能：
125+
- 輸入文字
126+
- 點擊「新增」按鈕
127+
- 確認項目出現在列表中
128+
129+
**Edit 模式關鍵學習**：
130+
- 必須加入相關檔案作為 context
131+
- Copilot 會根據 context 生成符合專案的程式碼
132+
- 簡單的 prompt 就能完成功能
133+
134+
### 階段 5：UI 美化體驗 (5分鐘)
135+
136+
#### 步驟 9：使用 @workspace 分析現有樣式
137+
**開啟新對話**
138+
1. 使用 @workspace 了解現有設計：
139+
```
140+
@workspace 請分析 style.css 的設計風格，包括配色、排版和整體視覺風格
141+
```
142+
**使用模式：Ask**
143+
144+
#### 步驟 10：獲取樣式改進建議
145+
```
146+
@workspace 我想讓這個待辦事項應用看起來更現代化和專業，可以建議一些具體的 CSS 改進嗎？比如：
147+
- 添加漸變背景
148+
- 改進按鈕的互動效果
149+
- 添加動畫和過渡效果
150+
- 提升整體視覺層次
151+
```
152+
**使用模式：Ask**
153+
154+
#### 步驟 11：使用 Edit 模式實作樣式改進
155+
1. 點擊 圖示，選擇 `style.css` 檔案
156+
2. 切換到 **Edit** 模式
157+
3. 輸入具體的修改需求：
158+
```
159+
請幫我修改 style.css，實作以下改進：
160+
1. 給 body 添加現代化的漸變背景
161+
2. 為 .container 添加柔和的陰影和模糊效果
162+
3. 改進按鈕樣式，添加懸停和點擊的動畫效果
163+
4. 給待辦事項添加滑入動畫，讓新增項目更有動感
164+
5. 優化整體配色，使用更專業的色彩搭配
165+
```
166+
**使用模式：Edit**
167+
168+
4. 檢視 Copilot 的修改預覽
169+
5. 點擊 **Accept** 接受修改
170+
171+
#### 步驟 12：測試視覺效果
172+
1. 重新整理瀏覽器查看效果
173+
2. 測試各種互動：
174+
- 按鈕懸停效果
175+
- 新增項目的動畫
176+
- 整體視覺層次的改善
177+
178+
**樣式修改關鍵學習**：
179+
- Copilot 能理解設計意圖並轉化為 CSS
180+
- 可以一次性處理多個樣式需求
181+
- 生成的程式碼包含現代 CSS 特性（動畫、漸變、陰影等）
182+
183+
### 重點觀察
184+
185+
#### **@workspace vs 一般對話差異**：
186+
- **一般對話**：籠統建議，不了解專案脈絡
187+
- **@workspace**：針對性強，程式碼可直接使用
188+
- **效率差異**：@workspace 節省 50-70% 的溝通成本
189+
190+
#### **Chat 使用體驗**：
191+
- **回應速度**：了解等待時間，學會耐心
192+
- **需要明確指導**：問題越具體，答案越有用
193+
- **逐步建構**：傳統模式需要分步驟完成專案
194+
195+
#### **樣式修改體驗**：
196+
- **視覺即時反饋**：修改立即可見，增強學習成就感
197+
- **現代化設計**：Copilot 了解當前設計趨勢
198+
- **完整性思考**：不只改單一元素，而是整體提升
199+
200+
## 重點提示
201+
202+
### **@workspace 最佳實踐**：
203+
1. **永遠使用 @workspace**：這是最重要的聊天參與者
204+
2. **讓 AI 先了解專案**：讓它分析現有結構
205+
3. **要求針對性建議**：避免通用範例程式碼
206+
207+
### **Ask 模式使用技巧**：
208+
1. **明確具體**：問題越具體，答案越精準
209+
2. **提供上下文**：說明您的需求和限制
210+
3. **迭代改進**：根據回答繼續深入詢問
211+
212+
### **常用提示詞範例**：
213+
- `@workspace 請分析這個專案的結構`
214+
- `@workspace 如何優化這個函數的效能？`
215+
- `@workspace 這個錯誤在我的專案中如何解決？`
216+
- `@workspace 根據現有架構提供最佳實踐建議`
217+
218+
### **Chat 管理技巧**：
219+
- **何時開啟新對話**：切換不同主題或想要清晰對比時
220+
- **如何開啟新對話**：點擊 Chat 面板上方的「新對話」按鈕
221+
- **對話歷史**：Copilot 會記住同一對話中的上下文
222+
223+
## Demo 重點
224+
1. **@workspace 對比展示**：先不用 → 再使用，展現明顯差異
225+
2. **快速開啟 Chat**：`Ctrl+Alt+I` 熟練操作
226+
3. **專案感知能力**：展示 AI 如何理解專案結構
227+
4. **Ghost Text 體驗**：灰色建議 → Tab 接受
228+
5. **Edit 模式實作**：展示如何快速完成功能
229+
6. **UI 美化能力**：展示 Copilot 的設計理解力
230+
7. **建立基礎認知**：為後續 Agent 學習做準備
231+
232+
## 預期成果
233+
完成本場景後，您應該：
234+
- **深刻理解 @workspace 的重要性**
235+
- 能夠開啟並使用 Copilot Chat
236+
- 了解如何提出有效的問題
237+
- 體驗基本的程式碼自動完成功能
238+
- **建立對 GitHub Copilot 的基礎認知**（為後續學習做準備）
239+
240+
## 延伸練習
241+
1. **對比測試**：同樣問題分別用一般對話和 @workspace 詢問
242+
2. 請 @workspace 解釋它對專案結構的理解
243+
3. 要求 @workspace 提供符合專案風格的不同實作方式
244+
245+
## 為下階段準備
246+
- 第一階段建立了 @workspace 的基礎認知
247+
- 第二階段將深入探索 @workspace 的程式碼解釋能力
248+
- 第三階段開始引入 Agent 模式，展現更強大的功能

‎demos/01-completed/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-TW">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
7+
<meta http-equiv="Pragma" content="no-cache">
8+
<meta http-equiv="Expires" content="0">
9+
<title>GitHub Copilot 熟練應用展示</title>
10+
<link rel="stylesheet" href="style.css?v=20250602230252">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<h1>✅ GitHub Copilot 熟練應用</h1>
15+
<p style="text-align: center; color: #666; margin-bottom: 20px;">展示進階功能：快捷鍵、批量操作、智能提示</p>
16+
<div class="input-container">
17+
<input type="text" id="todoInput" placeholder="輸入待辦事項...">
18+
<button id="addButton">新增</button>
19+
</div>
20+
<ul id="todoList">
21+
<!-- 待辦事項將顯示在這裡 -->
22+
</ul>
23+
</div>
24+
<script src="script.js?v=20250602230252"></script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)