BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Caltrain Times从设计到发布:移动应用程序开发案例

| 作者 Renaun Erickson 关注 0 他的粉丝 发布于 2011年10月12日. 估计阅读时间: 17 分钟 | 都知道硅谷人工智能做的好,你知道 硅谷的运维技术 也值得参考吗?QCon上海带你探索其中的奥义

目录

需求

用户水平

中级

需要的产品

下载

能否构建可适用于具有差别巨大的规格、屏幕分辨率和物理屏幕尺寸的不同设备的应用程序?我们将问题范围缩小一点,“能否构建在针对Android、iOS和BlackBerry Tablet OS的智能电话和平板电脑上具有出色外观的应用程序?”换句话说,高质量多屏幕移动应用程序就是我们希望构建的。

Caltrain Times就是这样一个应用程序(参见图1)。什么是Caltrain Times?Caltrain Times应用程序是加利福尼亚州Caltrain计算机铁路系统的一个火车时刻表查看器。Caltrain提供了一个沿San Francisco Peninsula,通过South Bay一直到San Jose和Gilroy的计算机铁路服务。

本文探讨我如何开发Caltrain Times应用程序,一个具有出色外观的多屏幕移动应用程序。我将介绍完整的开发周期,从设计开始一直到将应用程序发布到应用程序商店。本文的目的在于强调我的经验,而不是一个“道路还是高速路”类型的讨论。取决于您的应用程序,您可能可以更自由地应用我下面列出的各种步骤(即工作流、测试、开发和优化)。尽管它可能对每个应用程序各不相同,但如果您还不熟悉移动开发,下面介绍的方法将为您开发多屏幕移动应用程序提供了一个不错的上下文。

工作流

因为我是一名开发人员,并且缺乏开发外观漂亮的应用程序的技能,所以与一个设计公司合作为Caltrain Times应用程序创建一些组件。根据一些重要人物的反馈,我围绕应用程序应该具有何种外观、操作和功能而提供了一些图像和概念。最终结果是设计公司提供了Caltrain Times的组件的Photoshop psd文件。我收到的文件为竖向非retina显示屏iPhone/iPod(320x480)的尺寸。这是我犯的一个错误,我没有标明需要高分辨率组件。您总是想要最高分辨率的组件,您为您可轻松缩小图像并保持保真度,而无法放大图像来保持保真度。

注意:适用于retina显示分辨率960x640或更大的平板电脑格式1024x600是一个不错的开始。我还认为首先采用智能电话规格是个不错的主意。很容易扩大到更大的平板电脑尺寸,同时精简设计。

在返回到设计公司之前,我在Photoshop中实际做了一些尝试。我在Photoshop中打开文件,然后转到Image > Image Size…并将分辨率乘以2(在Document Size分组中),将72改为144。Photoshop可以很好地处理位图和字号的放大,但它无法很好地应用于特效。尤其是像描边这样的特效,我必须手动打开它并更改一些资产上的描边特效尺寸。不是很理想,但它避免了返回到设计公司,很好地满足了我的需要。

下一步是剪切所有部件,获取整个组件中使用的字体及其设置的列表。从个人角度讲,我缺乏Photoshop技能,但更加了解Fireworks的使用。考虑到这一点,我为我需要的各种资产关闭和打开不同的Photoshop层,然后单击Save for Web & Devices,将整个组件导出(打开和关闭了不同的层)为PNG-24图像。这为我提供了一个无损且完全透明的图形以在Fireworks中打开和剪切。在Fireworks中,我保存了一个具有我希望导出的特定资产的最高分辨率的源文件。然后导出为最小尺寸且保持资产的最高保真度的文件格式(png8、png32或jpg)。导出的资产保存使用相同的名称保存到3个不同的文件夹中。例如,我在Fireworks中打开GPSSource.jpg,首先导出到文件夹/assets/dpi320,将Fireworks图像尺寸更改为75%之后将它导出到/assets/dpi240,然后在改为50%之后导出到/assets/dpi160(参见图2)。

图2. Caltrain Times项目中的文件夹设置

