# IEH 程式隊 2025第三學季 Workshop006

## 🎓 程式課程規劃（7堂）

### 📅 上課日期
12/13、12/27、1/3、<span style="color:red; font-weight:bold;">1/10</span>、1/17、1/24、<span style="color:red; font-weight:bold;">1/31</span>

### 🗂️ 課程總覽

| 日期 | 主題 | 任務名稱 | 技能重點 | 小任務成果 |
|------|------|-----------|------------|--------------|
| **12/13** | 基礎程式複習 | 🔄《程式複習任務》 | 變數、資料型態、事件、DOM 操作、點擊事件 | 做小互動練習，為 AI 專題鋪路 |
| **12/27** | 遊戲邏輯進階 | ⏱️《倒數生存挑戰》 | 計時器、遊戲狀態（state）、重來機制、config 設計 | 倒數時間內生存，完成小遊戲 |
| **1/3** | AI 聊天入門 | 🤖《我的 AI 角色聊天室》 | Fetch API、prompt 設計、聊天紀錄、UI 顯示 | 可以跟自己設計的 AI 角色聊天 |
| <span style="color:red; font-weight:bold;">1/10</span> | 專題企劃 | 🛠️《設計我的 AI / 遊戲專題》 | 專題選題、功能拆解、角色設定、流程圖 | 完成專題企劃表與畫面草圖 |
| **1/17** | 專題實作 ① | 🧑‍💻《實作製作日》 | 功能實作、資料結構、事件整合 | 專題核心功能可操作 |
| **1/24** | 專題實作 ② | 🧪《發表準備與彩排》 | Debug、UI 優化、例外處理、操作演練 | 專題可完整 Demo，練習介紹作品 |
| <span style="color:red; font-weight:bold;">1/31</span> | 專題發表會 | 🌟《我是小小 AI 開發者！》 | 發表、Demo、回饋 | 班級成果發表＋獎項 |

## 線上網頁程式編輯器
https://jsfiddle.net/

## 網頁程式學習資源
https://www.w3schools.com/

## Genimi API 教學
https://hackmd.io/@MattChang/ByJWRkINbl

### 如何於本地電腦部署網站

請依照以下步驟操作：

1. **建立一個新資料夾**，並進入該資料夾。
2. 將 **JSFiddle 上的程式碼** 分別拆成三個檔案：
- HTML → `index.html`
- CSS → `style.css`
- JavaScript → `script.js`


3. 在 `index.html` 中最下方加入以下引用設定：

   <link rel="stylesheet" href="style.css">
   <script src="script.js"></script>

