[Video Summary] Ch. 8.12 Part I - SwiftUI @FirestoreQuery - Adding & Viewing Reviews (Snacktacular app)

Mô tả nhanh

Video này hướng dẫn cách sử dụng property wrapper @FirestoreQuery trong SwiftUI để truy cập một collection lồng nhau bên trong một document, cũng như cách thêm và hiển thị các review (đánh giá) trong ứng dụng Snacktacular.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn cách sử dụng @FirestoreQuery để truy cập collection lồng nhau trong Firestore, cụ thể là các review của một spot (nhà hàng). Video cũng hướng dẫn cách thêm và xem các review, cũng như cách xử lý lỗi crash preview provider.

Các bước chính bao gồm:

1. Cấu trúc dữ liệu Firestore:

   • Giải thích cấu trúc lồng nhau của dữ liệu: collection spots, document spot, collection reviews.
   • Đường dẫn truy cập sẽ có dạng: spots/{spotId}/reviews.

2. Sử dụng @FirestoreQuery:

   • Import FirebaseFirestoreSwift.
   • Khai báo @FirestoreQuery để lấy danh sách reviews.
   • Khắc phục lỗi không truy cập được spot.id ở cấp khai báo thuộc tính bằng cách khởi tạo path sai và sau đó hiệu chỉnh trong onAppear.
   • Thêm điều kiện kiểm tra preview running để tránh crash preview provider.

3. Hiển thị danh sách reviews:

   • Sử dụng List và Section để hiển thị review, có header chứa thông tin đánh giá trung bình và nút "Rate it".
   • Sử dụng ForEach để lặp qua mảng reviews lấy từ Firestore.
   • Sử dụng NavigationLink để chuyển đến ReviewView khi click vào một review.

4. Tạo giao diện nhập review:

   • Thêm @State để quản lý việc hiển thị sheet ReviewView
   • Thêm một sheet modifier để hiển thị ReviewView khi người dùng ấn nút "Rate it".
   • Chuyển navigation stack vào review view trong sheet.

5. Tạo ReviewViewModel:

   • Copy code từ SpotViewModel và sửa lại cho phù hợp với Review.
   • Tạo hàm saveReview để thêm hoặc cập nhật review vào Firestore.
   • Sử dụng collectionString để xác định đường dẫn collection một cách rõ ràng.
   • Cập nhật lại hàm saveReview để sử dụng guard let tránh lỗi nil và trả về giá trị Boolean báo hiệu thành công hay không.

6. Lưu review:

   • Trong ReviewView, gọi reviewVM.saveReview khi người dùng nhấn nút "Lưu".
   • Sử dụng await vì saveReview là async function.
   • Sửa lỗi không cập nhật rating bằng cách chuyển @State thành @Binding trong StarSelectionView.
   • Cập nhật lại ReviewView để có thể nhận biết được việc save data review có thành công hay không.

7. Lưu ý:

   • Cần chỉnh sửa StarSelectionView để sử dụng @Binding thay vì @State để cập nhật rating.
   • Cần xử lý lỗi crash khi thêm mới spot chưa có ID.

Video kết thúc với việc review hoạt động cơ bản, người dùng có thể thêm và chỉnh sửa review. Tuy nhiên, vẫn còn một số việc cần phải làm, sẽ được tiếp tục ở video tiếp theo

Chúc bạn học tập hiệu quả và có những trải nghiệm lập trình thú vị!