[ WatchKit Introduction – Swift] : Xây dựng ứng dụng theo dõi tỷ giá Bitcoin - 321Dzô.Com

Kể từ khi được giới thiệu vào cuối năm 2014, Apple Watch đã được rất nhiều người chờ đón, đặc biệt là các khách hàng thân thiết của “Quả táo”. Theo lời tuyên bố của Tim Cook trong buổi họp báo, các Apple Watch sẽ đến tay người dùng trong đầu năm 2015, song, từ đó cho đến nay, đó vẫn chỉ là một lời hứa “suông”. Apple lại một lần nữa thử thách sự kiên nhẫn của khách hàng khi thông báo sẽ phát hành Apple Watch vào tháng 4.

Nhưng với ai đam mê lập trình với Swift và Apple Watchkit thì đó không phải là vấn đề. Trong loạt bài tới đây, SwiftBlog sẽ hướng dẫn các bạn lập trình và tự tạo ra những ứng dụng với chiếc đồng hồ apple watch mà apple sắp bán trong thời gian tới.

WatchKit là 1 framework mới của Apple cho phép bạn tạo ra các ứng dụng cho Apple Watch, nó được release cùng với Xcode 6.2-beta.
Trong bài hướng dẫn này, bạn sẽ tạo ra ứng dụng WatchKit đầu tiên bằng ngôn ngữ lập trình Swift. Cụ thể, bạn sẽ có một ứng dụng theo dõi tỳ giá Bitcoin.

Trong quá trình làm, bạn sẽ hiểu về kiến trúc của 1 ứng dụng WatchKit, làm thế nào để điều khiển WatchKit UI, WatchKit layout và nhiều thứ nữa.

Let’s get started! ┗(°0°)┛

Bây giờ là các bước thực hành:

1. Tạo project

Đầu tiên, bạn download 1 project template WatchKit như trong bài hướng dẫn này.
Mở project bằng Xcode beta 6.2 và chọn simulator là iPhone 6 sau đó build và run project. Apps sẽ gọi API tỷ giá BitcoinAverage để có được giá Bitcoin mới nhất và hiển thị nó trên màn hình Apple Watch.

Và bây giờ là lúc để bắt đầu với theo dõi tài sản Bitcoin của bạn trên Watch!
Mở project Xcode vừa mới download về, vào File \ New \ Target … WatchKit App template.

Giao diện tiếp theo, Xcode sẽ fill vào rất nhiều giá trị và bạn sẽ không thể thay đổi những thứ như Product Name.

– Chọn ngôn ngữ Swift

– Uncheck Incluce Notification Scene và Include Glance Scene.

Nhấn Finish, nhìn vào project bạn sẽ thấy Xcode sẽ generate cho bạn 2 group:

1. Watch App chỉ chứa storyboard và image assets…và không có code! Bạn có thể hiểu đây chỉ là “view” cho app.
2. WatchKit Extension chứa xử lý các sự kiên như app launching, button taps, hoặc thay đổi giá trị trên Watch UI. Bạn có thể coi đây như “controller và model”.

Note: Các thuật ngữ của Watch apps có 1 chút khác biệt so với iOS và Mac apps – thay vì views, controls và view controllers, bây giờ chúng ta có interfaces, interface objects và interface controllers.

2. Watch Interface

Vào BitWatch Watch App group và chọn Interface.storyboard.

Bạn sẽ thấy 1 giao diện đơn giản. Okay, bây giờ chúng ta sẽ add 1 vài control vào.

Kéo 1 label từ object library vào giao diện. Sau đó kéo thêm 1 button vào phía dưới.

Bạn có thể nhận thấy một vài điều kỳ lạ ở đây: bạn có thể kéo thả label phía trên buton hoặc button phía trên label, nhưng bạn không thể kéo thả xung quanh “tự do” như iOS.

Bây giờ bạn có thể tuỷ chỉnh vị trí của chúng trong tab Attributes inspector. Chọn label và that đổi thuộc tính Horizontal position sang Center, và Vertical position sang Top.