![image](https://hackmd.io/_uploads/Hy4bdK_r-l.png)

4. 使用瀏覽器開啟 index.html，應可看到最終結果。

## 🧪《發表準備與彩排》

### 🎯 本週目標
- 完成 **專題所有功能實作**
- 確保專案可正常操作、不報錯
- 將專案 **Deploy（部署上線）**
- 產出可交付老師的 **專案連結與程式**

---

### 📝 本週重點

#### 1️⃣ 完成專題程式
- 依照上週完成的 **Wireframe** 與 **專題企劃表**
- 補齊尚未完成的功能
- 確保 AI 功能（Gemini API）可正常回應
- 調整操作流程，讓第一次使用的人也能看懂怎麼用

#### 2️⃣ 專案 Deploy（部署）
- 將專案部署到線上平台（擇一即可）
  - GitHub Pages
  - Netlify
  - Vercel
- 確認：
  - 網址可正常打開
  - 基本功能在網頁上可實際操作
  - 沒有出現錯誤畫面

---

### 📦 今天下課前請完成
- [ ] 專題程式完成（可實際操作）
- [ ] 專案成功 Deploy 並取得網址

---

### ⏭️ 下一堂課（專題發表）
- 專題正式發表
- 現場展示專案操作
- 老師講評與優化建議

## 實作資源

### Gemini API URL
https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent


| Code  |  |
|-----|--------------|
| Code1 | <div style="filter: blur(5px); color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.8); letter-spacing: 4px;">AIzaSyBroNNY7vozytmuPMpVSshn6PMu1osI6H0</div> |
| Code2 | <div style="filter: blur(5px); color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.8); letter-spacing: 4px;">AIzaSyAsq5fDEYoUzHk6lQy2zkC1QLO0Oh9Nr44</div> |
| Code3 | <div style="filter: blur(5px); color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.8); letter-spacing: 4px;">AIzaSyAIycrpWvBE5zEwNkrUPQtXk2MeF58MoXU</div> |
| Code4 **(NEW)** | <div style="filter: blur(5px); color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.8); letter-spacing: 4px;">AIzaSyCN7QV0a7MgPl0myYCAiNoO1L0VgKghoPs</div> |
| Code5 **(NEW)** | <div style="filter: blur(5px); color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.8); letter-spacing: 4px;">AIzaSyDPtrD2aYZbD8uKAeSxx4sxZI6iVVR6jp4</div> |
| Code6 **(NEW)** | <div style="filter: blur(5px); color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.8); letter-spacing: 4px;">AIzaSyBI1i1CYKUAxgYet1vmcP-gl4B27yqDYFM</div> |
| Code7 **(NEW)** | <div style="filter: blur(5px); color: transparent; text-shadow: 0 0 10px rgba(0,0,0,0.8); letter-spacing: 4px;">AIzaSyAITWRZOQprqJVs8W8RoJqex1PfinA-4SM</div> |

### 報告回報文件夾
| 姓名 | 企劃文件 | 簡報連結 | 專題連結 |
|---|---|---|---|
| 範例 |  |  | [專題連結](https://ieh-student-final-202601.vercel.app/) |
| 張加樂 | [企劃文件](https://docs.google.com/document/d/1JuJ326r3YCWYuonYBTIjUtqJJZO-49G5SvsuKFX2tdE/edit?usp=drive_link) | [簡報](https://docs.google.com/presentation/d/1fERBtXyj9laI1HWPg_JiRjsteqnpOx36XLAlxaTfruA/edit?usp=sharing) | [專題連結](https://ieh-changchiale-final-202601.vercel.app/) |
| 李淮恩 | [企劃文件](https://docs.google.com/document/d/1FSQYL7-ZbGOIwuUTAT0aw1rFDGAgSvsKiR_V8gq11YU/edit?usp=drive_link) | [簡報](https://docs.google.com/presentation/d/1WNULUL-GqEKqA5ZXzmChJdXZcXagu1pwO4_WjgdBSlo/edit?usp=sharing) | [專題連結](https://ieh-leehuaien-final-202601.vercel.app/) |
| 顏嘉宥 | [企劃文件](https://docs.google.com/document/d/1JZjLRMGu59kwMly6sgtCCBvHeDbUzXvYNroLphY58PI/edit?usp=drive_link) | [簡報](https://docs.google.com/presentation/d/1hSxMXrdK-8LawM790kY358oDSr0BJFyZrbjNsKYlnnM/edit?usp=sharing) | [專題連結](https://ieh-yenchiayu-final-202601.vercel.app/) |
| 林睿恩 | [企劃文件](https://docs.google.com/document/d/1ndUOD-FPSk0AQcn9R-NKDecVxpEFWOC7luV0yrjvSUs/edit?usp=drive_link) | [簡報](https://docs.google.com/presentation/d/1x2AqZMfVqEOsGWXSHRvve_Nmh_deQIsm65RqFBylrtQ/edit?usp=sharing) | [專題連結](https://ieh-linruien-final-202601.vercel.app/) |
| 鄧安序 | [企劃文件](https://docs.google.com/document/d/119AY-bOOyDewm4_Y7Rkrqr65U8q2FhJOfUCiXU7YWPs/edit?usp=drive_link) | [簡報](https://docs.google.com/presentation/d/1WBkCijM7AUYNSK_XTaqERmwBwb8PJ6lFnh_W8sRwRf0/edit?usp=sharing) | [專題連結](https://ieh-denganxu-final-202601.vercel.app/) |
| 王睿森 | [企劃文件](https://docs.google.com/document/d/1hYsUMfzCd57XMpWb1qPh08LUhZhYHWtVvXX5ZrlXxcY/edit?usp=drive_link) | [簡報](https://docs.google.com/presentation/d/1ATQ29GckImEKMSezP3OcbqRH-BdYJh6EW5A1KUSZ1AA/edit?usp=sharing) | [專題連結](https://ieh-wangruisen-final-202601.vercel.app/) |
| 郭芫銘 | [企劃文件](https://docs.google.com/document/d/14_mefbv4auDdpwzM6mRIprWI_b9CEDy1pZPsvofJ84o/edit?usp=drive_link) | [簡報](https://docs.google.com/presentation/d/1aOA5zVeaWGd1X3SrBqe89Im74jd4ycz_-KMapGuNvbU/edit?usp=sharing) | [專題連結](https://ieh-kuoyuanging-final-202601.vercel.app/) |