基于微信小程序的云班课管理系统设计

    张圣筛 梅志虎

    

    

    

    摘 要：为了让教育不再受到时间和空间限制，同时让教学模式更加多样化，互联网与教育开始进行跨界融合，通过信息技术改变教育行业的教学方式及管理模式。设计一个基于微信小程序的云班课管理系统，前端使用JavaScript进行开发，后台使用node.js编写云函数，从而保证信息的安全性。利用Python的Scrapy框架编写爬虫代码，并将其架设在阿里云服务器上实现网络爬虫技术，采用环信的WebSocket实现即时通讯的聊天室功能。利用该小程序进行单元测试，100道测试题只需3s即能显示分数及错题详情。利用微信小程序搭建的学习平台为高校师生创建了一个线上与线下相结合的学习和教学环境，从而让师生不再受到时间与空间限制，因此有着广阔的发展前景。

    关键词：微信小程序;Python爬虫;在线教育

    DOI：10. 11907/rjdk. 201353????????????????????????????????????????????????????????????????? 开放科学（资源服务）标识码（OSID）：

    中图分类号：TP319 ? 文献标识码：A ??????????????? 文章编号：1672-7800（2020）011-0141-05

    The Design of Cloud Class Management System Based on Wechat Small Program

    ZHANG Sheng-shai，MEI Zhi-hu

    （Information Technology College， Shanghai Jian Qiao University， Shanghai 200120，China）

    Abstract：In order to make education no longer limited by time and space， and at the same time to make teaching modes more diversified， Internet and education are merged across borders， and the teaching mode and management mode of the education industry can be changed through information technology. A cloud class management system based on WeChat applet is designed. The front end uses JavaScript for development and the back end uses node.js to write cloud functions， thus ensuring the security of information. The crawler code is written by Pythons scrapy framework， and it is installed on Aliyuns server to realize web crawler technology， and the chat room function of instant messaging is realized using WebSocket with ring letters. By using this small program to carry out unit tests， 100 test questions can display scores and details of wrong questions in just 3 seconds. The learning platform built by WeChat applet has created an online and offline learning and teaching environment for teachers and students in colleges and universities， so that teachers and students are no longer limited by time and space， thus having broad development prospects.

    Key Words： WeChat applet; Python crawler; online education

    0 引言

    隨着教育信息化的迅速发展，在线教育也得到人们的广泛关注。我国在线教育未来发展空间巨大，中国产业调研网发布的2018年中国在线教育行业现状分析与发展趋势预测报告认为，随着在线教育的认可度不断提升，全球在线教育市场将进入新的发展阶段。如今亚马逊、谷歌等互联网巨头相继进入在线教育市场，将对该市场的发展起到巨大的推动作用。随着科技的发展以及新技术的应用，在线教育行业未来可结合在线增值服务和网络广告等新模式，盈利能力将得到进一步提升。

    很多学者也对在线教育平台进行了研究，如林鸿[1]设计的多媒体在线教育平台虽然能够实现课堂教学资源的有效分配，但需要庞大的数据存储空间，且开发成本较高;赵一博等[2]设计的现代网络示范中心混合式在线教育平台虽然能够实现教学信息的传递与交换，但无法有效保障课程资源的安全性等;蒲在毅[3]设计的区域共享的智慧教育平台虽然能够实现对平台服务内容的调度与管理，但其仅能在特定环境下运行，大大降低了用户体验。为避免以上问题的产生，以及推动课堂教学模式改革及在线教学平台的发展，创新教学方式，突破传统教育的局限，本文针对高校学生课前预习、课堂学习、课后复习及考前练习设计一个基于微信小程序的云班课管理系统。微信作为一款为智能终端提供服务的免费应用软件，微信小程序具有小型、便捷、个性化等特点，而且凭借着无需安装、操作简单、安全性高、开发成本低等优势，有助于降低系统开发成本、保障数据安全、提升用户体验等。

    1 系统设计

    运用云服务技术、Python爬虫技术等开发一款方便在校大学生和教师在网络上交流的微信小程序。教师输入工号和密码即可模拟登录学校官网，系统爬取教师课表信息，按照班级自动创建班课;学生输入学号和密码登录，系统爬取学生课表信息，自动进入已创建的班课里，从而避免了手动添加。系统总体框架如图1所示。

    1.1 功能设计

    1.1.1 系统功能

    已授权的微信用户都可创建或删除属于自己的班课，加入或退出别人的班课;所有用户都可下载与浏览课件，以方便课前预习及课后复习;学生可参加教师发布的课堂测试并完成课后作业，系统根据教师提供的答案进行批改，并自动生成成绩及排名;学生可以与教师、同学实时进行群聊，讨论问题;所有用户都能在自己创建的班课里发布课件或测试、修改题库内容、删除违纪学生等。

    1.1.2 教师权限

    教师可以用学校官网账号及密码登录，自动根据自己的课表创建班课。

    1.1.3 学生权限

    学生可以用学校官网账号及密码登录，自动根据课表加入到自己所在教师的班课。

    1.1.4 管理员权限

    系统自动检测用户是否违纪，管理员根据违纪程度对用户进行封号等处理。

    1.2 数据库设计

    1.2.1 数据库概念设计

    描述概念结构需要借助E-R图，用实体集联系的方式反映现实世界事物间的内在联系[3]。根据云班课功能模块设计，得到本系统数据库的实体：用户、班课、活动、课件与题库。云班课总体ER图如图2所示。用户与班课两个实体存在着n：m的关系，用户与活动两个实体存在着n：c的关系，班课与课件两个实体存在着m：n的关系，题库与活动两个实体存在着1：c的关系。

    1.2.2 数据库逻辑设计

    用户（用户ID，姓名，学号，是否违纪，违纪文本，是否为管理员），其中用户ID是主键。

    班课（班号，教师ID，班级名，课程名，班级头像，班级类型），其中班号是主键，教师ID是外键。

    课件（课件ID，课件名，课件大小，课件发布时间，课件头像，课件分组），其中课件ID是主键。

    活动（活动ID，活动名，活动结束时间，经验值，活动分组，活动开始时间，已作答人数），其中活动ID是主键。

    题库（题库ID，分值，题名，选项A，选项B，选项C，选项D，正确选项），其中题库ID是主键。

    1.2.3 数据库物理设计

    根据概念结构设计以及逻辑结构设计，设计物理结构表如表1-表5所示。

    2 关键技术分析

    2.1 微信小程序

    微信小程序于2017年1月9日由腾讯公司正式发布，其具有小型、个性化等特点，而且无需安装、操作简单、开发成本低。微信小程序框架采用MVC开发思想，以及WXML（HTML5）、WXSS（CSS）和JavaScript技术[4]，具有逻辑层、视图层和基础层3层结构。用户无须下载或安装程序便可快捷地获取服務，功能强大，用户体验良好，并且提供了一系列组件和接口，开发快速[5]。

    2.2 BaaS技术

    BaaS（Backend as a Service）是一种新型云服务，可为移动和Web应用提供后端云服务[5]，具体包括以下功能：①信息推送功能。为Android和iOS终端分别提供基于MQTT与APNS技术的可靠、高效的信息推送服务，并保证推送信息到达的及时性与信息传输的准确性[6];②数据处理功能。为移动应用提供了库、表、记录等级别的DDL和DML操作接口，支持多表关联处理和数据批量处理，具备记录导入、导出及检索管理功能;③文件存储功能。为移动业务应用提供灵活的文件存储、上传、下载服务，支持存储配额操作接口，并提供后台统计分析功能;④第三方接入功能。为企业业务应用提供第三方平台（新浪微博、微信、QQ）接入，支持接入授权，快速降低应用注册门槛，方便用户快捷登录[7]。

    2.3 网络爬虫技术

    网络爬虫（又称为网页蜘蛛、网络机器人，在FOAF社区中常被称为网页追逐者）是一种按照一定规则自动抓取万维网信息的程序或脚本。该系统主要用到Spide类，Spider类定义了如何爬取某个网站，包括爬取动作以及如何从网页内容中提取结构化数据，并对网页进行分析。

    具体步骤如下：以初始的URLRequest设置回调函数，当该requeset下载完毕并返回时，生成response，将其作为参数传递给回调函数;spider中初始的request通过start_requests（）获取start_urls中的URL，并利用parse回调函数生成Request;在回调函数中分析返回的网页内容，可以返回item对象、Dict或Request，或一个包含三者的可迭代的容器;返回的Request对象之后会经过Scrapy处理，下载相应内容，并调用设置的callback函数;在回调函数中可通过lxml、bs4、xpath、css等方法获取想要的内容，生成item;最后将item传送给pipeline进行处理。

    2.4 实时通讯WebSocket协议

    WebSocket协议是基于TCP的一种新的应用层网络协议[9]，其实现了浏览器与服务器全双工（full-duplex）通信——允许服务器主动发送信息给客户端。有别于HTTP协议，HTTP协议只能实现单工通信，如图3所示。通过微信开发文档提供的官方API[10]，首先新建WebSocket 实例，WebSocket 对象作为一个构造函数，将客户端与服务器进行连接，每次进入聊天页面必须调用wx.onSocketOpen（）监听 WebSocket 连接打开事件[11];在连接成功的回调函数里调用wx.sendSocketMessage（），通过WebSocket 连接发送数据;退出聊天后，wx.onSocketClose（）监听 WebSocket 连接关闭事件。

    3 同类产品比较

    与蓝墨云APP等同类产品相比，本系统作为一款微信小程序，具有如下优势：首先，该程序无需安装，可随时使用，操作简单便捷;其次，系统无需频繁登录，只需首次登录时进行个人身份认证，之后便能直接进入个人管理系统;最后，在本系统中高校学生和教师无需手动添加课程，使用更加便捷。产品特性比较情况如表6所示。

    4 主要功能模块实现

    4.1 上传文件功能

    该功能主要运用微信小程序的MVC框架开发思想，以及逻辑层与视图层的数据交互功能，通过base64将图片显示在wxml视图层。

    上传文件主要步骤如下：先用微信原生接口wx.chooseMessageFile（）[12]获取本地文件临时路径，再调用知晓云数据库用于上传文件的API，将文件添加到内容库中，在成功的回调函数中获取文件网络路径，显示在前端，关键代码如下：

    ……

    wx.chooseMessageFile（{? ? ? ? ? ?//选择文件微信小程序原生接口

    count： 1，? ? ? ? ? ? ? ? ? ? ?//选择文件数量

    type： ‘file，? ? ? ? ? ? ? ? ? ?//选择文件类型

    success（res） {? ? ? ? ? ? ? ? //成功的回调函数

    let MyFile = new wx.BaaS.File（）? //获取云服务对象

    ……

    MyFile.upload（fileParams， metaData）. then（re => {? //将文件路径添加到课件文件库

    }， err => {

    // HError 对象

    ……

    4.2 爬虫功能

    该功能主要采用Python语言实现，其中的Scrapy应用框架可爬取网站数据，并提取结构性数据。将其架设在阿里云服务器上，通过wx. Requeset原生接口请求函数计算生成的API。

    利用Python语言爬取学校官网课表信息，在手机端模拟登录官网获取课表信息，主要步骤如下：以初始的URLRequest通过get或post方法设置回调函数;当该requeset下载完毕并返回时，生成response，并作为参数传递给回调函数;在回调函数内分析返回的网页内容，返回的Request对象经过Scrapy处理，下载相应内容;再通過lxml、bs4、xpath、 css等方法获取想要的内容，生成item。关键代码如下：

    ……

    url = “http：//jwxt.gench.edu.cn/eams/courseTableForStd.action”

    //需要访问的网页URL

    ……

    page = self.client.get（url，headers=headers）? //get方法获取该网页的response

    //判断是否本学期还未注册

    if “未注册” in page.text：

    reg = “[^＼x00-＼xff]”? // 匹配包含星期和节次的字符串

    ……

    data = {? ? ?//访问的官网参数

    ……

    }

    url = “http：//jwxt.gench.edu.cn/eams/courseTableForStd！courseTable.action”

    //需要访问的网页URL

    res = self.client.post（url=url， data=data）? //利用post方法获取该网页的response

    ……

    for i， item in enumerate（class_course）：? //去重

    if class_course[i] not in temp_class_course：

    temp_class_course.append（class_course[i]）

    ……

    return news_class_course? ?//返回课程信息

    4.3 课表导入题库功能

    采用node.js语言，利用知晓云后臺的云函数实现该功能[13]。先用微信原生接口wx.chooseMessageFile（）获取本地指定的csv表格临时路径，再调用知晓云数据库用于上传文件的API，将表格添加到内容库中，在成功的回调函数中获取表格网络路径，将表格中的数据存入数据库中，根据新添加的数据更新题库的外键活动ID，关键代码如下：

    ……

    var activity_id=event.data.activity_id? //活动ID

    let MyTable = new BaaS.TableObject（79622）? //设置活动表对象

    MyTable.importData（{dataFileUrl：event.data.url}， ‘csv）.then（res => { //上传表格URL到内容库中

    if（res.data.status==“ok”）{? //判断表格上传成功

    ……

    Product.setQuery（query）.find（）.then（res => {? //获取新添加的数据

    ……

    temp.forEach（（it， i） => {? //循环的新数据，添加活动ID

    ……

    product.update（）.then（res => { //将活动ID更新到数据表中

    callback（null，“success”）//成功，返回success

    }， err => {

    callback（null，err） //失败，返回err原因

    ……

    5 结语

    本文提出的基于微信小程序的云班课管理系统为高校师生创建了一个线上与线下相结合的学习和教学平台，可为学生提供在线考试、课件分享、交流讨论等功能，为教师提供课程创建、课件上传、测试发布等功能[14]。但该平台的不足之处是没有直播功能，今后将对其进一步完善。综上所述，随着未来教育信息化的发展，在家进行移动办公学习将更加普及，几乎所有事情都可以进行远程操作。因此，该平台具有较高的应用价值，有着广阔的发展前景。

    参考文献：

    [1] 林鸿. 多媒体在线教育平台的设计与实践[J]. 科技传播， 2018， 10（23）：78-79.

    [2] 赵一博，刘俊男. 现代网络示范中心混合式在线教育平台系统设计与实现[J]. 计算机产品与流通，2018（3）：146-147.

    [3] 蒲在毅. 基于区域共享的智慧教育平台的设计与实现[J]. 软件，2019，40（4）：91-93.

    [4] 荣蓉. 实战微信小程序：JavaScript，WXML与Flexbox综合开发[M]. 北京：电子工业出版社，2017.

    [5] 刘刚. 小程序实战视频课：微信小程序开发全案精讲[M].? 北京：人民邮电出版社，2018

    [6] 百度百科.BaaS[EB/OL]. https：//baike.baidu.com/item/BaaS/271609？fr=aladdin.

    [7] 百度百科. 网络爬虫[EB/OL]. https：//baike.baidu.com/item/网络爬虫/5162711？fr=aladdin.

    [8] 田智雁，张晓丽，梁波. 基于微信小程序的学生家校信息系统设计与实现[J]. 软件导刊，2018，17 （9）： 122-124.

    [9] 搜狗百科. WebSocket[EB/OL]. https：//baike.sogou.com/v69389944.htm？fromTitle=WebSocket.

    [10] 王延平. 21天精通微信小程序开发[M]. 北京：电子工业出版社，2017.

    [11] 刘刚. 微信小程序开发图解案例教程[M]. 北京：人民邮电出版社，2017.

    [12] 王娟. 微信小程序在高校教学中的应用与推广[J]. 电脑知识与技术，2017，13（27）：147-148.

    [13] 基夫·莫里斯. 基础设施即代码：云服务器管理[M]. 北京：人民邮电出版社，2018.

    [14] 黄曦，沙拉依丁·苏里坦. 微信小程序开发快速入门[M]. 北京：电子工业出版社，2017.

    （责任编辑：黄 健）