WatchKit (I): Introducción y primeros pasos

En este primer artículo del monográfico sobre WatchKit haremos una introducción general, y cubriremos todos lo necesario para hacer apps para Apple Watch.

Introducción

WatchKit es un framework lanzado por Apple para permitirnos hacer apps para el próximo Apple Watch que saldrá al mercado el próximo día 24 de abril de 2015 (en España seguramente unas semanas más tarde).

Ya se encuentra en versión definitiva (hasta ahora era una beta), aunque aún es posible que algunas cosas fallen, sean modificadas, o se incorporen nuevas funcionalidades.

¿Qué es una Apple Watch app?

Con esta primera versión de WatchKit, una app para Apple Watch no es mas que una extensión de una app para iPhone, es decir, que es código que se encontrará dentro de “la versión” iPhone de nuestra app.

Por tanto a día de hoy no es posible desarrollar apps independientes para Apple Watch, aunque quizas esto sea algo que podamos ver en el futuro.

Todo esto significa realmente que la arquitectura actual para Apple Watch esta formado por dos elementos:

• Apple Watch app: que es fundamentalmente la interfaz de usuario que tendrá nuestra app en Apple Watch y todos aquellos recursos gráficos necesarios para mostrarla.
• iPhone app: que es donde residirá toda la lógica de la app para Apple Watch, donde se desencadenaran los eventos que produzcan los elementos de la interfaz de usuario como IBOutlets o IBActions.

Elementos de interfaz en Apple Watch

A día de hoy, contamos con una serie de métodos de presentación que debemos conocer para poder utilizar aquellos que mas nos interesen en cada caso.

Estos métodos son:

• Glance: es un pequeño resumen de información de solo lectura, que podemos mostrar en el Apple Watch, pero el usuario no podrá interactuar con él. No se pueden poner botones o controles. Desde este glance lo único que puede hacer el usuario es lanzar la app.
• Notificaciones: podemos recibir notificaciones en el Apple Watch y personalizar las acciones que el usuario puede realizar sobre la misma, al igual que ocurre con la llegada de iOS 8 en el iPhone o iPad. Por ejemplo, ante una alerta de una app de mensajería podríamos establecer la acción de “Responder.”
• Extensión: que como indicábamos al principio no es mas que una forma de trabajar donde el Apple Watch contiene una vista, con la que al actuar, se ejecuta cierta lógica en la parte de la app que corre en nuestro iPhone.

Como decíamos, es posible que en 2015 Apple nos proporcione una forma de hacer apps nativas para Apple Watch, que no requieran del iPhone para ejecutarse, pero esto es algo que no sabremos hasta que Apple decida desvelarnoslo.

Añadiendo la extensión para Apple Watch a nuestra app

Para poder hacer que nuestra app interactúe con el Apple Watch es tan sencillo como añadir un nuevo target en Xcode. Dentro del apartado iOS / Apple Watch existe un nuevo elemento denominado Watch App.

Añadiendo este nuevo target conseguiremos los siguientes elementos:

• Un nuevo target para compilar para Apple Watch
• Un nuevo scheme
• Dos nuevos grupos: uno para la extensión de nuestra app, y otro para los elementos de la app para Apple Watch.

Para añadir este nuevo target a una app existente es bien sencillo, nos dirigiremos al menú File / New / Target.

Entonces, nos permitirá escoger qué target queremos utilizar y será donde indiquemos que deseamos un Watch App.

Xcode nos mostrará una pantalla donde podremos configurar unos mínimos parámetros de éste nuevo target.

Entre las opciones vemos que podemos directamente incluir un interfaz para notificaciones o glances.

Al pulsar continuar, Xcode nos preguntará si queremos activar el target que acabamos de crear. Pulsaremos Activate.

Este nuevo target, como comentábamos al principio nos generará un nuevo target y scheme, pero ademas creará por nosotros dos nuevos grupos de archivos en el proyecto, uno para la extensión que tendrá nuestra app de iOS para controlar la de Apple Watch, y otro para albergar los archivos de la app de Apple Watch.

