Hướng dẫn cách chuyển đổi ứng dụng iOS sang macOS (Phần 2)

Ở phần trước chúng ta đã tạo ra được phần thô của app sau khi chuyển đổi từ iOS sang macOS, tiếp theo chúng ta sẽ đến với việc tạo ra các model để lưu trữ dữ liệu.

Tạo một "Swift File" mới bằng cách đi từ File/New/File…, và đặt tên nó là "Beer_iOS.swift". Đảm bảo rằng nó được thêm vào target "BeerTracker". Sau đó tạo thêm một file "Beer_mac,swift", lần này hãy thêm nó vào "BeerTracker-mac".

Mở "Beer_iOS.swift", xoá nội dung file và thêm vào như sau:

Dưới đây là điều sẽ xảy ra:

1. Protocol "BeerImage" đòi hỏi tạo ra một class với kiểu đa nền tảng "associated type". Hãy tưởng tượng nó giống như là một kiểu mặc định cho kiểu đối tượng mà bạn muốn dùng, dựa trên việc đối tượng của bạn muốn. Vì trong file này đang dùng cho iOS nên nó là "UIImage".
2. Tiến hành viết Protocol đầu tiên. Ở đây, kiểu "Image" là "UIImage".
3. Một ví dụ khác cho việc sử dụng bí danh khi khởi tạo ảnh như thế nào.
4. Tiến hành viêt Protocol thứ hai cho việc lưu ảnh.

Đổi scheme của bạn sang "BeerTracker", sau đó chạy chương trình. Nó sẽ chạy được như lúc trước.

Bây giờ bản iOS đã hoạt động, hãy tiếp tục đổi sang bản macOS. Mở "Beer_mac.swift", xoá tất cả code và thêm những dòng code sau:

Những đoạn code trên gần giống với bên iOS nhưng với một số thay đổi sau:

1. Ở đây, thay vì sử dụng "UIImage", bạn sẽ sử dụng lớp của "AppKit" là "NSImage".
2. Ở trên iOS, việc lưu file vào thư mục Document là bình thường. Bạn không phải lo lắng đến việc lộn xộn trong này bở vì nó được giấu kĩ ở trong app và user không thể thao tác được. Trên macOS, bạn sẽ không muốn làm xáo trộn thư mục Document, vì vậy bạn lưu file của app vào trong "Application Support".
3. Vì "NSImage" không có hàm để lấy dữ liệu ảnh như "UIImage", vì vậy bạn sẽ dùng "tiffRepresentation".

Đổi target của bạn sang "BeerTracker_mac", Sau đó chạy chương trình. App của bạn bây giờ đã có thể chạy đa nền tảng.

Đầu tiên, chúng ta tạo UI cho phần Mac trước. Từ group "BeerTracker-mac", mở "Main.storyboard". Bắt đầu kéo một "Table View" vào trong view trống. Bây giờ hãy chọn "Table View" trong Document Outline.

storyboard của macOS đôi khi đòi hỏi phải đào sâu hơn vào cây kế thừa của view. Đây là một sự khác biệt đối với iOS, bạn thường thấy tất cả bản mẫu của view ở trên cùng.

Chọn Table View, thay đổi những thuộc tính sau trong Attribute Inspector:

• Đặt Columns về 1
• Bỏ check Reordering
• Bỏ check Resizing Chọn "Table Column" tỏng Document Outline và đặt title cho nó là "Beer Name".

Trong Document Outline, chọn "Bordered Scroll View" nới mà "Table View" nằm trong, và trong phần Size Inspector, tìm đến section của View và đặt dimensions như sau:

• x: 0
• y: 17
• awidth: 185
• height: 253

Việc đặt toạ độ có đôi chút khác biệt. Trong macOS, điểm gốc toạ độ không phải ở góc trên bên trái mà là ở góc dưới bên trái. Ở đây bạn đặt toạ độ y là 17, có nghĩa là dịch 17 điểm từ dưới lên.

Tiếp theo bạn sẽ cần phải kết nối delegate, data source và thuộc tính cho "Table View". Lại một lần nữa, bạn phải chọn "Table View" trong Document Outline để làm việc này. Bạn có thể dùng tổ hợp "Control-kéo" vào "View Controller" sau đó chọn "delegate". Lặp lại nó cho "dataSource".

Mở "ViewController.swift" trong Assistant Editor, "Control-kéo" từ "Table View" và tạo một outlet mới tên là "tableView".

