de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Studi Kasus Langkah Demi Langkah Secara Komprehensif: Menerapkan Model C4 pada Sistem Perbankan Internet (Big Bank plc)

The Model C4, yang dibuat oleh Simon Brown, adalah cara sederhana, hierarkis, dan ramah pengembang untuk memvisualisasikan arsitektur perangkat lunak. Model ini menggunakan empat tingkat abstraksi (mengapa disebut “C4”) untuk menggambarkan suatu sistem dari gambaran umum tingkat tertinggi hingga detail tingkat kode:

  1. Konteks Sistem (Tingkat 1) – Gambaran besar: sistem dan pengguna/dependensi eksternalnya.
  2. Kontainer (Tingkat 2) – Pilihan teknologi tingkat tinggi dan tanggung jawabnya.
  3. Komponen (Tingkat 3) – Blok-blok logis utama di dalam suatu kontainer.
  4. Kode (Tingkat 4) – Detail opsional tingkat kelas atau struktur kode.

Model ini didukung oleh tiga jenis diagram tambahan:

  • Lanskap Sistem
  • Dinamis
  • Penempatan

Model ini tidak terikat notasi (Anda dapat menggunakan alat diagram apa pun) dan berfokus pada kejelasan, konsistensi, serta detail yang sesuai dengan audiens. Model ini banyak diadopsi karena menghindari diagram arsitektur yang berantakan seperti ‘big ball of mud’ dan dapat diterapkan dari sketsa papan tulis hingga dokumentasi otomatis.

Untuk ini studi kasus yang ditargetkan, kami menggunakan contoh standar dari situs web resmi C4: Sistem Perbankan Internet untuk bank fiksi “Big Bank plc”. Tujuan bisnisnya adalah memungkinkan pelanggan pribadi melihat rekening mereka dan melakukan pembayaran secara daring sambil terintegrasi dengan sistem inti bank yang sudah ada.

Kami akan membahas secara menyeluruh setiap tingkat dengan:

  • Tujuan dan audiens
  • Elemen utama + tanggung jawab
  • Hubungan
  • Diagram C4 PlantUML siap pakai Diagram C4 PlantUML(PlantUML mendukung sintaks C4 dan tampilan yang indah di sebagian besar penampil Markdown)
  • Rasional dan keputusan utama
  • Bagaimana diagram membantu pemangku kepentingan

Langkah 1: Tentukan Lingkup & Buat Diagram Konteks Sistem (Tingkat 1)

Tujuan: Menunjukkan bagaimana Sistem Perbankan Internet baru sesuai dengan dunia. Audiens: pemangku kepentingan bisnis, orang-orang non-teknis, anggota tim baru.

Elemen (dari contoh resmi):

  • Pelanggan Perbankan Pribadi (Person) – Seorang pelanggan dengan satu atau lebih rekening bank pribadi.
  • Sistem Perbankan Internet (Sistem Perangkat Lunak) – Sistem baru yang sedang kita bangun.
  • Sistem Perbankan Inti (Sistem Perangkat Lunak, ada) – Mainframe yang menangani data pelanggan, rekening, dan transaksi.
  • Sistem Email (Sistem Perangkat Lunak, eksternal) – Amazon Web Services Simple Email Service (AWS SES) untuk mengirim konfirmasi.

Hubungan:

  • Pelanggan → menggunakan → Sistem Perbankan Internet (untuk melihat rekening dan melakukan pembayaran)
  • Sistem Perbankan Internet → menggunakan → Sistem Perbankan Inti (untuk data rekening & pembayaran)
  • Sistem Perbankan Internet → mengirim email melalui → Sistem Email

Berikut ini adalah Diagram Konteks C4 PlantUML:

PlantUML


Edit PlantUML di VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagram Konteks Sistem (Tingkat 1) untuk Sistem Perbankan Internet

Person(customer, "Pelanggan Perbankan Pribadi", "Seorang pelanggan dengan satu atau lebih rekening bank pribadi.")
System(internet_banking_system, "Sistem Perbankan Internet", "Sistem baru untuk melihat rekening dan melakukan pembayaran.")
System(core_banking_system, "Sistem Perbankan Inti", "Mainframe yang ada menangani data pelanggan, rekening, dan transaksi.")
System_Ext(email_system, "Sistem Email", "Amazon Web Services Simple Email Service (AWS SES) untuk mengirim konfirmasi.")

