李子萱,譚文安

(上海第二工業(yè)大學 計算機與信息工程學院,上海201209)

0 引言

移動互聯(lián)網所體現的“無處不在的網絡、無所不能的業(yè)務”的思想,正逐漸改變著人們的生活方式和工作方式,當前越來越多的人,尤其是年輕群體對普通PC端注意力已逐漸轉向于移動終端[1]。現在很多育齡人群對避孕節(jié)育知識有一定的了解,但對常用的避孕方法優(yōu)缺點了解甚少,對避孕節(jié)育知情選擇了解不全面,避孕節(jié)育知情選擇服務形式單一,導致對性健康知識知曉率較低等問題。

針對采用傳統(tǒng)篩查評估系統(tǒng)手動收集問卷的方法,消耗大量人力這一問題,戚曉鵬等[2]提出互聯(lián)網調查系統(tǒng),解決了借助紙質問卷收集數據的采集模式不及時、不規(guī)范等問題,具有效率高、質量好、節(jié)省大量人力等優(yōu)點。但存在后期代碼利用不高,后期維護代價大,其評估受時間和空間限制,用戶體驗差等問題。

很多學者對互聯(lián)網調查系統(tǒng)進行了深入的研究與開發(fā),任宇等[3]針對當前調查存在成本較高、數據質量難以控制等問題,研發(fā)了一套Web APP移動調查系統(tǒng)。李秦[4]基于移動平臺的校園在線問卷調查系統(tǒng),使用Sencha Touch移動平臺開發(fā)框架對在線問卷調查系統(tǒng)進行進一步分析與設計,包括問卷注冊、查看調查填寫進展、審核問卷、查看調查結果等功能。萬寨雨[5]開發(fā)設計了基于HTML5的移動調查評估系統(tǒng),一定程度上提高了平臺系統(tǒng)的開發(fā)效率,而且可以通過手機微信完成問題調查,提高了問卷調查系統(tǒng)的管理水平。

以上系統(tǒng)可以在一定程度上改善數據質量,但它們并不能完全滿足知情選擇篩查的個性化需求,以及填寫過程中知情篩查項目多,流程復雜等問題,會導致用戶沒有良好的界面體驗感,而且同一套開發(fā)代碼在不同系統(tǒng)中使用會有不兼容的問題產生,在現有的APP中沒有專門針對育齡人群知情選擇篩查的APP。

本文將詳細描述基于React如何研發(fā)“知情選擇”APP,本技術不僅可以實現代碼復用,而且借助高效渲染頁面解決了卡頓問題,使應用保持響應狀態(tài),最后討論了未來基于React的避孕方法知情選擇篩查評估APP,及其應用于數據釆集和數據管理中所面臨的不足和展望。

1 相關技術研究

1.1 React框架

根據前文描述,旨在構建一個基于React的避孕方法知情選擇篩查評估APP。React Native是Facebook推出的一個跨平臺前端框架,一個原生移動應用平臺?！癓earn OnceWrite Any Where”利用相同的核心代碼就可以創(chuàng)建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標簽,它是一組具有相關的狀態(tài)、屬性和函數的特定功能的對象。React組件帶來的最直觀的好處就是UI功能模塊間的分離,且每一個UI組件都變成可組合、可重用、可維護的獨立組件。

每個模塊劃分為多個組件[6],每個組件獨立開發(fā),獨立編譯,很大程度地提高了效率,最后各部分編譯后集成到一個工程上,互不影響,而且重復的組件可以直接導入,減少了不必要的工作,過程簡單。組件之間可以直接導入,很方便地將各個獨立的組件集成,通信簡化。圖1為APP中基本組件。

圖1 APP基本組件Fig.1 APP basic components

1.4 React即時模式介紹

當兩個應用屏幕之間切換,沒有加載足夠的代碼和數據時,這樣手機界面就會過渡到一個空白屏,導致用戶體驗感差。React的新功能即時模式,根據用戶的設備性能和網速進行適當調整,提高交互能力。即時模式可以中斷一項正在執(zhí)行的更新去執(zhí)行其他更重要的事情,然后再回到之前正在運作的工作。當新屏幕準備就緒之后,React可以帶我們跳轉至新屏幕,同時更新多個狀態(tài)。這和components,props和state等概念的基本工作方式是相同的。

2 實現方案與效果測試

2.1 APP功能結構設計

知情篩查APP為育齡人群提供一個強有力的知情篩查平臺,不僅可以提供相應避孕節(jié)育知識,也可以針對性解決避孕節(jié)育知情選擇了解不全面、知情選擇服務形式單一等問題?？梢哉f,“知情選擇”APP深切了解育齡人群痛點,滿足人們生活需要。

