Apa Itu Aplikasi Full-Stack? Penjelasan dalam Bahasa Mudah

Aplikasi full-stack ialah aplikasi yang merangkumi setiap lapisan yang diperlukan untuk berfungsi: frontend yang dilihat dan diklik orang, backend yang berjalan di pelayan dan menguatkuasakan peraturan, dan pangkalan data yang mengingati segala-galanya. Senarai tugas yang menyimpan tugas anda, membolehkan anda log masuk dari mana-mana peranti dan tidak menunjukkan senarai anda kepada orang lain ialah full-stack. Satu halaman yang hanya memaparkan waktu buka anda tidak.

"Stack" hanyalah merujuk kepada lapisan teknologi yang disusun bertindih. "Full" bermaksud semuanya ada.

Mengapa ia penting apabila anda membina dengan AI

Apabila anda menerangkan aplikasi kepada pembina AI, perkataan yang anda gunakan menentukan lapisan mana yang dibinanya. "Buat halaman yang menunjukkan menu kami" menghasilkan frontend. "Benarkan pelanggan memesan daripada menu kami dan benarkan dapur melihat pesanan baharu" memerlukan ketiga-tiga lapisan, kerana pesanan mesti disimpan, dikongsi antara dua jenis pengguna dan dirahsiakan.

Mengetahui perbezaannya membantu anda dalam tiga cara:

• Anda meminta perkara yang betul. Jika anda mahu data disimpan, nyatakannya. Pembina yang hanya membuat frontend akan kelihatan siap tetapi melupakan segalanya apabila dimuat semula.
• Anda mengesan kesiapan palsu. Demo dengan data contoh boleh kelihatan sama seperti aplikasi yang berfungsi. Mengetahui lapisan membolehkan anda menyemak bahawa data benar-benar pergi ke suatu tempat.
• Anda memahami kos operasi. Frontend sahaja boleh dihidangkan sebagai fail statik. Backend dan pangkalan data ialah program yang berjalan di pelayan, dan di situlah kebanyakan kos pengehosan datang.

Analogi harian: sebuah restoran

Bayangkan sebuah restoran.

• Ruang makan ialah frontend. Menu, meja dan buku nota pelayan. Ia yang dilihat tetamu, dan ia sepatutnya menyenangkan serta mudah digunakan.
• Dapur ialah backend. Tetamu tidak masuk ke dalamnya. Ia menerima pesanan, menyemak sama ada hidangan ada, memasaknya dan menolak permintaan yang pelik. Peraturan tinggal di sini.
• Stor makanan dan buku pesanan ialah pangkalan data. Ia menyimpan apa yang ada dan apa yang telah dipesan, supaya tiada apa yang terlupa apabila syif bertukar.

Restoran yang hanya ada ruang makan boleh menunjukkan menu yang cantik, tetapi anda tidak akan kenyang. Itulah aplikasi hanya-frontend yang berpura-pura menjadi full-stack.

Tiga lapisan dengan lebih terperinci

Lapisan-lapisan ini berkomunikasi mengikut susunan yang tetap. Frontend meminta sesuatu daripada backend melalui API, iaitu set permintaan yang ditetapkan yang diterima oleh backend. Backend menyemak permintaan, membaca atau menulis ke pangkalan data, dan menghantar jawapan. Frontend tidak sekali-kali bercakap terus dengan pangkalan data.

Susunan itu ialah idea keselamatan yang paling penting dalam keseluruhan tindanan. Apa-apa dalam frontend boleh dibaca dan diubah oleh pelawat, kerana ia berjalan pada peranti mereka. Maka peraturan, seperti "hanya pemilik boleh melihat invois ini" atau "kupon hanya boleh digunakan sekali", mesti dikuatkuasakan di backend. Untuk lebih lanjut tentang pembahagian ini, lihat frontend berbanding backend.

Contoh kerja: aplikasi tempahan kelas

Katakan anda menjalankan studio yoga dan mahu orang menempah kelas secara dalam talian.

Apa yang pelawat lakukan: membuka laman, melihat kelas minggu ini, mengetik satu, log masuk dan menempah tempat.

Apa yang berlaku di bawahnya:

1. Frontend memaparkan jadual waktu. Untuk mengisinya, ia meminta backend, "Apakah kelas minggu ini, dan berapa banyak tempat yang tinggal?"
2. Backend meminta pangkalan data untuk kelas dan mengira tempahan bagi setiap kelas, kemudian membalas.
3. Pelawat mengetik Tempah. Frontend menghantar "tempah kelas 42 untuk orang yang log masuk ini".
4. Backend menyemak: adakah orang ini benar-benar log masuk? Adakah kelas itu penuh? Adakah mereka sudah menempahnya? Hanya jika semuanya baik, ia menulis baris tempahan baharu ke pangkalan data.
5. Backend membalas "ditempah", dan frontend memaparkan pengesahan.
6. Kemudian, pemilik studio log masuk dan melihat senarai kelas. Backend menyemak bahawa dia seorang pentadbir sebelum memaparkan nama semua orang.

