Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. tvOS
Code

Una introducción al Desarrollo de tvOS

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Introducción

En su evento que se celebra cada mes de Septiembre, además de los nuevos modelos de iPhone y iPad, Apple anunció su muy esperada actualización para el decodificador de Apple TV. Ésta nueva, cuarta generación de Apple TV incluye un poderoso procesador A8, un control remoto habilitado para Siri, una interfaz de usuario remodelada, y lo más importante, una flamante plataforma para aplicaciones y juegos de terceros, que Apple ha llamado tvOS. 

En éste tutorial voy a presentarte el desarrollo de tvOS al crear una aplicación básica de tvOS. Éste tutorial requiere que estés ejecutando Xcode 7.1 o posterior, que incluye soporte para tvOS. También estoy asumiento que ya estás familiarizado con del desarrollo en iOS. 

1. Configuración del Proyecto

Abre Xcode y crea un nuevo proyecto. Inmediatamente notarás que la lista de plantillas incluye una sección para aplicaciones de tvOS. De las plantillas disponibles, elige tvOS > Application > Single View Application.

Project Template

Da click en Next y configura el proyecto como se muestra abajo. He optado por Swift como el lenguaje del proyecto, pero también puedes usar Objective-C para desarrollar aplicaciones tvOS.

Project Settings

Para finalizar la creación del proyecto, especifica a Xcode donde te gustaría guardar el proyecto. Lo primero que notarás es que el proyecto está estructurado casi idénticamente a una aplicación regular iOS. En la captura de pantalla de abajo, puedes ver que tenemos AppDelegate.swift, ViewController.swift, y Main.storyboard.

tvOS App Structure

2. Creando la Interfaz

La principal diferencia que notarás cuando trabajas con tvOS es la creación de la interfaz de usuario para tu aplicación. Cuando abres Main.storyboard, verás una gran pantalla de Apple TV vacía. Si no puedes ver la pantalla completa en el editor, entonces presiona Command-- para aplicar el zoom (alejar).

Blank Apple TV Interface

Ésta pantalla es significativamente más grande por la forma en que son escaladas las aplicaciones tvOS. En el desarrollo moderno de iOS, el maquetado de la interfaz es manejado por el uso de puntos más bien que de pixeles para hacer el desarrollo más fácil en dispositivos con Pantalla Retina.

Por ejemplo, el iPhone 6 y el iPhone 6s tienen una resolución de pantalla de 1334x750, pero solo un tamaño de pantalla, en puntos, de 667x375. Ésto significa que todas las aplicaciones en el dispositivo se ejecutan en escala 2x. Todos los dispositivos iOS de Apple que tienen una Pantalla Retina se ejecutan en una escala 2x, excepto el iPhone Plus y el iPhone 6s Plus, que se ejecutan en una escala 3x.

Sin embargo, la nueva Apple TV, ejecuta aplicaciones en una resolución estándar de 1920x1080 a una escala de 1x. Ésto significa que, cuando se crean aplicaciones tvOS, el tamaño de la pantalla, en puntos, que debes usar cuando creas tu interfaz también es de 1920x1080.

Ahora que conoces como son escaladas y desplegadas las aplicaciones tvOS en la pantalla,podemos comenzar a crear nuestra primera interfaz. De la Object Library (Librería de Objetos) a la derecha, arrastra un Button (Botón) al lado derecho de tu pantalla vacía. Con el botón seleccionado, en la parte inferior de tu editor storyboard, da click en el botón Pin y agrega las siguientes restricciones.

Pin Button
Button constraints

Luego, arrastra una Table View a la izquierda del botón y agrega las siguientes restricciones. También asegúrate que la opción de Update Frames en la parte de abajo esté establecida en All Frames in Container. Observa la captura de pantalla de abajo para que quede claro.

Table View Constraints

Selecciona tu table view, abre el Size Inspector, y establece la propiedad Row Height en 88 como se muestra abajo.

Row Height

Posteriormente, arrastra una Table View Cell desde la Object Library y agrégala a la table view. Con la table view seleccionada, abre el Attributes Inspector y cambia la propiedad Style a Subtitle.

Cell Style

