水域安全暨碼頭資訊整合平台建置計畫

# 水域安全暨碼頭資訊整合平台<br/>建置計畫

### 臺北市政府體育局　勞務採購案（tms115140）

<p style="font-size:.8em; color:#475569; margin-top:1.2em;">服務建議書簡報</p>

<p style="font-size:.72em; color:#64748b; margin-top:1.6em;">投標廠商：<strong>提特斯科技有限公司</strong>　｜　統一編號 97512668　｜　負責人 楊嘉豪</p>

</div>

<p class="footer-ref">(對照服務建議書 執行摘要, p.1)</p>

---

## 簡報大綱

| § | 主題 | 對應服務建議書章節 |
|:-:|---|---|
| 1 | **需求理解與系統建置能力** | 參、肆 |
| 2 | 資訊安全與資料備援 | 伍 |
| 3 | 專案規劃與管理 | 貳 |
| 4 | 價格合理性與經費說明 | 陸 |
| 5 | 公司履約能力與專案團隊 | 壹・附件一・二 |
| 6 | 風險管理與履約承諾 | 柒 |

<p class="lead" style="font-size:.78em; margin-top:.6em;">主軸：以單一入口取代現行 Google 表單，於「租借系統 2.0」架構下整合行前、現場、事後一站式服務。</p>

<p class="footer-ref">(對照服務建議書 執行摘要, p.1)</p>

---

## <span style="color:#fff;">壹　需求理解與系統建置能力</span>

<p style="font-size:.9em; color:#e0e7ff; margin-top:.8em;">從現況痛點到單一入口願景，逐項對上指定技術棧與整合要求</p>

</div>

<p class="footer-ref" style="color:#c7d2fe;">(對照服務建議書 參, p.11)</p>

---

## 方案總覽：水域安全資訊單一入口

![方案總覽](diagrams/86-executive-overview.svg)

<p class="lead" style="font-size:.78em;">建置水域安全資訊<strong>對外單一入口</strong>，取代現行分散的 Google 表單，整合開放規範、碼頭資訊、潮汐天候、活動登錄、投保與統計，並以子系統納入「租借系統 2.0」三層架構下。</p>

<p class="footer-ref">(對照服務建議書 參之一, p.11)</p>

---

## 現況三痛點 → 一站式願景

![使用者旅程](diagrams/70-user-journey.svg)

<div class="cards">
<div class="card"><h4 style="color:#dc2626;">痛點一　資訊分散</h4>規範、碼頭、天候資訊散落多處，民眾行前難以一次掌握。</div>
<div class="card"><h4 style="color:#dc2626;">痛點二　表單單向</h4>Google 表單僅單向蒐集，無欄位邏輯、無權限分級、無儀表板。</div>
<div class="card"><h4 style="color:#dc2626;">痛點三　無法分流統計</h4>個人與團隊活動無法歸戶、分流與統計分析。</div>
</div>

</div>

<p class="gain" style="font-size:.76em; margin-top:.4em;">願景：行前查詢 → 現場登錄 → 事後統計，一站式整合於同一平台。</p>

<p class="footer-ref">(對照服務建議書 參之一, p.11)</p>

---

## <span style="color:#fff;">系統功能：六大模組</span>

<p style="font-size:.9em; color:#e0f2fe; margin-top:.8em;">以 API 為界、模組化結構，新增模組不影響既有模組</p>

</div>

<p class="footer-ref" style="color:#bae6fd;">(對照服務建議書 參之二, p.12)</p>

---

## 六大模組總覽

![六大模組總覽](diagrams/71-module-overview.svg)

<p class="lead" style="font-size:.76em;">資訊提供、活動登錄、投保資訊、統計儀表板、推廣活動、教育訓練上線——六模組以 API 為界、模組化結構，前台對民眾與團隊，後台串接氣象潮汐等外部資料源。</p>

<p class="footer-ref">(對照服務建議書 參之二, p.12)</p>

---

## 資訊提供模組：正確性把關

