Mirror-API-Tutorial: Google Glass für Webentwickler

Android-Geräte erobern sicherlich die Welt. Tausende von Smartphones, Tablets, Smart-TVs und eine ganze Reihe anderer Geräte werden von der Open-Source-Plattform von Google unterstützt. Darüber hinaus bringt Googles Wearable-Computing-Incentive die Welt zu ganz neuen Höhen. Google Glass ist ein Gerät, das kurz davor steht, die Art und Weise zu verändern, wie wir mit Technologie interagieren. Seit sehr langer Zeit gehen wir mit gesenktem Kopf herum und starren auf unsere kleinen Telefonbildschirme. Google Glass hilft uns, den Kopf zu heben und stolz zu gehen, während wir mit unserer tragbaren Technologie interagieren.

Anfangs war die Android-Entwicklung nur Entwicklern mit Java-Kenntnissen vorbehalten. Eine große Community von Entwicklern erstellte großartige Webanwendungen mit anderen Plattformen und hatte große Schwierigkeiten, die Android-Entwicklung zu übernehmen. Es gibt einige Ansätze, die sich später weiterentwickelten und eine Art plattformübergreifende Entwicklung ermöglichten, die es versierten Webentwicklern ermöglichte, ohne Java- und Android-SDK-Kenntnisse mit der Entwicklung von Apps für Android zu beginnen. Aber wäre es nicht großartig, für Google Glass zu entwickeln, ohne eine neue Programmiersprache zu lernen, und sogar nur mit dem Wissen, das Webentwicklern gemein ist? Ja, es ist möglich!

Google stellte cloudbasierte RESTful-Dienste bereit, die es Webentwicklern ermöglichen, Glassware zu erstellen, indem sie einfach mit Webdiensten interagieren, die von Google gehostet und verwaltet werden. Diese Dienste heißen Mirror API und sind unabhängig von Entwicklungsplattformen. Um mit der Verwendung der Mirror-API von Glass zu beginnen, müssen Sie nicht einmal ein Google Glass-Gerät besitzen, obwohl einige erweiterte Funktionen eines erfordern.

Es gibt nur zwei Dinge, die Sie wissen müssen:

• Führen Sie die OAuth 2.0-Anforderung aus und erhalten Sie das Authentifizierungstoken
• HTTP-Anforderung an vordefinierten Endpunkt ausführen

Dieses Google Glass-Entwicklungstutorial führt Sie in Techniken ein, mit denen Sie Anwendungen für Glass erstellen können.

Wenn Sie Google Glass noch nicht verwendet haben, sehen Sie sich diese beiden Videos an, da sie Ihnen genügend Informationen geben sollten, um die Grundlagen der Benutzeroberfläche zu verstehen.

• Einführung in Google Glass

• Anleitung zu Google Glass: Erste Schritte

Hier gibt es noch mehr nützliche Videos zur Einrichtung und Navigation und viele weitere Details zur Benutzeroberfläche hier.

Es gibt viele Unterschiede zwischen der Mirror-API und der nativen Google Glass-Entwicklung. Der Zweck dieses Tutorials besteht nicht darin, über diese Unterschiede zu diskutieren, sondern Webentwicklern einen Einblick in die Funktionsweise von Google Glass zu geben und ihnen zu zeigen, wie sie so schnell wie möglich an Bord kommen können.

Wie funktioniert eine Mirror-API?

Das Erste und Wichtigste ist, dass Sie eine Standard-Webanwendung erstellen. Ihre Anwendung wird auf einem Webserver ausgeführt und interagiert niemals direkt mit einem Google Glass-Gerät. Stattdessen interagiert Ihre Anwendung mit den Mirror-API-Diensten. Mirror-API-basierte Anwendungen erfordern keine Installation auf Glass selbst, und alle Dienste sind bereits Teil des Glass-Betriebssystems.

Das Google Glass-Gerät führt seine eigenen Synchronisierungsdienste aus, um Inhalte über die Mirror-API in Ihre Anwendung zu übertragen oder zurückzuziehen.

Sie können die Häufigkeit, mit der Google Glass nach Updates für die Mirror-API sucht, nicht beeinflussen, und die Verwendung des „Mittelsmanns“ ist mit Kosten verbunden. Die direkte Folge dieser Architektur ist, dass Sie keine Echtzeit-Interaktion mit Glass-Benutzern haben können. Sie sollten immer mit einer Verzögerung zwischen Ihrer Anforderung einer Aktion und dem eigentlichen Ereignis, das auf dem Glass-Gerät ausgeführt wird, rechnen.

Einrichtung und Authentifizierung

Um die Mirror-API für die Webentwicklung zu verwenden, müssen Sie eine Anwendungsidentität in der Google Developers Console definieren. Öffnen Sie die Google APIs-Konsole und melden Sie sich mit Ihrem Google-Konto an.

Erstellen Sie Ihr neues Projekt; Nennen wir es „Mirror API Demo“

Als nächstes müssen Sie die Mirror-API für Ihre Glass-Webanwendung aktivieren. Klicken Sie dazu auf der Projektübersichtsseite auf die Schaltfläche „API aktivieren“, suchen Sie die Mirror-API in der Liste und schalten Sie sie ein.

Erstellen Sie als Nächstes die Client-ID für Glass-Webanwendungen. Klicken Sie dazu einfach auf die Schaltfläche „Neue Client-ID erstellen“ im Bildschirm „Anmeldeinformationen“.

Hinweis : Möglicherweise werden Sie aufgefordert, die Details des „Zustimmungsbildschirms“ einzugeben. Daten in diesem Formular werden einem Benutzer angezeigt, wenn er Zugriff auf Ihre Anwendung gewährt.

Wir werden die Mirror-API mit dem Google Glass Playground testen. Um Playground zu aktivieren, müssen Sie https://mirror-api-playground.appspot.com als gültigen Ursprung für HTTP-Anforderungen autorisieren. Wir werden in dieser Demo keine OAuth-Umleitung verwenden, Sie können also alles im Feld „Umleitungs-URIs“ belassen.

Klicken Sie auf „Create Client ID“ und Sie können Ihre erste Mirror-API-Anfrage stellen.

Authentifizierung der Mirror-API-Anwendung

Wichtig : Verwechseln Sie Ihr Mirror-API-Entwicklerkonto nicht mit Ihrem Google Glass-Eigentümerkonto. Sie können diese Übung mit nur einem Konto durchführen, das ein Entwickler und ein Glass-Eigentümer ist, aber es ist wichtig, sich der Trennung dieser beiden Konten bewusst zu sein.

Jede HTTP-Anforderung, die von Ihrer Glass-Webanwendung an die Mirror-API gesendet wird, muss autorisiert werden. Die Mirror-API verwendet die standardmäßige „Bearer Authentication“, was bedeutet, dass Sie bei jeder Anfrage ein Token bereitstellen müssen. Das Token wird von der Google-API unter Verwendung des Standard-OAuth-2.0-Protokolls ausgestellt.

1. Der Benutzer (Glass Owner) öffnet eine Seite in Ihrer Webanwendung und klickt auf „Anmelden“.
2. Ihre Anwendung stellt eine Anfrage an die Google-API und dem Benutzer wird ein Zustimmungsbildschirm angezeigt, der von der Google-API generiert wird (normalerweise in einem neuen Popup-Bildschirm).
3. Wenn Ihrer Anwendung Zugriffsberechtigungen erteilt werden, stellt die Google-API ein Token aus, das Sie zum Aufrufen der Mirror-API verwenden

Mirror-API-Playground

Mit dem Google Glass Playground können Sie damit experimentieren, wie Inhalte auf einem Glass angezeigt werden. Sie können es verwenden, um Inhalte auf Ihr Glass zu übertragen, aber selbst wenn Sie kein Gerät haben, können Sie sehen, wie es auf dem Glass-Display aussehen würde.

Mirror API Playground finden Sie unter dieser URL.

