Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"

Introduction to the new Apple TV and tvOS

Skype : alex.ozun e-mail: [email protected]

Oleksii Ozun iOS Developer

mailto:[email protected]?subject=

• Platform overview• Client-Server vs Traditional Apps• Parallax effect• Platform limitations• Demo

tv Agenda

tv

Platform overview

• 64-bit dual-core A8 chip• 2GB RAM• 32GB or 64GB of storage• 1080p resolution• HDMI 1.42• USB-C

149$

32GB199$

64GB

tv Specs

Touch surface Accelerometer Gyroscope

Menu Home

Siri

Play/PauseVolume

tv Siri remote

tv 3rd party remotes

Babushka remotesSteelSeries Nimbus

tv

Client-Server vs Traditional apps

Accelerate AudioToolbox AudioUnit AVFoundation AVKit CFNetwork CloudKit CoreBluetooth CoreData CoreFoundation CoreGraphics CoreImage CoreLocation CoreMedia

ModelIO OpenGLES SceneKit Security simd SpriteKit StoreKit Swift Standard Library SystemConfiguration UIKit

CoreSpotlight CoreText CoreVideo Darwin

GameKit GameplayKit GLKit ImageIO MachO MediaAccessibility MediaPlayer MediaToolbox Metal MetalKit MetalPerformanceShaders MobileCoreServices

Foundation GameController

tv Traditional apps

Good Old iOS Frameworks

tv

I know how to program Apple TV!

Traditional apps

tv Client-Server apps

Your App’s business logic, layouts and data live on a

remote server


Your App’s business logic, layouts and data live on a

remote server

While Xcode project’s binary is just an entry

point


TVML - Apple’s Television Markup Language. Provides a set of pre-designed templates for creating layouts for pages.

TVJS - JavaScript framework. Provides a set of APIs for creating client-server app.

TVMLKit - Obj-C/Swift framework. Glues TVML and TVJS files to your Xcode project’s binary.

TV Services - Obj-C/Swift framework. Used to provide a tvOS with content of your app in a way that tvOS could display it to user.

















After your app has been launched by TVMLKit, it is javascript that drives pages flow

tv Client side

TVApplicationControllerContext - provides launch information to the TV application controller

TVApplicationController - establishes the JavaScript environment and provides a centralized point of control and coordination between the JavaScript environment and tvOS

tv Client side

TVApplicationControllerContext TVApplicationControllerContext *appControllerContext = [TVApplicationControllerContext new];

appControllerContext.javaScriptApplicationURL = [[NSURL alloc] initWithString:@«http://localhost:9001/app.js"];

appControllerContext.launchOptions = @{@"BASEURL": @"http://localhost:9001/"};

tv Client side

TVApplicationControllerTVApplicationController *appController = [[TVApplicationController alloc] initWithContext:appControllerContext window:self.window delegate:self];

@property (nonatomic, readonly) UINavigationController *navigationController;

tv Server side

App.onLaunch = function (options) { var resourceLoader = new ResourceLoader(); resourceLoader.loadResource(`Index.xml.js`, function(resource) {

var doc = Presenter.makeDocument(resource); navigationDocument.pushDocument(doc); });

App class - provides access to and a means to respond to app life cycle events

main.js

App.onError

App.onExit

}

tv Server side

NavigationDocument class - provides functions that you use to control the document stack that holds the individual TVML documents for a client-server app

main.js

navigationDocument.pushDocument(document)

navigationDocument.popDocument(document)

navigationDocument.replaceDocument(document)

navigationDocument.presentModal(document)

tv TVML template example

<alertTemplate> <title>Title</title> <description>Description</description> <button> <text>Button</text> </button> </alertTemplate>

Alert view template

tv TVML template exampleCatalog page template

<catalogTemplate> <banner> <title>Title</title> </banner> <list> <section>

<listItemLockup> … </listItemLockup>

<listItemLockup> … </listItemLockup>

</section> </list> </catalogTemplate>

tv Parallax images

tv Parallax imagesParallax effect is a key design element in tvOS

tv Parallax images

How to create one

• Install Parallax Exporter plug-in for Photoshop • Download Apple-provided template • Create layered image and export it as .lsr • Drag it to Xcode image assets

OR • Drag few .png to Xcode to serve as image layers

tv Parallax images

How to create one at runtime

If your app retrieves layered images from a content server at runtime, you must provide those images in runtime layered image .lcr format. You don’t create runtime layered images directly; you generate them from .lsr or Photoshop files using the layerutool command-line tool that’s installed with Xcode

tv Platform limitations

• No persistent local storage for your apps • App size limit is 200 MB • No 4K

Lets get to the Demo!

Linkshttps://developer.apple.com/library/prerelease/tvos/documentation/TVServices/Reference/TVServices_Ref/index.html

https://developer.apple.com/library/prerelease/tvos/documentation/TVMLKit/Reference/TVMLKit_Collection/index.html

https://developer.apple.com/library/prerelease/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/index.html

https://developer.apple.com/library/prerelease/tvos/documentation/TVMLJS/Reference/TVJSFrameworkReference/index.html

https://developer.apple.com/library/prerelease/tvos/documentation/TVMLKit/Reference/TVMLKit_Collection/index.html

Business

Lviv MD Day 2015 Олексій Озун "Introduction to the new Apple TV and TVos"