[globant summer take over] apple tv development
TRANSCRIPT
![Page 1: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/1.jpg)
![Page 2: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/2.jpg)
Development
![Page 3: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/3.jpg)
tvOS Development DATOS DE CONTACTO
ORADORESJuliana Caccavo: [email protected] / @JulieCaccavo
Daniel Pilla: [email protected] / @pilladeMatías Fernandez: [email protected] / @MatiasSF9
Gerónimo Garcia: [email protected] / @geronimogarcia Pablo Vittori: [email protected] / @pablovittori
Matías Burcheri: [email protected] / @matbur
[email protected] / @Globant WANT TO JOIN OUR TEAM?
![Page 4: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/4.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/5.jpg)
El nuevo paradigma de TV
![Page 6: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/6.jpg)
▸ 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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/7.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/8.jpg)
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
![Page 9: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/9.jpg)
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
![Page 10: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/10.jpg)
tvOS SDK 9.0: Frameworks
INTRODUCCIÓN
WebKitHealthKitHomeKit
Social
![Page 11: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/11.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/12.jpg)
Game ControllerINTRODUCCIÓN
![Page 13: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/13.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/14.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/15.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/16.jpg)
UI en tvOS
![Page 17: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/17.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/18.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/19.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/20.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/21.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/22.jpg)
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: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/23.jpg)
Un problema común
INTRODUCCIÓN
![Page 24: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/24.jpg)
Solución
1. Crear un UIFocusGuide
2. Setear la preferredFocusedView del objeto
3. Agregarla a la vista padre
4. Usar constraints
INTRODUCCIÓN
![Page 25: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/25.jpg)
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 26: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/26.jpg)
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
![Page 27: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/27.jpg)
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
![Page 28: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/28.jpg)
Desarrollando tvOS con JS
![Page 29: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/29.jpg)
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 30: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/30.jpg)
¿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
![Page 31: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/31.jpg)
¿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
![Page 32: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/32.jpg)
A la fecha hay 18 templates TVML:
DESARROLLO CON JS
![Page 33: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/33.jpg)
DESARROLLO CON JS
Un template TVML se ve así:
![Page 34: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/34.jpg)
¿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 35: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/35.jpg)
OK, copado… ¿Y qué se banca este TVJS?
DESARROLLO CON JS
![Page 36: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/36.jpg)
Soporte TVJSTVJS soporta un subset de la API del DOM:
DESARROLLO CON JS
![Page 37: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/37.jpg)
Arquitectura de una app TVMLKit Cliente-Servidor
DESARROLLO CON JS
![Page 38: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/38.jpg)
Arquitectura de una app TVMLKit (cont.)Flujo de interacción de una app simple Cliente-Servidor:
DESARROLLO CON JS
![Page 39: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/39.jpg)
Algo como esto
DESARROLLO CON JS
![Page 40: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/40.jpg)
DESARROLLO CON JS
Algo como esto
![Page 41: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/41.jpg)
Algo como esto
DESARROLLO CON JS
![Page 42: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/42.jpg)
DESARROLLO CON JS
Algo como esto
![Page 43: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/43.jpg)
Ok, ok, entiendo… veamos algo más copado
DESARROLLO CON JS
![Page 44: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/44.jpg)
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 45: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/45.jpg)
Hora de una demo!
DESARROLLO CON JS
![Page 46: [Globant Summer Take Over] Apple Tv Development](https://reader035.vdocuments.net/reader035/viewer/2022062412/58aa4a631a28ab4c348b6c05/html5/thumbnails/46.jpg)