基于React的知情選擇篩查APP的應(yīng)用研究

李子萱,譚文安

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

0 引言

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

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

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

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

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

1 相關(guān)技術(shù)研究

1.1 React框架

根據(jù)前文描述,旨在構(gòu)建一個(gè)基于React的避孕方法知情選擇篩查評(píng)估APP。React Native是Facebook推出的一個(gè)跨平臺(tái)前端框架,一個(gè)原生移動(dòng)應(yīng)用平臺(tái)?！癓earn OnceWrite Any Where”利用相同的核心代碼就可以創(chuàng)建Web,IOS和Android平臺(tái)的原生應(yīng)用。

1.2 React原理

瀏覽器實(shí)時(shí)展現(xiàn)數(shù)據(jù),是通過不斷刷新頁面中的DOM文檔對(duì)象。DOM是瀏覽器中的概念,是用于HTML和XML文檔的API。頻繁更新DOM會(huì)使瀏覽器的性能出現(xiàn)很大的問題。React引入了虛擬DOM的概念,用JS來模擬頁面中的DOM和DOM嵌套,這個(gè)對(duì)象是根據(jù)真實(shí)的標(biāo)簽生成的,是一個(gè)框架概念。虛擬DOM機(jī)制對(duì)數(shù)據(jù)進(jìn)行綁定和渲染,最后再將虛擬的DOM掛載到真實(shí)的DOM,實(shí)現(xiàn)頁面中元素的高效更新。虛擬DOM是DOM在內(nèi)存中的一種輕量級(jí)表達(dá)方式,可以通過不同的渲染引擎生成不同平臺(tái)下的界面。

1.3 React組件特性

React組件可以比作一組HTML標(biāo)簽,它是一組具有相關(guān)的狀態(tài)、屬性和函數(shù)的特定功能的對(duì)象。React組件帶來的最直觀的好處就是UI功能模塊間的分離,且每一個(gè)UI組件都變成可組合、可重用、可維護(hù)的獨(dú)立組件。

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

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

1.4 React即時(shí)模式介紹

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

2 實(shí)現(xiàn)方案與效果測試

2.1 APP功能結(jié)構(gòu)設(shè)計(jì)

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

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

圖2 功能設(shè)計(jì)Fig.2 Feature design

2.2 APP框架選擇

避孕方法知情選擇APP在應(yīng)用層面可以分為問卷APP端和管理人員的電腦端。手機(jī)APP前端采用基于React的移動(dòng)APP,后端技術(shù)采用基于.NET Core的Web API。ASP.NET Core是一個(gè)新的開源和跨平臺(tái)的框架。React采用Flexbox盒型布局模式,這樣可以使UI布局更簡單,可以使用原生的控件,讓APP從使用和視覺上擁有像原生APP一樣的體驗(yàn),數(shù)據(jù)庫為微軟SQL Server。

2.3 APP開發(fā)

該APP由首頁、篩查問卷、我的組成,可以根據(jù)頁面渲染的特點(diǎn)分為公共組件和特有組件。React通過class來完成APP組件的構(gòu)成,首先使用export default命令先導(dǎo)出APP,之后使用import命令再導(dǎo)入APP[7]。如圖3、圖4所示,通過導(dǎo)入事先開發(fā)的組件,插入到工程中實(shí)現(xiàn)。問卷每個(gè)頁面都有header組件,不同的頁面會(huì)有不同的組件設(shè)置。一個(gè)完整的頁面是由幾個(gè)不同的組件組合起來,快速完成頁面的渲染,如下代碼所示:

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所示,首頁為放置跑馬燈效果的滾動(dòng)圖片,用于宣傳性與生殖健康知識(shí),主要顯示篩查問卷模塊的入口,便于用戶找到想要操作的功能。底部包括首頁、設(shè)置2個(gè)圖標(biāo),分別為2個(gè)頁面相應(yīng)的跳轉(zhuǎn)按鈕。用戶可以進(jìn)入首頁后注冊(cè)用戶或者登錄系統(tǒng)。手機(jī)用戶填寫用戶名、密碼進(jìn)行用戶注冊(cè),用戶名與已注冊(cè)的用戶名不重復(fù)即可注冊(cè)成功。除了一般APP包括的功能外,知情選擇篩查APP還為用戶提供輪播的健康知識(shí)[9]。

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

篩查問卷頁顯示題庫,每次顯示一道答題,按照用戶答案跳轉(zhuǎn)題目,用戶須完成健康風(fēng)險(xiǎn)評(píng)估、決策力評(píng)估、知識(shí)評(píng)估等題目,其界面如圖5所示。

圖5 篩查評(píng)估頁Fig.5 Screening evaluation page

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

2.4 實(shí)現(xiàn)關(guān)鍵技術(shù)

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

圖6 篩查結(jié)果頁Fig.6 Screening results page

圖7 數(shù)據(jù)請(qǐng)求關(guān)鍵代碼Fig.7 Data request key code

答卷基本信息都儲(chǔ)存在表中,這些字段對(duì)應(yīng)著題號(hào)和答案,把用戶的信息儲(chǔ)存到數(shù)據(jù)庫中,字段屬性描述如表1所示。

2.5 APP測試

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

表1 答卷表Tab.1 Answer sheet

3 結(jié) 論

本文設(shè)計(jì)的基于React移動(dòng)端的知情選擇APP旨在通過移動(dòng)終端實(shí)現(xiàn)對(duì)育齡人群知情的調(diào)查評(píng)估,解決問卷調(diào)查開發(fā)效率低,原生應(yīng)用開發(fā)等的問題。本方法更快、更簡便、更高效地實(shí)現(xiàn)了APP的開發(fā),并且React知情選擇APP利用React的即時(shí)模式,根據(jù)用戶的設(shè)備性能和網(wǎng)速進(jìn)行適當(dāng)?shù)恼{(diào)整,使用戶體驗(yàn)感提升。

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