如圖2所示,避孕方法知情選擇篩查APP的功能有:①首頁。問卷模塊入口;②篩查問卷。負責問卷生成、答題以及篩查結果的生成。系統(tǒng)根據第3部分篩查評估的答題情況,通過提交后臺的每個選項提供的數據,提供可用的避孕節(jié)育方法處方,并在結果中顯示,給篩查者提供決策力方面的建議;③“我的”。功能主要包含篩查結果查看、修改密碼等。

圖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開發(fā)

該APP由首頁、篩查問卷、我的組成,可以根據頁面渲染的特點分為公共組件和特有組件。React通過class來完成APP組件的構成,首先使用export default命令先導出APP,之后使用import命令再導入APP[7]。如圖3、圖4所示,通過導入事先開發(fā)的組件,插入到工程中實現。問卷每個頁面都有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個頁面相應的跳轉按鈕。用戶可以進入首頁后注冊用戶或者登錄系統(tǒng)。手機用戶填寫用戶名、密碼進行用戶注冊,用戶名與已注冊的用戶名不重復即可注冊成功。除了一般APP包括的功能外,知情選擇篩查APP還為用戶提供輪播的健康知識[9]。

圖4為基本信息頁,基本信息頁填寫用戶的姓名、性別、年齡、婚姻狀況等個人信息,用來收集戶用的基本信息。

篩查問卷頁顯示題庫,每次顯示一道答題,按照用戶答案跳轉題目,用戶須完成健康風險評估、決策力評估、知識評估等題目,其界面如圖5所示。

圖5 篩查評估頁Fig.5 Screening evaluation page

篩查結果頁根據第3部分篩查評估的答題情況,告知用戶可用的避孕節(jié)育方法處方,提供決策力方面的建議,如圖6所示。

2.4 實現關鍵技術

圖7為數據請求關鍵代碼。用戶在進行答題時,服務器使用POST提交數據到后端數據庫進行下一題題號判斷,通過GET獲得下一題題號。用戶填寫好答案后,其信息將被發(fā)送到業(yè)務邏輯服務器,服務器讀取數據庫中相應的URL以及POST提交字段和判斷關鍵字,并連同用戶選擇的答案信息以POST方式提交題庫,隨后在數據庫中返回選擇選項相對應的一個題號,業(yè)務服務器通過返回的題號,將題號對應的題目返回給客戶端。

圖6 篩查結果頁Fig.6 Screening results page

圖7 數據請求關鍵代碼Fig.7 Data request key code

答卷基本信息都儲存在表中,這些字段對應著題號和答案,把用戶的信息儲存到數據庫中,字段屬性描述如表1所示。

2.5 APP測試

從全面的角度出發(fā),平臺應用測試階段進行了功能測試、兼容性測試、穩(wěn)定性測試、安全性測試等。開發(fā)的APP分別在IOS及Android4．0以上版本瀏覽器進行測試,頁面顯示正常,頁面渲染效果也達到了預期效果,頁面答題速度比其他應用(如問卷星)整體快,題目跳轉很流暢,整個問卷答題過程使用時間比其在網頁上完成的答卷時間縮短60%。代碼復用率為70%,因此APP兼容性得到了解決,性能也得到優(yōu)化。

表1 答卷表Tab.1 Answer sheet

3 結 論

本文設計的基于React移動端的知情選擇APP旨在通過移動終端實現對育齡人群知情的調查評估,解決問卷調查開發(fā)效率低,原生應用開發(fā)等的問題。本方法更快、更簡便、更高效地實現了APP的開發(fā),并且React知情選擇APP利用React的即時模式,根據用戶的設備性能和網速進行適當的調整,使用戶體驗感提升。

進一步的研究可以引入語音識別,減少表單生成時間,簡化操作方式,提供更便利的錄入服務。嘗試增大游戲交互性軟件開發(fā),提高用戶自助錄入的積極性。采用Word模板自動生成表單[8],減少在系統(tǒng)開發(fā)、后期維護、部署和廣泛使用所帶來的成本,自主定制系統(tǒng),提高“知情選擇篩查”APP的數據質量。最后,文中闡述的開發(fā)思路與關鍵技術打破了傳統(tǒng)APP開發(fā)的模式,以更快速、高效的方式用組件化進行APP原生開發(fā),對基于IOS及Android或React Native框架的相關研究有重大的借鑒意義。