MakeXYZ Fun

[Video Summary] Ch. 8.6 CloudFirestore Save & Load with SwiftUI, Snacktacular app (2024)

Admin -

Mô tả nhanh

Video này hướng dẫn cách lưu và tải dữ liệu lên Cloud Firestore với SwiftUI trong ứng dụng Snacktacular. Bạn sẽ học cách chuyển dữ liệu từ struct Swift vào Firebase và sử dụng on-liner đặc biệt trong SwiftUI để đọc dữ liệu từ một collection 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 lưu và tải dữ liệu lên Cloud Firestore với SwiftUI trong ứng dụng Snacktacular. Bạn sẽ học cách chuyển dữ liệu từ struct Swift vào Firebase và sử dụng on-liner đặc biệt trong SwiftUI để đọc dữ liệu từ một collection trong Cloud Firestore.

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

  1. Thiết lập Cloud Firestore:

    • Truy cập firebase.com, đăng nhập và chọn dự án.
    • Trong mục "Build", chọn "Firestore Database", sau đó tạo database.
    • Chọn location. Nên chọn location gần vị trí của bạn.
    • Chọn chế độ "Production mode".
    • Điều chỉnh rules trong tab "Rules" để chỉ cho phép người dùng đã xác thực ("authenticated users") đọc và ghi dữ liệu bằng cách thay thế false bằng request.auth != null.

  2. Tạo Model (Struct) cho Spot:

    • Tạo file Swift mới tên Spot.
    • Import FirebaseFirestore.
    • Khai báo struct Spot, conform Identifiable và Codable.
    • Sử dụng @DocumentID để tạo property id và các properties name, address.

  3. Tạo View cho Spot Detail:

    • Tạo file SwiftUI View mới tên SpotDetailView.
    • Khai báo @State var spot kiểu Spot, và @Environment(\.dismiss) var dismiss.
    • Thêm TextField cho name và address, có các modifier để tạo giao diện.
    • Thêm toolbar, bên trong có button "Cancel" để dismiss view và "Save" để gọi function save.
      • Ẩn nút back mặc định: .navigationBarBackButtonHidden()
    • Bọc SpotDetailView trong NavigationStack để hiển thị toolbar trong live preview.

  4. Tạo View Model cho Spot:

    • Tạo file Swift mới tên SpotViewModel.
    • Import FirebaseFirestore.
    • Khai báo class SpotViewModel với @Observable macro.
    • Tạo function saveSpot để lưu hoặc update Spot. Function này nhận đầu vào là một Spot và trả về một Bool để thể hiện việc save thành công hay thất bại.
      • Kiểm tra spot.id có giá trị hoặc không. Nếu có nghĩa là đây là thao tác update. Nếu không có nghĩa là thêm mới.
      • Sử dụng firestore.collection("spots").document(ID).setData(from: spot) để update data của document có id xác định.
      • Sử dụng firestore.collection("spots").addDocument(from: spot) để tạo mới document.
      • Trả về kết quả true nếu thành công, false nếu thất bại.

  5. Kết nối View Model vào View:

    • Trong SpotDetailView, tạo instance của SpotViewModel với @State var spotVM = SpotViewModel().
    • Trong action của button Save, gọi spotVM.saveSpot(spot: spot) và xử lý kết quả trả về.

  6. Cập nhật List View để hiển thị Sheet:

    • Trong file List View, thêm @State private var sheetIsPresented = false.
    • Trong action của button "+" gọi sheetIsPresented.toggle()
    • Thêm .sheet modifier vào List.
    • Trong content của sheet, bọc SpotDetailView trong NavigationStack và pass in một Spot mới.

  7. Đọc dữ liệu từ Firestore:

    • Trong List View, thêm @FirebaseQuery(collectionPath: "spots") var spots: [Spot] để load danh sách các Spot từ Firestore collection "spots".
    • Thay thế List hiện tại bằng List, sử dụng data từ spots.
    • Trong mỗi row, hiển thị navigation link để đến SpotDetailView khi tap.

Kết quả:

  • Ứng dụng có thể lưu dữ liệu vào Cloud Firestore và hiển thị lên list view.
  • Dữ liệu thay đổi sẽ đồng bộ giữa ứng dụng và Firestore console.
  • Bạn đã hoàn thành các chức năng CRUD (Create, Read, Update) cơ bản với Cloud Firestore.

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