[Video Summary] Ch. 8.19 Loading Images from Firebase Storage

Mô tả nhanh

Video này hướng dẫn cách tạo một scroll view ngang để hiển thị các ảnh đã lưu trữ trong Firebase Storage, sử dụng URL ảnh đã lưu trong Cloud Firestore.

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 một scroll view ngang để hiển thị các ảnh đã lưu trữ trong Firebase Storage, sử dụng URL ảnh đã lưu trong Cloud Firestore.

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

1. Tạo View mới:
   • Tạo một file SwiftUI View mới tên spotDetailPhotoScrollView để chứa scroll view ảnh, tách biệt khỏi spotDetailView để giảm độ phức tạp.
2. Dữ liệu giả:
   • Tạo struct fakePhoto để làm dữ liệu giả, chứa URL ảnh để test trước khi load từ Firebase.
   • Tạo mảng photos chứa các fakePhoto để hiển thị.
3. Xây dựng giao diện:
   • Sử dụng ScrollView với trục ngang (.horizontal) để tạo scroll view ngang.
   • Trong ScrollView, dùng HStack và ForEach để duyệt mảng photos.
   • Sử dụng AsyncImage để load ảnh từ URL, và thiết lập frame, scale và clip để hiển thị ảnh vuông 80x80.
   • Thêm ProgressView để hiển thị khi ảnh đang load.
   • Thêm một số modifier để điều chỉnh khoảng cách, padding cho vừa ý.
4. Thay thế dữ liệu giả bằng dữ liệu thật:
   • Bỏ comment struct fakePhoto và mảng photos.
   • Thay bằng biến photos kiểu [Photo] và spot kiểu Spot để nhận dữ liệu từ SpotDetailView.
   • Thay đổi previewProvider để có thể truyền dữ liệu Photo và Spot vào preview.
5. Kết nối với Firebase:
   • Trong SpotDetailView, sử dụng @FirestoreQuery để lấy dữ liệu ảnh từ collection "photos" liên quan đến một "spot" đang xem.
   • Thêm đoạn code vào onAppear để cập nhật photos khi xem một spot cụ thể.
   • Thêm đoạn code vào action của nút save để cập nhật photos khi tạo một spot mới.
6. Thêm scroll view ảnh vào SpotDetailView:
   • Thêm spotDetailPhotoScrollView vào SpotDetailView, ngay dưới map và trên Hstack chứa rating.
   • Truyền photos và spot cho spotDetailPhotoScrollView.
7. Kiểm tra:
   • Build và run app để thấy scroll view ảnh hoạt động trên các spot khác nhau.
   • Thêm ảnh vào các spot khác nhau để kiểm tra khả năng scroll.

<Lời chúc>

Chúc bạn thực hành thành công và tiếp tục khám phá những điều thú vị trong lập trình iOS/macOS với Swift và SwiftUI!