<div class="cards">
<div class="card"><h4>開放規範與五類裝備檢核</h4>水域開放範圍規範＋五類裝備檢核清單，行前自我檢視。</div>
<div class="card"><h4>碼頭資訊與公告</h4>各碼頭基本資訊、即時公告統一發布。</div>
<div class="card"><h4>天候潮汐顯示</h4>串接中央氣象署資料，呈現潮汐與沿岸潮位。</div>
</div>

<div class="cards">
<div class="card"><h4 style="color:#16A34A;">專家審查機制</h4>安全宣導與規範內容經<strong>專家審查</strong>後上架，確保資訊正確性與權威性。</div>
<div class="card"><h4>內容後台維護</h4>第一線單位可自主維護公告與規範，權限控管分級。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 參之二, p.12)</p>

---

## 活動登錄：免註冊快速登錄

![身分識別方案評估](diagrams/73-identity-decision.svg)

<p class="lead" style="font-size:.78em;">三方案評估後選定<strong>免註冊登錄</strong>：掃描碼頭 QRcode 即填即送、不留帳號密碼、降低民眾使用門檻；<strong>緊急聯絡人為必填</strong>，兼顧安全管理需求。</p>

<p class="footer-ref">(對照服務建議書 參之三, p.13)</p>

---

## 下水前 / 上岸後　雙模式登錄

![登錄流程](diagrams/72-registration-sequence.svg)

<div class="cards">
<div class="card"><h4>下水前登記</h4>碼頭、活動目的、預計時間、現場照片（時間可修改）。</div>
<div class="card"><h4>上岸後回報</h4>上岸時間、現場照片、滿意度回饋。</div>
<div class="card"><h4>個人＋團隊歸戶</h4>團隊建名冊整體登記，個人與團隊分流統計。</div>
<div class="card"><h4 style="color:#16A34A;">欄位邏輯檢查</h4>必填／格式檢核；上岸時間須晚於下水時間。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 參之三, p.13)</p>

---

## 統計與管理儀表板

![儀表板資訊架構](diagrams/74-dashboard-ia.svg)

<p class="lead" style="font-size:.78em;">後台權限控管，呈現下水人次、碼頭使用、個人／團隊分流、活動類別與滿意度；<strong>折線、長條、圓餅圖可篩選</strong>，報表支援 <strong>MS Excel 輸出</strong>，供第一線單位自主維護與分析。</p>

<p class="footer-ref">(對照服務建議書 參之五, p.16)</p>

---

## 投保資訊專區

<div class="cards" style="grid-template-columns:1fr 1fr;">
<div class="card"><h4>保險說明</h4>於平台設置投保資訊專區，提供水域活動相關保險說明與須知。</div>
<div class="card"><h4>投保導引連結</h4>提供投保連結與導引頁，引導民眾完成投保。</div>
<div class="card"><h4 style="color:#16A34A;">不指定保險公司</h4>不綁定特定保險公司，維持中立。</div>
<div class="card"><h4>保留擴充彈性</h4>架構保留擴充，未來可依需求介接投保 API。</div>
</div>

<p class="lead" style="font-size:.76em; margin-top:.5em;">交付承諾以<strong>投保導引頁</strong>為界，符合貴局保險資訊提供之需求。</p>

<p class="footer-ref">(對照服務建議書 參之四, p.15)</p>

---

## 三層架構與指定技術棧

![三層式系統架構](diagrams/75-three-tier-architecture.svg)

<div class="cards">
<div class="card"><h4>表現層　Vue.js 3</h4>前後台 RWD 行動優先，UI 元件庫採非中資方案。</div>
<div class="card"><h4>應用層　C#.NET</h4>業務邏輯、權限控管、RESTful API。</div>
<div class="card"><h4>資料層　MySQL 8.x</h4>關聯式資料庫，定時自動備份。</div>
<div class="card"><h4 style="color:#16A34A;">Docker 全程容器化</h4>逐項命中招標文件指定技術棧。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 肆之一, p.17)</p>

---

## 整合於「租借系統 2.0」架構下

