# LINE Bot 開發 (搭配 Google Apps Script)

## 案例 1：回聲測試 (Echo Test)

**目標：** 開發一個 LINE Bot，使用 Google Apps Script (GAS) 作為後端，並透過 clasp 進行佈署。

**需求：**

1. **回聲功能**：使用者傳送什麼訊息，Bot 就回覆相同的內容。
2. **Channel Access Token (Long-lived)**：

你的專屬Token

**交付項目：**

* 完整的 GAS 程式碼。
* clasp 佈署指令/說明。

---

## 案例 2：連動 Google Sheet (業務邏輯)

**目標：** 修改現有程式碼，加入與 Google 試算表的連動與特定業務邏輯。

**環境設定：**

* 建立一個 Google Sheet 並連動至 GAS。
* **分頁 A `Dashboard**`：
* `B1` 儲存格：OTD 數值。
* `C1` 儲存格：停機時間數值。

* **分頁 B `Records**`：
* 用途：存檔/紀錄 log。

**實作邏輯：**

1. **查詢功能 (Dashboard)**
* **觸發條件**：`userMessage` 包含關鍵字 **『戰情』** 或 **『數據』**。
* **動作**：讀取 `Dashboard` 分頁的 `B1` 與 `C1`。
* **回覆**：「報告主管，今日 OTD 為 `[B1數值]`，累積停機 `[C1數值]`」。

2. **紀錄功能 (Logging)**
* **觸發條件**：`userMessage` 以 **『回報』** 開頭（範例：`'回報 3號機異常'`）。
* **動作**：將 `[現在時間, 訊息內容]` 寫入 `Records` 分頁的新的一行 (`appendRow`)。
* **回覆**：「✅ 已紀錄異常事項」。

3. **其他**
* 維持原樣回覆 (Echo) 或不處理。

---

## 案例 3：連動多模態模型 (Multimodal AI)

**目標：** 整合圖像辨識功能，讓 Bot 能看懂使用者上傳的圖片。

**環境設定：**

* **API Provider**：Groq
* **Model**：`meta-llama/llama-4-scout-17b-16e-instruct`
* **API Key**：

你的專屬API Key

**實作邏輯：**

* 當使用者上傳圖片時。
* 呼叫 API 進行圖片辨識。
* 回傳模型從圖片中看到的事物描述。

---

## 案例 4：導引式對話服務 (員工請假引導)

**目標：** 開發一個 LINE Webhook 應用程式，引導員工完成請假流程。

**環境設定：**

1. 綁定 Google Sheet 目標工作表名稱：`LeaveRecords`。
2. **Channel Access Token**：

你的專屬Token

**互動流程邏輯 (State Flow)：**

1. **觸發請假**
* **User**：傳送文字 **"我要請假"**。
* **Bot**：回覆 LINE Flex Message (或 Template Message)。
* 包含 **"Date Picker Action"** (選取日期)。
* Payload 設定：`action=select_date`。

2. **選取日期 (Postback Event)**
* **User**：選取日期。
* **Bot**：
* 抓取日期參數 `event.postback.params.date`。
* 暫存日期 (或直接帶入下一步)。
* 回覆 **"Quick Reply" (快速回覆)** 選單。
* 選項：`[事假, 病假, 特休, 公假]`。
* Postback Data 格式：`action=select_type&date={剛選的日期}&type={假別}`。

3. **點選假別 (Postback Event)**
* **User**：點選假別。
* **Bot**：
* 解析 Postback data 取得 `date` 和 `type`。
* 呼叫 **LINE Profile API** 取得使用者 `displayName`。
* 寫入 Google Sheet `LeaveRecords`：`[時間, userId, displayName, date, type, '待審核']`。
* 回覆：「申請已送出！日期：`{date}`，假別：`{type}`」。

**程式碼要求：**

* 包含簡單的錯誤處理。
* 提供 clasp 佈署方式。

---

## 案例 5：美化 UI (Flex Message 設計)

**目標：** 優化請假確認介面。

**需求：**

* 設計一個 **Flex Message**。
* **樣式**：類似「機票登機證」。
* **顯示資訊**：請假日期、假別。
* **互動按鈕**：
1. 『確認送出』 (觸發 Postback)
2. 『取消』 (觸發 Postback)

---

## 案例 6：使用官方 JSON 樣板

**目標：** 使用指定的 JSON 結構封裝成函式，並動態替換內容。

**輸入樣板 (Reference JSON)：**
*(來源：[https://developers.line.biz/flex-simulator/](https://developers.line.biz/flex-simulator/))*

{
  "type": "bubble",
  "hero": {
    "type": "image",
    "url": "https://developers-resource.landpress.line.me/fx/img/01_3_movie.png",
    "size": "full",
    "aspectRatio": "20:13",
    "aspectMode": "cover",
    "action": {
      "type": "uri",
      "uri": "https://line.me/"
    }
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "text",
        "text": "BROWN'S ADVENTURE\nIN MOVIE",
        "wrap": true,
        "weight": "bold",
        "gravity": "center",
        "size": "xl"
      },
      {
        "type": "box",
        "layout": "baseline",
        "margin": "md",
        "contents": [
          { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" },
          { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" },
          { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" },
          { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gold_star_28.png" },
          { "type": "icon", "size": "sm", "url": "https://developers-resource.landpress.line.me/fx/img/review_gray_star_28.png" },
          { "type": "text", "text": "4.0", "size": "sm", "color": "#999999", "margin": "md", "flex": 0 }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "margin": "lg",
        "spacing": "sm",
        "contents": [
          {
            "type": "box",
            "layout": "baseline",
            "spacing": "sm",
            "contents": [
              { "type": "text", "text": "Date", "color": "#aaaaaa", "size": "sm", "flex": 1 },
              { "type": "text", "text": "Monday 25, 9:00PM", "wrap": true, "size": "sm", "color": "#666666", "flex": 4 }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "spacing": "sm",
            "contents": [
              { "type": "text", "text": "Place", "color": "#aaaaaa", "size": "sm", "flex": 1 },
              { "type": "text", "text": "7 Floor, No.3", "wrap": true, "color": "#666666", "size": "sm", "flex": 4 }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "spacing": "sm",
            "contents": [
              { "type": "text", "text": "Seats", "color": "#aaaaaa", "size": "sm", "flex": 1 },
              { "type": "text", "text": "C Row, 18 Seat", "wrap": true, "color": "#666666", "size": "sm", "flex": 4 }
            ]
          }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "margin": "xxl",
        "contents": [
          {
            "type": "image",
            "url": "https://developers-resource.landpress.line.me/fx/img/linecorp_code_withborder.png",
            "aspectMode": "cover",
            "size": "xl",
            "margin": "md"
          },
          {
            "type": "text",
            "text": "You can enter the theater by using this code instead of a ticket",
            "color": "#aaaaaa",
            "wrap": true,
            "margin": "xxl",
            "size": "xs"
          }
        ]
      }
    ]
  }
}

**需求：**

1. **封裝**：將上述 JSON 封裝成一個 GAS 函式：`sendLeaveTicket(userId, date, type)`。
2. **內容替換**：
* **標題**：修改為 **『請假單』**。
* **Date 欄位**：替換為傳入參數 `date`。
* **Place 欄位**：替換為傳入參數 `userName` (注意：需自行獲取或傳入 userName，函式簽章未包含，但需求描述有提及)。
* **Seats 欄位**：替換為傳入參數 `type` (假別)。