「客新聞App建置與維護」資訊服務採購案

# 「客新聞App建置與維護」<br/>資訊服務採購案

<p style="font-size:22px; text-align:center; margin-top:1.6em;"><strong>投標廠商</strong>：提特斯科技有限公司（統一編號 97512668）<br/><strong>負責人</strong>：楊嘉豪　　<strong>招標機關</strong>：財團法人客家公共傳播基金會<br/><strong>簡報人</strong>：花千祐</p>

---

## 簡報大綱

<div style="display:flex; align-items:center; gap:0.75em; background:#EFF6FF; border-left:7px solid #2563EB; border-radius:8px; padding:0.85em 0.9em;">
<div style="flex:0 0 54px; height:54px; border-radius:50%; background:#2563EB; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px;">一</div>
<div style="line-height:1.25;"><strong style="font-size:30px;">專案定位與交付範圍</strong><br/><span style="font-size:22px; color:#475569;">官網行動化延伸・三方責任界定</span></div>
</div>

<div style="display:flex; align-items:center; gap:0.75em; background:#F5F3FF; border-left:7px solid #7c3aed; border-radius:8px; padding:0.85em 0.9em;">
<div style="flex:0 0 54px; height:54px; border-radius:50%; background:#7c3aed; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px;">二</div>
<div style="line-height:1.25;"><strong style="font-size:30px;">技術架構與功能規劃</strong><br/><span style="font-size:22px; color:#475569;">BFF・背景音訊・AI 客語語音・前端性能</span></div>
</div>

<div style="display:flex; align-items:center; gap:0.75em; background:#FEF2F2; border-left:7px solid #dc2626; border-radius:8px; padding:0.85em 0.9em;">
<div style="flex:0 0 54px; height:54px; border-radius:50%; background:#dc2626; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px;">三</div>
<div style="line-height:1.25;"><strong style="font-size:30px;">資通安全與源碼檢測</strong><br/><span style="font-size:22px; color:#475569;">SSDLC・單一登入・加密與日誌審計</span></div>
</div>

<div style="display:flex; align-items:center; gap:0.75em; background:#ECFDF5; border-left:7px solid #16A34A; border-radius:8px; padding:0.85em 0.9em;">
<div style="flex:0 0 54px; height:54px; border-radius:50%; background:#16A34A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px;">四</div>
<div style="line-height:1.25;"><strong style="font-size:30px;">維護服務與應變機制</strong><br/><span style="font-size:22px; color:#475569;">開口契約工單・24 小時修復・保固交接</span></div>
</div>

<div style="display:flex; align-items:center; gap:0.75em; background:#ECFEFF; border-left:7px solid #0891b2; border-radius:8px; padding:0.85em 0.9em;">
<div style="flex:0 0 54px; height:54px; border-radius:50%; background:#0891b2; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px;">五</div>
<div style="line-height:1.25;"><strong style="font-size:30px;">專案時程與教育訓練</strong><br/><span style="font-size:22px; color:#475569;">100 日曆天里程碑・訓練與驗收</span></div>
</div>

<div style="display:flex; align-items:center; gap:0.75em; background:#FFFBEB; border-left:7px solid #d97706; border-radius:8px; padding:0.85em 0.9em;">
<div style="flex:0 0 54px; height:54px; border-radius:50%; background:#d97706; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px;">六</div>
<div style="line-height:1.25;"><strong style="font-size:30px;">經費配置與風險管理</strong><br/><span style="font-size:22px; color:#475569;">總價與六大項・分期付款・風險矩陣</span></div>
</div>

<div style="display:flex; align-items:center; gap:0.75em; background:#F1F5F9; border-left:7px solid #475569; border-radius:8px; padding:0.85em 0.9em;">
<div style="flex:0 0 54px; height:54px; border-radius:50%; background:#475569; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px;">七</div>
<div style="line-height:1.25;"><strong style="font-size:30px;">團隊與履約能力</strong><br/><span style="font-size:22px; color:#475569;">相近能力對應・實績・單一窗口</span></div>
</div>