<div class="cards" style="grid-template-columns:1fr 1fr;">
<div class="card"><h4>共用基礎以子系統納入</h4>共用登入、版面框架與部署規範，以子系統方式納入租借系統 2.0。</div>
<div class="card"><h4>RESTful API 串接</h4>以 RESTful API 串接場館租借系統與碼頭資訊，避免重複維護。</div>
<div class="card"><h4>共通性 API 規範</h4>依國發會「共通性 API 規範」設計介接介面。</div>
<div class="card"><h4 style="color:#16A34A;">OpenAPI 文件化</h4>介接介面以 OpenAPI 文件化，降低整合風險。</div>
</div>

<p class="lead" style="font-size:.76em; margin-top:.5em;">跨系統整合是評審焦點；本團隊以標準化介接與文件化降低整合不確定性。</p>

<p class="footer-ref">(對照服務建議書 肆之二, p.19)</p>

---

## 氣象潮汐介接與失效備援

![外部介接資料流](diagrams/77-external-dataflow.svg)

<div class="cards">
<div class="card"><h4>中央氣象署 opendata</h4>潮汐預報 <strong>F-A0021-001</strong>、沿岸潮位 <strong>O-A0017-001</strong>。</div>
<div class="card"><h4 style="color:#16A34A;">失效備援</h4>介接失效採 last-known-good 本地快取＋時間戳，標示「資料更新時間」。</div>
<div class="card"><h4>核心頁不中斷</h4>外部資料源異常時，核心查詢與登錄功能維持可用。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 肆之三, p.20)</p>

---

## 跨平台、無障礙與效能

![跨平台無障礙效能](diagrams/78-rwd-accessibility.svg)

<p class="lead" style="font-size:.78em;">RWD 行動優先、跨瀏覽器與多作業系統相容；依數位部無障礙規範以 <strong>Freego 檢測</strong>；前端、後端與資料庫效能調校，配合上線前壓力測試門檻驗收。</p>

<p class="footer-ref">(對照服務建議書 肆之四, p.21)</p>

---

## <span style="color:#fff;">貳　資訊安全與資料備援</span>

<p style="font-size:.9em; color:#e2e8f0; margin-top:.8em;">縱深防禦、上線前檢測、壓測門檻、備援回復與資安事件 SLA</p>

</div>

<p class="footer-ref" style="color:#cbd5e1;">(對照服務建議書 伍, p.22)</p>

---

## 縱深防禦：五層資安防護

![縱深防禦架構](diagrams/79-defense-in-depth.svg)

<p class="lead" style="font-size:.76em;">由外而內五層防護：傳輸層 <strong>HTTPS/TLS</strong> → 身分與權限最小化 → 應用安全 → 資料保護（密碼<strong>單向雜湊加鹽</strong>、不側錄、不硬編於原始碼）→ 監控檢測（日誌四要素、每季提送、後台僅限內部 IP）。逐層收斂攻擊面。</p>

<p class="footer-ref">(對照服務建議書 伍之一, p.22)</p>

---

## 上線前資安檢測關卡（115/10/31 前）

<div class="cards">
<div class="card"><h4>SAST 原始碼掃描</h4>靜態分析原始碼，無 OWASP Top 10 弱點。</div>
<div class="card"><h4>DAST 動態掃描</h4>動態測試運行中系統，無中、高風險項目。</div>
<div class="card"><h4>惡意程式檢測</h4>交付前完成惡意程式碼檢測。</div>
</div>

<div class="cards">
<div class="card"><h4 style="color:#16A34A;">配合主管機關複核</h4>配合資訊局 / 行政院執行弱點掃描、滲透測試與原碼掃描。</div>
<div class="card"><h4>修復後始得上線</h4>檢出之中、高風險缺失修復並複測通過，方完成第二期上線。</div>
</div>

</div>

<p class="lead" style="font-size:.74em; margin-top:.4em;">資安檢測為<strong>上線前必過關卡</strong>，與第二期里程碑（115/10/31 前）綁定。</p>

<p class="footer-ref">(對照服務建議書 伍之二, p.23)</p>

---

