View
490
Download
0
Category
Preview:
Citation preview
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
Recommended