列車即時位置追蹤功能核心實作

在完成了各項基礎建設與視覺優化之後，我們終於迎來了本次系統更新中最具挑戰性，也是最令人興奮的核心功能實作：列車即時位置追蹤（Real-time Train Location Tracking）。這項功能的目的是讓使用者能夠在地圖上即時查看特定列車的動態位置，以及下一站的預估抵達時間。這不僅需要前端能夠穩定地接收並解析後端推播的即時數據流，更要求在介面上能夠流暢地繪製與更新列車座標，確保資訊的絕對準確性。為此，我們特別開發了 train_location.js 這個專屬模組，負責處理所有與位置追蹤相關的核心邏輯，這項功能的上線將會是我們系統服務的一大亮點。

然而，在充滿熱情地進行功能開發時，我們卻無意間挖了一個很深、且在專案後期才爆發的坑（Pitfall）。在開發初期，為了快速驗證資料流與介面呈現的正確性，工程師在 train_location.js 中大量使用了寫死的字串常數（Hardcoded String Literals）。例如，當列車狀態改變時，程式碼中直接寫入了諸如「列車即將進站」、「發生延誤」等繁體中文字串，並直接將其渲染到使用者的畫面上。在單一語系的測試環境下，一切運作得非常完美。但當管理層決定為了未來的海外擴展，需要將系統支援多國語系（Localization/i18n）時，這場災難就此展開。我們發現整個核心模組充斥著散落各處的寫死字串，我們無法簡單地抽換語言套件。若要進行翻譯，就必須逐行搜尋並修改 JavaScript 程式碼，這不僅容易出錯，更大幅增加了後續維護與更新的成本，讓原本單純的翻譯工作變成了一場程式碼的修改噩夢。

經過緊急的團隊會議，我們決定立即踩煞車，對這個核心模組進行國際化的重構與診斷。我們了解到，將介面顯示文字與商業邏輯緊密耦合是極其糟糕的設計模式。我們著手將所有的字串常數從 train_location.js 中抽離出來。我們設計了一套基於物件的字串對映表（Mapping Objects），將所有需要顯示的文字定義為特定的鍵值（Keys）。當系統需要顯示狀態時，不再直接印出字串，而是透過查找這些對映表來獲取對應目前語系的內容。這樣的架構讓我們可以輕鬆地引入 JSON 格式的語言套件，只要替換資料檔案，就能實現整個系統語言的無縫切換。

這項從寫死字串到對映表的重構，雖然耗費了我們不少時間，但它所帶來的附加價值與使用者體驗（UX）的提升是不可估量的。首先，系統具備了真正的國際化能力，海外使用者現在能夠以他們熟悉的語言查看即時的列車資訊，消除了語言隔閡帶來的困擾。其次，統一的字串管理讓介面上的用詞更加一致，避免了同一種狀態在不同畫面出現不同翻譯的窘境，大幅提升了系統的專業度與可信賴感。以下是我們在 train_location.js 中，如何解決字串寫死問題的程式碼前後修改對照：

// 寫死的字串常數，缺乏在地化彈性
function updateTrainStatus(trainCode, statusCode) {
    const statusContainer = document.getElementById('status-' + trainCode);
    
    if (statusCode === 1) {
        statusContainer.innerText = "列車即將進站";
    } else if (statusCode === 2) {
        statusContainer.innerText = "發生延誤，請稍候";
    } else {
        statusContainer.innerText = "準點行駛中";
    }
    
    // 如果要支援英文，必須修改這整段程式碼
}

// 獨立的語系對映表與動態字串解析
const i18n = {
    'zh-TW': {
        'status_arriving': '列車即將進站',
        'status_delayed': '發生延誤，請稍候',
        'status_ontime': '準點行駛中'
    },
    'en-US': {
        'status_arriving': 'Train Arriving Soon',
        'status_delayed': 'Delayed, Please Wait',
        'status_ontime': 'On Time'
    }
};

let currentLang = 'zh-TW';

function updateTrainStatus(trainCode, statusCode) {
    const statusContainer = document.getElementById('status-' + trainCode);
    const statusMap = { 1: 'status_arriving', 2: 'status_delayed', default: 'status_ontime' };
    
    const key = statusMap[statusCode] || statusMap.default;
    statusContainer.innerText = i18n[currentLang][key];
}

回首這次的開發歷程，我們深刻地體會到在軟體工程中，「提早規劃擴展性」的重要性。即使是在快速開發的壓力下，也應該避免採用會造成未來技術債的捷徑。這次對於即時列車追蹤功能的重構，不僅修復了一個潛在的在地化問題，更讓我們的程式碼架構變得更加成熟與穩健，為未來更多複雜功能的開發立下了良好的典範。