Komponen Sistem — Bagian yang Dibuat Sendiri dan Bagian yang Diserahkan ke Layanan Eksternal

Artikel ini adalah bagian dari kursus Dasar-Dasar Teknologi Informasi, yang membangun dari nol pengetahuan TI praktis yang minimal kamu butuhkan untuk memprogram dan melakukan vibe coding.
Aplikasi Web terbagi menjadi 4 bagian: frontend, backend, database, dan layanan eksternal. Diagram memperlihatkan sampai mana kamu membuatnya sendiri dan dari mana kamu mulai memakai layanan luar.

Artikel ini membahas 4 komponen yang menyusun aplikasi Web.

Tiga di antaranya kamu buat sendiri (dikembangkan dan disiapkan di sisi kamu), dan sisanya yang satu kamu pakai sebagai layanan eksternal.

Komponen my-app — 3 yang dibuat sendiri, dan layanan eksternal
my-app (aplikasi reservasi khusus anggota)
Komponen yang dibuat sendiri
Frontend
  • Layar untuk memasukkan tanggal reservasi dan nama
  • Berjalan di perangkat pengguna
Backend
  • Memproses isi reservasi yang diterima
  • Pemeriksaan identitas juga dilakukan di sini
Database
  • Menyimpan data reservasi dan anggota
  • Bisa dicari dan diperbarui nanti
Komponen yang dipakai sebagai layanan eksternal
  • Pengiriman email konfirmasi, pembayaran, tampilan peta
  • Memanggil fungsi yang dioperasikan perusahaan lain
Bingkai luar adalah satu aplikasi. Tiga bagian di bingkai atas adalah komponen yang dibuat sendiri, dan bingkai bawah adalah komponen yang memakai fungsi yang dioperasikan perusahaan lain.

Batas antara membuat sendiri dan memakai layanan ada tepat di pertemuan kedua bingkai ini.

Aplikasi Web terbagi menjadi 4 komponen

Keempat komponen itu adalah frontend, backend, database, dan layanan eksternal (external service).

Apa yang ditangani tiap komponen dari 4 itu, dan di mana ia berjalan
Frontendsisi layarBackendsisi serverDatabasedata tersimpanLayanan eksternalperusahaan lainMenggambar layar,menerima inputOlah data kirimanlalu kembalikanSimpan data agarbisa dicari/diubahPakai fungsi milikperusahaan lainPerangkat penggunaServerServerServer pihak lain
Tiap baris adalah satu komponen. Kolom kiri adalah namanya, kolom tengah adalah yang ditanganinya, dan kolom kanan adalah tempat ia berjalan. Yang tidak berjalan di sisi kamu hanya baris paling bawah.
Bagian mana dari 4 komponen yang terhubung ke bagian mana
Perangkat penggunaFrontendlayar dan inputBackendputuskan, prosesDatabasereservasi, anggotaLayanan eksternalemail, pembayaranIsi reservasiBaca dan tulisMinta lewat API
Dari kiri ke kanan. Hanya backend yang terhubung ke kedua sisi; frontend tidak terhubung langsung ke database maupun ke layanan eksternal.

Yang terhubung ke database dan layanan eksternal adalah backend, dan layar tidak terhubung langsung ke keduanya.

Kedua bagian ini berjalan di server, yaitu komputer yang terus menyala dan bisa menerima request dari komputer lain kapan saja, dan komputer itu berbeda dari perangkat pengguna.

Hanya yang keempat, yaitu layanan eksternal, yang tidak dibuat sendiri; kamu memakai yang dioperasikan perusahaan lain.

Saat terjadi gangguan, mana yang bisa kamu perbaiki
TerjadigangguanFrontendbackend, DBLayanan eksternalBisa kamu perbaikiMenunggu pemulihanperusahaan lainCari penyebabnyalalu perbaiki kodeCek situasinyakabari pengguna
Satu peristiwa di kiri bercabang ke atas dan ke bawah. Cabang atas bisa kamu perbaiki karena implementasinya ada di sisi kamu; cabang bawah dioperasikan perusahaan lain, jadi kamu menunggu. Kolom kanan adalah yang kamu lakukan saat itu.

Tiga bagian di cabang atas implementasinya ada di sisi kamu, jadi yang memperbaikinya juga kamu.

Khusus database, bentuknya adalah memilih produk lalu mengoperasikannya, tetapi saat berhenti bekerja, yang turun tangan tetap sisi kamu.

Hanya layanan eksternal yang tidak bisa kamu perbaiki sendiri saat terjadi gangguan, dan kamu menunggu pemulihan dari perusahaan lain.

Menentukan apa yang diserahkan berarti juga menentukan bagian mana yang tidak bisa kamu perbaiki sendiri.

Empat komponen, satu batas