Sekarang bayangkan ini dibina sebagai hanya frontend. Jadual waktu mungkin dipaparkan, dan butang Tempah mungkin menunjukkan tanda betul yang cantik, tetapi tempahan itu akan hilang selepas muat semula, kiraan "tempat yang tinggal" akan salah bagi orang lain, dan pemilik tidak akan pernah melihatnya. Langkah 4, iaitu semakan itu, akan hilang sepenuhnya. Itulah perbezaan praktikalnya.

Istilah utama

• Frontend (bahagian pelanggan): bahagian yang berjalan dalam pelayar.
• Backend (bahagian pelayan): bahagian yang berjalan di pelayan. Juga dipanggil pelayan API.
• Pangkalan data: tempat data disimpan dengan cara yang tersusun. Lihat apa itu pangkalan data.
• API: senarai permintaan yang diterima backend daripada frontend atau program lain.
• Pengesahan (authentication): menyemak siapa seseorang (log masuk). Kebenaran (authorisation): menyemak apa yang boleh mereka lakukan.
• Penerbitan (deployment): meletakkan semua lapisan di pelayan supaya orang ramai boleh menggunakannya.
• Monolit berbanding perkhidmatan: satu program yang melakukan segalanya, berbanding beberapa program yang lebih kecil (contohnya laman web dan API berasingan). Kedua-duanya ialah full-stack.

Kesilapan dan salah faham yang biasa

• "Ia kelihatan siap, jadi ia memang siap." Data contoh dan butang yang kelihatan berfungsi tidak sama dengan data yang disimpan. Muat semula halaman, buka dalam tetingkap persendirian, dan pastikan data masih ada.
• Meletakkan peraturan dalam frontend. Menyembunyikan butang bukanlah keselamatan. Jika backend tidak menyemak, sesiapa yang tahu permintaan itu boleh membuatnya.
• Meletakkan kunci rahsia dalam frontend. Kunci pembayaran atau pembekal AI dalam kod pelayar boleh dibaca oleh setiap pelawat. Kunci tergolong di backend, dalam pembolehubah persekitaran. Lihat pembolehubah persekitaran dan rahsia.
• Menganggap full-stack bermakna rumit. Aplikasi full-stack kecil boleh terdiri daripada beberapa skrin, beberapa laluan backend dan tiga jadual pangkalan data. Ia ialah penerangan tentang lapisan, bukan saiz.
• Menganggap anda mesti memilih setiap teknologi sendiri. Mana-mana tindanan yang bijak dan meluas digunakan akan memadai untuk versi pertama. Yang lebih penting ialah penerangan yang jelas tentang data dan peraturan.

Apa yang perlu diminta daripada pembina AI anda

Terangkan aplikasi dari segi tiga lapisan, walaupun anda tidak menamakannya:

• Data: "Simpan kelas (nama, masa, kapasiti) dan tempahan (kelas, orang, masa ditempah) dalam pangkalan data."
• Peraturan: "Kelas tidak boleh ditempah melebihi kapasiti. Seseorang hanya boleh menempah sesuatu kelas sekali. Hanya pentadbir boleh melihat siapa yang menempah."
• Skrin: "Jadual waktu mingguan, pengesahan tempahan, halaman pentadbir yang menyenaraikan tempahan bagi setiap kelas."
• Semakan: "Kuatkuasakan peraturan ini di pelayan, bukan hanya dalam halaman. Simpan sebarang kunci API di pelayan."

Kemudian uji dengan skeptikal: muat semula, log masuk sebagai dua orang yang berbeza, dan cuba lihat data yang sepatutnya tidak anda lihat. Panduan membina aplikasi dengan AI menerangkan gelung itu dari awal hingga akhir.

Aplikasi full-stack dalam Mythex

Mythex membina aplikasi web full-stack daripada penerangan dalam sembang. Secara lalai, aplikasi baharu mendapat frontend React dan TypeScript; apabila aplikasi perlu menyimpan data, Mythex menambah pangkalan data Postgres khusus kepada projek, dan anda boleh meminta pelayan API berasingan (contohnya Python, Node, C# atau Java) di samping laman web. Semuanya berjalan bersama dalam pratonton langsung dan diterbitkan ke URL awam. Halaman dokumentasi tentang aplikasi berbilang perkhidmatan menunjukkan cara laman web dan API dipratonton dan diterbitkan bersama, dan halaman pembina aplikasi full-stack mempunyai titik permulaan.

Soalan lazim