tvOS for developers – Diving into now

Vào ngày 9/9/2015 cách đây không lâu trong Apple Spical Event tổ chức tại Bill Graham Civic Auditorium – San Francisco, Apple đã trình làng thế hệ AppleTV mới ; đặc biệt hơn là cho ra mắt tvOS SDK, thư viện hỗ trợ các LTV phát triển các ứng dụng chạy trên nền tảng này. Một trải nghiệm mới tuyệt vời với người dùng lẫn các LTV khi giữa họ sẽ có sự giao tiếp (best services) thông qua các ứng dụng được tạo ra bởi đội ngũ LTV. Đúng như câu mở đầu trong 2 mùa WWDC gần đây của soái ca yêu màu hường Tim Cook – “It’s an absolute, incredible…”

Bài viết này không phải để phân tích những mỹ từ của người đứng đầu đế chế Apple hùng mạnh nói về những sản phẩm hay nền tảng công nghệ mà họ(Apple) mang lại. Bài viết hướng đến các bạn LTV – người luôn yêu thích, say mê với những điều mới mẻ qua từng năm của Apple, qua đây sẽ có cái nhìn cụ thể về điều gì bên trong new device này và bộ SDK đầy mới mẻ đang cần được khám phá.

Xem chi tiết bài viết này của tôi, các bạn sẽ nắm bắt được những điều như sau:

Làm quen với phần cứng 1 chiếc AppleTV thế hệ mới
Làm quen với tvOS SDK
Dưới góc độ của 1 iOS Dev, tôi đánh giá và tiếp cận như thế nào với nền tảng mới này?

Nhớ lại 2 tháng trước khi sự kiện Apple Special Event diễn ra vào lúc 0h00 10/9/2015(giờ Việt Nam), tôi cũng như một số bạn bè đang làm việc trên các nền tảng của Apple đều háo hức chờ đợi và đón xem. Dù qua một số website không chính thức, chúng tôi đã biết các Key notes tại sự kiện lần này, gồm có việc ra mắt: “iPhone 6s and iPhone 6s Plus, learn about the powerful iPad Pro, take a look at the new features and bands for Apple Watch, and see the premiere of the all-new Apple TV.”.

Điều làm chúng tôi đặc biệt quan tâm là AppleTV, câu hỏi là lý do vì sao lại là Apple TV mà không phải những device đang được bán vô cùng chạy như iPhone, iPad hay Watch??

