Membuat aplikasi tidak selalu dimulai dari menulis kode. Sebelum masuk ke tahap coding, ada satu hal penting yang sering dilewatkan oleh pemula, yaitu membuat System Design.

System Design membantu kita menentukan bagaimana aplikasi akan bekerja, bagaimana data berpindah, bagaimana setiap komponen saling terhubung, dan teknologi apa yang dibutuhkan.

Tanpa rancangan yang jelas, proses development bisa terasa seperti membangun rumah tanpa denah. Kode mungkin tetap bisa dibuat, tetapi ketika fitur semakin banyak, struktur aplikasi bisa menjadi sulit dipahami dan dikembangkan.

Kabar baiknya, membuat System Design untuk sebuah aplikasi tidak harus rumit. Kita bisa memulainya dari kebutuhan paling sederhana, lalu mengembangkan desain sesuai kebutuhan aplikasi.

Pada artikel ini, kita akan membahas cara membuat System Design dari nol dengan contoh yang mudah dipahami.

Apa Itu System Design?

System Design adalah proses merancang struktur, komponen, hubungan, dan alur kerja sebuah sistem sebelum aplikasi dikembangkan.

System Design dapat dianggap sebagai blueprint aplikasi.

Misalnya kita ingin membuat aplikasi toko online. Sebelum coding, kita perlu menentukan:

• Siapa yang menggunakan aplikasi?
• Fitur apa saja yang tersedia?
• Bagaimana pengguna berinteraksi dengan aplikasi?
• Di mana data produk disimpan?
• Bagaimana proses checkout dilakukan?
• Bagaimana pembayaran diproses?
• Bagaimana frontend berkomunikasi dengan backend?
• Bagaimana sistem menangani banyak pengguna?

Jawaban dari pertanyaan tersebut nantinya menjadi dasar rancangan sistem.

Mengapa Harus Membuat System Design Terlebih Dahulu?

Mungkin muncul pertanyaan:

“Kenapa tidak langsung coding saja?”

Untuk aplikasi yang sangat sederhana, langsung coding memang masih memungkinkan. Namun, semakin besar aplikasi, semakin banyak masalah yang mungkin muncul jika tidak memiliki rancangan.

Berikut beberapa manfaat membuat System Design.

1. Membuat Pengembangan Lebih Terarah

Developer memiliki gambaran tentang apa yang harus dibuat.

2. Mengurangi Kesalahan

Masalah pada struktur sistem dapat ditemukan lebih awal sebelum terlalu banyak kode dibuat.

3. Mempermudah Kerja Tim

Developer frontend, backend, database, dan bagian lainnya dapat memahami tugas masing-masing.

4. Mempermudah Pengembangan di Masa Depan

Struktur sistem yang jelas akan lebih mudah ditambahkan fitur baru.

5. Membantu Memilih Teknologi

Developer dapat menentukan teknologi berdasarkan kebutuhan, bukan sekadar mengikuti tren.

Cara Membuat System Design dari Nol

Sekarang kita masuk ke bagian utama.

Berikut langkah-langkah yang bisa digunakan untuk membuat System Design sebuah aplikasi dari nol.

1. Tentukan Masalah yang Ingin Diselesaikan

Jangan langsung memikirkan database atau server.

Mulailah dengan pertanyaan:

“Aplikasi ini dibuat untuk menyelesaikan masalah apa?”

Misalnya kita ingin membuat aplikasi toko online.

Masalah yang ingin diselesaikan adalah pengguna membutuhkan tempat untuk:

• Melihat produk
• Membeli produk
• Melakukan pembayaran
• Melihat status pesanan

Sedangkan admin membutuhkan sistem untuk:

• Mengelola produk
• Mengelola pesanan
• Melihat transaksi
• Mengelola pelanggan

Dengan memahami masalahnya, kita bisa menentukan fitur yang benar-benar dibutuhkan.

2. Tentukan Siapa Pengguna Sistem

Langkah berikutnya adalah menentukan siapa saja yang akan menggunakan aplikasi.

Misalnya aplikasi toko online memiliki dua jenis pengguna:

User
 ├── Melihat produk
 ├── Membeli produk
 ├── Checkout
 └── Melihat pesanan

