Tutorial de Mirror API: Google Glass para desarrolladores web

Los dispositivos Android ciertamente se están apoderando del mundo. Miles de teléfonos inteligentes, tabletas, televisores inteligentes y muchos otros dispositivos funcionan con la plataforma de código abierto de Google. Además de eso, el incentivo de la informática portátil de Google está empujando al mundo a nuevas alturas. Google Glass es un dispositivo que está muy cerca de cambiar la forma en que interactuamos con la tecnología. Durante mucho tiempo, hemos estado caminando con la cabeza gacha, mirando las pequeñas pantallas de nuestros teléfonos. Google Glass nos está ayudando a levantar la cabeza y caminar con orgullo mientras interactuamos con nuestra tecnología portátil.

Al principio, el desarrollo de Android estaba limitado solo a desarrolladores que tenían conocimientos de Java. Una gran comunidad de desarrolladores creaba excelentes aplicaciones web utilizando otras plataformas y tenía grandes dificultades para adoptar el desarrollo de Android. Hay algunos enfoques que evolucionaron más tarde y proporcionaron algún tipo de desarrollo multiplataforma, lo que permitió a los desarrolladores web expertos comenzar a crear aplicaciones para Android sin conocimientos de Java y SDK de Android. Pero, ¿no sería genial desarrollar para Google Glass sin aprender un nuevo lenguaje de programación, e incluso utilizando conocimientos comunes a los desarrolladores web? ¡Sí, es posible!

Google proporcionó servicios RESTful basados ​​en la nube que permiten a los desarrolladores web crear Glassware, simplemente interactuando con los servicios web alojados y administrados por Google. Estos servicios se denominan Mirror API y son independientes de las plataformas de desarrollo. Para comenzar a usar la API Mirror de Glass, ni siquiera tiene que poseer un dispositivo Google Glass, aunque algunas funciones avanzadas requieren que tenga uno.

Solo hay dos cosas que debes saber:

• Ejecute la solicitud de OAuth 2.0 y obtenga el token de autenticación
• Ejecutar solicitud HTTP al punto final predefinido

Este tutorial de desarrollo de Google Glass le presentará las técnicas que puede usar para crear aplicaciones para Glass.

Si aún no ha usado Google Glass, eche un vistazo a estos dos videos, ya que deberían brindarle suficiente información para comprender los conceptos básicos de la interfaz de usuario.

• Introducción a Google Glass

• Google Glass Cómo hacerlo: Primeros pasos

Hay videos aún más útiles para la configuración y la navegación aquí, y muchos más detalles sobre la interfaz de usuario aquí.

Hay muchas diferencias entre Mirror API y el desarrollo nativo de Google Glass. El propósito de este tutorial no es debatir sobre estas diferencias, sino brindar a los desarrolladores web información sobre cómo funciona Google Glass y cómo pueden incorporarse lo antes posible.

¿Cómo funciona una API espejo?

Lo primero y más importante es que está creando una aplicación web estándar. Su aplicación se ejecutará en un servidor web y nunca interactuará directamente con un dispositivo Google Glass. En su lugar, su aplicación interactuará con los servicios de la API Mirror. Las aplicaciones basadas en Mirror API no requieren ninguna instalación en el propio Glass, y todos los servicios ya forman parte del sistema operativo Glass.

El dispositivo Google Glass ejecutará sus propios servicios de sincronización para enviar o extraer contenido de su aplicación a través de la API Mirror.

No puede afectar la frecuencia con la que Google Glass busca actualizaciones en Mirror API, y tener el "intermediario" tiene un costo. La consecuencia directa de esta arquitectura es que no se puede tener una interacción en tiempo real con los usuarios de Glass. Siempre debe esperar un retraso entre su solicitud de acción y el evento real que se ejecuta en el dispositivo Glass.

Configuración y autenticación

