【翻譯】使用Sencha Touch開發(fā)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.

在過去一年，可穿戴式設備可謂是蓬勃發(fā)展。通過先進的手表就可以做從應答電話到玩游戲等任何事情。谷歌認為他們的可穿戴式技術是下一項要做的重大事情，而今天，我們來看看這會如何影響到我們這些開發(fā)人員。

谷歌眼鏡目前正處于預覽狀態(tài)，也許beta測試是一種更好的說法，還遠未實現(xiàn)大規(guī)模使用。而這正是探討如何使用這種技術最佳時機，這涉及能夠以及如何塑造穿戴式設備的未來。誰都知道谷歌眼鏡爆炸會是一個大事情，但我認為它是很安全的，這完全不同于我們現(xiàn)在所擁有的東西。如何去使用它，可以解決什么問題，可以讓人們的生活更好、更安全和更有趣，這需要靠我們。

在Sencha，我們始終堅持的我們核心理念，就是HTML5，以及支持它的技術，將是任何跨平臺的移動開發(fā)的首選。谷歌眼鏡是一個完美的例子，因為很快就會看到，不需要使用任何比Sencha Touch更多的東西就能創(chuàng)建應用程序。

在混合應用程序的世界，為谷歌眼鏡創(chuàng)建應用程序將成為開發(fā)人員的自然狀態(tài)，因為這只需要處理一個較小屏幕分辨率和一些新的用戶界面限制而已。我們能夠理解這樣的需求，因為我們還支持平板電腦、臺式機和移動電話。

視頻演示

因為大多數(shù)人不可能接觸到谷歌眼鏡，所以，我們制作一個簡短的視頻來演示一個運行在谷歌眼鏡的簡單的Sencha Touch應用程序。

入門

與開發(fā)其他Sencha Touch應用程序一樣，需要使用Sencha Cmd來搭建應用程序的基本骨架。

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

下一步要做的是將應用程序作為Web服務，以便它能通過瀏覽器正常工作。導航到剛創(chuàng)建的應用程序的文件夾（/path/to/app）并運行以下命令：

sencha web start

現(xiàn)在，應用程序已經(jīng)在Web服務器上運行了，可以通過訪問http://localhost:54321來檢查應用程序了。

本地開發(fā)步驟

現(xiàn)在，來探究一下谷歌眼鏡的一些具體細節(jié)。由于大多數(shù)人接觸不到谷歌眼鏡，所以目前只能使用Chrome作為本地開發(fā)平臺。不過，稍后會使用Sencha Cmd和Cordova來生成一個谷歌眼鏡的本地應用程序。

在當前，需要在Chrome中打開應用程序，然后在右上角菜單中選擇Tools（工具）→Developer Tools（開發(fā)者工具）。快捷方式是Command + Option + i。在開發(fā)者工具窗口，選擇右上角的齒輪圖標并選擇Overrids（重寫）區(qū)域。確認已勾選“Show 'Emulation' view in console drawer（在控制臺顯示模擬器）”。之后就可以關閉設置菜單了。

下一步，在開發(fā)者工具窗口選擇控制臺以外的任何標簽頁。現(xiàn)在，需要切換到Sources（源）標簽頁。此時，可以按下ESC鍵打開控制臺視圖，在視圖頂部選擇Emulation（模擬器）標簽頁。

如果這時導航到Device（設備）部分，就可以看到可以模擬的設備列表，不過谷歌眼鏡并不在其中。不可否認，未來將會由著一選項，不過現(xiàn)在需要我們自己來設置。在下拉列表中選擇Google Nexus 4并單擊emulate（模擬）。下面將開始自定義所需的設置。

在Screen（屏幕）區(qū)域，應用以下設置：

• Resolution（分辨率）: 640x360

• Device pixel ratio（設備像素比）: 1

• Font scale factor（字體縮放因子）: 1

• 勾選Emulate Viewport（模擬區(qū)域）

• 勾選Enable text autosizing（啟用文本自動調整大小）

• 勾選Shrink to fit（縮小以便填充）

• 勾選CSS Media（CSS 媒體）

