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

Tu primera aplicación Watchkit: Interfaz de Usuario

by
Difficulty:IntermediateLength:LongLanguages:

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

La semana pasada, Apple anunció la fecha de lanzamiento para el Apple Watch. La compañía también lanzó Xcode 6.2, que incluye soporte para Apple Watch. Con Xcode 6.2, tienes todo lo que necesitas para crear tu primera aplicación para el Apple Watch.

Con la fecha del lanzamiento del Apple Watch prevista para Abril, es tiempo de instruirse en el desarrollo del Apple Watch.  En éste tutorial, crearás tu primera aplicación WatchKit. A lo largo del camino, te familiarizarás con el proceso de una aplicación Watchkit y descubrirás que hay similitudes con el desarrollo para iOS.

Requisitos Previos

Debido a que éste tutorial se enfoca en el desarrollo para el Apple Watch, asumiré que ya estás familiarizado con las bases para el desarrollo para el iOS. Si no sabes que son actions y outlets, por ejemplo, te recomiendo que primero veas nuestro curso introductorio sobre desarrollo para el iOS.

Después, necesitas tener el Xcode 6.2 o una versión superior instalada en tu maquina desarrolladora. Puedes descargar el Xcode del iOS Dev Center ó la Mac App Store. Como lo mencioné anteriormente, el Xcode 6.2 incluye soporte para el Apple Watch. Sin el Xcode 6.2, no podrás continuar.

En éste tutorial, estaré utilizando el lenguaje de programación Swift. Si no estás familiarizado con Swift, entonces tienes dos opciones. La primera es apegarte a Objective-C. Puedes crear aplicaciones para el Apple Watch tanto con Swift u Objective-C, o una combinación de ambos. Tu segunda opción es detenerte aquí y leer mi serie sobre Swift o ver el curso de Derek Jensen sobre Desarrollo con Swift. 

1. Introducción

Puede estar pregúntandote la diferencia entre una aplicacion para el Apple Watch y una aplicación WatchKit. El año pasado, Apple anunció que habrá dos generaciones de aplicaciones Apple Watch, aplicaciones WatchKit y aplicaciones nativas Apple Watch. El término nativo es un poco confuso ya que las aplicaciones WatchKit también son aplicaciones nativas. La principal diferencia es la arquitectura de la aplicación. Primero veamos las aplicaciones nativas.

Aplicaciones Nativas.

Apple no nos ha dicho mucho sobe aplicaciones nativas todavía. La compañía sólamente anunció que las aplicaciones nativas llegarán al Apple Watch en el otoño de éste año. No está claro como se verá el SDK y que serán capaces de hacer los desarrolladores con una aplicación nativa Apple Watch. En otras palabras, no tenemos opción sino enfocarnos en las aplicaciones WatchKit por el momento.

Dicho esto, basándonos en la información de Apple, la principal diferencia será que las aplicaciones nativas podrán ejecutarse sin una extensión que se ejecute en su respectivo compañero iPhone. Desde un punto de vista arquitectónico, la aplicación nativa se asemejará a aplicaciones nativas iOS en el iPhone y el iPad.

Aplicaciones WatchKit

Como el nombre lo implica, una aplicación Watchkit dependerá completamente en el framework WatchKit para hacer su trabajo. El framework Watchkit es una solución ingeniosa que reduce la brecha entre el Apple Watch y su respectivo compañero iPhone

Mientras la idea es simple, la implementación lo es menos. La aplicación WatchKit se ejecuta en el Apple Watch y se encarga de dos cosas:

  • presentar la interfaz de usuario
  • responder a la interacción del usuario

La parte lógica y el trabajo pesado es encargarse de una extensión del Apple Watch que se ejecuta en su respectivo compañero iPhone. El siguiente diagrama visualiza el papel del framework Watchkit.

Cualesquiera eventos desencadenados por el usuario que interactúa con la aplicación WatchKit se dirigen a la extensión que se ejecuta en el respectivo compañero iPhone. Esto implica que la aplicación WatchKit es inútil sin un respectivo compañero iPhone. Simplemente no puede hacer su trabajo sin la extensión ejecutándose en un iPhone.

