Tutorial API Mirror: Google Glass pentru dezvoltatori web

Dispozitivele Android cu siguranță cuceresc lumea. Mii de smartphone-uri, tablete, televizoare inteligente și o grămadă de alte dispozitive sunt alimentate de platforma open source a Google. În plus, stimulentul Google pentru calcularea purtabilă împinge lumea la culmi cu totul noi. Google Glass este un dispozitiv care este foarte aproape de a schimba modul în care interacționăm cu tehnologia. De foarte multă vreme, ne plimbăm cu capul în jos, uitându-ne la micile noastre ecrane ale telefonului. Google Glass ne ajută să ridicăm capul și să mergem mândri în timp ce interacționăm cu tehnologia noastră portabilă.

La început, dezvoltarea Android a fost limitată doar la dezvoltatorii care aveau cunoștințe Java. O mare comunitate de dezvoltatori construiau aplicații web grozave folosind alte platforme și au avut dificultăți mari în adoptarea dezvoltării Android. Există câteva abordări care au evoluat mai târziu și au furnizat un fel de dezvoltare multiplatformă, dând putere dezvoltatorilor web experimentați să înceapă să construiască aplicații pentru Android fără cunoștințe despre Java și Android SDK. Dar, nu ar fi grozav să dezvolți pentru Google Glass fără a învăța un nou limbaj de programare și chiar folosind doar cunoștințele comune dezvoltatorilor web? Da, este posibil!

Google a furnizat servicii RESTful bazate pe cloud care le permit dezvoltatorilor web să construiască Glassware, doar prin interacțiunea cu serviciile web găzduite și gestionate de Google. Aceste servicii sunt denumite Mirror API și sunt independente pe platformele de dezvoltare. Pentru a începe să utilizați API-ul Glass’s Mirror, nici măcar nu trebuie să aveți un dispozitiv Google Glass, deși unele funcții avansate necesită să aveți unul.

Există doar două lucruri pe care trebuie să le știi:

• Executați cererea OAuth 2.0 și obțineți Jetonul de autentificare
• Executați cererea HTTP la punctul final predefinit

Acest tutorial de dezvoltare Google Glass vă va prezenta tehnicile pe care le puteți utiliza pentru a crea aplicații pentru Glass.

Dacă încă nu ați folosit Google Glass, aruncați o privire la aceste două videoclipuri, deoarece ar trebui să vă ofere suficiente informații pentru a înțelege elementele de bază ale interfeței cu utilizatorul.

• Introducere în Google Glass

• Instrucțiuni Google Glass: Noțiuni introductive

Există și mai multe videoclipuri utile pentru configurare și navigare aici și multe mai multe detalii despre interfața cu utilizatorul aici.

Există multe diferențe între API-ul Mirror și dezvoltarea nativă Google Glass. Scopul acestui tutorial nu este de a dezbate aceste diferențe, ci de a oferi dezvoltatorilor web informații despre modul în care funcționează Google Glass și cum se pot integra cât mai curând posibil.

Cum funcționează un API Mirror?

Primul și cel mai important lucru este că construiți o aplicație web standard. Aplicația dvs. va rula pe un server web și nu va interacționa niciodată direct cu un dispozitiv Google Glass. În schimb, aplicația dvs. va interacționa cu serviciile Mirror API. Aplicațiile bazate pe Mirror API nu necesită nicio instalare pe Glass, iar toate serviciile fac deja parte din Glass OS.

Dispozitivul Google Glass va rula propriile servicii de sincronizare pentru a împinge sau a extrage conținut înapoi în aplicația dvs. prin API-ul Mirror.

Nu puteți afecta frecvența când Google Glass verifică actualizările API-ului Mirror, iar a avea „omul de mijloc” are un cost. Consecința directă a acestei arhitecturi este că nu puteți avea o interacțiune în timp real cu utilizatorii Glass. Ar trebui să vă așteptați întotdeauna la o întârziere între solicitarea dvs. pentru o acțiune și evenimentul real care se execută pe dispozitivul Glass.

Configurare și autentificare

Pentru a utiliza API-ul Mirror pentru dezvoltarea web, trebuie să definiți o identitate a aplicației în Google Developers Console. Deschideți consola Google API și conectați-vă cu contul dvs. Google.

