基于React的知情选择筛查APP的应用研究

李子萱,谭文安

(上海第二工业大学 计算机与信息工程学院,上海201209)

0 引言

移动互联网所体现的“无处不在的网络、无所不能的业务”的思想,正逐渐改变着人们的生活方式和工作方式,当前越来越多的人,尤其是年轻群体对普通PC端注意力已逐渐转向于移动终端[1]。现在很多育龄人群对避孕节育知识有一定的了解,但对常用的避孕方法优缺点了解甚少,对避孕节育知情选择了解不全面,避孕节育知情选择服务形式单一,导致对性健康知识知晓率较低等问题。

针对采用传统筛查评估系统手动收集问卷的方法,消耗大量人力这一问题,戚晓鹏等[2]提出互联网调查系统,解决了借助纸质问卷收集数据的采集模式不及时、不规范等问题,具有效率高、质量好、节省大量人力等优点。但存在后期代码利用不高,后期维护代价大,其评估受时间和空间限制,用户体验差等问题。

很多学者对互联网调查系统进行了深入的研究与开发,任宇等[3]针对当前调查存在成本较高、数据质量难以控制等问题,研发了一套Web APP移动调查系统。李秦[4]基于移动平台的校园在线问卷调查系统,使用Sencha Touch移动平台开发框架对在线问卷调查系统进行进一步分析与设计,包括问卷注册、查看调查填写进展、审核问卷、查看调查结果等功能。万寨雨[5]开发设计了基于HTML5的移动调查评估系统,一定程度上提高了平台系统的开发效率,而且可以通过手机微信完成问题调查,提高了问卷调查系统的管理水平。

以上系统可以在一定程度上改善数据质量,但它们并不能完全满足知情选择筛查的个性化需求,以及填写过程中知情筛查项目多,流程复杂等问题,会导致用户没有良好的界面体验感,而且同一套开发代码在不同系统中使用会有不兼容的问题产生,在现有的APP中没有专门针对育龄人群知情选择筛查的APP。

本文将详细描述基于React如何研发“知情选择”APP,本技术不仅可以实现代码复用,而且借助高效渲染页面解决了卡顿问题,使应用保持响应状态,最后讨论了未来基于React的避孕方法知情选择筛查评估APP,及其应用于数据釆集和数据管理中所面临的不足和展望。

1 相关技术研究

1.1 React框架

根据前文描述,旨在构建一个基于React的避孕方法知情选择筛查评估APP。React Native是Facebook推出的一个跨平台前端框架,一个原生移动应用平台。“Learn OnceWrite Any Where”利用相同的核心代码就可以创建Web,IOS和Android平台的原生应用。

1.2 React原理

浏览器实时展现数据,是通过不断刷新页面中的DOM文档对象。DOM是浏览器中的概念,是用于HTML和XML文档的API。频繁更新DOM会使浏览器的性能出现很大的问题。React引入了虚拟DOM的概念,用JS来模拟页面中的DOM和DOM嵌套,这个对象是根据真实的标签生成的,是一个框架概念。虚拟DOM机制对数据进行绑定和渲染,最后再将虚拟的DOM挂载到真实的DOM,实现页面中元素的高效更新。虚拟DOM是DOM在内存中的一种轻量级表达方式,可以通过不同的渲染引擎生成不同平台下的界面。

1.3 React组件特性

React组件可以比作一组HTML标签,它是一组具有相关的状态、属性和函数的特定功能的对象。React组件带来的最直观的好处就是UI功能模块间的分离,且每一个UI组件都变成可组合、可重用、可维护的独立组件。

每个模块划分为多个组件[6],每个组件独立开发,独立编译,很大程度地提高了效率,最后各部分编译后集成到一个工程上,互不影响,而且重复的组件可以直接导入,减少了不必要的工作,过程简单。组件之间可以直接导入,很方便地将各个独立的组件集成,通信简化。图1为APP中基本组件。

图1 APP基本组件Fig.1 APP basic components

1.4 React即时模式介绍

当两个应用屏幕之间切换,没有加载足够的代码和数据时,这样手机界面就会过渡到一个空白屏,导致用户体验感差。React的新功能即时模式,根据用户的设备性能和网速进行适当调整,提高交互能力。即时模式可以中断一项正在执行的更新去执行其他更重要的事情,然后再回到之前正在运作的工作。当新屏幕准备就绪之后,React可以带我们跳转至新屏幕,同时更新多个状态。这和components,props和state等概念的基本工作方式是相同的。

2 实现方案与效果测试

2.1 APP功能结构设计

知情筛查APP为育龄人群提供一个强有力的知情筛查平台,不仅可以提供相应避孕节育知识,也可以针对性解决避孕节育知情选择了解不全面、知情选择服务形式单一等问题。可以说,“知情选择”APP深切了解育龄人群痛点,满足人们生活需要。