Rel(customer, internet_banking_system, "Menggunakan")
Rel(internet_banking_system, core_banking_system, "Menggunakan")
Rel(internet_banking_system, email_system, "Mengirim email melalui")

Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)
@enduml
Edit Plantuml in VPasCode



Edit PlantUML di VPasCode

Rasional & nilai: Diagram tunggal ini langsung menjawab pertanyaan “Apa yang sedang kita bangun dan siapa yang berinteraksi dengannya?” Diagram ini mencegah perluasan lingkup dengan membuat ketergantungan eksternal menjadi jelas. Pemangku kepentingan bisnis menyukainya karena belum ada detail teknologi.

Langkah 2: Diagram Container (Tingkat 2)

Tujuan: Perbesar sistem perbankan internet dan tunjukkan unit-unit utama yang dapat di-deploy/jalankan (container) serta pilihan teknologinya. Audiens: arsitek, pengembang utama, operasional.

Container di dalam Sistem Perbankan Internet:

  • Aplikasi Halaman Tunggal (Browser Web – JavaScript + Angular) – Antarmuka pengguna perbankan internet lengkap.
  • Aplikasi Seluler (Perangkat seluler – native iOS/Android atau React Native) – Fungsi terbatas untuk penggunaan saat sedang dalam perjalanan.
  • Aplikasi API (Sisi server – Java + Spring Boot) – API JSON/HTTPS yang digunakan oleh kedua antarmuka depan.
  • Database (DB Relasional – PostgreSQL) – Menyimpan data sesi, preferensi pengguna, ringkasan akun yang di-cache (data inti tetap berada di mainframe lama).

Hubungan utama (sistem eksternal yang sama seperti Tingkat 1):

  • SPA & Aplikasi Seluler → memanggil → Aplikasi API
  • Aplikasi API ↔ Database
  • Aplikasi API → Sistem Perbankan Inti & Sistem Email

Diagram Container C4 PlantUML:

PlantUML


Edit PlantUML di VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagram Container C4 untuk Sistem Perbankan Internet

Person(customer, "Pelanggan Perbankan Pribadi", "Seorang pelanggan dengan satu atau lebih rekening bank pribadi.")

System_Boundary(internet_banking_system, "Sistem Perbankan Internet", "Sistem baru untuk melihat rekening dan melakukan pembayaran.") {
Container(spa, "Aplikasi Halaman Tunggal", "JavaScript + Angular", "Antarmuka pengguna perbankan internet lengkap", $sprite="angular")
Container(mobile_app, "Aplikasi Seluler", "iOS/Android (React Native)", "Fungsi terbatas untuk penggunaan saat sedang dalam perjalanan", $sprite="react")
Container(api_app, "Aplikasi API", "Java + Spring Boot", "API JSON/HTTPS yang digunakan oleh kedua antarmuka depan", $sprite="java")
ContainerDb(database, "Database", "PostgreSQL", "Menyimpan data sesi, preferensi pengguna, ringkasan akun yang di-cache", $sprite="postgresql")
}

System(core_banking_system, "Sistem Perbankan Inti", "Mainframe yang ada menangani data pelanggan, rekening, dan transaksi.")
System_Ext(email_system, "Sistem Email", "Amazon Web Services Simple Email Service (AWS SES) untuk mengirim konfirmasi.")

' Hubungan
Rel(customer, spa, "Menggunakan", "HTTPS")
Rel(customer, mobile_app, "Menggunakan", "HTTPS")
Rel(spa, api_app, "Memanggil", "JSON/HTTPS")
Rel(mobile_app, api_app, "Memanggil", "JSON/HTTPS")
Rel(api_app, database, "Membaca dan menulis ke", "JDBC/SQL")
Rel(api_app, core_banking_system, "Mengambil data / Memperbarui", "JSON/HTTPS")
Rel(api_app, email_system, "Mengirim email melalui", "HTTPS")

' Petunjuk tata letak (opsional – membantu PlantUML mengatur elemen dengan lebih baik)
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml
Edit Plantuml in VPasCode