Wir haben den Mirror API Playground-Endpunkt bereits als gültigen HTTP-Anforderungsursprung zugelassen. Um den Playground nutzen zu können, müssen Sie „Mirror API Playground als Ihre Anwendung identifizieren“, indem Sie Ihre Client-ID angeben. Sie finden die Client-ID Ihrer Anwendung in der Google Developers Console.

Wenn Sie auf „Autorisieren“ klicken, wird Ihnen ein OAuth 2.0-Zustimmungsbildschirm angezeigt, ähnlich dem Bild unten. Bitte beachten Sie, dass Sie sich mit Ihrem „Glass Owner“-Konto anmelden sollten, da dies die Anmeldedaten sind, die die Anwendung für die Interaktion mit Glass verwendet.

Nachdem Sie auf „Akzeptieren“ geklickt haben, wird Mirror API Playground als Ihre eigene Anwendung identifiziert; Es erhält Zugriff auf die Glass-Timeline des Benutzers und Sie können vom Playground aus mit dem Google Glass-Gerät interagieren.

Hallo Glasforscher!

Der Mirror API Playground ist mit vordefinierten Vorlagen gefüllt, die Sie zum Testen der API verwenden können. Blättern Sie durch die Liste und finden Sie ein Beispiel, das Ihnen am besten gefällt. Für diese Demo habe ich die „Hello Explorers“-Karte gewählt.

Das ausgewählte Element wird zusammen mit dem Inhalt des HTTP-Anforderungstexts, der zum Erstellen des Layouts verwendet wird, im Playground angezeigt.

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

Sie können die Anfrage gerne ändern, und wenn Sie mit dem Design zufrieden sind, klicken Sie auf die Schaltfläche „Element einfügen“. Nachdem die Anfrage bearbeitet wurde, wird Ihre „Timeline“ aktualisiert. Wenn Sie ein Glass-Gerät haben, wird das Element auch in die Timeline eingefügt.

Schreiben Sie Ihre eigene Mirror-API-Webanwendung

Glückwünsche! Sie haben Ihre erste Mirror-API-Anfrage ausgeführt und eine Nachricht an Ihre Google Glass gesendet, ohne überhaupt Code zu schreiben.

Lassen Sie uns die Dinge ein wenig interessanter machen. Wir wollen den Mirror API Playground entfernen und unsere eigene Anwendung an seine Stelle setzen.

Zunächst müssen wir sicherstellen, dass die Google-API Anfragen von unserer Anwendung akzeptiert. Gehen Sie zurück zur Google Developers Console und fügen Sie die URL Ihrer Anwendung zur Liste der autorisierten JavaScript-Ursprünge hinzu. Ich verwende http://localhost:3000 , aber Sie können dies an Ihr eigenes Setup anpassen.

Abrufen des Autorisierungstokens

Um die OAuth 2.0-Anforderung auszuführen und das Autorisierungstoken von der Google-API zu erhalten, verwenden wir die Google-API-JavaScript-Clientbibliothek.

Erstellen Sie eine einfache HTML-Seite mit folgendem Inhalt, stellen Sie sicher, dass Sie die CLIENT-ID durch Ihre Anwendungs-ID ersetzen:

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

Wenn Sie die Google Glass-Anwendung starten (stellen Sie sicher, dass sie auf einer URL ausgeführt wird, die Sie in der Google Developers Console als autorisierten JavaScript-Ursprung angegeben haben) und auf „Autorisieren“ klicken, starten Sie den OAuth 2.0-Fluss. Melden Sie sich mit Ihrem Google-Konto an und Ihr Token wird in der Browserkonsole angezeigt.

Jetzt, bewaffnet mit Ihrem Token, können Sie mit dem Posten an die Mirror-API beginnen! Ihr Token läuft in 60 Minuten ab, aber das sollte mehr als genug Zeit sein, um die Demo abzuschließen. Sie können jederzeit ein weiteres Token erhalten, indem Sie erneut auf „Autorisieren“ klicken.

