【翻譯】Sencha Touch 2入門：建立一個實用的天氣應用程序之三

原文：Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3)

做者：Lee Boonstra
Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.

在三部分的Sencha Touch教程中，將建立「須要帶傘嗎」這個簡單的而實用的應用程序，該應用將 從worldweatheronline.com提供的Web服務中加載天氣信息。基於天氣代碼，該應用程序能夠預測須要不須要帶傘。

在本教程的最後一部分，將討論生成，而這 須要使用Sencha Cmd和PhoneGap/Cordova。

對於原生應用程序，但是有原生API來檢索設備的位置，還可使用PhoneGap/Cordova將應用程序發佈爲iOS、Android、BlackBerry10或Windows Phone的原生移動應用程序。

注意：若是但願在iOS、BlackBerry或Windows Phone設備上 測試應用程序，須要受權密鑰和開發人員帳號。此外，若是是使用Cordova，還不能在Windows操做系統上生成iOS的應用程序 ，也不能在Mac OS X上生成Windows的應用程序。

爲了參照，能夠查看本教程的第一、二部分。

能夠在本教程第二部分下載解決方案代碼——完整的解決方案。

本教程的要求:

• Sencha Touch 2.3或更高版本
• Sencha Cmd 4.x
• 最高版本Ruby中的Compass和Sass
•  一個現代瀏覽器
• 一個編輯器
• PhoneGap 3.3 / Cordova 3.3
• Node.js v.0.10.23

還能夠選擇安裝如下軟件來生成本地應用程序：

• XCode 5 (用來生產iOS本地應用程序,只適用於Mac OS X用戶)
• Android開發人員工具(版本爲13以上,用來生成安卓本地應用程序)
• 在Windows 8 Pro中的Visual Studio 2012 Pro/Ultimate (用來生成本地Windows Phone應用程序,只適用於windows用戶)
• Blackberry 10 Native SDK (用來生成BlackBerry 10的本地應用程序)

建立一個用於生產的生成

使用Sencha Cmd，看能夠建立用於生產或測試的生產包。生產用的生成包將Sass樣式表編譯成爲生產準備的CSS（精簡包）。它還會複製靜態圖片以及將JavaScript（Sencha Touch框架類加上本身定義的類）生成爲一個單一的精簡、鏈接的文件，以便於文件下載和緩存。生產生成還將包括要啓用本地緩存的緩存清單文件。

測試包則不包含這文件。在測試生成，在測試包中的Javascript和CSS文件將不會被精簡且是可讀的。

下面先來建立天氣應用程序的生產生成。如今作的並非建立本地生成。若是要將天氣應用程序部署到本身的服務器上，就須要將生產生成的文件夾複製到web服務器上。

在命令中輸入如下命令就可建立一個生產生成：

sencha app build production

或者

sencha app build testing

查看一下文件夾結構，會發現，若是決定經過在線URL訪問移動應用程序，這是一個能夠直接在Web服務器上使用的文件夾結構。

可能你已經發現，字體並無被複制到build文件夾，這能夠經過手動複製或經過能夠編輯生成過程來實現。下面來看看如何去實現。

Sencha Cmd會使用了Apache的ANT來執行生成過程。在隱藏的.sencha文件夾內，能夠找到全部使用的任務。

若是但願本身修改生成過程，能夠打開位於應用程序文件夾根目錄的build.xml文件，並在文件結尾添加如下Ant任務：

<target name="-after-build"/>
    <target name="build"
            depends="init,-before-build,-build,-after-build"
            description="Copy over the font/dinmu folder and remove temp files"/>
 
    <copy todir="${basedir}/resources/css/stylesheets/fonts/dinmu" overwrite="true">
      <fileset dir="${basedir}/resources/sass/stylesheets/fonts/dinmu">
        <include name="**/*" />
      </fileset>
    </copy>
    <copy todir="${build.dir}/resources/css/stylesheets/fonts/dinmu" overwrite="true">
      <fileset dir="${basedir}/resources/sass/stylesheets/fonts/dinmu">
        <include name="**/*" />
      </fileset>
    </copy>
    <delete dir="${basedir}/${build.dir}"/>

如今再次生成應用程序：

sencha app build

能夠在使用如下地址來測試生產生成：http://localhost/dinmu/production/Dinmu/

本地設備API

有想過在設備上將應用程序做爲原生應用程序來執行嗎？使用諸如Adobe PhoneGap或Apache Cordova，就能夠將應用程序發佈爲混合應用程序。

一旦有了混合應用程序，就可使用設備API，如地理定位。地理定位會基於設備的GPS傳感器或網絡信號的推斷提供定位數據訪問。

