de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

The Model C4, dikembangkan oleh Simon Brown, adalah pendekatan hierarkis yang kuat untuk memvisualisasikan arsitektur perangkat lunak. Model ini menggunakan empat tingkat abstraksi untuk memberikan tingkat detail yang tepat bagi berbagai audiens, mulai dari pemangku kepentingan bisnis hingga pengembang. Ini membuatnya sangat ideal untuk membuat dokumentasi yang jelas, dapat dipertahankan, dan berfokus pada audiens.

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

Panduan komprehensif ini mengambil inspirasi dari studi kasus terkenal tentang Sistem Perbankan Internet Big Bank plc — contoh fiktif namun realistis tentang membangun platform perbankan daring untuk pelanggan pribadi agar dapat melihat rekening dan melakukan pembayaran. Studi kasus ini menunjukkan bagaimana menerapkan model C4 secara bertahap, menggunakan PlantUML untuk ‘arsitektur sebagai kode’. Ini juga mengintegrasikan alat modern seperti Studio C4 PlantUML berbasis AI dari Visual Paradigm (diluncurkan akhir 2025) untuk mempercepat pembuatan dan pemeliharaan.

Ikhtisar Model C4

Model ini mencakup empat tingkatan:

  1. Tingkat 1: Konteks Sistem — Gambaran besar: sistem, pengguna, dan ketergantungan eksternal.

  2. Tingkat 2: Wadah — Unit-unit yang dapat dideploy (aplikasi, layanan, basis data) dan pilihan teknologi tingkat tinggi.

  3. Tingkat 3: Komponen — Blok-blok logis internal dalam suatu wadah.

  4. Tingkat 4: Kode — Detail tingkat rendah yang opsional (misalnya, kelas); sering diabaikan demi referensi kode sumber.

Tampilan pendukung tambahan mencakup diagram dinamis (aliran saat runtime) dan diagram penempatan.

Menerapkan Model C4: Studi Kasus Sistem Perbankan Internet Big Bank plc

Tingkat 1: Diagram Konteks Sistem

Tujuan: Menyediakan gambaran tingkat tinggi bagi pemangku kepentingan bisnis dan audiens non-teknis, menunjukkan bagaimana Sistem Perbankan Internet sesuai dalam lingkungan yang lebih luas tanpa menggunakan istilah teknis.

Elemen Kunci:

  • Orang: Pelanggan Perbankan Pribadi — Pelanggan dengan satu atau lebih rekening bank pribadi.

  • Sistem Perangkat Lunak: Sistem Perbankan Internet — Memungkinkan pelanggan melihat informasi rekening dan melakukan pembayaran.

  • Sistem Eksternal:

    • Sistem Perbankan Inti (mainframe yang ada) — Menangani data pelanggan, rekening, dan transaksi.

    • Sistem Email (misalnya, AWS SES) — Mengirim konfirmasi dan pemberitahuan.

Hubungan:

  • Pelanggan menggunakan sistem perbankan internet.

  • Sistem Perbankan Internet menggunakan sistem perbankan inti untuk data dan transaksi.

  • Sistem Perbankan Internet mengirim email melalui sistem email.

Tingkat ini menjaga agar segalanya tetap sederhana dan jelas mengenai cakupan dan integrasi.

Contoh PlantUML (adaptasi dari studi kasus):

@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", "Memungkinkan pelanggan 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", "Layanan Email Sederhana Amazon Web Services (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")
@enduml

Tingkat 2: Diagram Kontainer

Tujuan: Memperbesar untuk menampilkan blok-blok utama (kontainer) dan pilihan teknologi, ditujukan bagi arsitek, pengembang, dan tim DevOps.

Elemen Kunci (dalam batas sistem perbankan internet):

  • Aplikasi Halaman Tunggal (SPA) — JavaScript + Angular, antarmuka pengguna penuh di browser web.

  • Aplikasi Seluler — iOS/Android dengan React Native (atau serupa), fungsionalitas terbatas.

  • Aplikasi API — Java + Spring Boot, API JSON/HTTPS yang melayani kedua front-end.

  • Database — PostgreSQL, menyimpan data sesi, preferensi, dan ringkasan yang disimpan sementara (data inti tetap berada di mainframe).

Eksternal — Sistem Perbankan Inti dan Sistem Email.

Hubungan:

  • Pelanggan menggunakan SPA dan Aplikasi Mobile melalui HTTPS.

  • SPA dan Aplikasi Mobile memanggil Aplikasi API (JSON/HTTPS).

  • Aplikasi API membaca/menulis Database (JDBC/SQL).

  • Aplikasi API berinteraksi dengan Sistem Perbankan Inti (JSON/HTTPS) dan Sistem Email (HTTPS).

Diagram ini berfungsi sebagai ‘satu-satunya sumber kebenaran’ untuk keputusan teknologi.

Contoh PlantUML (menggunakan sprite untuk ikon):

@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 Kontainer 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") {
    Container(spa, "Aplikasi Halaman Tunggal", "JavaScript + Angular", "Antarmuka penuh perbankan internet", $sprite="angular")
    Container(mobile_app, "Aplikasi Mobile", "iOS/Android (React Native)", "Fungsi terbatas", $sprite="react")
    Container(api_app, "Aplikasi API", "Java + Spring Boot", "API JSON/HTTPS", $sprite="java")
    ContainerDb(database, "Database", "PostgreSQL", "Data sesi, preferensi, ringkasan yang disimpan sementara", $sprite="postgresql")
}
System(core_banking_system, "Sistem Perbankan Inti", "Mainframe yang ada...")
System_Ext(email_system, "Sistem Email", "AWS SES...")
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", "JDBC/SQL")
Rel(api_app, core_banking_system, "Mengambil data / Memperbarui", "JSON/HTTPS")
Rel(api_app, email_system, "Mengirim email melalui", "HTTPS")
@enduml

Tingkat 3: Diagram Komponen

Tujuan: Menjelaskan struktur internal dari sebuah container kunci (di sini, Aplikasi API) untuk tim pengembangan.

Komponen Utama (dalam Aplikasi API):

  • Controller Akun (Spring MVC) — Menyediakan ringkasan dan saldo.

  • Controller Otorisasi (Spring MVC) — Login, sesi, token.

  • Controller Atur Ulang Kata Sandi (Spring MVC) — Atur ulang kata sandi melalui email.

  • Komponen Keamanan (Spring Bean) — Otorisasi, JWT, hashing.

  • Komponen Manajemen Akun (Spring Bean) — Mengoordinasikan pemanggilan Sistem Perbankan Inti.

  • Komponen Pemberitahuan Email (Spring Bean) — Mengirim email.

Interaksi — Controller menggunakan Keamanan; Manajemen Akun menggunakan Sistem Perbankan Inti; Email menggunakan Database; front-end memanggil controller.

Contoh PlantUML:

PlantUML Diagram

@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", "...")
Container(ma, "Aplikasi Mobile", "...", "...")
ContainerDb(db, "Database", "...", "...")
System_Ext(mbs, "Sistem Perbankan Mainframe", "...")
Container_Boundary(api, "Aplikasi API") {
    Component(accounts, "Kontroler Akun", "Spring MVC", "...")
    Component(auth, "Kontroler Autentikasi", "Spring MVC", "...")
    Component(reset, "Kontroler Reset Kata Sandi", "Spring MVC", "...")
    Component(security, "Komponen Keamanan", "Spring Bean", "...")
    Component(accountmgmt, "Komponen Manajemen Akun", "Spring Bean", "...")
    Component(email, "Komponen Pemberitahuan Email", "Spring Bean", "...")
    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

Tingkat 4: Diagram Kode (Opsional)

Tujuan: Menampilkan rincian tingkat kelas untuk area tertentu (misalnya, Autentikasi).

Sering diabaikan — arahkan ke kode sumber sebagai gantinya.

Contoh — Diagram kelas UML untuk Autentikasi:

  • AuthenticationController menggunakan JwtTokenProvider dan UserRepository.

Contoh PlantUML:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credentials)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(user)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "menggunakan"
AuthenticationController ..> UserRepository : "menggunakan"
@enduml

Tampilan Pendukung

  • Diagram Dinamis (misalnya, urutan “Lihat Ringkasan Akun”): Pelanggan → SPA → API → Database/Perbankan Inti → Respons.

  • Diagram Penempatan: Memetakan kontainer ke infrastruktur (misalnya, AWS EC2 untuk API, RDS untuk Database, mainframe di tempat).

Memanfaatkan Alat Berbasis Kecerdasan Buatan Visual Paradigm

Visual Paradigm’s Studio C4 PlantUML Berbasis Kecerdasan Buatan (rilis akhir 2025) merevolusi proses ini:

  • Masukkan bahasa alami (misalnya, “Buat model C4 untuk sistem perbankan internet dengan SPA, aplikasi mobile, API Spring Boot, PostgreSQL, dan integrasi mainframe”).

  • AI menghasilkan kode PlantUML dan diagram untuk semua tingkatan.

  • Gunakan chatbot AI untuk melakukan iterasi (misalnya, “Tambahkan MFA ke komponen autentikasi” atau “Hasilkan tampilan penempatan di AWS”).

  • Menjaga konsistensi di seluruh tingkatan dan mendukung “dokumentasi hidup”.

  • Ekspor, kelola versi, dan integrasikan dengan repositori.

Alat ini memberikan output yang terstruktur dan sesuai C4 jauh lebih andal dibandingkan AI umum.

Praktik Terbaik

  1. Mulai dengan lokakarya — Gunakan papan tulis untuk Tingkat 1 untuk menyelaraskan pemangku kepentingan.

  2. Perlakukan arsitektur sebagai kode — Simpan file PlantUML di repositori Anda untuk pembaruan otomatis bersama perubahan kode.

  3. Otomatisasi dengan AI — Gunakan Visual Paradigm untuk menghasilkan dan menyempurnakan diagram dengan cepat.

  4. Fokus pada audiens — Abaikan detail teknis dari Level 1; tambahkan secara bertahap.

  5. Jaga agar tetap ringan — Hanya rinci wadah yang kompleks pada Level 3; lewati Level 4 kecuali sangat diperlukan.

  6. Kembangkan dokumentasi — Jadikan diagram sebagai “hidup” untuk mencegah artefak yang usang.

Studi kasus The Big Bank plc tetap menjadi contoh klasik tentang efektivitas model C4 dalam skenario dunia nyata, mempromosikan kejelasan, kolaborasi, dan komunikasi arsitektur yang dapat diskalakan. Untuk informasi lebih lanjut, jelajahi situs resmi C4 atau alat AI Visual Paradigm.

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