RESTful-Services und HTTP-Requests sind gebräuchliche Begriffe unter allen Webentwicklern, unabhängig davon, welche Entwicklungsplattform oder Programmiersprache sie verwenden. Um diese Demo auszuprobieren, müssen Sie Standard-HTTP-Anforderungen an die Mirror-API-Endpunkte ausführen. Ich wähle dafür den Postboten. Fühlen Sie sich frei, die Anfragedetails aufzunehmen und die Demo in Ihrer bevorzugten Programmiersprache zu implementieren. Verwenden Sie Postman oder ein anderes HTTP-Client-Tool.

Abrufen der Timeline-Elemente

Sie können die Liste der Elemente, die Sie an Glass übertragen haben, jederzeit abrufen, indem Sie HTTP GET an https://www.googleapis.com/mirror/v1/timeline ausführen.

Jede Anfrage an die Mirror-API muss autorisiert werden. Ein Autorisierungstoken wird als Wert im Autorisierungs-HTTP-Header gesendet, dem das Wort „Bearer“ vorangestellt ist.

Bei Postman sieht das etwa so aus:

Wenn Sie die Anfrage ausführen, sollte die Antwort etwa so aussehen:

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

Wenn Sie sich den Inhalt der Antwort ansehen, werden Sie feststellen, dass sie das Element enthält, das Sie aus Playground gepostet haben.

Erstellen eines neuen Artikels

Um ein neues Element zu erstellen, müssen Sie POST auf https://www.googleapis.com/mirror/v1/timeline ausführen. Sie müssen auch angeben, dass Content-Type application/json ist, und den Header Authorization bereitstellen, genau wie im vorherigen Beispiel.

Nehmen wir an, wir sind große Sportfans und unsere Lieblingsmannschaft, die Aliens, spielt gegen die Predators. Wir möchten die Mirror-API verwenden, um Ergebnisse an alle Fans zu senden.

Der Anfragetext sollte so aussehen.

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

Und der Postman-Bildschirm sollte diesem ähnlich sein.

Wenn Sie die Anfrage ausführen, sollte die Mirror-API eine ähnliche Antwort liefern.

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

Auch wenn Sie kein Google Glass haben, können Sie zum Mirror API Playground zurückkehren und auf die Schaltfläche „Reload Timeline Items“ klicken. Sie sollten zwei Elemente genau so sehen, wie sie auf dem Glass-Display angezeigt würden. Beide Elemente werden aufgelistet, wenn Sie das erste Beispiel ausführen und die Elemente GET abrufen.

Wenn Sie sich den Inhalt der Antwort aus dem vorherigen Beispiel ansehen, finden Sie eine ähnliche Zeile wie

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

Die Mirror-API weist jedem Element beim Einfügen eine global eindeutige ID zu. Diese ID wird in die Antwort eingeschlossen, nachdem POST ausgeführt wurde, und sie wird in die Elementdetails eingeschlossen, wenn Sie GET ausführen, um die Zeitachsenelemente aufzulisten.

Nehmen wir an, die Predators gingen in Führung und erzielten ein Tor. Um den Score zu aktualisieren, müssen Sie PUT zu https://www.googleapis.com/mirror/v1/timeline gefolgt von ID ausführen. Ähnlich zu

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

Ändern Sie den Elementinhalt, um Ihre Änderung widerzuspiegeln.

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

Die Postman-Konfiguration sollte ähnlich aussehen.

Nachdem Sie die Anfrage ausgeführt und den Inhalt Ihrer Timeline überprüft haben, sollten Sie feststellen, dass Predators mit 1:0 führen.

Menüs und Interaktion mit dem Benutzer

Bisher haben wir nur Inhalte auf Glass gepumpt, ohne Interaktion oder Feedback des Benutzers. Leider können Sie keine Benutzerinteraktion simulieren, und Sie müssen ein echtes Glass-Gerät verwenden, um dieses Beispiel auszuprobieren.

Das Spiel geht also weiter und Aliens punkten zum 1:1. Wir möchten eine Art „Gefällt mir“-Funktionalität ermöglichen, bei der Benutzer einfache Aktionen ausführen können, während sie sich ein Timeline-Element ansehen.

