​

Buổi 08 — Thực hành: Dữ Liệu Thật Trên Mây

Kết thúc buổi: sản phẩm GreenShop lưu trên Firebase, bạn tự đổi giá/thêm hàng trên Console và thấy app cập nhật ngay.

​

Lab 8.1 — Tạo project Firebase (thao tác chuột)

• Vào console.firebase.google.com, đăng nhập tài khoản Google
• Tạo project mới, đặt tên (ví dụ: greenshop-abc)
• Bật kho dữ liệu Firestore Database (chọn chế độ test khi được hỏi)

​

Lab 8.2 — Kết nối app với Firebase (AI làm)

Kết nối app GreenShop với Firebase project tôi vừa tạo (tên: greenshop-abc).
Hướng dẫn tôi từng bước những gì cần bấm/copy trên trang Firebase, còn phần
code và lệnh cài đặt bạn tự làm hết. Giải thích ngắn gọn cho người không biết
lập trình.

​

Lab 8.3 — Chuyển sản phẩm lên mây

Chuyển toàn bộ sản phẩm mẫu trong app lên Firestore:
- Mỗi sản phẩm gồm: tên, giá, giá gốc, ảnh, mô tả, danh mục, còn hàng (đúng/sai),
  nổi bật (đúng/sai), tồn kho
- Viết giúp tôi công cụ nạp một lần toàn bộ dữ liệu mẫu lên (seed)
- Từ giờ app đọc sản phẩm từ Firestore thay vì dữ liệu mẫu gắn cứng
- Tôi đổi giá trên Firebase thì app phải thấy ngay, không cần mở lại app

​

Lab 8.4 — Khoảnh khắc “wow”: đổi giá realtime

1. Mở app trên điện thoại, để ở màn hình trang chủ
2. Mở Firebase Console trên máy tính, tìm một sản phẩm
3. Đổi giá sản phẩm đó (ví dụ 25.000 → 19.000)
4. Nhìn vào điện thoại — giá tự đổi theo!

​

Lab 8.5 — Tập làm chủ shop trên Console

• Trên Console, thêm một sản phẩm rau mới đủ các trường
• Kiểm tra: nó xuất hiện trong app

Làm cho app: sản phẩm nào có "còn hàng = Không" thì hiện nhãn "Hết hàng",
làm mờ ảnh và vô hiệu hóa nút thêm vào giỏ.

• Trên Console, đặt một sản phẩm “còn hàng = Không”
• Kiểm tra: app hiện “Hết hàng” đúng

• Đặt một sản phẩm “nổi bật = Có”
• Kiểm tra: nó lên khu Sản phẩm nổi bật ở trang chủ

​

Lab 8.6 — Xử lý 3 trạng thái màn hình

Rà soát mọi màn hình đọc dữ liệu từ Firebase, đảm bảo cả 3 trạng thái:
đang tải (khung xương lấp lánh), lỗi mạng (thông báo "Không có kết nối" +
nút Thử lại), danh sách rỗng (hình minh họa + lời nhắn). 

​

Lab 8.7 — Lưu mốc

Lưu mốc với ghi chú: "App đọc dữ liệu thật từ Firebase, quản lý kho được".

​

Checklist hoàn thành

• Tạo được project Firebase và bật Firestore
• App kết nối và đọc sản phẩm từ Firebase
• Trải nghiệm đổi giá realtime thành công
• Tự thêm/ẩn/nổi bật sản phẩm trên Console
• App xử lý đủ 3 trạng thái (test bằng chế độ máy bay)
• Đã lưu mốc Git

Cửa hàng của bạn giờ đã “sống” trên mây — bạn tự vận hành được. Buổi sau: cho khách đăng nhập và đặt hàng thật!