# IEH 程式隊 2025第三學季 Workshop003

## 🎓 程式課程規劃（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/

## 🤖《我的 AI 角色聊天室》
讓你設計自己的 AI 角色，並透過網頁即時聊天互動，學習 Fetch API、訊息顯示與錯誤處理。


## Gemini AI API

https://ai.google.dev/gemini-api/docs/pricing

https://aistudio.google.com/api-keys

### HTML

  <div class="chat-container">
    <h1>🤖 我的 AI 聊天室</h1>

    <div id="chatBox" class="chat-box"></div>

    <div class="input-area">
      <input id="userInput" placeholder="輸入你的問題…" />
      <button id="sendBtn">送出</button>
    </div>
  </div>

### CSS

/* ===== Body & Container ===== */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.chat-container {
  width: 90%;
  max-width: 400px;
  min-width: 300px;
  height: 80vh;          /* ⭐ 高度自適應畫面 */
  min-height: 300px;     /* ⭐ 最小高度 */
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Title ===== */
h1 {
  text-align: center;
  color: #1a73e8;
  margin: 20px 0;
  font-size: 24px;
}

/* ===== Chat Box ===== */
.chat-box {
  flex: 1;                  /* 中間訊息區自動填滿剩餘空間 */
  padding: 12px;
  background: #f7f9fc;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;         /* 內部 scroll */
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* ===== Messages ===== */
.message {
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 75%;
  word-wrap: break-word;
}

.user {
  background: #e8f0fe;
  color: #1a73e8;
  align-self: flex-end;
  border-bottom-right-radius: 0;
}

.ai {
  background: #e6f4ea;
  color: #188038;
  align-self: flex-start;
  border-bottom-left-radius: 0;
}

.error {
  background: #ffe6e6;
  color: #d93025;
  align-self: center;
  font-style: italic;
}

/* ===== Input Area ===== */
.input-area {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #f1f3f4;
}

input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #ccc;
  font-size: 16px;
}

button {
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #1665c1;
}

/* ===== RWD 微調 ===== */
@media (max-height: 400px) {
  h1 {
    font-size: 20px;
  }
  input {
    font-size: 14px;
  }
  button {
    font-size: 14px;
    padding: 8px 12px;
  }
}

### JS

// ====== Gemini API Key ======
const GEMINI_API_KEY = "???"; // 替換成你的 Key

// ====== DOM ======
const chatBox = document.getElementById("chatBox");
const userInput = document.getElementById("userInput");
const sendBtn = document.getElementById("sendBtn");

// ====== 新增訊息函式 ======
function addMessage(text, className) {
  const div = document.createElement("div");
  div.className = "message " + className;
  div.textContent = text;
  chatBox.appendChild(div);

  // ⭐ 自動捲動到最下面
  chatBox.scrollTop = chatBox.scrollHeight;
}

// ====== 傳訊息給 Gemini AI ======
async function sendMessage() {
  const message = userInput.value.trim();
  if (!message) return;

  addMessage("你：" + message, "user");
  userInput.value = "";

  try {
    const response = await fetch(
      "https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-goog-api-key": GEMINI_API_KEY
        },
        body: JSON.stringify({
          contents: [
            {
              parts: [
                { text: message }
              ]
            }
          ]
        })
      }
    );

    if (!response.ok) {
      throw new Error("API 連線失敗，請檢查 API Key 或額度");
    }

    const data = await response.json();

    if (!data.candidates || !data.candidates[0] || !data.candidates[0].content) {
      throw new Error("AI 沒有回應內容");
    }

    const reply = data.candidates[0].content.parts[0].text;
    addMessage("AI：" + reply, "ai");

  } catch (err) {
    addMessage("⚠️ 發生錯誤：" + err.message, "error");
  }
}

// ====== 事件綁定 ======
sendBtn.addEventListener("click", sendMessage);

userInput.addEventListener("keydown", e => {
  if (e.key === "Enter") sendMessage();
});

## 實作資源

| 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> |

## 發想專題項目

🎯 發想原則：
✅ 用得上 HTML/CSS/JS（延續你之前教的基礎）
✅ 與AI相關
✅ 製作時間約 2–4 堂課可以完成

📆 發表安排提醒：
✅ 每個人都要完成一個自己的專題
✅ 在 1/10（第四堂課）之前提交你的專題題目
✅ 在 1/31 分批上台介紹自己的作品
✅ 完成專題並上台介紹的都有小禮物！

### 報告回報文件夾

- [張加樂](https://docs.google.com/document/d/1JuJ326r3YCWYuonYBTIjUtqJJZO-49G5SvsuKFX2tdE/edit?usp=drive_link)
- [李淮恩](https://docs.google.com/document/d/1FSQYL7-ZbGOIwuUTAT0aw1rFDGAgSvsKiR_V8gq11YU/edit?usp=drive_link)
- [顏嘉宥](https://docs.google.com/document/d/1JZjLRMGu59kwMly6sgtCCBvHeDbUzXvYNroLphY58PI/edit?usp=drive_link)
- [林睿恩](https://docs.google.com/document/d/1ndUOD-FPSk0AQcn9R-NKDecVxpEFWOC7luV0yrjvSUs/edit?usp=drive_link)
- [鄧安序](https://docs.google.com/document/d/119AY-bOOyDewm4_Y7Rkrqr65U8q2FhJOfUCiXU7YWPs/edit?usp=drive_link)
- [王睿森](https://docs.google.com/document/d/1hYsUMfzCd57XMpWb1qPh08LUhZhYHWtVvXX5ZrlXxcY/edit?usp=drive_link)
- [郭芫銘](https://docs.google.com/document/d/14_mefbv4auDdpwzM6mRIprWI_b9CEDy1pZPsvofJ84o/edit?usp=drive_link)