Admin
 ├── Mengelola produk
 ├── Mengelola pesanan
 └── Melihat laporan

Penentuan pengguna ini penting karena setiap pengguna bisa memiliki hak akses yang berbeda.

3. Tentukan Fitur Utama

Setelah mengetahui pengguna, buat daftar fitur yang dibutuhkan.

Contohnya:

Fitur User

• Registrasi
• Login
• Melihat produk
• Mencari produk
• Keranjang
• Checkout
• Pembayaran
• Riwayat pesanan

Fitur Admin

• Login
• Dashboard
• Kelola produk
• Kelola kategori
• Kelola pesanan
• Laporan

Jangan memasukkan terlalu banyak fitur di awal.

Mulai dari fitur utama terlebih dahulu.

4. Buat User Flow

Setelah fitur ditentukan, kita perlu memahami bagaimana pengguna berpindah dari satu proses ke proses lainnya.

Contoh user flow pembelian:

User
 ↓
Login
 ↓
Melihat Produk
 ↓
Pilih Produk
 ↓
Tambah ke Keranjang
 ↓
Checkout
 ↓
Pembayaran
 ↓
Pesanan Dibuat
 ↓
Melihat Status Pesanan

User flow membantu kita memahami perjalanan pengguna di dalam aplikasi.

Dengan begitu, developer tidak hanya melihat fitur secara terpisah, tetapi juga memahami bagaimana fitur tersebut saling berhubungan.

5. Tentukan Arsitektur Sistem

Setelah memahami kebutuhan aplikasi, sekarang kita mulai menentukan struktur sistem.

Untuk aplikasi sederhana, arsitekturnya bisa seperti ini:

User
 ↓
Frontend
 ↓
Backend
 ↓
Database

Contohnya:

Browser
   ↓
HTML / CSS / JavaScript
   ↓
PHP / Laravel
   ↓
MySQL

Untuk aplikasi yang lebih kompleks, arsitekturnya dapat berkembang menjadi:

User
 ↓
Frontend
 ↓
Load Balancer
 ↓
API Gateway
 ↓
Backend Services
 ├── User Service
 ├── Product Service
 ├── Order Service
 └── Payment Service
        ↓
    Database

Tidak ada aturan bahwa semua aplikasi harus menggunakan arsitektur yang kompleks.

Gunakan arsitektur sesuai kebutuhan.

6. Tentukan Komponen Sistem

Setelah arsitektur dibuat, tentukan komponen yang diperlukan.

Contohnya aplikasi toko online membutuhkan:

• Frontend
• Backend
• API
• Database
• Authentication
• Storage
• Payment Service

Untuk aplikasi yang lebih besar, mungkin diperlukan:

• Load Balancer
• Cache
• Message Queue
• CDN
• Monitoring
• Multiple Database

Contoh:

                    User
                      |
                      v
                  Frontend
                      |
                      v
                    API
                      |
          +-----------+-----------+
          |                       |
          v                       v
       Backend                 Cache
          |
     +----+----+
     |         |
     v         v
 Database    Storage

7. Rancang Database

Database menjadi salah satu bagian penting dalam System Design.

Tentukan data apa saja yang perlu disimpan.

Untuk aplikasi toko online, misalnya:

users
products
categories
orders
order_items
payments

Kemudian tentukan hubungan antar tabel.

Contohnya:

users
  |
  | 1
  |
  | N
orders
  |
  | 1
  |
  | N
order_items
  |
  | N
  |
  | 1
products

Artinya satu user dapat memiliki banyak order.

Satu order dapat memiliki banyak item.

Setiap item mengarah ke produk tertentu.

Pada tahap ini, pembuatan ERD (Entity Relationship Diagram) juga dapat membantu memperjelas struktur database.

8. Tentukan API

Jika frontend dan backend berkomunikasi menggunakan API, kita perlu menentukan endpoint yang diperlukan.

Contohnya:

GET    /api/products
GET    /api/products/{id}
POST   /api/orders
GET    /api/orders
POST   /api/payments

Contohnya ketika frontend meminta daftar produk:

Frontend
   |
   | GET /api/products
   v
Backend
   |
   v
Database
   |
   v
Backend
   |
   | JSON
   v
Frontend

