Xây dựng ứng dụng iPhone thứ hai – Phần 1


Sau chuỗi bài viết xây dựng ứng dụng iPhone đầu tiên, chúng tôi tiếp tục giới thiệu tới các bạn những hướng dẫn để xây dựng ứng dụng iPhone thứ hai. Trong bài hướng dẫn này, các bạn sẽ tìm hiểu những kỹ thuật lập trình iOS nâng cao hơn so ứng dụng iPhone thứ nhất. Cụ thể, các bạn sẽ tìm hiểu kỹ về storyboard và ứng dụng thuộc loại master-detail (hiển thị thông tin chi tiết từ danh sách và thêm sản phẩm vào danh sách).

Kết thúc bài học, các bạn có thể:

  • Thiết kế model layer dùng để biểu diễn dữ liệu của ứng dụng
  • Tạo ra cảnh (sences) và các chuyển động (segues) trong storyboard
  • Chuyển dữ liệu tới một cảnh và lấy dữ liệu từ cảnh

Ứng dụng sau khi hoàn thiện sẽ như sau: SecondPhoneApp1

Bắt đầu

Để có thể xây dựng ứng dụng iOS trong hướng dẫn này, bạn cần cài Xcode 4.5 hoặc phiên bản cao hơn và iOS SDK 6.0. Đối với các bạn đã tạo được ứng dụng iPhone đầu tiên thì phần này quả thực không có khó khăn gì. Trong phần này, các bạn sẽ tạo ra một project trong Xcode, chạy thử ứng dụng mặc định và tìm hiểu storyboard định nghĩa giao diện người dùng và một số hành vi của ứng dụng như thế nào.

Tạo mới project

Ứng dụng trong bài hướng dẫn này sẽ hiển thị một danh sác các con chim. Khi người dùng chọn lựa một phần tử chim trên danh sách, họ có thể xem chi tiết của loài chim đó ở một màn hình mới. Người dùng cũng có thể nhập thông tin chi tiết cho một loài chim mới ở một cửa sổ khác. Sự dịch chuyển từ danh sách chính tới màn hình chứa danh sách của các nhóm chim khác nhau là một thiết kế rất thông dụng trong ứng dụng iPhone. Nhiều ứng dụng iOS cho phép người dùng có thể đi sâu vào một hệ thống phân cấp các dữ liệu bằng cách điều hướng qua một loạt xử lý trên các màn hình chi tiết. Ví dụ, quá trình đọc tin nhắn từ danh sách các tài khoản. Xcode cung cấp cho ta một mẫu project kiểu Master-Detail giúp các LTV có thể dễ dàng xây dựng một ứng dụng cho phép người dùng điều hướng dữ liệu phân cấp. Đề bắt đầu với ứng dụng BirdWatching bạn sẽ tạo một ứng dụng iOS kiểu Master-Detail.

Xây dựng project BirdWatching
  1. Mở Xcode và chọn File > New > Project
  2. Trong phần iOS ở bên trái của hộp hội thoại, chọn Application
  3. Trong phần chính của hộp thoại, chọn Master-Detail Application và nhấn vào button Next Một hộp hội thoại mới xuất hiện để yêu cầu các bạn nâhpj tên của ứng dụng và khai báo thêm một số thông tin của ứng dụng.
  4. Thông tin cụ thể sẽ như sau: Product Name: BirdWatching Organization Name: az4you. Class Prefix: Birds Trong phần tử danh sách Devices, hãy chọn iPhone.
  5. Chắc chắn rằng khai báo Use Storyboards và Use Automatic Reference Counting đẵ được chọn (nhấn vào dấu check).Sau khi hoàn tất các bước trên, kết quả sẽ như sau:SecondIPhoneApp2
  6. Tiếp tục, nhấn Next
  7. Trong hộp hội thoại tiếp theo, chọn thư mục trong ổ cứng để lưu trữ project của bạn và hãy chắc chắn là lựa chọn Source Control không được chọn. Sau đó, mời bạn nhấn vào nút Create.

Biên dịch và chạy chương trình

