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 指南。