Ứng Dụng Full-Stack Là Gì? Giải Thích Bằng Ngôn Ngữ Đời Thường

Ứng dụng full-stack là ứng dụng bao gồm mọi tầng cần thiết để hoạt động: frontend mà người dùng thấy và bấm, backend chạy trên máy chủ và thực thi các quy tắc, và cơ sở dữ liệu ghi nhớ mọi thứ. Một danh sách việc cần làm lưu công việc của bạn, cho phép bạn đăng nhập từ bất kỳ thiết bị nào và không cho ai khác xem danh sách của bạn, chính là full-stack. Một trang duy nhất chỉ hiển thị giờ mở cửa thì không phải.

"Stack" nghĩa là các tầng công nghệ xếp chồng lên nhau. "Full" nghĩa là tất cả các tầng đều có mặt.

Vì sao điều này quan trọng khi bạn xây dựng bằng AI

Khi bạn mô tả một ứng dụng cho AI builder, những từ bạn dùng quyết định tầng nào sẽ được xây dựng. "Làm một trang hiển thị thực đơn của chúng tôi" sẽ tạo ra frontend. "Cho khách hàng đặt món từ thực đơn và cho bếp xem đơn mới" cần cả ba tầng, vì đơn hàng phải được lưu, chia sẻ giữa hai loại người dùng và giữ riêng tư.

Hiểu sự khác biệt này giúp bạn theo ba cách:

• Bạn yêu cầu đúng thứ cần thiết. Nếu bạn muốn dữ liệu được lưu, hãy nói rõ. Một builder chỉ tạo frontend sẽ trông hoàn thiện nhưng quên mọi thứ khi tải lại trang.
• Bạn nhận ra sự hoàn thiện giả tạo. Một bản demo với dữ liệu mẫu có thể trông giống hệt một ứng dụng đang chạy. Hiểu các tầng giúp bạn kiểm tra xem dữ liệu có thật sự được lưu ở đâu không.
• Bạn hiểu chi phí vận hành. Một frontend riêng lẻ có thể được phục vụ dưới dạng tệp tĩnh. Backend và cơ sở dữ liệu là các chương trình chạy trên máy chủ, và đó là nơi phần lớn chi phí hosting phát sinh.

Ví dụ đời thường: một nhà hàng

Hãy nghĩ về một nhà hàng.

• Phòng ăn là frontend. Thực đơn, bàn ghế và sổ ghi của người phục vụ. Đó là thứ khách nhìn thấy, và nó nên dễ chịu và dễ sử dụng.
• Nhà bếp là backend. Khách không bao giờ vào trong. Nhà bếp nhận đơn, kiểm tra món còn không, nấu và từ chối những yêu cầu bất thường. Các quy tắc nằm ở đây.
• Kho và sổ đặt món là cơ sở dữ liệu. Chúng lưu những gì có sẵn và những gì đã được đặt, nên không có gì bị quên khi ca làm việc thay đổi.

Một nhà hàng chỉ có phòng ăn có thể cho bạn xem một thực đơn đẹp, nhưng bạn không thể được phục vụ. Đó là một ứng dụng chỉ có frontend đang giả vờ là full-stack.

Ba tầng chi tiết hơn

Các tầng giao tiếp với nhau theo một thứ tự cố định. Frontend yêu cầu backend điều gì đó qua một API — một tập hợp yêu cầu đã định nghĩa mà backend chấp nhận. Backend kiểm tra yêu cầu, đọc hoặc ghi cơ sở dữ liệu, rồi gửi lại câu trả lời. Frontend không bao giờ nói chuyện trực tiếp với cơ sở dữ liệu.

Thứ tự đó là ý tưởng bảo mật quan trọng nhất trong toàn bộ stack. Bất cứ thứ gì trong frontend đều có thể bị người truy cập đọc và thay đổi, vì nó chạy trên thiết bị của họ. Vì vậy các quy tắc — "chỉ chủ sở hữu được xem hóa đơn này", "mã giảm giá chỉ dùng được một lần" — phải được thực thi ở backend. Để hiểu thêm về sự phân chia này, xem frontend và backend.

Ví dụ thực tế: ứng dụng đặt lớp học

Giả sử bạn điều hành một phòng tập yoga và muốn mọi người đặt lớp học trực tuyến.

Người truy cập làm gì: mở website, xem các lớp trong tuần này, chạm vào một lớp, đăng nhập và đặt chỗ.

Điều gì xảy ra bên dưới:

1. Frontend hiển thị lịch học. Để điền vào lịch, nó hỏi backend: "Tuần này có những lớp nào, và còn bao nhiêu chỗ?"
2. Backend hỏi cơ sở dữ liệu về các lớp và đếm số lượt đặt cho từng lớp, rồi trả lời.
3. Người truy cập chạm Đặt chỗ. Frontend gửi "đặt lớp 42 cho người đã đăng nhập này".
4. Backend kiểm tra: người này có thật sự đã đăng nhập không? Lớp đã đầy chưa? Họ đã đặt lớp này chưa? Chỉ khi mọi thứ đều ổn, nó mới ghi một hàng đặt chỗ mới vào cơ sở dữ liệu.
5. Backend trả lời "đã đặt", và frontend hiển thị xác nhận.
6. Sau đó, chủ phòng tập đăng nhập và xem danh sách lớp. Backend kiểm tra cô ấy là quản trị viên trước khi hiển thị tên của mọi người.