## 壓力測試驗收門檻

<div class="cards">
<div class="card"><h4>併發負載</h4><strong>200 人同時上線、持續 10 小時</strong>。</div>
<div class="card"><h4 style="color:#16A34A;">平均反應時間</h4><strong>< 4 秒</strong>。</div>
<div class="card"><h4 style="color:#16A34A;">交易成功率</h4><strong>≥ 99%</strong>。</div>
<div class="card"><h4>逾時比例</h4>反應時間 > 6 秒之比例 <strong>≤ 1%</strong>。</div>
</div>

<div class="cards">
<div class="card"><h4>場景設計</h4>模擬下水尖峰掃碼登錄、儀表板查詢與報表輸出並行。</div>
<div class="card"><h4>調校三層</h4>前端、後端與資料庫逐層效能調校至達標。</div>
<div class="card" style="border-color:#94a3b8;"><h4 style="color:#475569;">門檻依招標文件為準</h4>上列數值以招標文件實際載列者為準。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 伍之二, p.23)</p>

---

## 資料備援與回復機制

![備援機制與資安事件時間軸](diagrams/80-backup-sla-timeline.svg)

<p class="lead" style="font-size:.78em;">資料庫<strong>定時自動備份</strong>，單日累計故障時間 <strong>≤ 4 小時</strong>；每年至少辦理 <strong>1 次備份還原測試</strong>與災害復原演練，確保備份可用、回復程序熟練。</p>

<p class="footer-ref">(對照服務建議書 伍之三, p.24)</p>

---

## 資安事件 SLA 與個資保護

<div class="cards">
<div class="card"><h4 style="color:#dc2626;">通報　1 小時</h4>察覺資安事件後 1 小時內通報。</div>
<div class="card"><h4>復原　72 小時（重大 36 小時）</h4>限期完成系統復原。</div>
<div class="card"><h4>改善報告　1 個月內</h4>復原後 1 個月內提送改善報告。</div>
<div class="card"><h4 style="color:#16A34A;">24 小時全年無休應變</h4>建立常態應變窗口。</div>
</div>

<div class="cards">
<div class="card"><h4>個資安全維護</h4>依個資法施行細則第 12 條 11 款落實安全維護措施。</div>
<div class="card"><h4>不複委託</h4>本案不分包、不轉包，個資不流出本團隊。</div>
<div class="card" style="border-color:#dc2626;"><h4 style="color:#dc2626;">陸資禁令</h4>軟硬體與服務符合大陸資通訊產品禁用規範。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 伍之三, p.24／伍之四, p.25)</p>

---

## <span style="color:#fff;">參　專案規劃與管理</span>

<p style="font-size:.9em; color:#d1fae5; margin-top:.8em;">混合式方法論、三期里程碑甘特、人力配置與變更／SLA 管理</p>

</div>

<p class="footer-ref" style="color:#bbf7d0;">(對照服務建議書 貳, p.5)</p>

---

## 混合式專案方法論

![方法論比較](diagrams/61-methodology-compare.svg)

<p class="lead" style="font-size:.76em;">依 <strong>PMBOK 第七版</strong>多方案比較後採<strong>混合式</strong>：外層瀑布鎖定三期里程碑與交付節點，期內以敏捷短迭代推進並搭配<strong>雙月工作會議</strong>。需求衝突優先序：訪談紀錄 > 需求說明書 > 服務建議書。</p>

<p class="footer-ref">(對照服務建議書 貳之四, p.8)</p>

---

## 三期里程碑與時程

![三期里程碑甘特](diagrams/60-gantt-milestone.svg)

<p class="lead" style="font-size:.76em;"><strong>第一期</strong>決標後 15 日（需求分析書、工作計畫書、團隊名冊）→ <strong>第二期</strong> 115/10/31 前（前後台建置、資安掃描修復、操作說明書）→ <strong>第三期</strong> 116/1/31（行銷推廣、成果報告、原始碼交付）。付款 <strong>45 / 45 / 10%</strong> 對應里程碑。</p>

