Tutorial da API de espelho: Google Glass para desenvolvedores da Web

Os dispositivos Android certamente estão dominando o mundo. Milhares de smartphones, tablets, smart-tvs e vários outros dispositivos são alimentados pela plataforma de código aberto do Google. Além disso, o incentivo de computação vestível do Google está levando o mundo a novos patamares. O Google Glass é um dispositivo que está muito perto de mudar a forma como interagimos com a tecnologia. Por muito tempo, andamos de cabeça baixa, olhando para nossas pequenas telas de telefone. O Google Glass está nos ajudando a levantar a cabeça e caminhar com orgulho enquanto interagimos com nossa tecnologia vestível.

No início, o desenvolvimento do Android era limitado apenas aos desenvolvedores que tinham conhecimento de Java. Uma grande comunidade de desenvolvedores estava construindo ótimos aplicativos da web usando outras plataformas e teve grandes dificuldades para adotar o desenvolvimento Android. Existem algumas abordagens que evoluíram posteriormente e forneceram algum tipo de desenvolvimento multiplataforma, capacitando desenvolvedores da Web experientes a começar a criar aplicativos para Android sem conhecimento de Java e SDK do Android. Mas, não seria ótimo desenvolver para o Google Glass sem aprender uma nova linguagem de programação, e até mesmo usando apenas conhecimentos comuns aos desenvolvedores web? Sim, é possível!

O Google forneceu serviços RESTful baseados em nuvem que permitem que desenvolvedores da Web criem Glassware, apenas interagindo com serviços da Web hospedados e gerenciados pelo Google. Esses serviços são denominados Mirror API e são independentes nas plataformas de desenvolvimento. Para começar a usar a API Mirror do Glass, você nem precisa possuir um dispositivo Google Glass, embora alguns recursos avançados exijam que você tenha um.

Há apenas duas coisas que você precisa saber:

• Execute a solicitação OAuth 2.0 e obtenha o token de autenticação
• Executar solicitação HTTP para ponto final predefinido

Este tutorial de desenvolvimento do Google Glass apresentará técnicas que você pode usar para criar aplicativos para o Glass.

Se você ainda não usou o Google Glass, dê uma olhada nesses dois vídeos, pois eles devem fornecer informações suficientes para entender o básico da interface do usuário.

• Introdução ao Google Glass

• Como fazer o Google Glass: primeiros passos

Há vídeos ainda mais úteis para configuração e navegação aqui, e muito mais detalhes sobre a interface do usuário aqui.

Existem muitas diferenças entre a API Mirror e o desenvolvimento nativo do Google Glass. O objetivo deste tutorial não é debater sobre essas diferenças, mas fornecer aos desenvolvedores da Web uma visão sobre como o Google Glass funciona e como eles podem embarcar o mais rápido possível.

Como funciona uma API de espelho?

A primeira e mais importante coisa é que você está construindo uma aplicação web padrão. Seu aplicativo será executado em um servidor web e nunca interagirá diretamente com um dispositivo Google Glass. Em vez disso, seu aplicativo interagirá com os serviços da API Mirror. Os aplicativos baseados na API do Mirror não requerem nenhuma instalação no próprio Glass, e todos os serviços já fazem parte do Glass OS.

O dispositivo Google Glass executará seus próprios serviços de sincronização para enviar ou puxar conteúdo de volta para seu aplicativo por meio da API Mirror.

Você não pode afetar a frequência de quando o Google Glass verifica atualizações na API Mirror, e ter o “intermediário” tem um custo. A consequência direta dessa arquitetura é que você não pode ter uma interação em tempo real com os usuários do Glass. Você sempre deve esperar um atraso entre sua solicitação de uma ação e o evento real sendo executado no dispositivo Glass.

Configuração e autenticação

Para usar a API Mirror para desenvolvimento da Web, você precisa definir uma identidade de aplicativo no Google Developers Console. Abra o console de APIs do Google e faça login com sua conta do Google.

Crie seu novo projeto; vamos chamá-lo de “Mirror API Demo”

A próxima coisa que você precisa fazer é habilitar a API Mirror para seu aplicativo da Web do Glass. Para fazer isso, clique no botão “Ativar uma API” na página de visão geral do projeto, encontre a API de espelho na lista e ative-a.

Em seguida, crie o ID do cliente para aplicativos da Web do Glass. Para fazer isso, basta clicar no botão “Criar novo ID do cliente” na tela Credenciais.

Nota : Você pode ser solicitado a preencher os detalhes da “tela de consentimento”. Os dados neste formulário são apresentados a um usuário ao conceder acesso ao seu aplicativo.

Testaremos a API Mirror usando o Google Glass Playground. Para habilitar o Playground, você precisará autorizar https://mirror-api-playground.appspot.com como uma origem válida para solicitações HTTP. Não usaremos o redirecionamento OAuth nesta demonstração, portanto, você pode deixar qualquer coisa no campo “Redirect URIs”.

Clique em "Criar ID do cliente" e você estará pronto para fazer sua primeira solicitação de API de espelho.

Autenticação do aplicativo da API Mirror

Importante : não confunda sua conta de desenvolvedor da API Mirror com sua conta de proprietário do Google Glass. Você pode fazer este exercício com apenas uma conta que seja desenvolvedora e proprietária do Glass, mas é importante estar ciente da separação dessas duas contas.

Cada solicitação HTTP enviada do seu aplicativo da Web do Glass para a API Mirror precisa ser autorizada. A API Mirror está usando a “autenticação de portador” padrão, o que significa que você precisa fornecer um token com cada solicitação. O token é emitido pela API do Google usando o protocolo OAuth 2.0 padrão.

1. O usuário (Glass Owner) abrirá uma página em sua aplicação web e clicará em “Login”
2. Seu aplicativo emitirá uma solicitação para a API do Google e o usuário verá uma tela de consentimento gerada pela API do Google (geralmente em uma nova tela pop-up)
3. Se as permissões de acesso forem concedidas ao seu aplicativo, a API do Google emitirá um token que você usará para chamar a API Mirror

Espelhar o Playground da API

O Google Glass Playground permite que você experimente como o conteúdo é exibido em um Glass. Você pode usá-lo para enviar conteúdo para o seu Glass, mas mesmo se não tiver um dispositivo, poderá ver como ele ficaria na tela do Glass.

O Mirror API Playground pode ser encontrado neste URL.

Já permitimos o endpoint Mirror API Playground como uma origem de solicitação HTTP válida. Para usar o Playground, você precisará “identificar o Mirror API Playground como seu aplicativo” fornecendo seu ID do cliente. Você pode encontrar o ID do cliente do seu aplicativo no Google Developers Console.

Ao clicar em "Autorizar", você verá uma tela de consentimento do OAuth 2.0, semelhante à imagem abaixo. Observe que você deve fazer login usando sua conta de “Proprietário do Glass”, pois essas são as credenciais que o aplicativo usará para interagir com o Glass.

Depois de clicar em "Aceitar", o Mirror API Playground será identificado como seu próprio aplicativo; ele obterá acesso à linha do tempo do Glass do usuário e você poderá interagir com o dispositivo Google Glass a partir do Playground.

Olá Exploradores de Vidro!

O Mirror API Playground é preenchido com modelos predefinidos que você pode usar para experimentar a API. Percorra a lista e encontre um exemplo que você mais goste. Para esta demonstração escolhi o cartão “Hello Explorers”.

O item selecionado será exibido no Playground, juntamente com o conteúdo do HTTP Request Body usado para construir seu layout.

 { "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" } }

Sinta-se à vontade para modificar a solicitação e, quando estiver satisfeito com o design, clique no botão “Inserir item”. Após o processamento da solicitação, sua “Linha do tempo” será atualizada. Se você tiver um dispositivo Glass, o item também será inserido na linha do tempo.

Escrevendo seu próprio aplicativo da Web da API de espelho

Parabéns! Você executou sua primeira solicitação de API Mirror e enviou uma mensagem para seu Google Glass, sem sequer escrever nenhum código.

Vamos tornar as coisas um pouco mais interessantes. Queremos remover o Mirror API Playground e colocar nosso próprio aplicativo em seu lugar.

Primeiro, precisamos garantir que a API do Google aceitará solicitações de nosso aplicativo. Volte para o Google Developers Console e adicione o URL do seu aplicativo à lista de origens JavaScript autorizadas. Usarei http://localhost:3000 , mas você pode modificar isso para sua própria configuração.

Obtendo o token de autorização

Para executar a solicitação OAuth 2.0 e obter o token de autorização da API do Google, usaremos a biblioteca cliente JavaScript da API do Google.

Crie uma página HTML simples com o seguinte conteúdo, certifique-se de substituir o ID do CLIENTE pelo ID do seu aplicativo:

 <!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>

Ao iniciar o aplicativo Google Glass (certifique-se de que ele esteja sendo executado no URL especificado como origem JavaScript autorizada no Google Developers Console) e clicar em "Autorizar", você iniciará o fluxo OAuth 2.0. Faça login com sua conta do Google e seu token será exibido no console do navegador.

Agora, armado com seu token, você está pronto para começar a postar na API Mirror! Seu token expirará em 60 minutos, mas isso deve ser mais do que suficiente para terminar a demonstração. Você sempre pode obter outro token clicando em "Autorizar" novamente.

Serviços RESTful e solicitações HTTP são termos comuns entre todos os desenvolvedores da Web, não importa qual plataforma de desenvolvimento ou linguagem de programação eles usem. Para experimentar esta demonstração, você precisará executar solicitações HTTP padrão para os endpoints da API Mirror. Eu escolho usar o Postman para isso. Sinta-se à vontade para pegar os detalhes da solicitação e implementar a Demo em sua linguagem de programação favorita. Use o Postman ou qualquer outra ferramenta cliente HTTP.

Obtendo os itens da linha do tempo

Você sempre pode recuperar a lista de itens que enviou ao Glass executando HTTP GET para https://www.googleapis.com/mirror/v1/timeline .

Cada solicitação para a API Mirror precisa ser autorizada. Um token de autorização é enviado como um valor em Authorization HTTP Header, prefixado pela palavra “Bearer“.

No Postman ficaria mais ou menos assim:

Se você executar a solicitação, a resposta deverá ser semelhante a esta:

 { "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" } } ] }

Se você der uma olhada no conteúdo da resposta, notará que ela contém o item que você postou no Playground.

Criando um novo item

Para criar um novo item, você precisa executar POST para https://www.googleapis.com/mirror/v1/timeline . Você também precisará especificar que Content-Type é application/json e fornecer o cabeçalho Authorization , assim como no exemplo anterior.

Vamos supor que somos grandes fãs de esportes e nosso time favorito, os Aliens, estão jogando contra os Predators. Queremos usar a API Mirror para enviar resultados para todos os fãs.

O corpo da solicitação deve ficar assim.

 { "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" } }

E a tela do Postman deve ser semelhante a esta.

Ao executar a solicitação, a API Mirror deve fornecer uma resposta semelhante 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" } }

Mesmo que você não tenha um Google Glass, você pode voltar ao Mirror API Playground e clicar no botão “Reload Timeline Items”. Você deverá ver dois itens, exatamente como seriam exibidos na tela do Glass. Ambos os itens serão listados se você executar o primeiro exemplo e GET os itens.

Se você der uma olhada no conteúdo da resposta do exemplo anterior, poderá encontrar uma linha semelhante a

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

A API Mirror atribuirá um ID globalmente exclusivo a cada item quando for inserido. Esse ID será incluído na resposta após a execução do POST e será incluído nos detalhes do item quando você executar GET para listar os itens da linha do tempo.