Bây giờ hãy tưởng tượng điều này được xây dựng chỉ có frontend. Lịch học có thể hiển thị, và nút Đặt chỗ có thể hiện một dấu tích đẹp, nhưng đặt chỗ sẽ biến mất khi tải lại trang, con số "còn bao nhiêu chỗ" sẽ sai với mọi người khác, và chủ phòng tập sẽ không bao giờ thấy nó. Bước 4 — các kiểm tra — sẽ hoàn toàn thiếu. Đó là sự khác biệt thực tế.

Thuật ngữ chính

• Frontend (phía client): phần chạy trong trình duyệt.
• Backend (phía server): phần chạy trên máy chủ. Còn gọi là máy chủ API.
• Database (cơ sở dữ liệu): nơi dữ liệu được lưu theo cách có tổ chức. Xem cơ sở dữ liệu là gì.
• API: danh sách các yêu cầu mà backend chấp nhận từ frontend hoặc các chương trình khác.
• Authentication (xác thực): kiểm tra ai đang truy cập (đăng nhập). Authorisation (phân quyền): kiểm tra họ được phép làm gì.
• Deployment (triển khai): đưa mọi tầng lên máy chủ để công chúng có thể sử dụng.
• Monolith và dịch vụ: một chương trình làm mọi việc, so với nhiều chương trình nhỏ hơn (ví dụ một website và một API riêng). Cả hai đều là full-stack.

Những lỗi và hiểu lầm thường gặp

• "Trông có vẻ xong rồi, nên là xong rồi." Dữ liệu mẫu và một nút trông có vẻ hoạt động không giống với dữ liệu đã được lưu. Hãy tải lại trang, mở trong cửa sổ riêng tư và kiểm tra dữ liệu vẫn còn đó.
• Đặt quy tắc ở frontend. Ẩn một nút không phải là bảo mật. Nếu backend không kiểm tra, bất kỳ ai biết yêu cầu đều có thể gửi nó.
• Đặt khóa bí mật ở frontend. Khóa của nhà cung cấp thanh toán hay AI trong mã trình duyệt có thể đọc được bởi mọi người truy cập. Khóa thuộc về backend, trong biến môi trường — xem biến môi trường và bí mật.
• Nghĩ rằng full-stack nghĩa là phức tạp. Một ứng dụng full-stack nhỏ có thể chỉ gồm vài màn hình, một số route backend và ba bảng cơ sở dữ liệu. Đó là mô tả các tầng, không phải quy mô.
• Nghĩ rằng bạn phải tự chọn mọi công nghệ. Bất kỳ stack hợp lý và được dùng rộng rãi nào cũng phù hợp cho phiên bản đầu tiên. Điều quan trọng hơn là một mô tả rõ ràng về dữ liệu và các quy tắc.

Điều nên yêu cầu AI builder của bạn

Hãy mô tả ứng dụng theo ba tầng, ngay cả khi bạn không gọi tên chúng:

• Dữ liệu: "Lưu các lớp học (tên, thời gian, sức chứa) và các lượt đặt (lớp, người, thời gian đặt) trong cơ sở dữ liệu."
• Quy tắc: "Không thể đặt lớp khi đã đủ sức chứa. Mỗi người chỉ được đặt một lớp một lần. Chỉ quản trị viên mới thấy ai đã đặt."
• Màn hình: "Lịch học theo tuần, xác nhận đặt chỗ, và trang quản trị liệt kê các lượt đặt theo từng lớp."
• Kiểm tra: "Thực thi các quy tắc này trên máy chủ, không chỉ trong trang. Giữ mọi API key trên máy chủ."

Sau đó hãy kiểm tra như một người hoài nghi: tải lại, đăng nhập bằng hai người khác nhau, và thử xem dữ liệu mà bạn không nên thấy. Hướng dẫn xây dựng ứng dụng bằng AI trình bày toàn bộ vòng lặp này.

Ứng dụng full-stack trên Mythex

Mythex xây dựng ứng dụng web full-stack từ mô tả trong chat. Mặc định, ứng dụng mới có frontend React và TypeScript; khi ứng dụng cần lưu dữ liệu, Mythex thêm một cơ sở dữ liệu Postgres riêng vào dự án, và bạn có thể yêu cầu một máy chủ API riêng (ví dụ Python, Node, C# hoặc Java) bên cạnh website. Mọi thứ chạy cùng nhau trong bản xem trước trực tiếp và được xuất bản lên một URL công khai. Trang tài liệu về ứng dụng nhiều dịch vụ cho thấy cách một website và một API được xem trước và xuất bản cùng nhau, và trang công cụ xây dựng ứng dụng full-stack có các điểm khởi đầu.

Câu hỏi thường gặp