SwiftUI: Hướng dẫn khởi tạo project

Bài viết hướng dẫn bạn khởi tạo project SwiftUI và bonus tip: Khởi tạo base repository project phục vụ việc học 1 Framework hoặc ngôn ngữ mới.

SwiftUI: Hướng dẫn khởi tạo project

Sau khi Apple ra mắt hệ điều hành VisionOS, mình thực sự phấn khích khi thấy tương lai chúng ta có thể đeo kính Vision Pro và có thể điều khiển các ứng dụng, xem phim trên máy bay, tương tác trong thế giới 3D với cái kính đó. Vì vậy, mình nghĩ bạn cũng nên xem xét việc học thêm về iOS native (nếu trước giờ bạn chỉ code Flutter hoặc các ngôn ngữ khác) để đón đầu tương lai.

Và bạn có thể tạo các ứng dụng cho VisionOS thông qua SwiftUI - một framework mới của Apple cho việc xây dựng giao diện người dùng trên các nền tảng iOS, macOS, watchOS và tvOS. Bài viết này sẽ là khởi đầu cho các bài viết sắp tới khi mình viết về SwiftUI

Bạn có thể đọc thêm về SwiftUI thông qua bài viết bên dưới nhé! 🥳

SwiftUI là gì? Bạn có nên quan tâm đến SwiftUI trong năm 2023
SwiftUI được Apple ra mắt tại hội nghị WWDC 2019. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về SwiftUI, những ưu điểm, nhược điểm và developer có nên học SwiftUI hay không.

1. Chuẩn bị:

Để khởi tạo project SwiftUI, dưới đây là những yêu cầu bắt buộc để có thể lập trình SwiftUI bao gồm:

  • Hệ điều hành MacOS (hoặc máy Windows cài giả lập Hackintos. Tuy nhiên, nếu bạn cài giả lập thì máy tính nên có cấu hình mạnh xíu, ít nhất 8 GB RAM trở lên).
  • XCode (bạn sử dụng XCode phiên bản mới nhất càng tốt vì mỗi version mới Apple sẽ hỗ trợ bạn nhiều hơn).
  • Base project SwiftUI, đây là cách mình hay làm để tự học 1 cái gì đó mới trong lập trình. Bài viết này mình cũng sẽ hướng dẫn bạn làm cái đó luôn nhé!
  • Tài khoản Github (Gitlab cũng được) để quản lý Base project.

Sau khi bạn đã chuẩn bị xong hết thì mời bạn qua phần khởi tạo project SwiftUI nhé!

2. Khởi tạo project SwiftUI:

Đầu tiên, bạn hãy khởi động XCode lên. Có 2 "cách" để bạn khởi tạo:

  • Cách 1: Bạn nhấn ở thanh công cụ ở góc trái nhấn chọn File -> New -> Project.
  • Cách 2: Bạn nhấn vào Quick Action (hình bên dưới mình có khoanh đỏ) để khởi tạo project.

Dù bạn có chọn cách 1 hay cách 2 thì sau khi nhấn vào XCode sẽ chuyển chúng ta sang màn hình mới và bật pop-up như hình dưới:

Tiếp theo bạn cứ nhấn Next nhé! Sau đó, bạn điền hết các thông tin cần thiết cho project của mình, bạn có thể tham khảo thông tin ở ảnh dưới. Sau đó, bạn tiếp tục nhấn Next và chọn nơi lưu folder project của chúng ta nha.

Sau khi khởi tạo project thành công, bạn sẽ thấy tổng thể giao diện như ảnh bên dưới. Điều tuyệt vời của SwiftUI là bạn không cần phải start máy ảo mà chúng ta có thể preview trực tiếp UI trên Editor luôn bằng cách nhấn vào nút Play.

Giờ bạn sửa nhẹ text thì UI của chúng ta cũng tự động Hot Reload luôn, quá xịn xò 🥳

3. Bonus tip: Khởi tạo base repository project:

Ở phần này, mình sẽ giới thiệu cho bạn cách mình dùng 1 repository làm base project để học 1 Framework hoặc ngôn ngữ nào đó mới. Mình đã áp dụng cách này để học React Native, Flutter, iOS và ReactJS vô cùng hiệu quả.

Trước khi đi vào chi tiết, mình cũng muốn chia sẻ với bạn lý do tại sao mình làm thế. Đặt trường hợp bạn đã biết code rồi, muốn tìm hiểu thêm về iOS. Yes lúc này bạn sẽ lên google search ra được 1 đống khoá học, bao gồm trả phí và free. Ok với sự hào hứng ban đầu bạn sẽ lao vào khởi tạo project như các tus hướng dẫn xong đó cứ mỗi course (hoặc mỗi project) bạn lại tạo n project (hoặc reposioty).

Cách trên có 1 nhược điểm là cứ mỗi lần bạn tạo project mới, máy tính bạn lại mất đi một phần dung lượng lưu trữ và tốn time ngồi khởi tạo. Do đó, để tiết kiệm thời gian và công sức, mình sẽ gom toàn bộ lại thành 1 repository duy nhất để tái sử dụng nhiều nhất có thể. Hình bên dưới là cách mình tạo repository để phục vụ việc "khám phá" của mình.

Ok giờ mình back lại phần chính. Tương tự như mình các bạn lên Github create new repository mới nhé! Bạn đặt tên gì cũng được không cần giống mình đâu nha.

Ok sau đó bạn vào folder project mình mới tạo khi nãy, commit các file lên repository vừa tạo đi nhé!

Và kể từ bây giờ, mình sẽ set nhánh main làm nhánh mặc định của chúng ta. Bất cứ khi nào bạn muốn thực hiện 1 dự án mới với SwiftUI, tất nhiên là chỉ để học thui nhé, bạn cứ nhảy về nhánh main và tạo nhánh mới từ đây. Ảnh dưới là 1 ví dụ khi mình học ReactJS.

4. Tổng kết:

Mình mong là sau bài viết này bạn có thể khởi tạo project SwiftUI và bắt đầu tìm hiểu SwiftUI từ bây giờ. Cảm ơn bạn đã đọc đến đây nhé!