Para utilizar la API Mirror para el desarrollo web, debe definir una identidad de aplicación en Google Developers Console. Abra la consola de API de Google e inicie sesión con su cuenta de Google.

Crea tu nuevo proyecto; llamémoslo "Mirror API Demo"

Lo siguiente que debe hacer es habilitar Mirror API para su aplicación web Glass. Para hacer eso, haga clic en el botón "Habilitar una API" en la página de descripción general del proyecto, busque Mirror API en la lista y enciéndalo.

A continuación, cree el ID de cliente para las aplicaciones web de Glass. Para hacer esto, simplemente haga clic en el botón "Crear nuevo ID de cliente" en la pantalla Credenciales.

Nota : es posible que se le solicite que complete los detalles de la "Pantalla de consentimiento". Los datos de este formulario se presentan a un usuario cuando se otorga acceso a su aplicación.

Probaremos la API Mirror usando Google Glass Playground. Para habilitar Playground, deberá autorizar https://mirror-api-playground.appspot.com como un origen válido para las solicitudes HTTP. No usaremos la redirección de OAuth en esta demostración, por lo que puede dejar cualquier cosa en el campo "Redirigir URI".

Haga clic en "Crear ID de cliente" y estará listo para realizar su primera solicitud de Mirror API.

Autenticación de la aplicación Mirror API

Importante : no confunda su cuenta de desarrollador de API Mirror con su cuenta de propietario de Google Glass. Puede hacer este ejercicio con una sola cuenta que sea desarrollador y propietario de Glass, pero es importante tener en cuenta la separación de estas dos cuentas.

Cada solicitud HTTP enviada desde su aplicación web Glass a Mirror API debe ser autorizada. Mirror API utiliza la "autenticación de portador" estándar, lo que significa que debe proporcionar un token con cada solicitud. El token es emitido por la API de Google utilizando el protocolo OAuth 2.0 estándar.

1. El usuario (Propietario de Glass) abrirá una página en su aplicación web y hará clic en "Iniciar sesión"
2. Su aplicación emitirá una solicitud a la API de Google y se le presentará al usuario una pantalla de consentimiento generada por la API de Google (generalmente en una nueva pantalla emergente)
3. Si se otorgan permisos de acceso a su aplicación, la API de Google emitirá un token que utilizará para llamar a la API Mirror.

Área de juegos de la API Mirror

Google Glass Playground le permite experimentar cómo se muestra el contenido en un Glass. Puede usarlo para enviar contenido a su Glass, pero incluso si no tiene un dispositivo, puede ver cómo se vería en la pantalla Glass.

Mirror API Playground se puede encontrar en esta URL.

Ya hemos permitido el punto final Mirror API Playground como un origen de solicitud HTTP válido. Para utilizar Playground, deberá "identificar Mirror API Playground como su aplicación" proporcionando su ID de cliente. Puede encontrar el ID de cliente de su aplicación en Google Developers Console.

Cuando haga clic en "Autorizar", se le presentará una pantalla de consentimiento de OAuth 2.0, similar a la imagen a continuación. Tenga en cuenta que debe iniciar sesión con su cuenta de "Propietario de Glass", ya que estas son las credenciales que utilizará la aplicación para interactuar con Glass.

Después de hacer clic en "Aceptar", Mirror API Playground se identificará como su propia aplicación; obtendrá acceso a la línea de tiempo de Glass del usuario y podrá interactuar con el dispositivo Google Glass desde Playground.

¡Hola, exploradores de vidrio!

Mirror API Playground está lleno de plantillas predefinidas que puede usar para probar la API. Desplácese por la lista y encuentre el ejemplo que más le guste. Para esta demostración elegí la tarjeta “Hello Explorers”.

El elemento seleccionado se mostrará en Playground, junto con el contenido del cuerpo de solicitud HTTP utilizado para construir su diseño.

 { "text": "Hello Explorers,\n\nWelcome to Glass!\n\n+Project Glass\n", "creator": { "displayName": "Project Glass", "imageUrls": [ "https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360" ] }, "menuItems": [ { "action": "REPLY" } ], "notification": { "level": "DEFAULT" } }

