Giờ làm việc

T2 - T7 8h30 - 18h00

Liên hệ

 

Hướng dẫn tạo app iOS cơ bản (P2) – Swift

Hướng dẫn tạo app iOS cơ bản – Tạo ứng dụng “Hello World” bằng ngôn ngữ Swift

Trong phần 1, chúng ta đã tham khảo được cách tạo ứng dụng MacOS chạy trên máy tính Mac (http://codefresher.vn/huong-dan-lap-trinh-app-ios-co-ban-hello-world/). Phần này, chúng ta sẽ tham khảo hướng dẫn cách tạo ứng dụng (app) iOS chạy trên iPhone, iPad bằng phần mềm XCode và ngôn ngữ Swift. Nội dung cụ thể như sau.

Bài viết được lược dịch: https://www.appcoda.com/learnswift/build-your-first-app.html

Ứng dụng đầu tiên của bạn

Ứng dụng đầu tiên của bạn, như được hiển thị trong hình 3-1, rất đơn giản và chỉ hiển thị nút “Hello World”. Khi người dùng nhấn nút, ứng dụng sẽ hiển thị thông báo chào mừng. Đó là nó. Vô cùng đơn giản nhưng nó giúp bạn khởi đầu hành trình lập trình iOS của mình.

Hình 3-1. Ứng dụng HelloWorld
Hình 3-1. Ứng dụng HelloWorld

Nhưng đây chỉ là một sự khởi đầu. Sau khi làm theo các hướng dẫn trong chương này, bạn sẽ tiếp tục cải thiện ứng dụng đầu tiên của mình để làm cho nó thú vị hơn như hình dưới đây.

Hình 3-2. Giao hàng cuối cùng của bạn
Hình 3-2. Kết quả cuối cùng của bạn

Bắt đầu

Đầu tiên, mở Xcode. Sau khi khởi chạy, Xcode hiển thị hộp thoại chào mừng. Từ đây, chọn “Create a new XCode project” để bắt đầu dự án mới.

Hình 3-3. Xcode - Hộp thoại chào mừng
Hình 3-3. Xcode – Hộp thoại chào mừng

Xcode hiển thị các mẫu dự án khác nhau để lựa chọn. Mỗi mẫu phục vụ các mục đích khác nhau và giúp bạn dễ dàng bắt đầu hơn với việc phát triển một loại ứng dụng cụ thể. Giả sử, nếu bạn muốn phát triển gói nhãn dán cho ứng dụng Tin nhắn, bạn sẽ sử dụng mẫu Sticker Pack App . Tuy nhiên, trong hầu hết các trường hợp, mẫu Single View Application được dùng để tạo ứng dụng iOS chạy trên iPhone, iPad. Vì vậy, chọn iOS> Single View Application và nhấp vào Next .

Hình 3-4. Lựa chọn mẫu dự án Xcode
Hình 3-4. Lựa chọn mẫu dự án Xcode

Điều này đưa bạn đến màn hình tiếp theo để điền vào tất cả các tùy chọn cần thiết cho dự án của bạn.

Hình 3-5. Tùy chọn cho dự án Hello World của bạn
Hình 3-5. Tùy chọn cho dự án Hello World của bạn

Bạn có thể điền vào các tùy chọn như sau:

  • Product Name: HelloWorld – Đây là tên ứng dụng của bạn.
  • Team: Cứ để nguyên như vậy. Bạn chưa thiết lập nhóm. Đối với ứng dụng đầu tiên của bạn, chỉ cần bỏ qua bước này.
  • Organization Name: AppCoda – Đó là tên của tổ chức của bạn. Nếu bạn không xây dựng ứng dụng cho tổ chức của mình, hãy sử dụng tên của bạn làm tên tổ chức.
  • Organization Identifier: com.appcoda – Thật ra tên miền được viết theo cách khác. Nếu bạn có một tên miền, bạn có thể sử dụng tên miền của riêng bạn. Nếu không, bạn có thể sử dụng “com. “. Ví dụ, tên của bạn là Pikachi. Điền vào định danh tổ chức là” com.pikachi “.
  • Bundle Identifier: com.appcoda.HelloWorld – Đây là số nhận dạng duy nhất của ứng dụng của bạn, được sử dụng trong quá trình gửi ứng dụng. Bạn không cần phải điền vào tùy chọn này. Xcode tự động tạo nó cho bạn.
  • Language: Swift – Xcode hỗ trợ cả Objective-C và Swift để phát triển ứng dụng. Vì cuốn sách này nói về Swift, chúng tôi sẽ sử dụng Swift để phát triển dự án.
  • Use Core Data:  [không được chọn] – Không chọn tùy chọn này. Bạn không cần Core Data cho dự án đơn giản này. Chúng tôi sẽ giải thích Core Data trong các chương sau.
  • Include Unit Tests: [không được chọn] – Không chọn tùy chọn này. Bạn không cần unit tests cho dự án đơn giản này.
  • Include UI Tests: [không được chọn] – Không chọn tùy chọn này. Bạn không cần UI tests cho dự án đơn giản này.

Nhấn Next để tiếp tục. Xcode sau đó hỏi bạn nơi lưu dự án “HelloWorld”. Chọn bất kỳ thư mục (ví dụ: Desktop) trên máy Mac của bạn. Nhấp vào “Create” để tiếp tục.

Hình 3-6. Chọn một thư mục và lưu dự án của bạn
Hình 3-6. Chọn một thư mục và lưu dự án của bạn

Sau khi bạn xác nhận, Xcode sẽ tự động tạo dự án “Hello World”. Màn hình sẽ trông giống như ảnh chụp màn hình được hiển thị trong hình 3- 7.

Hình 3- 7. Cửa sổ Xcode chính cho Dự án HelloWorld

Làm quen với không gian làm việc Xcode

Trước khi chúng ta bắt đầu triển khai ứng dụng Hello World, hãy dành vài phút để xem nhanh môi trường không gian làm việc Xcode. Trong khung bên trái là project navigator. Bạn có thể tìm thấy tất cả các tập tin dự án của bạn trong khu vực này. Phần trung tâm của không gian làm việc là khu vực editor. Bạn thực hiện tất cả các công cụ chỉnh sửa tại đây (chẳng hạn như chỉnh sửa cài đặt dự án, tệp mã nguồn, giao diện người dùng) trong khu vực này.

Tùy thuộc vào loại tệp, Xcode hiển thị cho bạn các giao diện khác nhau trong khu vực editor. Chẳng hạn, nếu bạn chọn ViewController.swift trong project navigator, Xcode sẽ hiển thị mã nguồn ở khu vực trung tâm (xem hình 3-8).

Hình 3-8. Không gian làm việc Xcode với Trình chỉnh sửa mã nguồn
Hình 3-8. Không gian làm việc Xcode với Trình chỉnh sửa mã nguồn

Nếu bạn chọn Main.storyboard, là tệp để lưu trữ giao diện người dùng, Xcode sẽ hiển thị cho bạn visual editor cho storyboard (xem hình 3-9).

Hình 3-9. Xcode Workspace với Storyboard Editor
Hình 3-9. Xcode Workspace với Storyboard Editor

Khung ngoài cùng bên phải là khu vực tiện ích (utility area). Khu vực này hiển thị các thuộc tính của tệp và cho phép bạn truy cập Quick Help (Trợ giúp nhanh). Nếu Xcode không hiển thị khu vực này, bạn có thể chọn nút ngoài cùng bên phải trong thanh công cụ (ở góc trên bên phải) để bật nó.

Hình 3-10. Hiển thị / ẩn các khu vực nội dung của không gian làm việc của bạn
Hình 3-10. Hiển thị / ẩn các khu vực nội dung của không gian làm việc của bạn

Nút xem giữa của bộ chọn chế độ xem được bỏ chọn theo mặc định. Nếu bạn nhấp vào nó, Xcode sẽ hiển thị khu vực Debug (gỡ lỗi) ngay bên dưới khu vực soạn thảo. Vùng Debug, như tên gọi của nó, được sử dụng để hiển thị các thông báo gỡ lỗi. Chúng ta sẽ nói về điều đó trong một chương sau, vì vậy đừng lo lắng nếu bạn không hiểu từng khu vực để làm gì.

Chạy ứng dụng của bạn lần đầu tiên

Cho đến bây giờ, chúng ta vẫn chưa viết một dòng mã nào. Thậm chí, bạn có thể chạy ứng dụng của mình bằng trình giả lập tích hợp. Điều này sẽ cung cấp cho bạn ý tưởng về cách xây dựng và kiểm tra ứng dụng của bạn trong Xcode. Trên thanh công cụ, bạn sẽ thấy nút Run.

Hình 3-11. Các nút chạy và dừng trong Xcode
Hình 3-11. Các nút chạy và dừng trong Xcode

Nút Run trong Xcode được sử dụng để xây dựng một ứng dụng và chạy nó trong trình giả lập được chọn. Theo mặc định, Trình mô phỏng được đặt thành iPhone 8 Plus . Nếu bạn nhấp vào nút iPhone 8 Plus , bạn sẽ thấy danh sách các trình giả lập có sẵn như iPhone 8 và iPhone X. Hãy chọn iPhone 8 làm trình giả lập và dùng thử.

Sau khi chọn, bạn có thể nhấp vào nút Run để tải ứng dụng của mình trong trình giả lập. Hình 3-12 cho thấy trình giả lập của iPhone 8.

Hình 3-12. Trình mô phỏng
Hình 3-12. Trình mô phỏng

Một màn hình trắng không có gì bên trong?! Điều đó là bình thường. Cho đến nay chúng ta chưa thiết kế giao diện người dùng hoặc viết bất kỳ dòng mã nào. Đây là lý do tại sao trình giả lập hiển thị một màn hình trống. Để dừng ứng dụng, chỉ cần nhấn nút * Stop * trên thanh công cụ. Hãy thử chọn một trình giả lập khác (ví dụ iPhone X) và chạy ứng dụng. Bạn sẽ thấy một giả lập khác xuất hiện trên màn hình.

  Mẹo nhanh: Chạy nhiều trình giả lập (iPhone 8, iPhone X, iPhone 11 v.v.) cùng một lúc đòi hỏi phải sử dụng thêm bộ nhớ trên máy Mac của bạn.  Nếu bạn không cần bất kỳ trình giả lập nào, bạn có thể chọn trình giả lập và nhấn lệnh + w để đóng nó. 

### Hướng dẫn nhanh về Trình tạo giao diện (Interface Builder). Bây giờ bạn đã có ý tưởng cơ bản về môi trường phát triển Xcode, hãy tiếp tục và thiết kế giao diện người dùng cho ứng dụng đầu tiên của bạn. Trong trình điều hướng dự án, chọn tệp `Main.storyboard`. Xcode sau đó đưa ra một trình soạn thảo trực quan cho bảng phân cảnh (storyboard), được gọi là Trình tạo giao diện (Interface Builder). Trình chỉnh sửa Interface Builder cung cấp một cách trực quan để bạn tạo và thiết kế giao diện người dùng của ứng dụng. Bạn không chỉ sử dụng nó để thiết kế chế độ xem (hoặc màn hình) riêng lẻ, nhà thiết kế bảng phân cảnh của Trình tạo giao diện cho phép bạn bố trí nhiều chế độ xem và xâu chuỗi chúng lại với nhau bằng các loại chuyển tiếp khác nhau, để tạo giao diện người dùng hoàn chỉnh. Tất cả những điều này có thể được thực hiện mà không cần viết một dòng mã nào cả.

  Scene là gì?   Một scene (cảnh) trong storyboard đại diện cho một bộ điều khiển xem và các khung nhìn của nó.  Khi phát triển ứng dụng iOS, lượt xem là các khối xây dựng cơ bản để tạo giao diện người dùng của bạn.  Mỗi loại khung nhìn có chức năng riêng.  Chẳng hạn, chế độ xem bạn tìm thấy trong bảng phân cảnh là chế độ xem để chứa các chế độ xem khác như nút, nhãn, chế độ xem hình ảnh, v.v.

 Một bộ điều khiển khung nhìn được thiết kế để quản lý các khung nhìn và các khung nhìn liên quan của nó (ví dụ nút và nhãn).  Nếu bạn bối rối về mối quan hệ giữa các khung nhìn và các bộ điều khiển xem, đừng lo lắng.  Chúng ta sẽ thảo luận về cách một khung nhìn và trình điều khiển xem hoạt động cùng nhau trong các chương sau. 

Giao diện phác thảo tài liệu của trình soạn thảo Interface Builder cho bạn thấy tổng quan về tất cả các cảnh và các đối tượng trong một cảnh cụ thể. Chế độ xem phác thảo rất hữu ích khi bạn muốn chọn một đối tượng cụ thể trong bảng phân cảnh. Nếu chế độ xem phác thảo không xuất hiện trên màn hình, hãy sử dụng nút chuyển đổi (xem hình 3-14) để bật / tắt chế độ xem phác thảo.

Cuối cùng, có một thanh cấu hình trong Trình tạo giao diện. Để hiển thị thanh, đặt con trỏ chuột vào View as: iPhone 8 , sau đó nhấp một lần vào thanh đó. Thanh cấu hình được giới thiệu lần đầu tiên trong Xcode 8 cho phép bạn xem trước giao diện người dùng ứng dụng của mình trên các thiết bị khác nhau. Hơn nữa, bạn có thể sử dụng các nút +- để phóng to / thu nhỏ bảng phân cảnh. Chúng ta sẽ nói về tính năng mới này sau.

Hình 3-15. Thanh cấu hình trong Xcode
Hình 3-15. Thanh cấu hình trong Xcode

Thiết kế giao diện người dùng

Bây giờ chúng ta sẽ thiết kế giao diện người dùng của ứng dụng. Đầu tiên, chúng ta sẽ thêm nút Hello World vào giao diện. Nhấp vào nút thư viện Object để hiển thị thư viện Object. Sau đó, bạn có thể chọn bất kỳ đối tượng UI nào và kéo và thả chúng vào giao diện. Nếu bạn đang ở chế độ xem giao diện của thư viện Object, bạn có thể nhấp vào bất kỳ đối tượng nào để hiển thị mô tả chi tiết.

Được rồi, đã đến lúc thêm một nút để xem. Tất cả những gì bạn cần làm là kéo một đối tượng Nút từ thư viện Object vào giao diện.

Hình 3-16. Kéo nút để xem
Hình 3-16. Kéo nút để xem

Khi bạn kéo đối tượng Button vào giao diện, bạn sẽ thấy một bộ hướng dẫn ngang và dọc nếu Button được đặt ở giữa. Dừng kéo và nhả Button của bạn để đặt đối tượng Button ở đó.

Tiếp theo, hãy đổi tên Button. Để chỉnh sửa nhãn của Button, nhấp đúp vào Button đó và đặt tên là “Hello World”. Sau khi thay đổi, bạn có thể cần phải căn giữa Button một lần nữa.

Hình 3-17. Đổi tên nút
Hình 3-17. Đổi tên nút

Trong trường hợp các từ bị cắt ngắn, bạn có thể thay đổi kích thước Button để làm cho nó phù hợp hoặc nhấn lệnh + = để cho Xcode thay đổi kích thước cho bạn.

Hình 3-18. Thay đổi kích thước nút Hello World
Hình 3-18. Thay đổi kích thước nút Hello World

Tuyệt quá! Bây giờ bạn đã sẵn sàng để kiểm tra ứng dụng của bạn. Chọn trình giả lập iPhone 8 và nhấn nút Run để thực hiện dự án, bạn sẽ thấy nút Hello World trong trình giả lập như trong hình 3-19. Thật tuyệt phải không?

Hình 3-19. Ứng dụng Hello World có nút
Hình 3-19. Ứng dụng Hello World có nút

Tuy nhiên, khi bạn nhấn vào nút, nó không hiển thị gì. Chúng ta sẽ cần thêm một vài dòng mã để hiển thị thông báo “Hello, World!”.

  Ghi chú nhanh: Đây là tính năng tốt của nền tảng phát triển iOS.  Mã (Code) và giao diện người dùng (UI) của một ứng dụng được tách riêng.  Bạn có thể tự do thiết kế giao diện người dùng của mình trong Trình tạo giao diện (Interface Builder) và tạo mẫu cho ứng dụng mà không cần viết bất kỳ dòng mã nào. 

Viết code cho nút Hello World

Bây giờ bạn đã hoàn thành giao diện người dùng của ứng dụng HelloWorld, đã đến lúc viết một số mã (code). Trong trình điều hướng dự án (Project Navigator), bạn tìm file ViewController.swift . Vì ban đầu chúng ta đã chọn mẫu dự án Single View Application , Xcode đã tạo một lớp ViewController trong tệp ViewController.swift . Tập tin này được liên kết với view controller trong storyboard (bảng phân cảnh). Để hiển thị thông báo khi nhấn nút, chúng ta sẽ thêm một số mã vào file.

  Swift so với Objective-C   Nếu bạn đã viết mã trong Objective-C trước đây, một thay đổi lớn trong Swift là hợp nhất tiêu đề (.h) và tệp triển khai (.m).  Tất cả thông tin của một lớp cụ thể hiện được lưu trữ trong một tệp .swift duy nhất. 

Chọn tệp ViewController.swift và khu vực soạn thảo sẽ hiển thị ngay mã nguồn. Nhập các dòng mã sau vào lớp ViewController :

@IBAction func showMessage(sender: UIButton) {
     let alertController = UIAlertController(title: "Welcome to My First App", message: "Hello World", preferredStyle: UIAlertController.Style.alert)
     alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))
     present(alertController, animated: true, completion: nil)
 }
  Lưu ý: Tôi khuyến khích bạn nhập mã, thay vì sao chép và dán mã. 

Mã nguồn của bạn sẽ trông như thế này sau khi chỉnh sửa:

import UIKit
 class ViewController: UIViewController {
 override func viewDidLoad() {     super.viewDidLoad()     // Do any additional setup after loading the view, typically from a nib. } @IBAction func showMessage(sender: UIButton) {     let alertController = UIAlertController(title: "Welcome to My First App", message: "Hello World", preferredStyle: UIAlertController.Style.alert)     alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler: nil))     present(alertController, animated: true, completion: nil) }
 }

Những gì bạn vừa làm được thêm một phương thức showMessage(sender: UIButton) trong lớp ViewController . Mã Swift trong phương thức là mới đối với bạn. Tôi sẽ giải thích nó cho bạn trong chương tiếp theo. Trong khi đó, chỉ coi showMessage(sender: UIButton) là một hành động. Khi hành động này được gọi, khối mã sẽ hướng dẫn iOS hiển thị thông báo “Hello World” trên màn hình.

  Lưu ý: Bạn có để ý rằng một số dòng mã đã được bắt đầu bằng "//" không?  Trong Swift, nếu dòng có tiền tố là "//", dòng mã đó sẽ trở thành một nhận xét, sẽ không được thực thi. 

Bạn có thể thử chạy dự án trong trình giả lập. Hành vi của ứng dụng vẫn giống nhau. Khi bạn nhấn vào nút, nó vẫn không hiển thị cho bạn bất kỳ phản hồi nào. Lý do là chúng tôi chưa thực hiện kết nối giữa nút và mã.

Kết nối giao diện người dùng với mã

Làm thế nào chúng ta có thể thiết lập mối quan hệ giữa mã nguồn của chúng ta và giao diện người dùng?

Để được cụ thể cho bản demo này, câu hỏi là:

– Làm cách nào chúng ta có thể kết nối nút “Hello World” trong bảng phân cảnh với phương thức showMessage(sender: UIButton) trong lớp ViewController ?

Bạn cần thiết lập kết nối giữa nút “Hello World” và phương thức showMessage(sender: UIButton) mà bạn vừa thêm, để ứng dụng phản hồi khi ai đó chạm vào nút Hello World.

Bây giờ, chọn Main.storyboard để quay lại Trình tạo giao diện. Bấm và giữ phím điều khiển của bàn phím, nhấp vào nút “Hello World” và kéo nó vào biểu tượng Trình điều khiển xem. Nhả cả hai nút (chuột + bàn phím) và cửa sổ bật lên hiển thị tùy chọn showMessageWithSender: bên dưới Sự kiện đã gửi. Chọn nó để tạo kết nối giữa nút và showMessageWithSender: action.

Hình 3-20. Kéo đến biểu tượng Trình điều khiển xem (bên trái), menu bật lên xuất hiện khi nhả các nút (phải)
Hình 3-20. Kéo đến biểu tượng Trình điều khiển xem (bên trái), menu bật lên xuất hiện khi nhả các nút (phải)

Kiểm tra ứng dụng của bạn

Đó là nó! Bây giờ bạn đã sẵn sàng để thử nghiệm ứng dụng đầu tiên của bạn. Chỉ cần nhấn nút Run . Nếu mọi thứ đều chính xác, ứng dụng của bạn sẽ chạy đúng trong trình giả lập. Lần này, ứng dụng sẽ hiển thị thông báo chào mừng khi bạn nhấn nút Hello World.

Hình 3-21. Ứng dụng Hello World
Hình 3-21. Ứng dụng Hello World

Thay đổi màu nút

Như đã đề cập trước đó, bạn không cần phải viết mã để tùy chỉnh điều khiển UI. Ở đây, tôi muốn cho bạn thấy việc thay đổi các thuộc tính (ví dụ như màu sắc) của nút dễ dàng như thế nào.

Chọn nút “Hello World” và sau đó nhấp vào Attributes inspector trong khu vực Utility. Bạn sẽ có thể truy cập các thuộc tính của nút. Tại đây, bạn có thể thay đổi phông chữ, màu văn bản, màu nền, v.v … Hãy thử thay đổi màu văn bản (trong phần Nút) thành màu trắng và nền (cuộn xuống và bạn sẽ tìm thấy nó trong phần View) thành màu đỏ hoặc bất kỳ màu nào bạn muốn

Hình 3-22. Thay đổi màu của nút Hello World
Hình 3-22. Thay đổi màu của nút Hello World

Chạy dự án một lần nữa và xem những gì bạn nhận được.

Bài tập số 1 của bạn

Bạn không chỉ có thể thay đổi màu của nút, bạn có thể sửa đổi loại và kích thước phông chữ trong Attributes inspector bằng cách đặt tùy chọn Font . Nhiệm vụ của bạn là tiếp tục làm việc với dự án và tạo giao diện người dùng như hình 3-23. Khi người dùng nhấn bất kỳ nút nào, ứng dụng sẽ hiển thị cùng thông báo Hello World.

Hình 3-23. Thiết kế ứng dụng này
Hình 3-23. Thiết kế ứng dụng này

Để cung cấp cho bạn một số gợi ý, đây là những điều bạn sẽ cần phải làm để tạo ứng dụng như hình trên:

  1. Thay đổi kích thước nút “Hello World” và thay đổi kích thước phông chữ của nó thành 70 points . Thay đổi tiêu đề từ Hello World thành 1 emoji (biểu tượng cảm xúc) nào đó. Để nhập các ký tự biểu tượng cảm xúc, bạn có thể giữ phím control + và sau đó nhấn phím cách.
  2. Thêm ba nút nữa. Mỗi nút có một biểu tượng biểu tượng cảm xúc như tiêu đề của nó.
  3. Thiết lập kết nối giữa các nút và phương thức showMessage(sender: UIButton) .

Ứng dụng của bạn đã được thực hiện xong.

Tổng kết

Như vậy, qua hướng dẫn trên chúng ta đã biết cách tạo ứng dụng iOS chạy trên iPhone, iPad và thực hiện một số công việc cơ bản khi lập trình app iOS: chạy ứng dụng, debug (gỡ lỗi) ứng dụng, xây dựng giao diện cho ứng dụng, viết mã code (swift) cho các chức năng của ứng dụng. Bạn có thể thấy qua ví dụ này, việc lập trình ứng dụng iOS không hề khó, tuy nhiên nó cần thời gian đầu tư tìm hiểu cách sử dụng các công cụ hỗ trợ như XCode, Interface Builder trong XCode để xây dựng giao diện, lập trình tính năng ứng dụng bằng ngôn ngữ Swift v.v. Bạn tham khảo các bài sau để được hướng dẫn thêm hoặc đăng ký tham gia khoá học lập trình iOS tại trung tâm Codefresher.vn để được giảng viên hỗ trợ, hướng dẫn trực tiếp nhé.

-NMC-

Comments are closed.
Giờ làm việc

  • Thứ 28h30 - 18h00
  • Thứ 38h30 - 18h00
  • Thứ 48h30 - 18h00
  • Thứ 58h30 - 18h00
  • Thứ 68h30 - 18h00
  • Thứ 78h30 - 12h00
  • Chủ nhậtĐóng cửa