Primer WatchKit App: Interfaz de Usuario

Standard

Como lo prometí en una entrega anterior esta semana voy a hablar del desarrollo de aplicaciones con el Apple Watch, que funcionan como extensiones de una App para iPhone, esto como introducción para publicaciones posteriores, ya que al momento de escribir esta publicación se acaba de liberar una nueva actualización del watchOS2 donde ya nos permite desarrollar apps nativas donde el desempeño es mucho mejor y te da acceso a más funciones del Apple Watch.

Prerequisitos

Básicamente tener conocimientos de desarrollo para iOS, una mac y la última versión de Xcode.

Introducción

Aquí es donde les explico un poco de la arquitectura básica de la plataforma con dos tipos base: Apple Watch Application y una WatchKit Application.

WatchKit Apps

Como su nombre lo dice, un aplicación para WatchKit se basa completamente en el framework de WatchKit, para hacer su trabajo. El framework de WatchKit es una solución elegante llena el gap que hay entre un Apple Watch y un iPhone emparejado. (paired)

A52F6590-9B70-47F8-9D20-311ADEC797AA

Mientras que la idea es simple, la implementación no lo es tanto. Aquí les muestro un diagrama de como funciona y lo explico a continuación. Se va claramente que del lado del iPhone se carga una extensión de WatchKit y del lado del Apple Watch esta la app. Cualquier evento que se dispare por interacción con la app de WatchKit se reenvían a la extensión que se ejecuta en el iPhone. Esto implica que la WatchKit App no te sirve si se usa sin un iPhone emparejado. Esto limita las posibilidades de funciones con el Apple Watch, pero esto se soluciona con las Apps Nativas.

Apps Nativas

Estas aplicaciones están disponibles a partir del último update del watchOS 2, y lo trataré en posteriores publicaciones.

Setup del Proyecto

Teniendo en mente que vamos a hacer una WatchKit App vamos a crear los objetos iniciales. Esta aplicación que vamos a crear mostrará las condiciones del clima de varios lugares. Digamos, equivalente a la aplicación del clima de iOS.

Crear el Proyecto

Sigamos los siguientes pasos los cuales ilustro con imágenes.

1. File > New > Project…

2. Selecciona Single View Application, de la lista de iOS > Application y le das Next.

96DF9A80-1FEE-4687-A537-2AE1EEAA9040

3. Llamemoslo DemoClima, y configura las opciones como viene a continuación y dale Next.

81A5D068-24E4-4A71-83A2-4414EC760AD3

4. Selecciona la ubicación y le das Create.

Crear los WatchKit Targets

1. Selecciona File > New > Target… y selecciona WatchKit App for watchOs 1 de iOS > Apple Watch del menu de la izquierda, y selecciona Next.

16F4FED7-5AEB-4FF1-B134-CA9780CF984C

2. Para el proposito de este tutorial, desmarca Include Notification Scene e Include Glance Scene, las cuales no vamos a cubrir, y le damos en Finish.

83730DD0-30F2-490D-B108-BFF4B2FD6CF4

3. Cuando le das Finish, Xcode creará los archivos, grupos y objetivos requeridos y un esquema para ejecutar la WatchKit App, por último el simulador te pedirá que actives el esquema. Le damos en Activate.

547A7BEA-2788-4C27-A4C3-7FF28F527569

Estructura del Proyecto

Cuando agregamos una Watch Kit 1 App a nuestro proyecto, Xcode crea dos targets, una extensión, DemoClima WatchKit 1 Extension, y una app, DemoClima WatchKit 1 App.

La WatchKit Extension correrá en el iPhone emparejado con el Apple Watch. Es el que está a cargo de la lógica de negocio de la WatchKit App. La WatchKit App correrá en el Apple Watch y será la responsable de presentar la interfaz del usuario y el manejo de los eventos.

01CF9F09-E24B-4902-8107-4BC31C5B0B8B

Build and Run

Cuando hacemos un Build y un Run sobre la WatchKit App, Xcode construye los objetos de la aplicación iOS, la extension de WatchKit y la app de WatchKit, y los instala en el Simulador de iOS. Y después correrá la extensión y la app en el simulador.

Una extensión siempre va asociada a con una aplicación por lo tanto la aplicación iOS es requerida por la extensión de WatchKit para correr.

