Bài 2: Vibe Coding – Tổng quan cấu trúc của một website

Khi bắt đầu làm website bằng Vibe Coding, nhiều người thường chỉ tập trung vào phần giao diện bên ngoài. Tuy nhiên, một website hoàn chỉnh không chỉ có phần nhìn thấy trên màn hình, mà còn có nhiều thành phần phía sau cùng phối hợp với nhau.

Một website thông thường sẽ gồm các phần chính như: Frontend, Backend, Database, API, Hosting/Server, Domain, Subdomain và Custom Domain.

Việc hiểu tổng quan cấu trúc website sẽ giúp bạn mô tả yêu cầu chính xác hơn khi làm việc với AI như Claude Code, Codex, Cursor, Copilot, Antigravity hoặc các công cụ Vibe Coding khác.

1. Frontend là gì?

Frontend là phần giao diện mà người dùng nhìn thấy và thao tác trực tiếp trên website.

Ví dụ:

• Trang chủ
• Menu
• Nút bấm
• Hình ảnh
• Form đăng ký
• Bảng giá
• Trang sản phẩm
• Trang liên hệ
• Giao diện đăng nhập

Các công nghệ thường dùng cho Frontend gồm:

• HTML
• CSS
• JavaScript
• React
• Next.js
• Vue
• Tailwind CSS

Hiểu đơn giản:
Frontend là phần bên ngoài của website, nơi người dùng nhìn thấy và tương tác.

Ví dụ khi bạn vào một website bán hàng, phần danh sách sản phẩm, nút mua hàng, hình ảnh sản phẩm, banner khuyến mãi chính là Frontend.

2. Backend là gì?

Backend là phần xử lý logic phía sau website. Người dùng thường không nhìn thấy phần này.

Backend có nhiệm vụ xử lý các nghiệp vụ như:

• Đăng nhập, đăng ký tài khoản
• Kiểm tra thông tin người dùng nhập
• Xử lý đơn hàng
• Gửi email
• Phân quyền tài khoản
• Kết nối với database
• Xử lý thanh toán
• Quản lý dữ liệu khách hàng
• Trả dữ liệu cho frontend hiển thị

Các công nghệ thường dùng cho Backend gồm:

• Node.js
• Python
• PHP
• Laravel
• FastAPI
• Express.js
• NestJS

Hiểu đơn giản:
Backend là bộ não xử lý phía sau website.

Ví dụ khi khách hàng bấm nút “Đăng ký tư vấn”, Backend sẽ nhận thông tin, kiểm tra dữ liệu, lưu vào database và có thể gửi thông báo cho admin.

3. Database là gì?

Database là nơi lưu trữ dữ liệu của website.

Ví dụ database có thể lưu:

• Tài khoản người dùng
• Thông tin khách hàng
• Sản phẩm
• Đơn hàng
• Bài viết
• Bình luận
• Lịch sử thanh toán
• Dữ liệu form liên hệ

Một số database phổ biến:

• MySQL
• PostgreSQL
• MongoDB
• Firebase
• Supabase

Hiểu đơn giản:
Database giống như kho lưu trữ dữ liệu của website.

Ví dụ website của bạn có form để khách hàng để lại họ tên, số điện thoại và nhu cầu tư vấn. Khi khách gửi form, thông tin đó sẽ được lưu vào database để bạn xem lại và chăm sóc khách hàng.

4. API là gì?

API là cầu nối giúp Frontend, Backend và các hệ thống khác giao tiếp với nhau.

Ví dụ quy trình đăng nhập website:

1. Người dùng nhập email và mật khẩu trên giao diện.
2. Frontend gửi thông tin đó đến API.
3. Backend nhận dữ liệu từ API và xử lý.
4. Backend kiểm tra thông tin trong Database.
5. Nếu đúng, hệ thống cho người dùng đăng nhập thành công.
6. Frontend hiển thị kết quả cho người dùng.

Hiểu đơn giản:
API là cổng giao tiếp để các phần của hệ thống trao đổi dữ liệu với nhau.

