後台管理系統 · 請登入
in xinguang-admin/index.html ══════════════════════════════════════════════════════════════════ -->
┌─────────────────────────────────────────────────────────────────────────────┐
│ 使用者/家長瀏覽器 │
└───────────────────────────────┬─────────────────────────────────────────────┘
│
┌──────────────────────┴──────────────────────┐
▼ ▼
┌─────────────────────┐ ┌────────────────────────┐
│ 主網站 │ │ 後台管理面板 │
│ taipingxinguang.org│ │ admin.taipingxinguang │
│ Railway (nginx) │ │ .org │
│ GitHub: xinguang- │ │ Cloudflare Pages │
│ website (index.html│ │ GitHub: xinguang-admin│
└────────┬────────────┘ └──────────┬─────────────┘
│ POST Webhook │ CSV Sync
│ (5種表單) │
▼ ▼
┌──────────────────────────────────────────────────────────────────┐
│ n8n Cloud │
│ miyutang.app.n8n.cloud │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ WF01:即時表單 │ │ WF02:每日提醒 │ │ WF04:LINE │ │
│ │ 通知 │ │ (07:00 TW) │ │ 好友收集 │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ ┌──────────────┐ │
│ │ WF05:預約 │ │
│ │ 異動/取消 │ │
│ └──────┬───────┘ │
└─────────┼──────────────────────────────────────────────────────┬──┘
│ │
┌────▼─────────────────────────────────────┐ ┌─────────▼────────┐
│ │ │ Google Sheets │
│ ┌──────────────┐ ┌─────────────────┐ │ │ 太平新光招生名單 │
│ │ LINE │ │ Gmail │ │ │ (6 個分頁) │
│ │ 官方帳號 │ │ eagle@taiping │ │ │ - 問課諮詢 │
│ │ @143qbory │ │ xinguang.com │ │ │ - 預約紀錄 │
│ │ (5個群組) │ └─────────────────┘ │ │ - 夏令營報名 │
│ └──────┬───────┘ │ │ - 正式註冊 │
│ │ │ │ - LINE好友 │
│ ┌──────▼───────┐ │ └──────────────────┘
│ │ BotBonnie │ │
│ │ chatbot │ │
│ │ (@143qbory) │ │
│ └──────────────┘ │
└───────────────────────────────────────────┘
┌───────────────────────────────────────────────────┐
│ GitHub Repos (miyutang1980) │
│ - xinguang-website (主網站 index.html) │
│ - xinguang-admin (後台面板 index.html) │
│ - xinguang-n8n (n8n workflow JSONs + guides) │
└───────────────────────────────────────────────────┘
┌───────────────────────────────────────────────────┐
│ Cloudflare DNS │
│ taipingxinguang.org → CNAME → Railway │
│ admin.taipingxinguang.org → CNAME → CF Pages │
└───────────────────────────────────────────────────┘
| 元件 | 平台 | 說明 |
|---|---|---|
| 主網站 | Railway (nginx) | 家長瀏覽 & 表單填寫 |
| 後台面板 | Cloudflare Pages | 管理人員查看資料 |
| 自動化流程 | n8n Cloud | 5個 Workflow,處理通知、提醒、異動 |
| 資料存儲 | Google Sheets | 招生名單(6個分頁) |
| 即時通訊 | LINE Official Account | 5個群組通知 |
| 聊天機器人 | BotBonnie | LINE 自動回覆 & 好友分流 |
| 電子郵件 | Gmail | eagle@taipingxinguang.com |
| 原始碼管理 | GitHub | 3個 Repo |
| DNS & CDN | Cloudflare | DNS 管理 & 安全代理 |
miyutang1980/xinguang-websitemain 分支 → Railway 自動重新部署index.html(全部功能集成於一個檔案中)taipingxinguang.org → CNAME → 4qihqgoo.up.railway.app欄位:
| 欄位名稱 | 說明 |
|---|---|
| 家長姓名 | 必填 |
| 電話 | 必填 |
| 選填 | |
| LINE ID | 選填 |
| 孩子姓名 | 必填 |
| 年級 | 必填 |
| 就讀學校 | 必填 |
| 班級 | 選填 |
| 幼稚園升小一學校 | 若適用 |
| 想了解的班型 | 必填 |
| 問題 | 選填,自由輸入 |
送出流程:
家長填寫 → POST /webhook/xinguang-form
→ n8n WF01
├→ Google Sheets(寫入「問課諮詢」分頁)
├→ LINE Flex Message(綠色卡片)推播至「招生名單群」
└→ Email 寄至 eagle@taipingxinguang.com
欄位:
| 欄位名稱 | 說明 |
|---|---|
| 家長姓名 | 必填 |
| 電話 | 必填 |
| 孩子姓名 | 必填 |
| 類型 | 參訪 / 檢測 / 體驗(三選一) |
| 日期 | 必填,日期選擇器 |
| 時段 | 必填,時段選擇器 |
送出流程:
家長填寫 → Guard Check(已問課?)
├─ 否 → 提示先填問課諮詢
└─ 是 → POST /webhook/xinguang-form
→ n8n WF01
├→ Google Sheets(寫入「預約紀錄」分頁)
├→ LINE Flex Message(橘色卡片)推播至「招生名單群」
└→ Email 寄至 eagle@taipingxinguang.com
與「預約參訪/檢測」流程類似,前置條件為:必須先通過檢測(Assessment Guard)。
送出流程:
家長填寫 → Assessment Guard(已完成檢測?)
├─ 否 → 提示先預約檢測
└─ 是 → POST /webhook/xinguang-form
→ n8n WF01
├→ Google Sheets(寫入「預約紀錄」分頁,類型=體驗課)
├→ LINE Flex Message(橘色卡片)推播至「招生名單群」
└→ Email 寄至 eagle@taipingxinguang.com
欄位:
| 欄位名稱 | 說明 |
|---|---|
| 家長姓名 | 必填 |
| 電話 | 必填 |
| LINE ID | 必填 |
| 孩子列表 | 可新增多位孩子,各自選擇七月/八月日期 |
| 制服尺寸 | 每位孩子各自選擇 |
| 飲食需求 | 普通 / 素食等 |
85折優惠邏輯:
條件(所有條件均需同時成立): 1. 同一位孩子(不可跨孩子合計)七月 + 八月報名天數 ≥ 20 天 2. 報名日期在 5 月 31 日前 顯示文字:「夏令營專屬優惠」(不顯示「85折」字樣)
送出流程:
家長填寫 → 折扣邏輯判斷
→ POST /webhook/xinguang-form
→ n8n WF01
├→ Google Sheets(寫入「夏令營報名」分頁)
├→ LINE Flex Message(綠色帳篷卡片 + 紅色開單卡片)推播至「招生名單群」
└→ Email 寄至 eagle@taipingxinguang.com
欄位:
| 欄位名稱 | 說明 |
|---|---|
| 家長姓名 | 必填 |
| 電話 | 必填 |
| 必填 | |
| 學生姓名 | 必填 |
| 年級 | 必填 |
| 班型 | 必填(依分班結果) |
| 分班結果 | 必填(填入檢測後通知的結果) |
| 附加服務 | 多選,如課後照顧、接送等 |
送出流程:
家長填寫 → Assessment Validation Chain(完整驗證)
├─ 未完成 → 提示尚未完成前置流程
└─ 完成 → POST /webhook/xinguang-form
→ n8n WF01
├→ Google Sheets(寫入「正式註冊」分頁)
├→ LINE Flex Message(紅色開單卡片)推播至「招生名單群」
└→ Email 寄至 eagle@taipingxinguang.com
透過主網站彈出的 Modal 視窗進行操作。
點擊「取消預約」→ Modal 彈出
→ 填寫取消原因
→ POST /webhook/booking-change
→ n8n WF05
├→ Google Sheets(更新「預約紀錄」分頁狀態欄為「已取消」)
├→ LINE 紅色 Flex 卡片(推播至「招生名單群」)
├→ Email 通知 eagle@taipingxinguang.com
└→ 查詢家長 LINE ID → 推播家長個人通知
取消後,網頁顯示重新預約按鈕:
點擊「更改預約」→ Modal 彈出
→ 日期選擇器 + 時段選擇器 + 類型選擇
→ POST /webhook/booking-change
→ n8n WF05
├→ Google Sheets(更新「預約紀錄」分頁狀態欄為「已改期」)
├→ LINE 橘色 Flex 卡片(推播至「招生名單群」)
├→ Email 通知 eagle@taipingxinguang.com
└→ 查詢家長 LINE ID → 推播家長個人通知
https://lin.ee/o1wzF7a(LINE Official Account 加入好友連結)getDowFromDateStr() 使用 Sakamoto 算法計算星期幾JS Date.getDay() 在不同時區環境(Railway 伺服器位於 UTC)下產生日期偏移問題| 用途 | URL |
|---|---|
| 5種表單送出 | https://miyutang.app.n8n.cloud/webhook/xinguang-form |
| 預約異動/取消 | https://miyutang.app.n8n.cloud/webhook/booking-change |
?admin=xinguang2026 即可進入管理模式(顯示隱藏功能)mode: 'no-cors'(避免跨域問題,無法讀取回應內容)xinguang-adminmiyutang1980/xinguang-adminmain 分支 → Cloudflare Pages 自動部署admin.taipingxinguang.org → CNAME → xinguang-admin.pages.dev(Cloudflare Proxy)index.html| 角色 | 帳號 | 密碼 |
|---|---|---|
| 管理員 | admin | xinguang2026 |
| 教師 | teacher | teacher123 |
| 功能 | 說明 |
|---|---|
| 查看問課諮詢 | 列出所有問課記錄 |
| 查看預約紀錄 | 列出所有預約,包含狀態 |
| 查看夏令營報名 | 列出所有夏令營報名 |
| 查看正式註冊 | 列出所有正式學員資料 |
| 同步 Google Sheets | 點擊「同步」按鈕,執行 syncFromSheets() 函數 |
https://docs.google.com/spreadsheets/d/{SHEET_ID}/gviz/tq?tqx=out:csv&sheet={TAB_NAME}1Q3lZwp8BiA6dcz5Bu_WLOitn-a_4O1Z0jDQoG6VMC7wlocalStorage 被攔截,需設定 should_validate: false。miyutang.app.n8n.cloud$env 環境變數,所有 Token、ID、URL 必須直接硬寫在節點設定中。$input.first().json.body,不是 $input.first().json 直接讀取。觸發方式:Webhook POST /xinguang-form
流程圖:
Webhook(接收表單)
│
▼
回應 200 OK(立即回應,避免前端等待)
│
▼
判斷表單類型(Switch 節點)
│
├── 問課諮詢
│ → Code 節點(組合訊息)
│ ├→ LINE Flex Message(綠色卡片)→ api.line.me
│ ├→ Google Sheets(寫入「問課諮詢」分頁)
│ └→ Gmail(寄信至 eagle@taipingxinguang.com)
│
├── 預約參訪/檢測/體驗
│ → Code 節點(組合訊息)
│ ├→ LINE Flex Message(橘色卡片)→ api.line.me
│ ├→ Google Sheets(寫入「預約紀錄」分頁)
│ └→ Gmail
│
├── 夏令營報名
│ → Code 節點(組合訊息)
│ ├→ LINE Flex Message(綠色帳篷卡片 + 紅色開單卡片)→ api.line.me
│ ├→ Google Sheets(寫入「夏令營報名」分頁)
│ └→ Gmail
│
└── 正式註冊
→ Code 節點(組合訊息)
├→ LINE Flex Message(紅色開單卡片)→ api.line.me
├→ Google Sheets(寫入「正式註冊」分頁)
└→ Gmail
技術細節:
| 項目 | 說明 |
|---|---|
| Code 節點資料來源 | $input.first().json.body |
| Sheets 對應模式 | Map Automatically |
| Sheets 分頁名稱 | 動態讀取 {{ $json._sheetName }} |
| LINE API 端點 | https://api.line.me/v2/bot/message/push |
| LINE 推播群組 | C48adfca649b3d5e76f137d582b94fc6b(招生名單群) |
| Email 認證 | Gmail OAuth2 |
觸發方式:Schedule(Cron)
Cron 設定:0 23 * * *(UTC)= 台灣時間 早上 7:00
狀態:Active(啟用中)
流程圖:
排程觸發(每天台灣 07:00)
│
▼
讀取 Google Sheets(「預約紀錄」分頁)
│
▼
Filter 節點(篩選今天 & 明天的預約)
│
▼
組合提醒訊息(Code 節點)
│
▼
LINE 推播提醒至指定群組
用途:每日早晨提醒工作人員當天與隔天的預約行程,避免漏接。
觸發方式:Webhook POST /line-friend
流程圖:
Webhook(接收 LINE 好友資訊)
│
▼
回應 200 OK
│
▼
Google Sheets(Append 新行至「LINE好友」分頁)
使用方式:
觸發方式:Webhook POST /booking-change
流程圖:
Webhook(接收異動/取消請求)
│
▼
回應 200 OK
│
▼
Code 節點(組合訊息,判斷是「取消」還是「改期」)
│
├─ 取消 → LINE 紅色 Flex 卡片推播(招生名單群)
│
├─ 改期 → LINE 橘色 Flex 卡片推播(招生名單群)
│
├─ Gmail 寄信通知
│
├─ 更新 Google Sheets(「預約紀錄」分頁)
│ Append or Update Row,以「家長」欄位為比對鍵
│
└─ 查詢家長 LINE ID(從 Sheets「LINE好友」分頁)
│
▼
組合家長個人通知訊息
│
▼
LINE 推播至家長個人
用途:取得 LINE 群組的 Group ID(設定新群組時使用)
狀態:可停用(日常不需要常駐啟動)
| 項目 | 值 |
|---|---|
| 文件名稱 | 太平新光招生名單 |
| 文件 ID | 1Q3lZwp8BiA6dcz5Bu_WLOitn-a_4O1Z0jDQoG6VMC7w |
| 共用設定 | 需設定「知道連結的人可以查看」(供 Admin 面板讀取 CSV) |
| 欄位 | 說明 |
|---|---|
| 時間 | 自動填入(n8n 時間戳記) |
| 家長 | 家長姓名 |
| 電話 | 聯絡電話 |
| 電子郵件 | |
| LINE | LINE ID |
| 孩子 | 孩子姓名 |
| 班型 | 想了解的班型 |
| 問題 | 家長填寫的問題 |
| 狀態 | 待跟進 / 已聯繫 / 已預約 / 已成交 |
| 欄位 | 說明 |
|---|---|
| 時間 | 自動填入 |
| 家長 | 家長姓名 |
| 電話 | 聯絡電話 |
| 孩子 | 孩子姓名 |
| 類型 | 參訪 / 檢測 / 體驗 |
| 日期 | 預約日期 |
| 時段 | 預約時段 |
| 狀態 | 待確認 / 已確認 / 已完成 / 已取消 / 已改期 |
| 欄位 | 說明 |
|---|---|
| 時間 | 自動填入 |
| 家長 | 家長姓名 |
| 電話 | 聯絡電話 |
| LINE | LINE ID |
| 孩子 | 孩子姓名(含多位) |
| 課程 | 報名的七月/八月日期組合 |
| 飲食 | 飲食需求 |
| 狀態 | 待確認 / 已確認 / 已繳費 |
| 欄位 | 說明 |
|---|---|
| 時間 | 自動填入 |
| 家長 | 家長姓名 |
| 電話 | 聯絡電話 |
| 電子郵件 | |
| 學生 | 學生姓名 |
| 年級 | 就讀年級 |
| 班型 | 報名班型 |
| 分班 | 分班測驗結果 |
| 附加服務 | 選購的附加服務 |
| 狀態 | 待繳費 / 已繳費 / 已報到 |
| 欄位 | 說明 |
|---|---|
| userId | LINE 使用者 ID |
| displayName | LINE 顯示名稱 |
| 電話 | 電話(若已提供) |
| 加入時間 | 加入官方帳號的時間 |
| 來源 | 從哪個管道加入 |
| 項目 | 值 |
|---|---|
| 帳號 ID | @143qbory |
| 加入好友連結 | https://lin.ee/o1wzF7a |
| Channel Access Token | VZXYewFJ392pah0clhor2D/z1vVdw/e/MY8p3YpcJjirl3rsYcC1txyAacUXbaX5PW4Xr5dQqPgbzIzBLFQoafCXNkP0fR80KVSgI4hrlnun/3GMuvEaScOLdJ4cggujFr7CZ8g6EcGH9mxCEtE1VQdB04t89/1O/w1cDnyilFU= |
| 群組名稱 | 群組 ID | 用途 |
|---|---|---|
| 招生名單群 | C48adfca649b3d5e76f137d582b94fc6b | 新客諮詢、預約、報名通知 |
| 營運公告群 | Cad54d7e53d732fbf9f08124dd7a809e6 | 全體員工公告 |
| 教學公告群 | C4fefb574f0948004d9b5d000c269e174 | 教學團隊內部通知 |
| 行銷內容群 | C25aed83efb5d15a490bf1c0cc0789edd | 行銷內容討論與分發 |
| 老闆戰情群 | Cd955a82c2f6e92b97def5b5875464890 | 老闆 + 核心幹部 |
n8n WF01 依據表單類型,推播不同顏色的 Flex Message 卡片。
| 卡片名稱 | 主色 | 觸發時機 | 推播群組 |
|---|---|---|---|
| 問課諮詢卡 | 🟢 綠色 | 家長送出問課諮詢 | 招生名單群 |
| 預約通知卡 | 🟠 橘色 | 家長送出預約(參訪/檢測/體驗) | 招生名單群 |
| 夏令營帳篷卡 | 🟢 綠色帳篷 | 夏令營報名送出 | 招生名單群 |
| 夏令營開單卡 | 🔴 紅色 | 夏令營報名送出(搭配帳篷卡) | 招生名單群 |
| 正式註冊開單卡 | 🔴 紅色 | 正式註冊送出 | 招生名單群 |
| 取消預約卡 | 🔴 紅色 | 預約取消 | 招生名單群 |
| 改期通知卡 | 🟠 橘色 | 預約改期 | 招生名單群 |
| 項目 | 值 |
|---|---|
| BotBonnie Webhook URL | https://webhook.botbonnie.com/v1/line/143qbory |
新朋友加入 @143qbory
│
▼
歡迎訊息(觸發分流)
│
├── 在校生家長
│ → 顯示在校家長專屬選單
│ - 查詢課表
│ - 聯繫老師
│ - 繳費資訊
│
└── 非本校生家長
→ 顯示招生選單
- 了解課程
- 預約參訪
- 加入問課諮詢
1| Repo 名稱 | GitHub 路徑 | 內容說明 |
|---|---|---|
| 主網站 | miyutang1980/xinguang-website | 主網站原始碼(index.html),含所有5種表單、Modal、浮動橫幅 |
| 後台面板 | miyutang1980/xinguang-admin | 後台管理面板原始碼(index.html),含登入、資料瀏覽、Sheets 同步 |
| n8n 備份 | miyutang1980/xinguang-n8n | 所有 n8n Workflow 的 JSON 匯出檔案 + 操作說明文件 |
開發者 push to main
│
├── xinguang-website → Railway 自動重新部署(nginx)
└── xinguang-admin → Cloudflare Pages 自動重新部署
| 記錄名稱 | 類型 | 目標值 | Proxy 狀態 |
|---|---|---|---|
taipingxinguang.org | CNAME | 4qihqgoo.up.railway.app | ✅ Proxied(橘色雲朵) |
admin | CNAME | xinguang-admin.pages.dev | ✅ Proxied(橘色雲朵) |
_railway-verify | TXT | railway-verify=7f6f… | — |
_railway-verify TXT 記錄用於 Railway 平台驗證自訂域名所有權Full (Strict) 確保端對端加密| 服務 | 帳號 | 密碼/Token | 說明 |
|---|---|---|---|
| 主網站 Admin 模式 | — | ?admin=xinguang2026 | URL Query Param |
| 後台管理面板(管理員) | admin | xinguang2026 | 網頁登入 |
| 後台管理面板(教師) | teacher | teacher123 | 網頁登入 |
| n8n Cloud | miyutang.app.n8n.cloud | (使用者帳號) | — |
| LINE Channel Access Token | — | (見第六章 6.1) | 用於 LINE API 推播 |
| GitHub | miyutang1980 | (使用者帳號) | — |
| Google Sheets | — | Google OAuth2 | 透過 n8n Gmail OAuth2 節點 |
| Gmail(接收通知) | eagle@taipingxinguang.com | — | Gmail OAuth2 by n8n |
| 項目 | 說明 |
|---|---|
n8n $env 變數 | n8n Cloud 不支援環境變數($env.XXX),所有 Token、ID、URL 必須直接硬寫在各節點設定中 |
| Webhook Body 路徑 | 表單資料在 $input.first().json.body,不是 $input.first().json(因為 Webhook 節點包了一層 body) |
| Cloudflare Pages 上傳 | 部署至 Cloudflare Pages 時,HTML/JS/CSS 檔案必須放在資料夾根目錄,否則無法正確識別 |
| Admin 面板部署驗證 | deploy_website 使用 should_validate: false,因為 Cloudflare Pages Preview 環境中 localStorage 被攔截 |
| BotBonnie Webhook | LINE 官方帳號的 Webhook URL 不可覆蓋,必須保持 https://webhook.botbonnie.com/v1/line/143qbory |
| 夏令營 85 折計算 | 折扣以單一孩子為計算單位,不能將多個孩子的天數合計;網站不顯示「85折」,顯示為「夏令營專屬優惠」 |
| Fetch CORS 設定 | 所有 Webhook 呼叫使用 mode: 'no-cors',無法讀取回應內容(只能確認送出,不確認成功) |
| 項目 | 說明 |
|---|---|
| 伺服器時區 | Railway 伺服器位於 UTC |
| n8n Cloud 時區 | 預設 UTC |
| 台灣時間 | UTC+8(需在顯示時加 8 小時) |
| 星期計算 | 使用 getDowFromDateStr() Sakamoto 算法,不使用 new Date().getDay() |
| 每日提醒 Cron | 0 23 * * *(UTC)= 台灣時間 07:00 |
為確保家長完整走過招生流程,各表單有嚴格的前置條件:
問課諮詢(無前置條件)
↓
預約參訪/檢測(需先完成問課諮詢)
↓
預約體驗課(需先完成檢測)
↓
正式註冊(需完整通過上述所有步驟)
夏令營報名為獨立流程,不受上述驗證鏈限制。
to 欄位為新群組 IDindex.html(前端顯示)、n8n Code 節點(訊息組合)、Google Sheets(新增欄位)miyutang1980/xinguang-n8n Repo 備份index.html 中的報名日期範圍與優惠截止日(5/31 前)