Mirror API 教程：面向 Web 開發人員的 Google Glass

已發表: 2022-03-11

Android 設備無疑正在佔領世界。數以千計的智能手機、平板電腦、智能電視和一大堆其他設備都由 Google 的開源平台提供支持。最重要的是，谷歌的可穿戴計算激勵正在將世界推向全新的高度。谷歌眼鏡是一種非常接近於改變我們與技術交互方式的設備。很長一段時間以來，我們一直低著頭走路，盯著我們的小手機屏幕。谷歌眼鏡正在幫助我們在與我們的可穿戴技術互動時抬起頭並自豪地行走。

起初，Android 開發僅限於具有 Java 知識的開發人員。大量開發人員社區正在使用其他平台構建出色的 Web 應用程序，並且在採用 Android 開發時遇到了很大的困難。有一些方法後來發展並提供了某種跨平台開發，使精明的 Web 開發人員能夠在沒有 Java 和 Android SDK 知識的情況下開始為 Android 構建應用程序。但是，如果不學習一門新的編程語言，甚至只使用 Web 開發人員共有的知識，就為 Google Glass 開發不是很好嗎？對的，這是可能的！

Google 提供了基於雲的 RESTful 服務，使 Web 開發人員能夠通過與 Google 託管和管理的 Web 服務進行交互來構建 Glassware。這些服務被命名為 Mirror API，並且獨立於開發平台。要開始使用 Glass 的 Mirror API，您甚至不必擁有 Google Glass 設備，儘管某些高級功能需要您擁有一台。

你只需要知道兩件事：

執行 OAuth 2.0 請求並獲取 Authentication Token
向預定義的端點執行 HTTP 請求

本 Google Glass 開發教程將向您介紹可用於構建 Glass 應用程序的技術。

如果您還沒有使用過 Google Glass，請觀看這兩個視頻，因為它們應該為您提供足夠的信息來了解用戶界面的基礎知識。

谷歌眼鏡簡介
Google Glass 操作指南：入門

這裡有更多有用的設置和導航視頻，還有更多關於用戶界面的詳細信息。

Mirror API 和原生 Google Glass 開發有很多不同之處。本教程的目的不是討論這些差異，而是讓 Web 開發人員深入了解 Google Glass 的工作原理，以及他們如何盡快加入。

正如本開發教程中所述，Google Glass Web 開發人員可以真正從 Mirror API 中受益。

鏡像 API 是如何工作的？

首先也是最重要的事情是您正在構建一個標準的 Web 應用程序。您的應用程序將在 Web 服務器上運行，並且永遠不會直接與 Google Glass 設備交互。相反，您的應用程序將與 Mirror API 服務交互。基於 Mirror API 的應用程序不需要在 Glass 本身上進行任何安裝，並且所有服務都已經是 Glass OS 的一部分。

由於 Mirror API，Google Glass 開發人員和 Web 應用程序開發人員現在是同義詞。

Google Glass 設備將運行自己的同步服務，通過 Mirror API 將內容推送或拉回您的應用程序。

您無法影響 Google Glass 檢查 Mirror API 更新的頻率，並且擁有“中間人”是有成本的。這種架構的直接後果是您無法與 Glass 用戶進行實時交互。您應該始終預計您的操作請求與在 Glass 設備上執行的實際事件之間存在延遲。

設置和身份驗證

為了使用 Mirror API 進行 Web 開發，您需要在 Google Developers Console 上定義應用程序身份。打開 Google API 控制台並使用您的 Google 帳戶登錄。

創建你的新項目；讓我們將其命名為“Mirror API Demo”

本教程將重點介紹一個名為“Mirror API Demo”的 Mirror API 開發項目。

您需要做的下一件事是為您的 Glass Web 應用程序啟用 Mirror API。為此，請單擊項目概覽頁面中的“啟用 API”按鈕，在列表中找到 Mirror API 並將其打開。

接下來，為 Glass Web 應用程序創建客戶端 ID。為此，只需單擊“憑據”屏幕中的“創建新客戶端 ID”按鈕。

注意：您可能會被要求填寫“同意屏幕”詳細信息。 當授予對您的應用程序的訪問權限時，此表單上的數據會呈現給用戶。

我們將使用 Google Glass Playground 測試 Mirror API。要啟用 Playground，您需要授權 https://mirror-api-playground.appspot.com 作為 HTTP 請求的有效來源。在這個演示中，我們不會使用 OAuth 重定向，因此您可以在“重定向 URI”字段中保留任何內容。

單擊“創建客戶端 ID”，您就可以發出第一個 Mirror API 請求了。

驗證鏡像 API 應用程序

重要提示：不要將您的 Mirror API Developer 帳戶與您的 Google Glass 所有者帳戶混淆。 您可以只使用一個帳戶（開發人員和 Glass 所有者）進行此練習，但重要的是要注意這兩個帳戶的分離。

