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
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!