Aplikasi Web terbagi menjadi 4: frontend, backend, database, dan layanan eksternal.

Tiga yang pertama kamu buat sendiri, dan hanya untuk layanan eksternal kamu memakai fungsi yang dioperasikan perusahaan lain, sehingga siapa yang menyiapkan implementasi dan siapa yang menangani gangguan sama-sama berganti di batas ini.

Layanan eksternal tidak dibuat sendiri, melainkan dipakai lewat API

Fungsi yang berat kalau disiapkan sendiri, seperti mengirim email konfirmasi atau menerima pembayaran, diserahkan ke layanan eksternal.

Aturan yang kamu ikuti saat memanggil layanan eksternal adalah API (Application Programming Interface, yaitu aturan yang disepakati agar program bisa saling bertukar data).

Meski diserahkan ke layanan eksternal, kedua ujungnya tetap milik kamu
Susun alamatdan isi pesanMinta kirimlewat APILayanan eksternalmengirim emailTerima hasilnyalalu catatTugas kamuTugas kamuTugas layananeksternalTugas kamuTentukan apayang dikirimTulis dalamformat tertentuKelola pengirimandan keterkirimanPastikan apakahsudah terkirim
Baris atas adalah alur sampai email konfirmasi terkirim. Hanya 2 bagian di tengah yang menjadi tugas layanan eksternal, sedangkan yang paling kiri dan paling kanan tetap di sisi kamu.

Yang berpindah ke layanan eksternal hanya bagian tengah, sedangkan mengirim permintaan dan memastikan hasilnya tetap di sisi kamu.

Yang tetap di sisi kamu hanya mengirim permintaan dan memastikan hasil yang kembali.

Kalau dibuat sendiri, selain fungsinya sendiri, pemeliharaannya pun menjadi tugas kamu.

Meski diserahkan, mengirim permintaan dan memastikan hasilnya tetap menjadi bagian kamu.

Yang berpindah ke layanan eksternal hanya implementasinya.

Layanan eksternal dan API eksternal

Kadang keduanya ditulis terpisah: layanan eksternal untuk pihak yang dipanggil, dan API eksternal untuk pintu pemanggilannya.

Yang ditunjuk sama, dan bedanya hanya apakah kamu melihatnya sebagai layanan atau sebagai pintu pemanggilan.

Berhasil atau gagalnya proses ditentukan sendiri-sendiri per komponen

Satu tindakan bisa melintasi beberapa komponen.

Reservasi menjadi pasti lewat penulisan ke database, sedangkan pengiriman email konfirmasi ditentukan lewat permintaan ke layanan eksternal.

Reservasi menjadi pasti tepat saat berhasil ditulis ke database.

Pengiriman email konfirmasi terjadi sesudahnya, sebagai proses terpisah yang diminta ke layanan eksternal.

Meski emailnya tidak sampai, reservasi yang sudah pasti tetap ada.

Pemisahan ini langsung berguna saat kamu menyelidiki masalah.

"Reservasinya tidak ada" dan "email konfirmasi tidak sampai" mengarahkan kamu ke komponen yang berbeda.

Untuk yang pertama kamu memeriksa backend dan database, dan untuk yang kedua kamu memeriksa permintaan ke layanan eksternal.

Meski reservasinya sama, gejalanya mengubah komponen yang kamu periksa
Satu tindakanreservasi"Reservasinyatidak ada""Email konfirmasitidak sampai"Apakah backendmenerimanyaApakah permintaansampai ke layananApakah tertuliske databaseApakah layananberhasil mengirim
Bagian tengah adalah satu tindakan reservasi. Cabang atas dan cabang bawah menentukan berhasil atau gagalnya secara terpisah, jadi gejala yang berbeda mengarahkan kamu ke tempat yang berbeda.

Cabang atas adalah kepastian reservasi dan cabang bawah adalah pemberitahuan, dan kalau salah satu gagal, yang lain tetap apa adanya.

Berhasil atau gagal ditentukan per komponen

Saat satu tindakan melintasi beberapa komponen, berhasil atau gagalnya proses tidak ditentukan sekaligus.

Reservasi menjadi pasti lewat penulisan ke database dan email konfirmasi ditentukan lewat permintaan ke layanan eksternal, jadi saat menerima laporan masalah, pilah lebih dahulu proses yang mana yang gagal.

QUIZ

Cek Pemahaman

Jawab setiap pertanyaan satu per satu.

Soal 1Di antara 4 komponen aplikasi Web, mana yang kamu pakai dan bukan kamu buat sendiri?

Soal 2Apa yang terjadi kalau email konfirmasi tidak sampai setelah reservasi ditulis ke database?

Soal 3Saat pengiriman email konfirmasi diserahkan ke layanan eksternal, apa yang tetap ada di sisi kamu?