【移動應用開發(fā)技術(shù)】【翻譯】使用Sencha Touch開發(fā)Google Glass應用程序

【移動應用開發(fā)技術(shù)】【翻譯】使用SenchaTouch開發(fā)GoogleGlass應用程序

原文：DevelopingforGoogleGlasswithSenchaTouch作者：RossGerbasiRossGerbasiisaSeniorEngineeratSenchaandislocatedinChicago.Rosshasbeenprogrammingforover15yearsandhasworkedwithSenchaTouchforover3years.Hespecializesinnewandemergingmediaincludingvideoandgraphicsproductionandhascontributedtotheopensourcecommunityonemerginginteractivesolutions.HisworkonSenchaandCordovaintegrationallowhimtofusehismanyskillsintoasinglefocustoprovideappdeveloperswithtoolstohelpsimplifybuildingmobileapps.在過去一年，可穿戴式設備可謂是蓬勃發(fā)展。通過先進的手表就可以做從應答電話到玩游戲等任何事情。谷歌認為他們的可穿戴式技術(shù)是下一項要做的重大事情，而今天，我們來看看這會如何影響到我們這些開發(fā)人員。谷歌眼鏡目前正處于預覽狀態(tài)，也許beta測試是一種更好的說法，還遠未實現(xiàn)大規(guī)模使用。而這正是探討如何使用這種技術(shù)最佳時機，這涉及能夠以及如何塑造穿戴式設備的未來。誰都知道谷歌眼鏡爆炸會是一個大事情，但我認為它是很安全的，這完全不同于我們現(xiàn)在所擁有的東西。如何去使用它，可以解決什么問題，可以讓人們的生活更好、更安全和更有趣，這需要靠我們。在Sencha，我們始終堅持的我們核心理念，就是HTML5，以及支持它的技術(shù)，將是任何跨平臺的移動開發(fā)的首選。谷歌眼鏡是一個完美的例子，因為很快就會看到，不需要使用任何比SenchaTouch更多的東西就能創(chuàng)建應用程序。在混合應用程序的世界，為谷歌眼鏡創(chuàng)建應用程序?qū)⒊蔀殚_發(fā)人員的自然狀態(tài)，因為這只需要處理一個較小屏幕分辨率和一些新的用戶界面限制而已。我們能夠理解這樣的需求，因為我們還支持平板電腦、臺式機和移動電話。視頻演示因為大多數(shù)人不可能接觸到谷歌眼鏡，所以，我們制作一個簡短的視頻來演示一個運行在谷歌眼鏡的簡單的SenchaTouch應用程序。入門與開發(fā)其他SenchaTouch應用程序一樣，需要使用SenchaCmd來搭建應用程序的基本骨架。sencha-sdk/path/to/sdkgenerateapp{AppName}/path/to/app下一步要做的是將應用程序作為Web服務，以便它能通過瀏覽器正常工作。導航到剛創(chuàng)建的應用程序的文件夾（/path/to/app）并運行以下命令：senchawebstart現(xiàn)在，應用程序已經(jīng)在Web服務器上運行了，可以通過訪問http://localhost:54321來檢查應用程序了。本地開發(fā)步驟現(xiàn)在，來探究一下谷歌眼鏡的一些具體細節(jié)。由于大多數(shù)人接觸不到谷歌眼鏡，所以目前只能使用Chrome作為本地開發(fā)平臺。不過，稍后會使用SenchaCmd和Cordova來生成一個谷歌眼鏡的本地應用程序。在當前，需要在Chrome中打開應用程序，然后在右上角菜單中選擇Tools（工具）→DeveloperTools（開發(fā)者工具）?？旖莘绞绞荂ommand+Option+i。在開發(fā)者工具窗口，選擇右上角的齒輪圖標并選擇Overrids（重寫）區(qū)域。確認已勾選“Show'Emulation'viewinconsoledrawer（在控制臺顯示模擬器）”。之后就可以關(guān)閉設置菜單了。下一步，在開發(fā)者工具窗口選擇控制臺以外的任何標簽頁?，F(xiàn)在，需要切換到Sources（源）標簽頁。此時，可以按下ESC鍵打開控制臺視圖，在視圖頂部選擇Emulation（模擬器）標簽頁。如果這時導航到Device（設備）部分，就可以看到可以模擬的設備列表，不過谷歌眼鏡并不在其中。不可否認，未來將會由著一選項，不過現(xiàn)在需要我們自己來設置。在下拉列表中選擇GoogleNexus4并單擊emulate（模擬）。下面將開始自定義所需的設置。在Screen（屏幕）區(qū)域，應用以下設置：Resolution（分辨率）:640x360Devicepixelratio（設備像素比）:1Fontscalefactor（字體縮放因子）:1勾選EmulateViewport（模擬區(qū)域）勾選Enabletextautosizing（啟用文本自動調(diào)整大?。┕催xShrinktofit（縮小以便填充）勾選CSSMedia（CSS媒體）在UserAgent（用戶代理）區(qū)域，應用以下設置：勾選Spoofuseragent下拉列表選擇“Other”設置用戶代理為：Mozilla/5.0(Linux;U;Android4.0.4;en-us;Glass1Build/IMM76L;XE12)AppleWebKit/534.30(KHTML,likeGecko)Version/4.0MobileSafari/534.30在Sensors（傳感器）區(qū)域，可以開啟所喜歡的設備傳感器模擬，不過要確保勾選了“EmulateTouchscreen（模擬觸碰屏）”。在Chrome內(nèi)，將會看到SenchaTouch應用程序顯示在640×360的窗口內(nèi)。這是與谷歌眼鏡相匹配的用戶可視區(qū)域。盡管不能100%確認這是最終的模擬設置，不過，已經(jīng)測試過可通過谷歌眼鏡來查看到屏幕，且與Chrome中顯示的窗口是完美匹配的。這對于進入谷歌眼鏡開發(fā)是一個好的開始。UI說明現(xiàn)在，所有東西都可以在Chrome中運行了，可以開始開發(fā)我們的應用程序了。谷歌眼鏡的用戶界面必須非常簡單，因為不能有太多的用戶輸入。建議使用Carousel作為開始時的主導航組件。然后監(jiān)聽activeitemchange事件來確實哪個子視圖是主實體。在谷歌眼鏡，基本上是使用滑動來導航和使用觸碰來進行選擇，因此，通常的應用程序的用戶流會類似如下模式：啟動應用程序用戶通過滑動來移動到所需的屏幕信息用戶通過觸碰來獲取該信息的行動選項遮蔽原始屏幕并顯示菜單用戶通過滑動來移動到所需的菜單選項用戶觸碰以采取行動為谷歌眼鏡生成應用程序一旦完成了你的杰作，就可以將它帶到谷歌眼鏡探險家的世界，這可通過SenchaCmd和Cordova實現(xiàn)。有關(guān)使用Cordova實現(xiàn)本地打包的信息，可以查看SenchaTouch的Cordova指南，下面將介紹一些要點。為了將Cordova支持添加到應用程序，要確保已滿足所有先決條件并在應用程序根目錄運行下面的命令?！皗AppID}”必須將應用程序的域名說明反轉(zhuǎn)過來，例如com.sencha.glass.TestApp?！皗AppName}”是可選的，如果沒有定義，則會將SenchaTouch應用程序的名字作為默認名字。如果希望使用不同的名稱來命名本地應用程序，可以這樣添加：senchacordovainit{AppID}{AppName}在項目的根目錄打開perties文件并設置：cordova.platforms=android下一步是添加專為谷歌眼鏡創(chuàng)建的，用來正確設置應用程序的Cordova插件。要實現(xiàn)這個，在終端中導航到{app-root}/cordova目錄，并運行以下命令：cordovapluginadd/aphex/cordova-glass-core

