MakeXYZ Fun

[Video Summary] Ch. 8.18 Part 2: Saving Images in Cloud Storage for Firebase using SwiftUI

Admin -

Mô tả nhanh

Video này hướng dẫn cách hoàn thiện tính năng lưu ảnh vào Cloud Storage của Firebase sử dụng SwiftUI, bao gồm việc tạo photo view hiển thị ảnh đã chọn, nhập mô tả và gọi view model để lưu ảnh và dữ liệu liên quan.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách hoàn thiện tính năng lưu ảnh vào Cloud Storage của Firebase sử dụng SwiftUI. Cụ thể, video sẽ hướng dẫn tạo một PhotoView để hiển thị ảnh người dùng chọn, cho phép họ nhập mô tả và gọi view model để lưu ảnh và dữ liệu liên quan lên Firebase.

Các bước thực hiện chính bao gồm:

  1. Tạo PhotoView:
    • Thêm một file SwiftUI View mới tên là PhotoView.
    • Xây dựng giao diện với NavigationView, VStack, Spacer, Image, TextField và Text.
    • Sử dụng biến UIimage để hiển thị ảnh đã chọn.
    • Tạo biến @State private var photo kiểu Photo để chứa dữ liệu mô tả ảnh.
    • Hiển thị thông tin người đăng và thời gian đăng ảnh.
    • Thêm Toolbar chứa nút "Cancel" và "Save".
  2. Xử lý nút "Cancel":
    • Sử dụng @Environment(\.dismiss) để đóng view.
  3. Xử lý nút "Save":
    • Gọi hàm saveImage() trong view model.
    • Sử dụng Task để thực hiện thao tác bất đồng bộ.
    • Truyền spot, photo và UIimage vào hàm saveImage().
    • Sử dụng @EnvironmentObject để truy cập view model.
  4. Sửa SpotDetailView:
  • Tạo enum ButtonPressed với case review và case photo để theo dõi button nào đã được nhấn.
  • Tạo biến @State private var buttonPressed để lưu trạng thái button đã nhấn.
  • Cập nhật buttonPressed khi click vào button review hoặc chọn ảnh từ PhotosPicker.
  • Tạo @State private var UIimageSelected để lưu ảnh đã chọn từ PhotosPicker.
    • Lưu ảnh được chọn vào biến UIimageSelected phía ngoài scope của onchange modifier.
    • Kiểm tra nếu spot.id là nil thì hiển thị alert hỏi người dùng muốn lưu spot hay không.
    • Nếu spot đã được lưu hoặc người dùng chọn lưu, thì hiển thị PhotoView dưới dạng sheet.
  • Thêm sheet modifier để hiển thị PhotoView khi cần.
  • Thêm biến @State private var showPhotoSheet để điều khiển việc hiển thị sheet.
  • Sử dụng một switch statement để kiểm tra button nào được nhấn và thực hiện việc dismiss tương ứng.
  1. Kiểm thử:
    • Chạy ứng dụng và thử chọn ảnh, nhập mô tả và lưu lại.
    • Kiểm tra dữ liệu trên Firebase Console và Storage.
    • Thêm ảnh vào simulator bằng cách kéo thả trực tiếp vào cửa sổ simulator đang chạy.

Video kết thúc với việc kiểm tra thành công chức năng lưu ảnh và dữ liệu liên quan lên Firebase, đồng thời giới thiệu về việc hiển thị danh sách ảnh trong các video tiếp theo.

Chúc bạn thành công!