No dude en modificar la solicitud y, cuando esté satisfecho con el diseño, haga clic en el botón "Insertar elemento". Después de que se procese la solicitud, se actualizará su "Línea de tiempo". Si tiene un dispositivo Glass, el elemento también se insertará en la línea de tiempo.

Escribir su propia aplicación web Mirror API

¡Felicidades! Ejecutó su primera solicitud de Mirror API y envió un mensaje a su Google Glass, sin siquiera escribir ningún código.

Hagamos las cosas un poco más interesantes. Queremos eliminar Mirror API Playground y colocar nuestra propia aplicación en su lugar.

Primero, debemos asegurarnos de que la API de Google aceptará solicitudes de nuestra aplicación. Vuelva a Google Developers Console y agregue la URL de su aplicación a la lista de orígenes de JavaScript autorizados. Usaré http://localhost:3000 pero puede modificar esto para su propia configuración.

Obtener el token de autorización

Para ejecutar la solicitud de OAuth 2.0 y obtener el token de autorización de la API de Google, utilizaremos la biblioteca de cliente de JavaScript de la API de Google.

Cree una página HTML simple con el siguiente contenido, asegúrese de reemplazar la ID DEL CLIENTE con la ID de su aplicación:

 <!DOCTYPE html> <html> <head> <title>{{ title }}</title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="https://apis.google.com/js/client.js"></script> <script> function auth() { var config = { 'client_id': <YOUR APPLICATION CLIENT ID>', 'scope': [ 'https://www.googleapis.com/auth/userinfo.profile', 'https://www.googleapis.com/auth/glass.timeline', 'https://www.googleapis.com/auth/glass.location' ] }; gapi.auth.authorize(config, function () { console.log('login complete'); console.log(gapi.auth.getToken()); }); } </script> </head> <body> <h1>{{ title }}</h1> <button>Authorize</button> </body> </html>

Cuando inicie la aplicación Google Glass (asegúrese de que se esté ejecutando en la URL que especificó como origen de JavaScript autorizado en Google Developers Console) y haga clic en "Autorizar", comenzará el flujo de OAuth 2.0. Inicie sesión con su cuenta de Google y su token se mostrará en la consola del navegador.

Ahora, armado con su token, ¡está listo para comenzar a publicar en Mirror API! Su token caducará en 60 minutos, pero eso debería ser tiempo más que suficiente para finalizar la demostración. Siempre puede obtener otro token haciendo clic en "Autorizar" nuevamente.

Los servicios RESTful y las solicitudes HTTP son términos comunes entre todos los desarrolladores web, sin importar qué plataforma de desarrollo o lenguaje de programación utilicen. Para probar esta demostración, deberá ejecutar solicitudes HTTP estándar hacia los puntos finales de la API Mirror. Elijo usar el cartero para esto. Siéntase libre de tomar los detalles de la solicitud e implementar la demostración en su lenguaje de programación favorito. Utilice Postman o cualquier otra herramienta de cliente HTTP.

Obtener los elementos de la línea de tiempo

Siempre puede recuperar la lista de elementos que envió a Glass ejecutando HTTP GET en https://www.googleapis.com/mirror/v1/timeline .

Cada solicitud hacia Mirror API debe ser autorizada. Un token de autorización se envía como un valor en el encabezado HTTP de autorización, precedido por la palabra "Portador".

En Postman sería algo como esto:

Si ejecuta la solicitud, la respuesta debería ser similar a esto:

 { "kind": "mirror#timeline", "nextPageToken": "CsEBCqQBwnSXw3uyIAD__wAA_wG4k56MjNGKjJqN18bHzszIy8rMz8nIy9bRlouaktedxp2dyJrHmtLInsue0suZzZvSncvOxtLIyJnGnJyex57Px8zW_wD-__730HDTmv_7_v5HbGFzcy51c2VyKDk4MTM3NDUzMDY3NCkuaXRlbShiOWJiN2U4ZS03YTRhLTRmMmQtYjQxOS03N2Y5Y2NhOGEwODMpAAEQASG5sX4SXdVLF1AAWgsJsgPYYufX654QASAA8ISVfAE=", "items": [ { "kind": "mirror#timelineItem", "id": "b9bb7e8e-7a4a-4f2d-b419-77f9cca8a083", "selfLink": "https://www.googleapis.com/mirror/v1/timeline/b9bb7e8e-7a4a-4f2d-b419-77f9cca8a083", "created": "2014-11-04T19:11:07.554Z", "updated": "2014-11-04T19:11:07.554Z", "etag": "1415128267554", "creator": { "kind": "mirror#contact", "source": "api:182413127917", "displayName": "Project Glass", "imageUrls": [ "https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360" ] }, "text": "Hello Explorers,\n\nWelcome to Glass!\n\n+Project Glass\n", "menuItems": [ { "action": "REPLY" } ], "notification": { "level": "DEFAULT" } } ] }

Si observa el contenido de la respuesta, notará que contiene el elemento que publicó desde Playground.

Creación de un nuevo artículo

Para crear un nuevo elemento, debe ejecutar POST en https://www.googleapis.com/mirror/v1/timeline . También deberá especificar que Content-Type es application/json y proporcionar el encabezado de Authorization , como en el ejemplo anterior.

Supongamos que somos grandes fanáticos de los deportes y que nuestro equipo favorito, los Aliens, juegan contra los Predators. Queremos usar Mirror API para enviar resultados a todos los fanáticos.

El cuerpo de la solicitud debería verse así.

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">0</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">0</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" } }

Y la pantalla del cartero debería ser similar a esta.

Cuando ejecuta la solicitud, Mirror API debe proporcionar una respuesta similar a esta.

 { kind: "mirror#timelineItem", id: "e15883ed-6ca4-4324-83bb-d79958258603", selfLink: https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603, created: "2014-11-04T19:29:54.152Z", updated: "2014-11-04T19:29:54.152Z", etag: "1415129394152", html: "<article>\ <section>\ <div class=\"layout-two-column\">\ <div class=\"align-center\">\ <p>Aliens</p>\ <p class=\"text-x-large\">0</p>\ </div>\ <div class=\"align-center\">\ <p>Predators</p>\ <p class=\"text-x-large\">0</p>\ </div>\ </div>\ </section>\ <footer>\ <p>Final Score</p>\ </footer>\ </article>\ ", notification: { level: "DEFAULT" } }

Incluso si no tiene un Google Glass, puede volver al Mirror API Playground y hacer clic en el botón "Recargar elementos de la línea de tiempo". Debería ver dos elementos, exactamente como se mostrarían en la pantalla Glass. Ambos elementos aparecerán en la lista si ejecuta el primer ejemplo y OBTIENE los elementos.

Si observa el contenido de la respuesta del ejemplo anterior, puede encontrar una línea similar a

 id: "e15883ed-6ca4-4324-83bb-d79958258603"

Mirror API asignará una identificación global única a cada elemento cuando se inserte. Este ID se incluirá en la respuesta después de que se ejecute POST y se incluirá en los detalles del elemento cuando ejecute GET para enumerar los elementos de la línea de tiempo.

Digamos que los Predators tomaron la delantera y anotaron. Para actualizar la puntuación, deberá ejecutar PUT en https://www.googleapis.com/mirror/v1/timeline seguido de ID. Similar a

 https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603

Modifique el contenido del elemento para reflejar su cambio.

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">0</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">1</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" } }

La configuración del cartero debería ser similar a esto.

Después de ejecutar la solicitud y verificar el contenido de su línea de tiempo, debe notar que los Predators están a la cabeza por 1:0.

Menús e Interacción con el Usuario

Hasta ahora, solo enviábamos contenido a Glass, sin ninguna interacción o comentario por parte del usuario. Desafortunadamente, no puede simular la interacción del usuario y necesitará usar un dispositivo Glass real para probar este ejemplo.

Entonces, el juego continúa y los Aliens puntúan 1:1. Queremos habilitar algún tipo de funcionalidad "Me gusta", donde los usuarios podrán ejecutar acciones simples mientras miran un elemento de la línea de tiempo.

Primero, debemos agregar el menú a nuestra tarjeta que muestra la puntuación. Siguiendo los pasos del ejemplo anterior, actualice el elemento de la línea de tiempo con el siguiente contenido:

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">1</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">1</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" }, "menuItems":[ { "action":"CUSTOM", "id":"i_like", "values":[ { "displayName":"I Like!" } ] } ] }

Cuando ejecute esta solicitud, su usuario verá que la puntuación ahora se actualiza a 1:1. Pero cuando el usuario toque el Glass, se presentará un menú.

Si ahora toca "Me gusta", ¡no pasará nada!

Ya mencioné que siempre hay un "intermediario" entre su aplicación y un dispositivo Glass. Cuando selecciona "Me gusta", el dispositivo Glass enviará la información a Mirror API, pero no ha especificado a dónde debe enviar esta información Mirror API.

Aquí es donde entran las suscripciones . Debe suscribirse para recibir notificaciones de Mirror API cuando su usuario realiza una acción.

Para crear una suscripción, debe ejecutar un POST en https://www.googleapis.com/mirror/v1/subscriptions .

El cuerpo de la solicitud debe ser así:

 { "collection":"timeline", "userToken":"toptal_test", "operation": ["INSERT","UPDATE","DELETE"], "callbackUrl": "https://mirrornotifications.appspot.com/forward?url=<YOUR URL>" }

callbackUrl contiene su URL de redireccionamiento.

Nota : la API Mirror requiere el cifrado SSL para la URL donde se reenvían los datos del evento. Sin embargo, con fines de prueba, Google ha proporcionado un proxy en https://mirrornotifications.appspot.com/forward .

Mirror API ejecutará POST en la URL que especificó en una suscripción. Deberá usar su entorno de desarrollo preferido para crear un controlador para esa URL. Proporcioné la muestra de JavaScript simple (NodeJS/ExpressJS) que solo generará el contenido de la solicitud.

 router.get('/notify', function(req, res) { console.log(req); res.send("OK"); });

Cierre

La API de Google Glass Mirror es única en muchos sentidos. Diseñado para brindar a los desarrolladores web acceso al desarrollo de Glass sin requisitos previos, se incluye en el núcleo de Glass OS y no depende de herramientas de desarrollo de terceros. Google administra y mantiene la API Mirror, y es parte de la plataforma API de Google, lo que lo libera de cualquier preocupación con respecto a la estabilidad y la escalabilidad.

Si es un desarrollador web que nunca usó Google Glass, probablemente evitó aprender sobre Mirror API porque pensó que necesitaba tener un dispositivo Glass, o pensó que necesitaría pasar mucho tiempo aprendiendo sobre el desarrollo de Google Glass. Espero que este tutorial de Mirror API lo haya ayudado a romper esa barrera y le haya dado un empujón para dedicar unos minutos a analizar este tipo de desarrollo.

La tecnología portátil está aquí, Google Glass está en su frontera y cada desarrollador debería tener la oportunidad de ser parte de ella. Mirror API te ofrece exactamente eso.

Este artículo le brinda herramientas e instrucciones para autenticar su aplicación Mirror API, leer datos de Google Glass, enviar datos a Google Glass y recibir comentarios de un usuario. Para obtener más información sobre Mirror API y sus características, visite las Guías de Mirror API.