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

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

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

cordovapluginadd/aphex/cordova-glass-touch

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

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