<div style="display:flex; align-items:center; gap:0.75em; background:#FFFFFF; border:1px dashed #CBD5E1; border-radius:8px; padding:0.85em 0.9em;">
<div style="flex:0 0 54px; height:54px; border-radius:50%; background:#94a3b8; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:28px;">附</div>
<div style="line-height:1.25;"><strong style="font-size:30px;">需求逐點回應總覽</strong><br/><span style="font-size:22px; color:#475569;">置於簡報末頁，供詢答對照翻閱</span></div>
</div>

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

---

## 官網行動化延伸與三項技術主軸

![內容生態與行動化延伸](diagrams/01-content-ecosystem.svg)

</div>
<div>

<div style="background:#EFF6FF; border-left:7px solid #2563EB; border-radius:8px; padding:0.6em 0.85em; margin-bottom:0.75em; line-height:1.3;"><strong style="font-size:24px;">主軸一　一套碼雙平台</strong><br/><span style="font-size:20px; color:#334155;">iOS／Android 同一套程式碼，維護一次到位</span></div>

<div style="background:#F5F3FF; border-left:7px solid #7c3aed; border-radius:8px; padding:0.6em 0.85em; margin-bottom:0.75em; line-height:1.3;"><strong style="font-size:24px;">主軸二　BFF headless 串接</strong><br/><span style="font-size:20px; color:#334155;">欄位與分類調整收斂於 BFF，App 免改版送審</span></div>

<div style="background:#ECFDF5; border-left:7px solid #16A34A; border-radius:8px; padding:0.6em 0.85em; margin-bottom:0.75em; line-height:1.3;"><strong style="font-size:24px;">主軸三　原生背景音訊＋AI 客語語音</strong><br/><span style="font-size:20px; color:#334155;">播客鎖屏續播與客語播報共用同一播放服務</span></div>

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

---

## 交付範圍與三方責任界定

![交付範圍與三方責任界定](diagrams/02-scope-raci.svg)

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

---

## 系統整體架構

![系統整體架構](diagrams/03-system-architecture.svg)

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

---

## BFF 與三層快取

![BFF 與 WordPress 串接之快取命中與回源路徑](diagrams/04-bff-cache-flow.svg)

</div>
<div>

- 聚合整形為穩定 DTO
- 標籤→腔調對照解析
- 第二張圖解析與 fallback
- SSO 換證與 JWT 輪替
- Redis 快取與 denylist

<table>
<colgroup><col style="width:26%"/><col style="width:24%"/><col style="width:50%"/></colgroup>
<thead><tr><th>快取</th><th>位置</th><th>內容</th></tr></thead>
<tbody>
<tr><td>App 本機</td><td>裝置端</td><td>音檔 500MB・收藏</td></tr>
<tr><td>BFF Redis</td><td>貴會 GCP</td><td>版面與文章 DTO</td></tr>
<tr><td>媒體平台</td><td>外部</td><td>圖片與影音</td></tr>
</tbody>
</table>

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

---

## GCP 雲端部署

![GCP 雲端部署拓撲](diagrams/05-gcp-topology.svg)

</div>
<div>

<p style="font-size:18px; margin:0 0 0.5em; color:#334155;"><strong>BFF 承載於 Cloud Run</strong>——無狀態讀取為主，隨流量自動擴縮。</p>

<p style="font-size:19px; margin:0 0 0.3em;"><strong>冷啟動因應三招</strong></p>

<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.35em; font-size:17px;"><strong>暖實例常駐</strong>　尖峰保留最小常駐實例</div>

<div style="background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.35em; font-size:17px;"><strong>啟動 CPU 加成</strong>　縮短容器就緒時間</div>

<div style="background:#ECFDF5; border-left:5px solid #16A34A; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.5em; font-size:17px;"><strong>映像精簡與延後初始化</strong>　非必要相依延後載入</div>

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

---

## 跨平台框架定案

![跨平台框架定案與四項決定性因素](diagrams/06-framework-decision.svg)

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

---

## 播客背景播放（一）：單一全域播放服務

![單一全域播放服務與四個共用消費端](diagrams/07-audio-global-service.svg)

</div>
<div>

<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>播放狀態脫離畫面生命週期</strong><br/><span style="color:#334155;">路由切換只重繪畫面，播放不中斷</span></div>

<div style="background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>全案最重整合點</strong><br/><span style="color:#334155;">於開發期優先排程並預留整合驗證時間</span></div>

<div style="background:#ECFDF5; border-left:5px solid #16A34A; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.5em; font-size:17px;"><strong>播放速度全域一致</strong><br/><span style="color:#334155;">於任一入口調整速度，四個消費端同步套用</span></div>

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

---

## 播客背景播放（二）：雙平台原生綁定

![500MB 音檔 LRU 快取與背景常駐播放服務](diagrams/08-audio-lru-cache.svg)

</div>
<div>

<p style="font-size:19px; margin:0 0 0.3em;"><strong>雙平台原生能力對照</strong></p>

<table>
<colgroup><col style="width:16%"/><col style="width:45%"/><col style="width:39%"/></colgroup>
<thead><tr><th>能力</th><th>iOS</th><th>Android</th></tr></thead>
<tbody>
<tr><td>背景播放</td><td>Audio 背景模式・AVAudioSession</td><td>媒體播放前景服務</td></tr>
<tr><td>鎖屏中繼資料</td><td>MPNowPlayingInfoCenter</td><td>MediaSession</td></tr>
<tr><td>遠端與線控</td><td>MPRemoteCommandCenter</td><td>MediaSession 控制回呼</td></tr>
</tbody>
</table>

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

---

## AI 客語多腔調語音串接

![AI 客語多腔調語音串接資料流與範圍紅線](diagrams/09-hakka-voice-dataflow.svg)

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

---

## 前端性能最佳化

![前端性能最佳化四面向](diagrams/10-frontend-performance.svg)

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

---

## 短影音與客庄瀑布流

![垂直短影音與客庄美食旅遊瀑布流版面實作](diagrams/11-video-waterfall.svg)

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

---

## 投票即時圖表與分眾推播

![投票即時結果與會員分眾推播](diagrams/12-vote-push.svg)

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

---

## 輕量營運後台

<div style="display:grid; grid-template-columns:430px 430px; justify-content:center; gap:1.2em; margin-bottom:0.55em;">
<div><img src="images/admin-analytics.png" style="width:100%; height:300px; object-fit:contain; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:13px; margin:0.2em 0 0; color:#475569; text-align:center; line-height:1.35;">自研 CMS 之成效分析與匯出介面（產品示範版型、示意假資料）——本案輕量後台「基礎報表檢視與 CSV 匯出」採同一操作模式</p></div>
<div><img src="images/admin-settings.png" style="width:100%; height:300px; object-fit:contain; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px;"/><p style="font-size:13px; margin:0.2em 0 0; color:#475569; text-align:center; line-height:1.35;">設定類資料之表單化維護介面——對應本案「標籤→腔調對照表與預設腔調維護」，調整不需改版 App</p></div>
</div>

<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.6em;">
<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.4em 0.6em; font-size:15px;"><strong>推播分眾發送</strong><br/><span style="color:#334155;">依分類發送並保留發送紀錄</span></div>
<div style="background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:7px; padding:0.4em 0.6em; font-size:15px;"><strong>標籤→腔調對照維護</strong><br/><span style="color:#334155;">含預設腔調，調整不需改版 App</span></div>
<div style="background:#ECFDF5; border-left:5px solid #16A34A; border-radius:7px; padding:0.4em 0.6em; font-size:15px;"><strong>基礎報表與 CSV 匯出</strong><br/><span style="color:#334155;">供貴會自行檢視與下載</span></div>
</div>
<p class="footer-ref">(對照服務建議書 肆之七, p.43)</p>

---

## App 介面與視覺對齊基準

<p style="font-size:16px; margin:0 0 0.35em; color:#334155; text-align:center;"><strong>客新聞官網手機版實機截圖｜機關既有網站</strong></p>

</div>
<div>

<p style="font-size:19px; margin:0 0 0.35em;"><strong>設計 token 對映流程</strong></p>

<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.4em 0.65em; margin-bottom:0.4em; font-size:17px;"><strong>一　擷取視覺基準</strong><br/><span style="color:#334155;">自現行手機版網頁取色彩、字級階層、間距與版式</span></div>

<div style="background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:7px; padding:0.4em 0.65em; margin-bottom:0.4em; font-size:17px;"><strong>二　整理為設計 token</strong><br/><span style="color:#334155;">色票、字體階層、圓角與間距定義為一組可複用參數</span></div>

<div style="background:#ECFDF5; border-left:5px solid #16A34A; border-radius:7px; padding:0.4em 0.65em; margin-bottom:0.4em; font-size:17px;"><strong>三　對映至 App 元件</strong><br/><span style="color:#334155;">標題、卡片、清單、播放器逐一套用同一組 token</span></div>

<div style="background:#FFF7ED; border-left:5px solid #d97706; border-radius:7px; padding:0.4em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>四　原型先行確認</strong><br/><span style="color:#334155;">先出原型與貴會確認，開發期敏捷迭代逐次校準</span></div>

<p style="font-size:15px; color:#475569; margin:0;">以現行手機版網頁為對齊基準逐項校準，視覺驗收有共同依據。</p>

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

---

## 安全開發生命週期與源碼檢測

![安全開發生命週期六階段與交付門檻](diagrams/13-ssdlc-flow.svg)

</div>
<div>

<p style="font-size:19px; margin:0 0 0.3em;"><strong>分層源碼檢測工具鏈</strong></p>

<table>
<colgroup><col style="width:34%"/><col style="width:26%"/><col style="width:40%"/></colgroup>
<thead><tr><th>檢測標的</th><th>工具</th><th>檢測重點</th></tr></thead>
<tbody>
<tr><td>行動 App 二進位與原始碼</td><td>MobSF</td><td>設定檢查・硬編機敏・權限</td></tr>
<tr><td>BFF 後端與 API 原始碼</td><td>SonarQube</td><td>注入與不安全寫法</td></tr>
<tr><td>開源相依套件</td><td>SCA 弱點掃描</td><td>第三方套件已知弱點</td></tr>
</tbody>
</table>

<div style="background:#F8FAFC; border-left:5px solid #475569; border-radius:7px; padding:0.4em 0.6em; margin:0.5em 0 0.4em; font-size:16px;"><strong>合規五領域</strong><br/><span style="color:#334155;">資安管理法與採購安全規範／無障礙／共通性 API 規範／陸籍與陸製禁令／AI 資料保護</span></div>

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

---

## 單一登入與權杖安全

![單一登入換證與權杖輪替流程](diagrams/14-sso-jwt-flow.svg)

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

---

## 加密與日誌審計

![傳輸加密、儲存加密與日誌審計三層控制](diagrams/15-encryption-logging.svg)

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

---

## 開口契約工單流程

![開口契約工單五步驟流程](diagrams/16-ticket-flow.svg)

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

---

## 二十四小時緊急修復與三級分流

![可歸責瑕疵二十四小時修復與三級分流](diagrams/17-sla-grading.svg)

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

---

## 維護範圍與保固交接

![維護五類服務範圍與貴會端職掌對照](diagrams/18-maintenance-scope.svg)

</div>
<div>

<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>保固與維護併行 1 年</strong><br/><span style="color:#334155;">起算點同為開發審查通過日</span></div>

<div style="background:#ECFDF5; border-left:5px solid #16A34A; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>保固免費改正、不佔 20 人天</strong><br/><span style="color:#334155;">程式瑕疵所致缺失免費無條件改正</span></div>

<div style="background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>兩者界線</strong><br/><span style="color:#334155;">未達品質走保固；新增優化走維護工單</span></div>

<div style="background:#FFF7ED; border-left:5px solid #d97706; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>期滿移轉交接</strong><br/><span style="color:#334155;">30 個工作天完成移轉＋1 人月免費接管協助</span></div>

</div>
</div>
<p class="footer-ref">(對照服務建議書 捌之三・捌之四, p.67)</p>

---

## 一百日曆天期程與里程碑

![四階段期程、三處重疊窗與 M1–M6 里程碑](diagrams/19-timeline-milestones.svg)

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

---

## 教育訓練與交付驗收

![教育訓練 1 場 2 小時之時段配置與上線輔導](diagrams/20-training-flow.svg)

</div>
<div>

<p style="font-size:19px; margin:0 0 0.3em;"><strong>驗收流程與時限</strong></p>

<table>
<colgroup><col style="width:62%"/><col style="width:38%"/></colgroup>
<thead><tr><th>階段</th><th>時限</th></tr></thead>
<tbody>
<tr><td>三層測試並製作測試報告</td><td>本案自行完成</td></tr>
<tr><td>貴會接獲備驗通知後辦理驗收</td><td>30 日內</td></tr>
<tr><td>經要求修正者完成修正再送審</td><td>7 日內</td></tr>
<tr><td>貴會就修正結果複審</td><td>7 日內</td></tr>
</tbody>
</table>

<div style="background:#F8FAFC; border-left:5px solid #475569; border-radius:7px; padding:0.45em 0.65em; font-size:16px;"><strong>交付文件六項</strong><br/><span style="color:#334155;">測試報告／源碼檢測報告／開源軟體清單／操作手冊／工作計畫書／結案報告</span></div>

</div>
</div>
<p class="footer-ref">(對照服務建議書 陸之四・柒之一, p.59)</p>

---

## 經費總覽與配置合理性

![六大項經費配置與總價結構](diagrams/21-budget-donut.svg)

</div>
<div>

<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>人力成本占未稅 94.4%</strong><br/><span style="color:#334155;">非人力 5.6%，符合資訊服務業以人力為主之成本結構，成本紮實</span></div>

<div style="background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>投入向技術主戰場傾斜</strong><br/><span style="color:#334155;">最重工時給後端 BFF 與外部串接，以及前端原生背景播放與影音版面</span></div>

<div style="background:#ECFDF5; border-left:5px solid #16A34A; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>人日定義</strong><br/><span style="color:#334155;">核心開發 213 人日（建置大類一至四）；建置全部 264 人日（含支援與管理）</span></div>

<p style="font-size:15px; color:#475569; margin:0;">伺服器與雲端資源由貴會提供之 GCP 承載，故無雲端資源科目。</p>

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

---

## 分期付款與維護單價

![建置與維護兩層費用及三期付款條件](diagrams/22-payment-stages.svg)

</div>
<div>

<p style="font-size:19px; margin:0 0 0.3em;"><strong>維護 9,000 元／人天（含稅）之三項理由</strong></p>

<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.35em; font-size:17px;"><strong>一　跨模組機動投入</strong>　工單零星且跨模組，須資深或混合角色即時支援</div>

<div style="background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.35em; font-size:17px;"><strong>二　每筆工單之最小啟動成本</strong>　問題重現、環境還原、影響評估、回歸測試與版本送審</div>

<div style="background:#ECFDF5; border-left:5px solid #16A34A; border-radius:7px; padding:0.4em 0.6em; font-size:17px;"><strong>三　涵蓋緊急修復待命</strong>　二十四小時修復時效所需之應變與待命量能</div>

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

---

## 風險管理與應變機制

![七項風險矩陣與優先控管](diagrams/23-risk-matrix.svg)

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

---

## 相近能力對應

![既有能力六類對應本案六大工作](diagrams/24-capability-mapping.svg)

</div>
<div>

<p style="font-size:19px; margin:0 0 0.3em;"><strong>已上架商用 App</strong></p>

<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.35em; font-size:17px;"><strong>App Store 上架之商用旅遊應用</strong><br/><span style="color:#334155;">核心成員以原生 Swift 獨立開發，後端採無伺服器架構</span></div>

<div style="background:#F5F3FF; border-left:5px solid #7c3aed; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.35em; font-size:17px;"><strong>納智捷行動保母 iOS App</strong>　<span style="color:#475569; font-size:15px;">接案</span><br/><span style="color:#334155;">車聯網行動應用，原生 Swift 與 RxSwift 實作</span></div>

<div style="background:#ECFEFF; border-left:5px solid #0891b2; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.35em; font-size:17px;"><strong>代收代運雙平台 App</strong>　<span style="color:#475569; font-size:15px;">接案</span><br/><span style="color:#334155;">iOS 與 Android 同步交付之雙平台專案</span></div>

<div style="background:#ECFDF5; border-left:5px solid #16A34A; border-radius:7px; padding:0.4em 0.6em; margin-bottom:0.45em; font-size:17px;"><strong>Omni Translator 六平台</strong><br/><span style="color:#334155;">一套 React 程式碼編譯至六個平台，一套碼多平台之直接佐證</span></div>

<p style="font-size:15px; color:#475569; margin:0;">上列經驗直接對應本案「一套碼雙平台建置」與「商店送審與上架」兩項工作。</p>

</div>
</div>
<p class="footer-ref">(對照服務建議書 拾貳之一, p.84)</p>

---

## 廠商能量與相近履約實績

<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.7em; margin-bottom:0.5em;">
<div style="background:#EFF6FF; border-left:6px solid #2563EB; border-radius:8px; padding:0.45em 0.7em;"><strong style="font-size:18px;">履約能量</strong><br/><span style="font-size:16px; color:#334155;">具政府機關系統開發案執行經驗；本案五項職能編組指名到人、專責投入</span></div>
<div style="background:#ECFDF5; border-left:6px solid #16A34A; border-radius:8px; padding:0.45em 0.7em;"><strong style="font-size:18px;">三大核心能力</strong><br/><span style="font-size:16px; color:#334155;">跨平台一套碼／原生行動整合／後端 BFF 與資料架構</span></div>
</div>

<div><div style="height:300px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;"><img src="images/pf-paris-olympics.png" style="max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;"/></div><p style="font-size:14px; margin:3px 0 0; color:#475569; text-align:center; line-height:1.3;">巴黎奧運互動資訊站｜團隊成員任職 TNL Mediagene 期間作品</p></div>

<div><div style="height:300px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;"><img src="images/pf-election-2020.png" style="max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;"/></div><p style="font-size:14px; margin:3px 0 0; color:#475569; text-align:center; line-height:1.3;">2020 選舉即時開票互動網站｜成員任職關鍵評論網期間作品</p></div>

<div><div style="height:300px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;"><img src="images/pf-energy-policy.png" style="max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;"/></div><p style="font-size:14px; margin:3px 0 0; color:#475569; text-align:center; line-height:1.3;">能源政策數位深度專題｜成員任職 TNL Mediagene 期間作品</p></div>

<div><div style="height:300px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;"><img src="images/pf-seavoice.png" style="max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;"/></div><p style="font-size:14px; margin:3px 0 0; color:#475569; text-align:center; line-height:1.3;">語音轉文字（STT）產品後台介面｜計畫主持人前職 Seasalt.ai 任職期間承製</p></div>

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

---

## 廠商能量與相近履約實績（續）

<div><div style="height:300px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;"><img src="images/pf-coke.png" style="max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;"/></div><p style="font-size:14px; margin:3px 0 0; color:#475569; text-align:center; line-height:1.3;">Coca-Cola 品牌互動行銷網頁｜計畫主持人前職米蘭營銷策劃任職期間承製</p></div>

<div><div style="height:300px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;"><img src="images/pf-lexus.png" style="max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;"/></div><p style="font-size:14px; margin:3px 0 0; color:#475569; text-align:center; line-height:1.3;">Lexus 品牌互動行銷網頁｜計畫主持人前職米蘭營銷策劃任職期間承製</p></div>

<div><div style="height:300px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;"><img src="images/pf-titus-news.png" style="max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;"/></div><p style="font-size:14px; margin:3px 0 0; color:#475569; text-align:center; line-height:1.3;">自研 Titus CMS 新聞日報版型｜產品示範版型・示意假資料</p></div>

<div><div style="height:300px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden;"><img src="images/pf-ttechnology.png" style="max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;"/></div><p style="font-size:14px; margin:3px 0 0; color:#475569; text-align:center; line-height:1.3;">提特斯科技企業官網｜公司自有產品</p></div>

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

---

## 專案團隊與單一窗口

![專案組織、單一對外窗口與五項職能編組](diagrams/25-org-chart.svg)

</div>
<div>

<div style="background:#EFF6FF; border-left:5px solid #2563EB; border-radius:7px; padding:0.45em 0.65em; margin-bottom:0.45em; font-size:17px;"><strong>對外只有一個口徑</strong><br/><span style="color:#334155;">需求確認、進度呈報、協調會報與特別報告皆由計畫主持人統籌，貴會不必分辨該找誰</span></div>

<p style="font-size:18px; margin:0 0 0.25em;"><strong>成員與本案之直接對應</strong></p>

<ul style="font-size:16px; margin:0 0 0.5em 1em;">
<li>花千祐——App Store 上架實作經驗</li>
<li>黃柏翔——雙平台原生整合與 GCP 實務</li>
<li>張睿壬——語音服務串接與後端資料模型</li>
<li>高嘉宏——新聞媒體視覺與互動專題</li>
<li>曹子允——雙平台測試與多語在地化檢核</li>
</ul>

<div style="background:#1e293b; border-radius:8px; padding:0.5em 0.7em; text-align:center;"><span style="color:#ffffff; font-size:19px; font-weight:bold;">一個真實來源、一套程式碼、四個原生戰場</span><br/><span style="color:#cbd5e1; font-size:16px;">一個窗口對貴會</span></div>

</div>
</div>
<p class="footer-ref">(對照服務建議書 拾壹之一, p.80)</p>

---

## 感謝聆聽　歡迎發問

<p style="font-size:26px; color:#475569; margin-top:1.1em;">提特斯科技有限公司</p>

<p class="footer-ref">(對照服務建議書 全冊)</p>

---

## 附錄：需求逐點回應總覽

<table>
<colgroup><col style="width:22%"/><col style="width:52%"/><col style="width:26%"/></colgroup>
<thead><tr><th>需求模組</th><th>本案回應重點</th><th>對照服務建議書</th></tr></thead>
<tbody>
<tr><td>一、系統架構建置</td><td>BFF 串接官網 API、雙單一登入、JWT 輪替、GCP 部署與埋點</td><td>參之一至五（p.14）</td></tr>
<tr><td>二、首頁與新聞閱讀</td><td>視覺對齊官網手機版、後台動態分類、語音播報、精選卡片</td><td>貳之二・肆之四（p.9）</td></tr>
<tr><td>三、播客音訊功能</td><td>全螢幕播放器、原生背景播放、耳機線控、500MB LRU 快取</td><td>肆之二（p.31）</td></tr>
<tr><td>四、影音與客庄多媒體</td><td>垂直短影音、外部影片嵌入、瀑布流、第二張圖自動取用</td><td>肆之三（p.34）</td></tr>
<tr><td>五、投票互動功能</td><td>議題與即時長條圖、一人一票前端驗證、串接貴會投票 API</td><td>肆之五（p.39）</td></tr>
<tr><td>六、會員與推播系統</td><td>多元單一登入、隱私最小化、收藏同步、等級、逐項推播開關</td><td>參之三・肆之五（p.19）</td></tr>
<tr><td>七、測試與上架服務</td><td>雙平台測試、背景與推播行為驗證、送審修正至上架</td><td>陸之四・捌之三（p.59）</td></tr>
<tr><td>八、專案管理與培訓</td><td>全程專案管理與文件、原型製作、圖標套版、1 場 2 小時訓練</td><td>陸之一・柒之一（p.54）</td></tr>
<tr><td>資安：程式碼安全</td><td>SSDLC 六階段、MobSF／SonarQube／SCA、無高風險為交付門檻</td><td>伍之一・二（p.45）</td></tr>
<tr><td>資安：傳輸與儲存加密</td><td>全連線 HTTPS、TLS 1.2 以上、優先 1.3、私有連線、機敏欄位加密</td><td>伍之三（p.49）</td></tr>
<tr><td>資安：日誌審計</td><td>Cloud Logging 記錄維護操作、異常存取與認證事件</td><td>伍之四（p.50）</td></tr>
<tr><td>資安：緊急修復時效</td><td>可歸責瑕疵一律 24 小時內修復，以測試 apk 交付為準</td><td>捌之二（p.64）</td></tr>
<tr><td>維護服務五類</td><td>UI 視覺／功能邏輯／後台報表／效能體驗／第三方 SDK</td><td>捌之一・三（p.63）</td></tr>
</tbody>
</table>

<p style="font-size:15px; color:#475569; margin:0.4em 0 0;">本表供詢答對照翻閱，逐項細節載於服務建議書對應章節。</p>
<p class="footer-ref">(對照服務建議書 全章節)</p>