Vibe Coding: Từ nguyên mẫu đến sản phẩm hoàn chỉnh

Nguyên mẫu hoạt động trên máy của bạn, với dữ liệu đầu vào hoàn hảo, trên kết nối nhanh. Nhưng môi trường sản xuất thì khác — người dùng thực tế làm những việc không ngờ tới, kết nối bị gián đoạn và các trường hợp ngoại lệ xuất hiện.

Bài học này sẽ dạy bạn cách thu hẹp khoảng cách giữa "nó hoạt động" và "nó hoạt động với tất cả mọi người".

🔄 Tóm tắt nhanh: Trong bài học trước, bạn đã học cách gỡ lỗi code do AI tạo ra bằng cách đọc lỗi, hoàn tác và tạo các cuộc hội thoại mới. Bây giờ, bạn sẽ áp dụng những kỹ năng đó trong khi nâng cấp nguyên mẫu của mình cho người dùng thực.

Khoảng cách trong sản xuất

Bước 1: Thêm cơ sở dữ liệu thực

Hầu hết các nguyên mẫu được lập trình bằng Vibe Code đều bắt đầu với localStorage. Hãy chuyển sang cơ sở dữ liệu thực:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

Tôi cần chuyển trình quản lý bookmark của mình từ localStorage sang Supabase.

Cấu trúc dữ liệu hiện tại trong localStorage:
- bookmarks: mảng gồm {id, title, url, tags, createdAt}

Hãy:
1. Tạo lược đồ bảng Supabase
2. Thay thế tất cả các thao tác đọc/ghi localStorage bằng các truy vấn Supabase
3. Giữ nguyên giao diện người dùng — người dùng không nên nhận thấy sự khác biệt
4. Thêm trạng thái load trong khi dữ liệu đang được tìm nạp
5. Xử lý lỗi (hiển thị thông báo nếu không thể truy cập cơ sở dữ liệu)

✏️ ​​Cách điền thông tin chi tiết của bạn: Thay thế mỗi [] và trình giữ chỗ trong ngoặc vuông bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ tạo ra kết quả đầu ra mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về phản hồi có cấu trúc dựa trên prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Nên làm gì với kết quả đầu ra: Lưu phản hồi vào file Notes. Chọn đề xuất có tác động cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm mọi thứ cùng một lúc.

⚠️ Nếu thấy không ổn: Nếu các đề xuất có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ những lời khuyên chung chung đi." Nếu bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy nói: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với đó là ràng buộc chính."

Tại sao nên chọn Supabase? Nó miễn phí khi bắt đầu, có gói miễn phí hào phóng, hoạt động tốt với các công cụ AI và cũng xử lý xác thực.

✅ Kiểm tra nhanh: Sau khi chuyển sang Supabase, bookmark của bạn load chậm 1-2 giây (trước đây chúng load ngay lập tức từ localStorage). Đây có phải là lỗi không?

Câu trả lời: Không — điều này là bình thường. Việc đọc dữ liệu từ localStorage diễn ra tức thì vì dữ liệu nằm trên thiết bị của bạn. Các truy vấn cơ sở dữ liệu truyền qua mạng và mất thời gian. Đó là lý do tại sao bạn thêm trạng thái load — hiển thị biểu tượng chờ hoặc giao diện người dùng dạng khung trong khi dữ liệu đang được load, sau đó hiển thị nội dung.

Bước 2: Thêm xác thực

Bảo vệ ứng dụng của bạn để mỗi người dùng chỉ thấy dữ liệu của riêng họ:

Thêm xác thực Supabase vào trình quản lý bookmark của tôi:

1. Tạo trang đăng ký (/signup) với các trường email và mật khẩu
2. Tạo trang đăng nhập (/login) với email và mật khẩu
3. Sau khi đăng nhập, chuyển hướng đến /dashboard
4. Bảo vệ /dashboard — chuyển hướng người dùng chưa được xác thực đến /login
5. Lọc bookmark theo ID của người dùng đã đăng nhập
6. Thêm nút "Log out" vào tiêu đề
7. Thêm bảo mật cấp hàng (Row Level Security - RLS) vào Supabase để người dùng chỉ có thể
   đọc/ghi bookmark của riêng họ

Bảo mật cấp hàng (RLS) là phần quan trọng — nó ngăn chặn một người dùng truy cập dữ liệu của người dùng khác tại cùng một thời điểm ở cấp cơ sở dữ liệu, không chỉ ở cấp độ giao diện người dùng.

Bước 3: Thêm xử lý lỗi

Code do AI tạo ra thường chỉ xử lý "trường hợp thành công". Thêm xử lý lỗi cho mọi chế độ lỗi:

Thêm xử lý lỗi toàn diện vào ứng dụng của tôi:

1. Lỗi mạng: hiển thị "Không thể kết nối. Kiểm tra Internet của bạn và thử lại"
   kèm nút thử lại
2. Lỗi xác thực: chuyển hướng đến trang đăng nhập nếu phiên hết hạn
3. Xác thực biểu mẫu: hiển thị lỗi trực tiếp cho email không hợp lệ, mật khẩu ngắn,
   các trường bắt buộc bị bỏ trống
4. Trạng thái load: hiển thị giao diện người dùng dạng khung sườn trong khi dữ liệu đang load
5. Trạng thái trống: hiển thị thông báo thân thiện khi không có bookmark
6. Trang 404: hiển thị trang hữu ích cho các URL không hợp lệ

Danh sách kiểm tra xử lý lỗi:

• Mỗi lệnh gọi API đều có khối try/catch
• Mỗi trạng thái load đều có biểu tượng load hoặc khung sườn
• Mỗi biểu mẫu đều có xác thực trước khi gửi
• Mỗi lỗi hiển thị thông báo dễ đọc (không phải dấu vết ngăn xếp)