Đơn giản vì đó là Apple TV . Như các bạn đã biết, những dòng device như trên đã không hoàn toàn khiến hàng nghìn con người trong khán phòng ngày hôm đó cũng như các LTV nghèo theo dõi trực tiếp qua stream live phải “WOW”, chúng sẽ là những bản update, upgrade tuyệt vời nhưng không quá đột phá. Còn Apple TV ư, câu trả lời là YES, “WOW WOW WOW” chúng tôi sẽ đồng thanh hô lên như vậy khi nó đang được giới thiệu lần đầu tiên tại những sự kiện của Apple. Cũng thế nếu 3 hoặc 5 năm tới, Apple tiếp tục tung ra Apple Car.(Quan tâm Apple Car thì zô link này nha http://hollywoodlife.com/2015/09/21/apple-making-electric-car-smart-cars-2019-twitter/).

Làm quen với phần cứng 1 chiếc AppleTV thế hệ mới

Vậy Apple đã nói gì về TV của họ? Link full HD không che thì đây: http://www.apple.com/tv/ , tôi sẽ đưa ra 1 số tóm tắt về phần cứng như sau:

Notable specs are 64-bit A8 processor
32GB or 64GB of storage
2GB of RAM
1080p resolution,HDMI
a new Siri Remote / Apple TV Remote

Giá mỗi chiếc Apple TV thế hệ mới như sau:

$149 for 32GB
$199 for 64GB

Đánh giá qua có thể thấy với cấu hình và mức giá như trên là khá phù hợp cho người dùng, vui hơn là mức giá cũng cực “yêu” cho các bạn LTV muốn sở hữu 1 device thật để chạy các ứng dụng của bạn.

Làm quen với tvOS SDK

Cùng với 1 chiếc Apple TV thế hệ mới, Apple cũng công bố sẽ cung cấp bộ tvOS SDK đến các LTV trên toàn thế giới. Framework này sẽ được tích hợp trong XCode IDE 7.1 Beta (vào thời điểm công bố 10/9 – giờ Việt Nam), tôi còn nhớ lúc đó bản 7.0 đang là chính thức. Điều này có nghĩa nếu bạn thực sự muốn trải nghiệm với tvOS thì bạn cần cài cắm thêm 1 bản XCode 7.1 Beta nữa để tránh việc tranh chấp version không đáng có. Còn trong lúc này 14/11 – giờ Việt Nam, chúng ta đã có bản cập nhật Xcode 7.1.1 , điều mà nói rằng chúng ta có thể thoải mái dev tvOS, iOS… trên 1 IDE duy nhất.

tvOS dành cho Apple TV và ngược lại. Nó được xây dựng trên nền của iOS, vì thế sẽ sử dụng rất nhiều frameworks đã khá quen thuộc với các bạn đã từng làm việc với nền tảng iOS trong nhiều năm qua.

Apple cung cấp 2 cách để phát triển ứng dụng trên tvOS:

TVML apps: cách này đòi hỏi LTV cần làm quen với các thuật ngữ mới như TVML, TVJS hay TVMLKit.
Custom apps: cách này sử dụng các frameworks đã quá đỗi quen thuộc trên iOS như UIKit, Storyboard, AutoLayout.

Trong bài viết này tôi sẽ chỉ tập trung vào cách thứ nhất, TVML apps. Bạn nghĩ sao nếu tôi nói bạn(iOS dev) cần đọc thêm về js ??

Ya, chính xác là với TVML apps, mọi thứ sẽ rất khác so với bạn từng làm với các nền tảng của Apple trước đây. TVML cung cấp cho bạn 2 khái niệm sau:

TVML(Television Markup Language) là 1 form XML chuẩn giúp ứng dụng của bạn presentation.
TVJS gồm 1 tập các javascript APIs giúp bạn control các item hiển thị trên màn hình được tạo ra kết hợp với XML.
TVMLKit hiểu đơn giản nó là cầu nối, là context giúp liên kết TVML, javascript và ứng dụng tvOS native của bạn.

Hình vẽ trên (nguồn được mượn từ raywenderlich.com) sẽ cho bạn cho nhìn tổng quát nhất về architecture của ứng dụng tvOS.

Bạn sẽ cần xây dụng 1 server để lưu trữ tất cả các file XML, js và resource. Ứng dụng tvOS chỉ đơn giản là sử dụng TVMLKit để kết nối với server của bạn thông qua

TVApplicationControllerContext class(sẽ nói ở phần Demo) để hiển thị. Mọi xử lý về ứng dụng của bạn sẽ được hiển thị ra sao, logic tính toán, business logic sẽ hoàn toàn thực hiện trên server.

Một ứng dụng tvOS của bạn sẽ được Apple suggests các template như hình(nguồn được mượn từ raywenderlich.com):

Bạn có thể muốn tìm hiểu nhiều hơn về số temps còn lại? Vào link này nhé : https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/TextboxTemplate.html#//apple_ref/doc/uid/TP40015064-CH2-SW8

Nhiêu đây chắc cũng khá đủ để bạn study trong 1 ngày cuối tuần nào đó rồi. Giờ thì đến với code demo thôi…woohoo…

Việc đầu tiên bạn cần chắc là đã có bản XCode phiên bản từ 7.1 or later. Hiện tại tôi đang dùng Xcode 7.1.1 , quên nữa…demo này tôi tập trung vào tạo TVML app nhé, bạn nào muốn làm custom app(do bạn yêu iOS, không muốn thay đổi vì bất cứ lý do gì) thì cũng có thể dừng ở đây mà không đọc tiếp. Tôi sẽ rất vui nếu bạn có thể chia sẻ những điều gặt hái được khi vẫn dùng UIKit để phát triển tvOS app. Đây là skype ID của tôi: fly_with_me_no1

Okay. Let’s dig in.

Step 1: Bạn cần tạo 1 project với tvOS

Như đã quen thuộc, bạn sẽ New project, tuy nhiên lần này bạn sẽ chọn tvOS –> Single View Application. Bạn có thể chọn nền tảng ngôn ngữ nào bạn muốn Objective-C hay Swift

Hài hước là việc bạn chọn ngôn ngữ nào đi chăng nữa thì bạn sử dụng ngôn ngữ đó trong trường hợp tạo bằng TVML app, số lượng dòng code của bạn chỉ đếm trên đầu ngón tay mà thôi. Kỳ quặc phải không? Cùng xem nhé Bài này tôi dùng Swift.

Khi đã tạo xong project, bạn vào AppDelegate.swift, bạn hãy delete tất cả các methods trong đó đi, ngoại trừ function này:

1
<span style="color: #ff00ff">func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -&gt; Bool</span>

Tiếp theo, bạn cần import TVMLKit và thực thi TVApplicationControllerDelegate, như sau:

1
2
3
4
5
6
7
8
9
<span style="color: #ff00ff">import UIKit
import TVMLKit
 
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, TVApplicationControllerDelegate {
 
  var window: UIWindow?
 
}</span>

Bạn khai báo thêm:

1
2
3
<span style="color: #ff00ff">var appController: TVApplicationController?
static let TVBaseURL = "your URL host"
static let TVBootURL = "\(AppDelegate.TVBaseURL)js/application.js"</span>

Như các dòng lệnh trên, bạn sẽ cần khai báo 1 controller class là TVAppliationController(1 class thuộc TVKit có nhiệm vụ giao tiếp với server của bạn). Sau đó là các link để đến với host server của bạn và các file js. Nếu bạn còn lạ lẫm với việc tạo 1 host server thì đây là bài bạn có thể tham khảo: http://tech.3si.vn/2015/08/16/web-api-tao-php-web-service-cho-ung-dung-mobile-client/

Vậy các thư mục trên server của bạn sẽ trông ra sao?

File application.js là nơi mà sẽ bắt đầu ứng dụng của bạn, nó cũng giống như index.php page, cái mà được định nghĩa ở TVBootURL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span style="color: #ff00ff">func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -&gt; Bool {
  window = UIWindow(frame: UIScreen.mainScreen().bounds)
 
  // 1
  let appControllerContext = TVApplicationControllerContext()
 
  // 2
  guard let javaScriptURL = NSURL(string: AppDelegate.TVBootURL) else {
    fatalError("unable to create NSURL")
  }
  appControllerContext.javaScriptApplicationURL = javaScriptURL
  appControllerContext.launchOptions["BASEURL"] = AppDelegate.TVBaseURL
 
  // 3
  appController = TVApplicationController(context: appControllerContext, window: window, delegate: self)
  return true
}</span>

Đoạn code trên là tất cả những gì bạn cần làm để config client + server của bạn.

Line 1: Định nghĩa 1 context, hiểu đơn giản nó sẽ làm nhiệm vụ config các thông tin như server url, thư mục root chứa các file js để khởi động khi chạy ứng dụng của bạn

Line 2: Như đề cập ở trên, bạn cần đưa các thông tin cần thiết để context tiếp nhận file main js của bạn

Line 3: Thực thi nhiệm vụ đọc file main js thông qua context và hiển thị lên ứng dụng của bạn. Các delegation methods sẽ có nhiệm vụ tiếp nhận các behaviours từ server

1
<span style="color: #ff00ff">// MARK: TVApplicationControllerDelegate</span>

1
<span style="color: #ff00ff"> </span>

1
<span style="color: #ff00ff">    func appController(appController: TVApplicationController, didFinishLaunchingWithOptions options: [String: AnyObject]?) {</span>

1
<span style="color: #ff00ff">        print("\(__FUNCTION__) invoked with options: \(options)")</span>

1
<span style="color: #ff00ff">    }</span>

1
<span style="color: #ff00ff"> </span>

1
<span style="color: #ff00ff">    func appController(appController: TVApplicationController, didFailWithError error: NSError) {</span>

1
<span style="color: #ff00ff">        print("\(__FUNCTION__) invoked with error: \(error)")</span>

1
<span style="color: #ff00ff"> </span>

1
<span style="color: #ff00ff">        let title = "Error Launching Application"</span>

1
<span style="color: #ff00ff">        let message = error.localizedDescription</span>

1
<span style="color: #ff00ff">        let alertController = UIAlertController(title: title, message: message, preferredStyle:.Alert )</span>

1
<span style="color: #ff00ff"> </span>

1
<span style="color: #ff00ff">        self.appController?.navigationController.presentViewController(alertController, animated: true, completion: { () -&gt; Void in</span>

1
<span style="color: #ff00ff">            // ...</span>

1
<span style="color: #ff00ff">        })</span>

1
<span style="color: #ff00ff">    }</span>

1
<span style="color: #ff00ff"> </span>

1
<span style="color: #ff00ff">    func appController(appController: TVApplicationController, didStopWithOptions options: [String: AnyObject]?) {</span>

1
<span style="color: #ff00ff">        print("\(__FUNCTION__) invoked with options: \(options)")</span>

1
<span style="color: #ff00ff">    }</span>

1

Vậy là với một số dòng code cơ bản, nhiệm vụ của bạn đã hoàn thành 50% của ứng dụng này và 100% tại client.

Tiếp theo đây tôi sẽ giới thiệu việc bạn coding và implementing 1 file js ra sao trên server. Để tạo ra 1 file name: application.js tôi sử dụng Sublime Text (một ứng dụng tuyệt vời trên MacOS để viết các đoạn mã js và các đoạn mã ở những ngôn ngữ khác)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span style="color: #ff00ff">App.onLaunch = function(options) {
  var alert = createAlert("Hello World", "");
  navigationDocument.presentModal(alert);
}
 
var createAlert = function(title, description) {
  var alertString = `&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
    &lt;document&gt;
      &lt;alertTemplate&gt;
        &lt;title&gt;${title}&lt;/title&gt;
        &lt;description&gt;${description}&lt;/description&gt;
      &lt;/alertTemplate&gt;
    &lt;/document&gt;`
    var parser = new DOMParser();
    var alertDoc = parser.parseFromString(alertString, "application/xml");
    return alertDoc
}</span>

Trên đây là 1 đoạn mã đơn giản sẽ hiển thị dòng text Hello World đơn giản khi bạn mới bắt đầu khám phá một ngôn ngữ mới.

Các bạn sẽ chi ý đến dòng code đầu tiên, App.onLaunch, nếu như ở phía client, TVApplicationControllerContext làm nhiệm vụ config các thông tin để kết nối trên server thì App.onLaunch chính là mảnh ghép còn lại để tạo thành chiếc cầu nối client với server.

Hãy xem việc khai báo 1 function với 2 tham số đầu vào đã quá quen thuộc với các bạn, function createAlert sẽ trả về 1 định dạng TVML(bạn có thể thấy nó tương tự như việc chúng ta tạo 1 UIAlertViewController trên iOS client vậy). Chúng ta sẽ đi vào bên trong function, alertTemplate tag là 1 trong 18 templates mà tôi đã giới thiệu với các bạn ở trên, nó có nhiệm vụ alert thông tin chẳng khác gì việc bạn làm với 1 alertView cả.

Cũng không quá khó để bắt đầu lập trình tvOS phải không??

Tôi sẽ chạy thử ứng dụng này trên localhost nhé. Việc tiếp theo của bạn là trỏ tới đường dẫn các thư mục như trên server và giả lập môi trường.

Hãy chắc là bạn hiểu chuyện gì tôi đang làm. Tôi đi đến thư mục bên tay phải màn hình với 1 câu lệnh terminal đơn giản bên trái màn hình. Tiếp theo các bạn gõ thêm:

1
<span style="color: #ff00ff">python -m SimpleHTTPServer 9001</span>

Hệ thống sẽ có bảng confirm như trên, đơn giản là Allow nhé. Tiếp theo là chạy ứng dụng tvOS của bạn thôi nào…

Ứng dụng Demo mà các bạn nhìn thấy ở hình trên là 1 project mẫu của Apple để giới thiệu 18 temps. Các bạn có thể thoải mái download qua link: https://developer.apple.com/library/prerelease/tvos/samplecode/TVMLCatalog/Introduction/Intro.html#//apple_ref/doc/uid/TP40016505

That’s all…well done

Dưới góc độ của 1 iOS Dev, tôi đánh giá và tiếp cận như thế nào với nền tảng mới này?

Hmm, okay, riêng về ý kiến của tôi thì có lẽ Apple sẽ cần phải đưa ra các phiên bản tvOS cập nhật hơn để giải quyết những vấn đề sau:

App size: như Apple đã công bố, các ứng dụng trên tvOS sẽ không được vượt quá 200MB, điều này sẽ rất khó cho 1 device mang tính giải trí cao, nới mà game và các chương trình entertainment sẽ lên ngôi. Các game sẽ có dung lượng không được vượt quá 200MB ư?
Việc Apple loại bỏ 1 số framework đã quen thuộc cho các nền tảng iOS, Watch là khá tiêu cực.Ví dụ như WebKit, là 1 LTV iOS, tôi đã quá quen thuộc với việc sử dụng UIWebview để presents 1 số các files mà sẽ cần phải dùng các thư viện ngoài cồng kềnh hỗ trợ. Có thể đây là 1 bước nhằm hạn chế việc sử dụng Custom app thay vì TVML app trên tvOS chăng?? . Link: https://developer.apple.com/library/prerelease/tvos/releasenotes/General/tvOS90APIDiffs/index.html#//apple_ref/doc/uid/TP40016577

Câu trả lời vẫn chưa được Apple đưa ra cho các vấn đề kể trên. Tuy nhiên, khi đã tham gia vào 1 cuộc chơi thì việc tuân thủ các Rules là điều hiển nhiên. Tôi rất mong chờ những update mới mẻ của Apple TV cũng như tvOS SDK trong thời gian tới.

Cảm ơn các bạn đã đọc đến tận đây. Chứng tỏ các bạn cũng có niềm đam mê về các nền tảng của Apple nói riêng và IT nói chung. Đúng là “It’s an absolute, incredible…”

in Tech

# Coding Framework

3S Intersoft JSC, 3S Admin

14 November, 2015

Share this post

Tags

Our blogs

Archive