Tutorial API Mirror: Google Glass per sviluppatori Web

I dispositivi Android stanno sicuramente conquistando il mondo. Migliaia di smartphone, tablet, smart-tv e un sacco di altri dispositivi sono alimentati dalla piattaforma open source di Google. Inoltre, l'incentivo per il wearable computing di Google sta spingendo il mondo a livelli completamente nuovi. Google Glass è un dispositivo che è molto vicino a cambiare il modo in cui interagiamo con la tecnologia. Per molto tempo abbiamo camminato a testa bassa, fissando i nostri piccoli schermi dei telefoni. Google Glass ci sta aiutando ad alzare la testa e camminare con orgoglio mentre interagiamo con la nostra tecnologia indossabile.

All'inizio, lo sviluppo di Android era limitato solo agli sviluppatori con conoscenza di Java. Una vasta comunità di sviluppatori stava costruendo grandi applicazioni Web utilizzando altre piattaforme e ha avuto grosse difficoltà ad adottare lo sviluppo di Android. Ci sono alcuni approcci che si sono evoluti in seguito e hanno fornito una sorta di sviluppo multipiattaforma, consentendo agli sviluppatori Web esperti di iniziare a creare app per Android senza la conoscenza di Java e Android SDK. Ma non sarebbe fantastico sviluppare per Google Glass senza imparare un nuovo linguaggio di programmazione e anche solo usando le conoscenze comuni agli sviluppatori web? Sì, è possibile!

Google ha fornito servizi RESTful basati su cloud che consentono agli sviluppatori Web di creare Glassware, semplicemente interagendo con i servizi Web ospitati e gestiti da Google. Questi servizi sono denominati Mirror API e sono indipendenti dalle piattaforme di sviluppo. Per iniziare a utilizzare l'API Mirror di Glass, non devi nemmeno possedere un dispositivo Google Glass, anche se alcune funzionalità avanzate richiedono che tu ne abbia uno.

Ci sono solo due cose che devi sapere:

• Eseguire la richiesta OAuth 2.0 e ottenere il token di autenticazione
• Esegui la richiesta HTTP all'endpoint predefinito

Questo tutorial sullo sviluppo di Google Glass ti introdurrà alle tecniche che puoi utilizzare per creare applicazioni per Glass.

Se non hai ancora utilizzato Google Glass, dai un'occhiata a questi due video, poiché dovrebbero darti informazioni sufficienti per comprendere le basi dell'interfaccia utente.

• Introduzione a Google Glass

• Google Glass How-to: per iniziare

Ci sono ancora più video utili per la configurazione e la navigazione qui, e molti altri dettagli sull'interfaccia utente qui.

Ci sono molte differenze tra l'API Mirror e lo sviluppo nativo di Google Glass. Lo scopo di questo tutorial non è quello di discutere su queste differenze, ma di fornire agli sviluppatori web informazioni su come funziona Google Glass e su come possono salire a bordo il prima possibile.

Come funziona un'API Mirror?

La prima e più importante cosa è che stai creando un'applicazione web standard. La tua applicazione verrà eseguita su un server web e non interagirà mai direttamente con un dispositivo Google Glass. Al contrario, la tua applicazione interagirà con i servizi dell'API Mirror. Le applicazioni basate su Mirror API non richiedono alcuna installazione sul Glass stesso e tutti i servizi fanno già parte del Glass OS.

Il dispositivo Google Glass eseguirà i propri servizi di sincronizzazione per eseguire il push o il pull dei contenuti nella tua applicazione tramite l'API Mirror.

Non puoi influire sulla frequenza con cui Google Glass verifica la presenza di aggiornamenti sull'API Mirror e avere "l'intermediario" ha un costo. La conseguenza diretta di questa architettura è che non è possibile avere un'interazione in tempo reale con gli utenti di Glass. Dovresti sempre aspettarti un ritardo tra la tua richiesta di azione e l'evento effettivo che viene eseguito sul dispositivo Glass.

Configurazione e autenticazione

Per utilizzare l'API Mirror per lo sviluppo web, devi definire un'identità dell'applicazione nella Google Developers Console. Apri la console delle API di Google e accedi con il tuo account Google.

