[Video Summary] Ch. 6.9 Coding Keys in SwiftUI - Conform to Identifiable and read non Swifty Key names (2024)

Mô tả nhanh

Video này hướng dẫn cách sử dụng Coding Keys trong SwiftUI để xử lý các vấn đề thường gặp khi làm việc với API, bao gồm việc làm cho JSON conform với Identifiable và đọc các key không hợp lệ trong Swift. Video cũng trình bày cách làm việc với async image phases để hiển thị các view khác nhau tùy thuộc vào trạng thái tải ảnh.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách sử dụng Coding Keys trong SwiftUI để xử lý các vấn đề thường gặp khi làm việc với API, bao gồm việc làm cho JSON conform với Identifiable và đọc các key không hợp lệ trong Swift. Video cũng trình bày cách làm việc với async image phases để hiển thị các view khác nhau tùy thuộc vào trạng thái tải ảnh.

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

1. Làm cho struct Creature conform với Identifiable:

   • Thay thế Hashable bằng Identifiable trong khai báo struct.
   • Xcode sẽ yêu cầu thêm thuộc tính id, gán giá trị mặc định bằng UUID để tạo ID duy nhất cho mỗi Creature.
   • Chuyển var id thành let id vì ID này không nên thay đổi.
   • Loại bỏ cảnh báo về việc không thể decode trường id bằng cách sử dụng CodingKeys.

2. Sử dụng CodingKeys để tùy chỉnh quá trình decode JSON:

   • Tạo một enum CodingKeys conform với CodingKey để xác định các thuộc tính nào sẽ được sử dụng cho quá trình decode.
   • Loại bỏ case ID trong CodingKeys để id không bị decode từ json
   • Điều chỉnh CreaturesListView để sử dụng struct Creature đã conform với Identifiable, loại bỏ việc dùng index và id: \.self khi lặp qua danh sách.

3. Xử lý key JSON không hợp lệ bằng CodingKeys:

   • Khi API trả về các key có ký tự không hợp lệ trong Swift (ví dụ: official-artwork), cần sử dụng CodingKeys để mapping các key này thành các biến hợp lệ.
   • Ở struct Other, tạo một CodingKeys enum, khai báo case mới là officialArtwork với raw value là "official-artwork"
   • Trong struct OfficialArtwork, thêm một biến frontDefault kiểu String
   • Thay đổi cách lấy image URL trong getData() để sử dụng các key mới được mapping.

4. Xử lý trường hợp ảnh không có hoặc trả về null từ JSON:

   • Sửa kiểu dữ liệu front_default thành String? để có thể nhận giá trị nil.
   • Sử dụng toán tử ?? (nil coalescing) để thay thế giá trị nil bằng chuỗi "n/a" trong trường hợp không có URL hợp lệ.
   • Chú ý: không dùng chuỗi rỗng "" để so sánh với url không hợp lệ.

5. Sử dụng AsyncImage để hiển thị ảnh:

   • Thay thế AsyncImage cũ bằng phiên bản có phase để xử lý các trạng thái khác nhau khi tải ảnh.
   • Sử dụng if let để kiểm tra xem ảnh đã tải thành công hay chưa.
   • Sử dụng else if để kiểm tra xem có lỗi xảy ra trong quá trình tải ảnh hay không.
   • Sử dụng else để hiển thị placeholder (ví dụ: ProgressView) khi ảnh đang tải.
   • Nếu có lỗi xảy ra, hiển thị một system image (ví dụ: questionmark.square.dashed).

6. Refactor code:

   • Tạo extension để giảm kích thước file view, nhóm các đoạn code AsyncImage lớn vào một biến view trả về.