[Video Summary] Ch. 8.11 Creating Mock Data SwiftUI Previews When Using Cloud Firestore & Firebase Storage (2024)

Mô tả nhanh

Video này hướng dẫn cách tạo dữ liệu mock cho preview SwiftUI khi sử dụng Cloud Firestore và Firebase Storage. Đồng thời, video cũng hướng dẫn cách hiển thị dữ liệu mock này chỉ trong preview và dữ liệu thật từ Firestore khi ứng dụng chạy trên simulator hoặc thiết bị.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách tạo dữ liệu mock cho preview SwiftUI khi sử dụng Cloud Firestore và Firebase Storage. Đồng thời, video cũng hướng dẫn cách hiển thị dữ liệu mock này chỉ trong preview và dữ liệu thật từ Firestore khi ứng dụng chạy trên simulator hoặc thiết bị.

Các bước thực hiện:

1. Tạo thuộc tính preview cho Spot class:

   • Mở rộng Spot class bằng cách thêm một extension.
   • Tạo một static property có tên preview kiểu Spot.
   • Bên trong preview, tạo một instance newSpot của Spot với các giá trị mock (id: "1", name: "Boston Public Market", address: "Boston, ma").
   • Trả về newSpot từ preview.
   • Sử dụng Spot.preview trong PreviewProvider của SpotDetailView thay vì giá trị literal.

2. Thay đổi tên biến photos thành FSPhotos:

   • Đổi tên biến chứa dữ liệu Firestore từ photos thành FSPhotos.
   • Cập nhật tên biến trong task ở nơi load dữ liệu từ Firestore.

3. Tạo computed property photos:

   • Tạo một computed property photos kiểu [Photo].
   • Sử dụng ProcessInfo.processInfo.environment["XCODE_RUNNING_FOR_PREVIEWS"] == "1" để kiểm tra xem có đang chạy trong preview hay không.
   • Nếu đang trong preview, trả về array chứa các photo.preview mock data (6 ảnh pizza từ Wikipedia).
   • Nếu không đang trong preview (đang chạy trong simulator hoặc app), trả về FSPhotos (dữ liệu từ Firestore).

4. Sửa lỗi hiển thị tên người dùng

   • Sửa lại initializer của class Photo để lấy email của user đang đăng nhập thay vì chuỗi rỗng, dùng Auth.auth().currentUser?.email ?? "".

Giải thích thêm:

• Việc sử dụng computed property photos giúp đảm bảo rằng dữ liệu sẽ tự động được cập nhật nếu có thay đổi từ Firestore. (Nếu ta dùng State variable thì sẽ không reactive)
• Đoạn code kiểm tra processInfo.processInfo.environment["XCODE_RUNNING_FOR_PREVIEWS"] == "1" là cách để biết liệu app đang hoạt động ở chế độ Preview hay không.

Video kết thúc bằng cách kiểm tra trên simulator, và sửa lỗi hiển thị tên người dùng trong chi tiết ảnh.

Chúc bạn học tập hiệu quả!