07/09/2018, 10:34

Tạo Ứng Dụng Đơn Giản Với Xcode

Bài học này giúp bạn làm quen với Xcode, công cụ mà được các lập trình viên iOS sử dụng để viết các ứng dụng mobile. Qua bài học bạn sẽ dần quen thuộc với cấu trúc của một dự án trong Xcode, làm quen với các thành phần khác nhau trong Xcode. Trong suốt bài học, bạn sẽ bắt đầu thực hiện một đơn giản ...

Bài học này giúp bạn làm quen với Xcode, công cụ mà được các lập trình viên iOS sử dụng để viết các ứng dụng mobile. Qua bài học bạn sẽ dần quen thuộc với cấu trúc của một dự án trong Xcode, làm quen với các thành phần khác nhau trong Xcode. Trong suốt bài học, bạn sẽ bắt đầu thực hiện một đơn giản là giao diện người dùng (User Interface) cho 1 ứng dụng FoodTracker và xem nó được hiển thị như thế nào trong chương trình mô phỏng Simulator của Xcode. Khi bạn đã hoàn tất, ứng dụng của Foodtracker sẽ giống như sau:

Ứng dụng FoodTracker với Swift

Mục Tiêu Bài Học

Vào cuối của bài học, bạn sẽ có thể:

  • Tạo một dự án trong Xcode
  • Làm quen với các thành phần (component) khác nhau trong Xcode
  • Mở tập tin trên cửa sổ Xcode và di chuyển giữa các tập tin trong Xcode
  • Chạy ứng dụng trong mô phỏng sử dụng Xcode simulator

Tạo Dự Án Trong Xcode

Xcode là một IDE và nó cung cấp một số template mẫu để giúp các lập trình viên phát triển các loại ứng dụng iOS phổ biến như các trò chơi, các ứng dụng tab-based mà người dùng sẽ di chuyển qua các màn hình sử dụng các tab (ví dụ về ứng dụng tab-based như Gmail hay ứng dụng về thời tiết), hay các ứng dụng theo kiểu bảng table-views-based application... Khi sử dụng Xcode thì tất cả các mẫu trên sẽ đều được cấu hình sẵn và Xcode cũng cung cấp cho bạn một giao diện người dùng cơ bản và tạo ra vài tập tin ban đầu để có thể bắt đầu phát triển ứng dụng. Đối với bài học này, bạn sẽ bắt đầu với các mẫu cơ bản nhất: Single View Application.

Để tạo một dự án mới

Mở Xcode từ thư mục /Applications hoặc có thể mở Xcode nhanh bằng cách gõ tổ hợp CMD + K và tìm chương trình này sử dụng Spotlight Search. Sau khi Xcode khởi động xong thì 1 cửa sổ chào mừng sẽ xuất hiện.

Màn hình sau khi khởi động Xcode

Nếu như cửa sổ hiển thị của bạn khác với hình trên mà thay vào đó là một cửa sổ bao gồm một số các dự án thì bạn cũng đừng lo lắng. Rất có thể bạn đã từng tạo một dự án với Xcode trước đó và bạn cũng chỉ cần nhấp vào chọn một dự án trong danh sách dự án hiện ra hoặc tạo dự án mới như bước hướng dẫn tiếp theo đây.

Trong cửa sổ chào mừng ở trên, nhấn vào Create a new Xcode project (hoặc chọn File> New> Project).

Xcode sẽ mở ra một cửa sổ mới và trong cửa sổ này sẽ có một hộp thoại để bạn có thể chọn mẫu template của ứng dụng.

Trong menu iOS ở bên trái của hộp thoại, bạn chọn Application.

Trong khu vực chính của hộp thoại, nhấp Single View Applicaiton và sau đó nhấp vào Next.

Chọn template cho dự án

Trong hộp thoại xuất hiện tiếp theo, sử dụng các giá trị sau đây để cấu hình tên cho ứng dụng của bạn và cài đặt các tùy chọn bổ sung khác cho dự án của bạn:

  • Product Name: Tên sản phẩm đặt là FoodTracker. Xcode sử dụng tên sản phẩm bạn nhập vào để đặt tên dự án của bạn và cho ứng dụng.
  • Organization Name: Tên của tổ chức mà bạn làm việc cho hoặc tên của chính bạn. Bạn có thể để trống mục này.
  • Organization Identifier: Nhận dạng tổ chức. Giá trị này dùng để nhận dạng tổ chức của bạn và phân biệt với các tổ chức, cá nhân khác. Nếu bạn không, sử dụng com.example .
  • Bundle Identifier: Giá trị này được tự động tạo ra dựa trên tên sản phẩm của bạn và nhận dạng tổ chức.
  • Ngôn ngữ: Swift
  • Devices: Universal. Một ứng dụng Universal (toàn cầu) là một ứng dụng có thể chạy được trên cả iPhone và iPad.
  • User Core Data: Không chọn.
  • Include Unit Tests: Chọn.
  • Include UI Tests: Không chọn.

Cấu hình ứng dụng trên Xcode

  1. Nhấn Next.
  2. Trong hộp thoại xuất hiện, chọn vị trí để lưu dự án của bạn và nhấp vào nhấp Create.

Xcode mở dự án mới của bạn trong 1 cửa sổ không gian làm việc hay workspace .

Xcode workspace