Dengan rancangan API yang jelas, frontend dan backend dapat dikembangkan secara lebih teratur.

9. Tentukan Authentication dan Authorization

Aplikasi yang memiliki akun pengguna membutuhkan mekanisme untuk mengatur akses.

Authentication

Menentukan apakah pengguna sudah login dan siapa pengguna tersebut.

Authorization

Menentukan apa yang boleh dilakukan pengguna.

Misalnya:

Admin
 ├── Kelola Produk
 ├── Kelola Pesanan
 └── Lihat Laporan

User
 ├── Lihat Produk
 ├── Membuat Pesanan
 └── Lihat Pesanan Sendiri

Dengan begitu, user biasa tidak dapat membuka halaman yang hanya diperuntukkan bagi admin.

10. Pikirkan Performa Sistem

Setelah sistem dasar dibuat, mulai pikirkan performanya.

Pertanyaan yang bisa digunakan:

• Bagaimana jika pengguna bertambah?
• Bagaimana jika database memiliki jutaan data?
• Bagaimana jika banyak user mengakses halaman yang sama?
• Bagaimana jika request datang secara bersamaan?

Untuk mengatasi masalah tersebut, beberapa teknologi dapat digunakan.

Cache

Mengurangi request langsung ke database.

Load Balancer

Membagi traffic ke beberapa server.

Database Replication

Membuat salinan database untuk kebutuhan tertentu.

CDN

Membantu menyajikan file statis dari lokasi yang lebih dekat dengan pengguna.

Namun, jangan menambahkan komponen tersebut jika memang belum dibutuhkan.

11. Pikirkan Keamanan

Keamanan sebaiknya dirancang sejak awal.

Beberapa hal yang perlu diperhatikan:

• Password harus disimpan menggunakan hashing yang aman.
• Gunakan HTTPS.
• Validasi input pengguna.
• Terapkan authorization.
• Lindungi API.
• Hindari menyimpan secret langsung di source code.
• Batasi request yang berlebihan.
• Lakukan backup data secara berkala.

Misalnya jangan membuat sistem seperti:

password = "123456"

Kemudian menyimpannya secara langsung di database.

Password seharusnya diproses menggunakan mekanisme hashing yang sesuai.

12. Pikirkan Error Handling

Sistem yang baik bukan hanya mampu menangani kondisi normal, tetapi juga kondisi ketika terjadi kesalahan.

Contohnya:

• Database tidak bisa diakses
• Pembayaran gagal
• Server mengalami masalah
• API mengalami timeout
• Data yang dikirim tidak valid

Misalnya ketika pembayaran gagal:

User
 ↓
Checkout
 ↓
Payment
 ↓
Pembayaran Gagal
 ↓
Tampilkan Pesan Error
 ↓
User Bisa Mencoba Lagi

Dengan memikirkan kondisi seperti ini sejak awal, aplikasi akan lebih siap menghadapi berbagai situasi.

Change block type or style

Move Paragraph block from position 158 up to position 157

Move Paragraph block from position 158 down to position 159

Change text alignment

Displays more block tools

13. Tambahkan Monitoring dan Logging

Setelah aplikasi berjalan, developer perlu mengetahui kondisi sistem.

Monitoring dapat digunakan untuk melihat:

• Penggunaan CPU
• Penggunaan RAM
• Traffic
• Response time
• Error rate
• Kondisi database

Sedangkan logging mencatat aktivitas atau kejadian dalam sistem.

Contohnya:

[10:10] User login
[10:12] User membuat order
[10:13] Payment berhasil
[10:14] Notification sent

Ketika terjadi masalah, log dapat membantu proses troubleshooting.

14. Dokumentasikan System Design

System Design jangan hanya disimpan di kepala developer.

Buat dokumentasi agar orang lain dapat memahami sistem.

Dokumentasi dapat berisi:

• Diagram arsitektur
• User flow
• ERD
• API documentation
• Penjelasan komponen
• Teknologi yang digunakan
• Alur data
• Aturan authentication
• Informasi deployment

Contohnya, struktur dokumentasi sederhana:

SYSTEM DESIGN
│
├── Overview
├── User Flow
├── Architecture
├── Database
├── API
├── Authentication
├── Security
└── Deployment

Dokumentasi akan sangat membantu ketika project dikerjakan bersama tim.