Zuerst müssen wir das Menü zu unserer Karte hinzufügen, die die Punktzahl zeigt. Befolgen Sie die Schritte aus dem vorherigen Beispiel und aktualisieren Sie das Zeitachsenelement mit dem folgenden Inhalt:

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

Wenn Sie diese Anfrage ausführen, wird Ihr Benutzer sehen, dass die Punktzahl jetzt auf 1:1 aktualisiert wird. Aber wenn der Benutzer auf das Glas tippt, wird ein Menü angezeigt.

Wenn Sie jetzt auf „Gefällt mir“ tippen, passiert nichts!

Ich habe bereits erwähnt, dass zwischen Ihrer Anwendung und einem Glass-Gerät immer ein „Mittelsmann“ steht. Wenn Sie „Gefällt mir“ auswählen, sendet das Glass-Gerät die Informationen an die Mirror-API, aber Sie haben nicht angegeben, wohin die Mirror-API diese Informationen weiterleiten soll.

Hier kommen Abonnements ins Spiel. Sie müssen sich anmelden, um Benachrichtigungen von der Mirror-API zu erhalten, wenn Ihr Benutzer eine Aktion ausführt.

Um ein Abonnement zu erstellen, müssen Sie einen POST an https://www.googleapis.com/mirror/v1/subscriptions ausführen.

Der Anfragetext sollte wie folgt aussehen:

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

callbackUrl enthält Ihre Umleitungs-URL.

Hinweis : Die Mirror-API erfordert eine SSL-Verschlüsselung für die URL, an die Ereignisdaten weitergeleitet werden. Zu Testzwecken hat Google jedoch einen Proxy unter https://mirrornotifications.appspot.com/forward bereitgestellt.

Die Mirror-API führt POST zu der URL aus, die Sie in einem Abonnement angegeben haben. Sie müssen Ihre bevorzugte Entwicklungsumgebung verwenden, um einen Handler für diese URL zu erstellen. Ich habe das einfache JavaScript-Beispiel (NodeJS/ExpressJS) bereitgestellt, das nur den Anforderungsinhalt ausgibt.

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

Schließung

Die Google Glass Mirror API ist in vielerlei Hinsicht einzigartig. Entwickelt, um Webentwicklern den Zugriff auf die Glass-Entwicklung ohne Vorbedingungen zu ermöglichen, ist es im Kern von Glass OS enthalten und nicht auf Entwicklungstools von Drittanbietern angewiesen. Die Mirror-API wird vollständig von Google verwaltet und gewartet und ist Teil der Google-API-Plattform, die Sie von allen Bedenken hinsichtlich Stabilität und Skalierbarkeit befreit.

Wenn Sie ein Webentwickler sind, der Google Glass noch nie verwendet hat, haben Sie es wahrscheinlich vermieden, etwas über die Mirror-API zu lernen, weil Sie dachten, Sie müssten ein Glass-Gerät haben, oder Sie dachten, dass Sie viel Zeit damit verbringen müssten, sich über die Entwicklung von Google Glass zu informieren. Ich hoffe, dass dieses Mirror-API-Tutorial Ihnen geholfen hat, diese Barriere zu überwinden, und Ihnen einen Anstoß gegeben hat, sich ein paar Minuten mit dieser Art der Entwicklung zu beschäftigen.

Wearable-Technologie ist da, Google Glass ist an seiner Grenze, und jeder Entwickler sollte die Chance haben, ein Teil davon zu sein. Mirror API gibt Ihnen genau das.

Dieser Artikel enthält Tools und Anweisungen zum Authentifizieren Ihrer Mirror-API-Anwendung, zum Lesen von Daten aus Google Glass, zum Senden von Daten an Google Glass und zum Erhalten von Feedback von einem Benutzer. Um mehr über die Mirror-API und ihre Funktionen zu erfahren, besuchen Sie bitte die Mirror-API-Leitfäden.