Apa Itu Aplikasi Full-Stack? Penjelasan dengan Bahasa Sederhana

Aplikasi full-stack adalah aplikasi yang mencakup setiap lapisan yang dibutuhkannya untuk bekerja: frontend yang dilihat dan diklik orang, backend yang berjalan di server dan menegakkan aturan, serta database yang mengingat semuanya. Daftar tugas yang menyimpan tugas Anda, memungkinkan Anda login dari perangkat mana pun, dan tidak menampilkan daftar Anda kepada orang lain adalah aplikasi full-stack. Satu halaman yang hanya menampilkan jam buka bukanlah aplikasi full-stack.

"Stack" hanya berarti lapisan teknologi yang ditumpuk satu di atas yang lain. "Full" berarti semuanya ada.

Mengapa ini penting saat membangun dengan AI

Ketika Anda mendeskripsikan aplikasi ke pembuat aplikasi AI, kata-kata yang Anda pilih menentukan lapisan mana yang akan dibangun. "Buat halaman yang menampilkan menu kami" menghasilkan frontend. "Biarkan pelanggan memesan dari menu kami dan biarkan dapur melihat pesanan baru" membutuhkan ketiga lapisan, karena pesanan harus disimpan, dibagikan antara dua jenis pengguna, dan dijaga tetap privat.

Memahami perbedaannya membantu Anda dalam tiga hal:

• Anda meminta hal yang tepat. Jika Anda ingin data disimpan, katakan itu. Pembuat yang hanya membuat frontend akan terlihat selesai, tetapi melupakan semuanya saat halaman dimuat ulang.
• Anda bisa mengenali kelengkapan palsu. Demo dengan data contoh bisa terlihat sama persis dengan aplikasi yang berfungsi. Mengetahui lapisan-lapisannya membuat Anda bisa memeriksa bahwa data benar-benar tersimpan.
• Anda memahami biaya operasional. Frontend saja bisa disajikan sebagai berkas statis. Backend dan database adalah program yang berjalan di server, dan di situlah sebagian besar biaya hosting berasal.

Analogi sehari-hari: sebuah restoran

Bayangkan sebuah restoran.

• Ruang makan adalah frontend. Menu, meja, dan catatan pelayan. Inilah yang dilihat tamu, dan sebaiknya menyenangkan serta mudah dipakai.
• Dapur adalah backend. Tamu tidak pernah masuk ke sana. Dapur menerima pesanan, memeriksa apakah hidangan tersedia, memasaknya, dan menolak permintaan yang tidak wajar. Aturan ada di sini.
• Gudang dan buku pesanan adalah database. Keduanya menyimpan apa yang ada dan apa yang sudah dipesan, sehingga tidak ada yang terlupakan saat pergantian shift.

Restoran yang hanya punya ruang makan bisa menunjukkan menu yang bagus, tetapi Anda tidak bisa makan. Itulah aplikasi yang hanya frontend tetapi berpura-pura full-stack.

Tiga lapisan secara lebih rinci

Lapisan-lapisan ini saling berbicara dalam urutan yang tetap. Frontend meminta sesuatu dari backend melalui API — kumpulan permintaan yang diterima backend. Backend memeriksa permintaan, membaca atau menulis database, dan mengirim jawaban. Frontend tidak pernah berbicara langsung dengan database.

Urutan itu adalah gagasan keamanan paling penting di seluruh stack. Apa pun di frontend bisa dibaca dan diubah oleh pengunjung, karena berjalan di perangkat mereka. Maka aturan — "hanya pemilik yang bisa melihat faktur ini", "kupon hanya bisa dipakai sekali" — harus diterapkan di backend. Untuk penjelasan lebih lanjut tentang pembagian ini, lihat frontend vs backend.

Contoh nyata: aplikasi pemesanan kelas

Anggap Anda menjalankan studio yoga dan ingin orang memesan kelas secara online.

Yang dilakukan pengunjung: membuka situs, melihat kelas minggu ini, mengetuk salah satu, login, dan memesan tempat.

Yang terjadi di baliknya:

1. Frontend menampilkan jadwal. Untuk mengisinya, ia meminta backend, "Kelas apa saja minggu ini, dan berapa tempat yang tersisa?"
2. Backend meminta database untuk data kelas dan menghitung booking untuk setiap kelas, lalu membalas.
3. Pengunjung mengetuk Pesan. Frontend mengirim "pesan kelas 42 untuk orang yang sudah login ini".
4. Backend memeriksa: apakah orang ini benar-benar sudah login? Apakah kelasnya penuh? Apakah mereka sudah memesannya? Hanya jika semuanya baik, ia menulis baris booking baru ke database.
5. Backend membalas "berhasil dipesan", dan frontend menampilkan konfirmasi.
6. Nanti, pemilik studio login dan melihat daftar kelas. Backend memeriksa bahwa ia adalah admin sebelum menampilkan nama semua orang.