Trước khi kết thúc "Table View", có một việc cuối mà bạn phải làm. Vào lại Document Outline, tìm item tên là "Table View Cell". Chọn nó, sau đó mở "Identity Inspector", và đăt "Identifier" thành "NameCell".

Với việc cài đặt "Table View", tiếp đến là phần "form" của UI. Đầu tiên, bạn thêm "Image Well" vào phía bên phải của table. Đặt frame cho nó thành

• x: 190
• y: 188
• awidth: 75
• hieght: 75

"Image Well" là một đối tượng để hiển thị ảnh, nhưng nó cho phép người dùng kéo thả một bức ảnh vào trong nó. Mở BeerTracker-mac "ViewController.swift" trong Assistant Editor và toạ một outlet cho "Image Well" tên là "imageView". Và tạo thêm một hành động cho "Image View", đặt tên nó là "imageChanged". Chắc chắn rằng bạn chuyển "Type" thành "NSImageView".

Trong khi kéo và thả là tốt, đôi khi người dùng lại muốn mở dialog để chọn. Có thể làm điều này bằng cách thả "Click Gesture Recognizer" vào "Image Well". Trong Document Outline, nối một hành động từ "Click Gesture Recognizer" vào "ViewController.swift" tên là "selectImage".

Đặt một "Text Field" vào bên phải "Image Well". Trong Attribute Inspector, đổi "Placeholder" thành "Enter Name". Đặt frame của nó giống như sau:

• x: 270
• y: 223
• awidth: 190
• hieght: 22

Tạo một outlet trong "ViewController.swift" cho "Text Field" tên là "nameField".

Tiếp theo, thêm một "Level Indicator" bên dưới tên. Nó sẽ điều khiển việc đánh giá beer của bạn. Trong Attribute Inspector, cài đặt như sau:

• Style: Rating
• State: Editable
• Minimum: 0
• Maximum: 5
• Warning: 0
• Critical: 0
• Current: 5
• Image: beerMug

Đặt frame như sau:

• x: 270
• y: 176
• awidth: 115

Tạo một outlet cho "Level Indicator" tên là "ratingIndicator". Thêm một "Text View" bên dưới "Level Indicator". Đặt frame thành:

• x: 193
• y: 37
• awidth: 267
• hieght: 134

Để tạo outlet cho "Text View", bạn cần đảm bảo chọn "Text View" trong Document Outline, giống như bạn làm với Table View. Đặt tên outlet là "noteView". Bạn cũng cần phải đặt delegate của Text View vào "ViewController".

Ở bên dưới note view, đặt một "Push Button". Thay đổi tên nó thành "Update" và đổi frame thành.

• x: 284
• y: 3
• awidth: 85

Kết nối hành động từ button vào "ViewController" tên là "updateBeer".

Chúng ta đã có đủ các control để chỉnh sửa thông tin của beer. Tuy nhiên không có cách nào để thêm và bỏ bớt beer. Thêm một "Gradient Button" vào phía trái bên dưới của screen. trong Attribute Inspector, đổi "Image " sang "NSAddTemplate" nếu như nó chưa được cài đặt.

Trong phần Size Inspector, đặt frame thành:

• x: 0
• y: -1
• awidth: 24
• height: 20

Thêm hành cho button mới với tên là "addBeer".

Tiếp theo bạn sẽ cần phải thêm một control để xoá beer. Thêm một "Gradient Button" vào bên phải của button trước, thay "Image" thành "NSRemoveTemplate" và đặt frame là:

• x: 23
• y: -1
• awidth: 24
• height: 20

Và cuối cùng, thêm hành động cho button tên là "removeBeer".

Thêm một số label sau để hiển thị thông tin của beer:

• Trên vùng tên, đặt tên là "Name".
• Trên vùng rating, đặt tên là "Rating".
• Trên phần note, đặt tên là "Notes".
• Bên dưới table view, đặt tên là "Beer Count:".
• Ở bên phải của "beer count", đặt là "0".

Với mỗi một label này, trong phần Attribute Inspector, đặt font là "Other - Label", và đổi size thành 10.

Ở lable cuối cùng, nối outlet vào "ViewController.swift" đặt tên là "beerCountField". Đảm bảo label của bạn giống như sau:

Bấm vào nút "Auto Layout Issues" và trong phần "All Views in View Controller", bấm vào "Reset to Suggested Constraints".

Chúng ta đã hoàn thành việc tạo model và UI, ở phần sau chúng ta sẽ hoàn thiện nốt phần code còn lại. Cảm ơn các bạn đã xem.

Ref: https://www.raywenderlich.com/161968/porting-your-ios-app-to-macos