Chương 8. Xây dựng chức năng với AI

Sau Chương 6 và 7, trang Sweet Home Bakery đã có bố cục đẹp, đúng bộ nhận diện thương hiệu — nhưng vẫn chỉ là một trang tĩnh: banner, 3 thẻ bánh nổi bật và thông tin liên hệ viết cứng trong HTML. Giao diện đẹp là chưa đủ, sản phẩm của bạn cần hỗ trợ đúng những gì khách hàng thực sự làm khi ghé thăm: xem có những loại bánh nào, xem kỹ một loại bánh trước khi quyết định, bỏ vào giỏ, đặt mua và xem lại đơn mình vừa đặt. Ở giai đoạn này, mục tiêu là dựng cho được toàn bộ luồng tính năng đó để dễ hình dung sản phẩm hoàn chỉnh, nên chương này sẽ tạm không đăng nhập và lưu giỏ hàng, đơn hàng ngay trên trình duyệt bằng localStorage — dữ liệu thật trên server sẽ được thay vào ở các chương sau.

Trước tiên: xác định các tính năng sản phẩm cần có

Trước khi mở AI Assistant và viết bất kỳ prompt nào, hãy hình dung trọn vẹn hành trình của một khách hàng thật — từ lúc vào trang cho đến lúc nhận được bánh. Mỗi bước trong hành trình đó chính là một tính năng bạn cần yêu cầu AI xây dựng. Với một tiệm bánh bán hàng online đơn giản như Sweet Home Bakery, hành trình đó gồm 5 bước:

Việc liệt kê ra bảng như trên trước khi bắt tay vào việc giúp bạn — và AI — không bỏ sót bước nào trong hành trình mua hàng, thay vì code rời rạc từng phần rồi mới nhận ra thiếu mất khâu thanh toán hay xem lại đơn.

Tập trung vào tính năng trước: dùng localStorage lưu tạm dữ liệu

Ở giai đoạn này, điều quan trọng nhất là dựng cho được toàn bộ luồng tính năng — từ xem bánh đến đặt hàng — chạy mượt từ đầu đến cuối, để bạn hình dung rõ sản phẩm hoàn chỉnh sẽ trông và hoạt động như thế nào. Việc xây tài khoản khách hàng và cơ sở dữ liệu thật phía server có thể để lại phía sau. Vì vậy Sweet Home Bakery tạm thời bỏ qua đăng nhập, và dùng localStorage — một kho lưu trữ nhỏ có sẵn ngay trong trình duyệt của khách — để tạm giữ giỏ hàng và đơn hàng.

• Giỏ hàng: danh sách bánh khách đã chọn, lưu trong localStorage dưới dạng một mảng gồm tên bánh, giá, số lượng, ảnh.
• Đơn hàng: sau khi thanh toán, thông tin đơn (khách hàng, danh sách bánh, tổng tiền, mã đơn) cũng được lưu vào localStorage, để khách có thể mở lại và xem chi tiết bất cứ lúc nào trên chính trình duyệt đó.

Khi mô tả các tính năng dưới đây cho AI, hãy luôn nhắc rõ "lưu vào localStorage" và "không cần đăng nhập" — nếu không, AI có thể mặc định thiết kế theo hướng cần tài khoản và cơ sở dữ liệu phía server, vượt quá mục tiêu của giai đoạn này là dựng nhanh toàn bộ luồng tính năng để nhìn thấy sản phẩm chạy được.

Lưu ý: dữ liệu trong localStorage chỉ tồn tại trên trình duyệt và thiết bị khách đang dùng — nếu khách xóa dữ liệu duyệt web hoặc đổi sang máy khác, giỏ hàng và lịch sử đơn cũ sẽ mất. Đây chỉ là bước tạm thời để thấy ngay các tính năng hoạt động; ở các chương sau, localStorage sẽ được thay bằng dữ liệu thật lưu trên server, bền vững và đồng bộ được trên nhiều thiết bị — chủ đề của Chương 9.

Tính năng 1: Danh sách các loại bánh

Ở Chương 6, trang chủ mới chỉ hiển thị 3 loại bánh nổi bật viết cứng trong content.html. Giờ là lúc thay bằng một trang "Thực đơn" hiển thị đầy đủ danh sách bánh, để khách xem được hết các lựa chọn chứ không chỉ 3 món. Mỗi thẻ bánh cần đủ thông tin để khách so sánh nhanh trước khi bấm vào xem kỹ hơn, và bấm "Xem chi tiết" nên mở ngay một modal thay vì chuyển trang, để khách xem nhanh rồi quay lại danh sách:

Tạo trang độc lập "Thực đơn" mới cho Sweet Home Bakery, 
tái sử dụng lại header và footer fragments, loại nội dung là THYMELEAF. 
Liệt kê toàn bộ các loại bánh đang bán. Mỗi món hiển thị dạng thẻ (card): 
ảnh bánh, tên bánh (font Playfair Display), giá gốc (gạch ngang) và giá bán 
(font Nunito, màu nâu caramel #8B5E3C), badge tỉ lệ giảm giá (ví dụ "-20%")
ở góc ảnh nếu bánh đang giảm giá. Nền thẻ be sữa (#FAF3E7), bo góc,
đổ bóng nhẹ. Mỗi thẻ có nút "Xem chi tiết". Xếp 3 thẻ mỗi hàng trên
desktop, 1 thẻ mỗi hàng trên điện thoại.

Khi bấm "Xem chi tiết", mở một modal (hộp thoại nổi lên, không chuyển
trang) hiển thị:
- Nhiều ảnh của bánh, xem được lần lượt (gallery).
- Tên bánh, giá gốc, giá bán, tỉ lệ giảm giá.
- Lựa chọn size bánh (nhỏ/vừa/lớn) kèm giá tương ứng cho từng size.
- Bộ tăng/giảm số lượng.
- Ba nút: "Thêm giỏ hàng" (thêm vào giỏ rồi đóng modal), "Mua ngay"
  (thêm vào giỏ rồi chuyển thẳng sang trang Thanh toán), và "Xem chi
  tiết" (chuyển sang trang chi tiết đầy đủ của bánh đó).

Cập nhật cả trang chủ sweet-home-bakery để dùng chung modal xem nhanh
này: khi khách bấm vào một trong 3 thẻ bánh nổi bật ở trang chủ, mở
đúng modal xem chi tiết đó thay vì không có phản hồi gì như hiện tại.

AI sẽ tạo trang "Thực đơn" mới cùng phần CSS tương ứng. Lưu lại các file, xuất bản trang lên máy chủ rồi mở thử để xem danh sách bánh hiển thị đúng như mô tả:

Bấm "Xem chi tiết" ở bất kỳ thẻ bánh nào để kiểm tra modal xem nhanh vừa yêu cầu AI dựng:

Tính năng 2: Xem chi tiết bánh

Nút "Xem chi tiết" trong modal xem nhanh ở trên dẫn tới một trang riêng cho từng loại bánh, với khu vực ảnh xem được kỹ hơn thay vì chỉ lướt qua gallery trong modal:

Tạo trang độc lập "Chi tiết bánh" duy nhất cho từng loại bánh, không tách fragment, tái sử dụng
lại header và footer fragments, loại nội dung là THYMELEAF. Trang mở
khi khách bấm "Xem chi tiết" trong modal xem nhanh ở trang Thực đơn.
Trang gồm:
- Khu vực ảnh: 1 ảnh lớn ở trên, bên dưới là dãy ảnh nhỏ (thumbnail);
  khi khách bấm vào một ảnh nhỏ, ảnh đó hiển thị thay thế vào vị trí
  ảnh lớn.
- Tên bánh, giá gốc, giá bán, tỉ lệ giảm giá.
- Lựa chọn kích thước bánh (nhỏ/vừa/lớn) kèm giá tương ứng cho từng
  kích thước.
- Bộ chọn số lượng (tăng/giảm).
- Hai nút "Thêm vào giỏ hàng" và "Mua ngay" nổi bật màu nâu caramel
  (#8B5E3C) ở cuối trang, hành vi giống hệt hai nút cùng tên trong
  modal xem nhanh.
- Mô tả chi tiết của bánh đặt ở dưới cùng

Lưu lại và mở thử trang chi tiết của một loại bánh bất kỳ để kiểm tra khu vực ảnh, các lựa chọn và hai nút hành động ở cuối trang:

Tính năng 3: Thêm bánh vào giỏ hàng

Đây là tính năng đầu tiên cần dùng đến localStorage. Mỗi lần khách bấm "Thêm vào giỏ", món bánh (kèm size và số lượng đã chọn) được lưu vào giỏ hàng trong localStorage; biểu tượng giỏ hàng ở header cần cập nhật số lượng ngay để khách biết mình đã chọn được bao nhiêu món:

Thêm chức năng giỏ hàng cho Sweet Home Bakery, không cần đăng nhập.
Yêu cầu:
- Khi bấm "Thêm vào giỏ", lưu bánh (tên, size, giá, số lượng, ảnh)
  vào localStorage với key "cart".
- Biểu tượng giỏ hàng ở góc phải header hiển thị số lượng món đang có
  trong giỏ, cập nhật ngay không cần tải lại trang.
- Tạo trang độc lập "Giỏ hàng", tái sử dụng lại header và footer
  fragments, loại nội dung là THYMELEAF, liệt kê các món đã thêm,
  cho phép tăng/giảm số lượng hoặc xóa món khỏi giỏ, tự tính tổng
  tiền.
- Nếu bánh đã có trong giỏ (cùng tên và size), tăng số lượng thay vì
  thêm dòng mới.

Vì giỏ hàng đụng tới nhiều trang cùng lúc (modal, trang chi tiết, header, trang Giỏ hàng), AI sẽ cần chút thời gian để chạy xong prompt này:

Sau khi prompt được AI thực thi xong sẽ có một loạt các tập tin được tạo mới hoặc sửa đồi, vì giỏ hàng là thành phần được dùng chung và chia sẻ giữa các trang. Bạn hãy lưu các tập tin thay đổi và xuất bản lên máy chủ.

Tính năng 4: Thanh toán

Vì không yêu cầu đăng nhập, form thanh toán cần thu thập đủ thông tin để tiệm giao bánh mà không cần tài khoản khách hàng: họ tên, số điện thoại, địa chỉ giao hàng. Sau khi khách xác nhận, đơn hàng được lưu vào localStorage kèm một mã đơn để khách tra cứu lại sau này. Dù khách đến trang này từ giỏ hàng hay từ nút "Mua ngay" ở modal/trang chi tiết, trang Thanh toán đều đọc từ cùng giỏ hàng trong localStorage nên không cần xử lý riêng cho từng lối vào:

Tạo trang độc lập "Thanh toán" cho Sweet Home Bakery, tái sử dụng
lại header và footer fragments, loại nội dung là THYMELEAF, không
cần đăng nhập.
Yêu cầu:
- Hiển thị lại danh sách món trong giỏ hàng (lấy từ localStorage) và
  tổng tiền.
- Form thu thập: Họ tên, Số điện thoại, Địa chỉ giao hàng, Ghi chú
  (không bắt buộc). Họ tên, Số điện thoại, Địa chỉ là bắt buộc.
- Khi bấm "Đặt hàng": sinh một mã đơn hàng duy nhất, lưu đơn hàng
  (thông tin khách, danh sách món, tổng tiền, mã đơn, thời gian đặt)
  vào localStorage với key "orders", rồi xóa giỏ hàng hiện tại.
- Sau khi đặt thành công, chuyển khách sang trang xác nhận (cũng là
  trang độc lập, tái sử dụng header/footer, THYMELEAF) hiển thị mã
  đơn hàng và lời cảm ơn. Mã đơn hàng hiển thị dạng link — bấm vào
  đó chuyển thẳng sang trang "Tra cứu đơn hàng" với mã đơn được điền
  sẵn vào ô tìm kiếm và hiển thị luôn thông tin đơn, không cần khách
  gõ lại.

AI sẽ tạo cả trang Thanh toán lẫn trang xác nhận đi kèm. Lưu lại, xuất bản rồi thử điền form và bấm "Đặt hàng" để xem toàn bộ luồng:

Sau khi bấm "Đặt hàng" thành công, khách được chuyển sang trang xác nhận kèm mã đơn hàng:

Tính năng 5: Xem chi tiết đơn hàng

Vì không có tài khoản để đăng nhập rồi xem "lịch sử đơn hàng của tôi", khách cần một cách khác để tra lại đơn: dùng đúng mã đơn hàng đã nhận sau khi đặt, trên cùng trình duyệt đã đặt:

Tạo trang độc lập "Tra cứu đơn hàng" cho Sweet Home Bakery, tái sử
dụng lại header và footer fragments, loại nội dung là THYMELEAF,
không cần đăng nhập. Yêu cầu:
- Khách nhập mã đơn hàng vào một ô tìm kiếm, hệ thống tìm đơn tương
  ứng trong localStorage (key "orders") và hiển thị chi tiết: danh
  sách món đã đặt, tổng tiền, thông tin giao hàng, thời gian đặt.
- Nếu không tìm thấy mã đơn trên trình duyệt hiện tại, hiển thị
  thông báo "Không tìm thấy đơn hàng này trên thiết bị của bạn —
  vui lòng tra cứu trên đúng trình duyệt bạn đã dùng để đặt hàng".
- Trang phải nhận được mã đơn hàng truyền qua từ trang xác nhận đặt
  hàng (ví dụ qua tham số trên URL) để tự điền sẵn vào ô tìm kiếm và
  hiển thị luôn kết quả, không bắt khách gõ lại mã.
- Có liên kết quay về trang chủ và trang "Thực đơn" để khách tiếp
  tục mua sắm sau khi xem xong đơn hàng.

Lưu lại và thử bấm vào mã đơn hàng ở trang xác nhận vừa rồi — trang tra cứu phải tự điền sẵn mã và hiển thị luôn kết quả:

Thông báo lỗi ở trên cũng chính là lời nhắc thẳng thắn về giới hạn của cách lưu tạm này — và là lý do ở các chương sau, khi chuyển sang làm việc với dữ liệu thật trên server, đơn hàng sẽ tra cứu được từ bất kỳ thiết bị nào chứ không chỉ trên trình duyệt đã đặt.