基于模型的可复用移动web应用程序开发-画出一个iPhone应用

基于模型的移动web应用程序开发

软件行业的精英们一直在寻找提高软件生产力的银弹。提高生成力的核心在于重用。这包含代码的重用、设计的重用。用户有很多相似的需求，针对这些需求提取出一些基本的模型元素从而可以在领域中复用。面向对象、基于模板、基于模型和基于框架的开发方法给行业带来了希望。

如果您正准备开发一个交友社区客户端的移动应用程序，需要覆盖主流的移动平台，比如iPhone、Android、Windows Phone、Symbian以及大量的山寨系统，那么你可以有如下的选择：

1、 招聘一个团队，每位工程师有不同平台的开发经验。

2、 Soho，自学所有的平台SDK和语言，自行开发

3、 开发一个移动web应用，匹配主流的浏览器

选择1的前提是您不差钱。选择2是您对自己的能力充分信任，但有可能会因为进度缓慢而丧失市场良机，也可能因为后续无力适配变化多端的机型和不同版本的SDK而无奈终止维护，这样的故事比比皆是。那么你可能会自然的选择3来降低学习成本、研发成本以及加快开发进度。但是移动web应用在带来适配方便的同时，也丧失了本地应用程序的更为友好华丽的界面观感以及访问本地资源的权利。另外如果您还想把移动应用的开发复用到PC领域，就需要考虑更多的移植策略。一个可行的解决方案就是基于模型的开发。模型是平台无关的需求抽象。和平台相关的代码层面交给框架根据环境配置、用户选项来自动生成，然后针对特定的领域和客户要求，进行再加工和编码优化。这解决了3个方面的问题：

1、 解决了平台之间移植复用的问题。首先选取通用的数据和流程模型元素来构架系统，然后调用合适的代码生成器来产生针对特定平台的工程。

2、 解决了设计标准和编码规范的问题。由于代码框架是由生成器产生。因此使用同样的建模描述方式就可以保持代码风格的一致性和代码规范性。

3、 支持更为敏捷的原型开发，便于客户理解系统。

理论看上去很美，然而要构造这样的基于模型的开发环境并投入到实际的软件生产过程中去，则并非那么容易。我了解到的EMF（基于Eclipse的模型框架）http://www.eclipse.org/modeling/emf/在这方面做了很多工作。而国内少有听闻有类似的工具在应用，尽管在鄙人看来这是一个逐渐明朗的技术趋势。

现在停止大话连篇，回到移动应用程序开发的主题上来，这里我要举一个非常实用的例子来说明上述的一些观点。让我们从头体验一下在现实工作中如何使用基于模型的开发方式来快速开发移动web应用程序。在这里我们将开发一个Twitter客户端的iPhone应用程序。看到iPhone应用程序，您可能会犹豫。难道我要为此去购买一个Mac机，我是不是还要先申请加入苹果开发人员计划，是不是还要买个iPhone？很幸运，在我举的这个例子中，你只要有PC机和浏览器即可。如果您有过iPhone开发经验，那么应该知道使用XCode构建一个显示Twitter最新消息的客户端，基本上需要做如下几件事情：

l 设计界面

l 连接元素

l 建立HTTP连接

l 发送请求、读取资源

l 解析JSON数据

l 添加用户图标

l 更新界面数据

根据您对XCode工具、iPhone SDK以及Objective C语言的掌握程度，可能会花费几天或几个小时不等的时间来完成这个任务。

那么让我们试试下面基于模型的方法是不是给我们带来一些Amazing Magic。

首先您得下载必要的开发工具Tersus Studio windows版本：http://www.tersus.com/#Id=240。

这是一个基于Eclipse的开源开发平台。

第一步：基础设置

---

1. 创建一个新Tersus project:

o 选择File -> New -> Tersus Project.

o 输入Project name: Twitter

o 选择Template: iPhone Application

o 点击Finish 按钮

2. 在模型编辑器（即中间的主窗口）中，双击放大到 <iPhone View>/Body.

3. 右键点击Body --> Add Element: Scroll Pane. 名字修改为: Top Trends Screen.

4. 放大到 Top Trends Screen.

5. 右键点击Top Trends Screen -->Add Element: List.

这样我们就创建了一个包含一个列表控件的带滚动条的<iPhone View>。注意该工程Outline窗口中有两个视图，分别是<Desktop View>和<iPhone View>，这里因为我们创建的是iPhone应用，因此我们仅关注<iPhone View>，展开它可以看到刚才添加的元素。保存工程并运行它（焦点需要在模型编辑器中）。浏览器将会自动启动。默认情况为打开https://localhost:8080/twitter，我们在后面加上/iphone.html。也就是https://localhost:8080/twitter/iphone.html。这样将会出现如下iPhone空白界面：

第二步：读取Twitter数据

---

