-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathindex.html
More file actions
361 lines (334 loc) · 25.5 KB
/
index.html
File metadata and controls
361 lines (334 loc) · 25.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="theme-color" content="#000000">
<title>GitHub Copilot 教學專案</title>
<link rel="stylesheet" href="style.css?v=20250603012">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>GitHub Copilot 教學專案</h1>
<p>透過 8 個實作場景，掌握 AI 輔助開發的完整技能</p>
</div>
<div class="main-content">
<h2 style="font-size: 3rem; font-weight: 600; margin-bottom: 48px; text-align: center; letter-spacing: -0.015em; line-height: 1.0625;">專案簡介</h2>
<p style="text-align: center; font-size: 1.25rem; color: #6e6e73; max-width: 800px; margin: 0 auto 80px; line-height: 1.6;">這是一個 <strong style="color: #1d1d1f;">2小時精華版</strong> GitHub Copilot 教學專案，專注於 <strong style="color: #1d1d1f;">Agent 模式</strong>的實際應用。<br>透過由淺入深的 8 個場景，讓您快速掌握 AI 驅動的開發流程。</p>
<div style="text-align: center; margin: 0 auto 80px; max-width: 900px;">
<p style="font-size: 1.125rem; color: #515154; line-height: 1.8; margin-bottom: 24px;">
我們將從基礎的對話功能開始，逐步深入到讓 AI Agent 完全主導開發流程。每個場景都包含實際的程式碼範例、詳細的操作步驟，以及立即可見的成果展示。
</p>
<p style="font-size: 1rem; color: #6e6e73; line-height: 1.7;">
無論您是 <strong>產品經理（PM）</strong>想了解 AI 如何加速產品迭代、<strong>系統分析師（SA）</strong>希望掌握 AI 輔助系統設計，還是<strong>程式設計師（PG）</strong>想要提升編碼效率，這個課程都能為您帶來實質的幫助。
</p>
</div>
<div class="features">
<div class="feature-card">
<h3>Agent 模式核心</h3>
<p>學習讓 AI 自主完成複雜開發任務，從簡單的程式碼補全到完整的系統架構設計。採用漸進式學習路徑，讓您一步步掌握 Agent 的強大能力。</p>
<ul style="margin-top: 16px; font-size: 0.875rem; color: #6e6e73; list-style: none; padding: 0;">
<li style="margin-bottom: 8px;">✓ 自主分析與決策</li>
<li style="margin-bottom: 8px;">✓ 多檔案協調修改</li>
<li>✓ 完整專案重構</li>
</ul>
</div>
<div class="feature-card">
<h3>目標聽眾</h3>
<p>適合各種角色的專業人士，每個人都能找到適合自己的應用場景，大幅提升工作效率。</p>
<ul style="margin-top: 16px; font-size: 0.875rem; color: #6e6e73; list-style: none; padding: 0;">
<li style="margin-bottom: 8px;"><strong>PM</strong>：快速原型開發、需求驗證</li>
<li style="margin-bottom: 8px;"><strong>SA</strong>：系統分析、文檔生成</li>
<li><strong>PG</strong>：編碼加速、測試自動化</li>
</ul>
</div>
<div class="feature-card">
<h3>2025 最新功能</h3>
<p>涵蓋 GitHub Copilot 最新發布的強大功能，讓您站在 AI 輔助開發的最前沿。</p>
<ul style="margin-top: 16px; font-size: 0.875rem; color: #6e6e73; list-style: none; padding: 0;">
<li style="margin-bottom: 8px;">Next Edit Suggestions</li>
<li style="margin-bottom: 8px;">多指令檔案系統</li>
<li>Prompt Files 模板化</li>
</ul>
</div>
</div>
<div class="quick-start">
<h3 style="font-size: 1.25rem; font-weight: 600; color: #1d1d1f; margin-bottom: 20px;">快速開始</h3>
<p style="font-size: 1rem; line-height: 1.8; margin-bottom: 20px;">準備好開始您的 AI 輔助開發之旅了嗎？只需要簡單幾個步驟：</p>
<ol style="font-size: 0.9375rem; line-height: 1.8; color: #515154; margin-left: 20px;">
<li style="margin-bottom: 12px;"><strong>安裝必要工具</strong><br>
下載並安裝 VS Code，然後從擴充套件市場安裝 GitHub Copilot</li>
<li style="margin-bottom: 12px;"><strong>設定您的帳號</strong><br>
使用 GitHub 帳號登入，選擇個人版（$10/月）或商業版（$19/月）</li>
<li style="margin-bottom: 12px;"><strong>語言環境設定</strong><br>
將 VS Code 設定為繁體中文，獲得更好的學習體驗</li>
<li><strong>開始學習旅程</strong><br>
從場景 1 開始，循序漸進掌握每個功能</li>
</ol>
<div style="text-align: center; margin-top: 20px; display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
<a href="#" onclick="loadMarkdown('./README.md', 'GitHub Copilot 教學專案 - 完整指南'); return false;" class="btn btn-doc btn-primary">
查看完整教學指南
</a>
<a href="https://github.com/yulin0629/github-copilot-tutorial" target="_blank" class="btn btn-primary" style="background: #1d1d1f !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;">
<svg style="width: 20px; height: 20px; margin-right: 8px; vertical-align: middle;" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
GitHub Repository
</a>
</div>
</div>
<div class="qr-code-section">
<h3 style="font-size: 1.375rem; font-weight: 600; color: #1d1d1f; margin-bottom: 16px;">手機掃描 QR Code 快速存取</h3>
<p style="font-size: 1rem; color: #6e6e73; margin-bottom: 24px; line-height: 1.6;">
想要隨時隨地查看教學內容？掃描下方 QR Code，即可在手機或平板上瀏覽完整的教學資源。
</p>
<div id="qrcode"></div>
<p class="qr-note" style="margin-top: 20px;">支援所有主流瀏覽器，建議使用 Safari 或 Chrome 獲得最佳體驗</p>
</div>
<div class="scenarios">
<h2>8 個學習場景</h2>
<p style="text-align: center; font-size: 1.125rem; color: #6e6e73; max-width: 800px; margin: -8px auto 40px; line-height: 1.6;">
從基礎到進階，每個場景都精心設計，讓您在實作中學習。左右滑動探索所有場景。
</p>
<div class="scenario-wrapper">
<div class="scenario-list">
<div class="scenario-item">
<div class="scenario-number">01 - 基礎</div>
<div class="scenario-title">初次對話體驗</div>
<div class="scenario-description">建立 Copilot 使用基礎，體驗傳統 Chat 功能，了解基本操作介面</div>
<div class="scenario-details">
<div style="margin-bottom: 8px;"><strong>學習重點：</strong></div>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 4px;">• 認識 Chat 介面與基本操作</li>
<li style="margin-bottom: 4px;">• 學習如何提出有效問題</li>
<li style="margin-bottom: 4px;">• 理解 AI 回應的特性</li>
</ul>
<div style="margin-top: 12px;"><strong>預計時間：</strong>10 分鐘</div>
</div>
<div class="scenario-links scenario-links-3">
<a href="#" onclick="loadMarkdown('./01-first-experience/LESSON_GUIDE.md', '場景 1：初次對話體驗'); return false;" class="btn btn-doc">教學文件</a>
<a href="./01-first-experience/" class="btn btn-before">🔴 課程前</a>
<a href="./demos/01-completed/" class="btn btn-after">✅ 課程後</a>
</div>
</div>
<div class="scenario-item">
<div class="scenario-number">02 - 基礎</div>
<div class="scenario-title">程式碼解釋實作</div>
<div class="scenario-description">掌握 @workspace 核心功能，理解專案結構，學習全專案分析技巧</div>
<div class="scenario-details">
<div style="margin-bottom: 8px;"><strong>學習重點：</strong></div>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 4px;">• @workspace 的強大功能</li>
<li style="margin-bottom: 4px;">• 專案結構快速分析</li>
<li style="margin-bottom: 4px;">• 程式碼理解與解釋</li>
</ul>
<div style="margin-top: 12px;"><strong>預計時間：</strong>15 分鐘</div>
</div>
<div class="scenario-links scenario-links-3">
<a href="#" onclick="loadMarkdown('./02-code-explanation/LESSON_GUIDE.md', '場景 2：程式碼解釋實作'); return false;" class="btn btn-doc">教學文件</a>
<a href="./02-code-explanation/" class="btn btn-before">🔴 課程前</a>
<a href="./demos/02-completed/" class="btn btn-after">✅ 課程後</a>
</div>
</div>
<div class="scenario-item">
<div class="scenario-number">03 - 進階</div>
<div class="scenario-title">函數生成</div>
<div class="scenario-description">體驗 Agent 協助編程，對比手動 vs AI 效率，初次接觸 Agent 模式</div>
<div class="scenario-details">
<div style="margin-bottom: 8px;"><strong>學習重點：</strong></div>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 4px;">• Agent 模式初體驗 (20%)</li>
<li style="margin-bottom: 4px;">• AI 協助編寫複雜函數</li>
<li style="margin-bottom: 4px;">• 效率對比：傳統 vs AI</li>
</ul>
<div style="margin-top: 12px;"><strong>預計時間：</strong>15 分鐘</div>
</div>
<div class="scenario-links scenario-links-3">
<a href="#" onclick="loadMarkdown('./03-function-generation/LESSON_GUIDE.md', '場景 3：函數生成'); return false;" class="btn btn-doc">教學文件</a>
<a href="./03-function-generation/" class="btn btn-before">🔴 課程前</a>
<a href="./demos/03-completed/" class="btn btn-after">✅ 課程後</a>
</div>
</div>
<div class="scenario-item">
<div class="scenario-number">04 - 進階</div>
<div class="scenario-title">偵錯輔助</div>
<div class="scenario-description">讓 Agent 主動發現和修復程式問題，學習三種模式的靈活運用</div>
<div class="scenario-details">
<div style="margin-bottom: 8px;"><strong>學習重點：</strong></div>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 4px;">• Agent 智能診斷 (30%)</li>
<li style="margin-bottom: 4px;">• Ask、Edit、Agent 模式組合</li>
<li style="margin-bottom: 4px;">• 修復 10 個真實 Bug</li>
</ul>
<div style="margin-top: 12px;"><strong>預計時間：</strong>20 分鐘</div>
</div>
<div class="scenario-links scenario-links-3">
<a href="#" onclick="loadMarkdown('./04-debugging-assistant/LESSON_GUIDE.md', '場景 4：偵錯輔助'); return false;" class="btn btn-doc">教學文件</a>
<a href="./04-debugging-assistant/" class="btn btn-before">🔴 課程前</a>
<a href="./demos/04-completed/" class="btn btn-after">✅ 課程後</a>
</div>
</div>
<div class="scenario-item">
<div class="scenario-number">05 - 專業</div>
<div class="scenario-title">單元測試</div>
<div class="scenario-description">Agent 自主設計測試架構和完整用例，成為測試策略師</div>
<div class="scenario-details">
<div style="margin-bottom: 8px;"><strong>學習重點：</strong></div>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 4px;">• Agent 策略制定 (50%)</li>
<li style="margin-bottom: 4px;">• 自主設計測試框架</li>
<li style="margin-bottom: 4px;">• 完整測試覆蓋率</li>
</ul>
<div style="margin-top: 12px;"><strong>預計時間：</strong>15 分鐘</div>
</div>
<div class="scenario-links">
<a href="#" onclick="loadMarkdown('./05-unit-testing/LESSON_GUIDE.md', '場景 5：單元測試'); return false;" class="btn btn-doc">教學文件</a>
<a href="./05-unit-testing/" class="btn btn-demo">展示</a>
</div>
</div>
<div class="scenario-item">
<div class="scenario-number">06 - 專業</div>
<div class="scenario-title">程式碼重構</div>
<div class="scenario-description">Agent 分析遺留代碼並執行重構策略，擔任架構師角色</div>
<div class="scenario-details">
<div style="margin-bottom: 8px;"><strong>學習重點：</strong></div>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 4px;">• Agent 架構決策 (60%)</li>
<li style="margin-bottom: 4px;">• 300+ 行代碼重構</li>
<li style="margin-bottom: 4px;">• 現代化架構設計</li>
</ul>
<div style="margin-top: 12px;"><strong>預計時間：</strong>15 分鐘</div>
</div>
<div class="scenario-links">
<a href="#" onclick="loadMarkdown('./06-code-refactoring/LESSON_GUIDE.md', '場景 6：程式碼重構'); return false;" class="btn btn-doc">教學文件</a>
<a href="./06-code-refactoring/" class="btn btn-demo">展示</a>
</div>
</div>
<div class="scenario-item">
<div class="scenario-number">07 - 專家</div>
<div class="scenario-title">文件生成</div>
<div class="scenario-description">Agent 自動分析程式碼生成完整文件體系，成為文檔專家</div>
<div class="scenario-details">
<div style="margin-bottom: 8px;"><strong>學習重點：</strong></div>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 4px;">• Agent 文檔專家 (80%)</li>
<li style="margin-bottom: 4px;">• API、指南、架構文檔</li>
<li style="margin-bottom: 4px;">• 10x 文檔生成速度</li>
</ul>
<div style="margin-top: 12px;"><strong>預計時間：</strong>10 分鐘</div>
</div>
<div class="scenario-links">
<a href="#" onclick="loadMarkdown('./07-documentation/LESSON_GUIDE.md', '場景 7：文件生成'); return false;" class="btn btn-doc">教學文件</a>
</div>
</div>
<div class="scenario-item">
<div class="scenario-number">08 - 專家</div>
<div class="scenario-title">GitHub 自動化 Agent</div>
<div class="scenario-description">從 Issue 到 PR 的完整自動化流程，Agent 完全主導開發</div>
<div class="scenario-details">
<div style="margin-bottom: 8px;"><strong>練習 Issues：</strong></div>
<ul style="list-style: none; padding: 0; margin: 0; font-size: 0.8125rem;">
<li style="margin-bottom: 3px;">• #1 清除已完成任務功能</li>
<li style="margin-bottom: 3px;">• #2 修復 LocalStorage Bug</li>
<li style="margin-bottom: 3px;">• #3 顯示未完成任務數量</li>
<li>• #4 添加鍵盤快捷鍵</li>
</ul>
<div style="margin-top: 12px;"><strong>預計時間：</strong>15 分鐘</div>
<div style="margin-top: 8px; font-size: 0.8125rem; color: #007aff;">
Agent 100% 主導
</div>
</div>
<div class="scenario-links scenario-links-3">
<a href="#" onclick="loadMarkdown('./08-comprehensive-project-guide.md', '場景 8：GitHub 自動化 Agent'); return false;" class="btn btn-doc">教學</a>
<a href="https://github.com/yulin0629/copilot-agent-demo-todo" target="_blank" class="btn btn-repo">GitHub</a>
<a href="https://yulin0629.github.io/copilot-agent-demo-todo/" target="_blank" class="btn btn-demo">Demo</a>
</div>
</div>
</div>
<div class="scroll-indicator">
<span class="scroll-dot active" data-index="0"></span>
<span class="scroll-dot" data-index="1"></span>
<span class="scroll-dot" data-index="2"></span>
<span class="scroll-dot" data-index="3"></span>
<span class="scroll-dot" data-index="4"></span>
<span class="scroll-dot" data-index="5"></span>
<span class="scroll-dot" data-index="6"></span>
<span class="scroll-dot" data-index="7"></span>
</div>
</div>
</div>
</div>
<div class="footer">
<h3 style="font-size: 1.5rem; font-weight: 600; color: #1d1d1f; margin-bottom: 20px;">預期成果</h3>
<p style="font-size: 1.125rem; line-height: 1.8; max-width: 800px; margin: 0 auto 20px;">
完成這 2 小時的精華課程後，您將能夠：
</p>
<div style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin: 32px 0;">
<div style="text-align: center;">
<div style="font-size: 2.5rem; font-weight: 700; color: #007aff; margin-bottom: 8px;">30-50%</div>
<div style="font-size: 0.875rem; color: #6e6e73;">開發效率提升</div>
</div>
<div style="text-align: center;">
<div style="font-size: 2.5rem; font-weight: 700; color: #007aff; margin-bottom: 8px;">80%</div>
<div style="font-size: 0.875rem; color: #6e6e73;">重複工作減少</div>
</div>
<div style="text-align: center;">
<div style="font-size: 2.5rem; font-weight: 700; color: #007aff; margin-bottom: 8px;">10x</div>
<div style="font-size: 0.875rem; color: #6e6e73;">文檔生成速度</div>
</div>
</div>
<p style="font-size: 1rem; color: #6e6e73; max-width: 700px; margin: 0 auto;">
更重要的是，您將建立起團隊級的 AI 輔助開發流程，讓整個團隊都能受益於這項革命性的技術。
</p>
<div class="agent-setup" style="margin-top: 60px; margin-bottom: 60px;">
<h3 style="font-size: 1.25rem; font-weight: 600; color: #1d1d1f; margin-bottom: 20px;">進階：Agent 快速設置</h3>
<p style="font-size: 0.9375rem; color: #6e6e73; margin-bottom: 20px; line-height: 1.6;">如果您已經熟悉 GitHub Copilot，可以使用以下 Agent 指令快速設置環境：</p>
<details style="background: #f5f5f7; padding: 24px; border-radius: 16px; border: none;">
<summary style="cursor: pointer; font-weight: 600; color: #007aff; font-size: 1rem;">Agent 快速設置指令（點擊展開）</summary>
<div style="position: relative;">
<button onclick="copyAgentPrompt()" style="position: absolute; top: 15px; right: 15px; padding: 8px 16px; background: #007aff; color: white; border: none; border-radius: 20px; font-size: 12px; cursor: pointer; z-index: 10; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); display: none;">
複製
</button>
<pre id="agentPrompt" style="margin-top: 10px; background: white; padding: 15px; padding-right: 60px; border-radius: 5px; font-size: 0.9rem; overflow-x: auto;">請幫我設置 GitHub Copilot 教學專案環境：
1. 首先檢查目前位置並決定克隆位置：
- 如果在 VS Code 中已有開啟的專案，請詢問我是否要在當前目錄的父目錄克隆
- 如果沒有開啟專案，請詢問我想要克隆到哪個目錄
- 建議的位置：~/projects/ 或 ~/Github/
2. 克隆專案（包含 submodule）：
cd [選定的目錄]
git clone --recursive https://github.com/yulin0629/github-copilot-tutorial.git
cd github-copilot-tutorial
3. 如果場景 8 的 submodule 沒有正確下載，請執行：
git submodule update --init --recursive
4. 檢查專案結構是否完整（應有 8 個場景資料夾）
5. 完成後請使用 VS Code 開啟專案資料夾：
- 使用 File > Open Folder 選單
- 選擇剛剛克隆的 github-copilot-tutorial 資料夾</pre>
</div>
</details>
</div>
<div style="margin-top: 40px; padding-top: 32px; border-top: 1px solid #d1d9e0;">
<p style="font-size: 0.875rem; color: #86868b;">
Created by Yulin Wang • Powered by GitHub Copilot
</p>
</div>
</div>
</div>
<!-- Markdown Modal -->
<div id="markdownModal" class="markdown-modal">
<div class="markdown-content">
<button class="markdown-close" onclick="closeMarkdown()" aria-label="關閉"></button>
<div id="markdownBody">
<div class="markdown-loading">載入中...</div>
</div>
</div>
</div>
<script src="script.js?v=20250603012"></script>
</body>
</html>