[Video Summary] Mid Term Solution - Wu Tang Coder Name Generator App

Mô tả nhanh

Video này hướng dẫn xây dựng một ứng dụng tạo tên lập trình viên theo phong cách Wu-Tang Clan trên iOS, sử dụng SwiftUI. Ứng dụng này sẽ lấy tên người dùng nhập vào, tạo một tên "độc" dựa trên hai mảng tên có sẵn, và có các hiệu ứng UI/UX đẹp mắt.

Video

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

Mô tả chi tiết

Video này hướng dẫn xây dựng một ứng dụng tạo tên lập trình viên theo phong cách Wu-Tang Clan trên iOS, sử dụng SwiftUI. Ứng dụng này sẽ lấy tên người dùng nhập vào, tạo một tên "độc" dựa trên hai mảng tên có sẵn, và có các hiệu ứng UI/UX đẹp mắt.

Các bước thực hiện:

1. Khởi tạo dự án:

   • Tạo một project mới Xcode với tên "WuTang App".
   • Thêm các file tài nguyên (icon, launch screen, hình ảnh) vào Assets.xcassets.
   • Cấu hình launch screen sử dụng ảnh launch-screen.

2. Xây dựng UI:

   • Tạo Text hiển thị "Wu-Tang" và "Coder Name Generator" ở đầu màn hình, font chữ in đậm màu vàng, nền đen.
   • Thêm ImageView hiển thị ảnh wutang ở dưới cùng.
   • Thêm TextField để người dùng nhập tên, có placeholder, font chữ và border.
   • Thêm Button để kích hoạt tạo tên, có chữ "Get It!", ảnh wutang bên cạnh và màu sắc tùy chỉnh.
   • Thêm hai TextView để hiển thị tên tĩnh "Your Wu-tang coder name is:" và tên Wu-tang được tạo, định dạng font chữ và căn lề.

3. Tạo logic tạo tên Wu-Tang:

   • Tạo hai mảng FirstColumn và SecondColumn chứa các từ để tạo tên (lấy từ file Google Doc).
   • Tạo hàm getWuangName(name: String) -> String để tạo tên Wu-Tang:
     • Lấy chữ cái đầu của tên người dùng.
     • Tìm vị trí của chữ cái đó trong mảng FirstColumn, chọn phần tử ngay trước (ví dụ: tên bắt đầu bằng 'J' thì sẽ chọn 'I'). Nếu chữ cái đầu là 'A', thì chọn phần tử 'Z'.
     • Chọn ngẫu nhiên một phần tử từ SecondColumn.
     • Trả về chuỗi kết hợp từ hai phần tử trên.
   • Gọi hàm getWuangName khi nhấn Button, cập nhật TextView hiển thị kết quả.

4. Xử lý bàn phím và hiệu ứng:

   • Sử dụng @FocusState để quản lý việc hiện/ẩn bàn phím.
   • Khi TextField được focus, ẩn ảnh Wu-Tang và xóa các text cũ.
   • Khi button được nhấn, ẩn bàn phím. Khi bàn phím ẩn, hiển thị lại ảnh Wu-tang và cập nhật tên Wu-tang.

5. Cải thiện UX:

   • Vô hiệu hóa button nếu TextField rỗng.
   • Thay đổi text hiển thị của TextView static sau khi tạo tên.
   • Thêm xử lý nếu người dùng nhập lowercase sẽ convert sang uppercase.

Chúc bạn thành công và có những phút giây lập trình hiệu quả!

Tags

• SwiftUI
• Swift
• Video Summary