Hướng dẫn tạo trang profile thợ nail với vibe coding
Back To Blogs
Nguyễn Thị Thanh Tuyền - Chuyên viên Marketing
Ở bài trước, trang /dat-lich của Nuny Nail đã chỉ cho khách chọn những giờ thợ thật sự rảnh. Nhưng ở bước chọn thợ, khách mới chỉ thấy tên chị Lan, Mai, Thảo mà không biết ai giỏi vẽ móng, ai làm đắp bột kỹ, nên thường phải nhắn tin hỏi tiệm rồi mới dám đặt.
Trong bài này, chúng ta sẽ làm trang profile cho từng thợ gồm ảnh, giới thiệu, thế mạnh, dịch vụ làm được và mẫu móng do chính thợ làm, kèm nút "Đặt lịch với Mai" dẫn thẳng tới trang đặt lịch đã chọn sẵn thợ. Thông tin thợ vẫn quản lý trong admin EzyPlatform để chủ tiệm tự cập nhật.
Phần 1. Bổ sung thông tin thợ trong admin
Dữ liệu thợ ở bài 4 mới có tên, dịch vụ làm được và ngày nghỉ. Trang profile cần thêm vài thông tin để giới thiệu thợ với khách:
Prompt mẫu
"Dùng MCP Server, hãy xem dữ liệu thợ của Nuny Nail theo docs/thiet-ke-du-lieu-dat-lich.md và đề xuất cách thêm thông tin cho trang profile thợ. CHƯA sửa file, CHƯA tạo dữ liệu. Thông tin cần thêm: Ảnh đại diện, giới thiệu ngắn, số năm kinh nghiệm. Thế mạnh dạng thẻ, ví dụ: Vẽ móng nghệ thuật, Đính đá, Móng cô dâu. Mã thợ dùng cho đường dẫn, ví dụ /tho-nail/mai. Gắn ảnh trong album mẫu móng (bài 3) với thợ đã làm mẫu đó. Cho biết dùng chức năng có sẵn nào của EzyPlatform, chủ tiệm sửa ở đâu trong admin. Phần nào là suy đoán thì ghi rõ."
Nếu chưa có ảnh và giới thiệu thật của thợ, có thể để AI tạo dữ liệu mẫu để dựng và thử trang trước:
Prompt mẫu
"Hãy tạo dữ liệu mẫu cho profile 3 thợ của Nuny Nail theo phương án đã chốt: Chị Lan, Mai, Thảo giữ đúng tên, dịch vụ làm được và ngày nghỉ đã có. Tự viết giới thiệu ngắn 2 đến 3 câu theo giọng văn trong brand-guide.md, số năm kinh nghiệm và 2 đến 3 thế mạnh hợp với dịch vụ của từng thợ, ví dụ Thảo không làm đắp bột thì không ghi thế mạnh về đắp bột. Ảnh đại diện dùng ảnh minh họa dạng icon hoặc chữ cái đầu tên theo màu của brand-guide.md, không dùng ảnh chân dung người thật hay ảnh AI giống người thật. Chia các ảnh trong album mẫu móng cho từng thợ theo thế mạnh, mỗi thợ 3 đến 4 mẫu. Ghi chú 'DỮ LIỆU MẪU' ở phần ghi chú trong admin để sau này dễ tìm và thay. Trước khi tạo, liệt kê toàn bộ nội dung sẽ tạo và chờ tôi đồng ý. Xong thì cho tôi biết vào đâu trong admin để xem và sửa."
Lưu ý: Dữ liệu mẫu chỉ để dựng và thử giao diện. Trước khi đưa website cho khách xem, hãy thay bằng ảnh, giới thiệu và kinh nghiệm thật của thợ, vì khách sẽ dựa vào đó để chọn thợ. Trang profile là trang công khai: hỏi ý thợ trước khi đăng ảnh thật, không đăng số điện thoại riêng hay lịch hẹn của thợ.
Phần 2. Tạo trang danh sách thợ và trang profile
Prompt mẫu
"Hãy tạo hai trang lấy dữ liệu thợ từ EzyPlatform: Trang /tho-nail: mỗi thợ là một thẻ gồm ảnh, tên, số năm kinh nghiệm, 2 đến 3 thẻ thế mạnh. Bấm vào thẻ thì mở trang profile. Thêm mục 'Thợ' vào menu. Trang profile /tho-nail/<mã thợ>: Ảnh đại diện, tên, kinh nghiệm, thế mạnh, đoạn giới thiệu, ngày nghỉ cố định trong tuần. Dịch vụ thợ làm được, có giá và thời gian làm như trang /dich-vu. Album 'Mẫu do <tên thợ> làm', bấm vào xem ảnh lớn như trang album. Nút 'Đặt lịch với <tên thợ>' luôn hiện ở cuối màn hình trên điện thoại, dẫn tới /dat-lich?tho=<mã thợ>. Mã thợ không tồn tại: hiện thông báo thân thiện và gợi ý các thợ khác. Yêu cầu: Làm theo brand-guide.md, ưu tiên hiển thị trên điện thoại. 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 3. Nối trang profile với trang đặt lịch
Prompt mẫu
"Hãy sửa trang /dat-lich để làm việc với trang profile thợ: Nhận thêm ?tho=<mã thợ> trên đường dẫn để chọn sẵn thợ, khách chỉ cần chọn dịch vụ, ngày và giờ. Nếu thợ không làm được dịch vụ đã chọn, báo rõ và gợi ý các thợ làm được. Ở bước chọn thợ, mỗi thợ hiện ảnh nhỏ và liên kết 'Xem profile'. Giữ nguyên phần tính giờ trống và các bước đặt lịch đã làm ở bài trước. Sau khi xong, liệt kê các file đã thay đổi và dừng lại để tôi xem trước."
Nếu có chỗ chưa đúng, mô tả cho AI chính xác những gì bạn thấy, ví dụ: "profile của Mai vẫn hiện mẫu móng do Thảo làm".
Kết luận
Qua bài này, mỗi thợ của Nuny Nail đã có trang profile riêng với ảnh, giới thiệu, thế mạnh, dịch vụ làm được và mẫu móng do chính thợ làm, cùng trang đội ngũ thợ để khách mới dễ chọn người hợp với mẫu mình thích, còn khách quen chỉ cần mở profile thợ quen và bấm "Đặt lịch với Mai" là tới thẳng trang đặt lịch đã chọn sẵn thợ.
Toàn bộ thông tin vẫn nằm trong admin EzyPlatform nên chủ tiệm tự đổi ảnh, thêm thế mạnh mà không cần sửa code.
Ở bài tiếp theo, chúng ta sẽ làm trang để khách đánh giá trải nghiệm với thợ sau mỗi lần làm móng, để trang profile thợ có thêm điểm đánh giá và nhận xét thật của khách.