在編輯器打開app\utils\Functions.js，並查看101行：

Ext.device.Geolocation.getCurrentPosition({
   timeout: 5000,
   maximumAge: 10000,
   success: function(position) {
      var place = position.coords.latitude + "," + position.coords.longitude;
      Dinmu.utils.Functions.getWeather(place);
      Ext.Viewport.unmask();
   },
   failure: function() {
      Ext.Viewport.unmask();
      Ext.Msg.alert('Timeout', 'Can not retrieve position, please retry.');
   }
});

當應用程序在設備運行的時候，Sencha Touch類Ext.device的Geolocation方法可訪問原生的地理定位API，該API包含如下三個實現：

• Sencha移動包
• PhoneGap/Cordova
• 瀏覽器
  

當應用程序運行時，該類會根據設備自動選擇正確的實現。

在生成須要帶傘嗎（Dinmu）應用程序以前，須要作如下兩個檢查：

• 使用http協議訪問api.worldweatheronline.com的請求的前綴，能夠在app/utils/Functions.js文件的125行找到這個請求。
• 確保輸入了有效的worldweatheronline.com的Web服務器的API Key。這個能夠經過註冊http://www.worldweatheronline.com來獲取到API Key。
  

都設置好了吧？真棒！如今只剩下使用PhoneGap或Cordova來生成一個原生應用程序了。

生成一個混合應用程序

基於Sencha Touch的代碼，有三種產品可使用來建立原生應用程序：Sencha移動包、Adobe PhoneGap和Apache Cordova。全部這些產品都支持經過Sencha設備API來訪問設備的硬件資源。

下面來了解一下這三個解決方案之間的差別：

Sencha移動包

使用packager.json來生成iOS或安卓生成本地包，能夠經過安卓市場或蘋果App Store進行分發。

Adobe PhoneGap

可使用PhoneGap Build雲服務來（遠程）打包應用程序並經過安卓市場、黑莓App World、Windows Phone Store或者蘋果App Store來分發。它是最簡單的解決方案，能夠經過掃描QR代碼在設備上測試應用程序。還能夠生成本地應用程序。它是一個商業產品，免費版本只限於一個專用的應用程序。

Apache Cordova

Apache Cordova是阿帕奇軟件基金會的一個頂層項目。Cordova是免費的、開源的、社區驅動的Adobe PhoneGap版本。Cordova能夠打包本地應用程序，並經過安卓市場、黑莓App World、Windows Phone Store或者蘋果App Store來分發。

經過命令行生成本地包須要安裝XCode、安卓開發工具、BlackBerry 10 SDK或帶有Visual Studio的Windows 8 Pro。

經過PhoneGap來生成包須要（免費）Adobe（PhoneGap Build）帳號：https://build.phonegap.com/apps。

注意：本教程將使用PhoneGap Build。若是更喜歡使用Cordova，可使用在本教程使用的相同的命令，不過須要在命令行將將phonegap替換爲ccordova。

初始化一個PhoneGap項目

生成混合應用程序的第一步是在項目目錄使用如下命令來啓用它：

sencha phonegap init <APP-ID> <APP-NAME>

• App ID要遵循如下模式： <REVERSED-DOMAIN>.<APP-NAME>
• 應用程序的名稱應該和app.json文件中指定的name屬性的值相同。
  

注意：若是但願發佈iOS應用程序，須要確保app Id是在蘋果門戶網站註冊的哪一個。

如下是用來啓用PhoneGap支持的命令：

sencha phonegap init com.sencha.dinmu Dinmu

注意：Mac OS X用戶可能須要使用sudo前綴來獲取管理權限。

如下是建立的文件和結構：

• PhoneGap文件夾結構
• phonegap.local.properties
• config.xml
  

MyApp/phonegap

MyApp/phonegap包含了完整的PhoneGap文件結構。若是使用Cordova來初始化項目，文件夾會被命名爲cordova。

phonegap.local.properties

文件phonegap.local.properties包含了生成本地應用程序所指望的平臺的名稱。默認狀況下，它將採用本地安裝的SDK，例如：

phonegap.platforms=ios android blackberry10 wp8

當運行phonegap的init命令，屬性文件還爲Adobe PhoneGap遠程包提供設置。若是有一個PhoneGap Build帳號，就能夠設置這些額外的設置。

phonegap.build.remote=true

# Username for PhoneGap Build
phonegap.build.remote.username={username}
# Password for PhoneGap Build
phonegap.build.remote.password={password}

當將phonegap.build.remote屬性設置爲false，那就必須在機器上安裝一個SDK（XCode, 安卓開發人員工具, BlackBerry 10 SDK 或帶Visual Studio的Windows 8 Pro）。

config.xml