在User Agent（用戶代理）區(qū)域，應用以下設置：

• 勾選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（傳感器）區(qū)域，可以開啟所喜歡的設備傳感器模擬，不過要確保勾選了“Emulate Touch screen（模擬觸碰屏）”。

在Chrome內，將會看到Sencha Touch應用程序顯示在640×360的窗口內。這是與谷歌眼鏡相匹配的用戶可視區(qū)域。盡管不能100%確認這是最終的模擬設置，不過，已經(jīng)測試過可通過谷歌眼鏡來查看到屏幕，且與Chrome中顯示的窗口是完美匹配的。這對于進入谷歌眼鏡開發(fā)是一個好的開始。

UI說明

現(xiàn)在，所有東西都可以在Chrome中運行了，可以開始開發(fā)我們的應用程序了。谷歌眼鏡的用戶界面必須非常簡單，因為不能有太多的用戶輸入。建議使用Carousel作為開始時的主導航組件。然后監(jiān)聽activeitemchange事件來確實哪個子視圖是主實體。在谷歌眼鏡，基本上是使用滑動來導航和使用觸碰來進行選擇，因此，通常的應用程序的用戶流會類似如下模式：

• 啟動應用程序

• 用戶通過滑動來移動到所需的屏幕信息

• 用戶通過觸碰來獲取該信息的行動選項

• 遮蔽原始屏幕并顯示菜單

• 用戶通過滑動來移動到所需的菜單選項

• 用戶觸碰以采取行動
  

為谷歌眼鏡生成應用程序

一旦完成了你的杰作，就可以將它帶到谷歌眼鏡探險家的世界，這可通過Sencha Cmd和Cordova實現(xiàn)。有關使用Cordova實現(xiàn)本地打包的信息，可以查看Sencha Touch的Cordova指南，下面將介紹一些要點。

為了將Cordova支持添加到應用程序，要確保已滿足所有先決條件并在應用程序根目錄運行下面的命令?！皗AppID}”必須將應用程序的域名說明反轉過來，例如com.sencha.glass.TestApp?！皗AppName}”是可選的，如果沒有定義，則會將Sencha Touch應用程序的名字作為默認名字。如果希望使用不同的名稱來命名本地應用程序，可以這樣添加：

sencha cordova init {AppID} {AppName}

在項目的根目錄打開cordova.local.properties文件并設置：

cordova.platforms=android

下一步是添加專為谷歌眼鏡創(chuàng)建的，用來正確設置應用程序的Cordova插件。要實現(xiàn)這個，在終端中導航到{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事件系統(tǒng)像往常一樣接管和管理所有觸碰事件。


cordova-glass-gesture：這個插件是可選的，不過開發(fā)人員可能會希望在應用程序中使用它。Sencha Touch會自動從觸碰事件中檢測手勢，盡管這已經(jīng)創(chuàng)建好并一直在運行，但開發(fā)人員如果希望從觸碰板中獲取手勢，而不是Sencha Touch手勢，就可以使用該插件。它可在Web視圖文檔對象中調度所有的觸碰板手勢。有關如何監(jiān)聽這些事件的更多的信息，可查閱有關此插件的GitHub自述文件。

啟動自定義項

現(xiàn)在，已經(jīng)將谷歌眼鏡支持添加到了應用程序，有時候可能還需要進行更多的自定義。首先，希望添加安卓平臺到Cordova項目，可在{app-root}/cordova 目錄下執(zhí)行以下命令來實現(xiàn)：

cordova add platform android

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

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

現(xiàn)在，可以將值“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"/>

這些就是可以實現(xiàn)的谷歌眼鏡配置。我們正在積極的與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

小貼士

如果想加快安卓設備開發(fā)，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}

現(xiàn)在，當運行“sencha app build -run native”，應用程序就會安裝到所連接的設備上。

展望

我們希望此信息可幫助開發(fā)人員試圖去了解本地安卓打包，且希望推動當前技術邊界和開始制作未來的應用程序。我們希望與你共同前進，因此希望你們在評論中分享你們的反饋意見，多謝！