任何时候我必须返回更改或创建新资产,我仍会将它导出到所有3个文件夹,将源文件保存为最高分辨率格式。这使得很容易将所有资产DPI(每英寸点数)版本放在代码中,而无需多次返回到Fireworks。而且我可以在不同屏幕上测试,确保特定DPI版本中没有瑕疵。这就引出了我的流程中的下一部分:测试!

测试

Flash Builder 4.5.1移动项目允许您以不同的平台为目标。您可以针对每种平台来配置不同的启动配置。启动配置定义如何在桌面和设备上运行或调试项目的启动。它还允许您在桌面上运行时提供设备模板。设备模板可针对各种设备屏幕分辨率和DPI进行编辑。在项目开头我为桌面创建了3种启动配置,它们分别以160、240和320 DPI设备模板的形式运行(参见图3)。

图3. Caltrain Times项目在Flash Builder 4.5.1中的启动配置,包括160、240和320设备配置。

我编写了最少的代码来实现基本的应用程序布局。背景图像、页眉标题、车站选择器、火车时刻表列表和站点之间过渡等元素使用3种DPI大小的桌面启动配置进行测试。我此刻没有挂钩任何真实数据,但在列表中需要数据时提供了一些存根数据。接下来,使用独立的启动配置,我在首先在Android和iOS设备上进行了测试。如果我没有测试性能,我将为使用Apple iOS作为目标平台的设备选项使用快速封装方法(adt –target ipa-test-interpreter)(参见图4)。

图4. Apple iOS设备启动方法的快速封装方法。

在确定项目呈现器状态的细节和可能导致性能问题不同布局特征时,我仍然关注首先实现正确的UI交互。这标明我更自由地使用MXML和绑定来让事物按我想要的方式运行,即使它已遵照移动最佳实践运行。一旦我让它正确运行并在具有足够性能的桌面和设备上测试之后,我就会将它放在一边,继续处理下一个UX问题。最后,当我让所有UI交互正常运行并且资产在所有DPI尺寸的设备上恰当呈现之后,我开始下一个阶段:开发。

开发

这是将所有数据、服务、GPS功能、twitter继承和最终说明视图集中在一起的阶段。我编写了一个特殊的AIR应用程序来将Caltrain的General Transit Feed Specification文件转换为sqlite数据库。从这里,我拥有一个默认的sqlite数据库,其中每个应用程序都可在以后使用网线(或应用程序更新)进行更新。更新非常简单,只需复制小型的sqlite db文件。我能够在桌面上测试大部分功能,这使得调试和更改非常简单。但我将始终在各种设备上测试这些功能,以确保它们是完整的并可正确运行。

GPS功能必须在设备上测试,但实际上很容易挂钩到各种设备的AIR端。我使用了一个基本的半正矢公司来计算到车站的距离。此方法很好,因为所有Caltrain车站都相对较近。我在设备上测试之前通过设置经度/纬度值对距离算法进行测试,以隔离距离逻辑并在向它传递真实的GPS数据之前确认它可正常运行。

我使用了Flex中的一些技术来解决不同的屏幕DPI问题,以及智能电话和平板电脑大小。我实现了自定义类来针对特定智能电话和平板电脑永利改写某些值,包括开始屏幕和运行时DPI提供程序。我为图像资产大量使用了MultiDPIBitmapSource(参见图5)。

图5. 为背景图像使用MultiDPIBitmapSource的示例

在CSS媒体查询和在构造函数或应用程序组件的creationComplete事件中设置值的间隔中,我得到了3个布局和大小值集合(参见图6)。

图6. 跨不同DPI设置的媒体查询示例