cordovapluginadd/aphex/cordova-glass-touch

cordovapluginadd/aphex/cordova-glass-gesture插件說明下面花點時間來說明一下每個插件的作用。cordova-glass-core：修改Cordova安卓項目以便能正確的在谷歌眼鏡上運行。這將允許設置通過語音命令來打開應用程序。此外，還允許為應用程序啟動之前的語音提示和所包含JavascriptAPI來返回用戶所說的字符串。例如“LaunchTrigger”可以是“打開Sencha電影”，且提示可以詢問“Whatmoviewouldyouliketosearchfor（你需要搜索什么電影）”——javascriptAPI將允許在應用程序打開時就獲取到這些信息。cordova-glass-touch：這是一個非常簡單的插件，用來在web視圖上調(diào)度谷歌眼鏡觸控屏上touchstart和touchend事件。這可讓SenchaTouch事件系統(tǒng)像往常一樣接管和管理所有觸碰事件。cordova-glass-gesture：這個插件是可選的，不過開發(fā)人員可能會希望在應用程序中使用它。SenchaTouch會自動從觸碰事件中檢測手勢，盡管這已經(jīng)創(chuàng)建好并一直在運行，但開發(fā)人員如果希望從觸碰板中獲取手勢，而不是SenchaTouch手勢，就可以使用該插件。它可在Web視圖文檔對象中調(diào)度所有的觸碰板手勢。有關(guān)如何監(jiān)聽這些事件的更多的信息，可查閱有關(guān)此插件的GitHub自述文件。啟動自定義項現(xiàn)在，已經(jīng)將谷歌眼鏡支持添加到了應用程序，有時候可能還需要進行更多的自定義。首先，希望添加安卓平臺到Cordova項目，可在{app-root}/cordova目錄下執(zhí)行以下命令來實現(xiàn)：cordovaaddplatformandroid下一步，打開{app-root}/cordova/platforms/android/values/glass.xml文件，然后會看到以下代碼：<stringname="app_launch_voice_trigger">hellocordova</string>現(xiàn)在，可以將值“hellocordova”修改為任何所喜歡的用來運行應用程序的字符串。此外，還會看到以下元素：<stringname="app_launch_voice_prompt">promptquestion</string>如果希望在應用程序啟動之前提示用戶輸入，可以修改“promptquestion”為自己所喜歡的任何問題。未來啟用提示問題，需要打開{app-root}/cordova/platforms/android/xml/app_launch_voice_trigger.xml文件并取消以下行的注釋：<inputprompt="@string/app_launch_voice_prompt"/>這些就是可以實現(xiàn)的谷歌眼鏡配置。我們正在積極的與Apache

Cordova團隊一起嘗試更多的簡化這一過程，但目前我們還無法通過一個插件來進行正確設置。我們希望這事能很快的得到解決，不過目前則需要自己來進行設置。同時，這也意味著，如果刪除了這些插件，并再次將它添加到應用程序，則需要從新修改和重置這些字符串。不過，這種情況不太常見。生成并部署在應用程序根目錄運行以下命令就看可以生成谷歌眼鏡的應用程序：senchaappbuildnative這將調(diào)用SenchaCommandCordova支持并將應用程序打包為一個本地的安卓apk文件?？梢栽趝app-root}/cordova/platforms/android/bin目錄下找到{AppName}-debug.apk文件。這時，這時，可以使用以下命令將該應用程序安裝到谷歌眼鏡的：adbinstall-r/path/to/{AppName}-debug.apk小貼士如果想加快安卓設備開發(fā)，SenchaCmd允許通過以下命令在模擬器中運行應用程序：senchaappbuild-runnative如果要將應用程序安裝到使用USB連接的安卓設備（如谷歌眼鏡），可以打開{app-root}/.sencha/ap