Edit PlantUML di VPasCode

Alasan: Kami memilih pola SPA modern + backend API untuk web, aplikasi seluler native untuk kinerja, dan menjaga database tetap ringan (kebanyakan data berada di mainframe lama). Diagram ini merupakan satu-satunya sumber kebenaran untuk keputusan teknologi tingkat tinggi dan membantu tim DevOps merencanakan infrastruktur.

Langkah 3: Diagram Komponen (Tingkat 3)

Tujuan: Perbesar satu container (biasanya yang paling kompleks – Aplikasi API) dan tunjukkan komponen logis utamanya. Audiens: tim pengembangan.

Contoh: Komponen di dalam Aplikasi API:

  • Controller Akun (Spring MVC)
  • Controller Autentikasi
  • Controller Atur Ulang Kata Sandi
  • Komponen Keamanan (menangani otentikasi, JWT, dll.)
  • Komponen Manajemen Akun (mengoordinasikan panggilan ke Sistem Perbankan Inti)
  • Komponen Pemberitahuan Email

Diagram Komponen PlantUML C4 (fokus pada Aplikasi API):

PlantUML


Edit PlantUML di VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

LAYOUT_WITH_LEGEND()

title Diagram Komponen untuk Sistem Perbankan Internet - Aplikasi API

Container(spa, "Aplikasi Halaman Tunggal", "javascript dan angular", "Menyediakan semua fungsi perbankan internet kepada pelanggan melalui peramban web mereka.")
Container(ma, "Aplikasi Mobile", "Xamarin", "Menyediakan subset terbatas dari fungsi perbankan internet kepada pelanggan melalui perangkat mobile mereka.")
ContainerDb(db, "Database", "Skema Basis Data Relasional", "Menyimpan informasi pendaftaran pengguna, kredensial otentikasi yang di-hash, log akses, dll.")
System_Ext(mbs, "Sistem Perbankan Mainframe", "Menyimpan semua informasi inti perbankan tentang pelanggan, akun, transaksi, dll.")

Container_Boundary(api, "Aplikasi API") {
    Component(accounts, "Controller Akun", "Spring MVC", "Menyediakan ringkasan dan saldo akun kepada pelanggan.")
    Component(auth, "Controller Autentikasi", "Spring MVC", "Menangani login pengguna, manajemen sesi, dan generasi token.")
    Component(reset, "Controller Atur Ulang Kata Sandi", "Spring MVC", "Memungkinkan pengguna mengatur ulang kata sandi mereka melalui email.")
    Component(security, "Komponen Keamanan", "Spring Bean", "Menangani otentikasi, generasi token JWT, dan pengacakan kata sandi.")
    Component(accountmgmt, "Komponen Manajemen Akun", "Spring Bean", "Mengoordinasikan panggilan ke sistem perbankan inti untuk operasi akun.")
    Component(email, "Komponen Pemberitahuan Email", "Spring Bean", "Mengirim email pengaturan ulang kata sandi dan email verifikasi akun melalui SMTP.")

    Rel(accounts, security, "Menggunakan")
    Rel(auth, security, "Menggunakan")
    Rel(reset, security, "Menggunakan")
    Rel(accountmgmt, mbs, "Menggunakan", "XML/HTTPS")
    Rel(email, db, "Membaca", "JDBC")
}

Rel(spa, accounts, "Menggunakan", "JSON/HTTPS")
Rel(spa, auth, "Menggunakan", "JSON/HTTPS")
Rel(spa, reset, "Menggunakan", "JSON/HTTPS")
Rel(ma, accounts, "Menggunakan", "JSON/HTTPS")
Rel(ma, auth, "Menggunakan", "JSON/HTTPS")
Rel(ma, reset, "Menggunakan", "JSON/HTTPS")
@enduml
Edit Plantuml in VPasCode



Edit PlantUML di VPasCode

Alasan: Tingkat ini menunjukkan bagaimana tanggung jawab dibagi (pemisahan kepedulian) dan membuat onboarding pengembang baru jauh lebih cepat. Anda hanya menggambar diagram komponen untuk container yang cukup kompleks untuk membenarkan hal tersebut.