Crea il tuo nuovo progetto; chiamiamolo "Mirror API Demo"

La prossima cosa che devi fare è abilitare l'API Mirror per la tua applicazione web Glass. Per fare ciò, fai clic sul pulsante "Abilita un'API" nella pagina della panoramica del progetto, trova l'API Mirror nell'elenco e attivala.

Quindi, crea l'ID client per le applicazioni Web Glass. Per fare ciò, fai semplicemente clic sul pulsante "Crea nuovo ID cliente" nella schermata Credenziali.

Nota : ti potrebbe essere chiesto di compilare i dettagli della "Schermata di consenso". I dati su questo modulo vengono presentati a un utente quando concede l'accesso alla tua applicazione.

Testeremo l'API Mirror utilizzando Google Glass Playground. Per abilitare il Playground dovrai autorizzare https://mirror-api-playground.appspot.com come origine valida per le richieste HTTP. Non utilizzeremo il reindirizzamento OAuth in questa demo, quindi puoi lasciare qualsiasi cosa nel campo "Redirect URIs".

Fai clic su "Crea ID cliente" e sei pronto per effettuare la tua prima richiesta dell'API Mirror.

Autenticazione dell'applicazione Mirror API

Importante : non confondere il tuo account sviluppatore dell'API Mirror con il tuo account proprietario di Google Glass. Potresti fare questo esercizio con un solo account che è uno sviluppatore e un proprietario di Glass, ma è importante essere consapevoli della separazione di questi due account.

Ogni richiesta HTTP inviata dalla tua applicazione web Glass all'API Mirror deve essere autorizzata. Mirror API utilizza la "Bearer Authentication" standard, il che significa che è necessario fornire un token con ogni richiesta. Il token viene emesso dall'API di Google utilizzando il protocollo standard OAuth 2.0.

1. L'utente (proprietario del vetro) aprirà una pagina della tua applicazione web e farà clic su "Accedi"
2. La tua applicazione invierà una richiesta all'API di Google e all'utente verrà presentata una schermata di consenso generata dall'API di Google (di solito in una nuova schermata popup)
3. Se vengono concesse autorizzazioni di accesso alla tua applicazione, l'API di Google emetterà un token che utilizzerai per chiamare l'API Mirror

Parco giochi Mirror API

Google Glass Playground ti consente di sperimentare come i contenuti vengono visualizzati su un vetro. Puoi usarlo per inviare contenuti al tuo Glass, ma anche se non hai un dispositivo puoi vedere come apparirebbe sul display Glass.

Mirror API Playground può essere trovato a questo URL.

Abbiamo già consentito l'endpoint Mirror API Playground come origine di una richiesta HTTP valida. Per utilizzare Playground dovrai "identificare Mirror API Playground come tua applicazione" fornendo il tuo ID cliente. Puoi trovare l'ID cliente della tua applicazione su Google Developers Console.

Quando fai clic su "Autorizza", ti verrà presentata una schermata di consenso OAuth 2.0, simile all'immagine qui sotto. Tieni presente che devi accedere utilizzando il tuo account "Proprietario Glass", poiché queste sono le credenziali che l'applicazione utilizzerà per interagire con il Glass.

Dopo aver fatto clic su "Accetta", Mirror API Playground verrà identificato come la tua applicazione; otterrà l'accesso alla Timeline Glass dell'Utente e potrai interagire con il dispositivo Google Glass dal Playground.

Ciao esploratori del vetro!

Il parco giochi Mirror API è pieno di modelli predefiniti che puoi utilizzare per provare l'API. Scorri l'elenco e trova un esempio che ti piace di più. Per questa demo ho scelto la card “Hello Explorers”.

L'elemento selezionato verrà visualizzato nel Playground, insieme al contenuto del corpo della richiesta HTTP utilizzato per costruirne il 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" } }

Sentiti libero di modificare la richiesta e, quando sei soddisfatto del design, fai clic sul pulsante "Inserisci articolo". Dopo che la richiesta è stata elaborata, la tua "Timeline" verrà aggiornata. Se possiedi un dispositivo Glass, l'oggetto verrà inserito anche nella timeline.

Scrivere la propria applicazione Web Mirror API

Congratulazioni! Hai eseguito la tua prima richiesta dell'API Mirror e inviato un messaggio al tuo Google Glass, senza nemmeno scrivere alcun codice.

Rendiamo le cose un po' più interessanti. Vogliamo rimuovere Mirror API Playground e mettere la nostra applicazione al suo posto.

Innanzitutto, dobbiamo assicurarci che l'API di Google accetterà le richieste dalla nostra applicazione. Torna a Google Developers Console e aggiungi l'URL della tua applicazione all'elenco delle origini JavaScript autorizzate. Userò http://localhost:3000 ma puoi modificarlo in base alla tua configurazione.

Ottenere il token di autorizzazione

Per eseguire la richiesta OAuth 2.0 e ottenere il token di autorizzazione dall'API di Google, utilizzeremo la libreria client JavaScript dell'API di Google.

Crea una semplice pagina HTML con il seguente contenuto, assicurati di sostituire CLIENT ID con il tuo ID applicazione:

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

Quando avvii l'applicazione Google Glass (assicurati che sia in esecuzione sull'URL specificato come origine JavaScript autorizzata in Google Developers Console) e fai clic su "Autorizza", avvierai il flusso OAuth 2.0. Accedi con il tuo account Google e il tuo token verrà visualizzato nella console del browser.

Ora, armato del tuo token, sei pronto per iniziare a pubblicare su Mirror API! Il tuo token scadrà tra 60 minuti, ma dovrebbe essere più che sufficiente per completare la demo. Puoi sempre ottenere un altro token facendo nuovamente clic su "Autorizza".

I servizi RESTful e le richieste HTTP sono termini comuni tra tutti gli sviluppatori Web, indipendentemente dalla piattaforma di sviluppo o dal linguaggio di programmazione utilizzato. Per provare questa demo, dovrai eseguire richieste HTTP standard verso gli endpoint dell'API Mirror. Scelgo di usare il postino per questo. Sentiti libero di prendere i dettagli della richiesta e implementare la Demo nel tuo linguaggio di programmazione preferito. Usa il postino o qualsiasi altro strumento client HTTP.

Ottenere gli elementi della sequenza temporale

Puoi sempre recuperare l'elenco degli elementi che hai inviato a Glass eseguendo HTTP GET su https://www.googleapis.com/mirror/v1/timeline .

Ogni richiesta verso l'API Mirror deve essere autorizzata. Un token di autorizzazione viene inviato come valore nell'intestazione HTTP di autorizzazione, preceduto dalla parola "Bearer".

In Postman sarebbe simile a questo:

Se esegui la richiesta, la risposta dovrebbe essere simile a questa:

 { "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 dai un'occhiata al contenuto della risposta, noterai che contiene l'elemento che hai pubblicato dal Playground.

Creazione di un nuovo elemento

Per creare un nuovo elemento, devi eseguire POST su https://www.googleapis.com/mirror/v1/timeline . Dovrai anche specificare che Content-Type è application/json e fornire l'intestazione di Authorization , proprio come nell'esempio precedente.

Diamo per scontato che siamo grandi fan degli sport e che la nostra squadra preferita, gli Aliens, stia giocando con i Predators. Vogliamo utilizzare l'API Mirror per inviare risultati a tutti i fan.

Il corpo della richiesta dovrebbe essere simile a questo.

 { "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 lo schermo del postino dovrebbe essere simile a questo.

Quando esegui la richiesta, Mirror API dovrebbe fornire la risposta simile a questa.

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

Anche se non hai un Google Glass, puoi tornare al parco giochi Mirror API e fare clic sul pulsante "Ricarica elementi della sequenza temporale". Dovresti vedere due elementi, esattamente come verrebbero visualizzati sul display Glass. Entrambi gli elementi verranno elencati se esegui il primo esempio e OTTIENI gli elementi.

Se dai un'occhiata al contenuto della risposta dell'esempio precedente, puoi trovare una riga simile a

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

Mirror API assegnerà un ID univoco globale a ogni elemento quando viene inserito. Questo ID verrà incluso nella risposta dopo l'esecuzione del POST e verrà incluso nei dettagli dell'elemento quando esegui GET per elencare gli elementi della sequenza temporale.

Diciamo che i Predators sono passati in vantaggio e hanno segnato. Per aggiornare il punteggio, dovrai eseguire PUT su https://www.googleapis.com/mirror/v1/timeline seguito da ID. Simile a

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

Modifica il contenuto dell'elemento per riflettere la tua modifica.

 { "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 configurazione del postino dovrebbe essere simile a questa.

Dopo aver eseguito la richiesta e verificato il contenuto della sequenza temporale, dovresti notare che i predatori sono in vantaggio di 1:0.

Menu e interazione con l'utente

Finora, stavamo solo spingendo i contenuti su Glass, senza alcuna interazione o feedback da parte dell'utente. Sfortunatamente, non puoi simulare l'interazione dell'utente e dovrai utilizzare un vero dispositivo Glass per provare questo esempio.

Quindi, il gioco continua e Aliens ottiene un punteggio di 1:1. Vogliamo abilitare una sorta di funzionalità "Mi piace", in cui gli utenti saranno in grado di eseguire semplici azioni mentre osservano un elemento della sequenza temporale.

Innanzitutto, dobbiamo aggiungere il menu alla nostra scheda che mostra il punteggio. Seguendo i passaggi dell'esempio precedente, aggiorna l'elemento della sequenza temporale con il contenuto seguente:

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

Quando esegui questa richiesta, il tuo utente vedrà che il punteggio è ora aggiornato a 1:1. Ma quando l'utente tocca il vetro, verrà presentato un menu.

Se ora tocchi "Mi piace", non accadrà nulla!

Ho già detto che c'è sempre un "intermediario" tra la tua applicazione e un dispositivo Glass. Quando selezioni "Mi piace", il dispositivo Glass invierà le informazioni all'API Mirror, ma non hai specificato dove l'API Mirror deve inoltrare queste informazioni.

È qui che entra in gioco Abbonamenti . Devi abbonarti per ricevere notifiche dall'API Mirror quando l'utente esegue un'azione.

Per creare un abbonamento, devi eseguire un POST su https://www.googleapis.com/mirror/v1/subscriptions .

Il corpo della richiesta dovrebbe essere così:

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

callbackUrl contiene il tuo URL di reindirizzamento.

Nota : l'API Mirror richiede la crittografia SSL per l'URL in cui vengono inoltrati i dati dell'evento. Tuttavia, a scopo di test, Google ha fornito un proxy all'indirizzo https://mirrornotifications.appspot.com/forward .

Mirror API eseguirà il POST all'URL specificato in una sottoscrizione. Dovrai utilizzare il tuo ambiente di sviluppo preferito per creare un gestore per quell'URL. Ho fornito il semplice esempio JavaScript (NodeJS/ExpressJS) che produrrà semplicemente il contenuto della richiesta.

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

Chiusura

L'API di Google Glass Mirror è unica in molti modi. Progettato per consentire agli sviluppatori Web di accedere allo sviluppo di Glass senza alcun prerequisito, è incluso nel nucleo di Glass OS e non si basa su strumenti di sviluppo di terze parti. L'API Mirror è completamente gestita e mantenuta da Google e fa parte della piattaforma API di Google, che ti solleva da qualsiasi preoccupazione in merito alla stabilità e alla scalabilità.

Se sei uno sviluppatore web che non ha mai utilizzato Google Glass, probabilmente hai evitato di conoscere l'API Mirror perché pensavi di dover avere un dispositivo Glass o pensavi che avresti dovuto dedicare molto tempo allo sviluppo di Google Glass. Spero che questo tutorial sull'API Mirror ti abbia aiutato a rompere quella barriera e ti abbia dato una spinta a dedicare qualche minuto a guardare questo tipo di sviluppo.

La tecnologia indossabile è qui, Google Glass è alla sua frontiera e ogni sviluppatore dovrebbe avere la possibilità di farne parte. Mirror API ti offre esattamente questo.

Questo articolo fornisce strumenti e istruzioni per autenticare la tua applicazione Mirror API, leggere i dati da Google Glass, inviare dati a Google Glass e ricevere feedback da un utente. Per ulteriori informazioni sull'API Mirror e sulle sue funzionalità, visita le Guide dell'API Mirror.