如图2所示,避孕方法知情选择筛查APP的功能有:①首页。问卷模块入口;②筛查问卷。负责问卷生成、答题以及筛查结果的生成。系统根据第3部分筛查评估的答题情况,通过提交后台的每个选项提供的数据,提供可用的避孕节育方法处方,并在结果中显示,给筛查者提供决策力方面的建议;③“我的”。功能主要包含筛查结果查看、修改密码等。

图2 功能设计Fig.2 Feature design

2.2 APP框架选择

避孕方法知情选择APP在应用层面可以分为问卷APP端和管理人员的电脑端。手机APP前端采用基于React的移动APP,后端技术采用基于.NET Core的Web API。ASP.NET Core是一个新的开源和跨平台的框架。React采用Flexbox盒型布局模式,这样可以使UI布局更简单,可以使用原生的控件,让APP从使用和视觉上拥有像原生APP一样的体验,数据库为微软SQL Server。

2.3 APP开发

该APP由首页、筛查问卷、我的组成,可以根据页面渲染的特点分为公共组件和特有组件。React通过class来完成APP组件的构成,首先使用export default命令先导出APP,之后使用import命令再导入APP[7]。如图3、图4所示,通过导入事先开发的组件,插入到工程中实现。问卷每个页面都有header组件,不同的页面会有不同的组件设置。一个完整的页面是由几个不同的组件组合起来,快速完成页面的渲染,如下代码所示:

import{ScrollView,StyleSheet,Text,View,TouchableOpacity,Dimensions,Image,FlatList}from‘react-native’;

import Swiper from ‘react-native-swiper’

import{connect}from ‘dva’;

〈Swiper〉〈/Swiper〉

图3 APP主页界面Fig.3 APP home page interface

图4 基本信息页Fig.4 Basic information page

APP首页界面如图3所示,首页为放置跑马灯效果的滚动图片,用于宣传性与生殖健康知识,主要显示筛查问卷模块的入口,便于用户找到想要操作的功能。底部包括首页、设置2个图标,分别为2个页面相应的跳转按钮。用户可以进入首页后注册用户或者登录系统。手机用户填写用户名、密码进行用户注册,用户名与已注册的用户名不重复即可注册成功。除了一般APP包括的功能外,知情选择筛查APP还为用户提供轮播的健康知识[9]。

图4为基本信息页,基本信息页填写用户的姓名、性别、年龄、婚姻状况等个人信息,用来收集户用的基本信息。

筛查问卷页显示题库,每次显示一道答题,按照用户答案跳转题目,用户须完成健康风险评估、决策力评估、知识评估等题目,其界面如图5所示。

图5 筛查评估页Fig.5 Screening evaluation page

筛查结果页根据第3部分筛查评估的答题情况,告知用户可用的避孕节育方法处方,提供决策力方面的建议,如图6所示。

2.4 实现关键技术

图7为数据请求关键代码。用户在进行答题时,服务器使用POST提交数据到后端数据库进行下一题题号判断,通过GET获得下一题题号。用户填写好答案后,其信息将被发送到业务逻辑服务器,服务器读取数据库中相应的URL以及POST提交字段和判断关键字,并连同用户选择的答案信息以POST方式提交题库,随后在数据库中返回选择选项相对应的一个题号,业务服务器通过返回的题号,将题号对应的题目返回给客户端。

图6 筛查结果页Fig.6 Screening results page

图7 数据请求关键代码Fig.7 Data request key code

答卷基本信息都储存在表中,这些字段对应着题号和答案,把用户的信息储存到数据库中,字段属性描述如表1所示。

2.5 APP测试

从全面的角度出发,平台应用测试阶段进行了功能测试、兼容性测试、稳定性测试、安全性测试等。开发的APP分别在IOS及Android4．0以上版本浏览器进行测试,页面显示正常,页面渲染效果也达到了预期效果,页面答题速度比其他应用(如问卷星)整体快,题目跳转很流畅,整个问卷答题过程使用时间比其在网页上完成的答卷时间缩短60%。代码复用率为70%,因此APP兼容性得到了解决,性能也得到优化。

表1 答卷表Tab.1 Answer sheet

3 结 论

本文设计的基于React移动端的知情选择APP旨在通过移动终端实现对育龄人群知情的调查评估,解决问卷调查开发效率低,原生应用开发等的问题。本方法更快、更简便、更高效地实现了APP的开发,并且React知情选择APP利用React的即时模式,根据用户的设备性能和网速进行适当的调整,使用户体验感提升。

进一步的研究可以引入语音识别,减少表单生成时间,简化操作方式,提供更便利的录入服务。尝试增大游戏交互性软件开发,提高用户自助录入的积极性。采用Word模板自动生成表单[8],减少在系统开发、后期维护、部署和广泛使用所带来的成本,自主定制系统,提高“知情选择筛查”APP的数据质量。最后,文中阐述的开发思路与关键技术打破了传统APP开发的模式,以更快速、高效的方式用组件化进行APP原生开发,对基于IOS及Android或React Native框架的相关研究有重大的借鉴意义。