Giống như bất kỳ ứng dụng khác, bạn có thể biên dịch và chạy project lần đầu tiên trước khi có bất kỳ thay đổi nào. Điều này là cần thiết để bạn có thể hiểu sâu hơn về chức năng của từng loại project khác nhau.

Biên dịch và chạy ứng dụng mặc định trên iOS Simulator
  • Chắc chắn Scheme pop-up menu trong thanh công cụ Xcode đã hiển thị BirdWatching > iPhone 6.0 Simulator. Nếu không, hãy chọn iPhone 6.0 Simulator.
  • Nhấn vào button Click trên thanh công cụ

Sau khi Xcode hoàn tất việc biên dịch thành công project, iOS Simulator sẽ tự động bật lên. Trên màn hình iPhone simulator, ứng dụng sẽ hiển thị như sau: SecondIPhoneApp3 Trên Simulator, nhấn vào button Add (+) ở bên góc phải của thanh navigator để thêm phần tử vào trong danh sách (mặc định, các phần tử là dữ liệu và thời gian hiện tại). Sau khi thêm một phần tử, lựa chọn phần tử đó để xem chi tiết của nó, giao diện màn hình sẽ như sau: SecondIPhoneApp4

Kiểm tra Storyboard và cảnh xuất hiện trên Storyboard

Một Storyboard biểu diễn các màn hình trong một ứng dụng và sự dịch chuyển giữa các màn hình. Nhấn vào MainStoryboard.storyboard trong Xcode project navigator để mở Storyboard của ưgns dụng BirdWatching trên canvas.

Điều chỉnh kích cỡ của Canvas
  • Nhấn vào điểu khiển zoom ở góc phải bên dưới của canvas. Bộ điều khiển zoom trông như sau: zoomcontrol
  • Hoặc chọn Editor > Canvas > Zoom và chọn tỉ lệ zoom tương ứng. Thông thường ta sẽ chọn zoom là 100%

Phóng to canvas để bạn có thể nhìn thấy tất cả ba màn hình trong project. Kết quả sẽ như sau: Storyboard mặc định trong ứng dụng Master-Detail chứa ba cảnh (scene) và hai dịch chuyển (segue). Một cảnh (scene) biểu diễn một màn hình chứa nội dung được quản lý bởi view controller represents an onscreen content area that is managed by a view controller. Một view controller là một đối tượng chịu trách nhiệm quản lý các view hiển thị nội dung trên màn hình (trong trường hợp của storyboard, scene và view controller là đồng bộ) . Cảnh bên trái ngoài cùng trong storyboard mặc định là một navigation controller. Một navigation controller được gọi là một container view controller bởi vì nó cũng giúp cho việc quản lý các view controller khác.it also manages a set of other view controllers. Ví dụ, navigation controller trong ứng dụng BirdWatching quản lý master và detail view controller, ngoài ra nó còn quản lý cả navigation bar và button back bạn nhìn thấy trên màn hình khi ứng dụng chạy. Một chuyển dịch (segue) biểu diễn sự dịch chuyển từ một cảnh (gọi là source scene) tới cảnh tiếp theo (gọi là destination scene). Ví dụ, trong project mặc định, cảnh chính là  source và cảnh chi tiết là destination. Trên canvas, biểu diễn segue như hình sau: segue_icon_2x Một quan hệ (relationship) là một loại kết nối giữa các cảnh (scene). Trên canvas, một quan hệ (relationship) nhìn sẽ gần giống như một dịch chuyển (segue), ngoại trừ biểu tượng sẽ trông như sau: relationship_icon_2x

Tổng kết

Trong phần này, bạn đã hoàn tất việc sử dụng Xcode để tạo một ứng dụng iOS mới dựa trên Master-Detail Application template. Khi bạn chạy ứng dụng này bạn sẽ thấy kiểu ứng dụng này sẽ rất giống cách điều hướng trong ứng dụng trên iOS như Mail và Contacts. Để tiếp tục xây dựng GUI cho ứng dụng BirdWatching, xin mời bạn tiếp tục đọc bài viết thứ hai.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: