Hướng dẫn làm application cho Apple Watch

Đây là sản phẩm được yêu chuộng của Apple  dự định  sẽ được bán  ra vào cuối tháng 4 này. Nhìn tổng quan đây là sản phẩm đẹp, tiện lợi và hứa hẹn 1 thị trường béo bở mới cho các lập trình viên về application cho các sản phẩm của Apple.

Dưới đây mình xin giới thiệu với các bạn các bước lập trình cơ bản với sản phẩm của Apple Watch.

Điều kiện cần thiêt:

 1. Xcode 6.2 beta trở về sau

 2.  Cập nhật mới library do Apple  cung cấp (WatchKit)

 3.  Có kiên thức cơ bản về ngôn ngữ Swift

Các bước lập trình:

Bước 1:Mở Xcode và lập 1 project mới với target là Iphone 6 

  ※File\New\Target…

  ※iOS\Apple Watch\Watch App

Bước 2: Kiểm tra các option cho application cần lập trình.

Cần xác định những tiêu chí cần thiết sau đây cho application.

  ※Language: Swift

  ※Không chọn Include Notification Scene và Include Glance  Scene 

Chọn Finish để đi đến được project có cấu trúc như bên dưới.

■BitWatch  Watch App bao gồm cả storyboard và image assets . Trong  trường hợp này chúng ta không sử nó mà chỉ xem như là View của application

■BitWatch WatchKit Extension sẽ bao gồm code xử lí các sự kiện khi application được khởi động, thay đổi giá trị của các switch hay các  button ở bên trong  application. Chúng ta có thể tưởng tượng cấu trúc của 1 Watch application như hình ảnh bên dưới.

Bước 3:
Ta đi tiếp vào lập trình cụ thể chi tiết. Trước hết lập trình thiết kế cho Watch application mà chúng ta  sẽ cho chạy trên Apple Watch. Chọn Bitwatch Watch App project , chon Interface.storyboard để thiết kế.

Drag và drop từ object library bên trái Xcode Tool các object sau:
  ※ 1 UILabel
  ※ 1 UIButton

Lưu ý bạn chỉ có thể di chuyên các Object theo chiều dọc 1 cách mặc định như hiệu chỉnh 1 Auto Layout.

Positioning: Bạn có thể thay đổi các hiểu chỉnh bằng cách chỉnh ở thanh Attributes Inspector . Như setting  bên dưới UIButton sẽ nằm dưới màn hinh, UILabel sẽ nằm trên đỉnh màn hình.

※UILabel : 

 　Horizontal position : Center

　 Vertical position     : Top  

※UIButton : 

   Horizontal position : Center

　Vertical position     : Bottom

Sau đấy các bạn chọn thanh cung cụ Attributes inspector bên phía tay trái , hiệu chịnh UILabel theo tiêu chuẩn sau:
   * Để biểu thị giá trị Bitcoin price bạn cài đặt Text dưới dạng sau : $0.00
  * Alignment : center
  * Font :  Custom , Avenir Next, Demi Bold , Size 30
Chọn Button và cài đặt title là  Refresh. Đồng thời chọn Font là Custom, Avenir Next, Medium, Size16.
Bước 4:  kết nối các button va label với code  xử lí
Các bạn chú ý Apple  đã cung cấp cac hổ trợ cho bạn bằng bluetooth để  kết nối Apple Watch của bạn và Iphone. Bạn không cần phải lo lắng nhiều.

Quay lại với lập trình , các bạn chọn Assistant Editor chọn InterfaceController.swift để biểu thị màn hình chia đôi như bên dưới .

Chọn UILabel bên phái trái màn hình , nhấn control+ drag vào bên phía trái  của  InterfaceController đặt tên là priceLabel và chọn Connect.

Bước 5 : Sử dụng library do  BitWatchKit cung cấp

Mở Project dưới  dạng  Navigator và chọn BitWatch WatchKit Extension. Tiếp đến chọn General-> Linked Frameworks and Libraries. Đến đây bạn chọn + và tìm gắn thêm BitWatchKit.framework vào để sử dụng.

Bước 6: Lập trình

Chọn file tên là InterfaceController.swift  và  gắn vào phần import như sau.

import BitWatchKit

Library này cho phép bạn dùng được class Tracker.
Tiếp theo ta khai báo các biến sau đây.

let tracker = Tracker()
var updating = false 

Để có thể cập nhật nhanh các giá trị của Bitcoin ta thiết lập 1 method

private func updatePrice(price: NSNumber) {     priceLabel.setText(Tracker.priceFormatter.stringFromNumber(price))  

}

Đây là method chuyển giá trị từ NSNumber sang String để hiện lên trên màn hình của Apple Watch.

private func update() {
  // 1
  if !updating {
    updating = true
    // 2
    let originalPrice = tracker.cachedPrice()
    // 3
    tracker.requestPrice { (price, error) -> () in
      // 4
      if error == nil {
        self.updatePrice(price!)
      }
      self.updating = false
    }
  }
}

Ta xây dựng thêm 1 method để lấy cache của dữ liệu vừa lây được , đồng thời request Bitcoin Price thành công ta sẽ  gọi method  là updatePrice().

Bước 7 : Thiết lập  LifeCycle cho xử lí chính ở  InterfaceController.swift
■Đối với method là  override func awakeWithContext :
 ở method này cac UI Interface, cac action va outlet  sẽ được cập nhật tức thời cho xử lí

updatePrice(tracker.cachedPrice())