Finalmente, presiona Control en tu teclado y arrastra desde tu table view a tu view controller para establecer el view controller como el delegado y origen de datos de table view.  También puedes hacer ésto usando el Connections inspector a la derecha.

Data Source and Delegate

Al crear la interfaz de tvOS, verás que casi es igual a crear una interfaz de iOS con la mayor diferencia de que es significativamente una escala de elementos más grande.

3. Entendiendo Focus

Ahora enfoquémonos en algo de código. Abre ViewController.swift y remplaza la implementación de la clase ViewController con lo siguiente.

Si estás familiarizado con el desarrollo iOS, entonces la implementación de arriba debería parecerte familiar. Ahora estás listo para ejecutar tu primera aplicación tvOS. Presiona Command-R o da clic en el botón de run (ejecutar) en la parte superior izquierda. Asegúrate que tu test device (dispositivo de prueba) esté establecido en Apple TV 1080p.

Target Device

Una vez que el simulador de Apple TV  ha arrancado y tu aplicación sea lanzada, deberías ver la siguiente pantalla:

tvOS Application

¡Felicitaciones! Ahora tienes tu primera aplicación tvOS funcionando. Para controlar la aplicación, necesitas usar el nuevo control remoto de Apple Tv. Para llevar el remoto al simulador, selecciona Hardware > Show Apple TV Remote del menú o presiona ⌘Command+Shift+R.

Show Apple TV Remote

Una pequeña ventana del remoto debería abrirse junto a la ventana del simulador. Experimenta con el remoto al mantener presionado el botón Option en tu teclado y moviendo el cursor del mouse sobre el remoto. Verás que, mientras mueves el cursor del mouse arriba y abajo, la selección en la table view cambia.

Table item selected

Asimismo, cuando te desplazas a la derecha, el botón de la derecha pasa a estar seleccionado.

Button selected

En el desarrollo de tvOS, ésto se llama cambiar el actual elemento foco. A diferencia de aplicaciones iOS los usuarios pueden pulsar en cualquier lugar en la pantalla en cualquier momento, las aplicaciones tvOS usan un estilo de interacción de apuntar-y-click.

No necesitas hacer ningún trabajo extra como desarrollador para tener tus elementos de interfaz enfocables en un orden lógico. El motor de foco integrado en el framework UIKit en tvOS observa el maquetado de tu interfaz y maneja todo el trabajo de mover el foco de un elemento a otro.

Sin embargo, hay muchos nuevos métodos y propiedades disponibles para que controles programáticamente la forma en la que el foco es manejado en tu aplicación. Muchos de éstos son definidos por el protocolo UIFocusEnvironment, que las clases UIViewController, UIView, UIWindow, y UIPresenteationController automáticamente lo conforman. También hay múltiples métodos contenidos en las versiones de tvOS de los protocolos UITableViewDelegate y UICollectionViewDelegate que pueden ser usados para controlar el foco en tu aplicación.

Como un ejemplo, vamos a hacer el elemento foco predeterminado al botón de la derecha. Si ejecutas la aplicación ahora, verás que el primer elemento de la tabla está inicialmente en el foco. También vamos a deshabilitar el segundo elemento en la table view para que no sea enfocable. Agrega el siguiente fragmento de código a la implementación de la clase ViewController:

Primero anulamos la propiedad preferredFocusedView y regresamos la primera subview, que actualmente es el botón de la derecha. La propiedad preferredFoscuedView es de únicamente lectura y puede ser establecida únicamente al anular su implementación como lo hemos hecho. Cuando el controller view es cargado, el motor de foco encontrará la view retornada por éste propieda y automáticamente la pone en foco.

También hemos implementado el método tableView(_:canFocusRowAtIndexPath:) y retornamos false cuando el indexPath.row es igual a 1. De otra forma retornamos true. Como esperarías, éste metodo delegado determina si una fila específica puede estar o no en foco.

Cuando creas y ejecutas tu aplicación de nuevo, verás que el botón de la derecha automáticamente recibe foco en el lanzamiento. Si el botón de la derecha no recibe foco automáticamente, entonces la jerarquía de view de la aplicación puede ser ligereamente diferente, esto es, la primera subview de la view de controller's view no es igual al botón de la derecha.

