Mar del Plata Summer Take Over Presentation 2016 - By Matías Burcheri, Juliana Caccavo, Gero García Sgritta

2. Development

3. tvOS Development DATOS DE CONTACTO
ORADORES
Juliana Caccavo: juliana.caccavo@globant.com / @JulieCaccavo
Daniel Pilla: daniel.pilla@globant.com / @pillade
Matías Fernandez: mr.fernandez@globant.com / @MatiasSF9
Gerónimo Garcia: geronimo.garcia@globant.com / @geronimogarcia
Pablo Vittori: vitto@globant.com / @pablovittori
Matías Burcheri: matias.burcheri@globant.com / @matbur
COMMUNICATIONS
hello@globant.com / @Globant
WANT TO JOIN OUR TEAM?
cv@globant.com

4. tvOS Development CONTENT
CÓDIGO
Construyendo la app base de tvOS
DESARROLLO CON JS
Frameworks: TVMLJS y TVMLKit
INTRODUCCIÓN
Características, hardware, frameworks y limitaciones
CASOS DE ÉXITO
Demo

5. El nuevo paradigma de TV

6. ▸ Nuevo sistema operativo para Apple TV (4ta Gen).
▸ Primer SO para Apple TV abierto a terceros para desarrollo.
▸ Basado en iOS: conceptos similares y soporte a frameworks como Metal, UIKit, CloudKit, entre otros.
▸ tvOS SDK 9.0 agrega además nuevos frameworks propios.
▸ Trae al Apple TV un App Store propio y soporte para Siri.
INTRODUCCIÓN
tvOS: El futuro de la TV son las Apps
Objetivo → Proporcionar una experiencia de usuario mucho mas completa, haciendo énfasis en la
interacción, ya sea a través redes sociales, juegos, o nuevos contenidos.

7. Hardware: Apple TV 4ta Gen
▸ 64-bit A8 processor
▸ 32GB or 64GB of storage
▸ 2GB of RAM
▸ 10/100Mbps Ethernet
▸ WiFi 802.11a/b/g/n/ac
▸ 1080p resolution
▸ HDMI
▸ New Siri Remote / Apple TV Remote
▸ Bluetooth 4.0
INTRODUCCIÓN

8. El tamaño de una aplicación está limitado a 200 MB.
Una app solo dispone de 500 KB de almacenamiento local para persistencia (NSUserDefaults).
Opciones para manejar estos recursos:
▸ Almacenar y obtener información de usuarios desde iCloud (CloudKit y iCloud KVS).
▸ Descargar la información necesaria a la caché → Mientras la aplicación esté corriendo, la caché no
elimina datos descargados. Usar caché de manera criteriosa.
▸ Acceder a assets de solo lectura a traves de On-demand Resources - Hasta 20 GB. (iOS 9 y tvOS)
Aplicaciones más chicas, Lazy loading de recursos, Almacenamiento remoto de recursos poco frecuentes.
INTRODUCCIÓN
Hardware: Almacenamiento

9. INTRODUCCIÓN
App Groups
Background Modes
Data Protection
Game Center
Game Controllers
iCloud
In-App Purchase
Keychain Sharing
Address Book
Apple Pay
Calendar
HealthKit
HomeKit
iMessage
Maps
Personal VPN
Photos
Push Notifications
Wallet
tvOS: Capacidades Soportadas

10. tvOS SDK 9.0: Frameworks
INTRODUCCIÓN
WebKit
HealthKit
HomeKit
Social

11. Apple TV: Control Remoto
En los países que está disponible Siri, se llama Siri Remote. En el resto, simplemente Apple TV Remote.
INTRODUCCIÓN

12. Game Controller
INTRODUCCIÓN

13. Requerimientos para Juegos
▸ Deben soportar el Control Remoto.
▸ Si soportan Game Controllers, deben soportar extended control layout.
▸ Se deben poder jugar usando standalone controllers (conforman con protocolo MFI).
▸ Deben soportar el botón de Pausa.
INTRODUCCIÓN

