Posted inAI AI Chatbot C4 Model

Studi Kasus Model C4: Sistem Perbankan Internet Big Bank plc

1. Ringkasan Eksekutif

Studi kasus ini mendokumentasikan arsitektur dari Sistem Perbankan Internet untuk Big Bank plc. Sistem ini dirancang agar pelanggan perbankan pribadi dapat melihat saldo rekening mereka, melihat riwayat transaksi, dan melakukan pembayaran melalui peramban web dan perangkat mobile.

Arsitektur ini mengikuti Model C4 (Konteks, Wadah, Komponen, Kode), memberikan tampilan hierarkis sistem dari abstraksi tingkat tinggi hingga infrastruktur penempatan.

2. Tingkat 1: Diagram Konteks Sistem

Tujuan: Untuk menunjukkan sistem dalam konteks pengguna dan ketergantungan eksternalnya.

Diagram Referensi: Gambar 4 (Utama) dan Gambar 1 (Tampilan Sederhana).

Analisis

Sistem Sistem Perbankan Internet berada dalam batas Big Bank plc perusahaan. Sistem ini berfungsi sebagai saluran digital bagi Pelanggan Perbankan Pribadi.

C4 Model System Context Diagram for Internet Banking System

  • Pengguna (Aktor):

    • Pelanggan Perbankan Pribadi: Pengguna utama yang berinteraksi dengan sistem untuk melihat saldo dan melakukan pembayaran.

    • Staf Layanan Pelanggan: Karyawan bank yang membantu pelanggan (ditampilkan pada Gambar 4).

    • Staf Back Office: Staf administrasi dan pendukung (ditampilkan pada Gambar 4).

  • Sistem Eksternal:

    • Sistem Perbankan Mainframe: Sistem rujukan. Menyimpan semua informasi inti perbankan (pelanggan, rekening, transaksi). Sistem Perbankan Internet bergantung pada ini untuk data yang otoritatif.

    • Sistem E-mail: Sistem Microsoft Exchange internal yang digunakan untuk mengirim notifikasi (misalnya, pengaturan ulang kata sandi, konfirmasi) kepada pelanggan.

    • ATM: Sistem perangkat lunak terpisah yang memungkinkan penarikan tunai (ditampilkan dalam Gambar 4 untuk menunjukkan ekosistem yang lebih luas).

Hubungan Kunci: Pelanggan berinteraksi dengan Sistem Perbankan Internet, yang kemudian berperan sebagai antarmuka terhadap sistem Mainframe lama untuk mengambil data dan memproses pembayaran.

3. Tingkat 2: Diagram Container

Tujuan: Menunjukkan pilihan teknologi tingkat tinggi dan bagaimana tanggung jawab didistribusikan di seluruh sistem.

Diagram Referensi: Gambar 2.

Analisis

Sistem ‘Perbankan Internet’ dari Tingkat 1 diuraikan menjadi lima container yang berbeda (unit yang dapat di-deploy).

C4 Model Container Diagram for Internet Banking System

  1. Aplikasi Web (Java dan Spring MVC):

    • Peran: Berfungsi sebagai titik masuk bagi pengguna web.

    • Fungsi: Mengirimkan konten statis (HTML/CSS/JS) dan Aplikasi Halaman Tunggal (SPA) ke browser pelanggan melalui HTTPS.

  2. Aplikasi Halaman Tunggal (JavaScript dan Angular):

    • Peran: Logika sisi klien yang berjalan di browser.

    • Fungsi: Menyediakan seluruh suite fungsi perbankan internet. Melakukan panggilan API ke backend.

  3. Aplikasi Mobile (Xamarin):

    • Peran: Aplikasi sisi klien untuk perangkat mobile.

    • Fungsi:Menyediakan subset fungsionalitas terbatas dibandingkan dengan aplikasi web. Ini juga melakukan panggilan API ke backend.

  4. Aplikasi API (Java dan Spring MVC):

    • Peran:Logika inti backend.

    • Fungsi:Menyediakan API JSON/HTTPS. Menangani otentikasi, logika bisnis, dan komunikasi dengan sistem eksternal (Database, Mainframe, Email).

  5. Database (Skema Oracle Database):

    • Peran:Ketahanan data.

    • Fungsi:Menyimpan informasi pendaftaran pengguna, kredensial yang di-hash, dan log akses.Catatan: Data inti perbankan tetap berada di Mainframe.

Hubungan Kunci:Baik Aplikasi Web (melalui SPA) maupun Aplikasi Mobile berkomunikasi denganAplikasi API. Aplikasi API kemudian berbicara denganDatabaseuntuk data lokal danMainframeuntuk data perbankan inti.

4. Tingkat 3: Diagram Komponen

Tujuan:Untuk memperbesar fokus pada wadah tertentu (Aplikasi API) untuk menunjukkan blok bangun internalnya.

