专栏名称: 中国数字医学
传播数字医学发展动态,发布医疗卫生信息化相关信息
目录
相关文章推荐
医学美图  ·  医学服务:视觉化的威力 ·  5 天前  
懒人医考  ·  【中医】二十八部脉象动态图解 ·  5 天前  
丁香园  ·  2025 ... ·  5 天前  
51好读  ›  专栏  ›  中国数字医学

基于Hybrid App混合模式的 跨平台移动互联医患服务平台构建研究

中国数字医学  · 公众号  · 医学  · 2017-05-22 15:44

正文

1  引言


在移动互联浪潮兴起的今天,移动医疗App面临的敏捷开发更为紧迫。同时使用IOS或Andriod原生开发App因开发维护的技术成本过高且无法及时响应医疗机构急速的业务扩展,必然提升了其对程序开发效率的更高要求。而HTML5高效率、低成本、跨平台的特性被利用形成了一种新的移动医疗开发模式:Hybrid App。


混合模式移动应用Hybrid App指介于Web App、Native App两者之间的App。其以特定技术封装客户端的壳,如图1所示Hybrid APP底层依赖于Native提供的唯一WebView容器,上层则以HTML5为浏览内核,实现了跨平台App Store一次审核安装包,频繁业务内容版本升级无需重新审核且低延时同步发布的效果。该模式利于前端介入且适合医疗机构业务的快速迭代,兼具Native App良好用户交互体验的优势和Web App跨平台敏捷开发的优势。


图1 Hybrid App混合开发模式示意图


2  整体架构


目前国内外利用Hybrid App技术构建企业级跨平台移动互联医患服务平台的研究尚属起步阶段,本文尝试性地提出一个运用Hybrid App技术结合云计算平台,构建企业级跨平台移动互联医患服务平台的解决方案,其整体架构如图2所示。 


图2 基于Hybrid App混合模式的跨平台移动互联医患服务平台的整体架构


基于Hybrid App混合模式的跨平台移动互联医患服务平台的整体架构使用Sencha Touch+Phone Gap+PHP框架作为技术实现。整体架构分为用户前端架构和服务后端架构,前端架构中Sencha Touch是专为智能移动设备应用开发的JavaScript框架,用于展现前台页面框架的开发界面,其全面兼容Android和Apple iOS设备,具有丰富的全面基于最新HTML5和CSS3 WEB标准的数据管理组件和用户界面。Phone Gap跨平台支撑框架可将Web App打包成任意跨平台移动设备安装包和调用原生接口,并上架到各大应用市场。


服务后端架构设计时,充分考虑划分相对独立工作的对象。采用MVC层次化设计方法,在不依赖业务逻辑的情况下专注于视图设计,使程序遵循行业标准,有利于后期维护和测试,有利于设计复杂的移动App应用程序,保证多机并行处理、容错以及负载均衡等企业级应用的需求。


在Hybrid App混合模式开发中,基于XMLHTTPRequest对象设计统一通信方式联系各工作对象,在智能移动终端和服务器间的数据跨域通信时采用扩展的JSONP以替代原生JSON交换数据格式,以向下兼容Black Berry、Symbian、iOS3.2等设备,通过回调函数实现数据跨域访问。同时采用独立部署云服务器、数据库服务器与应用服务器的模式,利用移动业务整合服务使得采用Hybrid App混合模式开发的应用可以访问医疗机构既有的诸如HIS、LIS、PACS、OA等业务系统。


2.1 移动终端WebView容器 WebView容器是使用Android/iOS等操作系统的 底层API 来创建嵌入式HTML5的渲染引擎。功能主要为定义Web页面与Android/iOS应用程序间的接口,允许Web页面中的JavaScript调用Android/iOS应用程序,将Web嵌入到Android/iOS应用程序中。


2.2 前端交互JS 包括基础功能JS和业务功能JS。 


