Buổi 04 — Thực hành: Trang Chủ Rau Củ Quả Của Tôi

Kết thúc buổi: bạn có một trang chủ GreenShop hoàn chỉnh với banner, danh mục và lưới 12 sản phẩm rau củ quả.

Lab 4.1 — Soạn bảng dữ liệu 12 sản phẩm

Trước khi dựng, hãy có “hàng để bày”. Mở Google Sheets/Excel, tạo bảng 12 sản phẩm rau củ quả với các cột: Tên, Giá, Giá gốc, Danh mục, Còn hàng, Nổi bật. Nếu chưa có sẵn ý tưởng, nhờ AI:

Lab 4.2 — Ghép trang chủ từ các khối

Dùng các khối đã làm ở buổi 3, yêu cầu AI ghép thành trang chủ:

Lab 4.3 — Nạp dữ liệu sản phẩm vào lưới

Đưa bảng dữ liệu vào app:

Lab 4.4 — Trau chuốt định dạng hiển thị

Áp dụng các chi tiết chuyên nghiệp bằng iterate:

Lab 4.5 — Xử lý trạng thái đang tải & trống

Lab 4.6 — Nghiệm thu & lưu mốc

Cuộn toàn bộ trang chủ, kiểm tra:
  • Banner tự chạy, vuốt được
  • Danh mục cuộn ngang mượt
  • Lưới sản phẩm hiển thị đúng 12 món, giá có dấu chấm
  • Sản phẩm giảm giá hiện đúng nhãn
Lưu mốc:

Checklist hoàn thành

  • Có bảng dữ liệu 12 sản phẩm rau củ quả
  • Trang chủ ghép đủ 4 khối, cuộn được
  • Lưới sản phẩm hiển thị dữ liệu, định dạng giá đẹp
  • Xử lý được trạng thái đang tải và trống
  • Đã lưu mốc Git
Trang chủ chính là “bộ mặt” cửa hàng bạn — giờ nó đã sẵn sàng đón khách!