MakeXYZ Fun

[Video Summary] Complex JSON & SwiftData - SwiftyWeather Mid-Term Exam Solution

Admin -

Mô tả nhanh

Video này trình bày lời giải cho bài thi giữa kỳ môn lập trình iOS/macOS với Swift và SwiftUI, tập trung vào việc xây dựng ứng dụng thời tiết SwiftyWeather. Nội dung bao gồm việc xử lý JSON phức tạp, truy cập API, lưu trữ dữ liệu bằng SwiftData và các kỹ thuật giao diện người dùng.

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 thi giữa kỳ môn lập trình iOS/macOS với Swift và SwiftUI, tập trung vào việc xây dựng ứng dụng thời tiết SwiftyWeather.

Nội dung chi tiết của video bao gồm các bước sau:

  1. Thiết lập dự án Xcode:

    • Tạo dự án Xcode mới tên "SwiftyWeather".
    • Tải xuống và thêm icon ứng dụng, màn hình chờ.
    • Đổi tên ContentView thành WeatherView.
    • Thay đổi cấu trúc view thành NavigationStack.

  2. Xây dựng giao diện người dùng (UI):

    • Thêm các text view hiển thị thông tin thời tiết (biểu tượng thời tiết, "Wild Weather", nhiệt độ, gió...).
    • Thêm toolbar với nút gear ở góc trên bên phải.
    • Tạo màu nền cyan với độ mờ 75%, làm cho toàn bộ view trở lên trong suốt, bao gồm cả toolbar.
    • Đổi tất cả các view (trừ biểu tượng thời tiết) sang màu trắng.
    • Tạo biểu tượng thời tiết hiển thị nhiều màu.

  3. Tạo ViewModel và truy cập API:

    • Tạo class WeatherViewModel để quản lý dữ liệu và logic.
    • Khai báo URL API để lấy dữ liệu thời tiết.
    • Định nghĩa các cấu trúc dữ liệu Returned, Current và Daily để tương ứng với cấu trúc JSON trả về từ API.
    • Tạo hàm getData để tải dữ liệu từ API và giải mã JSON.
    • Gọi hàm getData khi view hiển thị lần đầu (sử dụng task).
    • In giá trị temperature 2m để kiểm tra xem việc truy xuất API có hoạt động không.
    • Gán giá trị từ JSON vào các biến trong WeatherViewModel (temperature, feelsLike, windSpeed, weatherCode).

  4. Hiển thị dữ liệu thời tiết:

    • Thay thế dữ liệu mẫu trong WeatherView với dữ liệu lấy từ API thông qua WeatherViewModel.
    • Hiển thị weather code, nhiệt độ, tốc độ gió, nhiệt độ cảm thấy.
    • Sử dụng hàm getWeatherDescription và getWeatherIcon để hiển thị mô tả thời tiết và biểu tượng tương ứng.
    • Hiển thị danh sách dự báo thời tiết 7 ngày tới với icon thời tiết, ngày trong tuần, nhiệt độ cao nhất/thấp nhất.

  5. Phân tích JSON nâng cao

    • Lấy dữ liệu từ mảng time, weather_code, temp_2m_max, temp_2m_min từ key daily trong JSON.
    • Tạo các thuộc tính trong WeatherViewModel là mảng date, dailyWeatherCode, dailyHighTemp, dailyLowTemp tương ứng với các mảng trên trong JSON
    • Hiển thị danh sách dữ liệu dự báo ngày trong tuần tương ứng với icon thời tiết, nhiệt độ cao nhất và thấp nhất trong một list.
    • Tạo hàm getWeekday để lấy tên thứ trong tuần từ ngày hiện tại.

  6. Tạo View tùy chỉnh Preference:

    • Tạo View mới PreferenceView để người dùng có thể tùy chỉnh các thiết lập.
    • Thêm các text field để nhập tên vị trí, vĩ độ, kinh độ, picker để chọn hệ đơn vị (Imperial/Metric), toggle để chọn có hiển thị độ F/C.
    • Tạo enum UnitSystem với các case imperial và metric cho phần lựa chọn đơn vị nhiệt độ và tốc độ gió.
    • Thêm toolbar với nút Cancel và Save.
    • Thay đổi giao diện của listview để có màu nền trong suốt.

  7. Lưu trữ cài đặt bằng SwiftData:

    • Tạo class Preference với các thuộc tính tương ứng với các cài đặt trong PreferenceView.
    • Thêm init để khởi tạo các giá trị mặc định.
    • Sử dụng @Model và @MainActor để làm việc với SwiftData.
    • Tạo mock data để test giao diện.

  8. Kết nối PreferenceView với SwiftData:

    • Import SwiftData & add @Environment modelContext, dismiss tại PreferenceView.
    • Đọc dữ liệu được lưu trong SwiftData khi View PreferenceView hiển thị.
    • Lưu data vào SwiftData khi nhấn nút Save.
    • Xóa bỏ các giá trị được lưu trước đó để đảm bảo luôn chỉ có 1 entry được lưu vào.

  9. Kết nối WeatherView với PreferenceView

    • Thêm một biến sheetIsPresented để kiểm soát việc hiển thị PreferenceView.
    • Hiện PreferenceView khi chạm vào nút gear trên toolbar.

  10. Đọc và sử dụng cài đặt từ SwiftData:

    • Import Swift Data & add @Environment modelContext tại WeatherView.
    • Đọc dữ liệu preference trong WeatherView.
    • Cập nhật URL API dựa trên các cài đặt trong Preference.
    • Thay đổi các thông số nhiệt độ, tốc độ gió, đơn vị tính và các text value trên WeatherView dựa vào thông tin vừa được cập nhật từ preference.
    • Thêm onChange modifier, khi giá trị trong preference thay đổi sẽ tự động fetch data và update UI.

  11. Cập nhật giao diện người dùng:

    • Thêm computed property degreeLabel để thay đổi hiển thị F/C hoặc không hiển thị giá trị này tùy vào cài đặt của người dùng.
    • Thay đổi giao diện danh sách thời tiết hiển thị symbol, ngày, nhiệt độ cao nhất, thấp nhất và đơn vị tương ứng.

Chúc bạn học tập hiệu quả và xây dựng được những ứng dụng iOS/macOS tuyệt vời!