MakeXYZ Fun

[Video Summary] SwiftUI Challenge & Solution: The Addition Tutor App

Admin -

Mô tả nhanh

Video này trình bày lời giải cho một bài tập thực hành xây dựng ứng dụng trong một bài kiểm tra về SwiftUI. Ứng dụng là một công cụ hỗ trợ học toán đơn giản, giúp trẻ nhỏ luyện tập phép cộng các số từ 1 đến 10, có sử dụng emoji và âm thanh để tăng tính tương tác.

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 một bài tập thực hành xây dựng ứng dụng trong một bài kiểm tra về SwiftUI. Ứng dụng là một công cụ hỗ trợ học toán đơn giản, giúp trẻ nhỏ luyện tập phép cộng các số từ 1 đến 10, có sử dụng emoji và âm thanh để tăng tính tương tác.

Dưới đây là các bước chính để xây dựng ứng dụng này:

  1. Khởi tạo dự án và thêm tài nguyên:
    • Tạo một dự án SwiftUI mới trong Xcode với tên "math tutor".
    • Tải xuống các file âm thanh từ đường dẫn bit.ly/Swift-math-tutor và thêm vào thư mục Assets của dự án.
  2. Tạo các biến số cho phép tính:
    • Sử dụng @State để tạo các biến firstNumber và secondNumber (kiểu Int), khởi tạo giá trị ban đầu là 0.
    • Tạo giao diện hiển thị phép tính (ví dụ: "8 + 8") với font chữ lớn (largeTitle).
    • Sử dụng .onAppear để tạo giá trị ngẫu nhiên từ 1 đến 10 cho firstNumber và secondNumber khi giao diện xuất hiện.
  3. Thêm Emoji:
    • Tạo một mảng emojis chứa các emoji để hiển thị số lượng tương ứng với mỗi số trong phép tính.
    • Tạo một hàm setupEmojiString nhận vào một số nguyên và trả về một chuỗi các emoji được lặp lại theo số đó.
    • Tạo các biến @State là firstNumberEmojis và secondNumberEmojis để lưu trữ chuỗi emoji tương ứng.
    • Hiển thị các emoji này trên màn hình với font chữ lớn (size 80) và tự động thu nhỏ nếu cần.
    • Đặt các emoji và dấu cộng nằm giữa màn hình và thêm khoảng cách với phép tính phía dưới.
  4. Thêm Textfield:
    • Thêm một TextField để người dùng nhập kết quả.
    • Đặt font chữ của TextField là large title, căn giữa và có chiều rộng 60.
    • Tạo một overlay hình chữ nhật bo tròn xung quanh TextField để tạo viền.
    • Sử dụng bàn phím số (.numberPad) cho TextField.
  5. Thêm Button "Guess":
    • Thêm một Button có nội dung "Guess".
    • Đặt style của button là borderProminent.
    • Vô hiệu hóa button khi TextField rỗng bằng cách sử dụng modifier disabled với condition answer.isEmpty.
    • Căn giữa text trong TextField.
  6. Xử lý sự kiện khi nhấn nút "Guess":
    • Sử dụng @FocusState để theo dõi trạng thái focus của TextField , khi nhấp vào button thì ẩn bàn phím
    • Tính toán kết quả đúng.
    • Kiểm tra xem kết quả người dùng nhập vào có đúng không.
    • Nếu đúng:
      • Phát âm thanh "correct".
      • Hiển thị thông báo "Correct!" màu xanh lá.
    • Nếu sai:
      • Phát âm thanh "wrong".
      • Hiển thị thông báo "Sorry, the correct answer is [kết quả đúng]" màu đỏ.
    • Vô hiệu hóa TextField và button sau khi kiểm tra kết quả.
    • Tạo các biến @State để kiểm soát trạng thái vô hiệu hóa của TextField (textFieldIsDisabled) và button guess (guessButtonIsDisabled).
  7. Thêm Text hiển thị thông báo và button "Play Again":
    • Thêm một Text để hiển thị thông báo kết quả (ví dụ: "Correct!" hoặc "Sorry, the correct answer is ...").
    • Đặt font chữ lớn, in đậm và căn giữa cho Text.
    • Thêm nút "Play Again" chỉ hiển thị khi đã có kết quả.
    • Khi click vào button "Play Again", thực hiện:
      * Ẩn button "Play Again".
      * Làm trống TextField và message
      * Kích hoạt TextField và guess button.
      * Tạo phép tính mới với giá trị và emoji ngẫu nhiên.
    • Tạo hàm generateNewEquation để thực hiện việc này.

Chúc bạn thành công với việc xây dựng ứng dụng học toán thú vị này!