Format lại label như trong hình sau

Tiếp theo, chọn button và thay đổi thuộc tính Horizontal position sang Center, và Vertical position sang Bottom.

Format lại button

That looks good!

Actions and Outlets

Hiểu một cách đơn giản, đối tượng nào mà bạn sử dụng để hiển thị thông tin ra bên ngoài thì thuộc loại Outlet. Đối tượng nào mà bạn muốn viết code để khi tương tác với đối tượng đó sẽ cho ra kết quả mà bạn muốn ( ví dụ bạn muốn nhấn vào Button sẽ hiện “Hello World” ) thì bạn sẽ chọn loại là Action. Một đối tượng có thể vừa là Action, vừa là Outlet tùy vào người viết ứng dụng quy định.

Bất đầu bằng cách nhấn vào label mà bạn đã thêm vào storyboard để nó được lựa chọn. Bây giờ, giữa chặt nút Control trên bàn phím, và sau đó giữ và kéo từ nút tới mã nguồn trong Assistant Editor. Bạn nhìn thấy một đường màu xanh đang chạy từ label tới con trỏ (nhìn hình bên dưới).

Để kết thúc việc kết nối này, thả chuột của bạn ra, và một pop-up động sẽ xuất hiện, giống như được biểu diễn ở hình bên dưới. Đặt tên nó là priceLabel, và click Connect.

Tương tự Control+kéo thả button Refresh. Lần này, select là Action để viết function hiển thị giá Bitcon thay vì outlet. Đặt tên action là refreshTapped, và click Connect.

Okay, bây giờ coi như hoàn tất giao diện. Chúng ta sẽ chuyển qua code lấy dữ liệu để hiển thị giá Bitcons.

WatchKit Code

Starter project đã download có chứa 1 framework tên BitWatchKit có chứa 1 vài custom code để fetch dữ liệu giá Bitcoin. Code này đặt trong 1 framework để có thể reuse cho cả iPhone app và iPhone WatchKit extension.
Để add framework này vào extension, mở project file trong navigator và chọn BitWatch WatchKit Extension target. Chọn General tab và kéo xuống Linked Frameworks and Libraries như trong hình phía dưới.

Click + button phía dưới Linked Framework and Libraries. Chọn BitWatchKit.framework say đó click Add.

Chuyển qua class InterfaceController.swift trong WatchKit Extension group. Sau đó import dòng say:

Để gọi được Tracker class đã định nghĩa trong framework import, bạn thêm đoạn code phía sau:

Add thêm 1 helper method như sau:

Method này sẽ lấy NSNumber và cập nhật giá trị đó vào label priceLabel trên giao diện Watch. Tracker cũng xử lý format của price chẳng hạn truyền vào giá trị 93.1 hàm này sẽ trả về 1 chuỗi dạng “$93.10″.
Okay, add thêm 1 helper method vào class:

Method này sẽ thực thi như sau:
1. Kiểm tra trạng thái update.
2. Cache giá Bitcoin hiện tại, vì vậy UI chỉ update nếu giá thay đổi.
3. requestPrice() là 1 method trong class Tracker để lấy giá Bitcoin mới nhất thông qua api.
4. Nếu kết quả thành công, gọi hàm update để update giá trên giao diện.
Okay, bây giờ chúng ta chỉ cần gọi hàm update này ở 1 vài nơi để nó update dữ liệu thật lên giao diện:

– add đoạn code sau vào awakeWithContext:

Giá Bitcoin đã cache sẽ được update lên giao diện.

Add đoạn code sau vào willActivate():

willActivate thì giống như viewWillAppear trong iOS, có nghĩa là khi giao diện được active trên Watch. Method này sẽ gọi function update(), update sẽ gọi api lấy giá Bitcoin mới nhất về update lên giao diện.

Cuối cùng chúng ta sẽ add tương tự vào hàm refreshButton: