【翻译】使用Sencha Touch开发Google Glass应用程序

原文： Developing for Google Glass with Sencha Touch

作者：Ross Gerbasi

Ross Gerbasi is a Senior Engineer at Sencha and is located in Chicago. Ross has been programming for over 15 years and has worked with Sencha Touch for over 3 years. He specializes in new and emerging media including video and graphics production and has contributed to the open source community on emerging interactive solutions. His work on Sencha and Cordova integration allow him to fuse his many skills into a single focus to provide app developers with tools to help simplify building mobile apps.

在过去一年，可穿戴式设备可谓是蓬勃发展。通过先进的手表就可以做从应答电话到玩游戏等任何事情。谷歌认为他们的可穿戴式技术是下一项要做的重大事情，而今天，我们来看看这会如何影响到我们这些开发人员。

谷歌眼镜目前正处于预览状态，也许beta测试是一种更好的说法，还远未实现大规模使用。而这正是探讨如何使用这种技术最佳时机，这涉及能够以及如何塑造穿戴式设备的未来。谁都知道谷歌眼镜爆炸会是一个大事情，但我认为它是很安全的，这完全不同于我们现在所拥有的东西。如何去使用它，可以解决什么问题，可以让人们的生活更好、更安全和更有趣，这需要靠我们。

在Sencha，我们始终坚持的我们核心理念，就是HTML5，以及支持它的技术，将是任何跨平台的移动开发的首选。谷歌眼镜是一个完美的例子，因为很快就会看到，不需要使用任何比Sencha Touch更多的东西就能创建应用程序。

在混合应用程序的世界，为谷歌眼镜创建应用程序将成为开发人员的自然状态，因为这只需要处理一个较小屏幕分辨率和一些新的用户界面限制而已。我们能够理解这样的需求，因为我们还支持平板电脑、台式机和移动电话。

视频演示

因为大多数人不可能接触到谷歌眼镜，所以，我们制作一个简短的 视频来演示一个运行在谷歌眼镜的简单的Sencha Touch应用程序。

入门

与开发其他Sencha Touch应用程序一样，需要使用Sencha Cmd来搭建应用程序的基本骨架。

sencha -sdk /path/to/sdk generate app {AppName} /path/to/app

下一步要做的是将应用程序作为Web服务，以便它能通过浏览器正常工作。导航到刚创建的应用程序的文件夹（/path/to/app）并运行以下命令：

sencha web start

现在，应用程序已经在Web服务器上运行了，可以通过访问http://localhost:54321来检查应用程序了。

本地开发步骤

现在，来探究一下谷歌眼镜的一些具体细节。由于大多数人接触不到谷歌眼镜，所以目前只能使用Chrome作为本地开发平台。不过，稍后会使用Sencha Cmd和Cordova来生成一个谷歌眼镜的本地应用程序。

在当前，需要在Chrome中打开应用程序，然后在右上角菜单中选择Tools（工具）→Developer Tools（开发者工具）。快捷方式是Command + Option + i。在开发者工具窗口，选择右上角的齿轮图标并选择Overrids（重写）区域。确认已勾选“Show 'Emulation' view in console drawer（在控制台显示模拟器）”。之后就可以关闭设置菜单了。

下一步，在开发者工具窗口选择控制台以外的任何标签页。现在，需要切换到Sources（源）标签页。此时，可以按下ESC键打开控制台视图，在视图顶部选择Emulation（模拟器）标签页。

如果这时导航到Device（设备）部分，就可以看到可以模拟的设备列表，不过谷歌眼镜并不在其中。不可否认，未来将会由着一选项，不过现在需要我们自己来设置。在下拉列表中选择Google Nexus 4并单击emulate（模拟）。下面将开始自定义所需的设置。

在Screen（屏幕）区域，应用以下设置：

• Resolution（分辨率）: 640x360
• Device pixel ratio（设备像素比）: 1
• Font scale factor（字体缩放因子）: 1
• 勾选Emulate Viewport（模拟区域）
• 勾选Enable text autosizing（启用文本自动调整大小）
• 勾选Shrink to fit（缩小以便填充）
• 勾选CSS Media（CSS 媒体）

在User Agent（用户代理）区域，应用以下设置：

• 勾选Spoof user agent
• 下拉列表选择“Other”
• 设置用户代理为： Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Glass 1 Build/IMM76L; XE12) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

在Sensors（传感器）区域，可以开启所喜欢的设备传感器模拟，不过要确保勾选了“Emulate Touch screen（模拟触碰屏）”。

在Chrome内，将会看到Sencha Touch应用程序显示在640×360的窗口内。这是与谷歌眼镜相匹配的用户可视区域。尽管不能100%确认这是最终的模拟设置，不过，已经测试过可通过谷歌眼镜来查看到屏幕，且与Chrome中显示的窗口是完美匹配的。这对于进入谷歌眼镜开发是一个好的开始。

UI说明

现在，所有东西都可以在Chrome中运行了，可以开始开发我们的应用程序了。谷歌眼镜的用户界面必须非常简单，因为不能有太多的用户输入。建议使用Carousel作为开始时的主导航组件。然后监听activeitemchange事件来确实哪个子视图是主实体。在谷歌眼镜，基本上是使用滑动来导航和使用触碰来进行选择，因此，通常的应用程序的用户流会类似如下模式：

