Mirror API教程：适用于Web开发人员的Google Glass

本文概述

Mirror API如何工作？
设置和验证
验证Mirror API应用程序
Mirror API游乐场
你好, 玻璃探险家！
编写自己的Mirror API Web应用程序
获取授权令牌
获取时间轴项目
创建一个新项目
菜单和与用户的互动
本文总结

Android设备无疑正在占领世界。 Google的开源平台为成千上万的智能手机, 平板电脑, 智能电视以及许多其他设备提供了支持。最重要的是, Google的可穿戴计算激励措施将世界推向了一个全新的高度。 Google Glass是一种非常接近改变我们与技术互动方式的设备。很长一段时间以来, 我们一直低着头走路, 盯着我们小的手机屏幕。 Google Glass帮助我们与可穿戴技术互动时抬起头, 骄傲地走路。

最初, 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请求并获取身份验证令牌
执行HTTP请求到预定义的端点

此Google Glass开发教程将向你介绍可用于构建Glass应用程序的技术。

如果你还没有使用过Google Glass, 请观看以下两个视频, 因为它们应该为你提供足够的信息, 以帮助你了解用户界面的基础。

Google Glass简介
Google Glass操作方法：入门

这里有更多有用的视频供你进行设置和导航, 以及有关用户界面的更多详细信息。

Mirror API和本机Google Glass开发之间有很多差异。本教程的目的不是辩论这些差异, 而是让Web开发人员了解Google Glass的工作原理以及他们如何尽快加入。

如本开发教程中所述，Google Glass Web开发人员可以真正从Mirror API中受益。

Mirror API如何工作？

首先也是最重要的是, 你正在构建一个标准的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进行网络开发, 你需要在Google Developers Console上定义应用程序身份。打开Google API控制台, 然后使用你的Google帐户登录。

创建你的新项目；我们将其命名为” Mirror API演示”

本教程将重点介绍名为" Mirror API演示"的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”, 你就可以发出第一个镜像API请求。

验证Mirror API应用程序

重要提示：请勿将Mirror API Developer帐户与Google Glass所有者帐户混淆。你可能只用一个既是开发人员又是Glass所有者的帐户来进行此练习, 但是重要的是要注意这两个帐户的分离。

从你的Glass Web应用程序发送到Mirror API的每个HTTP请求都需要得到授权。 Mirror API使用标准的”承载者身份验证”, 这意味着你需要为每个请求提供令牌。令牌是由Google API使用标准OAuth 2.0协议发布的。

用户(玻璃所有者)将在你的Web应用程序上打开一个页面, 然后单击”登录”
你的应用程序将向Google API发出请求, 并向用户显示由Google API生成的同意屏幕(通常在新的弹出屏幕中)
如果将访问权限授予你的应用程序, 则Google API将发出一个令牌, 你将使用该令牌来调用Mirror API

Mirror 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时间轴, 并且你可以从Playground与Google Glass设备进行交互。

你好, 玻璃探险家！

Mirror API Playground充满了可用于尝试API的预定义模板。滚动列表, 找到最喜欢的示例。在此演示中, 我选择了” Hello Explorers”卡。

Hello Explorers是预定义的Mirror API Playground模板之一。

所选项目将与用于构造其布局的HTTP请求正文内容一起显示在操场上。

{
  "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设备, 则该项目也会插入到时间轴中。

编写自己的Mirror 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 onclick="auth();">Authorize</button>
  </body>
</html>

当你启动Google Glass应用程序(确保它正在你在Google Developers Console中指定为授权JavaScript来源的URL上运行)并单击”授权”时, 你将启动OAuth 2.0流程。使用你的Google帐户登录, 你的令牌将显示在浏览器控制台中。

现在, 有了你的令牌, 你就可以开始发布到Mirror API了！你的令牌将在60分钟后过期, 但这应该足以完成演示。你始终可以通过再次单击”授权”来获得另一个令牌。

RESTful服务和HTTP请求是所有Web开发人员的通用术语, 无论他们使用什么开发平台或编程语言。要尝试此演示, 你将需要向Mirror API端点执行标准的HTTP请求。我选择为此使用邮递员。随意获取请求的详细信息, 并以自己喜欢的编程语言来实现演示。使用邮递员或任何其他HTTP客户端工具。

获取时间轴项目

你始终可以通过对https://www.googleapis.com/mirror/v1/timeline执行HTTP GET来检索推送到Glass的项目列表。

每个对Mirror API的请求都必须得到授权。授权令牌作为”授权HTTP标头”中的值发送, 并以” 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"
            }
        }
    ]
}

如果你查看响应的内容, 你会发现它包含你在操场上发布的项目。

创建一个新项目

要创建新项目, 你需要执行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"
  }
}

和邮递员的屏幕应该与此相似。

执行请求时, 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并单击”重新加载时间轴项目”按钮。你应该看到两个项目, 与在玻璃显示屏上显示的完全相同。如果你执行第一个示例并获取项目, 则两个项目都将列出。

这是通过我们在本教程中创建的应用程序推送运动成绩时Google Glass的时间表。

如果你查看上一个示例的响应内容, 则可以找到与

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

插入时, Mirror API将为每个项目分配一个全局唯一的ID。执行POST后, 该ID将包含在响应中, 而当你执行GET列出时间轴项目时, 该ID将包含在项目详细信息中。

假设”掠夺者”率先得分。为了更新分数, 你需要对https://www.googleapis.com/mirror/v1/timeline执行PUT, 后跟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"
  }
}

邮递员配置应与此类似。

执行请求并检查时间线的内容之后, 你应该注意到”掠食者”以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设备会将信息发送到Mirror API, 但你尚未指定Mirror API在何处转发此信息。

这是订阅的来源。你需要订阅以在用户执行操作时从Mirror API接收通知。

要创建订阅, 你需要对https://www.googleapis.com/mirror/v1/subscriptions执行POST。

请求正文应如下所示：

{
  "collection":"timeline", "userToken":"srcmini_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的网络开发人员, 那么你可能会避免学习Mirror API, 因为你认为自己需要使用Glass设备, 或者认为你需要花费大量时间来学习Google Glass开发。我希望这个Mirror API教程可以帮助你突破这一障碍, 并让你略微花一些时间来研究这种类型的开发。

可穿戴技术就在这里, Google Glass处于前沿, 每个开发人员都应有机会参与其中。 Mirror API可以为你提供确切的信息。

本文为你提供了用于验证Mirror API应用程序, 从Google Glass读取数据, 向Google Glass发送数据以及从用户接收反馈的工具和说明。要了解有关Mirror API及其功能的更多信息, 请访问Mirror API Guides。

本文概述

Mirror API如何工作？

设置和验证

验证Mirror API应用程序

Mirror API游乐场

你好, 玻璃探险家！

编写自己的Mirror API Web应用程序

获取授权令牌

获取时间轴项目

创建一个新项目

菜单和与用户的互动

本文总结

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

Mirror API如何工作？

设置和验证

验证Mirror API应用程序

Mirror API游乐场

你好, 玻璃探险家！

编写自己的Mirror API Web应用程序

获取授权令牌

获取时间轴项目

创建一个新项目

菜单和与用户的互动

本文总结

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发