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-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-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
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
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.
Làm quen với không gian làm việc Xcode
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
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
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
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
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
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.
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+ và - để 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
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
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
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
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
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() 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) 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 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 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 Để 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:
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.
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ó.
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
-NMC-