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

标签: 翻译 sencha touch | 发表时间:2014-01-25 18:59 | 作者:tianxiaode
分享到:
出处:http://blog.csdn.net

原文: 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”,应用程序就会安装到所连接的设备上。


展望

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





作者:tianxiaode 发表于2014-1-25 18:59:30 原文链接
阅读:0 评论:0 查看评论

相关 [翻译 sencha touch] 推荐:

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

- - CSDN博客推荐文章
原文: Developing for Google Glass with Sencha Touch. 作者:Ross Gerbasi. He specializes in new and emerging media including video and graphics production and has contributed to the open source community on emerging interactive solutions.

Sencha Touch 2 官方指南中文翻译系列 — 来自移动Web开发社区

- - ITeye论坛最新讨论
Sencha Touch 2是一个HTML5移动Web开发框架,是基于ExtJS4核心类库在移动设备的扩展,针对移动设备提供良好的触摸屏操控体验. 在 @范凯robbin微博上看到ITEye在2012年要重点发展移动技术领域,作为JavaEye(请原谅我用这个名字,亲切啊)的老粉丝特贡献一下资料.

Sencha Touch 2 入门 Demo 之一:搭建 Sencha Touch 2 的运行环境

- - 博客园_首页
前段时间不才翻译了关于Sencha Touch 2 MVC架构的一系列文章,大家的认可让我备受鼓舞,也坚定了继续分享自己学习Sencha Touch(下文简称ST)过程和经验的决心. 在跟大家交流的过程中,发现很多入门者反映,学习ST最大的障碍有两个:1、官方文档跟进速度不够;2、官方sample集成程度较高,典型性不足.

HTML 5移动web开发指南中sencha touch笔记

- - ITeye博客
《HTML 5移动web开发指南》,是UC公司著名前端开发师唐俊开(网名:三桥). 的新书,介绍了jquery mobile,sencha touch,phonegap的开发,内容很丰富,. 最后还有一个小的实例,推荐阅读,给分85分,下面是其中sencha touch的. 一些本人新学到的知识点小结.

Sencha Touch 2.0发布:比最好的Framework还要好

- - Tech2IPO
比最好的Framework还要好. Sencha Touch 2.0版发布. 与v1.1版相比,滚动、启动和纵横切换的速度都有很大提高;同时与AT&T合作,整合运营商计费、位置等API;并提供更多Native设备API支持. Sencha Touch 2.0的官方介绍页大标题赫然写着:比最好的Framework还要好.

零基础学习Sencha Touch(资料和教程集合)

- - CSDN博客推荐文章
译者注:本篇文章为开发者提供了零基础使用Sencha Touch的一些资料. Sencha Touch是专门为移动设备开发应用的Javascrt框架. 通过Sencha Touch你可以创建非常像native app的web app,用户界面组件和数据管理全部基于HTML5和CSS3的web标准,全面兼容Android和Apple iOS.

【转发】使用 Sencha Touch 开发超炫的跨平台移动 Web 应用

- - HTML5研究小组
胡 沙, IBM CSTL 软件工程师, IBM. Sencha Touch 是由  Sencha 公司开发的移动 Web 应用开发框架,用以提升主流移动设备在浏览器上的触碰操作,增强用户体验. 该框架以久负盛名的 Ext JS 富客户端框架为基础,并支持最新的 HTML5 及 CSS3 标准,与流行的 Apple iOS 和 Andriod 设备兼容.

kindle touch简单说

- - GeoWHY
好吧,最右边的是kindle3,去年买的,后来送丫头,给她在国外看书用了. 最左边的是kindle4,小巴童鞋的,中间那个是我的,kindle touch. touch是99刀,托人从国外带回来,所以很便宜,630块而已,感觉上比kindle3小很多,盈盈可握,倒是蛮适合女孩子用的(领导你拿去用吧,把kindle3换给我就好).

测试touch事件

- - Kejun's Blog
进入触屏时代意味一切要对触屏友好. 今天仅仅测试了ios6,其它版本包括android还不清楚差别有多大. 看了PPK的touch兼容表(http://www.quirksmode.org/mobile/tableTouch.html),深感刚准备告别ie6,又迎来了一个新的混乱时代,苦逼的前端工程师们永远摆脱不了兼容的魔咒.

Sencha发布移动HTML5云计算平台Sencha.io

- Amo - HTML5研究小组
Javascript网页开发框架提供商Sencha今天发布了Sencha.io,一个新的HTML5移动开发云计算服务. 这项服务允许Sencha的应用开发者构建基于浏览器的应用而不用写服务器端代码或者管理托管代码. 目前Sencha.io提供了一下服务,Sencha.io Data,Sencha.io Messages,Sencha.io Login 和Sencha.io Development.