Diagram Referensi:Gambar 3.

Analisis

Diagram ini memecahAplikasi APIwadah menjadi komponen-komponen logis.

C4 Model Component Diagram for Internet Banking System

  • Controller (Controller Rest Spring MVC): Ini menangani permintaan HTTP masuk.

    • Kontroler Masuk: Menangani otentikasi pengguna.

    • Kontroler Atur Ulang Kata Sandi: Menangani alur pemulihan kata sandi.

    • Kontroler Ringkasan Akun: Mengambil data akun untuk pengguna.

  • Komponen (Spring Beans): Ini berisi logika bisnis.

    • Komponen Keamanan: Menangani masuk dan mengganti kata sandi. Digunakan oleh kontroler Masuk dan Atur Ulang Kata Sandi.

    • Komponen Surel: Menangani pengiriman surel. Digunakan oleh kontroler Atur Ulang Kata Sandi.

    • Facade Sistem Perbankan Mainframe: Pelapis di sekitar sistem Mainframe eksternal. Ini menerjemahkan panggilan API internal ke format XML/HTTPS yang dibutuhkan oleh Mainframe lama. Digunakan oleh kontroler Ringkasan Akun.

Hubungan Kunci: The Kontroler Ringkasan Akun menggunakan Facade Sistem Perbankan Mainframe untuk mendapatkan data dari Mainframe eksternal, menunjukkan pemisahan tanggung jawab antara lapisan API dan lapisan integrasi.

5. Tingkat 4: Diagram Penempatan

Tujuan: Menunjukkan bagaimana kontainer perangkat lunak dipetakan ke infrastruktur fisik.

Diagram Referensi: Gambar 5.

Analisis

Diagram ini menggambarkan lingkungan runtime.

C4 Model Deployment Diagram for Internet Banking System

  • Sisi Pelanggan:

    • Perangkat Mobile: Menjalankan Aplikasi Seluler (iOS/Android).

    • Komputer: Menjalankan Peramban Web (Chrome/Firefox/Safari/Edge) yang menampung Aplikasi Halaman Tunggal.

  • Pusat Data Big Bank plc:

    • Server Web (bigbank-web*):** Node Ubuntu 16.04 LTS yang menjalankan Apache Tomcat 8.x.

      • Menampung Aplikasi Web dan Aplikasi API.

    • Server Basis Data (bigbank-db01/02): Node Ubuntu 16.04 LTS yang menjalankan Oracle 12c.

      • Oracle – Utama: Basis data utama.

      • Oracle – Sekunder: Salinan untuk redundansi/kenyamanan tinggi.

Hubungan Kunci: Aplikasi Seluler dan Peramban Web terhubung melalui internet ke Aplikasi API yang dijalankan di Tomcat. Aplikasi API terhubung melalui JDBC ke klaster Basis Data Oracle.

6. Konsep dan Panduan Kunci yang Diterapkan

Berdasarkan studi kasus ini, prinsip pemodelan C4 berikut diterapkan:

  1. Tingkat Abstraksi: Model ini berhasil bergerak dari “Siapa yang menggunakannya?” (Konteks) ke “Apa yang dibangun dari?” (Wadah) ke “Bagaimana disusun?” (Komponen) ke “Di mana berjalan?” (Penempatan).

  2. Batasan Lingkup:

    • Pada Level 1, batas ‘Big Bank plc’ dengan jelas membedakan sistem internal dari aktor eksternal.

    • Pada Level 2, batas ‘Sistem Perbankan Internet’ mengemas perangkat lunak tertentu yang sedang dibangun, memisahkannya dari Mainframe lama.

  3. Pemisahan Kepentingan:

    • Frontend vs. Backend:Pemisahan Aplikasi Satu Halaman (frontend) dari Aplikasi API (backend) memungkinkan pengembangan dan skalabilitas yang independen.

    • Pemisahan Data:Data inti perbankan yang sensitif disimpan di Mainframe, sementara Sistem Perbankan Internet hanya menyimpan sementara data akses pengguna yang diperlukan di basis data Oracle miliknya sendiri.

  4. Netral terhadap Teknologi (jika sesuai):Diagram menentukan teknologi (Java, Angular, Oracle) di tempat yang relevan terhadap keputusan arsitektur, tetapi terutama berfokus pada hubungandan tanggung jawabblok-blok tersebut.

  5. Notasi:Notasi C4 standar digunakan:

    • Orang:Gambar orang batang (atau lingkaran dalam gaya tampilan khusus ini).

    • Sistem Perangkat Lunak/Kontainer/Komponen:Persegi panjang melengkung dengan warna berbeda (Biru untuk internal/utama, Abu-abu untuk eksternal/sekunder).

    • Hubungan:Panah putus-putus dengan label yang menjelaskan protokol (misalnya, [HTTPS], [JSON], [JDBC]).