MakeXYZ Fun

[Video Summary] Ch. 8.11 Tap for Star Ratings in SwiftUI + Review Details (Snacktacular app)

Admin -

Mô tả nhanh

Video này hướng dẫn cách tạo một struct Review, một view hiển thị chi tiết review, và một view cho phép người dùng chọn rating từ 1 đến 5 sao. Video cũng hướng dẫn cách tổ chức code bằng cách tạo các folder groups (models, view models, views) trong dự án.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách tạo một struct Review, một view hiển thị chi tiết review, và một view cho phép người dùng chọn rating từ 1 đến 5 sao. Video cũng hướng dẫn cách tổ chức code bằng cách tạo các folder groups (models, view models, views) trong dự án.

Dưới đây là các bước chi tiết:

  1. Tổ chức file trong project navigator:

    • Tạo folder models để chứa các model (ví dụ: Spot.swift, Review.swift).
    • Tạo folder view models để chứa các view model (ví dụ: SpotViewModel.swift, LocationManager.swift).
    • Tạo folder views để chứa các view (ví dụ: LoginView.swift, ListView.swift, SpotDetailView.swift, PlaceLookupView.swift).

  2. Tạo struct Review:

    • Tạo file Review.swift trong folder models.
    • Import các thư viện cần thiết: Firebase, FirebaseFirestoreSwift.
    • Định nghĩa struct Review với các thuộc tính:
      • id: String? (dùng property wrapper @DocumentID).
      • title: String (tiêu đề review).
      • body: String (nội dung review).
      • rating: Int (số sao rating).
      • reviewer: String (email của người review).
      • postedOn: Date (thời gian review).
    • Thêm computed property dictionary để chuyển đổi đối tượng thành dictionary để lưu trữ lên Cloud Firestore.

  3. Tạo view ReviewView:

    • Tạo file ReviewView.swift trong folder views.
    • Khai báo các biến @State: spot (Spot), review (Review).
    • Khai báo biến môi trường @Environment: dismiss.
    • Trong PreviewProvider, khởi tạo Spot và Review để hiển thị preview.
    • Xây dựng giao diện người dùng:
      • Hiển thị tên và địa chỉ của spot.
      • Thêm Spacer để đẩy các phần tử lên trên.
      • Thêm VStack để căn chỉnh các phần tử sang trái.
      • Thêm frame để đảm bảo VStack luôn ở lề trái của màn hình.
      • Thêm toolbar với nút "Cancel" và "Save".
      • Thêm text view "Click to rate".
      • Thêm HStack để hiển thị sao rating (tạm thời là các image star.fill).
      • Thêm text view cho review title và text field để nhập tiêu đề.
      • Thêm text view cho review body và text field với khả năng cuộn để nhập nội dung review.
      • Thêm các modifier để định dạng giao diện.

  4. Tạo view StarsSelectionView:

    • Tạo file StarsSelectionView.swift.
    • Định nghĩa các constant để tùy chỉnh giao diện: highestRating (số sao tối đa), unselected (ảnh sao chưa chọn), selected (ảnh sao đã chọn), font, fillColor (màu sao khi chọn), emptyColor (màu sao khi chưa chọn).
    • Trong body, tạo HStack chứa các sao bằng vòng lặp ForEach.
    • Thêm func showStar(for number: Int) -> Image để trả về ảnh sao đã chọn hoặc chưa chọn dựa trên rating hiện tại.
    • Thêm modifier onTapGesture để cập nhật rating khi người dùng chạm vào một sao.
    • Trong ReviewView, thay thế HStack hiển thị các sao bằng StarSelectionView.
    • Thêm overlay cho StarSelectionView để tạo viền bao quanh các ngôi sao.

Video này tập trung vào tạo data model và một view cơ bản cho phép người dùng review nhà hàng. Các phần như lưu dữ liệu lên cloud hay xử lý interactive sẽ được hoàn thiện thêm trong các video tiếp theo.

Chúc bạn có những giây phút code thật vui!