<p class="footer-ref">(對照服務建議書 貳之二, p.5)</p>

---

## 人力配置與變更 / SLA 管理

![三期人力投入與交付](diagrams/51-delivery-resource.svg)

<div class="cards">
<div class="card"><h4>角色時序投入</h4>五大角色＋UI/UX＋QA 依三期需求時序投入。</div>
<div class="card"><h4>變更管理門檻</h4>5% 內增減不變總價；落後 5% 主動預警、20% 為機關得暫停／終止門檻。</div>
<div class="card"><h4 style="color:#16A34A;">維運 SLA（前台）</h4>前台問題 4h 回復方案／8h 排除；一般邏輯 16h；重大錯誤 8h。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 貳之三, p.7／貳之五, p.9)</p>

---

## 經費結構與合理性

![經費結構三大類占比](diagrams/81-budget-overview.svg)

<div class="cards">
<div class="card"><h4>含稅總計 NT$1,100,000</h4>等同委辦經費上限，未超支。</div>
<div class="card"><h4>三大類　860k / 180k / 60k</h4>依系統開發三層細項編列。</div>
<div class="card"><h4 style="color:#16A34A;">人力 85.3%／非人力 14.7%</h4>以人力投入為主，管理及機動費用併入中性科目。</div>
<div class="card"><h4>245.5 人日</h4>對標計費辦法第 1 類人日費率，估算有據。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 陸之一, p.26／陸之二, p.26)</p>

---

## 付款與履約對應

![三期付款查核點](diagrams/83-payment-flow.svg)

<p class="lead" style="font-size:.78em;">採<strong>總包價法</strong>分三期付款：第一期 <strong>495,000（45%）</strong>、第二期 <strong>495,000（45%）</strong>、第三期 <strong>110,000（10%）</strong>，合計 100%，與各期查核點一一對應。金額如有不一致，以詳細價目表為準。</p>

<p class="footer-ref">(對照服務建議書 陸之三, p.28)</p>

---

## 公司履約能力

![組織與資源配置](diagrams/50-org-resource.svg)

<div class="cards">
<div class="card"><h4>提特斯科技有限公司</h4>I301 資訊服務業，符合本案指定營業項目。</div>
<div class="card"><h4 style="color:#16A34A;">本國廠商・單一投標</h4>不分包、不轉包，履約責任單一明確。</div>
<div class="card"><h4>雙環境部署</h4>開發與正式雙環境，配合遷移至機關機房。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 壹之一 p.1／壹之三 p.4)</p>

---

## 專案團隊編制

<p class="lead" style="font-size:.7em; margin:0 0 8px;">7 名核心成員（完整履歷）＋ 2 名約聘專業人員</p>

<div class="cards" style="grid-template-columns:repeat(4,1fr); gap:8px;">
<div class="card" style="padding:8px 10px;"><h4 style="font-size:.82em; margin:0 0 2px;">楊嘉豪</h4><span style="font-size:.62em; color:#475569;">計畫主持人／SA／前端（主講）</span></div>
<div class="card" style="padding:8px 10px;"><h4 style="font-size:.82em; margin:0 0 2px;">廖信謀</h4><span style="font-size:.62em; color:#475569;">計畫聯絡人／對外窗口</span></div>
<div class="card" style="padding:8px 10px;"><h4 style="font-size:.82em; margin:0 0 2px;">Calvin Huang</h4><span style="font-size:.62em; color:#475569;">系統開發（後端）</span></div>
<div class="card" style="padding:8px 10px;"><h4 style="font-size:.82em; margin:0 0 2px;">張睿壬</h4><span style="font-size:.62em; color:#475569;">資料庫管理師（DBA）</span></div>
<div class="card" style="padding:8px 10px;"><h4 style="font-size:.82em; margin:0 0 2px;">花千祐</h4><span style="font-size:.62em; color:#475569;">系統開發（後端／AI）</span></div>
<div class="card" style="padding:8px 10px;"><h4 style="font-size:.82em; margin:0 0 2px;">高嘉宏</h4><span style="font-size:.62em; color:#475569;">UI/UX 工程師兼美編</span></div>
<div class="card" style="padding:8px 10px;"><h4 style="font-size:.82em; margin:0 0 2px;">曹子允</h4><span style="font-size:.62em; color:#475569;">測試工程師／QA</span></div>
</div>

