[Video Summary] CatBreeds App - a Prof. G. SwiftUI Exam Challenge & Solution

Mô tả nhanh

Video này trình bày lời giải cho bài kiểm tra cuối kỳ môn SwiftUI của Prof. G, tập trung vào việc xây dựng ứng dụng CatBreeds. Ứng dụng này sử dụng URLSession để gọi API, phân tích JSON, hiển thị danh sách các giống mèo, hình ảnh và thông tin chi tiết của chúng, cũng như cung cấp một số thông tin thú vị ngẫu nhiên về mèo.

Video

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

Mô tả chi tiết

Video này trình bày lời giải cho bài kiểm tra cuối kỳ môn SwiftUI của Prof. G, tập trung vào việc xây dựng ứng dụng CatBreeds. Ứng dụng này sử dụng URLSession để gọi API, phân tích JSON, hiển thị danh sách các giống mèo, hình ảnh và thông tin chi tiết của chúng, cũng như cung cấp một số thông tin thú vị ngẫu nhiên về mèo.

Dưới đây là các bước chính trong quá trình xây dựng ứng dụng:

1. Thiết lập dự án và tài nguyên:
   • Tạo một ứng dụng SwiftUI mới có tên Catfax.
   • Tải xuống và thêm các tệp icon và logo vào project.
   • Tạo một struct CatBreed để lưu trữ thông tin về các giống mèo, bao gồm các thuộc tính như breed, country, origin, coat, pattern, đảm bảo struct này tuân thủ giao thức Identifiable và Codable.
   • Cấu trúc CatBreed chứa một id được tạo tự động bằng UUID(), và sử dụng CodingKeys để bỏ qua việc tải id từ JSON.
2. Xây dựng View Model:
   • Tạo một class CatViewModel tuân thủ ObservableObject để quản lý dữ liệu và logic.
   • Class này có các thuộc tính:
     • breeds: một mảng các struct CatBreed lưu trữ dữ liệu tải về.
     • total: số lượng giống mèo có sẵn
     • urlstring: địa chỉ API để tải dữ liệu.
   • Hàm getData() để lấy dữ liệu JSON từ API và gán vào thuộc tính breeds và total. Sử dụng URLSession và JSONDecoder để xử lý dữ liệu.
   • Hàm loadNextIfNeeded(_ catBreed: CatBreed) để tải thêm dữ liệu khi người dùng cuộn đến cuối danh sách.
   • Hàm loadAll: Tải toàn bộ dữ liệu mèo từ tất cả các trang bằng cách gọi đệ quy hàm getData.
3. Xây dựng List View:
   • Tạo một ListView để hiển thị danh sách các giống mèo.
   • Sử dụng NavigationStack để hiển thị danh sách và cho phép điều hướng đến các view chi tiết.
   • Tạo một stateObject catVM để sử dụng catViewModel.
   • Sử dụng List và NavigationLink để hiển thị danh sách các giống mèo và điều hướng đến DetailView khi một dòng được chọn.
   • Hiển thị tên giống mèo trong mỗi hàng của danh sách, có tiêu đề Cat Breeds cho view này.
   • Thêm một toolbar ở dưới cùng để hiển thị số lượng mèo đã tải về và tổng số mèo.
   • Thêm nút "Load All" để tải tất cả các giống mèo có sẵn từ API.
   • Thêm progress view để hiển thị tiến trình tải dữ liệu.
   • Sử dụng LazyVStack để tải dữ liệu khi người dùng cuộn đến cuối danh sách.
4. Xây dựng Detail View:
   • Tạo một DetailView để hiển thị thông tin chi tiết của mỗi giống mèo.
   • Nhận một catBreed object từ ListView.
   • Hiển thị các thông tin như tên, quốc gia, nguồn gốc, lông và hoa văn của giống mèo.
   • Sử dụng navigationTitle để hiển thị tên giống mèo ở đầu view
   • Hiển thị dữ liệu sử dụng HStack với text label (bên trái) và text giá trị (bên phải).
   • Sử dụng một AsyncImage để hiển thị ảnh.
   • Thêm một placeholder khi ảnh chưa tải.
   • Sử dụng một dictionary để ánh xạ tên giống mèo với URL ảnh tương ứng.
5. Thêm chức năng Cat Fact:
   • Tạo FactViewModel để tải dữ liệu về các câu nói ngẫu nhiên về mèo.
   • Thêm một nút trên ListView để hiển thị một sheet với nội dung fact.
   • Sử dụng presentationDetents để điều chỉnh kích thước sheet.

Lời giải này cho thấy cách xây dựng ứng dụng SwiftUI hoàn chỉnh, bao gồm tải dữ liệu từ API, phân tích JSON, hiển thị danh sách, điều hướng, tải thêm dữ liệu khi cuộn và hiển thị hình ảnh.

Chúc bạn có một trải nghiệm học tập và lập trình thú vị!