どこかで、きっと、また。
- ROLE
- 全端開發工程師
- CLIENT
- Eventa
- YEAR
- 2024
- DEPLOY
- CI / CD
- BUILD
- 10 → 3 min
- AI
- Chatbot
Overview專案概述
AI 票務平台針對日常中小型活動（如聚會、市集、工作坊）打造，強調直覺報名流程與「認票不認人」的管理模式，讓主辦方能快速建構活動、管理票券，使用者則可透過 AI 聊天機制獲得個人化活動推薦，提升報名效率與參與體驗。
技術上採用 Next.js App Router 架構，整合 SWR 與 Zustand 管理前端狀態與快取，後端以 Node.js、PostgreSQL、Prisma 建構交易與資料邏輯。整合 AI 機器人 API、票券 QR 驗票、金流、主辦後台等功能，並透過 Docker 與 GitHub Actions 實現自動化部署流程。
AI 客服聊天推薦活動
主辦單位活動建立與後台管理
即時訂單與票券查詢
ECPay 金流與 QR 驗票
自動化部署流程（Docker + GitHub Actions）
多主辦單位支援與活動分群管理
Screens產品畫面
01/ 03
首頁Home
My Contribution我負責的事
- 01整合 AI 對話機器人，實現活動推薦與互動式搜尋。
- 02以 Next.js 實作 SSR 架構。
- 03實現活動建立流程以及後台管理系統。
- 04使用 Docker 實作容器化部署並導入 GitHub Actions 建立自動化 CI/CD。
- 05規劃及調整前後端專案架構並負責團隊進度確認與時程安排，協調任務分工並確保開發節奏穩定推進。
- 06規劃與建立活動建立流程 UI 流程與表單邏輯。
Problems & Decisions問題與決策
團隊為聚會、市集與工作坊等中小型活動打造票務平台，提供活動建立、票券管理與 AI 聊天推薦，採用「認票不認人」的票券管理模式。
- 01
整合 AI 機器人 API，實作公開資料查詢與回應流程，並透過流量控制機制（節流套件）限制過高頻率觸發，避免資源濫用。
- 02
設計活動建立流程的狀態共用邏輯，並處理多入口（編輯/新建）進入流程時的資料載入與狀態初始化。Case 01
- 03
實作跨 SSR 與 Client 的登入狀態一致性機制，結合 Cookie、Storage 與 Middleware，並透過 Next.js API 設定 HttpOnly Cookie，避免於 client 端直接操作，強化安全性。Case 02
- 04
整合 Docker 與 GitHub Actions 實現前後端自動化部署，過程中解決多架構設定問題。Case 03
- 05
優化 Next.js 在 Ubuntu 環境下的建置流程，將建置時間從 10 分鐘縮短至約 3 分鐘。Case 03
CASE 01
新建與編輯的活動表單
- Finding
- 同一活動流程有新建與編輯兩個入口，進入時需要載入正確資料，並初始化表單狀態。
- Decision
- 整理共用的活動建立流程，分別處理新建與編輯入口的資料載入和狀態初始化。
- Result
- 完成活動建立與主辦管理流程，讓新建和編輯入口共用表單操作。
CASE 02
SSR / Client 登入狀態一致性
- Finding
- Next.js 在 SSR / Client 邊界切換時，身分狀態若只存在前端儲存，容易出現首屏判斷與互動狀態不一致，也會增加 token 暴露風險。
- Decision
- 整合 Cookie、Storage 與 Middleware 的登入判斷，並由伺服器設定 HttpOnly Cookie。
- Result
- 完成首屏渲染與瀏覽器互動之間的登入狀態同步。
CASE 03
部署流程與 Ubuntu 建置時間優化
- Finding
- Docker 多架構設定與 GitHub Actions 建置耗時，影響每次部署與驗證的速度。
- Decision
- 整理 Docker 與 GitHub Actions 的部署串接，並調整 Ubuntu 上的 Next.js 建置流程。
- Result
- 在當時的 Ubuntu 環境中，建置時間由約 10 分鐘縮短至約 3 分鐘。
NEXT PROJECT下一個專案
金融資訊平台
Financial Info Platform
金融前台第三階段擴充案。主要負責期信功能模組核心開發，完成後續也接手全案前端維護、優化、調整與收尾，直到第三階段上線。