También notarás que cuando tratas de navegar por las filas de la table view, la fila de en medio es omitida como se dicta en la implementación del método tableView(_:canFocusRowAtIndexPath:).

4. Componentes y Limitaciones de la Aplicación tvOS.

Debido a que no creamos ninguna imagen en éste tutorial, es importante que entiendas los diferentes componentes que son requeridos para aplicaciones tvOS así como algunas de las limitaciones.

Iconos de la Aplicación

Cada aplicación tvOS deber proporcinar dos íconos de la aplicación:

  • Grande: 1280px x 768px
  • Pequeña: 400px x 240px

La principal diferencia con iOS es que íconos de la aplicación tvOS pueden componerse de hasta tres capas. Ésto es para que el efecto de paralaje pueda lograrse en la pantalla de inicio y en cualquier otro lado en que aparece el ícono de tu aplicación. Si quieres ver éste efecto por tí mismo, ve al simulador de Apple TV, presiona el botón Home en el remoto (el pequeño ícono de TV). Enfoca el ícono de la aplicación Settings y manten presionada la tecla Option mientras se mueve el cursor del mouse alrededor un poco en el remoto. Verás que el ícono de la aplicación responde a tu movimiento y las diferentes capas del ícono producen un bonito efecto.

Imagen de Lanzamiento

Como cualquier otra aplicación iOS, debes proporconar una imagen estática a ser desplegada una vez que tu aplicación ha sido abierta y está cargándose. La principal diferencia es que solo necesitas proporcionar una sola imagen de 1920px x 1080px.

Imágenes Top Shelf

Si tu aplicación ha sido colocada en el Top Shelf por un usuario, cuando es enfocada, puedes desplegar contenido en la misma pantalla de inicio de la Apple TV. Hay tres principales tipos de contenido que puedes desplegar:

  • Static Image (Imagen Estática): Ésta es solo una imagen de 1920px x 720px que proporcionas en el paquete de tu aplicación.
  • Dynamic Content Layouts (Maquetados de Contenido Dinámico): Aquí es donde despliegas una serie de imágenes en una interfaz similar a una collection view. Éstas imágenes pueden ser seleccionadas por tu aplicación en cualquier momento y no tienen que ser incluídas en el paquete de la aplicación. Los tres tamaños de imágenes que puedes usar son 404px x 608px, 608px x 608px, y 908px x 512px. Cualquier combinación de éstos tres tamaños pueden ser utilizados.
  • Scrolling Banner: Aquí es donde proporcionas un conjunto de imágenes de amplia relación de aspecto para mostrar una junto a otra con una de ellas ocupando la mayoría de la pantalla. El tipo de contenido es similar a la página de inicio de la iOS App Store. Éstas imágenes necesitan ser de un tamaño de 1940px x 624px.

Limitaciones

A pesar de que la nueva Apple TV tiene un mayor almacenamiento que la mayoría de los dispositivos iPhone con una capacidad máxima de 32GB, hay algunas limitaciones importantes para aplicaciones tvOS. Primeramente, las aplicaciones no pueden tener un tamaño mayor a 200MB. Cualquier contenido que necesites afuera de éste buffer de 200MB necesitará ser descargado usando la On-Demand Resources API introducida con iOS 9 y ahora tvOS.

Otra cosa de la que también necesitarás estar consciente es que las aplicaciones tvOS no tienen un almacenamiento local persistente. Ésto significa que cualquier dato que necesites retener entre lanzamientos de aplicaciones, como guardado de juegos, fotos y videos, necesitarán ser guardados en iCloud y tomados cuando se necesiten.

Conclusión

Debido a que no hemos escrito mucho código en éste tutorial, espero que haya servido como una buena introducción a la plataforma tvOS. Ahora sabes las similitudes y diferencias clave entre desarrollar aplicaciones para iOS y tvOS así como las limitaciones impuestas a los desarrolladores.

En futuros tutoriales, nos adentraremos más en tvOS y descubriremos lo que es posible en tvOS y la nueva Apple TV.

Como siempre, deja tus comentarios y sugerencias en la sección de abajo.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.