李正仁,周凱虎,王全貴,蘇 萌

1(中國(guó)地質(zhì)大學(xué)(北京)能源學(xué)院,北京 100083)

2(中國(guó)地質(zhì)大學(xué)(北京)地球物理與信息技術(shù)學(xué)院,北京 100083)

3(中國(guó)地質(zhì)大學(xué)(北京)信息工程學(xué)院,北京 100083)

1 引言

運(yùn)隨著時(shí)代的發(fā)展,大學(xué)生課余活動(dòng)不斷豐富、多種多樣,活動(dòng)種類主要包括：網(wǎng)絡(luò)活動(dòng)、志愿活動(dòng)、體育文化活動(dòng)、學(xué)習(xí)交流活動(dòng)、職業(yè)規(guī)劃與心理健康課外活動(dòng)等[1].且目前大多數(shù)供大學(xué)生報(bào)名參與活動(dòng)的預(yù)約方式主要為：通過(guò)問(wèn)卷星系統(tǒng)制作調(diào)查問(wèn)卷、指定手機(jī)App預(yù)約、公眾號(hào)跳轉(zhuǎn)網(wǎng)頁(yè)預(yù)約、人工預(yù)約等,存在功能受限、定制性差、面向?qū)ο髥我?、?fù)責(zé)人工作量大等問(wèn)題.

微信小程序作為一種不需要安裝即可使用的應(yīng)用程序,方便簡(jiǎn)潔.對(duì)用戶而言,微信小程序同微信相掛鉤,“掃一掃”即可打開應(yīng)用,使用起來(lái)極為方便；對(duì)于開發(fā)者而言,開發(fā)及使用不受系統(tǒng)環(huán)境限制；此外,微信小程序亦可與公眾號(hào)完美嵌合,適合高校學(xué)生活動(dòng)的組織、宣傳與預(yù)約,為同學(xué)們獲取信息參與及組織活動(dòng)提供了極大的便利,可借助社團(tuán)、學(xué)生組織快速推廣使用,可實(shí)現(xiàn)快速覆蓋在校學(xué)生,以幫助高校學(xué)生工作更好地開展,打造高校特色化活動(dòng)管理系統(tǒng)[2].

2 系統(tǒng)研究依據(jù)

2.1 系統(tǒng)優(yōu)勢(shì)

微信小程序依附于微信國(guó)民級(jí)的聊天工具,具有“打開即用、用完即走、不用下載”的特點(diǎn)[3],以及微信10億用戶的天然優(yōu)勢(shì),它的靈活性讓它可以基于場(chǎng)景聚合各種服務(wù).微信小程序是一種全新的連接用戶與服務(wù)的方式,它可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn)[4,5].

2.2 改需求與可行性分析

與現(xiàn)有類似研究相比,已上線的具有預(yù)約功能的小程序與應(yīng)用程序功能較為單一,頁(yè)面繁雜,用戶體驗(yàn)與信息保密性差[6-10].結(jié)合高校需求,活動(dòng)管理平臺(tái)功能需包括完整的用戶功能、活動(dòng)功能與管理員功能的同時(shí),結(jié)合高校學(xué)生活動(dòng)特色與活動(dòng)組織模式,設(shè)計(jì)并完善平臺(tái)功能,滿足以下功能需求：

(1)活動(dòng)管理平臺(tái)需具有較高的安全性,保障用戶隱私的同時(shí)需滿足微信小程序接口請(qǐng)求的安全性要求,故通過(guò)郵箱驗(yàn)證、前后端分離、HTTPS協(xié)議與RESTful API接口通信滿足安全性需要[11-14]；

(2)用戶端、活動(dòng)組織方端、管理員端分離,有效避免權(quán)限越界、隱私泄露等問(wèn)題,用戶端采用微信小程序框架開發(fā),管理員與活動(dòng)組織方端采用Node.js+express+MongoDB框架開發(fā)；

(3)營(yíng)造良好的用戶交互體驗(yàn),采用嵌入式JavaScript模板引擎EJS,借助Semantic-UI+jQurey插件進(jìn)行頁(yè)面開發(fā),實(shí)現(xiàn)布局、樣式美觀且統(tǒng)一[15,16],采用視口viewport渲染方法實(shí)現(xiàn)各類設(shè)備頁(yè)面自適應(yīng)；

