Day 26: 網頁數據採集

ABC123 與 ABC456 的自動化整合

解析 CSV 轉檔與官網 HTML 自動生成的 Data Pipeline

前端工程教育訓練系列

今日議程 (Agenda)

  • 痛點分析： 人工維護債券價格的風險
  • 系統架構： 核心系統與網頁端的串接邏輯
  • 關鍵作業： 價格維護 (ABC123) 與轉出 (ABC456)
  • 資料剖析： 解析 BONDLIST 與 BONDPRICE 結構
  • 自動化實踐： 運用工具一鍵生成 HTML 片段
  • 效益評估與防呆機制

痛點分析：為何需要自動化？

耗時費力

每日需手動核對數百檔債券價格，並將系統資料人工謄寫或複製到網頁後台，耗費大量作業時間。

人為錯誤

人工複製貼上容易發生錯行、漏筆或格式跑掉（如 HTML 標籤損毀），導致官網價格顯示異常。

系統斷層

核心帳務系統與官網前台資料庫無直接連線，缺乏高效率的資料橋接 (Data Bridge) 機制。

自動化資料管線 (Data Pipeline)

將繁瑣的操作濃縮為標準化的四階段流程：


核心系統
ABC123 價格維護

轉出作業
ABC456 產出 CSV

自動化工具
VBA 邏輯轉換

官網前台
生成 HTML 片段

目標： 將核心資料庫無縫對接至官網前端呈現。

Step 1: 價格資料維護 (ABC123)

自動化的首要條件是資料源的正確性。

  • 交易代碼： 進入債券系統執行 ABC123。
  • 作業目的： 確認當日（或前一營業日）的各檔債券收盤參考價格已正確匯入或維護完畢。
  • 檢核重點：
    • 確認價格日期是否為今日。
    • 抽查特定熱門券種報價是否有極端異常。

防呆提醒：若 ABC123 未完成維護即轉出，會導致官網價格停留在舊資料。

Step 2: 價格轉檔作業 (ABC456)

將封閉式系統的資料解鎖，轉換為開放式格式。

  • 交易代碼： 執行 ABC456 (價格轉出作業)。
  • 運作機制： 系統會將內部資料表進行正規化(Normalization)整理，並拋轉至中介暫存區。
  • 後續動作： 執行特定 Query 工具，將伺服器上的資料下載至本地端。
  • 產出物： 兩個核心 CSV 文字檔。

關鍵資料表 (CSV) 剖析

轉出後的資料分為兩個實體檔案，需在本地端進行 Join (關聯)：

BONDLIST.DTF

債券基本清單

包含：債券代號、ISIN Code、發行機構、計息方式、到期日等靜態屬性。

BONDPRICE.DTF

債券動態價格表

包含：債券代號、報價日期、買入參考價、賣出參考價、殖利率等每日變動數據。

解析：BONDLIST.DTF

此檔案扮演了 Master Data (主檔) 的角色。

  • 主鍵 (Primary Key)： 債券內部代碼。
  • 前端應用： 用於渲染網頁上的表格列標題、債券名稱欄位、以及提供給客戶識別的 ISIN Code。
  • 資料特性： 變動頻率低，通常只有在新券上架或舊券到期時才會有增減。
"BOND_ID","ISIN","BOND_NAME","MATURITY_DATE","COUPON_RATE"
"B001","US1234567890","US TREASURY N/B","2030/05/15","2.5%"
"B002","XS0987654321","APPLE INC CORP","2028/02/10","3.1%"

解析：BONDPRICE.DTF

此檔案是每日運作的 Transaction Data (交易資料)。

  • 外鍵 (Foreign Key)： 債券內部代碼 (用以關聯 BONDLIST)。
  • 前端應用： 直接反映在網頁上的「申購價」、「贖回價」與「參考殖利率」欄位。
  • 資料特性： 每日變動，對時效性與正確性要求極高。
"BOND_ID","PRICE_DATE","BUY_PRICE","SELL_PRICE","YTM"
"B001","2023/10/26","98.50","99.10","2.85%"
"B002","2023/10/26","101.20","101.80","2.90%"

Step 3: 下載與環境準備

將檔案放置於指定的固定路徑，以利工具自動讀取。

  • 建立標準化工作目錄 (例如：D:\債券價格轉檔工具\)。
  • 將下載的 BONDLIST.DTF 與 BONDPRICE.DTF 存入該目錄。
  • 為何要固定路徑？
    自動化腳本利用絕對路徑進行檔案 I/O，可省去每次手動選擇檔案的彈出視窗，實現「One-Click」精神。

自動化引擎：彙整工具

開啟核心工具：債券價格彙整工具_BondPrice.xlsm

  • 這是一個帶有巨集 (VBA) 的 Excel 應用程式。
  • 功能一： 讀取背景資料夾中的兩個 CSV 檔。
  • 功能二： 以「債券代號」為 Key，執行 Left Join，合併靜態基本資料與動態價格。
  • 功能三： 依照前端需求，清洗資料並剔除無效引號或空值。

Step 4: 一鍵生成網頁碼

從數據到前端視圖 (View) 的最後一哩路。

  • 在工具面板點選 「讀取來源檔」 按鈕。
  • 程式會自動將合併後的 Data Array，套入預設的 HTML Template String 迴圈中。
  • 產出結果直接顯示於特定工作表，或是自動複製到系統剪貼簿 (Clipboard)。
  • 設計模式： 類似於輕量級的 SSR (Server-Side Rendering) 概念，先將 HTML 片段組裝好。

產出成果檢視 (HTML 片段)

產出的原始碼可直接貼入官網的 CMS (內容管理系統) 原始碼編輯區。

<!-- 自動產生的 HTML 結構範例 -->
<tr class="bond-item">
    <td class="bond-name">APPLE INC CORP</td>
    <td class="bond-isin">XS0987654321</td>
    <td class="bond-maturity">2028/02/10</td>
    <td class="price-buy highlight-num">101.20</td>
    <td class="price-sell highlight-num">101.80</td>
    <td class="ytm">2.90%</td>
</tr>
<!-- 迴圈產出後續數百列資料... -->

系統整合效益評估

90%

時間節省
作業時間由原本的 30 分鐘大幅縮短至 3 分鐘以內。

0

人為錯誤率
程式自動對應與組裝 HTML，徹底消除手寫標籤遺漏或價格誤植的風險。

RWD

前端適應性
套用的 HTML 類別 (Class) 可完美對應官網既有的 CSS 響應式框架。

常見問題與防呆 (Poka-yoke)

  • 檔案鎖定報錯 (File in use)：
    若下載的 CSV 檔正被其他程式開啟，工具會跳出提示，避免讀取失敗。
  • 資料為空 (Empty File)：
    若 ABC456 未正確執行，下載的檔案大小為 0KB，工具在解析第一行標頭檔 (Header) 時即會中斷並警告。
  • 亂碼問題 (Encoding)：
    系統轉出的 DTF/CSV 預設為 Big5 編碼，工具內部已設定正確的 Stream Charset 讀取，避免中文名稱變成亂碼。

Q & A

感謝您的聆聽

透過自動化 Pipeline，我們不僅解放了繁瑣的營運雙手，
更確保了送達前端網頁的資料品質。