🧠 AI創造工作坊

文科視角的AI應用開發入門

第 3 週：探索GitHub Copilot的三種互動模式

Haowen Jiang

工具重點：GitHub Copilot
應用焦點：Ask, Edit, Agent 模式

學習如何透過提問、編輯和代理模式，更有效地利用 Copilot

🍁 課程地圖(原始)

週數 主題 工具重點 應用焦點
W1 開始數位創作的第一步 Markdown, Git/GitHub 專案筆記與版本管理：從想法紀錄到協作流程
W2 讓 AI 幫你動腦 GitHub Copilot 利用 Copilot 輔助生成前端元件、處理資料與編寫小程式
W3 資料驅動的思考與原型 Google Jules 以資料為基礎構思使用者需求，探索資料驅動設計
W4 把 AI 接上 CLI，打造簡易互動工具 Google Gemini CLI 實作一個可以接收輸入並輸出分析的App

🍁 課程地圖(更新)✨

週數 主題 工具重點 應用焦點
W1 開始數位創作的第一步 Markdown, Git/GitHub 專案筆記與版本管理：從想法紀錄到協作流程
W2 讓 AI 幫你動腦 GitHub Copilot, Codespaces 利用 Copilot 輔助生成前端元件、處理資料與編寫小程式
W3 探索GitHub Copilot的Ask, Edit, Agent模式 GitHub Copilot, Codespaces 學習如何透過提問、編輯和代理模式，更有效地利用 Copilot
W4 應用程式部署與自動化 GitHub Pages, GitHub Actions 將你的數位創作成果公諸於世

🌱 第 3 週主題

探索GitHub Copilot的Ask, Edit, Agent模式

  • 應用焦點：
    • Ask: 學習如何有效地向 Copilot 提問
    • Edit: 學習如何編輯 Copilot 生成的程式碼
    • Agent: 學習如何讓 Copilot 作為你的程式設計代理人

Copilot 不只是程式碼生成工具，更是你的程式設計夥伴

🎯 學習目標

  • 理解 Ask, Edit, Agent 模式的核心概念
    → 掌握與 Copilot 協作的不同層次
  • 善用Copilot的自動補全與圖片理解
    → 提升程式碼生成的效率與準確性
  • 學會如何使用Git同步程式碼與共創
    → 有效管理版本與進行多人協作

🙋🏻 什麼是 Ask, Edit, Agent 模式？

YouTube影片

  • Ask（純聊天）：像跟朋友閒聊，隨便問、隨便聊，沒有後續任務。
  • Edit（編輯）：你給我內容，我幫你修改、潤飾、重組，讓它更清楚好看。
  • Agent（代辦）：不只回答，還幫你「去做事」，查資料、整理資訊、規劃流程。

🛠️ 本週活動

  1. 註冊GitHub帳號
  2. Fork 課程資料repository
  3. 進入GitHub Codespaces頁面
  4. 創建一個新的 Codespace
    • 選擇剛剛 Fork 的 repository
    • 選擇 w3_ask_edit_agent 分支
    • 選擇 2-core 機器類型
    • 點擊 Create codespace

🛠️ 實作範例

  1. Ask: 根據你的需求，用清晰的語言向 Copilot 提問
    • 例如：使用ask.md提問如何修改個人網頁
  2. Edit: 修改程式碼，使其更符合你的需求
    • 例如：使用edit.md修改games資料夾內的井字遊戲
  3. Agent: 讓 Copilot 自動完成任務
    • 例如：使用agent.md讓 Copilot 自動產生類似Quizlet的單字卡應用程式

單字卡應用程式提問範例

產生類似Quizlet風格的單詞卡 (flash cards) 網頁應用，單詞來源為json檔案，使用者可以匯入跟匯出單詞。預先載入五個台灣閩南語跟動物有關的詞彙，正面是漢字，反面是台灣閩南語羅馬字以及國語解釋。

🧠 使用 GitHub Copilot 的Add context按鈕

✨ 功能說明
Copilot 的Add context按鈕可以讓你手動加入額外的程式碼或專案背景，幫助 Copilot 更準確地理解你的需求。

🔧 可加入的 Context 類型舉例：

  • #codebase：整個專案的程式碼架構與邏輯
  • #selection：你選取的程式碼區塊
  • #comment：註解內容
  • source control：Git commit 訊息等版本控制資訊

📌 Add context使用方式

  1. 點選 Copilot Chat 視窗中的Add context
  2. 選擇要加入的檔案、資料夾或 Commit歷史
  3. Copilot 會根據你加入的內容回答問題或產生程式碼

💡 範例

/explain #codebase
用中文說明這個專案的功能與架構

🛠️本週作業

  1. 修改或新增 上述範例程式/內容
  2. 在 GitHub 提交 Pull Request (PR)
  3. 所有新增內容需依以下資料夾結構放置：
submissions/
  └── student_user_name/
        └── homework1.md
        └── homework2.md
        └── ...

🌟注意事項

  • 資料夾名稱請用自己帳號名稱替換 student_user_name
  • 提交前先檢查檔案是否能正常開啟與顯示

🪜 提交步驟

  1. Commit 並推送到自己 repository 的分支
  2. 回到你 fork 的 GitHub 頁面
  3. GitHub 會偵測到你剛推送的新分支，點擊Compare & pull request按鈕
  4. 確認 base repository 是原始 repo（howard-haowen/genai_workshop）
  5. 確認 base branch 是原始 repo 的目標分支（通常是main）
  6. 確認 compare branch 是你 fork 的 repo 中的修改分支 (w3_ask_edit_agent)
  7. 填寫 PR 的標題與描述，說明你做了哪些修改
  8. 點擊「Create pull request」

✨ 課程連結

🤖 AI平台

📚 推薦VS Code擴充套件 (本課程)

擴充套件名稱 功能簡介 適合用途
Markdown All in One 提供 Markdown 語法高亮、快速格式化、預覽等功能 撰寫筆記、報告、簡報、學習筆記
Git Graph 提供 Git 分支圖，方便查看版本歷史與進行各種 Git 操作 版本控制、專案管理
Live Server 啟動本地伺服器，即時預覽 HTML/Markdown 編輯結果 預覽教學網頁、互動教材
Marp for VS Code 使用 Markdown 製作簡報，支援主題、動畫、PDF 匯出 製作課堂簡報、教學投影片

📚 推薦VS Code擴充套件 (一般寫作)

擴充套件名稱 功能簡介 適合用途
LTeX 支援語法檢查、文法建議，類似 Grammarly 的功能 改進英文寫作、學術論文撰寫
LaTeX Workshop 支援 LaTeX 編輯、編譯與預覽 撰寫學術論文、數學或語言學報告
Markdown Kanban 提供看板式任務管理功能 管理專案進度、任務追蹤
Todo Tree 自動整理文件中的 TODO 標記，形成清單 管理學習進度、研究任務追蹤
Foam 類似 Roam Research 的筆記系統，支援連結思考與知識網絡 建構個人知識庫、研究筆記

週次主題

課程地圖

本週主題

學習目標

活動