¡¡Qdemos para Android Wear!!

Pues el título lo dice todo… si ayer salía Android Wear, la API para dispositivos wearables que sacaba Google para complementar a Android en la gama de SmartWatch (en principio), pero ampliable a pulseras, etc. hoy el proyecto Qdemos participante en el concurso universitario de software libre 2014, por la Universidad de La Laguna, ya implementa la compatibilidad de las notificaciones en Android Wear. =D. Para ello, explicaremos en este post los pasados llevados a cabo y mostraremos capturas de pantalla de las notificaciones de Qdemos funcionando en ¡un smartwatch con Android Wear! (emulador). Empecemos por el principio, que este post es CANELA FINA y de elaboración 100% propia :))))). Lo primero que tuve que hacer, es que ayer mismo cuando vi la noticia de Android Wear, fui una de las primeras personas que pidió acceso a la API (de momento no es totalmente pública, están dándola poco a poco a desarrolladores… pero con el tiempo será pública), para jugar con ella y ver que se puede hacer ;-). Para pedir acceso a poder ‘jugar’ con ella tuve que solicitar permisos como Desarrollador Preview con mi cuenta de Google (la misma que tengo configurada en mi Smartphone Android como principal, ¡MUY IMPORTANTE!). Para ello tuve que rellenar el formulario siguiente: http://developer.android.com/wear/preview/signup.html En este formulario te piden pocas cosas (que no creo que de momento ni siquiera miren… ¿o sí?).

What is your Gmail or Google account email address? *
What is your name? (Optional)
What is your company name? (Optional)
If you’ve published any apps to the Google Play Store, please provide package name(s). (Optional)
e.g. com.google.test
I have read and agree to the Terms and Conditions. *

Yes, I agree

Así que metiendo tu cuenta Google (vuelvo a repetir que debe ser la misma que se tenga configurada en el Smartphone, ya que al fin y al cabo es de donde tirará). Tu nombre, Tu compañia (si tuvieras) y algún paquete o paquetes completos de las apps que tengas publicadas en Google Play (si tuvieras). Esto junto al AGREE de aceptar los términos y condiciones de uso que aparecen más arriba, que suelen ser los típicos en estos casos, te bastan para solicitar el permiso a obtener la Preview de Android Wear. Durante el día de ayer no me llegó la respuesta, pero fue esta mañana cuando al levantarme y conectar el WiFi en el móvil a eso de las 07:00 de la mañana…. ¡Tachán! mi solicitud aceptada y lista para ser procesada por mis incesantes ganas de toquetearla y ver que se puede hacer con ella. El email que te llega es el siguiente:

Hello Developer,

Thank you for signing up for the Android Wear Developer Preview.

To begin developing on Android Wear, you’ll need the Preview Support library and the Android Wear Preview app for your mobile device. Follow these steps:

  • Download the Preview Support library and samples.

  • Opt-in to become a tester of the Android Wear Preview app in the Google Play Store. After opt-in, it could take up to 24 hours for the Android Wear Preview app to be accessible to you in Google Play. Make sure the opt-in user account is the same user signed in to Google Play.

Refer to the Android Wear Developer Get Started page for details. Since this is a preview release, please do not publicly distribute apps built with the Preview library. Also note that the APIs are potentially subject to change and you will need to modify your apps when they are released out of preview.

Share your experiences and ask questions by joining the Android Wear Developers Google+ Community. We look forward to seeing how your apps take advantage of these new APIs to provide innovative new user experiences!

— The Android Wear Team

Y adjunto a él un comprimido que contiene apps de ejemplos y la API de Android Wear. Este archivo también se puede descargar desde la dirección que linkan en la palabra Download, que yo he deslinkado en este post. El correo tiene referencias a links en algunas palabras (ayuda, documentación, etc.) que también he deslinkado en el post.

Una vez que nos llega esto, tendremos que configurarlo todo antes de ‘picar teclas’. En el siguiente enlace están los pasos descritos a la perfección en idioma anglosajón que yo en este post explicaré en castellano: http://developer.android.com/wear/preview/start.html

Partimos de la base que ya hemos trabajado con Android (o bien en Eclipse o en Android Studio) y lo tenemos todo configurado (IDE, SDK, ADT, etc.). También tenemos en cuenta que somos miembros de Android Wear Developer Preview, o sea solicitamos el permiso que he descrito antes y nos han aceptado a través del correo que también he mencionado.

A partir de aquí, explicaré todo lo que he realizado teniendo en cuenta que he utilizado Android Studio, que es la plataforma que utilizo para Qdemos. Pero si queremos hacerlo para Eclipse, es prácticamente similar, como digo está todo bien explicado en el link anterior (tanto para Eclipse como para Android Studio).

Configurando el entorno

  1. Deberemos verificar que tenemos instalada como mínimo (a día de hoy la más actual) Android SDK Tools revisión 22.6. Eso lo podemos observar (en Android Studio) en:  Tools > Android > SDK Manager. Si no fuera así, deberemos actualizar a esta versión o superior y reiniciar el Android Studio.
  2. Debemos verificar que tenemos instalado el SDK de Android 4.3 o superior (A día de hoy van por la versión 4.4.2), y que este esté en el terminal físico o virtual en el que depuramos nuestra app. Yo tengo en mi Samsung Galaxy S3 la versión 4.3.1 a través de CyanogenMod y me funciona sin problemas, así que en ROMs cocinadas es compatible.
  3. Tenemos que asegurarnos que tenemos actualizadas (lo máximo posible) Android Support Library y Android Support Repository (este último sólo es necesario para Android Studio, que es nuestro caso).
  4. En la pantalla de Android SDK Manager (Tools > Android > SDK Manager) tenemos que instalar un par de cosas más. Tenemos que instalar Android Wear ARM EABI v7a System Image, que será la imagen utilizada para el emulador del SmartWatch (Unico dispositivo presentado en el día de ayer con compatibilidad con Android Wear, tanto la version de Motorola como la de LG).

Configurando el nuevo emulador

  1. Creamos un nuevo emulador (Tools > Android > AVD Manager)
  2. Le asignamos un Nombre (AVD Name)
  3. Seleccionamos el tipo de Dispositivo (Device) o bien Android Wear Square o Android Wear Round (Esto será para diferenciar que tipo de Smartwatch, si rectangular como el SmartWatch de LG o circular ¡Vayas quebraderos de cabeza traerá el diseño gráfico con este nuevo formato de pantalla!, como el Moto 360 de Motorola).
  4. En el campo Target, tenemos que indicar Android 4.4.2 – API Level 19 o superior (esto sólo indica el tipo de emulador, no tiene que corresponder con la versión que tengamos en nuestro smartphone)
  5. En el campo CPU/ABI, tenemos que indicar la arquitectura que descargamos e instalamos antes a través del SDK Manager, o sea: Android Wear ARM (armeabi-v7a).
  6. En el campo Skin, pues lo explicado en el punto 3, de nuevo: AndroidWearSquare o AndroidWearRound. Esto se verá repercutido en la interfaz visual, si mostrarla redonda o rectangular.
  7. Y listo, aceptamos y podemos arrancar (start) el emulador 🙂

NOTA: No intentemos instalar apps en este emulador, ya que no funcionarán y el comportamiento se desconoce… o eso nos indica Google ;). Instalando Android Wear Preview (app) Junto al permiso para poder utilizar la API, cuando aceptan nuestra solicitud, nos dan acceso para ser tester de la app Android Wear Preview, que se encarga de comunicar las notificaciones que le llegan al smartphone al emulador de nuestro Smartwatch. Esta app será indispensable instalarla en el Smartphone para jugar con la API, en su versión Preview. Por ello, el solicitar acceso a la API con la misma cuenta que tenemos configurada en el smartphone, para poder ser Tester de esta app y poder descargarla e instalarla desde Google Play. De manera, que una vez aceptado veremos que ¡ya somos testers oficiales!

¡Ya soy tester de Android Wear Preview!

¡Ya soy tester de Android Wear Preview!

Por lo que sólo nos falta instalar la app en nuestro smartphone, la encontraremos en Google Play (o en el link que nos proporciona el email de confirmación de antes). La app sólo es visible para los tester, o sea, si no lo seis no intenteis buscarla ;-). De todos modos, os dejo su aparición en Google Play para ver como la ven los que si somos tester.

Android Wear Preview en Google Play

Android Wear Preview en Google Play

Configurando la conexión entre SmartWatch (Emulador) y SmartPhone

  1. Tener ejecutado el emulador del SmartWatch. Como todavía no está sincronizado el smartphone con este, saldrá un icono (un smartphone con una raya que lo atraviesa en diagonal) en la parte superior derecha del emulador que indica que no hay ningún smartphone conectado a él. Esto lo podemos ver en la imagen siguiente:

    Smartwatch (Emulador) sin conexión con el Smartphone

    Smartwatch (Emulador) sin conexión con el Smartphone

  2. Tener arrancada en el Smartphone la app de Android Wear Preview. Debemos configurar el permiso de habilitación de escucha de notificaciones de terceros. Para que a la postre se pueda comunicar con el SmartWatch e informarle de las notificaciones Push que le van llegando. Para ello, la misma app, en su parte superior, nos lo indica si no lo tenemos configurado. Sólo habrá que configurarlo una única vez (hasta que no desisntalemos la app de Android Wear Preview). Para configurarlo, la propia app (si pulsamos donde nos indica) nos llevará al menú de ajustes de Android, donde tendremos que habilitar (tickar para habilitar y dar permisos) Android Wear Preview en la lista de apps del Smarpthone que pueden leer notificaciones de terceros.
  3. Tener conectado nuestro Smarpthone al PC en modo depuración (Como si fueramos a lanzar la app de Android Studio en el dispositivo físico).
  4. Abrir una consola, y navegar hasta el path de instalación del SDK de Android que usa Android Studio. Dentro de ahí acceder a la carpeta platform-tools/ y ejecutar bajo ese directorio en una consola:
    • adb -d forward tcp:5601 tcp:5601