Langkah 4: Diagram Kode (Tingkat 4) – Opsional

Tujuan: Menampilkan struktur internal dari satu komponen (diagram kelas, urutan, dll.). Audiens: pengembang yang bekerja pada kode tersebut.

Contoh untukController Autentikasikomponen – diagram kelas UML sederhana dalam PlantUML:

PlantUML


Edit PlantUML di VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
classDiagram

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class "AuthenticationController" {
+login(credentials)
+refreshToken()
}

class "JwtTokenProvider" {
+generateToken(user)
+validateToken(token)
}

class "UserRepository" {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : "menggunakan"
AuthenticationController ..> UserRepository : "menggunakan"
@enduml
Edit Plantuml in VPasCode



Edit PlantUML di VPasCode

Dalam proyek nyata, Anda sering melewatkan Tingkat 4 dan langsung mengarahkan ke kode sumber yang sebenarnya.

Langkah 5: Diagram Pendukung

Diagram Dinamis (contoh: alur “Lihat Ringkasan Akun”)

PlantUML


Edit PlantUML di VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Diagram dinamis untuk Tampilan Ringkasan Akun

Person(customer, "Pelanggan Perbankan Pribadi") {
Container(spa, "Aplikasi Halaman Tunggal") {
Container(api, "Aplikasi API") {
ContainerDb(db, "Database") {
System_Ext(coreBanking, "Sistem Perbankan Inti")
}
}
}
}

Rel(customer, spa, "1. Klik 'Akun'", "")
Rel(spa, api, "2. GET /accounts", "JSON/HTTPS")
Rel(api, db, "3. Baca ringkasan yang di-cache", "")
Rel(api, coreBanking, "4. Ambil data terbaru", "")
Rel(api, spa, "5. Kembalikan JSON", "")

SHOW_LEGEND()
@enduml
Edit Plantuml in VPasCode



Edit PlantUML di VPasCode

Diagram Penempatan (pemetaan fisik tingkat tinggi):

PlantUML


Edit PlantUML di VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Diagram Penempatan untuk Sistem Perbankan Internet

Deployment_Node(aws, "Amazon Web Services", "Cloud") {
Deployment_Node(ec2, "Kelompok Penyesuaian Otomatis EC2", "Linux") {
Container(api, "Aplikasi API", "Java Spring Boot")
}
Deployment_Node(rds, "RDS", "PostgreSQL") {
ContainerDb(db, "Database")
}
}

Deployment_Node(customerDevice, "Perangkat Pelanggan", "Web/Mobile") {
Container(spa, "Aplikasi Halaman Tunggal")
Container(mobile, "Aplikasi Seluler")
}

System_Ext(coreBanking, "Sistem Perbankan Inti (mainframe lokal)")

Rel(spa, api, "Melakukan panggilan API ke", "HTTPS")
Rel(mobile, api, "Melakukan panggilan API ke", "HTTPS")
Rel_U(api, spa, "Mengirimkan ke browser pelanggan")
Rel_U(api, mobile, "Mengirimkan ke aplikasi seluler")

SHOW_LEGEND()
@enduml
Edit Plantuml in VPasCode



Edit PlantUML di VPasCode

Cara Menggunakan Studi Kasus Ini dalam Praktik

  1. Mulailah dengan lokakarya: gambar Konteks di papan tulis.
  2. Iterasi ke Container dan Komponen menggunakan PlantUML C4.
  3. Simpan diagram di repositori kode (sebagai kode!) agar tetap diperbarui.
  4. Hasilkan dokumentasi hidup secara otomatis.

Contoh Sistem Perbankan Internet ini persis seperti yang dibuat oleh Simon Brown sebagai referensi resmi dan digunakan oleh ribuan organisasi di seluruh dunia. Dengan mengikuti langkah-langkah ini, Anda kini memiliki deskripsi arsitektur lengkap dan siap produksi yang dapat dipahami oleh siapa saja—mulai dari CEO hingga developer junior baru—pada tingkat detail yang tepat.

Artikel Diagram C4

This post is also available in Deutsch, English, Español, فارسی, Français, English, 日本語, Polski, Portuguese, Ру́сский, Việt Nam, 简体中文 and 繁體中文.