<div class="cards" style="grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;">
<div class="card" style="padding:8px 10px; border:1px dashed #94a3b8; background:#fff;"><h4 style="font-size:.82em; margin:0 0 2px; color:#475569;">約聘專案經理　<span style="font-size:.7em; background:#e2e8f0; color:#475569; padding:1px 6px; border-radius:8px;">約聘</span></h4><span style="font-size:.62em; color:#64748b;">5 年以上經驗、持 PMP，得標後 15 日內隨團隊名冊送審證照影本</span></div>
<div class="card" style="padding:8px 10px; border:1px dashed #94a3b8; background:#fff;"><h4 style="font-size:.82em; margin:0 0 2px; color:#475569;">約聘資安工程師　<span style="font-size:.7em; background:#e2e8f0; color:#475569; padding:1px 6px; border-radius:8px;">約聘</span></h4><span style="font-size:.62em; color:#64748b;">熟 SAST／DAST／OWASP，依需求補實、隨名冊送審</span></div>
</div>

<p class="footer-ref">(對照服務建議書 附件一, p.31)</p>

---

## 過往實績與技術訊號

<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
<figure style="margin:0;"><img src="diagrams/ttechnology.png" alt="TITS 官網" style="max-height:120px; border:1px solid #E2E8F0; border-radius:6px;"/><figcaption style="font-size:.55em; color:#475569;">TITS 公司官網</figcaption></figure>
<figure style="margin:0;"><img src="diagrams/demo-nova.png" alt="Nova Studio" style="max-height:120px; border:1px solid #E2E8F0; border-radius:6px;"/><figcaption style="font-size:.55em; color:#475569;">Nova Studio</figcaption></figure>
<figure style="margin:0;"><img src="diagrams/coke-campaign-1a.png" alt="Coca-Cola Taiwan" style="max-height:120px; border:1px solid #E2E8F0; border-radius:6px;"/><figcaption style="font-size:.55em; color:#475569;">Coca-Cola Taiwan 互動網頁</figcaption></figure>
<figure style="margin:0;"><img src="diagrams/nescafe-1.png" alt="Nescafe Gold" style="max-height:120px; border:1px solid #E2E8F0; border-radius:6px;"/><figcaption style="font-size:.55em; color:#475569;">Nescafe Gold 互動網頁</figcaption></figure>
</div>

<div class="cards">
<div class="card"><h4 style="color:#16A34A;">政府外勤填單系統（進行中）</h4>正執行中、尚未完成驗收。技術特徵與本案高度同構：掃碼登錄不掉資料、活動尖峰高併發、Excel 報表、外部資料介接。</div>
<div class="card"><h4>B2B 品牌與系統作品</h4>票證 API 介接、品牌官網再設計、跨國品牌互動網頁等真實商業案。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 附件二, p.42)</p>

---

## 風險矩陣與履約承諾

![風險機率衝擊矩陣](diagrams/84-risk-matrix.svg)

<div class="cards">
<div class="card"><h4>五類風險緩解後落低／中區</h4>跨系統整合、外部介接失效、進度落後、資安個資、關鍵人員異動。</div>
<div class="card"><h4 style="color:#16A34A;">專業責任險</h4>契約價金 1 倍、自負額 0 元。</div>
<div class="card"><h4>智財權全歸機關</h4>本案產出之智慧財產權全數歸屬機關。</div>
<div class="card"><h4>終止移轉</h4>30 個工作日移轉＋原團隊 1 人月接管支援（已納總包價）。</div>
</div>

</div>

<p class="footer-ref">(對照服務建議書 柒之一, p.28／柒之二, p.29)</p>

---

## 感謝聆聽，歡迎發問

</div>

<p class="footer-ref">(對照服務建議書 執行摘要, p.1)</p>