2. Configuración del Proyecto.

Con esto en mente, es tiempo de crear tu primera aplicación WatchKit. La aplicación que vamos a crear mostrará al usuario las condiciones meteorológicas en varios lugares del planeta. Es el equivalente de la aplicación del clima en iOS.

Paso 1: Crear el Proyecto

Lanza el Xcode y selecciona New>Project... del menu File. Selecciona la plantilla Single View Application de la lista de plantillas iOS Application. Te preguntarás por qué no estamos creando una aplicación Watchkit. Una aplicación WatchKit siempre forma parte de una aplicación iOS. Esto lo entenderás mejor una vez que hayamos añadido la aplicación WatchKit al proyecto.

Nombra tu aplicación RainDrop, establece Language a Swift, y Devices a iPhone. Asegúrate de que la casilla Use Core Data esté marcada.

Especifica a Xcode donde te gustaría guardar los archivos del proyecto y haz click en Create. Nota que hemos creado un muy sencillo proyecto en Xcode para una simple aplicación iOS. Si compilas y ejecutas el target Raindrop en el simulador iOS, verás el panel blanco. Esto es lo que esperamos de una aplicación iOS basada en la plantilla Single View Application.

Antes de continuar, veamos la estructura del proyecto en el Project Navigator y la lista de targets.  Actualmente tenemos dos targets, RainDrop, para la aplicación iOS y RainDropTests, para las pruebas del target RainDrop. Agreguemos una aplicación WatchKit a la mezcla.

Paso 2: Crear Targets WatchKit

Selecciona New>Target... del menu File de Xcode y elige WatchKit App de la sección iOS>Apple Watch a la izquierda.

Para el propósito de éste tutorial, desmarca Include Notification Scene y Include Glance Scene. No cubriremos notificaciones y glances en éste tutorial.  Da click en Finish en la parte superior derecha para añadir aplicación WatchKit a tu proyecto en Xcode.

Cuando hagas click en Finish, Xcode creará un número de archivos, grupos y targets. Xcode también creará un esquema para ejecutar la aplicación WatchKit en el Simulador iOS y te preguntará si debe activar ese esquema. Haz Click en Activate para activarlo.

3. Anatomía del Proyecto.

Al añadir la aplicación WatchKit a nuestro proyecto, Xcode ha creado dos targets para nosotros, uno para la extensión Watchkit, RainDrop WatchKit Extension, y otro para la aplicación WatchKit, RainDrop WatchKit App.

La extensión WatchKit se ejecutará en el iPhone, compañero respectivo del Apple Watch. Es encargado del funcionamiento primordial de la apllicación WatchKit. La aplicación WatchKit se ejecutará en el Apple Watch y será responsable de presentar la interfaz de usuario y el manejo de eventos.

Para mantener todo prolijo, Xcode ha creado dos grupos para nosotros en el Project Navigator.  El primer grupo, RainDrop WatchKit Extension, contiene los recursos y archivos fuentes para la extensión WatchKit.  El segundo grupo, RainDrop WatchKit App, contiene los recursos para la aplicación WatchKit.

La arquitectura principal de una aplicación WatchKit se basa en el contenido de éstos grupos. El grupo RainDrop WatchKit App, por ejemplo, no contiene archivos fuente. Sólo incluye un storyboard y recursos para la interfaz de usuario de la aplicación WatchKit. La RainDrop WatchKit Extension contiene un archivo fuente, InterfaceController.swift, pero no incluye un storyboard. Ésto tiene sentido si recuerdas que la extensión se encarga de la parte lógica de la aplicación WatchKit mientras la aplicación WatchKit es responsable de la interfaz de usuario.

Apple utiliza el término aplicación para varios conceptos. Es importante que entiendas que una aplicación WatchKit consiste de dos partes, una extensión WatchKit ejecutándose en un respectivo compañero iPhone y una aplicación WatchKit ejecutándose en el Apple Watch. Una aplicación WatchKit no puede hacer su trabajo sin su extensión. Esa es la clave para entender la arquitectura de una aplicación WatchKit.

