[Video Summary] Ch. 8.14 Improving the UI w/better Review Rows + Preventing Edits of Reviews a User Didn't Post

Mô tả nhanh

Video này hướng dẫn cách cải thiện giao diện người dùng (UI) trong ứng dụng iOS/macOS với Swift và SwiftUI, cụ thể là: hiển thị đánh giá sao dưới tiêu đề đánh giá, tính toán giá trị đánh giá trung bình cho mỗi địa điểm, ngăn người dùng chỉnh sửa đánh giá không phải của mình, và một số tinh chỉnh khác để làm giao diện người dùng bóng bẩy hơn.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách cải thiện giao diện người dùng (UI) trong ứng dụng iOS/macOS với Swift và SwiftUI, cụ thể là: hiển thị đánh giá sao dưới tiêu đề đánh giá, tính toán giá trị đánh giá trung bình cho mỗi địa điểm, ngăn người dùng chỉnh sửa đánh giá không phải của mình, và một số tinh chỉnh khác để làm giao diện người dùng bóng bẩy hơn. Cụ thể, video trình bày các bước sau:

1. Tạo SpotReviewRowView:
   • Tạo một view mới SpotReviewRowView để hiển thị tiêu đề đánh giá, đánh giá sao và dòng đầu tiên của nội dung đánh giá.
   • Sử dụng VStack để sắp xếp các thành phần theo chiều dọc.
   • Sử dụng Text để hiển thị tiêu đề đánh giá với font .title2.
   • Sử dụng HStack để hiển thị đánh giá sao và dòng đầu tiên của nội dung đánh giá trên cùng một dòng.
   • Sử dụng lại StarSelectionView để hiển thị đánh giá sao, với tham số interactive đặt thành false để ngăn người dùng thay đổi đánh giá.
   • Thêm font modifier để làm cho các ngôi sao có kích thước nhỏ hơn.
2. Cập nhật StarSelectionView:
   • Thay đổi let font thành var font để có thể thay đổi font khi khởi tạo view.
   • Thêm @State var interactive = true để kiểm soát tính tương tác của các ngôi sao.
   • Sử dụng onTapGesture để chỉ thay đổi đánh giá khi interactive là true.
3. Sử dụng SpotReviewRowView trong SpotDetailView:
   • Thay thế Text trong ForEach bằng SpotReviewRowView, truyền vào review để hiển thị đánh giá chi tiết.
4. Cập nhật Model Review:
   • Thay đổi cách gán email người đánh giá. Thay vì gán khi lưu vào Firestore, gán email người đánh giá ngay khi tạo mới một Review. Điều này cho phép xác định người đăng bài ngay cả khi review chưa được lưu.
5. Cập nhật ReviewView:
   • Thêm @State var postedByThisUser = false để kiểm tra xem review có phải do người dùng hiện tại đăng hay không.
   • Thêm .onAppear để kiểm tra email người đăng review xem có trùng với email người dùng hiện tại không để gán giá trị phù hợp cho biến postedByThisUser.
   • Sử dụng modifier .disabled để vô hiệu hóa các thành phần UI (ngôi sao, text field) khi người dùng xem review không phải do mình đăng.
   • Ẩn/hiện nút back và các nút cancel/save dựa trên việc review có phải do người dùng đang xem tạo ra hay không.
   • Hiển thị email của người đăng và ngày giờ đăng thay cho "click to rate" khi xem review không phải của mình.
6. Tính toán rating trung bình trong SpotDetailView:

• Tạo computed property AVG rating để tính toán rating trung bình.
• Sử dụng guard let để xử lý trường hợp mảng reviews rỗng.
• Sử dụng reduce function để tính tổng giá trị rating.
• Chuyển kiểu dữ liệu từ Int sang Double để lấy kết quả có dạng số thập phân.
• Sử dụng String(format:argument:) để format kết quả chỉ lấy một số thập phân.
• Hiển thị rating trung bình đã được tính toán.

Chúc bạn học tập hiệu quả!