如何重构PhoneGap架构和代码，支持软硬整合开发

ee                                                                        ee

欢迎访问 ==>高老师的博客网页

高焕堂：MISOO(大数据.大思考)联盟.台北中心和东京(日本)分社.总教练

EE                                                                        EE

如 何重构PhoneGap架构和代码，支持软硬整合开发

1.  案例说明

1.1  目标

这是支持智能家庭的<软硬整合开发、硬硬结合销售>商业模式的应用软件平台架构设计。在此商业模式里，TV/STB是扮演主角(主硬件角色)，所以这个开源(Open Source)的软件平台会执行于TV/STB里。我们称此平台为：<软硬整合平台>。当用户将小配件连接到TV/STB时，此平台就会启动相对映的(软件)插件(Plug-in)来掌控大、小硬件的通信；而且衔接到上层的应用软件(App)。随着小配件的创新和数量增多，插件也会更新、数量也会增多。于是，此<软硬整合平台>里，需要开发一个软件模块来管理上述的众多插件。这个软件模块，通称为：<插件管理模块>(Plug-in Manager)。它负责管理众多的插件，这插件就是EIT造形里的<T>。如图-1里的Tc和Tn。

图-1. 插件与小硬件是对映的

其中，Tc对映到Router而连接到Contec云平台；而tn则对映到Router而连接到Neat云平台。由于这是一个支持<硬硬结合销售>的软件平台；其架构设计必须考虑其跨(别人的)平台的能力，以便摆脱被外来(软、硬件)模块的束缚。并进而化被动为主动，随时能顺畅地抽换外来模块，确保软件平台的新陈代谢，是软件平台持续成长的基础。而其中的EIT造形就担任这项任务。例如，图-2里的透过<Tp>插件来整合外挂的信息推送系统，让<软硬整合平台>能够不受信息推送系统的束缚。

图-2.  架构设计必须考虑其跨(别人的)平台

1.2   做法

在PhoneGap框架里有个<插件管理(Plug-in Manager)>模块，由于PhoneGap是一个开源软件，可以对它加以重构而移植过来，做为我们开源开放的<软硬整合平台>里的<插件管理模块>。原来的PhoneGap框架，其信息流向是承接来自WebView的事件。也就是它原来搭配的是HTML5-based的Web App；如图-3所示。

图-3.  原来PhoneGap框架的信息流向

由于我们的<软硬整合平台>上的应用软件，其形式包含传统的Android App形式，以及HTML5-based的Web App形式。所以我们必须重构PhoneGap框架，让信息流向也能承接来自传统(一般)Android App里的View事件；如图-4所示。

图-4. 重构后，PhoneGap框架所添加的信息流向

于是，我们的<软硬整合平台>就能管理上述两种Android App所需要的插件了；透过这些插件来将上层的App与底层硬件驱动(Driver)衔接，来控制外加的小配件；而实践了<软硬整合开发、硬硬结合销售>的商业目标。[�g迎光�R 高�ㄌ� �W�：  http://www.cnblogs.com/myEIT/ ]  

2.  重构设计的经验分享与讨论

2.1    从<重构设计>到<重构代码>的过程

◆  议题：PhoneGap目前只搭配HTML5的Web App
★ 如何重构PhoneGap的架构和代码
★ 让PhoneGap也能搭配一般的Native App

◆  现况：目前PhoneGap的架构设计
★ HTML5 & PhoneGap可以让UI更容易跨平台
★ 其依赖Browser和PhoneGap的插件<T>来吸收平台的差化
★ 如果插件很多时，PhoneGap里的PluginManager负责管理之
★ UI事件是从WebView传送到PhoneGap的插件<T>

◆  目标：
★ 即使不采用HTML5，也能使用PhoneGap来管里插件
★ 一旦不使用HTML5，PhoneGap就不再搭配WebView
★ 于是，PhoneGap转而搭配一般的View，如Button等
★ UI事件(Event)改从一般的传送到PhoneGap的插件<T>

◆  收获：
★ 如何拦截App的启动事件(onCreate事件)和UI事件
★ 以EIT造形加快理解PhoneGap框架的结构
★ 深刻领悟<I>的设计要领：如IPlugin接口设计
★ 熟悉从<重构设计>到<重构代码>的过程

2.2   重构的设计思考

     ◆  重构范围内共有3个EIT造形的美妙组合
★ 第1个造形：{ Activity-DroidGap }
★ 第2个造形：{ WebView-CodavaWebView }
★ 第3个造形：{ PluginManager-Plugin-<T>}
★ 熟悉从<重构设计>到<重构代码>的过程
     ◆  因为不再搭配WebView，所以前两个EIT造形都必须重构
     ◆  第3个造形最复杂
     ◆  上上策是：不重构第3个造形，其内涵和接口代码都保持不变
     ◆  成功地让第3个造形跨到重构的新平台(即前两个造形)

2.3   案例的成功关键和启示

     ◆  关键：在于上述的设计思考
     ◆  洞悉：心怀EIT造形去观察架构
     ◆  技巧：从<I>观察重构的变动震幅，找出上上之策
     ◆  启示：优越架构，带来易于重构的机会，创造了系统未来性

=========================================================

相�P文章：<Android与iOS/WP8跨平台整合设计与开发 专栏>

~ End~

**                                                                     **