MakeXYZ Fun

[Video Summary] Swift Mid Term Solution - Olympics Playground & App

Admin -

Mô tả nhanh

Video này trình bày lời giải cho hai trong ba bài tập giữa kỳ môn lập trình iOS/macOS với Swift và SwiftUI. Bài tập bao gồm một playground để thực hành các khái niệm Swift cơ bản và một ứng dụng hiển thị logo Olympic, sử dụng các hàm đã xây dựng trong playground.

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 hai trong ba bài tập giữa kỳ môn lập trình iOS/macOS với Swift và SwiftUI. Các bài tập bao gồm một playground (sân chơi) để thực hành các khái niệm Swift cơ bản và một ứng dụng hiển thị logo Olympic, sử dụng các hàm đã xây dựng trong playground.

Phần 1: Playground

  1. Tạo Playground và Mảng Logos:
    • Tạo một playground mới tên "Olympics".
    • Thêm comment tên của bạn vào đầu file.
    • Xóa hết code, chỉ giữ lại comment và import.
    • Thêm comment "q1 logos array".
    • Tạo mảng logos chứa các chuỗi URL từ trình duyệt.
  2. In Mảng Logos:
    • Thêm comment "Q2 D print logos array".
    • Sử dụng forEach để in từng phần tử của mảng logos trên một dòng.
  3. Hàm getImageName:
    • Thêm comment "Q3 get image name".
    • Tạo hàm getImageName nhận một tham số logoName (string) và trả về một string sau khi loại bỏ đuôi mở rộng (extension) .png, .jpg, .jpeg (nếu có).
    • Sử dụng phương thức replacingOccurrences(of:with:) để loại bỏ đuôi mở rộng.
    • Gọi hàm getImageName cho từng phần tử trong mảng logos và in kết quả.
  4. Hàm getYear:
    • Thêm comment "Q4 get year".
    • Tạo hàm getYear nhận tham số logoName (string) và trả về string chứa năm (ví dụ: 2024).
    • Sử dụng phương thức components(separatedBy:) để tách chuỗi theo dấu '-' và lấy phần tử đầu tiên (năm).
    • Gọi hàm getYear cho từng phần tử trong mảng logos và in kết quả.
  5. Hàm getCountry:
    • Thêm comment "Q5 get country".
    • Tạo hàm getCountry nhận tham số logoName (string) và trả về string chứa tên quốc gia, viết hoa chữ cái đầu (ngoại trừ "USA" viết hoa toàn bộ).
    • Sử dụng components(separatedBy:) để lấy phần tử cuối cùng (quốc gia).
    • Gọi hàm getImageName để loại bỏ đuôi mở rộng trong tên nước trước khi thực hiện viết hoa.
    • Nếu là USA sẽ viết hoa toàn bộ, các nước khác viết hoa chữ cái đầu.
    • Gọi hàm getCountry cho từng phần tử trong mảng logos và in kết quả.
  6. Hàm getCity:
    • Thêm comment "Q6 get city".
    • Tạo hàm getCity nhận tham số logoName (string) và trả về string chứa tên thành phố, viết hoa chữ cái đầu của mỗi từ.
    • Sử dụng components(separatedBy:) để tách chuỗi, loại bỏ phần tử đầu và cuối, sau đó lấy các phần còn lại và viết hoa chữ cái đầu.
    • Gọi hàm getCity cho từng phần tử trong mảng logos và in kết quả.

Phần 2: Ứng dụng iOS

  1. Tạo Dự Án Xcode:
    • Tạo dự án Xcode mới tên "Summer Olympics".
    • Copy mảng logos từ playground vào ContentView.
    • Tạo biến logoNumber kiểu State và khởi tạo là 22 (vị trí của Paris 2024 trong mảng logos).
  2. Thêm Ảnh vào Assets:
    • Tải các ảnh từ đường link trong video vào thư mục Files.
    • Kéo tất cả các ảnh vào Assets.xcassets trong Xcode (cả launch screen và icon).
    • Thiết lập launch screen trong phần "Info".
  3. Thêm Các Hàm từ Playground
    • Copy các hàm getImageName, getYear, getCountry, getCity từ playground vào trong struct ContentView.
  4. Xây dựng giao diện:
    • Xóa các view mặc định trong VStack.
    • Thêm Text hiển thị tiêu đề "Olympic logos" với font lớn và chữ đậm.
    • Thêm một Spacer để đẩy tiêu đề lên trên đầu.
    • Thêm Image hiển thị logo Olympic, sử dụng getImageName để lấy tên ảnh tương ứng.
    • Thêm một Spacer để đẩy image vào giữa.
    • Thêm Text hiển thị thành phố và quốc gia, sử dụng kết hợp các hàm getCity và getCountry.
    • Thêm Text hiển thị năm , sử dụng hàm getYear.
    • Đặt hai Text vừa tạo trong một VStack, style cho cả VStack để không lặp lại code style của từng Text.
    • Thêm 2 button (trái/phải) để chuyển logo, sử dụng các icon hệ thống.
    • Bố trí hai button cạnh nhau trong HStack.
  5. Xử lý sự kiện:
    • Button trái: Giảm logoNumber đi 1.
    • Button phải: Tăng logoNumber lên 1.
    • Disable button trái khi logoNumber là 0 (đầu mảng).
    • Disable button phải khi logoNumber là logos.count - 1 (cuối mảng).
    • Sửa lỗi hiển thị nước, sửa lại getCity thành getCountry.

Chúc các bạn thành công!