(4)提供連續(xù)穩(wěn)定服務(wù),部署云端服務(wù)器時(shí)采用PM2進(jìn)程管理工具,永久保持應(yīng)用程序活躍,無(wú)需停機(jī)即可重新加載程序,同時(shí)進(jìn)行終端性能監(jiān)控、自動(dòng)重啟、負(fù)載均衡以及服務(wù)器重啟自動(dòng)部署等運(yùn)維功能[17].

3 系統(tǒng)框架概述

3.1 微信小程序框架

微信小程序在技術(shù)構(gòu)架上可分為視圖層、邏輯層、系統(tǒng)層3個(gè)部分(圖1),可使用微信云服務(wù)平臺(tái)提供的API進(jìn)行核心業(yè)務(wù)開發(fā),實(shí)現(xiàn)快速上線和迭代,同時(shí)與開發(fā)者搭建的云服務(wù)相互兼容,互不排斥[5].微信小程序開發(fā)過(guò)程中另一關(guān)鍵技術(shù)為組件化開發(fā),使UI界面在設(shè)計(jì)風(fēng)格上達(dá)到統(tǒng)一,降低了微信小程序的升級(jí)、維護(hù)難度,保證了用戶體驗(yàn)質(zhì)量[5].

圖1 微信小程序App service邏輯層示意圖

3.2 Node.js+express+MongoDB后端框架

Express是一個(gè)基于Node.js的服務(wù)端開發(fā)框架,擁有強(qiáng)大的路由、多模塊支持等特性[18].采用Promise函數(shù)作為抽象異步處理對(duì)象以及對(duì)其進(jìn)行各種操作的組件,避免層層嵌套回調(diào),將復(fù)雜的異步處理輕松地進(jìn)行模式化.MongoDB為分布式文件存儲(chǔ)的非關(guān)系型數(shù)據(jù)庫(kù),具有良好的數(shù)據(jù)安全性,高并發(fā)、高拓展、速度快、成本低[19-21].同時(shí)便于微信小程序以及前后端的通訊,采用以統(tǒng)一的接口為Web、IOS和Android前、后端提供便捷通信服務(wù)的RESTful API,提供豐富的功能接口的同時(shí)充分保障數(shù)據(jù)的安全性[13].

4 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

4.1 系統(tǒng)數(shù)據(jù)流分析

微信小程序的數(shù)據(jù)主要包括用戶個(gè)人信息與活動(dòng)數(shù)據(jù).用戶在小程序端發(fā)生的交互動(dòng)作與活動(dòng)方與活動(dòng)管理平臺(tái)的交互是業(yè)務(wù)的數(shù)據(jù)來(lái)源,根據(jù)用戶使用行為和系統(tǒng)的架構(gòu)分析,業(yè)務(wù)流的數(shù)據(jù)處理主要由客戶端和活動(dòng)管理平臺(tái)完成[6].

如圖2所示,用戶可以通過(guò)微信小程序端請(qǐng)求活動(dòng)信息并發(fā)送個(gè)人信息,進(jìn)行活動(dòng)預(yù)約與取消等操作.活動(dòng)管理平臺(tái)接收到用戶的行為請(qǐng)求,在控制層進(jìn)行相應(yīng)的業(yè)務(wù)處理,并將處理結(jié)果以頁(yè)面展示的方式返回給用戶.在用戶成功預(yù)約活動(dòng)后,活動(dòng)管理平臺(tái)會(huì)將參加者姓名、人數(shù)等信息以頁(yè)面展示的形式反饋給活動(dòng)方,并提供導(dǎo)出Excel數(shù)據(jù)表等拓展功能按鈕,使活動(dòng)方能及時(shí)在活動(dòng)管理平臺(tái)了解活動(dòng)開展情況.當(dāng)活動(dòng)方需要修改活動(dòng)信息或活動(dòng)狀態(tài)時(shí),活動(dòng)方可對(duì)已發(fā)布的活動(dòng)進(jìn)行修改.系統(tǒng)管理員可實(shí)時(shí)監(jiān)控用戶與活動(dòng)方行為,查看操作記錄并進(jìn)行相關(guān)管理操作.

4.2 系統(tǒng)功能介紹

活動(dòng)管理平臺(tái)開發(fā)以RESTful API為通信橋梁的微信小程序用戶端與Web活動(dòng)方與管理員后端,根據(jù)大學(xué)生活動(dòng)現(xiàn)狀、活動(dòng)組織者需求定制功能,如圖3.

