【翻译】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生成一个混合应用程序。按照这个流程，就能够建立任何本身喜欢的应用程序了。喜欢这一系列教程吗？参加培训吧……