Bước 4: Làm cho ứng dụng tương thích

Kiểm tra trên nhiều kích thước màn hình và khắc phục sự cố:

Xem lại thiết kế tương thích của ứng dụng và khắc phục các sự cố sau:

1. Trên thiết bị di động (< 640px): thanh bên nên được ẩn theo mặc định,
   có thể truy cập thông qua menu hamburger
2. Trên máy tính bảng (640-1024px): thanh bên nên có thể thu gọn
3. Trên desktop (> 1024px): thanh bên luôn hiển thị
4. Thẻ nên chuyển từ 3 cột (desktop) sang 2 cột (máy tính bảng) sang 1 cột (điện thoại di động)
5. Vùng chạm (nút, liên kết) nên có kích thước ít nhất 44px trên điện thoại di động
6. Hộp thoại modal nên hiển thị toàn màn hình trên điện thoại di động, căn giữa trên desktop

✅ Kiểm tra nhanh: Bạn đã thử nghiệm ứng dụng trên điện thoại và văn bản quá nhỏ, các nút quá nhỏ để chạm vào. Nguyên nhân có thể là gì?

Đáp án: Thiếu tag meta viewport (<meta name="viewport" content="width=device-width, initial-scale=1">) và/hoặc kích thước pixel cố định thay vì đơn vị responsive. Yêu cầu AI kiểm tra tag viewport và chuyển đổi bất kỳ kích thước pixel được hardcode nào thành giá trị responsive.

Bước 5: Đánh giá bảo mật

Yêu cầu AI kiểm tra code mà nó đã tạo ra:

Đánh giá ứng dụng của tôi về các lỗ hổng bảo mật:

1. Dữ liệu đầu vào của người dùng có được lọc trước khi truy vấn cơ sở dữ liệu không?
2. API key có bị lộ trong code phía client không?
3. Bảo mật cấp độ hàng (Row Level Security) có được cấu hình đúng cách trong Supabase không?
4. Có bất kỳ lỗ hổng XSS nào (hiển thị HTML chưa được lọc) không?
5. Việc xác thực có được kiểm tra đúng cách trên mọi tuyến đường được bảo vệ không?
6. Mật khẩu có được lưu trữ an toàn (không phải dưới dạng plain text) không?

Các vấn đề bảo mật thường gặp trong Vibe Coding:

• API key được hardcode trong code front-end (nên chuyển sang biến môi trường)
• Không có kiểm tra dữ liệu đầu vào (người dùng có thể chèn nội dung độc hại)
• Thiếu kiểm tra xác thực trên các tuyến (người dùng có thể truy cập các trang được bảo vệ bằng cách nhập URL)
• Quy tắc cơ sở dữ liệu quá lỏng lẻo (người dùng có thể đọc dữ liệu của người dùng khác)

Danh sách kiểm tra khả năng sẵn sàng cho môi trường sản xuất

CƠ SỞ DỮ LIỆU:
□ Cơ sở dữ liệu thực (không phải localStorage)
□ Dữ liệu đã được sao lưu hoặc có thể khôi phục
□ Đã bật bảo mật cấp độ hàng (Row Level Security)

XÁC THỰC:
□ Đăng nhập/đăng ký hoạt động
□ Duy trì phiên (duy trì đăng nhập khi làm mới trang)
□ Các tuyến đường được bảo vệ sẽ chuyển hướng người dùng chưa được xác thực

XỬ LÝ LỖI:
□ Trạng thái load cho tất cả các lần truy xuất dữ liệu
□ Thông báo lỗi cho các lỗi mạng
□ Xác thực biểu mẫu trên tất cả các trường nhập liệu
□ Trạng thái trống cho các trường hợp không có dữ liệu

PHẢN HỒI:
□ Hoạt động trên thiết bị di động (320px trở lên)
□ Hoạt động trên máy tính bảng (768px+)
□ Hoạt động trên desktop (1024px+)
□ Vùng chạm đủ lớn (44px+)

BẢO MẬT:
□ Không có API key trong code phía client
□ Lọc dữ liệu đầu vào
□ Kiểm tra xác thực trên các tuyến được bảo vệ
□ Đã bật HTTPS (hầu hết các nhà cung cấp dịch vụ host đều bật mặc định)

Bài tập thực hành

Lấy ứng dụng bạn đã xây dựng trong bài học trước và nâng cấp nó lên phiên bản sản xuất:

1. Chuyển từ localStorage sang Supabase (gói miễn phí)
2. Thêm xác thực email/mật khẩu
3. Thêm xử lý lỗi cho ít nhất 3 chế độ lỗi
4. Kiểm tra trên điện thoại của bạn — khắc phục mọi sự cố về khả năng tương thích
5. Chạy qua prompt đánh giá bảo mật

Những điểm chính cần ghi nhớ

• Khoảng cách sản xuất là có thật: localStorage → cơ sở dữ liệu, không xác thực → tài khoản người dùng, trường hợp thành công → xử lý lỗi
• Supabase là con đường dễ nhất từ ​​nguyên mẫu đến sản xuất (gói miễn phí, bao gồm xác thực, thân thiện với AI)
• Xử lý lỗi là yêu cầu sản xuất số 1 — người dùng không bao giờ nên thấy màn hình trống trang
• Luôn kiểm tra trên thiết bị di động — hầu hết các nguyên mẫu được lập trình bằng vibe code đều gặp lỗi trên màn hình nhỏ
• Kiểm tra bảo mật là điều bắt buộc trước khi chia sẻ với người dùng thực
• AI giúp bạn đạt được 70% — 30% còn lại là hoàn thiện sản phẩm