Pendahuluan
1. Ringkasan Eksekutif
Studi kasus ini menganalisis desain arsitektur dari Sistem Perbankan Internet untuk lembaga keuangan fiksi, “BigBank.” Tujuan proyek ini adalah memberikan akses yang aman, mudah diakses, dan multi-saluran bagi pelanggan perbankan pribadi ke rekening mereka (melalui web dan mobile) sambil terintegrasi dengan infrastruktur inti perbankan warisan yang sudah ada.
Arsitektur ini didokumentasikan menggunakan Model C4 (Diagram Wadah), yang memvisualisasikan pilihan teknologi tingkat tinggi dan bagaimana wadah sistem (aplikasi, basis data, dll.) berinteraksi.

2. Tantangan Bisnis
-
Integrasi Warisan: Bank memiliki sistem perbankan mainframe yang kuat tetapi sudah tua yang menyimpan kebenaran inti data pelanggan. Sistem baru perlu mengekspos data ini tanpa mengganti mainframe secara langsung.
-
Akses Multi-Saluran: Pelanggan menginginkan akses melalui peramban desktop dan perangkat mobile.
-
Keamanan: Penanganan data keuangan sensitif membutuhkan otentikasi yang ketat dan saluran komunikasi yang aman.
3. Solusi Arsitektur (Tampilan Wadah C4)
Solusi ini dirancang sebagai sistem terpisah di mana lapisan tampilan dipisahkan dari lapisan logika bisnis dan data.
A. Lapisan Antarmuka Pengguna (Frontend)
Sistem ini mendukung tiga titik masuk yang berbeda untuk Pelanggan Perbankan Pribadi:
-
Aplikasi Halaman Tunggal (SPA):
-
Teknologi: JavaScript dan Angular.
-
Peran: Ini berjalan di browser web pelanggan. Ini menyediakan keseluruhan kumpulan fungsi perbankan internet. Ini adalah antarmuka dinamis dan responsif yang berkomunikasi secara asinkron dengan backend.
-
-
Aplikasi Web:
-
Teknologi: Java dan Spring MVC.
-
Peran: Ini berfungsi sebagai titik masuk untuk pengalaman web. Ini mengirimkan konten statis (HTML/CSS/JS) dan menampung Aplikasi Halaman Tunggal. Ini berfungsi sebagai “pemicu” untuk aplikasi Angular.
-
-
Aplikasi Mobile:
-
Teknologi: Xamarin (memungkinkan pengembangan lintas platform, kemungkinan iOS dan Android).
-
Peran: Menyediakan “subset terbatas” fungsi yang dioptimalkan untuk perangkat mobile. Ini menunjukkan bahwa tugas-tugas kompleks (seperti menyiapkan transfer internasional) mungkin dibatasi pada antarmuka Web/SPA penuh, sementara tugas-tugas umum (mengecek saldo) tersedia di perangkat mobile.
-
B. Lapisan Logika Bisnis (Backend)
-
Aplikasi API:
-
Teknologi: Java dan Spring MVC.
-
Peran: Ini adalah sistem saraf pusat dari arsitektur ini. Ini berfungsi sebagai Pintu gerbang API atau Backend untuk Frontend (BFF).
-
Fungsi: Ini mengekspos API JSON/HTTPS ke klien Web dan Mobile. Ini menangani otentikasi, otorisasi, dan pengoordinasian permintaan data.
-
C. Lapisan Data & Integrasi
-
Database:
-
Teknologi: Skema Basis Data Oracle.
-
Peran: Menyimpan data khusus perbankan internet. Ini mencakup informasi pendaftaran pengguna, kredensial otentikasi yang di-hash (praktik terbaik keamanan), dan log akses. Ini tidak tidak menyimpan saldo bank yang sebenarnya (yang tersimpan di Mainframe).
-
Komunikasi: Aplikasi API membaca/menulis ke ini melalui JDBC.
-
-
Sistem Perbankan Mainframe:
-
Peran: Sistem Rujukan. Menyimpan informasi inti perbankan (pelanggan, rekening, transaksi).
-
Komunikasi: Aplikasi API berkomunikasi dengan Mainframe menggunakan XML melalui HTTPS. Ini menunjukkan bahwa Mainframe kemungkinan merupakan layanan berbasis SOAP warisan atau sistem lama yang memerlukan pertukaran data XML yang terstruktur.
-
-
Sistem E-mail:
-
Teknologi: Microsoft Exchange.
-
Peran: Menangani pemberitahuan.
-
Komunikasi: Aplikasi API mengirim email melalui SMTP ke server Exchange, yang kemudian mengirimkannya ke pelanggan.
-
4. Alur Data Utama & Perjalanan Pengguna
Skenario 1: Masuk menggunakan Peramban Web
-
The Pelanggan Perbankan Pribadi navigasi ke
bigbank.com/ibmenggunakan HTTPS. -
Permintaan masuk ke Aplikasi Web (Java/Spring MVC).
-
Aplikasi Web mengirimkan Aplikasi Satu Halaman (Angular) ke browser pelanggan.
-
Pelanggan memasukkan kredensial di SPA.
-
SPA melakukan panggilan API (
JSON/HTTPS) ke Aplikasi API. -
Aplikasi API memvalidasi kredensial terhadap Database (melalui JDBC).
-
Setelah berhasil, SPA meminta saldo rekening. Aplikasi API mengambil data ini dari Sistem Perbankan Mainframe (
XML/HTTPS) dan mengembalikannya ke SPA.
Skenario 2: Pemberitahuan Transaksi Mobile
-
Pelanggan melakukan pembayaran melalui Aplikasi Mobile (Xamarin).
-
Aplikasi mengirimkan permintaan ke Aplikasi API.
-
Aplikasi API memproses pembayaran dengan Mainframe.
-
Aplikasi API memicu email konfirmasi dengan mengirimkan permintaan SMTP ke Sistem E-mail (Exchange).
-
Pelanggan menerima pemberitahuan email.
5. Sorotan Teknis & Praktik Terbaik
-
Pemisahan Tanggung Jawab: Diagram ini dengan jelas memisahkan data khusus ‘Perbankan Internet’ (Oracle DB) dari data ‘Perbankan Inti’ (Mainframe). Ini mencegah lapisan web secara langsung mengakses buku besar keuangan inti.
-
Terjemahan Protokol: Aplikasi API berperan sebagai penerjemah. Antarmuka modern berbicara JSON, tetapi backend lama berbicara XML. Aplikasi API menghubungkan celah ini.
-
Keamanan: Kredensial disimpan sebagai ‘hash’ di basis data, memastikan bahwa bahkan jika basis data dirusak, kata sandi mentah tidak akan terungkap. Semua komunikasi eksternal menggunakan HTTPS.
-
Skalabilitas: Dengan menggunakan Aplikasi Halaman Tunggal (Angular) dan API yang terpisah, antarmuka depan dapat ditingkatkan skalanya secara independen dari logika backend.
This post is also available in Deutsch, English, Español, فارسی, Français, English, 日本語, Polski, Portuguese, Ру́сский, Việt Nam, 简体中文 and 繁體中文.













