En esta guía, se describen los componentes que conforman una tarea en curso en forma de cronómetro. Una tarea en curso muestra una tarjeta activa en el cronograma durante el tiempo que un usuario participe en una tarea y le permite entrar y salir de la tarjeta activa si necesita información.
Durante el proceso, también obtendrás sugerencias de diseño, desarrollo y distribución que son importantes para compilar tu propia Glassware.
Antes de comenzar
La fuente completa del cronómetro está disponible en GitHub. Impórtalo a Android Studio antes de comenzar, ya que en esta guía se hace referencia en gran medida.
- En la pantalla de Inicio rápido, haz clic en Check out from version Control > Git.
- Copia la URL de clonación del cronómetro.
- Pega la URL de clonación en la URL del repositorio de Vcs y haz clic en Clone.
- Haz clic en Yes en la pantalla siguiente.
- En la siguiente pantalla, haz clic en Aceptar.
- Compila el proyecto y ejecútalo en tu Glass conectado con el botón Play. Asegúrate de verificar el
READMEde la muestra para obtener los detalles de la invocación.
Qué aprenderás
Aprenderás a usar componentes del SDK de Android para compilar la mayor parte de la tarea en curso del cronómetro y, luego, el GDK para conectarte a la experiencia de Glass. Esta es una lista de temas sobre los que aprenderás:
- Cómo crear una vista personalizada para dibujar en la tarjeta de transmisiones en vivo
- Crea un servicio para administrar la tarjeta activa
- Proporcionar un menú que permita a los usuarios quitar la tarjeta publicada del cronograma
- Declarar un activador de voz para iniciar el cronómetro desde el menú de voz principal
Diseño
Antes de empezar a desarrollar, tómate un tiempo y diseña tu Glassware. Esto te da una idea clara de qué flujos de IU funcionan mejor en Glass, qué comando por voz usarás y cómo se verán tus tarjetas.
Por supuesto, diseñar Glassware es un proceso iterativo y algunas de las cosas que diseñas ahora cambiarán, pero realizar una buena parte de este trabajo al principio es fundamental para crear una gran experiencia.
Flujo de la IU
Diseñar el flujo de la IU es un ejercicio simple y te permite visualizar tu Glassware antes de escribir una línea de código. Lo hacemos todo el tiempo para la cristalería que construimos.
Veamos los elementos principales de la IU del cronómetro para que tengas una idea de cómo funciona la IU y de lo útil que puede ser este proceso a la hora de crear tu propia Glassware.
IU principal
El cronómetro contiene solo un flujo principal, ya que es una experiencia bastante simple.
Cuando los usuarios invocan la Glassware, aparece un anuncio intersticial de cuenta regresiva de 3 segundos antes de que comience el cronómetro. Luego, el cronómetro cuenta hasta que el usuario lo quita del cronograma con un elemento de menú Stop.
Comando por voz
Debes descubrir un comando por voz bastante al principio del proceso de diseño. Los comandos por voz permiten que los usuarios inicien Glassware desde el menú de voz de la pantalla principal de Glass (tarjeta de reloj), si es necesario, y son una parte importante de cómo diseñas Glassware.
Por ejemplo, el comando Publicar una actualización funciona bien en un modelo de enviar y olvidar, en el que los usuarios pronuncian texto y Glassware lo procesa sin ninguna intervención adicional del usuario. Esto permite a los usuarios volver a lo que están haciendo rápidamente.
Por otro lado, en el caso de acciones como Jugar un juego, por lo general, se recomienda dirigir a los usuarios a una pantalla de presentación para que puedan orientarse primero. Debido a que lo más probable es que este comando por voz inicie una inmersión, es de esperarse que los usuarios vean pantallas y menús adicionales para iniciar el juego. En los juegos, suele ser una mala experiencia llevar a los usuarios inmediatamente después de usar el comando por voz.
El cronómetro usa el comando por voz Iniciar un cronómetro. Una vez que los usuarios invocan el comando por voz, el cronómetro se inicia inmediatamente después de una pantalla de cuenta regresiva intersticial breve, lo que es mejor que proporcionar un elemento de menú para comenzar. Para las tareas continuas, por lo general, querrás enfocarte en llevar a los usuarios a la experiencia lo más rápido posible, cuando sea conveniente.
Diseños de tarjetas
Ya sea que compiles inmersiones o tarjetas en vivo, debes usar los diseños CardBuilder o XML cuando sea posible.
A menudo, necesitarás compilar tu propio diseño, así que sigue nuestros lineamientos de IU para tener la mejor calidad de Glassware.
El cronómetro sigue los lineamientos de diseño generales, pero tiene diseños de IU personalizados que usan componentes estándar de Android, como vistas y diseños.
Desarrollo
Si deseas desarrollar tarjetas en tiempo real, debes usar las mismas herramientas que usarías para el desarrollo de Android a fin de compilar la mayor parte de Glassware y, luego, usar las APIs en el complemento de GDK para acceder a funciones específicas de Glass, como tarjetas en vivo y comandos por voz.
Con frecuencia, usarás componentes comunes de Android para crear Glassware, pero ten en cuenta que algunos conceptos a veces son diferentes. Por ejemplo, procesas y administras tarjetas en tiempo real con un servicio de Android, que no es una forma típica de usar los servicios en las apps tradicionales para Android. Otro ejemplo son las tarjetas en vivo que no tienen su propio contexto de la IU, por lo que debes usar una actividad de shell que muestre un menú para la tarjeta en vivo. Aprenderás cómo se compilan estos componentes más adelante en esta guía.
En el resto de las secciones Desarrollo, se repasa cómo se estructura el cronómetro y los componentes principales del proyecto que importaste antes. Es útil tener Android Studio ahora arriba para poder seguir el proceso. El código fuente en sí tiene comentarios, por lo que esta sección repasa el propósito de alto nivel de cada archivo y sugerencias útiles que puedes aplicar a tu propio Glassware.
Comando por voz
Para crear comandos por voz, debes usar un archivo de recursos XML en el que se especifique el comando que estás usando y, luego, especificar el recurso XML en el archivo AndroidManifest.xml.
Los siguientes archivos están asociados con el comando por voz del cronómetro:
res/xml/voice_trigger_start.xml: Declara el comando por voz que se usará.AndroidManifest.xml: Declara el servicio de tarjetas activo para que se inicie cuando se pronuncie el comando por voz.
Vista de cuenta regresiva
El cronómetro muestra una cuenta regresiva antes de que se grabe el tiempo para avisar a los usuarios que el tiempo está por transcurrir.
Los siguientes archivos están asociados con la vista de cuenta regresiva:
res/layout/card_countdown.xml: Define el diseño del visor de cuenta regresiva.src/com/google/android/glass/sample/stopwatch/CountDownView.java: Define la vista de la cuenta regresiva.
Vista de cronómetro
Esta es la vista principal del cronómetro. Muestra el tiempo transcurrido desde que se completó la cuenta regresiva. Los siguientes archivos están asociados a la vista del cronómetro:
res/layout/card_chronometer.xml: Define el diseño de la vista del cronómetro.src/com/google/android/glass/sample/stopwatch/ChronometerDrawer.java: Define cómo renderizar la vista. El servicio de tarjetas en tiempo real llama a esta clase para dibujar en el servicio de tarjetas en tiempo real.src/com/google/android/glass/sample/stopwatch/ChronometerView.java: Es la vista de cronómetro que usa el diseño anterior como IU.
Servicio de cronómetro
Este es el servicio que administra el ciclo de vida y la renderización de la tarjeta publicada. Los siguientes archivos están asociados con este servicio:
src/com/google/android/glass/sample/stopwatch/StopwatchService.java: administra la tarjeta en tiempo real del cronómetro y controla el ciclo de vida del servicio.
Actividad del menú
Las tarjetas en tiempo real no tienen su propio contexto de IU para mostrar un menú porque renderizan sus IU en el contexto del cronograma.
Para evitar esta limitación, creas una actividad translúcida que aparece en la parte superior del cronograma y, luego, muestras el menú de esa actividad inmediatamente después de que los usuarios presionen la tarjeta en tiempo real.
src/com/google/android/glass/sample/stopwatch/MenuActivity.java: Declara la actividad translúcida del menú que muestra el menú de inmediato cuando la actividad está visible.res/values/styles.xml: Define el estilo translúcido que se aplica al menú.res/menu/stopwatch.xml: Es el recurso de menú que contiene el elemento de menú obligatorio Detener.
Manifiesto de Android
El archivo AndroidManifest.xml describe los componentes principales de tu Glassware para que el sistema sepa cómo ejecutarlo. El manifiesto para charadas declara lo siguiente:
- El ícono y el nombre de Glassware. Glass muestra esta información en el menú táctil principal si más de una Glassware responde al mismo comando por voz.
- Todos los servicios y las actividades asociados con el cronómetro. Esto es necesario para que el sistema sepa cómo iniciar los componentes de Glassware.
- El comando por voz y un filtro de intents que inicia el servicio de tarjetas en vivo cuando se pronuncia el comando por voz
- Un código de versión para Glassware. Este código se debe actualizar (y, por lo general, también el nombre de la versión) cada vez que se sube una nueva versión de este APK a MyGlass.