從 Glass Web 應用程序發送到 Mirror API 的每個 HTTP 請求都需要經過授權。 Mirror API 使用標準的“Bearer Authentication”，這意味著您需要為每個請求提供一個令牌。令牌由 Google API 使用標準 OAuth 2.0 協議頒發。

用戶（玻璃所有者）將在您的 Web 應用程序上打開一個頁面並單擊“登錄”
您的應用程序將向 Google API 發出請求，用戶將看到由 Google API 生成的同意屏幕（通常在新的彈出屏幕中）
如果您的應用程序被授予訪問權限，Google API 將發出一個令牌，您將使用該令牌調用 Mirror API

鏡像 API 遊樂場

Google Glass Playground 可讓您試驗內容在 Glass 上的顯示方式。您可以使用它將內容推送到 Glass，但即使您沒有設備，您也可以看到它在 Glass 顯示屏上的外觀。

可以在此 URL 找到 Mirror API Playground。

Google Glass 的成功 Web 開發取決於對 Mirror API Playground 的試驗。

我們已經允許 Mirror API Playground 端點作為有效的 HTTP 請求源。為了使用 Playground，您需要通過提供您的客戶端 ID 來“將 Mirror API Playground 標識為您的應用程序”。您可以在 Google Developers Console 中找到您的應用程序的客戶端 ID。

Google Developers Console 提供您的 Glass 應用程序的客戶端 ID。

當您單擊“授權”時，您將看到一個 OAuth 2.0 同意屏幕，類似於下圖。請注意，您應該使用您的“Glass Owner”帳戶登錄，因為這些是應用程序用於與 Glass 交互的憑據。

這個關鍵步驟將 Mirror API Playground 連接到您的 Google Glass 時間線。

單擊“接受”後，Mirror API Playground 將被識別為您自己的應用程序；它將獲得對用戶 Glass Timeline 的訪問權限，您將能夠從 Playground 與 Google Glass 設備進行交互。

你好玻璃探險家！

Mirror API Playground 充滿了可用於嘗試 API 的預定義模板。滾動列表並找到您最喜歡的示例。對於這個演示，我選擇了“Hello Explorers”卡片。

Hello Explorers 是預定義的 Mirror API Playground 模板之一。

所選項目將與用於構建其佈局的 HTTP 請求正文內容一起顯示在 Playground 中。

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

隨意修改請求，當您對設計感到滿意時，單擊“插入項目”按鈕。處理請求後，您的“時間線”將被更新。如果您有 Glass 設備，該項目也將插入到時間線中。

編寫自己的鏡像 API Web 應用程序

恭喜！您執行了您的第一個 Mirror API 請求並向您的 Google Glass 發送了一條消息，甚至沒有編寫任何代碼。

讓我們讓事情變得更有趣一些。我們想要移除 Mirror API Playground 並將我們自己的應用程序放在它的位置。

首先，我們需要確保 Google API 將接受來自我們應用程序的請求。返回 Google Developers Console 並將您的應用程序的 URL 添加到授權的 JavaScript 來源列表中。我將使用http://localhost:3000但您可以將其修改為您自己的設置。

將 Glass 應用程序的 URL 添加到 Google Developers Console 中的授權 JavaScript 來源列表中。

獲取授權令牌

要執行 OAuth 2.0 請求並從 Google API 獲取授權令牌，我們將使用 Google API JavaScript 客戶端庫。

創建一個包含以下內容的簡單 HTML 頁面，確保將 CLIENT ID 替換為您的應用程序 ID：

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

當您啟動 Google Glass 應用程序（確保它在您在 Google Developers Console 中指定為授權 JavaScript 來源的 URL 上運行）並單擊“授權”時，您將啟動 OAuth 2.0 流程。使用您的 Google 帳戶登錄，您的令牌將顯示在瀏覽器控制台中。

現在，有了您的令牌，您就可以開始向 Mirror API 發帖了！您的令牌將在 60 分鐘後過期，但這應該足以完成演示。您始終可以通過再次單擊“授權”來獲取另一個令牌。

RESTful 服務和 HTTP 請求是所有 Web 開發人員的通用術語，無論他們使用什麼開發平台或編程語言。要試用此演示，您需要向 Mirror API 端點執行標準 HTTP 請求。為此，我選擇使用 Postman。隨意獲取請求詳細信息並以您喜歡的編程語言實現演示。使用 Postman 或任何其他 HTTP 客戶端工具。

獲取時間線項目

您始終可以通過對https://www.googleapis.com/mirror/v1/timeline執行 HTTP GET 來檢索已推送到 Glass 的項目列表。

對 Mirror API 的每個請求都需要經過授權。授權令牌作為 Authorization HTTP Header 中的值發送，前綴為“Bearer”字樣。