默認的Cordova/PhoneGap的config.xml文件包含了應用程序的元數據，下面來修改這個文件。

修改應用程序名稱、應用程序說明和做者信息：

<name>Dinmu</name>
<description>
	Do I need my Umbrella today?
</description>
<author email="myemail@addres.com" href="http://www.mydomain.com">
	Your name
</author>

下一步是在啓動時啓用地理定位差距，以便經過設備檢索位置：

<preference name="EnableLocation" value="true" />

禁用全屏模式，以便顯示狀態欄（電池指示器和時間）：

<preference name="fullscreen" value="false" />

要確保應用程序支持鏈接到外部url。天氣應用程序要鏈接到http://www.worldweatheronline.com。隱藏，須要授予此URL或因此外部URL的訪問權限。可使用通配符來容許全部外部鏈接：

<access origin="*" />

最後腰修改的是圖標和要加載的圖片的路徑。默認狀況下，Sencha Touch會建立iOS圖標和啓動圖像。他們能夠在MyApp/resources文件夾下詔到。

當爲視網膜顯示（iphone 5+）的iphone生成應用程序時，最重要的是要根據所要求的屏幕尺寸提供正確的啓動屏幕。若是不是這樣，就可能會不正確的調整可視區域。對於本示例，將堅持使用PhoneGap的啓動屏幕。能夠隨意使用本身的啓動屏幕來替換他們。

<icon src="icon.png" />
<icon src="resources/icons/Icon.png" />
<icon gap:platform="ios" height="57" src="resources/icons/Icon.png" width="57" /> 
<icon gap:platform="ios" height="72" src="resources/icons/Icon~ipad.png" width="72" /> 
<icon gap:platform="ios" height="114" src="resources/icons/Icon@2x.png" width="114" /> 
<icon gap:platform="ios" height="144" src="resources/icons/Icon~ipad@2x.png" width="144" /> 
 
<gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
<gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
<gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />

若是想了解更多有關config.xml的設置，可查閱 PhoneGap文檔。

建立本地生成包

使用PhoneGap或Cordova初始化應用程序後，就能夠在命令行運行如下命令來建立一個本地生成了：

sencha app build -run native

注意：run參數可確保應用程序在機器上安裝的仿真器中加載。重複一遍，Mac OS X用戶須要使用sudo前綴來獲取管理權限。

生成的應用程序位於MyApp/cordova或MyApp/phonegap目錄下：

•  platforms/android/bin - Android的.apk文件
• platforms/ios/build/ - iOS的.app文件
• platforms/blackberry10/build/simulator - BlackBerry 10的.bar文件
• platforms/wp8/Bin/Debug - Windows Phone的.xap文件

測試本地生成

若是使用PhoneGap Build，在安卓設備上測試應用程序會至關容易。只須要掃描QR代碼或下載、拖放.apk文件到手機的內存卡就好了。

對於iOS，須要配置和代碼簽名，從而保證應用程序來源於已知用戶以及自從最後一次簽名後沒再修改過。Windows Phone開發人員和iOS開發人員須要一個付費的開發着帳號。

一旦擁有一個iOS開發者帳號，就須要設置證書、標識符和配置文件。要了解更多相關信息，請參閱蘋果開發人員工具和Sencha Touch文檔中的《 Packaging Native iOS Applications》。

當全部都設置好之後，就可使用PhoneGap在命令行生成應用程序：

sencha app build native

當爲iOS生成應用程序時，可能會碰到一個生成錯誤，由於iOS應用程序須要代碼簽名。使用PhoneGap Build，須要商城*.p12證書和*.mobileprovisioning移動配置文件。當上傳者兩個關鍵文件後，就能夠解鎖按鍵比ing從新生成。

若是正在生成本地應用程序（PhoneGap remote=false或使用Cordova），能夠在phonegap或cordova文件夾打開platforms/ios/Dinmu.xcodeproj文件來設置應用程序的代碼簽名。開發者標識符要添加到代碼簽名標識符列表。若是沒有，則須要再次執行整個本地配置處理。

要確保電話已鏈接到Mac OS X，以及在XCode生成和運行。恭喜你，已經從零開始完成了一個Sencha Touch實用應用程序的構建。若是跟隨本系列三個教程，就已經使用Sencha Cmd建立了應用程序，併爲須要帶傘嗎應用程序建立全部的視圖、模型、存儲和控制器。仍是用Sass建立了自定義主題，且建立了一個生產生成來發布到Web服務器或使用Adobe PhoneGap/Cordova生成一個混合應用程序。按照這個流程，就能夠建立任何本身喜歡的應用程序了。喜歡這一系列教程嗎？參加培訓吧……