• 启动应用程序
• 用户通过滑动来移动到所需的屏幕信息
• 用户通过触碰来获取该信息的行动选项
• 遮蔽原始屏幕并显示菜单
• 用户通过滑动来移动到所需的菜单选项
• 用户触碰以采取行动
  

通过 谷歌眼镜开发者UI文档页可以了解到更多有关谷歌眼镜UI信息。

为谷歌眼镜生成应用程序

一旦完成了你的杰作，就可以将它带到谷歌眼镜探险家的世界，这可通过Sencha Cmd和Cordova实现。有关使用Cordova实现本地打包的信息，可以查看Sencha Touch的Cordova指南，下面将介绍一些要点。

为了将Cordova支持添加到应用程序，要确保已满足所有先决条件并在应用程序根目录运行下面的命令。“{AppID}”必须将应用程序的域名说明反转过来，例如com.sencha.glass.TestApp。“{AppName}”是可选的，如果没有定义，则会将Sencha Touch应用程序的名字作为默认名字。如果希望使用不同的名称来命名本地应用程序，可以这样添加：

sencha cordova init {AppID} {AppName}

在项目的根目录打开cordova.local.properties文件并设置：

cordova.platforms=android

下一步是添加专为谷歌眼镜创建的，用来正确设置应用程序的Cordova插件。要实现这个，在终端中导航到{app-root}/cordova目录，并运行以下命令：

cordova plugin add https://github.com/aphex/cordova-glass-core
cordova plugin add https://github.com/aphex/cordova-glass-touch
cordova plugin add https://github.com/aphex/cordova-glass-gesture

插件说明

下面花点时间来说明一下每个插件的作用。

cordova-glass-core：修改Cordova安卓项目以便能正确的在谷歌眼镜上运行。这将允许设置通过语音命令来打开应用程序。此外，还允许为应用程序启动之前的语音提示和所包含Javascript API来返回用户所说的字符串。例如“Launch Trigger”可以是“打开Sencha电影”，且提示可以询问“What movie would you like to search for（你需要搜索什么电影）”——javascript API将允许在应用程序打开时就获取到这些信息。


cordova-glass-touch：这是一个非常简单的插件，用来在web视图上调度谷歌眼镜触控屏上touchstart和touchend事件。这可让Sencha Touch事件系统像往常一样接管和管理所有触碰事件。


cordova-glass-gesture：这个插件是可选的，不过开发人员可能会希望在应用程序中使用它。Sencha Touch会自动从触碰事件中检测手势，尽管这已经创建好并一直在运行，但开发人员如果希望从触碰板中获取手势，而不是Sencha Touch手势，就可以使用该插件。它可在Web视图文档对象中调度所有的触碰板手势。有关如何监听这些事件的更多的信息，可查阅有关此插件的GitHub 自述文件。

启动自定义项

现在，已经将谷歌眼镜支持添加到了应用程序，有时候可能还需要进行更多的自定义。首先，希望添加安卓平台到Cordova项目，可在{app-root}/cordova 目录下执行以下命令来实现：

cordova add platform android

下一步，打开{app-root}/cordova/platforms/android/values/glass.xml文件，然后会看到以下代码：

<string name="app_launch_voice_trigger">hello cordova</string>

现在，可以将值“hello cordova”修改为任何所喜欢的用来运行应用程序的字符串。此外，还会看到以下元素：

<string name="app_launch_voice_prompt">prompt question</string>

如果希望在应用程序启动之前提示用户输入，可以修改“prompt question”为自己所喜欢的任何问题。未来启用提示问题，需要打开{app-root}/cordova/platforms/android/xml/app_launch_voice_trigger.xml文件并取消以下行的注释：

<input prompt="@string/app_launch_voice_prompt"/>

这些就是可以实现的谷歌眼镜配置。我们正在积极的与Apache  Cordova团队一起尝试更多的简化这一过程，但目前我们还无法通过一个插件来进行正确设置。我们希望这事能很快的得到解决，不过目前则需要自己来进行设置。同时，这也意味着，如果删除了这些插件，并再次将它添加到应用程序，则需要从新修改和重置这些字符串。不过，这种情况不太常见。

生成并部署

在应用程序根目录运行以下命令就看可以生成谷歌眼镜的应用程序：

sencha app build native

这将调用Sencha Command Cordova支持并将应用程序打包为一个本地的安卓apk文件。可以在{app-root}/cordova/platforms/android/bin目录下找到{AppName}-debug.apk文件。这时，可以使用以下命令将该应用程序安装到谷歌眼镜的：

adb install -r /path/to/{AppName}-debug.apk

小贴士

如果想加快安卓设备开发，Sencha Cmd允许通过以下命令在模拟器中运行应用程序：

sencha app build -run native

如果要将应用程序安装到使用USB连接的安卓设备（如谷歌眼镜），可以打开{app-root}/.sencha/app/cordova-impl.xml文件并将里面的-cordova-emulate目标从以下修改为：

cordova emulate ${cordova.platforms.clean}

cordova run ${cordova.platforms.clean}

现在，当运行“sencha app build -run native”，应用程序就会安装到所连接的设备上。

展望

我们希望此信息可帮助开发人员试图去了解本地安卓打包，且希望推动当前技术边界和开始制作未来的应用程序。我们希望与你共同前进，因此希望你们在评论中分享你们的反馈意见，多谢！