Bayangkan jika ini dibangun hanya dengan frontend. Jadwalnya mungkin tampil, dan tombol Pesan mungkin menampilkan centang yang bagus, tetapi booking-nya akan hilang saat halaman dimuat ulang, hitungan "tempat tersisa" akan salah bagi orang lain, dan pemilik tidak akan pernah melihatnya. Langkah 4 — pemeriksaan — akan sepenuhnya hilang. Di situlah perbedaan praktisnya.

Istilah penting

• Frontend (sisi klien): bagian yang berjalan di browser.
• Backend (sisi server): bagian yang berjalan di server. Juga disebut server API.
• Database: tempat data disimpan dengan cara yang tertata. Lihat apa itu database.
• API: daftar permintaan yang diterima backend dari frontend atau program lain.
• Authentication: memeriksa siapa seseorang (login). Authorisation: memeriksa apa yang boleh mereka lakukan.
• Deployment: menempatkan semua lapisan di server agar bisa dipakai publik.
• Monolith vs services: satu program yang melakukan segalanya, dibandingkan dengan beberapa program yang lebih kecil (misalnya situs web dan API terpisah). Keduanya adalah full-stack.

Kesalahan dan kesalahpahaman yang umum

• "Terlihat sudah selesai, berarti sudah selesai." Data contoh dan tombol yang terlihat berfungsi tidak sama dengan data yang tersimpan. Muat ulang halaman, buka di jendela privat, dan periksa apakah datanya masih ada.
• Menaruh aturan di frontend. Menyembunyikan tombol bukanlah keamanan. Jika backend tidak memeriksa, siapa pun yang tahu permintaannya bisa mengirimnya.
• Menaruh secret key di frontend. Key penyedia pembayaran atau AI di kode browser bisa dibaca oleh setiap pengunjung. Key harus berada di backend, dalam environment variables — lihat environment variables dan secrets.
• Menganggap full-stack berarti rumit. Aplikasi full-stack kecil bisa berupa beberapa layar, beberapa route backend, dan tiga tabel database. Itu adalah deskripsi lapisannya, bukan ukurannya.
• Menganggap Anda harus memilih sendiri setiap teknologi. Stack yang masuk akal dan banyak dipakai akan cukup untuk versi pertama. Yang lebih penting adalah deskripsi data dan aturan yang jelas.

Yang sebaiknya diminta ke pembuat aplikasi AI Anda

Deskripsikan aplikasi dalam istilah tiga lapisan, meskipun Anda tidak menyebutkan namanya:

• Datanya: "Simpan kelas (nama, waktu, kapasitas) dan booking (kelas, orang, waktu pemesanan) di database."
• Aturannya: "Kelas tidak bisa dipesan melebihi kapasitas. Satu orang hanya bisa memesan satu kelas sekali. Hanya admin yang bisa melihat siapa yang memesan."
• Layarnya: "Jadwal mingguan, konfirmasi pemesanan, halaman admin yang menampilkan booking per kelas."
• Pemeriksaannya: "Terapkan aturan ini di server, bukan hanya di halaman. Simpan semua API key di server."

Lalu uji dengan skeptis: muat ulang, login sebagai dua orang berbeda, dan coba lihat data yang seharusnya tidak bisa Anda lihat. Panduan membangun aplikasi dengan AI menjelaskan siklus ini dari awal sampai akhir.

Aplikasi full-stack di Mythex

Mythex membangun aplikasi web full-stack dari deskripsi di chat. Secara default, aplikasi baru mendapatkan frontend React dan TypeScript; saat aplikasi perlu menyimpan data, Mythex menambahkan database Postgres khusus ke proyek, dan Anda bisa meminta server API terpisah (misalnya Python, Node, C#, atau Java) bersama situs web. Semuanya berjalan bersama di preview langsung dan dipublikasikan ke URL publik. Halaman dokumentasi tentang aplikasi multi-layanan menunjukkan bagaimana situs web dan API di-preview serta dipublikasikan bersama, dan halaman pembuat aplikasi full-stack berisi titik awal.

Pertanyaan