4. Compilar y Ejecutar.

Antes de compilar y ejecutar la aplicación WatchKit, es útil entender que va a pasar cuando hagas click en Command-R. Cuando Xcode ha finalizado de compilar la aplicación iOS, la extensión Watchkit, y la aplicación WatchKit, instalará la aplicación iOS, la extensión WatchKit, y la aplicación WatchKit en el Simulador iOS. Después ejecutará la extensión WatchKit y la aplicación WatchKit en el Simulador iOS.

Si no estás familiarizado con las extensiones, entonces puedes estarte preguntando por qué instala la aplicación iOS en el Simulador iOS. Una extensión siempre es asociada con una aplicación iOS así que la aplicación iOS es requerida para que se ejecute la extensión WatchKit. A lo largo de las mismas líneas, una aplicación WatchKit sólo puede ejecutarse en un Apple Watch si éste es su contraparte, la extensión WatchKit, está ejecutándose en un iPhone compañero de ese Apple Watch. Es una arquitectura compleja si estás acostumbrado a desarrollar aplicaciones independientes.

Cuando presiones Command-R en tu teclado o hagas click en el botón Run en la parte superior izquierda, Xocde compilará y ejecutará tu aplicación WatchKit en el Simulador iOS. Si la aplicación WatchKit no es lanzada, entonces revisa bien que estés utilizando el esquema correcto.

Ejecutar la aplicación WatchKit no es muy espectacular ya que solamente ves una pantalla negra con la hora actual en la parte superior derecha. Hagamos la interfaz de usuario de nuestra aplicación WatchKit un poco más interesante.

5. Crear la Interfaz de Usuario

Ya que estás leyendo éste tutorial, asumo que estás familiarizado con el desarrollo en iOS. Como sabes, moderno desarrollo en iOS, involucra Auto Layout y storyboards. Ésto es sólo parcialmente cierto para el desarrollo de WatchKit. Ya descubrimos que una aplicación WatchKit utiliza una storyboard para su interfaz de usuario. Auto Layout, sin embargo, está ausente.

Abre Interface.storyboard en el grupo RainDrop WatchKit App para encontrar como construir una interfaz de usuario para nuestra aplicación Watchkit.

La storyboard contiene una sola escena, la Interface Controller Scene. En la Scene Navigator, a la izquierda en el Project Navigator, puedes ver que la Interface Controller Scene incluye un Interface Controller y una indicación de que ésta escena es el principal punto de entrada de nuestra aplicación WatchKit.

¿Qué es el Interface Controller?

Las dos preguntas que probablemente te estás formulando son "¿Qué es un interface controller?" y "¿Cómo difiere de un view controller?" Un interface controller es una instancia de la clase WKInterfaceController de una subclase similar. La clase WKInterface Controller se define en el framework Watchkit.

El nombre de ésta clase da un esbozo sobre las diferencias con UIViewController. Como sabes, un view controller controla una vista (view) o jerarquia de vistas. Un interface controller, sin embargo, no controla una vista, controla en cambio una interfaz, que es, una pantalla de contenido. Lo que significa esto se comprenderá mejor una vez que comencemos a implementar el interface controller.

Un interface controller es aún un verdadero controlador que controla el comportamiento de la interfaz de usuario. Con un interface controller, puedes configurar la interfaz de usuario de tu aplicación WatchKit y responder a los eventos de la aplicación hacia la extensión WatchKit. Cómo funciona ésto lo entenderás mejor posteriormente en éste tutorial.

Crear un Layout (Maquetado)

El sistema de maquetado que WatchKit nos proporciona es primitivo comparada con el potencia y la flexibilidad de Auto Layout. El sistema layout es una reminiscencia de como las páginas web son maquetadas con HTML y CSS. 

Uno de los bloques encargados del posicionamiento del sistema de maquetado de WatchKit es la clase WKInterfaceGroup. Una instancia de ésta clase es nada más que un contenedor que puede albergar otros elementos de interfaz, tales como labels (etiquetas), tablas, etc. Puedes compararlo con un elemento  <div> en una página web. Proporciona estructura y determina el maquetado junto con otros grupos del maquetado.

De Object Library a la derecha, añade dos grupos al interface controller como se muestra abajo.

¿Notaste que los grupos automáticamente se colocaron en su lugar? El sistema de maquetado se comporta muy diferentemente al Auto Layout. Otro detalle importante es que el contenedor del interface controller es también un grupo, no una vista. Ésto significa que añadiste los grupos a otro grupo. Ésto está bien ya que grupos pueden anidarse, permitiendo a los desarrolladores crear complejos maquetados para sus aplicaciones WatchKit.

Añadir Elementos de Interface

Añade una label de Object Library al grupo superior y ver que ocurre. El tamaño del grupo decrece para encajar al tamaño de la label (etiqueta). El contorno de un grupo vacío no es nada más que un marcador de posición. Un grupo siempre ajustará su tamaño al de su contenido.

Selecciona la label y abre el Identify Inspector de la derecha. Nota que la label que añadiste es de tipo WKInterfaceLabel, no UILabel. Aunque las aplicaciones WatchKit pueden tener tantos elementos de interfaz que se asemejan a los encontrados en aplicaciones iOS, son diferentes. La clase WKInterfaceLabel, por ejemplo, hereda de WKInterfaceObject en lugar de UIView y UIResponder.

Con la label seleccionada, abre el Attributes Inspector de la derecha. En Size, establece la anchura en Relative to Container para hacerla tan amplia como la pantalla del Apple Watch. Cambia la fuente a Headline para destacarla más y cambia el texto de la etiqueta a Cupertino. Nota que no puedes cambiar la familia de la fuente ni ajustar manualmente el tamaño de la fuente. 

Ya que nuestra aplicación WatchKit mostrará las condiciones meteorológicas de varios lugares del planeta, también necesitaremos añadir una label para la temperatura. Debería también ser buena idea saber la fecha y hora local de la locación.

Agrega una segunda label al grupo superior al arrastrar una label en el Scene Navigator. Espera. Eso no es correcto. Agregaste una etiqueta al grupo correcto, pero no está mostrando la interfaz.

Por defecto, un grupo tiene un maquetado horizontal Puedes verificar esto al abrir el Attributes Inspector e inspeccionar su propiedad Layout (Maquetado). Esto significa que los elementos de interfaz que contiene son colocados horizontalmente. La etiqueta temperatura está presente en el grupo, pero no es visible por el momento. Cambia la propiedad Layout del grupo a Vertical para resolver el problema.

Agrega un elemento de interfaz Date al segundo grupo. Elementos de interfaz Date son instancias de la clase WKInterfaceDate. Ésta elemento de interfaz contiene una label y es perfecta para desplegar y dar formato a fechas. Comienza por cambiar la anchura del elemento a Relative to Container y la alineación del texto de la label a  la derecha. 

No hay necesidad de usar la clase NSDateFormatter para dar formato a las fechas.  La clase WKInterfaceDate maneja el formato de fecha por nosotros. Cambia Format de la instancia WKIntefaceDate a Custom y establece el formato a M/d,h:mm a. La interfaz de usuario ahora debería de observarse así.

Compila y ejecuta la aplicación WatchKit en el Simulador iOS para ver lo que tenemos hasta ahora. La aplicación no es muy útil por el momento ya que estamos trabajando con el contenido estático.  Arreglaremos ésto en el próximo tutorial.

Conclusión

Hemos cubierto lo más básico del desarrollo de una aplicación Watchkit en éste tutorial.  Estoy seguro de que estás de acuerdo de que desarrollar aplicaciones WatchKit se siente como familiarizado y extraño.  Podemos usar las herramientas a las que estamos acostumbrados, pero hay un número de diferencias clave que llevará tiempo para sentirse cómodo con ellas.  En la segunda parte de éste tutorial, nos enfocaremos en la extensión Watchkit para tomar los datos del clima y mostrar esos datos en la aplicación WatchKit. 

¡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.