基礎(chǔ)功能包括：?jiǎn)螆?chǎng)次活動(dòng)發(fā)布與預(yù)約、隱藏活動(dòng)、取消預(yù)約、一鍵簽到、缺勤標(biāo)記、活動(dòng)場(chǎng)次、預(yù)約量、瀏覽量、參與率等數(shù)據(jù)分析統(tǒng)計(jì)、個(gè)人活動(dòng)詳情與主頁(yè)、注冊(cè)與校網(wǎng)郵箱激活驗(yàn)證、登錄與cookie、頭像、信息綁定、修改與找回密碼等功能.

圖2 系統(tǒng)業(yè)務(wù)數(shù)據(jù)流示意圖

圖3 活動(dòng)管理平臺(tái)功能示意圖

高級(jí)功能包括：多場(chǎng)次日期預(yù)約型活動(dòng)發(fā)布與預(yù)約、分頁(yè)與標(biāo)簽、二維碼掃一掃簽到、定時(shí)開啟活動(dòng)預(yù)約通道、預(yù)約信息導(dǎo)出Excel數(shù)據(jù)表、權(quán)限分級(jí)與權(quán)限管理、信用分與信用管理、多類型搜索等；其余基本實(shí)現(xiàn)框架或即將實(shí)現(xiàn)的功能：活動(dòng)評(píng)論、話題發(fā)布、活動(dòng)室占用情況查詢與狀態(tài)變更等.

4.3 特色功能介紹

(1)郵箱驗(yàn)證：郵箱驗(yàn)證功能借助express框架nodemailer組件實(shí)現(xiàn).通過(guò)該功能可以確保注冊(cè)用戶為高校師生,充分保證用戶隱私安全.未驗(yàn)證的用戶登錄時(shí),將跳轉(zhuǎn)至激活驗(yàn)證頁(yè)(圖4),發(fā)送驗(yàn)證郵件后可于郵箱查收(見圖5).找回密碼功能與驗(yàn)證激活功能實(shí)現(xiàn)方式類似.該模塊關(guān)鍵代碼如下：

圖4 驗(yàn)證頁(yè)面激活

圖5 郵箱驗(yàn)證郵件圖

(2)二維碼相關(guān)功能：二維碼相關(guān)功能包括二維碼分享與二維碼簽到(圖6)兩部分,通過(guò)express框架qr-image組件與cookie結(jié)合實(shí)現(xiàn),具有定時(shí)失效、免登錄簽到等特性.管理員開始活動(dòng)后可以通過(guò)二維碼簽到功能進(jìn)行簡(jiǎn)單便捷的簽到操作.該模塊關(guān)鍵代碼如下：

圖6 簽到二維碼頁(yè)面

二維碼簽到頁(yè)面自動(dòng)刷新功能需于前端代碼文件中標(biāo)簽中添加代碼實(shí)現(xiàn),如下：

(3)導(dǎo)出Excel數(shù)據(jù)表：活動(dòng)預(yù)約數(shù)據(jù)導(dǎo)出Excel數(shù)據(jù)表功能通過(guò)express框架excel-export模塊實(shí)現(xiàn),管理員可將活動(dòng)預(yù)約信息導(dǎo)出為Excel數(shù)據(jù)表,極大地提高了工作效率與數(shù)據(jù)統(tǒng)計(jì)與分析能力.

該模塊關(guān)鍵代碼如下：

在該模塊代碼編寫時(shí)需要注意應(yīng)添加代碼res.setHeader('Content-Type','application/vnd.open xmlformats；charset=utf-8')以準(zhǔn)許漢字輸出.

(4)單場(chǎng)次活動(dòng)與日期預(yù)約(多場(chǎng)次)活動(dòng)：根據(jù)大活動(dòng)管理需求,定制開發(fā)單場(chǎng)次活動(dòng)與日期預(yù)約活動(dòng)兩大類活動(dòng)的發(fā)布、預(yù)約與管理功能.兩類活動(dòng)均可選定時(shí)、隱藏、信用值要求、人數(shù)限制、預(yù)約通道的開啟與關(guān)閉、一鍵簽到等定制化功能,方便快捷,應(yīng)用場(chǎng)景多樣.并可根據(jù)相關(guān)技術(shù)進(jìn)一步開發(fā)活動(dòng)室占用情況查詢等深度定制化功能,如圖7和圖8所示.

(5)并Web端頁(yè)面自適應(yīng)：采用視口viewport渲染方法實(shí)現(xiàn)各類設(shè)備頁(yè)面自適應(yīng)——移動(dòng)瀏覽器在渲染W(wǎng)eb頁(yè)面時(shí),首先在視圖viewport中渲染網(wǎng)頁(yè)元素,由于移動(dòng)端屏幕比較小,需要把viewport中內(nèi)容屏幕整體縮小,然后再顯示到屏幕中[21].

