Development

tvOS Development DATOS DE CONTACTO

ORADORESJuliana Caccavo: juliana.caccavo@globant.com / @JulieCaccavo

Daniel Pilla: daniel.pilla@globant.com / @pilladeMatí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

COMMUNICATIONShello@globant.com / @Globant WANT TO JOIN OUR TEAM?

cv@globant.com

tvOS Development CONTENT

CÓDIGOConstruyendo la app base de tvOS

DESARROLLO CON JSFrameworks: TVMLJS y TVMLKit

INTRODUCCIÓNCaracterísticas, hardware, frameworks y limitaciones

CASOS DE ÉXITODemo

El nuevo paradigma de TV

▸ 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.

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

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

INTRODUCCIÓN

App GroupsBackground Modes

Data ProtectionGame Center

Game ControllersiCloud

In-App PurchaseKeychain Sharing

Address BookApple PayCalendarHealthKitHomeKitiMessage

MapsPersonal VPN

PhotosPush Notifications

Wallet

tvOS: Capacidades Soportadas

tvOS SDK 9.0: Frameworks

INTRODUCCIÓN

WebKitHealthKitHomeKit

Social

Apple TV: Control RemotoEn los países que está disponible Siri, se llama Siri Remote. En el resto, simplemente Apple TV Remote.

INTRODUCCIÓN

Game ControllerINTRODUCCIÓN

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

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

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

UI en tvOS

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

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

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

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

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

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

Un problema común

INTRODUCCIÓN

Solución

1. Crear un UIFocusGuide

2. Setear la preferredFocusedView del objeto

3. Agregarla a la vista padre

4. Usar constraints

INTRODUCCIÓN

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.

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

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

Desarrollando tvOS con JS

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

¿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

¿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

A la fecha hay 18 templates TVML:

DESARROLLO CON JS

DESARROLLO CON JS

Un template TVML se ve así:

¿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

OK, copado… ¿Y qué se banca este TVJS?

DESARROLLO CON JS

Soporte TVJSTVJS soporta un subset de la API del DOM:

DESARROLLO CON JS

Arquitectura de una app TVMLKit Cliente-Servidor

DESARROLLO CON JS

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

DESARROLLO CON JS

Algo como esto

DESARROLLO CON JS

DESARROLLO CON JS

Algo como esto

Algo como esto

DESARROLLO CON JS

DESARROLLO CON JS

Algo como esto

Ok, ok, entiendo… veamos algo más copado

DESARROLLO CON JS

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

Hora de una demo!

DESARROLLO CON JS