Creați-vă noul proiect; să-i denumim „Mirror API Demo”

Următorul lucru pe care trebuie să-l faceți este să activați Mirror API pentru aplicația dvs. web Glass. Pentru a face acest lucru, faceți clic pe butonul „Activați un API” din pagina de prezentare generală a proiectului, găsiți API-ul oglindă în listă și porniți-l.

Apoi, creați ID client pentru aplicațiile web Glass. Pentru a face acest lucru, faceți clic pe butonul „Creați un nou ID de client” din ecranul Acreditări.

Notă : s-ar putea să vi se solicite să completați detaliile „Ecranul de consimțământ”. Datele din acest formular sunt prezentate unui utilizator atunci când acordați acces la aplicația dvs.

Vom testa API-ul Mirror folosind Google Glass Playground. Pentru a activa Playground-ul, va trebui să autorizați https://mirror-api-playground.appspot.com ca origine validă pentru solicitările HTTP. Nu vom folosi redirecționarea OAuth în această demonstrație, așa că puteți lăsa orice în câmpul „URI-uri de redirecționare”.

Faceți clic pe „Creați un ID de client” și sunteți gata să faceți prima dvs. solicitare Mirror API.

Autentificarea aplicației Mirror API

Important : nu confundați contul dvs. Mirror API Developer cu contul dvs. de proprietar Google Glass. Este posibil să faceți acest exercițiu doar cu un singur cont care este un dezvoltator și un proprietar Glass, dar este important să fiți conștient de separarea acestor două conturi.

Fiecare solicitare HTTP trimisă de la aplicația web Glass către API-ul Mirror trebuie să fie autorizată. API-ul oglindă folosește „Autentificarea purtătorului” standard, ceea ce înseamnă că trebuie să furnizați un simbol la fiecare solicitare. Tokenul este emis de Google API folosind protocolul standard OAuth 2.0.

1. Utilizatorul (Glass Owner) va deschide o pagină în aplicația dvs. web și va face clic pe „Autentificare”
2. Aplicația dvs. va emite o solicitare către Google API, iar utilizatorului i se va prezenta un ecran de consimțământ generat de Google API (de obicei, într-un nou ecran pop-up)
3. Dacă se acordă permisiuni de acces aplicației dvs., Google API va emite un simbol pe care îl veți folosi pentru a apela API-ul Mirror

Mirror API Playground

Google Glass Playground vă permite să experimentați cum este afișat conținutul pe un Glass. Îl puteți folosi pentru a împinge conținut pe Glass, dar chiar dacă nu aveți un dispozitiv, puteți vedea cum ar arăta pe ecranul Glass.

Mirror API Playground poate fi găsit la această adresă URL.

Am permis deja punctul final Mirror API Playground ca origine validă a cererii HTTP. Pentru a utiliza Playground-ul, va trebui să „identificeți Mirror API Playground ca aplicație”, furnizând ID-ul de client. Puteți găsi ID-ul de client al aplicației dvs. la Google Developers Console.

Când faceți clic pe „Autorizați”, vi se va afișa un ecran de consimțământ OAuth 2.0, similar cu imaginea de mai jos. Vă rugăm să rețineți că ar trebui să vă conectați folosind contul dvs. „Glass Owner”, deoarece acestea sunt acreditările pe care aplicația le va folosi pentru a interacționa cu Glass.

După ce faceți clic pe „Accept”, Mirror API Playground va fi identificat ca propria dvs. aplicație; va obține acces la Timeline User’s Glass și veți putea interacționa cu dispozitivul Google Glass din Playground.

Bună ziua, exploratorii de sticlă!

Mirror API Playground este plin de șabloane predefinite pe care le puteți folosi pentru a încerca API-ul. Parcurgeți lista și găsiți un exemplu care vă place cel mai mult. Pentru această demonstrație am ales cardul „Hello Explorers”.

Elementul selectat va fi afișat în Playground, împreună cu conținutul HTTP Request Body folosit pentru a-și construi aspectul.

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

Simțiți-vă liber să modificați cererea și, când sunteți mulțumit de design, faceți clic pe butonul „Inserați element”. După procesarea cererii, „Cronologia” dvs. va fi actualizată. Dacă aveți un dispozitiv Glass, articolul va fi inserat și în cronologie.