En este punto cuando le des Command+R y se ejecute la aplicación no pasará nada espectacular, dado que solo verás una pantalla negra con el tiempo actual. Ahora vamos a construir la interfaz.

Crear la Interfaz del Usuario

Asumo que si estas leyendo este pequeño tutorial, estas familiarizado con el desarrollo de iOS. Como sabes, el desarrollo moderno de iOS involucra Auto Layout y Storyboards. Esto es parcialmente verdad para el desarrollo de WatchKit. Como veremos una aplicación de WatchKit usa un storyboard para su interfaz de usuario. El Auto Layout, sin embargo, está ausente.

Abre Interface.storyboard en el grupo DemoClima WatchKit 1 App para empezar a construir la interfaz.

ABEA5C38-935B-4D41-B284-81B725B5065D

El storyboard contiene una sola escena, la Interface Controller Scene. En el Scene Navigator veremos que la esena incluye un InterfaceController e indica que la escena es el principal punto de entrara para nuestra aplicación de WatchKit.

¿Qué es el Interface Controller?

Es un tipo especial de view controller que extiende de WKInterfaceController, que forma parte del WatchKit Framework.
Es diferente de un UIViewController. Como sabes, un view controller controla una vista o una herradura de vistas. Un Inteface Controller, no controla una vista, en lugar de eso controla una interfaz, que es, una pantalla de contenido. Esto se va a hacer mas claro cuando implementemos la interfaz.
Este tipo especial de controller lo vamos a usar para configurar nuestros elementos de la pantalla y configurar los eventos, nada más.

Creando el Layout

Cuando vayamos estructurando pantalla nos vamos a dar cuenta que no es tan flexible como el Auto Layout, más bien funciona a como se estructuran las páginas HTML y CSS.

Sigamos los siguientes pasos:

1. Del Object Library a la derecha agreguemos un par de Groups, para agrupar los controles.
Estos grupos se “acomodan” solos en el layout, hay que tener esto en cuenta al crear nuestras interfaces.
También puedes agregar grupos dentro de grupos para crear layouts más complejos.

34B1A4A6-9FD5-4B2D-9149-CFBB3569BBA9

2. Del Object Library agreguemos una Label dentro del primer Group.
Como vemos el grupo se ajusta al tamaño del componente que contiene.
Cambiamos el texto de la etiqueta por: Culiacan (o la ciudad donde estés :P)
Si vamos al Identity Inspector, veremos que la etiqueta es de tipo WKInterfaceLabel, no UILabel.
En el Attributes Inspector, bajo Size, cambiar el width a Relative to Cotainer para que tome el ancho de la pantalla del Apple Watch.
En Font selecciona Headline para que resalte, como puedes notar, no puedes ajustar los tamaños manualmente.

661BD1CD-D563-4620-9CE2-1D9B0602A0C5

3. Agrega una segunda etiqueta
Agrega un segundo Label al primer grupo, de entrada no va a estar visible.
Selecciona el Grupo que contiene las dos etiquetas y en el Attributes Inspector cambia la propiedad Layout a Vertical. (por default viene Horizontal)

6F231360-8450-43B0-9832-47D936FAB94D

4. Agrega un objeto Date al segundo grupo. Un elemento date extiende de la clase WKInterfaceDate.
Cambia el Width a Relative to Container.
No hay necesidad de usar una clase NSDateFormatter formatear fechas. La clase WKInterfaceDate maneja el formato de las fechas por nosotros.
Cambia el formato de la instancia de WKInterfaceDate a Custom y fija el formato a M/d, h:mm a.

336A37A0-02FE-4795-ACE5-DDC8FF3D1BBD

5. Construimos y Corremos nuestra aplicación de WatchKit en el Simulador de iOS para ver lo que llevamos.
La aplicación no es muy útil de momento, porque está todo estático, pero en el siguiente post arreglaremos eso.

11F4C604-76A5-45C2-90B1-F1E774C29F40

Comentarios finales

Cubrimos lo básico de desarrollo de una aplicación para WatchKit.
Apenas tocamos las bases de la construcción de layouts para Apple Watch.
En el siguiente post vamos a llenar los datos del clima y los desplegaremos en nuestra app.
Nos vemos en el siguiente post.

Leave a Reply

Your email address will not be published. Required fields are marked *