線上團體導覽系統

本專案為 美術館、博物館及工廠 設計了一套高解析度 環景導覽線上會議系統，使導覽員能夠帶領不同地點的參與者進行沉浸式參觀，同時實現多方即時同步互動。

此系統提升了遠端導覽的品質，也讓博物館及展覽單位能夠在 數位轉型 中提供更高端的遠端體驗。

我的角色與貢獻 (技術主管)

🔹 專案管理

• 需求規劃
• 與導覽單位溝通，發現部分參與者無法準時進入導覽會議，且臨時通知流程不夠流暢，影響導覽體驗。
• 提出倒數與轉址頁面方案，確保與會者能提前預約，並在會議開始前獲得提醒。
• 根據需求拆解功能模組，制定開發時程，確保專案按期交付。
• 與設計、營運團隊協作，確保 UI/UX 設計直觀，並符合不同導覽單位的需求。
• 建立 跨部門協作流程，確保產品設計、後端、前端、運營團隊的需求一致。
• 時程與進度管理
• 規劃 開發時程，確保倒數頁面、預約系統、郵件通知功能按期上線。
• 設定開發里程碑，並定期與團隊對齊進度，確保核心功能如 WebRTC、環景同步機制按時上線。
• 流程優化與溝通
• 建立 需求文件標準化流程，確保所有新功能的開發與測試都有明確的技術規範與驗收標準。
• 透過 Google Sheet 追蹤任務狀態，減少溝通成本，提升團隊開發效率。
• 簡化參與者操作流程，讓用戶能透過 單一入口 預約導覽，避免分散式通知造成的混亂。
• 設計 自動郵件提醒系統，讓參與者在會議開始前獲得郵件通知，提高出席率。

🔹 技術開發

• 撰寫技術文檔
• 架構與設計文件：整理系統架構、微前端插件、WebRTC 串流與 WebSocket 同步機制，並製作架構圖。
• API 文件：使用 Swagger/OpenAPI 撰寫 REST API & WebSocket API 規格，提供範例，確保開發人員快速對接。
• 開發與部署指南：撰寫微前端開發手冊與環境設定流程，指導團隊如何嵌入與部署系統。
• 系統架構與技術決策
• 規劃並實作 微前端架構，將環景導覽 UI 與 WebRTC 會議功能拆分為獨立插件，提升可維護性與可擴展性。
• 設計 Valtio Proxy 狀態管理機制，確保多人導覽與中途加入時，畫面、標記點、音效同步一致。
• 參與 WebRTC 與 WebSocket 整合，確保多人會議與環景導覽的互動流暢度。
• 效能與使用者體驗優化
• 針對 環景導覽的即時同步問題，優化 WebSocket 資料流，使畫面同步延遲從 500ms 降至 100ms。
• 透過 伺服器端渲染（SSR），確保倒數頁面即時更新，避免瀏覽器快取影響倒數計時準確性。
• 設計 適用於不同裝置的 UI，確保手機、平板、電腦用戶都能流暢使用預約與提醒功能。
• 後端 API 設計與整合
• 開發 動態會議管理 API，讓管理員能夠建立、關閉與監控遠端導覽房間。
• 將 Strapi CMS 與 NextJS 管理後台整合，提供權限管理與會議控制功能，讓不同身份的用戶能夠靈活管理導覽專案。

核心功能

• 🎤 多對多語音串流、畫面串流
• 💬 多對多文字聊天室
• 🔄 同步功能：畫面、音效、標記點
• 🚀 流暢的 UX
• 📌 使用情境可參考 環耀實境線上導覽系列活動

技術架構

本系統採用 微前端架構，並包含四大核心模組：

1. 微前端模板專案 (React + Valtio) 

• 目的：提供可復用的 遊戲化 UI 元件，幫助前端工程師與設計師快速開發沉浸式網頁。
• 特色：
• Valtio proxy 狀態管理：實現跨頁面的 中央化狀態管理，確保所有參與者的頁面狀態同步。
• 與 Krpano 通訊：可與 Krpano（環景技術）進行互動，實現場景內與所有介面的即時控制。

2. 團體導覽微前端 (React) 

• 目的：可作為插件嵌入任何網站，提供線上會議功能。
• 特色：
• 可與微前端模板專案結合，實現環景同步控制。
• 具備 WebRTC 串流技術，支援多人會議。

3. 團體導覽後端 (Express + WebSocket) 

• 目的：負責多人同步導覽的即時通訊。
• 特色：
• 基於 WebSocket 實現多人同步互動，確保所有參與者都能看到相同的環景畫面。
• 動態會議管理 API，可接收來自管理系統的創建/關閉房間指令。

4. 管理系統 (NextJS + Strapi) 

• 目的：提供導覽管理後台，控制不同用戶的權限與會議管理。
• 特色：
• 使用 Strapi 作為 CMS，負責管理 博物館、老師、助教的身份權限。
• 自定義 WebSocket API，確保數據變更時能同步影響管理後台與前端介面。

技術亮點

• 🔹 微前端架構：前端插件可獨立使用，無縫嵌入其他環景專案。
• 🔹 Valtio Proxy 狀態管理：透過 Proxy 物件實現 多人環景同步，確保所有參與者的頁面行為一致。
• 🔹 Socket + WebRTC 技術：提供流暢的多人互動導覽體驗，解決傳統視訊會議無法同步操控的問題。
• 🔹 可擴展性設計：設計師可直接使用插件，在 PanotourPro 內快速配置導覽狀態。
• 🔹 Strapi CMS 結合 NextJS：提供可管理的後台系統，讓管理員輕鬆控制導覽會議。

影響力與應用

✅ 提升遠端導覽體驗：讓博物館、美術館能夠遠端接待世界各地的參與者。

✅ 減少實體導覽的限制：參與者不再受地理限制，即使不在現場也能獲得導覽員同步控制的環景體驗。

✅ 提高導覽管理效率：透過 管理系統，可輕鬆管理不同的專案、導覽員及訪客權限。

✅ 適用於 B2B 市場：此技術不僅適用於博物館、美術館，也可應用於工廠導覽、線上教育等場景。