[Video Summary] Ch. 8.8 Selecting Photos from a Conditionally Presented PickerView, Snacktacular App (2024)

Mô tả nhanh

Video này hướng dẫn cách thiết lập giao diện để chọn ảnh, hiển thị thông báo alert và trình bày Photo Picker một cách có điều kiện dựa trên lựa chọn của người dùng 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 thiết lập giao diện để chọn ảnh, hiển thị thông báo alert và trình bày Photo Picker một cách có điều kiện dựa trên lựa chọn của người dùng trong ứng dụng Snacktacular. Các bước thực hiện bao gồm:

1. Tạo Photo View:

   • Tạo một file SwiftUI mới tên PhotoView.
   • Import thư viện PhotosUI.
   • Khai báo các biến @State cần thiết:
     • spot: Lưu trữ thông tin về địa điểm (spot).
     • selectedPhoto: Lưu trữ ảnh được chọn từ thư viện.
     • pickerIsPresented: Quyết định xem có hiển thị Photo Picker hay không.
     • selectedImage: Lưu trữ ảnh đã chọn để hiển thị.
   • Khai báo biến @Environment để dismiss view.
   • Tạo NavigationStack để chứa ảnh và toolbar.
   • Thêm một Image để hiển thị ảnh đã chọn, có thể resize và scale cho phù hợp.
   • Thêm toolbar với hai nút "Cancel" và "Save":
     • Nút "Cancel" để đóng view.
     • Nút "Save" (chưa có code xử lý).
   • Sử dụng photoPicker modifier để hiển thị Photo Picker có điều kiện dựa trên biến pickerIsPresented.
   • Sử dụng onChange modifier để xử lý ảnh được chọn từ selectedPhoto, chuyển đổi thành UIImage và cập nhật selectedImage.
   • Xử lý lỗi khi tải ảnh.
   • Thay đổi giá trị của pickerIsPresented thành true để kiểm tra giao diện.

2. Cập nhật Spot Detail View:

   • Thêm biến @State photoSheetIsPresented để kiểm soát việc hiển thị fullscreen cover sheet (dùng để hiển thị PhotoView).
   • Thêm biến @State showingAlert để kiểm soát việc hiển thị alert khi người dùng cố thêm ảnh cho spot chưa được lưu.
   • Thêm biến @State alertMessage để chứa nội dung của alert.
   • Tạo một button "Photo" để thêm ảnh.
   • Trong action của button "Photo":
     • Kiểm tra xem spot có ID (đã được lưu) hay chưa.
     • Nếu chưa, hiển thị alert cho người dùng.
     • Nếu có, hiển thị PhotoView qua full screen cover sheet.
   • Tạo alert với hai nút "Cancel" và "Save".
   • Thêm modifier .fullScreenCover để hiển thị PhotoView khi photoSheetIsPresented là true.
   • Thêm modifier .autocorrectionDisabled để tắt tự động sửa lỗi cho các text field.

3. Cập nhật Spot View Model:

   • Thay đổi kiểu trả về của hàm saveSpot từ Bool sang String? (optional String) để trả về document ID nếu thành công, nil nếu thất bại.
   • Cập nhật hàm saveSpot để trả về document ID khi thêm mới document hoặc nil.

4. Xử lý Save Button trong Alert:

   • Thêm logic vào nút save trong alert, gọi hàm spot viewmodel để lưu spot sau đó gán spot id cho biến spot.
   • Thêm logic vào nút save trong toolbar, gọi hàm spot viewmodel để lưu spot.

5. Kiểm thử:

   • Chạy ứng dụng và kiểm tra các chức năng.
     • Chụp ảnh cho spot đã có và spot vừa được tạo
     • Kiểm tra alert và các trường hợp khi lưu spot mới khi chọn nút "Photo"

Chúc bạn có những giờ phút học tập và làm việc hiệu quả!