■  Đối với method là override func willActivate:
Cũng giống như viewWillActive trong iOS, đây là method để cập nhật và biểu thị dữ liệu trên màn hình Apple Watch.
Chúng ta gọi method la update() để lấy dữ liệu mới nhất cần được biểu thị.

update()

■ Gắn thêm button để refresh dữ liệu như bên dưới

  @IBAction func refreshTapped() {
    update()
  }

Bước 8 :  Chạy kiểm tra  Application thử 
Để chạy được màn hình mô phỏng chạy trên Apple Watch , các bạn mở iOS Simulator lên trước. Chọn Hardware => External Display và chọn 1 trong những loại Apple Watch cần dùng để kiểm tra. Như vậy bạn sẽ phải có 2  Simulator để kiểm tra , 1 màn hình để chạy Iphone application và 1 màn hình để chạy Apple Watch application.

Trở lại với cung cụ lập trình Xcode. Ở trên Xcode Toolbar bạn chọn BitWatch Watch App  và iphone 6 Simulator.

Tiếp theo bạn Build và Run  application , chờ đợi kết quả được biểu thị trên man hình của Apple Watch Simulator như ở bên dưới.

Bước 9 :  Bổ sung thêm chức năng biểu thị thời gian cập nhật và biến đổi tăng giảm của Bitcoin 

Như vậy bạn đã hoàn thành được những bước cơ bản để biểu thị giá trị Bitcoint lên  Apple  Watch. Tiếp theo , chúng ta sẽ bổ sung thêm thời gian cập nhật và ảnh biểu thị giá trị tăng giảm của  giá trị Bitcoin.

Chọn  Images.xcassets ở bên  BitWatch Watch App 1 ảnh biểu thi tăng giảm của Bitcoin vào trong thư viên ảnh của Xcode.Ở đây là ảnh tương ứng với màn hình Retina nên bạn chọn ảnh có tên ***@2x.png . Ở đây ta chọn thêm vào 2 ảnh  Down@2x.png và Up@2x.png bằng cách rê chuột và thả vào Images.xcassets tương ứng.

Tiếp theo bạn chọn Interface.storyboard và hiểu chỉnh thêm như bên dưới .

       ■UIButton hiên tại sửa phần Title là Refresh.

　　 ■Chọn và thêm UILabel được cài đặt như sau

•  Text : Last Updated 
•  Font : Custom, Avenir Next, Regularvà Size 13. 
•  Text alignment : center 
•  Horizontal position : Center 
•  Vertical position : Bottom

Bước 10 :  Tạo Group bao gồm 1 UILabel va  1 image  để biểu thị sự tăng giảm của giá trị Bitcoin như bên dưới

Tạo và rê 1 group từ object library. Chú ý cài đặt Layout setting là Horizontal ở trong mục Attributes inspector.

Tiếp theo tạo và rê 1 image và 1 UILabel vào bên trong group vừa mới cài đặt. Ta được kết quả như bên dưới.

Hiệu chỉnh cho UILabel va Image này như sau.

• Đối với UILabel
• Text title : 1 BTC
• Horizontal position : Center
• Vertical position     : Center
•  Font : Custom, Avenir Next, Regular, and Size 13 
• Đối với Image
• Horizontal position : Center
• Vertical position     : Center
• Size ở thanh Attributes inspector chọn Fixed Width và Fixed Height và cài đặt cả 2 giá trị là 32 
  

Bước tiếp theo ta cần phần khai báo outlet cua Image , click vào Image và rê vào file  tương ứng như bước đầu hướng dẫn. Ta đặt tên là image và chọn Connect.

Tương tự như trên ta chọn UILabel và đặt tên la lastUpdateLabel và chọn Connect.
Bước 11 :  Tính toán biểu thị image và  thời gian cập nhật.
Mở file có tên là InterfaceController.swift và thêm 2 method sau vào

• Cài đặt cập nhật mới nhất về thời gian 

private func updateDate(date: NSDate) {
  self.lastUpdatedLabel.setText("Last updated \(Tracker.dateFormatter.stringFromDate(date))")
}

• Biểu thị image tăng giảm của giá trị Bitcoin 

Ở đây tăng hay giảm đều được biểu thị 1 image tương ứng. Nếu không thay đổi gì ta ẩn image biểu thị

private func updateImage(originalPrice: NSNumber, newPrice: NSNumber) { if originalPrice.isEqualToNumber(newPrice) { // 1 image.setHidden(true) } else { // 2 if newPrice.doubleValue > originalPrice.doubleValue { image.setImageNamed("Up") } else { image.setImageNamed("Down") } image.setHidden(false) } }

Các bạn đừng quên thêm 2 dòng code này vào bên dưới method có tên là awakeWithContext .
    image.setHidden(true)
   updateDate(tracker.cachedDate())
Đồng thời bên trong method tên là update(), ở bên dưới điều kiện  if error == nil {
các bạn thêm 2 dòng code sau.
      self.updateDate(NSDate())
self.updateImage(originalPrice, newPrice: price!)
 Cuối cùng các bạn build va run application để có được kết quả như bên dưới.

Như vậy là ta đã hoàn thành xong 1 application đơn giản cho Apple Watch . Nếu có gì thắc mắc cần thảo luận , xin các bạn comment vào bên dưới . Mình sẽ kịp thời thảo luận và giải quyết cùng các bạn. Chúc các bạn thành công!!!

Đây là toàn bộ source code cho hướng dẫn bên trên . Các bạn có thể download và thảo luận ở bên github repository . Lấy source-code ở đây