En este momento ya tendremos sincronizado el emulador del SmartWatch con  nuestro SmartPhone físico. De manera que la imagen del emulador ahora no indica que no tiene conexión (icono de antes) sino que indica la tipica ‘g’ de Google que hace ver que todo está correctamente, como podemos ver en la imagen.

SmartWatch sincronizado con SmartPhone

SmartWatch sincronizado con SmartPhone

Notificaciones en el SmartWatch

Y con esto ya podremos ver cualquier tipo de notificación Push en nuestro Smartwatch ¡e interactuar con ella!.

En el código, tenemos muchos ejemplos explicados fantásticamente en: http://developer.android.com/wear/notifications/creating.html, pero a grandes rasgos y para no aburrir, cualquier notificación push propia de la app (en este caso de Qdemos! cuando nos llega la solicitud de Qdada) por defecto no hay que hacer nada relativo al código, automáticamente con todas las configuraciones de antes, se mostrará en nuestro SmartWatch.

Dando más valor a las notificaciones

Si queremos que el comportamiento no sea simplemente ver las notificaciones en el smartwatch, sino poder interactuar con ellas, e incluso responder desde el Smartphone, tendremos que hacer uso de la API de Android Wear. Antes de nada, deberemos incluirla en nuestro proyecto en Android Studio. Para ello:

  1. Dentro de nuestra carpeta libs/, en Qdemos! ya la tenemos creada de antes (pero si fuera otro proyecto se crearía en el mismo directorio que esta el AndroidManifest.xml), colocamos la API de Android Wear, que es un .jar llamado wearable-preview-support.jar, que nos dieron en el fichero comprimido cuando aceptaron nuestra solicitud y nos lo comunicaron en aquel correo que os puse antes.
  2. En el fichero build.gradle de nuestro proyecto deberemos hacer referencia a dicha librería (como siempre que insertamos una nueva) y a la libreria de soporte (sino la tuvieramos referenciada, en Qdemos! si que estaba)
    • dependencies {
          compile "com.android.support:support-v4:18.0.+"
          compile files('../libs/wearable-preview-support.jar')
      }
  3. Sincronizamos los ficheros de Gradle, dándole al botón tan majo que es un flechita hacia abajo con un circulito en medio (Sync Project with Gradle Files), para refrescar Gradle y que pille dicha libreria que hemos añadido.
  4. Y ya está, ya podemos ver ejemplos de como contestar notificaciones con voz, o personalizar más las visualizaciones con textos grandes y demás: http://developer.android.com/wear/notifications/remote-input.html

En Qdemos!, como la notificacion push que está configurada está creada para que cuando clickemos sobre ella nos redirija al fragment de elección de fecha para la Qdada, pues eso se convierte en que la notificación que le lelga al SmartWatch, a parte de poder ver el texto en sí, hay una opción (a través de un icono) que es Open, que abriría dicho fragment en el smarpthone directamente.

En el futuro, podemos hacer incluso que la elección de la fecha de la Qdada, a raíz de recibir la notificación, pueda realizarse en el propio smartwatch (ya que es un simple click en SI o NO). Sería muy sencillito a través de la creación de varias páginas en la notificación del SmartWatch, cada página con su acción a través de botoncitos: http://developer.android.com/wear/notifications/pages.html

¿Cómo se ve una Notificación de Qdemos en un SmartWatch?

Pues una vez configurado todo, y personalizado las notificaciones del SmartWatch, en Qdemos la recepción de la notificación por parte del SmartWatch se vería como vemos en el carrusel (en orden) siguiente de imágenes:

A la Espera de Notificación

A la Espera de Notificación

Notificación de Qdemos recibida

Notificación de Qdemos recibida

Abriendo notificación con Swype vertical (de abajo hacia arriba)

Abriendo notificación con Swipe vertical (de abajo hacia arriba)

Notificación abierta. Primera página con la info de la Notificación

Notificación abierta. Primera página con la info de la Notificación

Pasando a la siguiente página de la Notificación, con Swype Horizontal de derecha a izquierda

Pasando a la siguiente página de la Notificación, con Swipe Horizontal de derecha a izquierda

Segunda pantalla de notificación con la opción de abrir la notificación (Ir a pantalla de eleccion de fechas para la Qdada en el Smartphone) a través del SmartWatch

Segunda pantalla de notificación con la opción de abrir la notificación (Ir a pantalla de eleccion de fechas para la Qdada en el Smartphone) a través del SmartWatch

Eliminar notificación con Swipe horizontal de izquierda a derecha (sentido contrario a pasar paginas en la notificacion)

Eliminar notificación con Swipe horizontal de izquierda a derecha (sentido contrario a pasar paginas en la notificacion)

Y esto es todo, como siempre aquí el commit con todo esto hablado para Qdemos!: COMMIT.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s