Scrierea propriei aplicații web API Mirror

Felicitări! Ați executat prima solicitare Mirror API și ați trimis un mesaj către Google Glass, fără măcar să scrieți niciun cod.

Să facem lucrurile puțin mai interesante. Dorim să eliminăm Mirror API Playground și să punem propria noastră aplicație în locul ei.

În primul rând, trebuie să ne asigurăm că API-ul Google va accepta cereri de la aplicația noastră. Reveniți la Google Developers Console și adăugați adresa URL a aplicației dvs. la lista de origini JavaScript autorizate. Voi folosi http://localhost:3000 , dar îl puteți modifica la propria configurație.

Obținerea jetonului de autorizare

Pentru a executa solicitarea OAuth 2.0 și pentru a obține indicativul de autorizare de la API-ul Google, vom folosi Biblioteca client JavaScript API-ul Google.

Creați o pagină HTML simplă cu următorul conținut, asigurați-vă că înlocuiți ID-ul CLIENT cu ID-ul aplicației dvs.:

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

Când porniți aplicația Google Glass (asigurați-vă că rulează pe adresa URL pe care ați specificat-o ca origine JavaScript autorizată în Google Developers Console) și faceți clic pe „Autorizați”, veți porni fluxul OAuth 2.0. Conectați-vă cu contul dvs. Google și simbolul dvs. va fi afișat în consola browserului.

Acum, înarmat cu simbolul tău, ești gata să postezi în API-ul Mirror! Jetonul dvs. va expira în 60 de minute, dar acesta ar trebui să fie timp mai mult decât suficient pentru a finaliza demonstrația. Puteți obține oricând un alt simbol făcând clic din nou pe „Autorizați”.

Serviciile RESTful și solicitările HTTP sunt termeni comuni printre toți dezvoltatorii web, indiferent de platforma de dezvoltare sau limbajul de programare pe care îl folosesc. Pentru a încerca această demonstrație, va trebui să executați solicitări HTTP standard către punctele finale ale API-ului Mirror. Aleg să folosesc Poștașul pentru asta. Simțiți-vă liber să preluați detaliile solicitării și să implementați Demo în limbajul dvs. de programare preferat. Utilizați Postman sau orice alt instrument client HTTP.

Obținerea elementelor cronologice

Puteți oricând să preluați lista de elemente pe care le-ați trimis în Glass executând HTTP GET la https://www.googleapis.com/mirror/v1/timeline .

Fiecare solicitare către Mirror API trebuie să fie autorizată. Un jeton de autorizare este trimis ca valoare în Antetul HTTP de autorizare, prefixat de cuvântul „purtător”.

În Postman ar arăta cam așa:

Dacă executați cererea, răspunsul ar trebui să fie similar cu acesta:

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

Dacă aruncați o privire la conținutul răspunsului, veți observa că acesta conține articolul pe care l-ați postat din Playground.

Crearea unui articol nou

Pentru a crea un articol nou, trebuie să executați POST la https://www.googleapis.com/mirror/v1/timeline . De asemenea, va trebui să specificați că Content-Type este application/json și să furnizați antetul Authorization , la fel ca în exemplul anterior.

Să presupunem că suntem mari fani ai sportului, iar echipa noastră favorită, Extratereștrii, joacă Predators. Dorim să folosim Mirror API pentru a trimite rezultate tuturor fanilor.

Corpul cererii ar trebui să arate așa.

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

Și ecranul Poștașului ar trebui să fie similar cu acesta.

Când executați solicitarea, API-ul Mirror ar trebui să ofere un răspuns similar cu acesta.

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

Chiar dacă nu aveți un Google Glass, puteți reveni la Mirror API Playground și faceți clic pe butonul „Reîncărcați elementele cronologiei”. Ar trebui să vedeți două elemente, exact așa cum ar fi afișate pe ecranul Glass. Ambele elemente vor fi listate dacă executați primul exemplu și GET elementele.

Dacă aruncați o privire la conținutul răspunsului din exemplul anterior, puteți găsi o linie similară cu

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

Mirror API va atribui un ID unic la nivel global fiecărui articol atunci când este inserat. Acest ID va fi inclus în răspuns după ce POST este executat și va fi inclus în detaliile articolului când executați GET pentru a lista elementele cronologiei.