Digamos que os Predators assumiram a liderança e marcaram. Para atualizar a pontuação, você precisará executar PUT to https://www.googleapis.com/mirror/v1/timeline seguido de ID. Igual a

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

Modifique o conteúdo do item para refletir sua alteração.

 { "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" } }

A configuração do Postman deve ser semelhante a esta.

Depois de executar a solicitação e verificar o conteúdo da sua linha do tempo, você deve notar que os Predators estão liderando por 1:0.

Menus e interação com o usuário

Até agora, estávamos apenas enviando conteúdo para o Glass, sem nenhuma interação ou feedback do usuário. Infelizmente, você não pode simular a interação do usuário e precisará usar um dispositivo Glass real para experimentar este exemplo.

Assim, o jogo continua e os Aliens marcam 1:1. Queremos habilitar algum tipo de funcionalidade “Gosto”, onde os usuários poderão executar ações simples enquanto observam um item da linha do tempo.

Primeiro, precisamos adicionar o menu ao nosso cartão mostrando a pontuação. Seguindo as etapas do exemplo anterior, atualize o item da linha do tempo com o seguinte conteúdo:

 { "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!" } ] } ] }

Ao executar essa solicitação, seu usuário verá que a pontuação agora está atualizada para 1:1. Mas quando o usuário toca no Glass, um menu será apresentado.

Se você agora tocar em "Gosto", nada acontecerá!

Já mencionei que sempre existe um “intermediário” entre seu aplicativo e um dispositivo Glass. Quando você seleciona “Gosto”, o dispositivo Glass enviará as informações para a API Mirror, mas você não especificou para onde a API Mirror deve encaminhar essas informações.

É aqui que entram as Assinaturas . Você precisa se inscrever para receber notificações da API Mirror quando seu usuário realizar uma ação.

Para criar uma assinatura, você precisa executar um POST para https://www.googleapis.com/mirror/v1/subscriptions .

O corpo da solicitação deve ser assim:

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

callbackUrl contém seu URL de redirecionamento.

Nota : A API Mirror requer criptografia SSL para URL onde os dados do evento são encaminhados. No entanto, para fins de teste, o Google forneceu um proxy em https://mirrornotifications.appspot.com/forward .

A API Mirror executará POST para a URL especificada em uma assinatura. Você precisará usar seu ambiente de desenvolvimento preferido para criar um manipulador para essa URL. Forneci o exemplo simples de JavaScript (NodeJS/ExpressJS) que apenas produzirá o conteúdo da solicitação.

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

Fecho

A API do Google Glass Mirror é única em muitos aspectos. Projetado para dar aos desenvolvedores da Web acesso ao desenvolvimento do Glass sem nenhum pré-requisito, ele está incluído no núcleo do Glass OS e não depende de ferramentas de desenvolvimento de terceiros. A API Mirror é totalmente gerenciada e mantida pelo Google e faz parte da plataforma de API do Google, o que alivia você de quaisquer preocupações relacionadas à estabilidade e escalabilidade.

Se você é um desenvolvedor web que nunca usou o Google Glass, provavelmente evitou aprender sobre a API Mirror porque achou que precisava ter um dispositivo Glass ou pensou que precisaria gastar muito tempo aprendendo sobre o desenvolvimento do Google Glass. Espero que este tutorial da API Mirror tenha ajudado você a quebrar essa barreira e tenha lhe dado um empurrãozinho para passar alguns minutos analisando esse tipo de desenvolvimento.

A tecnologia vestível está aqui, o Google Glass está na fronteira e todo desenvolvedor deve ter a chance de fazer parte disso. A API Mirror oferece exatamente isso.

Este artigo fornece ferramentas e instruções para autenticar seu aplicativo Mirror API, ler dados do Google Glass, enviar dados ao Google Glass e receber feedback de um usuário. Para saber mais sobre a API Mirror e seus recursos, visite os Guias da API Mirror.