李子萱,譚文安

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

0 引言

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

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

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

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

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

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

1.1 React框架

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

1.2 React原理

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

1.3 React組件特性

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

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

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

1.4 React即時模式介紹

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

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

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

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

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

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

2.2 APP框架選擇

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

2.3 APP開發(fā)

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

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

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

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

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

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

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

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

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

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

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

2.5 APP測試

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

表1 答卷表Tab.1 Answer sheet

3 結(jié) 論

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

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