2019, Vol. 28
2. 中国地质大学(北京) 地球物理与信息技术学院, 北京 100083;
3. 中国地质大学(北京) 信息工程学院, 北京 100083
2. School of Geophysics and Information Technology, China University of Geosciences Beijing, Beijing 100083, Chain;
3. School of Information Engineering, China University of Geosciences Beijing, Beijing 100083, Chain
运随着时代的发展, 大学生课余活动不断丰富、多种多样, 活动种类主要包括: 网络活动、志愿活动、体育文化活动、学习交流活动、职业规划与心理健康课外活动等[1]. 且目前大多数供大学生报名参与活动的预约方式主要为: 通过问卷星系统制作调查问卷、指定手机App预约、公众号跳转网页预约、人工预约等, 存在功能受限、定制性差、面向对象单一、负责人工作量大等问题.
微信小程序作为一种不需要安装即可使用的应用程序, 方便简洁. 对用户而言, 微信小程序同微信相挂钩, “扫一扫”即可打开应用, 使用起来极为方便; 对于开发者而言, 开发及使用不受系统环境限制; 此外, 微信小程序亦可与公众号完美嵌合, 适合高校学生活动的组织、宣传与预约, 为同学们获取信息参与及组织活动提供了极大的便利, 可借助社团、学生组织快速推广使用, 可实现快速覆盖在校学生, 以帮助高校学生工作更好地开展, 打造高校特色化活动管理系统[2].
2 系统研究依据 2.1 系统优势微信小程序依附于微信国民级的聊天工具, 具有“打开即用、用完即走、不用下载”的特点[3], 以及微信10亿用户的天然优势, 它的灵活性让它可以基于场景聚合各种服务. 微信小程序是一种全新的连接用户与服务的方式, 它可以在微信内被便捷地获取和传播, 同时具有出色的使用体验[4,5].
2.2 改需求与可行性分析与现有类似研究相比, 已上线的具有预约功能的小程序与应用程序功能较为单一, 页面繁杂, 用户体验与信息保密性差[6–10]. 结合高校需求, 活动管理平台功能需包括完整的用户功能、活动功能与管理员功能的同时, 结合高校学生活动特色与活动组织模式, 设计并完善平台功能, 满足以下功能需求:
(1)活动管理平台需具有较高的安全性, 保障用户隐私的同时需满足微信小程序接口请求的安全性要求, 故通过邮箱验证、前后端分离、HTTPS协议与RESTful API接口通信满足安全性需要[11–14];
(2)用户端、活动组织方端、管理员端分离, 有效避免权限越界、隐私泄露等问题, 用户端采用微信小程序框架开发, 管理员与活动组织方端采用Node.js+express+MongoDB框架开发;
(3)营造良好的用户交互体验, 采用嵌入式JavaScript模板引擎EJS, 借助Semantic-UI+jQurey插件进行页面开发, 实现布局、样式美观且统一[15,16], 采用视口viewport渲染方法实现各类设备页面自适应;
(4)提供连续稳定服务, 部署云端服务器时采用PM2进程管理工具, 永久保持应用程序活跃, 无需停机即可重新加载程序, 同时进行终端性能监控、自动重启、负载均衡以及服务器重启自动部署等运维功能[17].
3 系统框架概述 3.1 微信小程序框架微信小程序在技术构架上可分为视图层、逻辑层、系统层3个部分(图1), 可使用微信云服务平台提供的API进行核心业务开发, 实现快速上线和迭代, 同时与开发者搭建的云服务相互兼容, 互不排斥[5]. 微信小程序开发过程中另一关键技术为组件化开发, 使UI界面在设计风格上达到统一, 降低了微信小程序的升级、维护难度, 保证了用户体验质量[5].
|
图 1 微信小程序App service逻辑层示意图 |
3.2 Node.js+express+MongoDB后端框架
Express是一个基于Node.js的服务端开发框架, 拥有强大的路由、多模块支持等特性[18]. 采用Promise函数作为抽象异步处理对象以及对其进行各种操作的组件, 避免层层嵌套回调, 将复杂的异步处理轻松地进行模式化. MongoDB为分布式文件存储的非关系型数据库, 具有良好的数据安全性, 高并发、高拓展、速度快、成本低[19–21]. 同时便于微信小程序以及前后端的通讯, 采用以统一的接口为Web、IOS和Android前、后端提供便捷通信服务的RESTful API, 提供丰富的功能接口的同时充分保障数据的安全性[13].
4 系统设计与实现 4.1 系统数据流分析微信小程序的数据主要包括用户个人信息与活动数据. 用户在小程序端发生的交互动作与活动方与活动管理平台的交互是业务的数据来源, 根据用户使用行为和系统的架构分析, 业务流的数据处理主要由客户端和活动管理平台完成[6].
如图2所示, 用户可以通过微信小程序端请求活动信息并发送个人信息, 进行活动预约与取消等操作. 活动管理平台接收到用户的行为请求, 在控制层进行相应的业务处理, 并将处理结果以页面展示的方式返回给用户. 在用户成功预约活动后, 活动管理平台会将参加者姓名、人数等信息以页面展示的形式反馈给活动方, 并提供导出Excel数据表等拓展功能按钮, 使活动方能及时在活动管理平台了解活动开展情况. 当活动方需要修改活动信息或活动状态时, 活动方可对已发布的活动进行修改. 系统管理员可实时监控用户与活动方行为, 查看操作记录并进行相关管理操作.
4.2 系统功能介绍活动管理平台开发以RESTful API为通信桥梁的微信小程序用户端与Web活动方与管理员后端, 根据大学生活动现状、活动组织者需求定制功能, 如图3.
基础功能包括: 单场次活动发布与预约、隐藏活动、取消预约、一键签到、缺勤标记、活动场次、预约量、浏览量、参与率等数据分析统计、个人活动详情与主页、注册与校网邮箱激活验证、登录与cookie、头像、信息绑定、修改与找回密码等功能.
|
图 2 系统业务数据流示意图 |
|
图 3 活动管理平台功能示意图 |
高级功能包括: 多场次日期预约型活动发布与预约、分页与标签、二维码扫一扫签到、定时开启活动预约通道、预约信息导出Excel数据表、权限分级与权限管理、信用分与信用管理、多类型搜索等; 其余基本实现框架或即将实现的功能: 活动评论、话题发布、活动室占用情况查询与状态变更等.
4.3 特色功能介绍(1)邮箱验证: 邮箱验证功能借助express框架nodemailer组件实现. 通过该功能可以确保注册用户为高校师生, 充分保证用户隐私安全. 未验证的用户登录时, 将跳转至激活验证页(图4), 发送验证邮件后可于邮箱查收(见图5). 找回密码功能与验证激活功能实现方式类似. 该模块关键代码如下:
|
图 4 验证页面激活 |
|
图 5 邮箱验证邮件图 |
// 引入nodemailer组件
var nodemailer = require('nodemailer');
// 创建SMTP客户端配置
var config={
host: 'smtp.163.com', port: 465, auth: {user: '邮箱账号', pass: '授权码'}
};
// 创建SMTP客户端对象
var transporter=nodemailer. createTransport(config);
// 发送邮件功能实现
module. exports=function (mail) {
transporter. sendMail(mail, function (error, info) {
if (error) {return console. log(error)}
console. log('mail sent:', info. response);
})
};
(2)二维码相关功能: 二维码相关功能包括二维码分享与二维码签到(图6)两部分, 通过express框架qr-image组件与cookie结合实现, 具有定时失效、免登录签到等特性. 管理员开始活动后可以通过二维码签到功能进行简单便捷的签到操作. 该模块关键代码如下:
|
图 6 签到二维码页面 |
// 引入qr-image组件
var qr=require('qr-image');
// 创建并生成二维码
var code=qr. image('内容',{type: 'png'});
code. pipe(res);
使用该模块时, 可直接通过前端文件(ejs等)在标签中添加图片索引代码<img src="内容" alt="qrcode">的方式进行调用.
二维码签到页面自动刷新功能需于前端代码文件中<head>标签中添加代码实现, 如下:
<meta http-equiv="refresh" content="30"/>
(3)导出Excel数据表: 活动预约数据导出Excel数据表功能通过express框架excel-export模块实现, 管理员可将活动预约信息导出为Excel数据表, 极大地提高了工作效率与数据统计与分析能力.
该模块关键代码如下:
// 引入excel-export模块
var nodeExcel=require('excel-export');
// 获取导出数据
var conf={}
conf. name='mysheet'
conf. cols=[
{caption: '序号', type: 'number'}]
// 设置导出格式
var array=new Array(0)
// eslint-disable-next-line no-unused-vars
var title='无人报名'
if (data[1]&&label!=='志愿活动') {
for (var i=0; i<data[1]; i++) {
var temp=new Array(0)
array. push(temp)
}
conf. rows=array
title=data[0][0]. postTitle
// 导出Excel表格
var result = nodeExcel. execute(conf);
var name = encodeURI(title+'表名');
res. setHeader('Content-Disposition','attachment; filename='+name+'. xlsx');
res. setHeader('Content-Type', 'application/vnd. openxmlformats; charset=utf-8');
res. end(result, 'binary');
在该模块代码编写时需要注意应添加代码res. setHeader('Content-Type', 'application/vnd. openxmlformats; charset=utf-8') 以准许汉字输出.
(4)单场次活动与日期预约(多场次)活动: 根据大活动管理需求, 定制开发单场次活动与日期预约活动两大类活动的发布、预约与管理功能. 两类活动均可选定时、隐藏、信用值要求、人数限制、预约通道的开启与关闭、一键签到等定制化功能, 方便快捷, 应用场景多样. 并可根据相关技术进一步开发活动室占用情况查询等深度定制化功能, 如图7和图8所示.
(5)并Web端页面自适应: 采用视口viewport渲染方法实现各类设备页面自适应——移动浏览器在渲染Web页面时, 首先在视图viewport中渲染网页元素, 由于移动端屏幕比较小, 需要把viewport中内容屏幕整体缩小, 然后再显示到屏幕中[21].
于前端代码文件中<head>标签中添加代码:
<meta charset="utf-8"/>
<meta name="viewport" content=" initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
|
图 7 单场次活动管理页面 |
|
图 8 多场次活动管理页面 |
4.4 微信小程序用户端功能介绍
微信小程序端基础功能由活动模块、预约模块、用户模块及收藏模块组成, 通过HTTPS RESTful API调取云服务端数据[13], 各模块间相互独立又紧密相连.
活动模块可获得所有现可预约的活动信息, 并根据条件筛选后呈现给用户(图9); 预约模块用于用户进行预约等相关操作, 同时实现活动提醒等功能; 用户模块用于绑定与修改用户信息(图10), 实现微信一键登录; 同时与用户模块紧密相联的收藏模块可以显示相关活动. 用户端借助微信小程序云服务平台实现模板消息、活动提醒、绑定公众号、一键跳转等创新性功能, 极大地提升了用户体验.
|
图 9 活动页面 |
5 系统应用效果 5.1 微服务器测试与上线
平台利用树莓派本地微型服务器, 部署Node测试环境, 申请云数据库Mlab, 实现系统测试, 进行试运行, 并结合树莓派的硬件特点, 安装VNC Server帮助开发与维护. 试运行过程中搜集用户的反馈与建议, 提高用户体验度的同时可进行后台数据分析.
5.2 阿里云云服务器上线平台目前使用阿里云轻量应用服务器, 使用Ubuntu 16.04系统部署生产环境并注册域名, 申请并部署SSL协议[11], 便于用户访问的同时保障信息与数据安全, 为使用HTTPS服务的RESTful API的微信小程序提供请求接口. 截止2019年3月20日, 活动管理平台已有2163名用户成功注册, 活动组织方共发布活动91场次, 预约总量达4273人次, 浏览量已突破44 000人次, 如图11所示.
|
图 10 用户信息页面 |
|
图 11 截止2019.3.20统计数据 |
6 结语
基于Node.js与微信小程序的活动管理平台可供各个高校学生组织、社团推广使用, 以解决类似学生工作增加活动组织者负担等问题. 同时, 该平台的推广使用可大幅度提高学生与活动管理者线上信息查询、线上活动预约、参与活动、管理活动的便捷性, 将学生活动预约及管理平台与同学们的日常生活融入到一起, 便于实现活动预约的系统化, 减轻学生工作负担, 为活动管理者与参与者提供便利, 从而提高高校活动管理信息化水平, 以助力高校通过各类活动培养担当民族复兴大任的时代新人.
| [1] |
苏凯. 大学生课余时间活动调查. 教育与职业, 2014(7): 39-41. DOI:10.3969/j.issn.1004-3985.2014.07.012 |
| [2] |
Sinn D, Kim S, Syn S Y. Information activities within information horizons: A case for college students’ personal information management. Library & Information Science Research, 2019, 41(1): 19-30. |
| [3] |
查晓俊, 成刚, 杨玉志. 基于微信小程序的医疗设备管理系统设计与实现. 中国医疗设备, 2018, 33(5): 125-129. DOI:10.3969/j.issn.1674-1633.2018.05.034 |
| [4] |
Liu C J, Wechsler H. Gabor feature based classification using the enhanced Fisher linear discriminant model for face recognition. IEEE Transactions on Image Processing, 2002, 11(4): 467-476. DOI:10.1109/TIP.2002.999679 |
| [5] |
陈小龙. 微信公众平台开发实战与应用案例. 北京: 清华大学出版社, 2015. 25.
|
| [6] |
袁嘉欣, 马佳琳. 基于JSP的大学生活动管理平台的设计与实现. 软件工程, 2019, 22(1): 43-46. |
| [7] |
李成. 基于WEB标准的校园活动预约平台的设计与实现. 长沙民政职业技术学院学报, 2013, 20(4): 154-156. |
| [8] |
黄荣, 陈来斌, 郭雪微, 等. 基于微信小程序的校园助手设计与实现. 齐齐哈尔大学学报(自然科学版), 2018, 34(6): 41-43. DOI:10.3969/j.issn.1007-984X.2018.06.009 |
| [9] |
陈国通, 刘琪, 范圆圆. 基于微信小程序的家政服务预约系统设计与实现. 信息通信, 2019(2): 122-124. |
| [10] |
全国高校共青团" 第二课堂成绩单”网络管理系统(到梦空间)使用培训座谈会在北京科技大学圆满召开. 北京青年工作研究, 2016, (9): 68–69.
|
| [11] |
Rodriguez M. HTTPS everywhere: Industry trends and the need for encryption. Serials Review, 2018, 44(2): 131-137. DOI:10.1080/00987913.2018.1472478 |
| [12] |
Neumann A, Laranjeiro N, Bernardino J. An analysis of public REST web service APIs. IEEE Transactions on Services Computing, 2018. DOI:10.1109/TSC.2018.2847344 |
| [13] |
Segura S, Parejo J A, Troya J, et al. Metamorphic testing of RESTful web APIs. IEEE Transactions on Software Engineering, 2018, 44(11): 1083-1099. DOI:10.1109/TSE.2017.2764464 |
| [14] |
朱玉强. 微信小程序在图书馆移动服务中的应用实践——以排架游戏为例. 图书馆论坛, 2017, 37(7): 132-138. |
| [15] |
杨琳. 基于Node.js设计与实现的多模型内容管理系统[硕士学位论文]. 长沙: 湖南大学, 2016.
|
| [16] |
Khriyenko O. Semantic UI: Automated creation of semantically personalized user interface. GSTF Journal on Computing, 2015, 4(3): 42-50. |
| [17] |
胡腾. 面向进程管理器的数据库引擎触发机制的设计与实现[硕士学位论文]. 哈尔滨: 哈尔滨工业大学, 2014.
|
| [18] |
王伶俐, 张传国. 基于NodeJS+Express框架的轻应用定制平台的设计与实现. 计算机科学, 2017, 44(11A): 596-599. DOI:10.11896/j.issn.1002-137X.2017.11A.128 |
| [19] |
朱爱华, 付曹政, 曹钟, 等. 基于Node.js框架和MongoDB数据库的物流信息服务系统设计. 北京建筑大学学报, 2018, 34(4): 41-46. DOI:10.19740/j.1004-6011.2018.04.07 |
| [20] |
Kanoje S, Powar V, Mukhopadhyay D. Using MongoDB for social networking website deciphering the pros and cons. Proceedings of the IEEE Sponsored 2nd International Conference on Innovations in Information Embedded and Communication Systems. Coimbatore, India. 2015.
|
| [21] |
印泽霖. 移动端Web页面自适应性研究. 电脑迷, 2017(21): 247-249. DOI:10.3969/j.issn.1672-528X.2017.21.235 |