Transcript
Page 1: Apple tv development Meetup - Montevideo  Uruguay
Page 2: Apple tv development Meetup - Montevideo  Uruguay

Development

Page 4: Apple tv development Meetup - Montevideo  Uruguay

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

Page 5: Apple tv development Meetup - Montevideo  Uruguay

El nuevo paradigma de TV

Page 6: Apple tv development Meetup - Montevideo  Uruguay

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

Page 7: Apple tv development Meetup - Montevideo  Uruguay

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

Page 8: Apple tv development Meetup - Montevideo  Uruguay

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.

▸ 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

Page 9: Apple tv development Meetup - Montevideo  Uruguay

INTRODUCCIÓN

App GroupsBackground Modes

Data ProtectionGame Center

Game ControllersiCloud

In-App PurchaseKeychain Sharing

Address BookApple PayCalendarHealthKitHomeKitiMessage

MapsPersonal VPN

PhotosPush Notifications

Wallet4K

tvOS: Capacidades Soportadas

Page 10: Apple tv development Meetup - Montevideo  Uruguay

tvOS SDK 9.0: Frameworks

INTRODUCCIÓN

WebKitHealthKitHomeKit

Social

Page 11: Apple tv development Meetup - Montevideo  Uruguay

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

INTRODUCCIÓN

Page 12: Apple tv development Meetup - Montevideo  Uruguay

Game ControllerINTRODUCCIÓN

Page 13: Apple tv development Meetup - Montevideo  Uruguay

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

Page 14: Apple tv development Meetup - Montevideo  Uruguay

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

Page 15: Apple tv development Meetup - Montevideo  Uruguay

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

Page 16: Apple tv development Meetup - Montevideo  Uruguay

UI en tvOS

Page 17: Apple tv development Meetup - Montevideo  Uruguay

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

Page 18: Apple tv development Meetup - Montevideo  Uruguay

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

Page 19: Apple tv development Meetup - Montevideo  Uruguay

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

Page 20: Apple tv development Meetup - Montevideo  Uruguay

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

Page 21: Apple tv development Meetup - Montevideo  Uruguay

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

Page 22: Apple tv development Meetup - Montevideo  Uruguay

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

Page 23: Apple tv development Meetup - Montevideo  Uruguay

Cómo saber qué vista va a ser focalizada?

● Poner un breakpoint dentro de los metodos shouldUpdateFocusInContext: o didUpdateFocusInContext:withAnimationCoordinator:

INTRODUCCIÓN

Page 24: Apple tv development Meetup - Montevideo  Uruguay

Cómo saber qué vista va a ser focalizada?

INTRODUCCIÓN

Page 25: Apple tv development Meetup - Montevideo  Uruguay

Un problema común

INTRODUCCIÓN

Page 26: Apple tv development Meetup - Montevideo  Uruguay

Solución

1. Crear un UIFocusGuide

2. Setear la preferredFocusedView del objeto

3. Agregarla a la vista padre

4. Usar constraints

INTRODUCCIÓN

Page 27: Apple tv development Meetup - Montevideo  Uruguay

Gestures: Tap

● Nos permite detectar que un botón del control remoto fue presionado.● Ejemplo:

let tapRecognizer = UITapGestureRecognizer(target: self, action: “tapped:”)

tapRecognizer.allowedPressTypes = [NSNumber(integer: UIPressType.PlayPause.rawValue)];

self.view.addGestureRecognizer(tapRecognizer)

INTRODUCCIÓN

Page 28: Apple tv development Meetup - Montevideo  Uruguay

Gestures: Swipe

● Nos permite detectar movimientos sobre el touchpad del control remoto.● Ejemplo:

let swipeRecognizer = UISwipeGestureRecognizer(target: self, action: “tapped:”)

tapRecognizer.direction = .Right

self.view.addGestureRecognizer(swipeRecognizer)

INTRODUCCIÓN

Page 29: Apple tv development Meetup - Montevideo  Uruguay

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.

Page 30: Apple tv development Meetup - Montevideo  Uruguay

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 jerarquía.

● 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 extensión, cuya clase principal implemente el protocolo TVTopShelfProvider

INTRODUCCIÓN

Page 31: Apple tv development Meetup - Montevideo  Uruguay

TVContentItem

La clase TVContentItem tiene una propiedad llamada imageShape que nos 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

Page 32: Apple tv development Meetup - Montevideo  Uruguay

Desarrollando tvOS con JS

Page 33: Apple tv development Meetup - Montevideo  Uruguay

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

Page 34: Apple tv development Meetup - Montevideo  Uruguay

¿Qué es TVMLKit?

▸ Framework para aplicaciones nativas

▸ Controla contexto y configuración de la app

▸ Punto de entrada nativo para apps TVJS

▸ Crear elementos custom con TVElementFactory

DESARROLLO CON JS

Page 35: Apple tv development Meetup - Montevideo  Uruguay

¿Qué es TVML?

▸ 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

Page 36: Apple tv development Meetup - Montevideo  Uruguay

A la fecha hay 18 templates TVML:

DESARROLLO CON JS

Page 37: Apple tv development Meetup - Montevideo  Uruguay

DESARROLLO CON JS

Un template TVML se ve así:

Page 38: Apple tv development Meetup - Montevideo  Uruguay

¿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

Page 39: Apple tv development Meetup - Montevideo  Uruguay

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

DESARROLLO CON JS

Page 40: Apple tv development Meetup - Montevideo  Uruguay

Soporte TVJSTVJS soporta un subset de la API del DOM:

DESARROLLO CON JS

Page 41: Apple tv development Meetup - Montevideo  Uruguay

Arquitectura de una app TVMLKit Cliente-Servidor

DESARROLLO CON JS

Page 42: Apple tv development Meetup - Montevideo  Uruguay

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

DESARROLLO CON JS

Page 43: Apple tv development Meetup - Montevideo  Uruguay

Algo como esto

DESARROLLO CON JS

Page 44: Apple tv development Meetup - Montevideo  Uruguay

DESARROLLO CON JS

Algo como esto

Page 45: Apple tv development Meetup - Montevideo  Uruguay

Ok, ok, entiendo… y para que sirve?

DESARROLLO CON JS

Page 46: Apple tv development Meetup - Montevideo  Uruguay

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

Page 47: Apple tv development Meetup - Montevideo  Uruguay

Hora de una demo!

DESARROLLO CON JS

Page 48: Apple tv development Meetup - Montevideo  Uruguay

Top Related