14. Apple TV Remote como Game Controller
▸ El touchpad se puede usar como D-pad. Provee datos analógicos como input.
▸ Se puede usar tanto con orientación portrait como landscape.
▸ El touchpad además funciona como botón principal al hacer click (botón A).
▸ El botón de Play/Pause es otro botón digital (botón X).
▸ El botón de Menú funciona como Pausa.
INTRODUCCIÓN

15. Limitaciones del Simulador
● Acelerometro
● Siri
● MetalKit
→ El control remoto físico se puede conectar al simulador para probar el Acelerómetro y Siri.
INTRODUCCIÓN

16. UI en tvOS

17. No Mouse y No Touch
En cambio, el nuevo Control Remoto Siri y los Game Controllers
Macs y dispositivos iOS son generalmente para usuarios individuales
Con el nuevo Apple TV, la experiencia de usuario es mucho más social. Varias personas pueden interactuar
a la misma vez con una aplicación.
→ Es fundamental diseñar aplicaciones que aprovechen al máximo estos cambios ←
INTRODUCCIÓN
UI: Nuevos desafíos

18. Un nuevo concepto: Foco
▸ Es el efecto que se ve en pantalla cuando un usuario interactúa con la aplicación. En Apple TV esta
interacción se realiza mediante un control remoto.
▸ Estar en foco implica que el usuario puede interactuar con esa vista.
▸ El framework de UIKit solo soporta interfaces orientadas al uso de foco.
▸ Solo las vistas pueden recibir foco
▸ Solo una vista puede estar en foco al mismo tiempo
INTRODUCCIÓN

19. Focus Engine
▸ Es el encargado de manejar el foco.
▸ Cuando la jerarquía de vistas cambia, el Focus Engine genera un mapa con las vistas que aceptan
foco.
▸ Si un usuario navega en una dirección, el Focus Engine busca vistas en esa dirección chequeando
tamaños y posiciones relativas.
INTRODUCCIÓN

20. Clases que reciben foco
● UIButton
● UIControl
● UISegmentedControl
● UITabBar
● UITextField
● UISearchBar (Una UISearchBar no es focalizable pero su textField si)
● UIImageView (tiene una propiedad adjustImageWhenAncestorFocused)
● UICollectionViewCell / UITableViewCell son excepciones. El foco se determina en el delegado:
○ collectionView(_:canFocusItemAtIndexPath:)
○ tableView(_:canFocusRowAtIndexPath:)
INTRODUCCIÓN

21. Foco actual
● Se puede consultar a cualquier vista si está actualmente en foco:
myButton.focused // true o false
● También se puede consultar a una UIScreen cuál es la vista focalizada actualmente (puede no haber
ninguna)
UIScreen.mainScreen().focusedView
● Se puede debuggear una vista para ver porque no está siendo focalizada:
self.myButton.performSelector(Selector("_whyIsThisViewNotFocusable"))
ISSUE: This view has userInteractionEnabled set to NO. Views must allow user interaction to be
focusable.
INTRODUCCIÓN

22. Actualizando el foco
● Solo el Focus Engine puede actualizar un foco.
● Para interactuar con el Focus Engine existe un protocolo: UIFocusEnvironment
setNeedsFocusUpdate() → El foco va a ser actualizado durante el próximo ciclo
updateFocusIfNeeded() → Fuerza una actualización del foco inmediata
● En cada ciclo, el Focus Engine pregunta por la propiedad preferredFocusedView. Si no es nula y es una
vista focalizable, entonces el Focus Engine va a seleccionar esa vista.
INTRODUCCIÓN

23. Un problema común
INTRODUCCIÓN

24. Solución
1. Crear un UIFocusGuide
2. Setear la preferredFocusedView del objeto
3. Agregarla a la vista padre
4. Usar constraints
INTRODUCCIÓN