Contoh System Design dari Nol

Sekarang kita gabungkan semua langkah tadi menggunakan contoh aplikasi toko online sederhana.

1. Pengguna

Customer
Admin

2. Fitur

Customer:

Login
Produk
Keranjang
Checkout
Pembayaran
Pesanan

Admin:

Dashboard
Produk
Pesanan
Laporan

3. Arsitektur

              CUSTOMER
                  |
                  v
              FRONTEND
                  |
                  v
                API
                  |
                  v
              BACKEND
             /       \
            v         v
       DATABASE     STORAGE

4. Database

users
products
categories
orders
order_items
payments

5. Alur Checkout

Customer
   ↓
Pilih Produk
   ↓
Keranjang
   ↓
Checkout
   ↓
Buat Order
   ↓
Payment
   ↓
Payment Berhasil
   ↓
Order Diproses

Dari contoh tersebut, kita sudah memiliki gambaran dasar System Design untuk sebuah aplikasi.

Tools yang Bisa Digunakan untuk Membuat System Design

System Design tidak harus dibuat menggunakan software yang rumit.

Beberapa tools yang dapat digunakan untuk membuat diagram dan dokumentasi antara lain:

• Draw.io
• Figma
• Lucidchart
• Miro
• Excalidraw
• FigJam

Untuk pemula, tool seperti Draw.io atau Excalidraw sudah cukup untuk membuat diagram sederhana.

Yang paling penting bukan tools-nya, tetapi apakah diagram tersebut mampu menjelaskan cara kerja sistem dengan jelas.

Tips Membuat System Design untuk Pemula

Jika baru belajar, jangan langsung mencoba merancang sistem sebesar platform dengan jutaan pengguna.

Mulai dari aplikasi sederhana seperti:

• Sistem kasir
• Sistem perpustakaan
• Aplikasi absensi
• Toko online
• Aplikasi booking
• Sistem manajemen sekolah

Kemudian gunakan pertanyaan berikut:

Siapa yang menggunakan sistem?

Apa yang bisa dilakukan pengguna?

Data apa yang perlu disimpan?

Bagaimana data berpindah dari frontend ke backend?

Bagaimana sistem menangani error?

Bagaimana sistem bisa dikembangkan ketika pengguna bertambah?

Dari pertanyaan tersebut, perlahan kamu akan terbiasa berpikir seperti seorang system designer.

Kesalahan yang Perlu Dihindari

Langsung Memilih Teknologi

Jangan memulai dengan pertanyaan:

“Pakai React atau Vue?”

Mulailah dari kebutuhan sistem.

Membuat Sistem Terlalu Kompleks

Aplikasi sederhana tidak harus menggunakan microservices.

Mengabaikan Database

Database merupakan bagian penting dari hampir semua aplikasi yang mengelola data.

Tidak Memikirkan Security

Keamanan sebaiknya menjadi bagian dari rancangan sejak awal.

Tidak Membuat Dokumentasi

Rancangan yang tidak terdokumentasi akan sulit dipahami ketika project berkembang atau dikerjakan bersama tim.

Kesimpulan

Cara membuat System Design untuk sebuah aplikasi dari nol sebenarnya dapat dimulai dengan langkah yang sederhana. Kita tidak harus langsung memikirkan teknologi yang kompleks.

Mulailah dengan memahami masalah, menentukan pengguna, membuat daftar fitur, menyusun user flow, menentukan arsitektur, merancang database, menentukan API, kemudian memikirkan security, performance, error handling, monitoring, dan dokumentasi.

Yang paling penting adalah memahami bahwa System Design bukan tentang membuat sistem serumit mungkin.

System Design adalah tentang membuat rancangan yang sesuai dengan kebutuhan aplikasi.

Semakin sering kamu mencoba merancang aplikasi sederhana, semakin terbiasa juga kamu memahami bagaimana frontend, backend, database, API, server, dan komponen lainnya bekerja sebagai satu kesatuan.

Jadi, sebelum membuka editor kode dan mulai mengetik baris demi baris, coba luangkan waktu untuk membuat rancangan sistem terlebih dahulu. Beberapa menit membuat desain di awal bisa menghemat banyak waktu ketika aplikasi mulai berkembang.