Posicionando elementos de UI en nuestra app

Por defecto, en Apple Watch los elementos de UI que vamos añadiendo se posicionan uno debajo del otro a modo de pila. Aunque pueden estar en cualquier orden que deseemos, no es posible superponer un elemento sobre otro.

Es posible establecer una distribución vertical de los elementos (por defecto), pero también es posible hacer lo mismo en horizontal.

En lo que se refiere a la alineación vertical podemos indicar los siguientes tres valores para nuestros elementos:

• Top
• Center
• Bottom

Lo mismo ocurre para la alineación horizontal, donde podemos indicar los siguientes valores para nuestros elementos de la interfaz:

• Left
• Center
• Right

Hay que tener siempre en cuenta la regla de que los elementos no pueden superponerse, es decir que si indicamos a una imagen que su posición sea Top / Left y a otra Top / Right, nunca quedarán a la misma altura, sino una en una fila y otra en la siguiente.

Groups

¿Y como podemos hacer para poner dos elementos en la misma fila?

Para ello tenemos un elemento denominado Group, que no son mas que contenedores, que nos van a permitir agrupar elementos para poder distribuirlos vertical u horizontalmente.

Normalmente utilizaremos los grupos para ajustar a nuestro antojo la distribución de los elementos que componen la interfaz, pero los grupos en si, son otro elemento de interfaz cuya apariencia podemos personalizar (color de fondo, imagen de fondo, bordes redondeados, etc.).

Vamos a hacer una pequeña prueba para que podamos ver visualmente a que nos referimos con el uso de grupos.

Abrimos el archivo Interface.storyboard que básicamente es el Storyboard que representa la interfaz de usuario que se mostrará en el Apple Watch para nuestra app.

A continuación añadimos una imagen al Storyboard desde la librería de objetos como si de una app normal se tratase.

Una vez añadida, veremos que por defecto se sitúa en la Top / Left de la interfaz.

Vamos a añadir una segunda imagen y configurarla para que se posicione en Top / Right.

Como podemos comprobar, las imágenes no quedan situadas una al lado de la otra, sino que como la regla general es que dos elementos no se pisen uno sobre otro, la interfaz las distribuye verticalmente de forma automática.

Si queremos que ambas imágenes se posiciones en la misma linea horizontal, tendremos que añadir un grupo para lograrlo. Añadimos un grupo y lo configuramos como Top / Center.

Ahora, mediante drag & drop, arrastramos ambas imágenes de una en una en el interior del grupo que acabamos de crear. Veremos que el resultado final es casi lo esperado, pero aún nos falta un detalle, ambas imágenes deben ocupar cada una la mitad del espacio disponible.

Para ello, seleccionaremos ambas imágenes y configuraremos el ancho de las imágenes en la pestaña Attributes inspector, indicando en el apartado Width el valor Relative to Container. De esta forma, estamos diciendo que el ancho de las imágenes viene determinado por el ancho de su contenedor, es decir el grupo.

Si indicamos un valor de 0,5 en el campo que se muestra a continuación, veremos como ahora si, cada imagen se ajusta al 50% del espacio disponible.

Conclusión

WatchKit, junto con Swift nos abren un nuevo universo de posibilidades, que tenéis a vuestro alcance con muy poquito esfuerzo. En el siguiente artículo profundizaremos un poco más en los diferentes elementos que pueden componer nuestra interfaz, en el uso del simulador de Apple Watch y otras muchas cosas.

Swift

Si os hacéis un lío con el código Swift de este artículo, es porque aún no conocéis nuestro Curso Swift en español.

Podéis aprovecharos de nuestro nuevo precio con un descuento del 50% en la siguiente dirección:

https://www.udemy.com/swift-en-espanol/?couponCode=WATCHKIT

¡Disfrutarlo y nos vemos en el siguiente artículo!