在 Postman 中，它看起來像這樣：

如果您執行請求，響應應該類似於以下內容：

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

如果您查看響應的內容，您會注意到它包含您從 Playground 發布的項目。

創建新項目

要創建新項目，您需要執行 POST 到https://www.googleapis.com/mirror/v1/timeline 。您還需要指定Content-Type為application/json ，並提供Authorization標頭，就像在前面的示例中一樣。

假設我們是體育迷，而我們最喜歡的外星人隊正在與捕食者隊比賽。我們想使用 Mirror API 將結果發送給所有粉絲。

請求正文應如下所示。

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

和郵遞員屏幕應該是類似的。

這是 Postman 屏幕，用於請求將運動結果發送給 Google Glass 上的粉絲。

當您執行請求時，Mirror API 應提供與此類似的響應。

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

即使您沒有 Google Glass，也可以返回 Mirror API Playground 並單擊“Reload Timeline Items”按鈕。您應該看到兩個項目，與 Glass 顯示屏上顯示的完全一樣。如果您執行第一個示例並 GET 項目，這兩個項目都將被列出。

這是通過我們在本教程中創建的應用程序推送體育比分時 Google Glass 的時間線。

如果您查看上一個示例的響應內容，您可以找到類似於以下內容的行

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

Mirror API 將在插入時為每個項目分配一個全局唯一 ID。此 ID 將在 POST 執行後包含在響應中，當您執行 GET 以列出時間線項目時，它將包含在項目詳細信息中。

假設掠奪者領先並得分。為了更新分數，您需要執行 PUT 到https://www.googleapis.com/mirror/v1/timeline ，後跟 ID。相似

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

修改項目內容以反映您的更改。

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

Postman 配置應該與此類似。

執行請求並檢查時間線的內容後，您應該注意到 Predators 以 1:0 領先。

菜單和與用戶的交互

到目前為止，我們只是將內容推送到 Glass，沒有來自用戶的任何交互或反饋。不幸的是，您無法模擬用戶交互，您需要使用真實的 Glass 設備來嘗試此示例。

所以，比賽繼續進行，外星人的比分是 1:1。我們希望啟用某種“我喜歡”功能，用戶將能夠在查看時間線項目時執行簡單的操作。

首先，我們需要將菜單添加到顯示分數的卡片中。按照上一個示例中的步驟，使用以下內容更新時間線項目：

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

當您執行此請求時，您的用戶將看到分數現在更新為 1:1。但是當用戶點擊 Glass 時，會出現一個菜單。

如果你現在點擊“我喜歡”，什麼都不會發生！

我已經提到，在您的應用程序和 Glass 設備之間總是有一個“中間人”。當您選擇“我喜歡”時，Glass 設備會將信息發送到 Mirror API，但您尚未指定 Mirror API 應將這些信息轉發到何處。

這就是訂閱的用武之地。當您的用戶執行操作時，您需要訂閱以接收來自 Mirror API 的通知。

要創建訂閱，您需要向https://www.googleapis.com/mirror/v1/subscriptions執行 POST。

請求正文應該是這樣的：

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

callbackUrl包含您的重定向 URL。

注意：鏡像 API 需要對轉發事件數據的 URL 進行 SSL 加密。 但是，出於測試目的，Google 在https://mirrornotifications.appspot.com/forward提供了一個代理。

當您的用戶在您的 Google Glass 應用程序中執行操作時，使用此功能訂閱接收來自 Mirror API 的通知。

Mirror API 將對您在訂閱中指定的 URL 執行 POST。您將需要使用您首選的開發環境來為該 URL 創建一個處理程序。我提供了簡單的 JavaScript (NodeJS/ExpressJS) 示例，它只輸出請求內容。

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

關閉

Google Glass Mirror API 在很多方面都是獨一無二的。旨在讓 Web 開發人員無需任何先決條件即可訪問 Glass 開發，它包含在 Glass OS 的核心中，並且不依賴第三方開發工具。 Mirror API 完全由 Google 管理和維護，它是 Google API 平台的一部分，讓您無需擔心穩定性和可擴展性。

如果您是一個從未使用過 Google Glass 的 Web 開發人員，您可能會避免學習 Mirror API，因為您認為您需要一個 Glass 設備，或者您認為您需要花費大量時間來學習 Google Glass 開發。我希望這個 Mirror API 教程能幫助你打破這個障礙，並讓你花幾分鐘時間研究這種類型的開發。

可穿戴技術已經到來，谷歌眼鏡處於前沿，每個開發者都應該有機會參與其中。 Mirror API 正是為您提供了這一點。

本文為您提供用於驗證 Mirror API 應用程序、從 Google Glass 讀取數據、向 Google Glass 發送數據以及接收用戶反饋的工具和說明。要了解有關 Mirror API 及其功能的更多信息，請訪問 Mirror API 指南。