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

Mô tả nhanh

Video này trình bày về các bước thiết lập Cloud Storage cho Firebase, tạo model Photo, và viết function để lưu ảnh lên Cloud Storage, đồng thời tạo dữ liệu liên quan trong Cloud Firestore. Đây là phần đầu tiên trong hai phần hướng dẫn cách lưu ảnh sử dụng Cloud Storage cho Firebase trong ứng dụng iOS/macOS với SwiftUI.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách lưu ảnh sử dụng Cloud Storage cho Firebase và đồng bộ với Cloud Firestore trong ứng dụng iOS/macOS với SwiftUI.

Các bước chính được trình bày trong video này bao gồm:

1. Giới thiệu về Cloud Storage và Cloud Firestore:
   • Cloud Firestore dùng để lưu trữ dữ liệu dạng text, ngày tháng, boolean, v.v...
   • Cloud Storage (trước đây là Firebase Storage) dùng để lưu trữ các file lớn như ảnh, video.
   • Ứng dụng sẽ dùng cả Cloud Firestore (lưu data) và Cloud Storage (lưu ảnh).
2. Quy trình lưu ảnh:
   • Ảnh được chọn từ Photo Picker sẽ được lưu vào Cloud Storage.
   • Mỗi ảnh sẽ có một storage reference, bao gồm:
     • Tên folder giống với spotID (id của nhà hàng/điểm đến).
   • Tên file ảnh là một UUID duy nhất.
   • Mỗi ảnh sau khi lưu sẽ có URL để truy cập ảnh từ web.
   • Sau khi đã lưu ảnh, thông tin về ảnh (URL, description, email người đăng, ngày đăng) sẽ được lưu vào collection photos trong Cloud Firestore của một spot cụ thể.
3. Cấu hình Cloud Storage trên Firebase Console:
   • Truy cập Firebase Console, chọn dự án.
   • Chọn "Build" -> "Storage".
   • Chọn "Get started," chọn production mode, sau đó chọn vị trí (có thể không thay đổi được).
   • Chuyển sang tab "Rules" và sửa if false thành if request.auth != null để xác định quyền truy cập.
4. Tạo Model Photo:
   • Tạo file Swift mới tên Photo.
   • Import Firebase, FirebaseFirestoreSwift.
   • Tạo struct Photo như sau:

     struct Photo: Identifiable, Codable {
         @DocumentID var id: String?
         var imageURLString: String = ""
         var description: String = ""
         var reviewer: String = Auth.auth().currentUser?.email ?? ""
         var postedOn: Date = Date()
     
         var dictionary: [String: Any] {
             return [
                 "imageURLString": imageURLString,
                 "description": description,
                 "reviewer": reviewer,
                 "postedOn": Timestamp(date: postedOn)
             ]
         }
     }
     
     

5. Tạo hàm saveImage trong SpotViewModel:
   • Import UIKit, FirebaseStorage.
   • Viết hàm saveImage với các tham số spot, photo, image (UI Image)

       func saveImage(spot: Spot, photo: Photo, image: UIImage) async -> Bool {
               
           guard let spotID = spot.id else {
               print("😡 ERROR: spot.id == nil")
               return false
           }
               
           let photoName = UUID().uuidString
           let storage = Storage.storage()
               
           let storageRef = storage.reference().child("\(spotID)/\(photoName).jpeg")
   
           guard let resizedImage = image.jpegData(compressionQuality: 0.2) else {
               print("😡 ERROR: could not resize image")
               return false
           }
           
           let metadata = StorageMetadata()
           metadata.contentType = "image/jpg"
           
           var imageURLString = ""
   
           do {
               let _ = try await storageRef.putDataAsync(resizedImage, metadata: metadata)
               print("📸 Image saved!")
   
               do {
                   let imageURL = try await storageRef.downloadURL()
                   imageURLString = "\(imageURL)"
                   // We'll save this to Cloud FireStore as part of a document in the photos collection below
               } catch {
                   print("😡 ERROR: Could not get image URL after saving image \(error.localizedDescription)")
                   return false
               }
   
           } catch {
               print("😡 ERROR: Error uploading image to Firebase storage \(error)")
               return false
           }
   
           let db = Firestore.firestore()
           let collectionString = "spots/\(spotID)/photos"
   
           var newPhoto = photo
           newPhoto.imageURLString = imageURLString
           
           do {
               try await db.collection(collectionString).document(photoName).setData(newPhoto.dictionary)
               print("😎 Data updated successfully!")
               return true
           } catch {
               print("😡 ERROR: Could not update data in photos for spot ID \(spotID)")
               return false
           }
       }
   

   • Các bước trong hàm:
     • Kiểm tra spotID có giá trị.
     • Tạo photoName (UUID).
     • Tạo instance của Storage.
     • Tạo storageRef (đường dẫn đến nơi sẽ lưu ảnh).
     • Resize ảnh để giảm dung lượng.
     • Tạo metadata (chỉ định loại file là JPEG)
     • Lưu ảnh vào Cloud Storage dùng putDataAsync.
     • Lấy URL của ảnh đã lưu dùng downloadURL.
     • Lưu thông tin ảnh và URL vào Cloud Firestore thông qua document trong collection photos.

Video kết thúc bằng việc tóm tắt lại các bước vừa thực hiện và giới thiệu phần 2 của series, nơi sẽ tiếp tục chỉnh sửa app để có thể dùng được function vừa viết.

Chúc bạn học tập hiệu quả và có những khám phá thú vị với SwiftUI và Firebase!