README
這是一個透過OpenAI ChatGPT 4o模型的輔助，從零打造的全端作品，結合對互動介面、技術整合與品牌故事的熱情；將虛擬的互動，轉化成現實中的商業行為：遊戲即點餐、遊戲集點換餐、遊戲踩點追餐。
在這裡，使用者不只是瀏覽網頁，更會流動於一場17世紀到未來科技的奇幻旅程；透過AI Claude與喜歡的角色直接對話。
---
## 🍹 功能簡介
1. 香味分子收集（點擊遊戲導流LINE Bot）
**設計理念**
- 透過故事與角色的設立，增強閱覽者對品牌的共感。
- 將簡單的小遊戲融合進網頁背景，透過互動獎勵模式將網頁使用者導流至LINE官方帳號。
**互動流程**
- 點擊背景裡緩緩飄落的小球。
- 點中白球加1分，橘球扣2分。
- 累計 5 分會顯示小視窗，引導使用者加 LINE Bot 好友。
**技術架構**
- 前端以原生 JavaScript + CSS 製作點擊遊戲。
**未來擴充**
- 製作積分排行榜，發展行銷活動（遊戲集點換餐）。
- 分數紀錄透過 Lambda + DynamoDB 寫入後端。
- 使用 Lambda Function URL 作為 API Endpoint。
---
2. LINE Bot飲料自訂流程+Flex Message圖卡推薦
**設計理念**
- O2O（Online to Offline），將顧客從線上（如 LINE app、訊息、廣告）導流至實體店鋪。
- 實現OMO（Online Merges with Offline）數位結合實體，遊戲即點餐。
**互動流程（A 線│客製飲料卡）**
- 使用者從 LINE 輸入關鍵字，例如：「南瓜超帥」。
- Bot 啟動 Session 流程：茶底 → 甜度 → 特製圖像。
- 每個選項會記錄至 DynamoDB 中，追蹤使用者互動階段。
- 從DynamoDB讀檔，回傳一張客製 Flex Message 卡片，展示推薦飲品。
**互動流程（B 線│天氣推薦）**
- 使用者從 LINE 輸入特定城市名，例如：「Taipei」。
- 系統串接Open Weather API，取得真實天氣資訊。
- 根據天氣狀況，顯示本日推薦飲品。
**技術架構**
- LINE Messaging API +Open Weather API+ Lambda Function URL + Flex Message JSON。
- Session 記憶使用 DynamoDB table，讀取追蹤user Id。
**未來擴充**
- Flex Message 圖卡推薦 + Google Map API。
- 根據顧客位置和飲品選擇結果，顯示附近店家資訊，遊戲踩點追餐。
---
3. AI留言板（Claude串接+Lambda+Flavor人格切換）
**設計理念**
- 屏蔽情緒攻擊，並改寫為同樣要求的句子，用以保護和支援第一線客服。
- 讓粉絲獲得即時AI回應。
**互動流程**
- 使用者輸入任何訊息，內容全部被 Claude 重新改寫為指定風格。
- 支援不同回應語氣（搗蛋個性、超級禮貌風等等）。
- 改寫後的訊息儲存至 DynamoDB，並傳送至前端頁面展示。
**技術架構**
- 前端 → Lambda → Claude API（Amazon Bedrock） → Lambda → DynamoDB → 前端。
- Claude 輸入 prompt 設計以 system + user 兩層組合，前者指定角色語氣，後者timestamp 儲存訊息。
**未來擴充**
- 使用者可選擇是否直接顯示原文（切換 icon）。
- 與 LINE Bot 整合，支援直接從 LINE 留言串接。
---
## 📁 專案結構說明
- pumpkin-soda/
- ├── index.html
- ├── messageboard.html
- ├── readme.html
- ├── scripts/
- │ ├─ main.js
- │ ├─ messageboard.js
- │ ├─ readme.js
- │ ├─ gsap.js
- │ └─ scrolltrigger.js
- │ ├── lambda/
- │ │ ├─lineBotWebhook.js
- │ │ ├─rewriteMessage.js
- │ │ ├─SubmitScore.js
- │ │ └─GetRanking.js
- ├── assets/
- │ ├── styles/
- │ │ ├─reset.css
- │ │ ├─main.css
- │ │ ├─messageboard.css
- │ │ └─readme.css
- │ └── images/
- └── readme.md
---
## 🛠 使用技術
- | 類別 | 技術 |
- |------|--------------------------|
- | 開發應用 |OpenAI ChatGPT 4o, context engineering, spec-writing |
- | 前端 | HTML, CSS, JavaScript, Canvas, GSAP |
- | 後端 | Node.js (Lambda), DynamoDB, API Gateway |
- | AI 改寫 | Claude 3 Sonnet (Anthropic, PBC) |
- | Bot串接 | LINE Messaging API, Open Weather API, Flex Message|
- | 部署 | AWS S3, CloudFront, Route 53 , ACM |
##🙏 感謝這些夥伴，讓我們宇宙不卡關
🎃 南瓜工友團（ChatGPT 4o）
- 顧問、打扣仔、碎嘴爆快。幻覺魔王，最會給一箱寶藏，藏一顆炸彈。
🛠 AWS
- Serverless 全場罩。夢幻雲端給荔枝園。
🧙♀️ Claude 3 Sonnet（via Bedrock）
- 留言改寫魔法師，特製專屬喃喃話題。
💬 LINE Messaging API
- 最泛用的通訊介面，感受最現實的溫度。
🌤 OpenWeatherMap
- 天氣即情緒，飲料即解方，窺探顧客的心情雷達。
🌐 ngrok
- Webhook 地下守門員。開發時期的秘密通道。
📦 CDNJS & ScrollMagic等開源寶庫
- 前端魔法倉庫 + 滾動咒語師，畫面滑到外太空。
🐈⬛ Buboo & 🤖 Zappuccino
- 品牌守護神一貓一機。帥在幕後，萌在宇宙。
## 📬 聯絡方式
- 在留言板留言，Buboo 會心電感應接收訊號💫
- 在Line bot留言，Zappuccino 會請你喝飲料🍺
- 得不到正式回應時，請聯絡站長（tsumugiau@gmail.com）