于前端代碼文件中標(biāo)簽中添加代碼：

圖7 單場(chǎng)次活動(dòng)管理頁(yè)面

圖8 多場(chǎng)次活動(dòng)管理頁(yè)面

4.4 微信小程序用戶端功能介紹

微信小程序端基礎(chǔ)功能由活動(dòng)模塊、預(yù)約模塊、用戶模塊及收藏模塊組成,通過(guò)HTTPS RESTful API調(diào)取云服務(wù)端數(shù)據(jù)[13],各模塊間相互獨(dú)立又緊密相連.

活動(dòng)模塊可獲得所有現(xiàn)可預(yù)約的活動(dòng)信息,并根據(jù)條件篩選后呈現(xiàn)給用戶(圖9)；預(yù)約模塊用于用戶進(jìn)行預(yù)約等相關(guān)操作,同時(shí)實(shí)現(xiàn)活動(dòng)提醒等功能；用戶模塊用于綁定與修改用戶信息(圖10),實(shí)現(xiàn)微信一鍵登錄；同時(shí)與用戶模塊緊密相聯(lián)的收藏模塊可以顯示相關(guān)活動(dòng).用戶端借助微信小程序云服務(wù)平臺(tái)實(shí)現(xiàn)模板消息、活動(dòng)提醒、綁定公眾號(hào)、一鍵跳轉(zhuǎn)等創(chuàng)新性功能,極大地提升了用戶體驗(yàn).

圖9 活動(dòng)頁(yè)面

5 系統(tǒng)應(yīng)用效果

5.1 微服務(wù)器測(cè)試與上線

平臺(tái)利用樹莓派本地微型服務(wù)器,部署Node測(cè)試環(huán)境,申請(qǐng)?jiān)茢?shù)據(jù)庫(kù)Mlab,實(shí)現(xiàn)系統(tǒng)測(cè)試,進(jìn)行試運(yùn)行,并結(jié)合樹莓派的硬件特點(diǎn),安裝VNC Server幫助開發(fā)與維護(hù).試運(yùn)行過(guò)程中搜集用戶的反饋與建議,提高用戶體驗(yàn)度的同時(shí)可進(jìn)行后臺(tái)數(shù)據(jù)分析.

5.2 阿里云云服務(wù)器上線

平臺(tái)目前使用阿里云輕量應(yīng)用服務(wù)器,使用Ubuntu 16.04系統(tǒng)部署生產(chǎn)環(huán)境并注冊(cè)域名,申請(qǐng)并部署SSL協(xié)議[11],便于用戶訪問(wèn)的同時(shí)保障信息與數(shù)據(jù)安全,為使用HTTPS服務(wù)的RESTful API的微信小程序提供請(qǐng)求接口.截止2019年3月20日,活動(dòng)管理平臺(tái)已有2163名用戶成功注冊(cè),活動(dòng)組織方共發(fā)布活動(dòng)91場(chǎng)次,預(yù)約總量達(dá)4273人次,瀏覽量已突破44 000人次,如圖11所示.

圖10 用戶信息頁(yè)面

圖11 截止2019.3.20統(tǒng)計(jì)數(shù)據(jù)

6 結(jié)語(yǔ)

基于Node.js與微信小程序的活動(dòng)管理平臺(tái)可供各個(gè)高校學(xué)生組織、社團(tuán)推廣使用,以解決類似學(xué)生工作增加活動(dòng)組織者負(fù)擔(dān)等問(wèn)題.同時(shí),該平臺(tái)的推廣使用可大幅度提高學(xué)生與活動(dòng)管理者線上信息查詢、線上活動(dòng)預(yù)約、參與活動(dòng)、管理活動(dòng)的便捷性,將學(xué)生活動(dòng)預(yù)約及管理平臺(tái)與同學(xué)們的日常生活融入到一起,便于實(shí)現(xiàn)活動(dòng)預(yù)約的系統(tǒng)化,減輕學(xué)生工作負(fù)擔(dān),為活動(dòng)管理者與參與者提供便利,從而提高高?；顒?dòng)管理信息化水平,以助力高校通過(guò)各類活動(dòng)培養(yǎng)擔(dān)當(dāng)民族復(fù)興大任的時(shí)代新人.