基于Node.js與微信小程序的活動管理平臺①

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

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

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

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

1 引言

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

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

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

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

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

2.2 改需求與可行性分析

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

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

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

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

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

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

3.1 微信小程序框架

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

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

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

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

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

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

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

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

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

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

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

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

圖3 活動管理平臺功能示意圖

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

4.3 特色功能介紹

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

圖4 驗證頁面激活

圖5 郵箱驗證郵件圖

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

圖6 簽到二維碼頁面

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

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

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

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

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

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

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

圖7 單場次活動管理頁面

圖8 多場次活動管理頁面

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

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

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

圖9 活動頁面

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

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

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

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

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

圖10 用戶信息頁面

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

6 結(jié)語

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