基础功能JS主要采用Node.js。Node是一个JavaScript运行环境,基于Chrome JavaScript运行时构建对Google V8引擎的封装,提供替代并经优化的API以适应非浏览器环境下的运行。


业务功能JS主要采用Express JS Web应用框架,运用其提供的强大类库体系,创建与医疗机构既有HIS、PACS、LIS间高并发访问的基础Web服务,且因其采用非阻塞I/O的事件驱动模型,故适合运行在医疗数据密集的实时应用环境下,实现医患双方对全诊疗过程中重点环节医疗数据访问的需求。


2.3 前端适配器 适配诸如智能手机、平板电脑、移动医护工作站等不同的移动终端类型。


3  整体UI/JS架构下的UI适配方案 


混合开发UI适配方案具体见图3。

 

图3 混合开发UI适配方案


3.1 页面加载 页面容器WebView类主要用来实现页面的加载并对后续操作提供支持,是整个框架的核心和基础,例如:JS支持、数据上传/下载、缓存等;页面加载接口:对页面的加载过程进行跟踪。


3.2 JS调用操作系统功能 Web网页:负责调用JS接口中已定义的功能方法类;JS接口:负责调用Android/iOS操作系统接口中唯一对应的具体函数方法;XdjaWebHelper类:负责直接调用框架接口在应用系统中自定义的或框架中已集成好的诸如响应返回键、退出等功能。


3.3 应用系统调用JS功能 应用系统通过XdjaClientHelper类来实现对JS功能的调用,并负责在必要时将框架中的方法返回值以调用形式通知给JS方法。


3.4 应用系统调用HDF功能 应用系统可以调用框架智能移动设备上常见通话、短信、定位等功能以及消息提示框、集成工具类、升级模块等。


4    性能优化


4.1 单个页面 登录、首页以及共用代码部分等统一放在index页面里。同时以业务模块划分为的不同页面,展示时以Ajax的形式请求到index页面统一予以展示,使用完毕统一进行资源回收。统一页面公共的CSS和JS仅加载一次。


4.2 本地存储LocalStorage 根据功能模块实际用途强调运用HTML5本地LocalStorage存储最近查询记录,减少与医疗信息系统间的后台交互。


以病案首页查询为例,在综合查询功能项中当用户点击该模块,则通过LocalStorage将病案首页查询结果数据和与之相应的功能名字存储起来并缓存在本地,若用户不清除,LocalStorage中的数据则一直存在。当用户再次打开应用并进行相同查询时,系统自动从LocalStorage中判别获取缓存有效期内的最近查询记录。


4.3 异步Ajax 本次开发中多处功能通过使用异步Ajax实现。显示页面时,先显示框架再异步加载内容。如图4,查询患者住院费用每日清单先显示按项目类型归集的简项列表,再通过用户的点击下拉,页面以Ajax的形式获取该类型费用明细项并展示出来。

 

图4 异步Ajax查询患者住院费用每日清单


通过异步Ajax技术的运用不仅提高了用户的交互体验,更从性能的角度提高程序的运行速度。


5  结论


Hybrid App作为一个新型、先进的开发模式和思维方式,具备强大的Native布局能力和HTML5的灵活展现能力,能够让Native和HTML5友好共存,并以标签化的方式更方便开发者的敏捷调用和扩展。籍此医疗机构在构建跨平台移动互联医患服务平台的开发成本可大幅降低,同时Hybrid App开发模式兼容现有App Store模式发行,在用户桌面形成独立入口。


通过实践,在技术架构上通过构建移动终端唯一WebView容器和一整套前端交互JS类Web主体型中间件,并通过静态资源内置到客户端,结合部分原生交互效果以及大量异步加载技术的运用,能够达到Android/iOS平台都较一致的用户体验,证实是可行的最佳Hybrid App解决方案类型。


(来源:摘自《中国数字医学》杂志2017年第5期,作者及单位:刘鹏,天津市第一中心医院)


《中国数字医学》微店,点击以下阅读原文进入