[Video Summary] Schmutzli's Naughty List - A #BuiltWithProfG SwiftUI Exam Solution

Mô tả nhanh

Video này trình bày giải pháp cho bài kiểm tra SwiftUI của Prof G, xây dựng ứng dụng "Naughty List" (Danh sách nghịch ngợm) cho nhân vật Schmutzli, phụ tá của ông già Noel Thụy Sĩ. Ứng dụng này sử dụng Swift Data để quản lý danh sách trẻ em nghịch ngợm và cho phép người dùng tương tác với danh sách, thêm/sửa/xóa thông tin cũng như thực hành "tát" các hình ảnh trẻ em.

Video

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

Mô tả chi tiết

Các bước chi tiết để xây dựng ứng dụng:

Tạo dự án mới:
- Tạo một dự án Swift UI mới với tên "Naughty List".
- Tải xuống và thêm các tài nguyên (hình ảnh, âm thanh, biểu tượng) vào dự án.
- Thiết lập biểu tượng ứng dụng và màn hình chờ (launch screen).
Tạo class Child:
- Tạo class Child (con trẻ) với các thuộc tính: firstName, lastName, naughty, smacks, và notes.
- Import SwiftData và sử dụng @Model macro.
- Cung cấp giá trị mặc định cho các thuộc tính và tạo init.
Tạo mock data:
- Thêm extension cho class Child để cung cấp dữ liệu mock (dữ liệu thử nghiệm) với các thuộc tính như trên.
- Tạo một biến static preview kiểu ModelContainer để chứa dữ liệu mock.
- Sử dụng container.mainContext.insert để thêm dữ liệu mock.
Cấu hình file app:
- Import SwiftData.
- Thêm @mainActor @ModelContainer để hỗ trợ Swift Data.
- In đường dẫn đến thư mục lưu trữ dữ liệu Swift Data trên simulator.
- Đổi ContentView thành ListView.
Cấu hình ListView:
- Import SwiftData.
- Khai báo biến @Query children để đọc dữ liệu từ Swift Data.
- Sử dụng modelContainer modifier để hiển thị dữ liệu mock trong preview.
- Tạo một List để hiển thị danh sách trẻ em, mỗi item bao gồm tên và ảnh (naughty/nice).
- Sử dụng navigationTitle để đặt tiêu đề cho view (Schmooley's List).
Thêm ảnh naughty/nice:
- Thêm Image vào list item để hiển thị ảnh naughty/nice dựa trên giá trị naughty của mỗi child.
- Sử dụng resizable và scaleToFit để chỉnh kích thước ảnh, đặt frame chiều cao là 30.
Tạo DetailView:
- Tạo một SwiftUI View mới tên DetailView
- Khai báo @State variable child kiểu Child.
- Khai báo các State private variable như firstName, lastName, naughty, smacks, notes để tạo form nhập liệu.
- Thêm @Environment(\.modelContext) và @Environment(\.dismiss) để làm việc với swift data và điều khiển việc đóng màn hình.
- Tạo form nhập liệu bằng các TextField và Toggle.
- Sử dụng Stepper để chọn số smacks (từ 0 đến 5).
- Hiển thị số smacks đã chọn ở giữa màn hình bằng 1 Text view với font chữ lớn.
- Thêm 2 ảnh boy/girl để phục vụ cho việc thực hành ''tát''. Các hình này cần có độ cao là 250 và nằm cạnh nhau, căn giữa màn hình.
Chức năng DetailView:

*Khi toggle naughty được tắt, số smacks sẽ là 0. Ngược lại, khi bật, smacks sẽ là 1 (nếu trước đó là 0).
*Khi stepper smacks là 0, toggle naughty sẽ tắt. Khi smacks tăng lên 1 hoặc hơn, toggle naughty sẽ được bật.
*Sử dụng toán tử 3 ngôi (? :) thay cho if hoặc switch statements để xử lý các điều kiện trên.
- Thêm chức năng play sound khi chạm vào hình của bé trai/gái bằng cách sử dụng gesture.
- Thêm animation cho hình ảnh khi bị touch (giãn nở ra từ 0.9 lên 1).
Toolbar Detail View:
- Thêm toolbar với nút "Cancel" (top bar leading) và "Save" (top bar trailing).
- Khi nhấn cancel, đóng màn hình và về lại list view.
- Khi nhấn save, update data và đóng màn hình.
- Ẩn nút back mặc định của navigation bar.
- Load data từ child vào các State private variable khi view xuất hiện.
- Lưu data từ các State private variable vào child khi bấm save. Sử dụng modelContext.insert(child) để tạo hoặc cập nhật record.
Toolbar List View:
- Thêm toolbar với nút "+" (top bar trailing).
- Khi nút "+" được nhấn, hiển thị DetailView trong một sheet để tạo record mới.
- Sử dụng navigationLink để dẫn đến DetailView khi click vào 1 item trong list.
Xóa record: Implement swipe to delete trên list item bằng cách sử dụng swipeActions. Khi swipe và click delete thì record tương ứng bị xóa.
Thêm âm thanh:
- Import avFoundation.
- Tạo variable audioPlayer kiểu AVAudioPlayer và playSound function như trong DetailView.
- Khi app vừa mở, chơi âm thanh riff.

Chúc bạn thành công và luôn tìm thấy những điều thú vị trong thế giới lập trình!