Development
tvOS Development DATOS DE CONTACTO
ORADORES
Juliana Caccavo: juliana.caccavo@globant.com / @JulieCaccavo
Daniel Pilla: dan...
tvOS Development CONTENT
CÓDIGO
Construyendo la app base de tvOS
DESARROLLO CON JS
Frameworks: TVMLJS y TVMLKit
INTRODUCCI...
El nuevo paradigma de TV
▸ Nuevo sistema operativo para Apple TV (4ta Gen).
▸ Primer SO para Apple TV abierto a terceros para desarrollo.
▸ Basado ...
Hardware: Apple TV 4ta Gen
▸ 64-bit A8 processor
▸ 32GB or 64GB of storage
▸ 2GB of RAM
▸ 10/100Mbps Ethernet
▸ WiFi 802.1...
El tamaño de una aplicación está limitado a 200 MB.
Una app solo dispone de 500 KB de almacenamiento local para persistenc...
INTRODUCCIÓN
App Groups
Background Modes
Data Protection
Game Center
Game Controllers
iCloud
In-App Purchase
Keychain Shar...
tvOS SDK 9.0: Frameworks
INTRODUCCIÓN
WebKit
HealthKit
HomeKit
Social
Apple TV: Control Remoto
En los países que está disponible Siri, se llama Siri Remote. En el resto, simplemente Apple TV R...
Game Controller
INTRODUCCIÓN
Requerimientos para Juegos
▸ Deben soportar el Control Remoto.
▸ Si soportan Game Controllers, deben soportar extended con...
Apple TV Remote como Game Controller
▸ El touchpad se puede usar como D-pad. Provee datos analógicos como input.
▸ Se pued...
Limitaciones del Simulador
● Acelerometro
● Siri
● MetalKit
→ El control remoto físico se puede conectar al simulador para...
UI en tvOS
No Mouse y No Touch
En cambio, el nuevo Control Remoto Siri y los Game Controllers
Macs y dispositivos iOS son generalment...
Un nuevo concepto: Foco
▸ Es el efecto que se ve en pantalla cuando un usuario interactúa con la aplicación. En Apple TV e...
Focus Engine
▸ Es el encargado de manejar el foco.
▸ Cuando la jerarquía de vistas cambia, el Focus Engine genera un mapa ...
Clases que reciben foco
● UIButton
● UIControl
● UISegmentedControl
● UITabBar
● UITextField
● UISearchBar (Una UISearchBa...
Foco actual
● Se puede consultar a cualquier vista si está actualmente en foco:
myButton.focused // true o false
● También...
Actualizando el foco
● Solo el Focus Engine puede actualizar un foco.
● Para interactuar con el Focus Engine existe un pro...
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 const...
Top Shelf
● Es el área superior que aparece en el menú
● Muestra contenido particular de una
aplicación y permite la inter...
TV Services
● Permite describir contenido de la aplicación al sistema operativo.
● Qué tenemos que hacer?
● Organizar el c...
TVContentItem
TVContentItem tiene una propiedad llamada imageShape que permite setear la forma deseada del
contenido.
● No...
Desarrollando tvOS con JS
Nuevos frameworks para tvOS
Apple introduce los siguientes frameworks nuevos, específicos para tvOS:
▸ TVMLKit: Provee una...
¿Qué es TVMLKit?
▸ Framework para aplicaciones nativas
▸ Controla contexto y configuración de la app
▸ Punto de entrada pa...
¿Qué es TVMLKit? (cont.)
▸ Television Markup Language
▸ Lenguaje declarativo basado en XML para templates tvOS
▸ Cada pági...
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 Jav...
OK, copado… ¿Y qué se banca
este TVJS?
DESARROLLO CON JS
Soporte TVJS
TVJS 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.
...
Hora de una demo!
DESARROLLO CON JS
Apple TV Meet Up Slides
Apple TV Meet Up Slides
Próxima SlideShare
Cargando en…5
×

Apple TV Meet Up Slides

552 visualizaciones

Publicado el

Presentación de nuestro Apple TV Meet Up el jueves 12 de Noviembre del 2015, por Globant

Publicado en: Móvil
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
552
En SlideShare
0
De insertados
0
Número de insertados
4
Acciones
Compartido
0
Descargas
2
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

Apple TV Meet Up Slides

  1. 1. Development
  2. 2. 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
  3. 3. 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
  4. 4. El nuevo paradigma de TV
  5. 5. ▸ 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.
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. tvOS SDK 9.0: Frameworks INTRODUCCIÓN WebKit HealthKit HomeKit Social
  10. 10. 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
  11. 11. Game Controller INTRODUCCIÓN
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. UI en tvOS
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Un problema común INTRODUCCIÓN
  23. 23. Solución 1. Crear un UIFocusGuide 2. Setear la preferredFocusedView del objeto 3. Agregarla a la vista padre 4. Usar constraints INTRODUCCIÓN
  24. 24. 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.
  25. 25. 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
  26. 26. 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
  27. 27. Desarrollando tvOS con JS
  28. 28. 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
  29. 29. ¿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
  30. 30. ¿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
  31. 31. A la fecha hay 18 templates TVML: DESARROLLO CON JS
  32. 32. DESARROLLO CON JS Un template TVML se ve así:
  33. 33. ¿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
  34. 34. OK, copado… ¿Y qué se banca este TVJS? DESARROLLO CON JS
  35. 35. Soporte TVJS TVJS soporta un subset de la API del DOM: DESARROLLO CON JS
  36. 36. Arquitectura de una app TVMLKit Cliente-Servidor DESARROLLO CON JS
  37. 37. Arquitectura de una app TVMLKit (cont.) Flujo de interacción de una app simple Cliente-Servidor: DESARROLLO CON JS
  38. 38. Algo como esto DESARROLLO CON JS
  39. 39. DESARROLLO CON JS Algo como esto
  40. 40. Algo como esto DESARROLLO CON JS
  41. 41. DESARROLLO CON JS Algo como esto
  42. 42. Ok, ok, entiendo… veamos algo más copado DESARROLLO CON JS
  43. 43. 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
  44. 44. Hora de una demo! DESARROLLO CON JS

×