我几乎编写了3次该应用程序,但还不算太糟。当我首先开始处理3个资产和大小值集合时,我感觉稍微有点奇怪。如果您尝试过为不同设备以及屏幕大小或分辨率的排列组合编码,您一定也统一为3种变形版本编码不算太糟。我发现将Flex规定的160、240和320 DPI值想作3个设备集合或3种独特的皮肤大小,会使理解和选择我希望为特定设备使用何种尺寸的屏幕变得很容易。这种看待Flex的DPI管理的方式使我无需使用设备的实际DPI,只需通过客户运行时DPI提供程序类应用正确的皮肤,以实现我想要的外观。例如,平板电脑归入160 DPI的范围,但使用客户运行时DPI提供程序,我可以忽略该值,而应用240 DPI的设置,进而为平板电脑应用程序提供可以我想要的方式填满更大屏幕尺寸的更大外观。通过这种创建和调整应用程序资产和布局的3个版本的看似额外的工作,我得到了什么?我获得了全面控制权来使应用程序在每种类型的设备上具有我想要的外观。

现在我的所有数据和业务逻辑都恰当应用到了应用程序中,是时候花时间在设备上体验应用程序,开始优化新能和进行最后的交互性调节了。

优化

在此阶段,我首先查看移动Flex应用程序的最佳实践。要优化的第一个位置是将我的MXML项目呈现器转换为基于ActionScript的呈现器。这为我带来了一些过去常用的但并没有想象中那么难的东西。您必须认识到,必须处理资产的所有创建、放置和呈现工作。MXML中的许多绑定和布局值必须在ActionScript代码中的某个位置明确设置。例如,我在看度为90%的父元素中间放置了一个图形。这在MXML中可使用类似<s:Image id="img" horizontalCenter="0" widht="90%" />这样的代码轻松实现,但在ActionScript中,我必须明确设置x位置的宽度和中心。

overrideprotectedfunction layoutContents(unscaledWidth:Number, unscaledHeight:Number):void 

{ 

    super.layoutContents(unscaledWidth, unscaledHeight); 
    img.width = unscaledWidth * 0.9; 
    img.x = (unscaledWidth-img.width)/2; 

} 

您在MXML中执行的所有操作都可以在ActionScript中执行。技巧在于确定MXML为您做什么,然后确定在何处和如何在您的自定义ActionScript中明确地这么做。我重复这个转换MXML组件和项目呈现器的过程,直到各种设备上的性能符合我的需求。我最终得到的是一些MXML视图和ActionScript项目呈现器。现在应用程序的外观、行为和性能都很好,是时候将应用程序发布到各种市场了。

发布应用程序

Flash Builder使创建所有包的发布版本变得非常简单。在项目中,我转到Export > Release Build,这时会弹出一个包含所有目标平台的对话框。我处理所有对话框并设置生产证书、配置文件、权限和特定于平台的包内容设置。然后单击Finish并运行应用程序,并得到我的应用程序的.apk、.bar和.ipa发行版。

注意:要提交到Amazon App Store,您需要将Deployment > AIR download URL更改为Amazon的具体URL。

有趣的部分是将所有图标、屏幕截图和描述集中在一起,提交到各种市场。我将应用程序提交到了Android Market、Amazon Appstore、Apple App Store、BlackBerry App World和Nook Marketplace。它们需要不同大小的屏幕截图和图标大小。我最终得到了13个屏幕截图、8个欢迎屏幕和14个图标。为了获得特定于平台的欢迎屏幕,我在设备上运行应用程序并使用设备的截图功能,然后将它复制到我的计算机。如果设备上的屏幕截图没有小,或者出于简单考虑,我可以使用Flash Builder创建许多屏幕截图。为此,我使用各种市场所需的特定分辨率创建新的启动配置(参见图3),使用一个桌面屏幕截图软件创建图像。

我注册了各种开发人员/供应商帐户(有些是我在以前完成的)并提交了新的应用程序表单。然后我必须等待应用程序经过各种批准流程的批准。最后,每个应用程序都在一周内经过了批准,而没有遇到任何困难,非常不错。您可以单击此处在各种市场上查看该应用程序,以及从顶部的示例链接查看应用程序的源代码。

延伸阅读

一定要查阅Flash Builder 4.5.1中的移动应用程序开发功能。它使为不同平台和设备测试和构建移动应用程序变得非常轻松。以下这些链接提供了与上述内容相关的更多信息:

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

此作品依据Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License授权。与本作品中包含的代码示例相关的超出本许可证的权限可在Adobe上找到。

查看原文:Caltrain Times from design to release: A story of mobile application development

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT