Sản phẩm số chạy thế nào

Ở bài Nghĩ như người làm sản phẩm, mèo con học cách mô tả cho AI. Để mô tả cho chuẩn, có một thứ giúp ích nhiều: hình dung sơ sản phẩm chạy ra sao phía sau. Khách chỉ bấm một nút, nhưng đằng sau là cả một dây chuyền - và bạn không cần gõ được nó, chỉ cần một bản đồ trong đầu.

Bài này vẽ bản đồ đó bằng lời thường, lấy ví dụ xuyên suốt khoá: một web bán hàng có ví (khách nạp tiền, mua hàng, bị trừ số dư). Không có dòng code nào ở đây - chỉ là cách các mảnh ghép với nhau.

Một sản phẩm web có hai nửa. Frontend là phần khách nhìn thấy và bấm: trang hàng, nút "Mua", ô nhập, màu sắc - chạy ngay trong trình duyệt. Backend là phần xử lý ẩn chạy trên máy chủ: kiểm mật khẩu đúng không, trừ số dư bao nhiêu, lưu đơn vào đâu - khách không thấy.

• ▸Frontend = giao diện khách thấy & bấm, chạy trong trình duyệt.
• ▸Backend = phần xử lý ẩn (đăng nhập, trừ tiền, lưu đơn), chạy trên máy chủ.
• ▸Web bán hàng: danh sách hàng + nút Mua = frontend; trừ số dư + lưu đơn = backend.
• ▸Next.js gom được cả hai nửa trong một dự án (full-stack).

Tắt máy chủ rồi mở lại, số dư của khách vẫn còn - nhờ database (cơ sở dữ liệu). Đây là nơi giữ dữ liệu lâu dài và có tổ chức: tài khoản, số dư, sản phẩm, đơn hàng. Khoá này dùng PostgreSQL, một database phổ biến và vững.

Phân biệt nhanh: frontend lo hiển thị, backend lo xử lý, còn database lo ghi nhớ. Ba vai khác nhau, phối hợp với nhau trong mỗi lần khách bấm.

Để người khác vào được, sản phẩm phải chạy trên một máy luôn bật và có một địa chỉ ai cũng gõ tới được. Máy đó là VPS (máy chủ ảo thuê theo tháng); địa chỉ đó là tên miền (vd shopcuatoi.vn). Tên miền trỏ tới VPS, và đây là toàn cảnh khi khách truy cập:

Nginx là người nhận khách ngoài cửa rồi chuyển request vào trong; Next.js xử lý; PostgreSQL giữ dữ liệu. Cụm này được dựng sẵn bằng một lệnh ở bài deploy cuối khoá - giờ chỉ cần nhớ mặt từng mảnh.

Tất cả những thứ trên, dưới dạng chữ, là mã nguồn - các file nằm trong thư mục, gom lại thành một repo (kho chứa toàn bộ dự án). Nhìn lướt một dự án Next.js cũng không đáng sợ:

shop-cua-toi/
├── app/            # các trang & giao diện (frontend)
│   ├── page.tsx        # trang chủ
│   └── api/            # phần xử lý ẩn (backend)
├── public/         # ảnh, file tĩnh
├── package.json    # khai báo dự án & thư viện
└── next.config.js  # cấu hình Next.js

Khi làm việc, mèo con sẽ nghe ba từ: commit (một lần lưu mốc thay đổi), branch (nhánh để làm thử mà không đụng bản chính), và PR (pull request - lời đề nghị gộp thay đổi vào). Chưa cần thuộc; chỉ cần nhận ra chúng khi Claude hoặc GitHub nhắc tới - bài GitHub & vibe trên web/điện thoại sẽ cho dùng tay.

Vậy là mèo con có bản đồ: frontend (thấy), backend (xử lý), database (nhớ), gói lại thành repo, đặt lên VPS, gắn tên miền. Có bản đồ này, mô tả cho AI sẽ trúng hơn và mèo con không hoảng khi nó nhắc thuật ngữ.