Să zicem că Predatorii au luat conducerea și au marcat. Pentru a actualiza scorul, va trebui să executați PUT la https://www.googleapis.com/mirror/v1/timeline urmat de ID. Similar cu

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

Modificați conținutul articolului pentru a reflecta modificarea dvs.

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

Configurația poștașului ar trebui să arate similar cu aceasta.

După ce executați solicitarea și verificați conținutul cronologiei, ar trebui să observați că Predatorii conduc cu 1:0.

Meniuri și interacțiune cu utilizatorul

Până acum, am fost doar împins conținut în Glass, fără nicio interacțiune sau feedback din partea utilizatorului. Din păcate, nu puteți simula interacțiunea utilizatorului și va trebui să utilizați un dispozitiv Glass real pentru a încerca acest exemplu.

Deci, jocul continuă și Aliens înscrie pentru 1:1. Dorim să activăm un fel de funcționalitate „Îmi place”, în care utilizatorii vor putea executa acțiuni simple în timp ce se uită la un element cronologic.

Mai întâi, trebuie să adăugăm meniul pe cardul nostru care arată scorul. Urmând pașii din exemplul anterior, actualizați elementul cronologic cu următorul conținut:

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

Când executați această solicitare, utilizatorul dvs. va vedea că scorul este acum actualizat la 1:1. Dar când utilizatorul atinge Sticla, va fi prezentat un meniu.

Dacă acum atingeți „Îmi place”, nu se va întâmpla nimic!

Am menționat deja că există întotdeauna un „om de mijloc” între aplicația ta și un dispozitiv Glass. Când selectați „Îmi place”, dispozitivul Glass va trimite informațiile către Mirror API, dar nu ați specificat unde Mirror API ar trebui să trimită aceste informații.

Aici intervine Abonamentele . Trebuie să vă abonați pentru a primi notificări de la Mirror API atunci când utilizatorul efectuează o acțiune.

Pentru a crea un abonament, trebuie să executați un POST către https://www.googleapis.com/mirror/v1/subscriptions .

Corpul cererii ar trebui să fie astfel:

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

callbackUrl conține adresa URL de redirecționare.

Notă : API-ul Mirror necesită criptare SSL pentru adresa URL la care sunt redirecționate datele despre evenimente. Cu toate acestea, în scopul testării, Google a furnizat un proxy la https://mirrornotifications.appspot.com/forward .

API-ul oglindă va executa POST la adresa URL specificată într-un abonament. Va trebui să utilizați mediul de dezvoltare preferat pentru a crea un handler pentru acea adresă URL. Am furnizat eșantionul JavaScript simplu (NodeJS/ExpressJS) care va scoate doar conținutul solicitării.

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

Închidere

API-ul Google Glass Mirror este unic din multe puncte de vedere. Conceput pentru a oferi dezvoltatorilor web acces la dezvoltarea Glass fără nicio cerință prealabilă, este inclus în nucleul sistemului de operare Glass și nu se bazează pe instrumente de dezvoltare terță parte. Mirror API este pe deplin gestionat și întreținut de Google și face parte din platforma Google API, care vă scutește de orice îngrijorare privind stabilitatea și scalabilitatea.

Dacă sunteți un dezvoltator web care nu a folosit niciodată Google Glass, probabil că ați evitat să învățați despre API-ul Mirror deoarece credeați că trebuie să aveți un dispozitiv Glass sau credeați că va trebui să petreceți mult timp învățând despre dezvoltarea Google Glass. Sper că acest tutorial Mirror API v-a ajutat să depășiți această barieră și v-a dat un impuls să petreceți câteva minute privind acest tip de dezvoltare.

Tehnologia purtabilă este aici, Google Glass este la granița sa și fiecare dezvoltator ar trebui să aibă șansa de a face parte din ea. Mirror API vă oferă exact asta.

Acest articol vă oferă instrumente și instrucțiuni pentru autentificarea aplicației dvs. Mirror API, citirea datelor din Google Glass, trimiterea datelor către Google Glass și primirea de feedback de la un utilizator. Pentru a afla mai multe despre Mirror API și caracteristicile sale, vă rugăm să vizitați Ghidurile Mirror API.