Lưu ý:
API thường nằm trong Backend, nhưng Backend không chỉ có API. Backend còn có nhiều phần khác như xử lý logic, bảo mật, phân quyền, gửi email, xử lý file, kết nối thanh toán và nhiều nghiệp vụ khác.

Ví dụ trong một website có AI Chatbot, khi người dùng gửi tin nhắn, website có thể gọi API đến Backend, sau đó Backend gửi dữ liệu sang n8n hoặc AI Agent để xử lý và trả kết quả về cho người dùng.

5. Hosting, Server và VPS là gì?

Sau khi làm xong website, bạn cần đưa website lên online để người khác có thể truy cập được. Nơi đặt website để chạy online được gọi là Hosting hoặc Server.

Một số hình thức triển khai phổ biến:

• Hosting: thường dùng cho WordPress hoặc website đơn giản.
• VPS: máy chủ riêng, phù hợp để chạy Backend, Database, API, n8n, Supabase self-host hoặc website riêng.
• Vercel/Netlify: phù hợp để deploy Frontend, Landing Page, React, Next.js.
• Cloud Server: dùng cho các hệ thống lớn, cần khả năng mở rộng cao hơn.

Hiểu đơn giản:
Hosting hoặc Server là nơi website được đặt để hoạt động trên Internet.

Ví dụ bạn làm một website bằng WordPress, bạn có thể mua hosting để cài WordPress. Nếu bạn làm hệ thống có Backend, Database, API, n8n thì VPS sẽ linh hoạt hơn.

6. Domain, Subdomain và Custom Domain là gì?

Domain là tên miền chính của website. Đây là địa chỉ để người dùng truy cập vào website của bạn.

Ví dụ:

• google.com
• facebook.com
• leminhthang.com

Hiểu đơn giản:
Domain là địa chỉ chính của website trên Internet.

Thay vì người dùng phải nhớ địa chỉ IP phức tạp của server, họ chỉ cần nhập tên miền là có thể truy cập website.

---

Subdomain là tên miền phụ được tạo từ domain chính.

Ví dụ nếu domain chính là:

leminhthang.com

Thì subdomain có thể là:

• blog.leminhthang.com
• shop.leminhthang.com
• app.leminhthang.com
• api.leminhthang.com
• admin.leminhthang.com

Subdomain thường dùng để tách các phần khác nhau của hệ thống.

Ví dụ:

• www.leminhthang.com: website chính
• blog.leminhthang.com: trang blog
• app.leminhthang.com: trang ứng dụng
• api.leminhthang.com: backend API
• admin.leminhthang.com: trang quản trị

Hiểu đơn giản:
Subdomain là nhánh nhỏ được tạo ra từ domain chính.

---

Custom Domain là tên miền riêng được gắn vào một nền tảng hoặc hệ thống nào đó.

Ví dụ bạn deploy website lên Vercel, ban đầu Vercel có thể cho bạn một đường dẫn mặc định như:

my-website.vercel.app

Nhưng nếu bạn muốn dùng tên miền riêng như:

leminhthang.com

hoặc:

tool.leminhthang.com

thì việc gắn tên miền riêng đó vào Vercel được gọi là Custom Domain.

Custom Domain thường dùng khi bạn muốn website nhìn chuyên nghiệp hơn, dễ nhớ hơn và đúng thương hiệu của mình hơn.

Hiểu đơn giản:
Custom Domain là việc dùng tên miền riêng của bạn thay cho đường dẫn mặc định của nền tảng.

Tóm lại:

• Domain: tên miền chính, ví dụ leminhthang.com
• Subdomain: tên miền phụ, ví dụ blog.leminhthang.com
• Custom Domain: tên miền riêng được gắn vào nền tảng như Vercel, Netlify, WordPress, Shopify…

7. Một website hoàn chỉnh thường hoạt động như thế nào?

Ví dụ một website bán khóa học online:

1. Người dùng truy cập website bằng domain.
2. Frontend hiển thị giao diện khóa học.
3. Người dùng bấm đăng ký tư vấn.
4. Frontend gửi thông tin qua API.
5. Backend nhận dữ liệu và xử lý.
6. Backend lưu thông tin khách hàng vào Database.
7. Website hiển thị thông báo đăng ký thành công.
8. Hệ thống có thể gửi email hoặc thông báo cho admin.
9. Admin vào trang quản trị để xem danh sách khách hàng.

Đây là cách các thành phần trong website phối hợp với nhau.

Một website nhìn bên ngoài có thể rất đơn giản, nhưng phía sau thường có nhiều phần xử lý để hệ thống hoạt động ổn định.

8. Vì sao cần hiểu cấu trúc website khi làm Vibe Coding?

Khi làm việc với AI, nếu bạn chỉ nói:

“Tạo cho tôi một website bán hàng”

AI có thể tạo ra kết quả rất chung chung.

Nhưng nếu bạn mô tả rõ hơn:

“Tạo cho tôi một website bán khóa học gồm Frontend bằng Next.js, Backend có API xử lý đăng ký học viên, Database lưu thông tin khách hàng, có trang Admin để quản lý danh sách đăng ký và deploy lên Vercel bằng Custom Domain riêng”

Thì AI sẽ hiểu rõ hơn và tạo ra sản phẩm sát nhu cầu hơn.

Trong Vibe Coding, việc quan trọng không chỉ là biết dùng công cụ AI, mà còn phải biết cách mô tả đúng cấu trúc sản phẩm.

9. Cách mô tả yêu cầu tốt hơn khi dùng Vibe Coding

Khi yêu cầu AI tạo website, bạn nên mô tả rõ các phần sau:

• Website dùng để làm gì?
• Ai là người sử dụng?
• Website cần những trang nào?
• Frontend cần hiển thị nội dung gì?
• Backend cần xử lý những chức năng gì?
• Database cần lưu những dữ liệu gì?
• Có cần đăng nhập không?
• Có cần trang Admin không?
• Có cần kết nối API bên ngoài không?
• Website sẽ deploy lên đâu?
• Có dùng domain hoặc custom domain riêng không?

Ví dụ prompt tốt hơn:

“Tôi muốn tạo một website giới thiệu dịch vụ AI Automation. Website gồm trang chủ, trang dịch vụ, trang bài viết và trang liên hệ. Frontend dùng Next.js và Tailwind CSS. Backend có API nhận form liên hệ. Database lưu thông tin khách hàng gồm họ tên, email, số điện thoại và nhu cầu tư vấn. Website cần responsive trên desktop, tablet và mobile. Sau khi hoàn thành sẽ deploy lên Vercel và gắn custom domain riêng.”

Prompt càng rõ, AI càng dễ tạo đúng sản phẩm bạn cần.

10. Kết luận

Một website hoàn chỉnh thường không chỉ có giao diện. Nó thường bao gồm nhiều thành phần kết hợp với nhau:

Frontend + Backend + Database + API + Hosting/Server + Domain/Subdomain/Custom Domain

Trong đó:

• Frontend là phần người dùng nhìn thấy.
• Backend là phần xử lý logic phía sau.
• Database là nơi lưu trữ dữ liệu.
• API là cầu nối trao đổi dữ liệu.
• Hosting/Server/VPS là nơi website chạy online.
• Domain là địa chỉ chính của website.
• Subdomain là nhánh phụ của tên miền chính.
• Custom Domain là tên miền riêng gắn vào nền tảng triển khai.

Khi hiểu được cấu trúc này, bạn sẽ làm việc với AI hiệu quả hơn, viết yêu cầu chính xác hơn và dễ triển khai sản phẩm thực tế hơn.

Trong Vibe Coding, bạn không nhất thiết phải giỏi code ngay từ đầu. Nhưng bạn cần hiểu sản phẩm gồm những phần nào, mỗi phần có nhiệm vụ gì và cách mô tả yêu cầu rõ ràng để AI hỗ trợ đúng hướng.