|
1 | 1 | # 場景 1:初次對話體驗 |
2 | 2 |
|
3 | | -## 🎯 學習目標 |
| 3 | +## 學習目標 |
4 | 4 | - 了解 GitHub Copilot 的**基本 Chat 功能** |
5 | 5 | - 學習如何使用 **ask** 功能進行對話 |
6 | 6 | - **理解 @workspace 的重要性和實際差異** |
|
24 | 24 |
|
25 | 25 | 在開始之前,請確認使用 **GPT-4.1** 模型: |
26 | 26 | 1. 開啟 Copilot Chat (`Ctrl+Alt+I`) |
27 | | -2. 點擊 Chat 面板右上角的 ⚙️ 設定圖示 |
| 27 | +2. 點擊 Chat 面板右上角的 設定圖示 |
28 | 28 | 3. 在 Model 選項中選擇 **GPT-4.1** |
29 | 29 | 4. 確認顯示 "Using GPT-4.1" |
30 | 30 |
|
31 | | -💡 **為什麼選擇 GPT-4.1?** |
| 31 | + **為什麼選擇 GPT-4.1?** |
32 | 32 | - 更準確的程式碼生成 |
33 | 33 | - 更好的專案理解能力 |
34 | 34 | - Edit 模式效果最佳 |
35 | 35 |
|
36 | | -## 📚 Demo 劇本 |
| 36 | +## Demo 劇本 |
37 | 37 |
|
38 | 38 | ### 階段 1:快速熟悉 Chat + @workspace 對比 (3分鐘) |
39 | 39 |
|
|
44 | 44 | ``` |
45 | 45 | 你好!我想建立一個簡單的待辦事項網頁,請告訴我基本的檔案結構和需要的功能? |
46 | 46 | ``` |
47 | | -💡 **使用模式:Ask** |
| 47 | + **使用模式:Ask** |
48 | 48 |
|
49 | 49 | #### 步驟 2:體驗 @workspace 的差異 |
50 | | -🔄 **開啟新對話** |
| 50 | + **開啟新對話** |
51 | 51 | - 點擊 Chat 面板右上角的「+」或「New Chat」按鈕 |
52 | 52 | - 或使用快捷鍵:`Ctrl+L` |
53 | 53 |
|
54 | 54 | ``` |
55 | 55 | @workspace 我想了解這個專案的結構,請告訴我現在有哪些檔案? |
56 | 56 | ``` |
57 | | -💡 **使用模式:Ask** |
| 57 | + **使用模式:Ask** |
58 | 58 |
|
59 | | -✅ **觀察差異**: |
| 59 | + **觀察差異**: |
60 | 60 | - **一般對話**:給通用建議 |
61 | 61 | - **@workspace**:能看到實際檔案,給出針對性回答 |
62 | 62 |
|
|
66 | 66 | ``` |
67 | 67 | @workspace 這個專案有哪些檔案?每個檔案的用途是什麼? |
68 | 68 | ``` |
69 | | -💡 **使用模式:Ask** |
| 69 | + **使用模式:Ask** |
70 | 70 |
|
71 | 71 | #### 步驟 4:**獲取學習建議** |
72 | 72 | ``` |
73 | 73 | @workspace 我是初學者,想了解待辦事項應用通常有哪些功能?學習 JavaScript 時應該注意什麼? |
74 | 74 | ``` |
75 | | -💡 **使用模式:Ask** |
| 75 | + **使用模式:Ask** |
76 | 76 |
|
77 | 77 | ### 階段 3:程式碼自動完成體驗 (3分鐘) |
78 | 78 |
|
|
85 | 85 | 3. 看到建議後,按 `Tab` 鍵接受 |
86 | 86 | 4. 繼續輸入 `// 待辦事項`,觀察新的建議 |
87 | 87 |
|
88 | | -⚡ **重點觀察**: |
| 88 | + **重點觀察**: |
89 | 89 | - Ghost Text 會以灰色文字顯示建議 |
90 | 90 | - 按 `Tab` 接受,按 `Esc` 拒絕 |
91 | 91 | - 建議會根據你的註解和程式碼上下文改變 |
92 | 92 |
|
93 | 93 | ### 階段 4:Edit 模式實作 (5分鐘) |
94 | 94 |
|
95 | 95 | #### 步驟 6:準備 Edit 模式的 Context |
96 | | -🔄 **開啟新對話** |
97 | | -1. 在 Chat 視窗中,點擊輸入框左側的 **📎** 圖示 |
| 96 | + **開啟新對話** |
| 97 | +1. 在 Chat 視窗中,點擊輸入框左側的 **** 圖示 |
98 | 98 | 2. 選擇「Add Files」 |
99 | 99 | 3. 勾選以下檔案: |
100 | 100 | - `index.html` (重要!讓 Copilot 了解 DOM 結構) |
101 | 101 | - `script.js` (要編輯的檔案) |
102 | 102 | 4. 確認檔案已加入(會顯示在輸入框上方) |
103 | 103 |
|
104 | | -💡 **為什麼要加入 index.html?** |
| 104 | + **為什麼要加入 index.html?** |
105 | 105 | 讓 Copilot 看到按鈕和列表的 ID,才能生成正確的程式碼 |
106 | 106 |
|
107 | 107 | #### 步驟 7:使用 Edit 模式完成功能 |
|
110 | 110 | ``` |
111 | 111 | 實作待辦事項的新增功能,點擊按鈕要能新增項目到列表 |
112 | 112 | ``` |
113 | | -💡 **使用模式:Edit** |
| 113 | + **使用模式:Edit** |
114 | 114 |
|
115 | 115 | 3. Copilot 會顯示修改預覽 |
116 | 116 | 4. 檢視程式碼,確認使用了正確的 ID (`todoInput`, `addButton`, `todoList`) |
|
126 | 126 | - 點擊「新增」按鈕 |
127 | 127 | - 確認項目出現在列表中 |
128 | 128 |
|
129 | | -✅ **Edit 模式關鍵學習**: |
| 129 | + **Edit 模式關鍵學習**: |
130 | 130 | - 必須加入相關檔案作為 context |
131 | 131 | - Copilot 會根據 context 生成符合專案的程式碼 |
132 | 132 | - 簡單的 prompt 就能完成功能 |
133 | 133 |
|
134 | 134 | ### 階段 5:UI 美化體驗 (5分鐘) |
135 | 135 |
|
136 | 136 | #### 步驟 9:使用 @workspace 分析現有樣式 |
137 | | -🔄 **開啟新對話** |
| 137 | + **開啟新對話** |
138 | 138 | 1. 使用 @workspace 了解現有設計: |
139 | 139 | ``` |
140 | 140 | @workspace 請分析 style.css 的設計風格,包括配色、排版和整體視覺風格 |
141 | 141 | ``` |
142 | | -💡 **使用模式:Ask** |
| 142 | + **使用模式:Ask** |
143 | 143 |
|
144 | 144 | #### 步驟 10:獲取樣式改進建議 |
145 | 145 | ``` |
|
149 | 149 | - 添加動畫和過渡效果 |
150 | 150 | - 提升整體視覺層次 |
151 | 151 | ``` |
152 | | -💡 **使用模式:Ask** |
| 152 | + **使用模式:Ask** |
153 | 153 |
|
154 | 154 | #### 步驟 11:使用 Edit 模式實作樣式改進 |
155 | | -1. 點擊 📎 圖示,選擇 `style.css` 檔案 |
| 155 | +1. 點擊 圖示,選擇 `style.css` 檔案 |
156 | 156 | 2. 切換到 **Edit** 模式 |
157 | 157 | 3. 輸入具體的修改需求: |
158 | 158 | ``` |
|
163 | 163 | 4. 給待辦事項添加滑入動畫,讓新增項目更有動感 |
164 | 164 | 5. 優化整體配色,使用更專業的色彩搭配 |
165 | 165 | ``` |
166 | | -💡 **使用模式:Edit** |
| 166 | + **使用模式:Edit** |
167 | 167 |
|
168 | 168 | 4. 檢視 Copilot 的修改預覽 |
169 | 169 | 5. 點擊 **Accept** 接受修改 |
|
175 | 175 | - 新增項目的動畫 |
176 | 176 | - 整體視覺層次的改善 |
177 | 177 |
|
178 | | -✅ **樣式修改關鍵學習**: |
| 178 | + **樣式修改關鍵學習**: |
179 | 179 | - Copilot 能理解設計意圖並轉化為 CSS |
180 | 180 | - 可以一次性處理多個樣式需求 |
181 | 181 | - 生成的程式碼包含現代 CSS 特性(動畫、漸變、陰影等) |
182 | 182 |
|
183 | | -### 🔍 重點觀察 |
| 183 | +### 重點觀察 |
184 | 184 |
|
185 | 185 | #### **@workspace vs 一般對話差異**: |
186 | 186 | - **一般對話**:籠統建議,不了解專案脈絡 |
|
197 | 197 | - **現代化設計**:Copilot 了解當前設計趨勢 |
198 | 198 | - **完整性思考**:不只改單一元素,而是整體提升 |
199 | 199 |
|
200 | | -## 💡 重點提示 |
| 200 | +## 重點提示 |
201 | 201 |
|
202 | 202 | ### **@workspace 最佳實踐**: |
203 | 203 | 1. **永遠使用 @workspace**:這是最重要的聊天參與者 |
|
220 | 220 | - **如何開啟新對話**:點擊 Chat 面板上方的「新對話」按鈕 |
221 | 221 | - **對話歷史**:Copilot 會記住同一對話中的上下文 |
222 | 222 |
|
223 | | -## 🎬 Demo 重點 |
| 223 | +## Demo 重點 |
224 | 224 | 1. **@workspace 對比展示**:先不用 → 再使用,展現明顯差異 |
225 | 225 | 2. **快速開啟 Chat**:`Ctrl+Alt+I` 熟練操作 |
226 | 226 | 3. **專案感知能力**:展示 AI 如何理解專案結構 |
|
229 | 229 | 6. **UI 美化能力**:展示 Copilot 的設計理解力 |
230 | 230 | 7. **建立基礎認知**:為後續 Agent 學習做準備 |
231 | 231 |
|
232 | | -## ✅ 預期成果 |
| 232 | +## 預期成果 |
233 | 233 | 完成本場景後,您應該: |
234 | 234 | - **深刻理解 @workspace 的重要性** |
235 | 235 | - 能夠開啟並使用 Copilot Chat |
236 | 236 | - 了解如何提出有效的問題 |
237 | 237 | - 體驗基本的程式碼自動完成功能 |
238 | 238 | - **建立對 GitHub Copilot 的基礎認知**(為後續學習做準備) |
239 | 239 |
|
240 | | -## 🔍 延伸練習 |
| 240 | +## 延伸練習 |
241 | 241 | 1. **對比測試**:同樣問題分別用一般對話和 @workspace 詢問 |
242 | 242 | 2. 請 @workspace 解釋它對專案結構的理解 |
243 | 243 | 3. 要求 @workspace 提供符合專案風格的不同實作方式 |
244 | 244 |
|
245 | | -## 🎯 為下階段準備 |
| 245 | +## 為下階段準備 |
246 | 246 | - 第一階段建立了 @workspace 的基礎認知 |
247 | 247 | - 第二階段將深入探索 @workspace 的程式碼解釋能力 |
248 | 248 | - 第三階段開始引入 Agent 模式,展現更強大的功能 |
0 commit comments