1. 綜述
本案例研究記錄了 網上銀行系統 的 Big Bank plc。該系統旨在讓個人銀行客戶透過網頁瀏覽器和行動裝置檢視帳戶餘額、查看交易記錄並進行付款。
該架構遵循 C4模型 （上下文、容器、組件、程式碼），從高階抽象到部署基礎設施，提供系統的層次化視圖。
2. 第一層：系統上下文圖
目標： 展示系統在其使用者和外部依賴關係中的位置。
參考圖示： 圖4（主要）和圖1（簡化視圖）。
分析
網上銀行系統 位於 Big Bank plc 企業範圍內。它作為個人銀行客戶的數位渠道。個人銀行客戶.
-
使用者（參與者）：
-
個人銀行客戶： 主要使用者，透過系統檢視餘額並進行付款。
-
客戶服務人員： 協助客戶的銀行員工（如圖4所示）。
-
後台人員： 行政與支援人員（如圖4所示）。
-
-
外部系統：
-
主機銀行系統： 記錄系統。它儲存所有核心銀行資訊（客戶、帳戶、交易）。網上銀行系統依賴此系統提供權威資料。
-
電子郵件系統： 內部的微軟 Exchange 系統，用於向客戶發送通知（例如，密碼重設、確認訊息）。
-
自動櫃員機： 一個獨立的軟體系統，用於現金提領（如圖4所示，用以展示更廣泛的生態系統）。
-
關鍵關係： 客戶與網上銀行系統互動，該系統則作為遺留主機系統的外觀，用以取得資料並處理付款。
3. 第二層：容器圖
目標： 用以展示高階的技術選擇，以及系統中責任的分配方式。
參考圖示： 圖2。
分析
第一層的「網上銀行系統」被分解為五個不同的容器（可部署單元）。
-
網頁應用程式（Java 與 Spring MVC）：
-
角色： 作為網頁使用者的進入點。
-
功能： 透過 HTTPS 將靜態內容（HTML/CSS/JS）與單頁面應用程式（SPA）傳送到客戶瀏覽器。
-
-
單頁面應用程式（JavaScript 與 Angular）：
-
角色： 在瀏覽器中執行的客戶端邏輯。
-
功能： 提供完整的網上銀行功能。它會向後端發出 API 請求。
-
-
行動應用程式（Xamarin）：
-
角色： 行動裝置的客戶端應用程式。
-
功能：與網頁應用程式相比，僅提供有限的功能子集。它還會向後端發出 API 調用。
-
-
API 應用程式（Java 與 Spring MVC）：
-
角色：核心後端邏輯。
-
功能：提供 JSON/HTTPS API。它負責驗證、業務邏輯以及與外部系統（資料庫、主機、電子郵件）的通訊。
-
-
資料庫（Oracle 資料庫結構）：
-
角色：資料持久化。
-
功能：儲存使用者註冊資訊、雜湊後的憑證以及存取記錄。注意：核心銀行資料仍保留在主機中。
-
關鍵關係：網頁應用程式（透過 SPA）與行動應用程式均與API 應用程式進行通訊。API 應用程式隨後與資料庫進行本地資料通訊，並與主機進行核心銀行資料通訊。
4. 第三層：組件圖
目標：深入檢視特定容器（API 應用程式），以顯示其內部構建模組。
參考圖示：圖像 3。
分析
此圖示將API 應用程式容器分解為邏輯組件。
-
控制器（Spring MVC Rest 控制器）： 這些用於處理傳入的HTTP請求。
-
登入控制器： 處理使用者驗證。
-
重設密碼控制器： 處理密碼恢復流程。
-
帳戶摘要控制器： 為使用者取得帳戶資料。
-
-
元件（Spring Bean）： 這些包含商業邏輯。
-
安全元件： 處理登入與變更密碼。由登入與重設密碼控制器使用。
-
電子郵件元件： 處理電子郵件的發送。由重設密碼控制器使用。
-
主機銀行系統外觀： 外部主機系統的包裝。將內部API呼叫轉換為舊主機所需的XML/HTTPS格式。由帳戶摘要控制器使用。
-
關鍵關係： 帳戶摘要控制器 使用 主機銀行系統外觀 從外部主機取得資料，展現API層與整合層之間的關注點分離。
5. 第四層：部署圖
目標： 顯示軟體容器如何對應至實體基礎設施。
參考圖： 圖像5。
分析
此圖說明執行時期環境。
-
客戶端：
-
行動裝置： 執行行動應用程式（iOS/Android）。
-
電腦： 執行網頁瀏覽器（Chrome/Firefox/Safari/Edge），用以主機單頁應用程式。
-
-
Big Bank plc 數據中心：
-
Web 伺服器（bigbank-web*）：** 執行 Ubuntu 16.04 LTS 的節點Apache Tomcat 8.x.
-
主機Web 應用程式和API 應用程式.
-
-
資料庫伺服器（bigbank-db01/02）： 執行 Ubuntu 16.04 LTS 的節點Oracle 12c.
-
Oracle – 主要： 主要資料庫。
-
Oracle – 次要： 用於容錯/高可用性的複本。
-
-
關鍵關係： 行動應用程式與網頁瀏覽器透過互聯網連接到API 應用程式 執行於 Tomcat 上的 API 應用程式。API 應用程式透過 JDBC 連接到 Oracle 資料庫叢集。
6. 應用的關鍵概念與原則
根據此案例研究，應用了以下 C4 建模原則：
-
抽象層級： 該模型成功地從「誰使用它？」（上下文）轉移到「它由什麼構成？」（容器）再轉移到「它如何組織？」（組件），最後轉移到「它在哪裡執行？」（部署）。
-
範圍邊界：
-
在第1級中，“Big Bank plc”的邊界明確區分了內部系統與外部實體。
-
在第2級中，“網上銀行系統”的邊界封裝了正在開發的特定軟體，使其與舊有的主機系統分離。
-
-
關注點分離：
-
前端與後端：單頁面應用程式（前端）與API應用程式（後端）的分離，允許獨立開發與擴展。
-
資料分離：敏感的核心銀行資料儲存在主機系統中，而網上銀行系統僅在其自身的Oracle資料庫中快取必要的使用者存取資料。
-
-
技術中立性（在適當情況下）：圖表僅在技術與架構決策相關時才指定技術（Java、Angular、Oracle），但主要著重於 關係與 責任各模塊的
-
符號：使用標準的C4符號：
-
人員：人形圖示（或在此特定呈現風格中為圓形）。
-
軟體系統／容器／組件：具有不同顏色的圓角矩形（藍色代表內部／主要，灰色代表外部／次要）。
-
關係：帶標籤的虛線箭頭，用以描述通訊協定（例如：[HTTPS]、[JSON]、[JDBC]）。
-