Tạo trang dịch vụ, bảng giá và album mẫu móng với Vibe Coding
Back To Blogs
Nguyễn Thị Thanh Tuyền - Chuyên viên Marketing
Ở bài trước, chúng ta đã xây dựng bộ nhận diện cho Nuny Nail và áp dụng lên website. Nhưng bảng giá và album mẫu móng vẫn đang được viết cứng trong file HTML. Mỗi lần tiệm tăng giá, thêm dịch vụ mới hay có mẫu móng đẹp muốn khoe, chủ tiệm lại phải nhờ người sửa code.
Trong bài này, chúng ta sẽ chuyển dịch vụ, bảng giá, album mẫu móng và blog vào quản lý trong trang admin EzyPlatform. Website sẽ tự lấy dữ liệu từ đó để hiển thị, nên chủ tiệm chỉ cần cập nhật trong admin là khách thấy ngay.
Dữ liệu dịch vụ làm ở bài này, đặc biệt là thời gian làm của từng dịch vụ, cũng là nền tảng để các bài sau tính giờ trống và nhận đặt lịch.
Phần 1. Để AI phân tích trước khi làm
Bước 1: Xác định nội dung cần quản lý trong admin
Ở bài trước, khi chốt cấu trúc dự án, chúng ta đã hỏi AI những phần nào nên quản lý trong EzyPlatform. Giờ là lúc làm thật. Trước hết, để AI xem lại website và lập danh sách:
Prompt mẫu
"Hãy đọc brand-guide.md và toàn bộ website hiện tại. CHƯA sửa file. Liệt kê những nội dung đang viết cứng trong code mà chủ tiệm sẽ cần tự cập nhật: Dịch vụ và bảng giá. Album mẫu móng. Bài blog. Các nội dung khác nếu có (ưu đãi, đánh giá khách...). Với mỗi loại, cho biết các thông tin cần lưu, ví dụ dịch vụ cần: tên, giá, thời gian làm, mô tả, ảnh, nhóm dịch vụ, thứ tự hiển thị."
Đọc kỹ danh sách thông tin của dịch vụ. Hãy chắc chắn có đủ:
- Giá: có thể là giá cố định (150.000đ) hoặc giá "từ" (từ 100.000đ) như dịch vụ vẽ móng.
- Thời gian làm tính bằng phút: bắt buộc, vì hệ thống đặt lịch sẽ dùng để tính giờ trống.
- Nhóm dịch vụ: ví dụ Sơn gel, Đắp bột và nối móng, Vẽ móng, Chăm sóc da tay, để trang bảng giá dễ xem trên điện thoại.
- Trạng thái: đang nhận hay tạm ngưng, để ẩn dịch vụ mà không phải xóa.
Bước 2: Tìm cách lưu nội dung bằng chức năng có sẵn của EzyPlatform
Thay vì để AI tự viết mới một hệ thống quản lý dịch vụ, hãy yêu cầu AI tìm những gì EzyPlatform đã có sẵn:
Prompt mẫu
"Dựa trên danh sách nội dung ở trên, hãy tìm hiểu EzyPlatform và các plugin đang cài (qua environment.json và tài liệu, công cụ EzyPlatform có trong dự án) để đề xuất cách lưu từng loại nội dung. CHƯA sửa file, CHƯA tạo dữ liệu. Với mỗi loại, cho biết: Dùng chức năng nào có sẵn trong EzyPlatform (bài viết, danh mục, trường tùy chỉnh, thư viện ảnh...). Chủ tiệm sẽ thêm, sửa nội dung ở đâu trong trang admin. Website lấy dữ liệu đó bằng cách nào để hiển thị. Những gì EzyPlatform chưa có sẵn và cách bạn đề xuất làm."
Ưu tiên phương án mà chủ tiệm tự thao tác được trong admin mà không cần hiểu code. Nếu AI đề xuất tự viết thêm bảng dữ liệu hay API mới trong khi EzyPlatform đã có chức năng tương tự, hãy hỏi lại: "Có cách nào dùng chức năng có sẵn thay vì viết mới không?".
Phần 2. Trang dịch vụ và bảng giá
Khi đã thống nhất cách lưu, cho AI tạo dữ liệu dịch vụ từ bảng đã chuẩn bị ở bài trước:
Prompt mẫu
"Hãy sửa trang /dich-vu để hiển thị dịch vụ lấy từ EzyPlatform thay vì viết cứng trong HTML: Nhóm dịch vụ theo danh mục, mỗi dịch vụ là một thẻ gồm tên, giá, thời gian làm, mô tả ngắn. Giá kiểu 'từ' hiển thị 'từ 100.000đ'; thời gian hiển thị dạng '45 phút' hoặc '1 giờ 30 phút'. Mỗi thẻ có nút 'Đặt lịch' dẫn tới /dat-lich?dich-vu=<mã dịch vụ>, để bài sau trang đặt lịch chọn sẵn dịch vụ. Không hiển thị dịch vụ đang tạm ngưng. Làm theo brand-guide.md, ưu tiên hiển thị trên điện thoại. Phần 'Dịch vụ nổi bật' ở trang chủ cũng lấy từ cùng dữ liệu này. Yêu cầu: Không đưa admin_access_token hay thông tin bí mật vào code giao diện. Nếu chưa lấy được dữ liệu, hiển thị thông báo thân thiện kèm số điện thoại hoặc Zalo của tiệm, không để trang trống. Sau khi xong, liệt kê các file đã thay đổi và dừng lại để tôi xem trước."
Lưu ý dòng về admin_access_token. Token này chỉ dùng trong VS Code để AI làm việc với EzyPlatform. Trang web mà khách mở chỉ được đọc dữ liệu công khai, không bao giờ được chứa token quản trị.
Phần 3. Album mẫu móng
Prompt mẫu
"Hãy sửa trang album mẫu móng để lấy ảnh từ EzyPlatform thay vì ảnh tạm: Hiển thị dạng lưới 2 cột trên điện thoại, 4 cột trên máy tính. Có bộ lọc theo nhóm mẫu ở đầu trang. Bấm vào ảnh thì xem ảnh lớn, kèm mô tả, dịch vụ tương ứng và nút 'Đặt lịch mẫu này' dẫn tới /dat-lich?dich-vu=<mã dịch vụ>. Ảnh tải dần khi cuộn xuống (lazy load), dùng ảnh thu nhỏ cho lưới. Làm theo brand-guide.md. Yêu cầu: Không đưa admin_access_token hay thông tin bí mật vào code giao diện. Sau khi xong, liệt kê các file đã thay đổi và dừng lại để tôi xem trước."
Phần 4. Blog chăm sóc móng
Blog giúp tiệm xuất hiện khi khách tìm trên Google những câu như "sơn gel giữ được bao lâu" hay "cách chăm sóc móng sau khi đắp bột". Đọc xong, khách có sẵn nút đặt lịch ngay trong bài. Viết bài trực tiếp trong VS Code bằng EzyArticle Extension, rồi đăng lên EzyPlatform:
Prompt mẫu
"Hãy viết bài blog 'Sơn gel giữ được bao lâu và cách giữ móng bền đẹp' cho Nuny Nail. Theo giọng văn trong brand-guide.md. Khoảng 800 đến 1.000 chữ, có tiêu đề phụ, dễ đọc trên điện thoại. Thông tin chính xác, không hứa hẹn quá mức (ví dụ không cam kết 'giữ được 2 tháng'). Cuối bài nhắc tới dịch vụ Sơn gel tay của tiệm và mời đặt lịch. Đề xuất tiêu đề và mô tả cho Google. Viết xong để tôi đọc duyệt trước khi đăng."
Luôn đọc lại bài trước khi đăng, nhất là các thông tin về sức khỏe móng và da tay. Có thể nhờ thợ trong tiệm góp ý thêm kinh nghiệm thực tế, bài sẽ đáng tin hơn.
Kết luận
Qua bài này, website Nuny Nail đã chuyển từ nội dung viết cứng trong HTML sang lấy dữ liệu trực tiếp từ trang admin EzyPlatform: dịch vụ và bảng giá được nhóm theo danh mục, có giá cố định hoặc giá "từ", có thời gian làm và trạng thái đang nhận hay tạm ngưng; album mẫu móng có bộ lọc, xem ảnh lớn và nút đặt lịch theo từng mẫu; còn blog chăm sóc móng giúp tiệm được khách tìm thấy trên Google và dẫn họ tới nút đặt lịch ngay trong bài.
Điểm mấu chốt là chúng ta để AI phân tích trước, ưu tiên dùng chức năng có sẵn của EzyPlatform thay vì tự viết hệ thống mới, và luôn giữ admin_access_token ngoài code giao diện, nhờ vậy chủ tiệm có thể tự tăng giá, thêm dịch vụ hay khoe mẫu móng mới chỉ bằng vài thao tác trong admin mà không cần nhờ người sửa code.
Dữ liệu dịch vụ, đặc biệt là thời gian làm của từng dịch vụ và đường dẫn /dat-lich?dich-vu=... đã gắn sẵn trên các nút, chính là nền móng cho bài tiếp theo, nơi chúng ta sẽ xây dựng trang đặt lịch để khách tự chọn dịch vụ, chọn thợ và chọn giờ còn trống.