25. Top Shelf
● Es el área superior que aparece en el menú
● Muestra contenido particular de una
aplicación y permite la interacción con ellos.
INTRODUCCIÓN
Importante: Como mínimo, cada aplicación tiene que tener una imagen estática que pueda ser mostrada
cuando la aplicación se encuentre en foco y en la fila superior de la pantalla principal.

26. TV Services
● Permite describir contenido de la aplicación al sistema operativo.
● Qué tenemos que hacer?
● Organizar el contenido que queremos mostrar en una lista simple o en un modelo de jerarquia.
● Crear un objeto de la clase TVContentItem para cada contenido que vamos a mostrar
● Diseñar un algoritmo que devuelva cada TVContentItem con un identificador único.
● Agregar una extension, cuya clase principal implemente el protocolo TVTopShelfProvider
INTRODUCCIÓN

27. TVContentItem
TVContentItem tiene una propiedad llamada imageShape que permite setear la forma deseada del
contenido.
● None → Sin forma
● Poster → Aspect ratio 2:3
● Square → Aspect ratio 1:1
● HDTV → Aspect ratio 16:9
● SDTV → Aspect ratio 4:3
● Wide → Aspect ratio 8:3
● Extrawide → Aspect ratio 80:27
INTRODUCCIÓN

28. Desarrollando tvOS con JS

29. Nuevos frameworks para tvOS
Apple introduce los siguientes frameworks nuevos, específicos para tvOS:
▸ TVMLKit: Provee una manera de incorporar JavaScript y elementos TVML en tu aplicación.
▸ TVJS: Describe la API JavaScript utilizada para cargar las páginas TVML que se utilizan para
mostrar información en aplicaciones cliente-servidor.
▸ TVML: Un lenguaje de markup similar a XML que adhiere a algunos templates de Apple.
DESARROLLO CON JS

30. ¿Qué es TVMLKit?
▸ Framework para aplicaciones nativas
▸ Controla contexto y configuración de la app
▸ Punto de entrada para apps TVJS
▸ Crear elementos custom con TVElementFactory
DESARROLLO CON JS

31. ¿Qué es TVMLKit? (cont.)
▸ Television Markup Language
▸ Lenguaje declarativo basado en XML para templates tvOS
▸ Cada página está construida en base a un template TVML
▸ Hay elementos simples y compuestos
DESARROLLO CON JS

32. A la fecha hay 18 templates TVML:
DESARROLLO CON JS

33. DESARROLLO CON JS
Un template TVML se ve así:

34. ¿Qué es TVJS?
▸ Conjunto de APIs para crear aplicaciones cliente-servidor
▸ Incorpora un subset del DOM
▸ Usa el motor JavaScript Nitro
▸ Soporta un poco de la sintaxis ES6:
■ Clases y herencia
■ String templates
■ Symbol
■ Object shorthands
DESARROLLO CON JS
ECMAScript 6 Compatibility Table

35. OK, copado… ¿Y qué se banca
este TVJS?
DESARROLLO CON JS

36. Soporte TVJS
TVJS soporta un subset de la API del DOM:
DESARROLLO CON JS

37. Arquitectura de una app TVMLKit Cliente-Servidor
DESARROLLO CON JS

38. Arquitectura de una app TVMLKit (cont.)
Flujo de interacción de una app simple Cliente-Servidor:
DESARROLLO CON JS

39. Algo como esto
DESARROLLO CON JS

40. DESARROLLO CON JS
Algo como esto

41. Algo como esto
DESARROLLO CON JS

42. DESARROLLO CON JS
Algo como esto

43. Ok, ok, entiendo… veamos algo
más copado
DESARROLLO CON JS

44. Plex.tv
▸ Fotos, música, streaming de video.
▸ Mix de Native y TVML.
▸ Desarrollado en solo 5 semanas.
▸ Muchos features.
▸ XSLT a TVML (copado!).
▸ Se ve INCREÍBLE.
DESARROLLO CON JS

45. Hora de una demo!
DESARROLLO CON JS