1. 在模型编辑器中，放大到<iPhone View>/Body/Top Trends Screen/List.
2. 从左边palette窗口的Basic部分拖动一个Action到Top Trends Screen. 取名为Init.
3. 建模Top Trends Init 动作:
   • 放大到Init.
   • 从palette窗口的Basic部分拖拉一个Service. 取名Get Top Trends.
   • 添加一个exit（灰色小箭头）到Get Top Trends.
   • 从Display Actions 部分拖拉一个Alert.
   • 从Get Top Trends的exit到Alert trigger（绿色小箭头）创建一个flow. Init模型看起来如下:
     
   • 建模Get Top Trends服务:
     • 从Constants部分拖拉一个Text常量。数值为'http://search.twitter.com/trends.json'。名字改为Trends URL.
     • 从Basic部分拖拉一个Action，取名Download URL. 给这个action添加一个trigger和一个exit。
     • 从Trends URL constant 到Download URL的trigger创建一个flow。
     • 从Download URL的exit到Get Top Trends的exit创建一个flow。这个服务现在看起来应该像下面这样：
       
     • 建模Download URL 动作:
       • 从Miscellaneous部分拖拉一个Read Resource.
       • 从Text部分拖拉一个Binary to Text， 从中删除<Encoding> trigger。
       • 从Download URL 的trigger到Read Resource 的<URL> trigger创建一个flow。
       • 从Read Resource的<Content> exit到Binary to Text的<Binary> trigger创建一个flow。
       • 从Binary to Text的exit到Download URL的exit创建一个flow。Download URL 看起来如下:
         

• 保存工程
• 切换回浏览器窗口。应该会自动更新。
• 你将会看到一个Alert窗口，显示从Twitter获取到的JSON格式数据。

注：如果您在国内，那么因为社会和谐的原因，你将得到无法访问https://search.twitter.com/trends.json URL的错误。不过不要担心，稍后会给出解决方法。你可以暂时把Twitter search的URL改为Google map的URL来体验上述过程。（关于如何调用Google map您可以参考我以前的文章）

第三步：以iPhone的风格显示数据

---

1. 在模型编辑器中，放大到<iPhone View>/Body/Top Trends Screen/List.
2. 右键点击List --> Add Element: Content Item.
3. 建模Init 动作:

• 放大到Init Action.
• 给Get Top Trends添加一个exit. 命名为Parsed Data。设置其Reptetive属性。（选中exit对象，点击右键）
• 右键点击Init --> Add Ancestor Reference: 选择Top Trends Screen.
• 从Get Top Trends的repetitive exit（重叠的灰色小箭头）到Content Item (Scrollable Pane/List/Content Item)元素的exit创建一个flow。
• 删除到Alert的flow。
• 到目前为止Init 动作应该看起来如下:
  
• 删除Alert 元素。

1. 建模Get Top Trends:

• 从Miscellaneous部分拖拉一个Parse JSON.

• 从Download URL 的exit到Parse JSON的<JSON Text> trigger创建一个flow。

• 从Data Types部分拖拉一个Data Structre。取名: Top Trends DS.

• 从同样的部分拖拉下面这些元素到Top Trends DS 并如下命名:
  

as_of: 类型: Text.

trends: 类型: Data Dtructure; Reptetive.

name: 类型: Text.

url: 类型: Text.

• 从Parse JSON 的<Value> exit 到Top Trends DS 创建一个flow。
• 从Basic部分拖拉一个Action。取名Convert to Content Item.
• 为这个动作添加一个trigger 和一个exit。设置动作为repetitive
• 从Top Trends DS/trends 到Convert to Content Item 的trigger创建一个flow。
• 从Convert to Content Item 的exit 到Get Top Trends 的repetitive exit (Prased Data) 创建一个flow.
• Get Top Trends 服务模型看起来应该如下：

• 建模'Convert to Content Item':
  • 右键点击Convert to Content Item 的trigger并选择Show in Repository Explorer. 从Repository Explorer 中拖拉trends 数据结构到模型编辑器中的Convert to Content Item 动作中。
  • 从Convert to Content Item 的 trigger 到trends 创建一个flow。
  • 同样的: 右键点击Convert to Content Item 的exit 并选择 Show in Repository Explorer. 从Repository Explorer 拖拉Content Item到Convert to Content 动作里. 从Content Item 到Convert to Content Item 的exit 创建一个flow。
  • 从Constants部分拖拉一个Text 常量，设置数值为: Twitter48.png.
  • 从"Twitter48.png" constant 到 Content Item/Icon/<Path>创建一个flow。
  • 从trend/name 到Content Item/Content Holder/Title Text/<Value>创建一个flow。
  • 从trend/url 到Content Item/Content Holder/Content Text/<Value>创建一个flow。
  • Convert to Content Item 看起来应该如下:

1. 添加图像:
   • 切换到Navigator view (Window -> Show View -> Navigator)
   • 下载图片: http://downloads.tersus.com/Twitter48.png 并保存到 [Tersus Workspace]/Twitter/web.

• 保存工程.
• 切换回浏览器，应该会自动刷新。

如果您的所在地能够访问twitter网站，您将看到如下页面：

如果您有幸在和谐的国度里享受纯净的生活，还想见到如上叽叽喳喳的消息界面，那么您将需要付出一些额外的努力：

1、 安装freegate软件。请Google之。

2、 设置Tersus Studio http代理：Windows->Preference->General->Network Connections

到此为此，您没有写一行代码！您的工作台上只有如下的模型图：

您再回头计算一下花费了多长时间。我第一次花了2个小时。这是在我不熟悉其快捷操作和工具界面的情况完成的。熟练的工程师会怎么样？也许只要半个小时！

好吧，我们用鼠标拖来拖去完成了这个神奇的魔术。而魔术的内幕则有待您自行体会和思考了。这个平台是开源的，所以能够理解和使用到什么程度，不会有不可逾越的障碍。您或许还想把这个模型应用到Android、Blackbery、color: #1