Sencha Touch 和 extjs 优秀客户案例：DecidoKompetensor & “Impossible”项目

1 原文信息 

Sencha Touch and Ext JS Customer Spotlight: DecidoKompetensor & The Impossible Project


[http://www.sencha.com/blog/sencha-touch-and-ext-js-customer-spotlight-decidokompetensor-the-impossible/]

2 译文 

2.1 “Impossible”项目 

DecidoKompetensor 是一个 IT 公司，位于瑞典 Malmö 和 Helsingborg 城市，是一个 一个专注于商业软件及提供相关解决方案或服务公司。我们正在 Scandinavia(欧洲北部的一个小岛) 为服务提供公司推广 sencha 公司产品 extjs 和 Sencha Touch 技术。我们现在借助 extjs 和 sencha touch 已经开发了一个简单而又强大的解决方案：实现发布商业数据到网站和移动手机上。我们已经启动对商业应用程序的应用，但不限于商业软件，这项解决方案同样也适用于其他领域。我们最近一个成功的项目是 “Impossible”项目。


在2008年10月份，Impossible 公司获得了世界上最后一家生产类似偏振片影片的工厂（位于 Enschede, NL），准备为传统偏振相机开始开发和生产新的视觉材料。他们现在生产了一系列的 瞬间模拟影片，能够与超过 2亿 最好的偏振相机工作，这些相机仍然在今天被大量使用。Impossible 公司同时也生产新的硬件，考虑到将来瞬间模拟摄影者的发展情况，并且让生活在数字世界中的新一代能够正常使用。这个实验室——公司的第一个硬件产品，使用了苹果的的 iPhone 高清晰显示图片中。直接从 Impossible 模拟影片中导出一幅数字图像。这也是 Impossible 项目 app 出现的原因（译注：应该是将这些产品转换成电子产品挂到 iPhone 的产品中进行展示出售）。


公司刚开始的想法是实现一个简单的导出工具，但 Impossible 公司很快意识到这个应用程序的目标应该可以设到更高。这个工具能成为所有摄影师们进入 Impossible 世界中的入口位置。所以 Impossible 公司为了加强 Impossible 的用户体验，提出来四个非常明确的要求:


1. 瞬间实验室工具
2. Impossible 摄影师收集器
3. 一个瞬间相片扫描仪
4. 一个移动商城


Impossible 的客户非常喜欢瞬间偏振相片（译注：可能这种古老的相片感觉能够让人细化吧），说得更专业点，最吸引他们的是画廊效果。这软件首次发布后的两周，已经有了大概 14000 的下载量，通过 Impossible 的在线画廊增加了很多网络流量，并且提高了移动商城的销售。

2.2 为什么我们选择 Sencha Touch 产品 

我们选择 Sencha Touch 作为移动应用框架，主要是因为它的用户体验非常好。这对于实现 Impossible 公司提出的用户体验和在不同 app 特性下保持 UI 的统一非常重要。以便于他们将来很容易试下其他方向上的发展，例如在安卓手机上实现移动商店。相对于仅仅依靠 iOS 的手机应用软件(或者将来的 android) 开发者，他们都想在家中很方便容易地实现相片的修改。最终，这将会使得用户体验到无缝升级的完美体验。总之，我们非常高兴使用了 Sencha Touch 提供的丰富可扩展性和用户体验。

2.2.1 应用程序事件 

能根据不同的服务响应，来改变应用程序视图是非常重要的。在购买流程中的任何一步上，比如价格或折扣发生改变时。为了确保这些改变能够实时地反应到每一个应用程序的屏幕上，我们使用了 应用程序的事件。这些事件能够被任何控制器或监听这些事件的视图所触发。


 
//Fire Application event
me.getApplication().fireEvent('cartUpdated');
 
//Listen to application event
me.getApplication().on('cartUpdated', function(){
    //Do stuff when cart is updated
}, me);
 

2.2.2 轻松有效的 API 接口 

这已编写好的后端为我们提供了一个有效轻松的 API 接口。这很容易地通过使用 Sencha Touch 数据包中提供的代理实现。只需要在已经编好的类中添加几句配置属性，我们就有了与这些 API 交互的能力，包括所有的创建、读、更新以及删除操作，使得我们能够立刻实现数据与后端的同步。

2.2.3 X-Templates 

这个模板系统允许我们通过数据数组生成对应的 HTML 标记。这些列出来的商店文章和创建的详细信息视图时通过 Ext.XTemplates 模板类创建。这实现了依赖于 API 提供数据的视图页面都具有美观和体验良好的特性。

我们使用 Ext.XTemplates 来创建 HTML  标签来显示数据

2.2.4 关联 

数据包为我们提供了在数据对象模型中设置“关联”的功能。从应用程序构建数据模型时很容易地实现这个功能。在定义了每一个模型后，然后，我们将数据模型互相关联起来，并且 Sencha Touch 提供了非常容易使用的访问这些关联关系的函数。


上面简单的小段代码显示了怎么在 Cart 模型中建立关联的。为了访问到关联数据，我们简单地在模型实例中调用了自动生成函数，并且它返回了一个包含 cart 项的 Ext.data.Store。


Ext.define('App.model.Cart', {
    extend: 'Ext.data.Model',
    config: {
        hasMany: [
            {
                model: 'App.model.CartItem',
                name: 'cartItems'
            },
            {
                model: 'App.model.CreditCard',
                name: 'creditCards',
            }
        ]
    }
});
 

2.2.5 例程 

因为一些导航是通过从本地按钮或函数中被初始化的，我们需要一个直接的方式来与 web 视图进行交互。不管是在 Sencha Touch 和 本地代码中，都是很容易地访问到 Web 视图中的 URL 地址的。所以，我们定义了交互的通道。使用 Sencha Touch 控制器提供的“routes” 配置，我们能够检测 URL 模式并且通过调用正确的控制函数打开正确的视图页面。使用这项技术，我们也能够实现从本地传递信息到 Sencha Touch 控制器中。使用 “before” 控制器配置，我们也能够实现在 URL 匹配不合法或丢失了信息的情况下，停止导航。

2.2.6 Sencha Cmd 工具 

Sencha Cmd 工具中为我们提供了很大的帮助。最明显的好处是使用了标准的 MVC 框架，它给我们提供了一种快速编译和部署测试和发布版本的解决办法。这也使得将来升级将来的 Sencha Touch 版本会变得更加容易。

2.2.7 Sass/Compass 主题 

几乎所有应用了主题的视图组件都是基于通过大型机构设计 photeshop 图片。通过 Sass 变量能统一将字体、颜色、选择器发生改变，并且基于客户制作的层能够使得主题像素保存得更加完美。所以，我们最终发现这样是非常棒的。

这个项目视图是一个容器，包含使用一个 XTemplates 来渲染任何产品。这个 cart 包含了一个使用 XTemplate 的数据视图来显示产品，一个包含文本域的组合框来显示总共的预定顺序，以及一个在底部实现了一个自定义 UI 的工具条。

2.3 给新开发者的一些建议 

我们给新开发者提供最好的建议是：参加一个训练课程来掌握提供的工具：Sencha Cmd 工具和 Sencha 架构，这是非常有帮助的。如果可能的话，尽可能抽象出那些你被重复使用的类。应用程序的需求总会在项目完成之后发生改变，所以保持可变更代码及可重复架构的代码，会使得项目变得更好。经过实际动手练习，你将会拥有易于升级和易于被同伴理解的代码编程能力。

2.4 最后的思考 

这是我们完成的一个非常棒的项目。我们同时与开发 iPhone 本地 app 的同行一起工作，而且不同文化背景下，不同开开发者之间互相学习、互相提高，并最终都使项目顺利完成。这 Sencha Touch 类系统和层管理系统使得我们非常容易、快速地实现了一个可以运行的原型。这为我们在早期制定重要决定时提供了帮助，因为我们已经知道了在实际设备上怎么样的体验是最好的。

3 好词好句

3.1 Touch 
==========
接触, 触摸未来；


3.2 Spotlight 
==============
n. 聚光灯； 公众注意或突出显著； 射光圈； 探照灯
vt.聚光照明； 使公众注意，使突出醒目


3.3 Sweden 
===========
瑞典


3.4 Scandinavia 
================
欧洲北部的一个小岛


3.5 Polaroid 
=============
偏振片，偏光薄膜，人造偏光板


3.6 analog 
===========
类似物、模拟


3.7 instant 
============
立刻、瞬间、及时


3.8 analog instant 
===================
这个词很不好翻译，即时模拟？瞬间抓取？


3.9 vintage 
============
最好的、古老而又享有声誉的。美酒


3.10 gallery 
=============
画廊、走廊、美术馆


3.11 gravitated 
================
受重力作用，被吸引


3.12 versatility 
=================
多功能的


3.13 seamless 
==============
无缝的、无缝连接


3.14 rest 
==========
休息、剩余部分
REST API 有效轻松的 API 接口


3.15 snippet 
=============
小片
snippet code


3.16 agency 
============
机构、代理


3.17 hybrid 
============
杂种、多种混合物


3.18 DecidoKompetensor 
=======================
是 sencha 的合作认证伙伴。位于瑞典，专门提供服务解决方案的一个公司。这是关于这个公司的详细介绍:


[http://www.decidokompetensor.se/Vart-erbjudande/Stodsystem/Sencha-eng.aspx]


3.19 Impossible 公司 
=====================
这是这个公司的网站：
[https://www.the-impossible-project.com/]


从关于介绍中，[https://www.the-impossible-project.com/about/] 得到如下信息：
成立于2008年，是一家电影制造公司。几位合伙人买下了世界上最后一家旧电影的制造工厂，积累了 500年 的经验和知识。




after a million of small steps and a lot of blood, sweat and tears (not to forget the support of many excellent partners) we managed to develop a new Impossible film system.


3.20 好词好句 
==============


Impossible acquired the last factory in the world 


刚开始我的翻译是：“Impossible 公司要求世界上最新的一个生产类似偏振片影片的工厂”


正确的应该是，Impossible 公司获得了世界上最后一家工厂


---------
Impossible customers love analog instant photography and, as expected, the first feature they gravitated towards was the gallery. 

4 翻译感想 

人工翻译与电脑翻译一个最重要的区别是，人会重复阅读几次，发现不通顺的地方会立马修正过来。而这一点才让翻译的有了挑战，解决了不认识的单词，还得学会理解原文中所要表达的意思，并用正确的语句在译文中表达出同样的意思。


这个月只翻译了这一篇文章，但已经达到了每月4篇博客的计划。但以后还是尽量阅读外文资料，因为确实通过读文章、翻译收获还是很大的，从了解到 extjs 的层管理、一些实际项目开发、编程技巧、英语水平都有一定的提高。