Francesco Novelli presented information on developing apps for Apple TV. He discussed how tvOS allows for the creation of apps specifically for Apple TV using frameworks like UIKit, Metal/OpenGL and AVKit. TVMLKit allows for the creation of apps using HTML and CSS templates. Effective Apple TV app design follows principles of being connected to keep the user engaged, clear with simple and intuitive interfaces, and immersive by utilizing the full screen for content.

1. DEVELOP APPS FOR
(APPLE)TV
Francesco Novelli

2. FRANCESCO NOVELLI
• iOS Developer since 2009
• Web Developer (LAMP)
• Development Book Author
• BLINKAR employee
•  Lovers

3. Thanks to BLINKAR
www.blinkar.com

4. AGENDA
• Apps vs.TV?
• AppleTV!
• tvOS SDK
• TVMLKit
• Design Principle
• Recap

7. SMARTTV!

9. NO!

11. AppleTV
AppleTV 2/3
AppleTV 4
2007
2010 2012
2015

12. APPLETV 4
• Nuovo OS, tvOS
• AppStore
• Nuovo Remote
• Siri

13. TVOS
• Semplice da controllare
• AppStore SOLO perTV
• SDK per sviluppatori
• Basato su iOS (e OSX)
• Game-platform

14. SIRI REMOTE
• Touch Surface (with tap)
• Accelerometer
• Giroscope
• Microphone
• Tasti (menu, play)

15. GAME CONTROLLER
• OPTIONAL
• Più tasti
• Utilizzabile anche per le
interfacce
• Massimo di 2 controller
(più il telecomando)

17. Frameworks
On-demand
Resources
Focus

18. TVOS FRAMEWORKS
• UIKIT
• Metal/OpenGL
• AVKit
• CoreLocation
• CoreImage
• CoreMedia
• ….

19. NEWTVOS FRAMEWORKS
• TVMLJS
• TVMLKit
• TVServices

20. TVSERVICES FRAMEWORK
• Top Shelf
• Utile per le prime 5 app
(Dock)
• Media content
• Velocizzare apertura di
contenuto
• Gestito da tvOS

21. ON-DEMAND RESOURCES
• 200MB AppStore limit
• Tag bundle
• TV è sempre connessa
• Download interface
• Gestione automatica della
cache

22. ICLOUD STORAGE
• TV 32GB o 64GB
• iCloud KVS fino a 1MB
• CloudKit oltre 1MB
• Servizi cloud
• Evitare servizi con login
(GDrive, Dropbox etc)

23. FOCUS DRIVEN DESIGN
• Niente dita sullo schermo
• Indirect Manipulation
• Focus su un elemento
prima del tap
• Far avvicinare l’elemento
all’utente
• Parallax effect

25. FOCUS MODEL
• Standard UIKit Control
• Elementi grandi abbastanza
• Cambio focus fluido
• Rendere il Focus ovvio!!!

26. PARALLAX EFFECT
• Parallax Previewer
• Parallax Exporter (per
Photoshop)
• Effetto grafico integrato in
UIKit
• Do not reinvent the wheel!

29. A B C

30. TVMLKIT

32. func application(application: UIApplication , didFinishLaunchingWithOptions
launchOptions: [ NSObject : AnyObject ]?) -> Bool {
self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
let appControllerContext = TVApplicationControllerContext()
let javascriptURL = NSURL(string: “https://sample.cloud/app.js“)
appControllerContext.javaScriptApplicationURL = javascriptURL!
if let options = launchOptions {
for (kind, value) in options {
if let kindStr = kind as? String {
appControllerContext.launchOptions[kindStr] = value
}
}
}
self.appController = TVApplicationController(context: appControllerContext,
window: self.window, delegate: self)
return true
}

35. TVML
• 1TVML perView
• Template pronti (alert,
catalog, compilation etc)
• HTML Style
• TVML Style (CSS)

36. TVML: PROS AND CONS
• Easy
• Fast
• No ObjC
• No Swift
• Web
• No Flexibility
• No personalization
• Slow
• Network dependent
• No games

37. DESIGN PRINCIPLES
• Connected
• Clear
• Immersive

38. CONNECTED
• Utente eTV devono sentirsi vicini
• Gesture
• Parallax Effect!

39. CLEAR
• Mantenere app semplici
• Utenti devono usare le app in modo istintivo
• Menu Button torna SEMPRE indietro
• Semplice da leggere da lontano
• Nessuna gesture complicata

40. IMMERSIVE
• UsareTUTTA laTV per il contenuto
• edge-to-edge artwork
• Meno elementi grafici possibili

41. Thanks!
Q&A Time
Francesco Novelli
francesco.nove@gmail.com
@if9
http://www.9lli.it/francesco
www.blinkar.com