Trong cửa sổ không gian làm việc này, bạn có thể thấy một tam giác cảnh báo màu vàng với nội dung No code signing identities found.. Cảnh báo này có nghĩa là bạn chưa cài đặt Xcode đúng để phát triển ứng dụng iOS, nhưng đừng lo lắng, bạn có thể hoàn thành các bài học mà không cần phải làm điều đó. Code Signing được sử dụng chủ yếu khi chúng ta cần đẩy ứng dụng lên kho ứng dụng Apple Store.

Làm Quen Với Xcode

Xcode bao gồm mọi thứ bạn cần để tạo ra một ứng dụng. Nó không chỉ tổ chức các tập tin để tạo ra một ứng dụng mà còn cung cấp một trình biên dịch compiler, một trình gỡ lỗi debugger mạnh mẽ và các thành phần (component) khác cho phép bạn xây dựng và chạy ứng dụng.

Bạn hãy bỏ ra vài phút để làm quen với các thành phần chính trong cửa sổ không gian làm việc với Xcode. Chúng ta sẽ sử dụng các khu vực được xác định trong cửa sổ bên dưới trong suốt bài học. Đừng cảm thấy bối rối hi bạn nhìn đầu tiên, mỗi khu vực này sẽ được mô tả chi tiết hơn khi bạn cần phải sử dụng nó.

Cửa sổ giao diện Xcode

Chạy Simulator

Bởi vì chúng ta sẽ phát triển ứng dụng dự án dựa trên một mẫu template có sẵn nên Xcode sẽ giúp chúng ta cấu hình môi trường cơ bản cho ứng dụng. Mặc dù bạn sẽ không cần phải viết bất kỳ đoạn mã nào bạn vẫn có thể tạo và chạy 1 ứng dụng mẫu Single View Application mà không cần phải cấu hình thêm nữa.

Để xây dựng và chạy ứng dụng chúng ta sẽ sử dụng chương trình mô phỏng simulator có trong Xcode. Simulator cung cấp cho bạn một cái nhìn trực quan về cách ứng dụng của bạn sẽ hoạt động như thế nào nếu nếu nó được chạy trên một thiết bị thực.

Simulator có thể mô hình hóa nhiều loại thiết bị (device) khác nhau như iPad, iPhone và với kích thước màn hình khác nhau của các device này. Do đó bạn có thể mô phỏng cách ứng dụng của bạn chạy như thế nào trên tất cả các thiết bị khác nhau. Trong bài học này, chúng ta sử dụng trình mô phỏng cho thiết bị iPhone 6.

Để chạy ứng dụng của bạn trong chươn trình mô phỏng simulator

  1. Trong menu Scheme trong thanh công cụ Xcode như hình dưới đây chọn iPhone 6. Với trình đơn Scheme chúng ta có thể chọn Simulator hoặc loại thiết bị mà bạn muốn chạy ứng dụng của bạn trên đó. Hãy chắc chắn rằng bạn chọn iPhone 6 Simulator thay vì một thiết bị iOS nào khác.

Giao diện Xcode

  1. Nhấp vào nút Run, nằm ở góc trên bên trái của thanh công cụ Xcode.

Giao diện Xcode

Ngoài ra bạn cũng có thể chọn Product > Run (hoặc nhấn Command + R).

Nếu bạn chạy một ứng dụng mô phỏng ở lần đầu tiên, Xcode sẽ hỏi bạn có muốn kích hoạt chế độ dành cho nhà phát triển trên máy Mac của bạn hay không. Chế độ dạnh cho nhà phát triển (developer mode) cho phép Xcode có thể truy cập vào các tính năng để gỡ lỗi nào đó mà không yêu cầu bạn phải nhập mật khẩu cho mỗi lần truy cập. Bạn có thể quyết định xem có muốn kích hoạt chế độ nhà phát triển hay không và làm theo hướng dẫn tiếp theo sau đây.

Giao diện Xcode

Nếu bạn chọn không bật chế độ danh cho nhà phát triển, bạn có thể sẽ được yêu cầu nhập mật khẩu của bạn sau này. Trong bài học này chúng tôi giả sử bạn kích hoạt chế độ dành cho nhà phát triển.

  1. Theo dõi thanh công cụ Xcode trong suốt quá trình build dự án được thực hiện.

Xcode hiển thị các thông báo về quá trình build dự án trong khung activity viewer nằm ở giữa thanh công cụ.

Sau khi kết thúc việc build dự án của bạn, trình mô phỏng simulator sẽ được tự động khởi động. Quá trình này có thể mất một vài phút để simulator có thể khởi động xong.

Simulator sẽ mở ứng dụng trong chế độ của iPhone, điều này được chúng ta cấu hình ở các bước phía trên. Trên màn hình mô phỏng thiết bị iPhone, trình mô phỏng simulator sẽ khởi chạy ứng dụng của bạn. Trước khi ứng dụng kết thúc việc khởi động, bạn sẽ thấy một màn hình hiển thị trong một thời gian ngắnvới tên của ứng dụng mà bạn đặt ở trện FoodTracker.

Ứng dụng Foodtracker

Sau đó, bạn sẽ thấy một màn hình giống như sau:

Ứng dụng Foodtracker

Kết thúc bước trên bạn đã hoàn tất việc tạo một ứng dụng theo kiểu Single View Application sử dụng Xcode. Mặc dù ứng dụng của bạn chưa làm được gì nhiều tuy nhiên việc bắt đầu bằng ứng dụng đơn giản như vậy sẽ giúp bạn hiểu được các thành phần khác nhau của Xcode và bạn có thể sẵn sàng tiếp cận những kiến thức phức tạp hơn sau này.

Cuối cùng để thoát Simulator bạn chọn Simulator > Quit Simulator (hoặc nhấn Command + Q).

0