MakeXYZ Fun

[Video Summary] Ch. 8.9 Saving Images with Firebase Cloud Storage, Snacktacular App (2024)

Admin -

Mô tả nhanh

Video này hướng dẫn cách lưu ảnh từ ứng dụng iOS lên Firebase Cloud Storage, đồng thời lập chỉ mục ảnh trong cơ sở dữ liệu Cloud Firestore và lưu URL để dễ dàng tải ảnh sau này.

Video

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

Mô tả chi tiết

Video này trình bày cách lưu ảnh từ ứng dụng iOS lên Firebase Cloud Storage. Tương tự như cách lưu trữ dữ liệu, video cũng hướng dẫn cách lưu trữ ảnh vào các thư mục con theo ID của từng nhà hàng (spots) và tạo các bản ghi (record) trong collection "photos" tương ứng với mỗi ảnh.

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

  1. Thiết lập Firebase Storage:
    • Truy cập Firebase Console, chọn "Storage" trong mục "Build".
    • Nâng cấp lên gói Blaze (cần thiết để sử dụng Firebase Storage), điền thông tin thẻ tín dụng (lưu ý: bạn sẽ không bị tính phí cho đến khi vượt quá ngưỡng sử dụng).
    • Chọn vị trí lưu trữ (US Central) và để Production Mode.
    • Thiết lập security rules tương tự như trong Firebase Database, cho phép đọc/ghi nếu người dùng đã được xác thực.
  2. Tạo lớp Photo:
    • Tạo file Photo.swift để định nghĩa cấu trúc dữ liệu của ảnh, bao gồm các thuộc tính: id, imageURLString, description, reviewer, và postedOn.
  3. Tạo PhotoViewModel:
    • Tạo file PhotoViewModel.swift để quản lý các thao tác liên quan đến ảnh, đặc biệt là hàm saveImage.
    • Hàm saveImage (async):
      • Kiểm tra spot.id.
      • Tạo tham chiếu đến Storage.
      • Tạo metadata để xác định định dạng file là JPEG.
      • Tạo tên file duy nhất bằng UUID().uuidString.
      • Xác định đường dẫn lưu trữ (folder theo spot ID, tên file là UUID).
      • Sử dụng putDataAsync để upload ảnh lên Firebase Storage.
      • Lấy URL download của ảnh sau khi upload thành công.
      • Cập nhật imageURLString cho đối tượng photo.
      • Lưu thông tin ảnh (bao gồm cả URL) vào collection "photos" trong document của spot tương ứng, sử dụng setData.
      • Có xử lý để không tạo photo.id mới nếu photo.id đã tồn tại.
  4. Cập nhật PhotoView:
    • Thêm các biến @State để lưu trữ đối tượng photo, data từ ảnh.
    • Trong action của nút "Save":
      • Gọi hàm async photoViewModel.saveImage để lưu ảnh lên storage.
      • Gọi dismiss để đóng ảnh.
    • Hiển thị thông tin về người đăng và ngày đăng bằng TextView.
    • Sử dụng modifier onChange để lấy data và lưu vào biên @State data sau khi chọn ảnh từ Picker.
    • Chuyển isPickerPresented của PhotoPicker về true.
  5. Build và test:
    • Chạy thử app, chọn ảnh và lưu.
    • Kiểm tra Firebase Storage: ảnh được lưu theo đúng cấu trúc thư mục.
    • Kiểm tra Firebase Database: thông tin ảnh được lưu vào collection "photos" của spot tương ứng.

Chúc bạn có một buổi học thật hiệu quả!