基于微信小程序的云班課管理系統(tǒng)設(shè)計(jì)

張圣篩 梅志虎

摘 要：為了讓教育不再受到時(shí)間和空間限制，同時(shí)讓教學(xué)模式更加多樣化，互聯(lián)網(wǎng)與教育開始進(jìn)行跨界融合，通過信息技術(shù)改變教育行業(yè)的教學(xué)方式及管理模式。設(shè)計(jì)一個(gè)基于微信小程序的云班課管理系統(tǒng)，前端使用JavaScript進(jìn)行開發(fā)，后臺(tái)使用node.js編寫云函數(shù)，從而保證信息的安全性。利用Python的Scrapy框架編寫爬蟲代碼，并將其架設(shè)在阿里云服務(wù)器上實(shí)現(xiàn)網(wǎng)絡(luò)爬蟲技術(shù)，采用環(huán)信的WebSocket實(shí)現(xiàn)即時(shí)通訊的聊天室功能。利用該小程序進(jìn)行單元測(cè)試，100道測(cè)試題只需3s即能顯示分?jǐn)?shù)及錯(cuò)題詳情。利用微信小程序搭建的學(xué)習(xí)平臺(tái)為高校師生創(chuàng)建了一個(gè)線上與線下相結(jié)合的學(xué)習(xí)和教學(xué)環(huán)境，從而讓師生不再受到時(shí)間與空間限制，因此有著廣闊的發(fā)展前景。

關(guān)鍵詞：微信小程序;Python爬蟲;在線教育

DOI：10. 11907/rjdk. 201353????????????????????????????????????????????????????????????????? 開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

中圖分類號(hào)：TP319 ? 文獻(xiàn)標(biāo)識(shí)碼：A ??????????????? 文章編號(hào)：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 引言

隨著教育信息化的迅速發(fā)展，在線教育也得到人們的廣泛關(guān)注。我國在線教育未來發(fā)展空間巨大，中國產(chǎn)業(yè)調(diào)研網(wǎng)發(fā)布的2018年中國在線教育行業(yè)現(xiàn)狀分析與發(fā)展趨勢(shì)預(yù)測(cè)報(bào)告認(rèn)為，隨著在線教育的認(rèn)可度不斷提升，全球在線教育市場(chǎng)將進(jìn)入新的發(fā)展階段。如今亞馬遜、谷歌等互聯(lián)網(wǎng)巨頭相繼進(jìn)入在線教育市場(chǎng)，將對(duì)該市場(chǎng)的發(fā)展起到巨大的推動(dòng)作用。隨著科技的發(fā)展以及新技術(shù)的應(yīng)用，在線教育行業(yè)未來可結(jié)合在線增值服務(wù)和網(wǎng)絡(luò)廣告等新模式，盈利能力將得到進(jìn)一步提升。

很多學(xué)者也對(duì)在線教育平臺(tái)進(jìn)行了研究，如林鴻[1]設(shè)計(jì)的多媒體在線教育平臺(tái)雖然能夠?qū)崿F(xiàn)課堂教學(xué)資源的有效分配，但需要龐大的數(shù)據(jù)存儲(chǔ)空間，且開發(fā)成本較高;趙一博等[2]設(shè)計(jì)的現(xiàn)代網(wǎng)絡(luò)示范中心混合式在線教育平臺(tái)雖然能夠?qū)崿F(xiàn)教學(xué)信息的傳遞與交換，但無法有效保障課程資源的安全性等;蒲在毅[3]設(shè)計(jì)的區(qū)域共享的智慧教育平臺(tái)雖然能夠?qū)崿F(xiàn)對(duì)平臺(tái)服務(wù)內(nèi)容的調(diào)度與管理，但其僅能在特定環(huán)境下運(yùn)行，大大降低了用戶體驗(yàn)。為避免以上問題的產(chǎn)生，以及推動(dòng)課堂教學(xué)模式改革及在線教學(xué)平臺(tái)的發(fā)展，創(chuàng)新教學(xué)方式，突破傳統(tǒng)教育的局限，本文針對(duì)高校學(xué)生課前預(yù)習(xí)、課堂學(xué)習(xí)、課后復(fù)習(xí)及考前練習(xí)設(shè)計(jì)一個(gè)基于微信小程序的云班課管理系統(tǒng)。微信作為一款為智能終端提供服務(wù)的免費(fèi)應(yīng)用軟件，微信小程序具有小型、便捷、個(gè)性化等特點(diǎn)，而且憑借著無需安裝、操作簡單、安全性高、開發(fā)成本低等優(yōu)勢(shì)，有助于降低系統(tǒng)開發(fā)成本、保障數(shù)據(jù)安全、提升用戶體驗(yàn)等。

1 系統(tǒng)設(shè)計(jì)

運(yùn)用云服務(wù)技術(shù)、Python爬蟲技術(shù)等開發(fā)一款方便在校大學(xué)生和教師在網(wǎng)絡(luò)上交流的微信小程序。教師輸入工號(hào)和密碼即可模擬登錄學(xué)校官網(wǎng)，系統(tǒng)爬取教師課表信息，按照班級(jí)自動(dòng)創(chuàng)建班課;學(xué)生輸入學(xué)號(hào)和密碼登錄，系統(tǒng)爬取學(xué)生課表信息，自動(dòng)進(jìn)入已創(chuàng)建的班課里，從而避免了手動(dòng)添加。系統(tǒng)總體框架如圖1所示。

1.1 功能設(shè)計(jì)

1.1.1 系統(tǒng)功能

已授權(quán)的微信用戶都可創(chuàng)建或刪除屬于自己的班課，加入或退出別人的班課;所有用戶都可下載與瀏覽課件，以方便課前預(yù)習(xí)及課后復(fù)習(xí);學(xué)生可參加教師發(fā)布的課堂測(cè)試并完成課后作業(yè)，系統(tǒng)根據(jù)教師提供的答案進(jìn)行批改，并自動(dòng)生成成績及排名;學(xué)生可以與教師、同學(xué)實(shí)時(shí)進(jìn)行群聊，討論問題;所有用戶都能在自己創(chuàng)建的班課里發(fā)布課件或測(cè)試、修改題庫內(nèi)容、刪除違紀(jì)學(xué)生等。

1.1.2 教師權(quán)限

教師可以用學(xué)校官網(wǎng)賬號(hào)及密碼登錄，自動(dòng)根據(jù)自己的課表創(chuàng)建班課。

1.1.3 學(xué)生權(quán)限

學(xué)生可以用學(xué)校官網(wǎng)賬號(hào)及密碼登錄，自動(dòng)根據(jù)課表加入到自己所在教師的班課。

1.1.4 管理員權(quán)限

系統(tǒng)自動(dòng)檢測(cè)用戶是否違紀(jì)，管理員根據(jù)違紀(jì)程度對(duì)用戶進(jìn)行封號(hào)等處理。

1.2 數(shù)據(jù)庫設(shè)計(jì)

1.2.1 數(shù)據(jù)庫概念設(shè)計(jì)

描述概念結(jié)構(gòu)需要借助E-R圖，用實(shí)體集聯(lián)系的方式反映現(xiàn)實(shí)世界事物間的內(nèi)在聯(lián)系[3]。根據(jù)云班課功能模塊設(shè)計(jì)，得到本系統(tǒng)數(shù)據(jù)庫的實(shí)體：用戶、班課、活動(dòng)、課件與題庫。云班課總體ER圖如圖2所示。用戶與班課兩個(gè)實(shí)體存在著n：m的關(guān)系，用戶與活動(dòng)兩個(gè)實(shí)體存在著n：c的關(guān)系，班課與課件兩個(gè)實(shí)體存在著m：n的關(guān)系，題庫與活動(dòng)兩個(gè)實(shí)體存在著1：c的關(guān)系。

1.2.2 數(shù)據(jù)庫邏輯設(shè)計(jì)

用戶（用戶ID，姓名，學(xué)號(hào)，是否違紀(jì)，違紀(jì)文本，是否為管理員），其中用戶ID是主鍵。

班課（班號(hào)，教師ID，班級(jí)名，課程名，班級(jí)頭像，班級(jí)類型），其中班號(hào)是主鍵，教師ID是外鍵。

課件（課件ID，課件名，課件大小，課件發(fā)布時(shí)間，課件頭像，課件分組），其中課件ID是主鍵。

活動(dòng)（活動(dòng)ID，活動(dòng)名，活動(dòng)結(jié)束時(shí)間，經(jīng)驗(yàn)值，活動(dòng)分組，活動(dòng)開始時(shí)間，已作答人數(shù)），其中活動(dòng)ID是主鍵。

題庫（題庫ID，分值，題名，選項(xiàng)A，選項(xiàng)B，選項(xiàng)C，選項(xiàng)D，正確選項(xiàng)），其中題庫ID是主鍵。

1.2.3 數(shù)據(jù)庫物理設(shè)計(jì)

根據(jù)概念結(jié)構(gòu)設(shè)計(jì)以及邏輯結(jié)構(gòu)設(shè)計(jì)，設(shè)計(jì)物理結(jié)構(gòu)表如表1-表5所示。

2 關(guān)鍵技術(shù)分析

2.1 微信小程序

微信小程序于2017年1月9日由騰訊公司正式發(fā)布，其具有小型、個(gè)性化等特點(diǎn)，而且無需安裝、操作簡單、開發(fā)成本低。微信小程序框架采用MVC開發(fā)思想，以及WXML（HTML5）、WXSS（CSS）和JavaScript技術(shù)[4]，具有邏輯層、視圖層和基礎(chǔ)層3層結(jié)構(gòu)。用戶無須下載或安裝程序便可快捷地獲取服務(wù)，功能強(qiáng)大，用戶體驗(yàn)良好，并且提供了一系列組件和接口，開發(fā)快速[5]。

2.2 BaaS技術(shù)

BaaS（Backend as a Service）是一種新型云服務(wù)，可為移動(dòng)和Web應(yīng)用提供后端云服務(wù)[5]，具體包括以下功能：①信息推送功能。為Android和iOS終端分別提供基于MQTT與APNS技術(shù)的可靠、高效的信息推送服務(wù)，并保證推送信息到達(dá)的及時(shí)性與信息傳輸?shù)臏?zhǔn)確性[6];②數(shù)據(jù)處理功能。為移動(dòng)應(yīng)用提供了庫、表、記錄等級(jí)別的DDL和DML操作接口，支持多表關(guān)聯(lián)處理和數(shù)據(jù)批量處理，具備記錄導(dǎo)入、導(dǎo)出及檢索管理功能;③文件存儲(chǔ)功能。為移動(dòng)業(yè)務(wù)應(yīng)用提供靈活的文件存儲(chǔ)、上傳、下載服務(wù)，支持存儲(chǔ)配額操作接口，并提供后臺(tái)統(tǒng)計(jì)分析功能;④第三方接入功能。為企業(yè)業(yè)務(wù)應(yīng)用提供第三方平臺(tái)（新浪微博、微信、QQ）接入，支持接入授權(quán)，快速降低應(yīng)用注冊(cè)門檻，方便用戶快捷登錄[7]。

2.3 網(wǎng)絡(luò)爬蟲技術(shù)

網(wǎng)絡(luò)爬蟲（又稱為網(wǎng)頁蜘蛛、網(wǎng)絡(luò)機(jī)器人，在FOAF社區(qū)中常被稱為網(wǎng)頁追逐者）是一種按照一定規(guī)則自動(dòng)抓取萬維網(wǎng)信息的程序或腳本。該系統(tǒng)主要用到Spide類，Spider類定義了如何爬取某個(gè)網(wǎng)站，包括爬取動(dòng)作以及如何從網(wǎng)頁內(nèi)容中提取結(jié)構(gòu)化數(shù)據(jù)，并對(duì)網(wǎng)頁進(jìn)行分析。

具體步驟如下：以初始的URLRequest設(shè)置回調(diào)函數(shù)，當(dāng)該requeset下載完畢并返回時(shí)，生成response，將其作為參數(shù)傳遞給回調(diào)函數(shù);spider中初始的request通過start_requests（）獲取start_urls中的URL，并利用parse回調(diào)函數(shù)生成Request;在回調(diào)函數(shù)中分析返回的網(wǎng)頁內(nèi)容，可以返回item對(duì)象、Dict或Request，或一個(gè)包含三者的可迭代的容器;返回的Request對(duì)象之后會(huì)經(jīng)過Scrapy處理，下載相應(yīng)內(nèi)容，并調(diào)用設(shè)置的callback函數(shù);在回調(diào)函數(shù)中可通過lxml、bs4、xpath、css等方法獲取想要的內(nèi)容，生成item;最后將item傳送給pipeline進(jìn)行處理。

2.4 實(shí)時(shí)通訊WebSocket協(xié)議

WebSocket協(xié)議是基于TCP的一種新的應(yīng)用層網(wǎng)絡(luò)協(xié)議[9]，其實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工（full-duplex）通信——允許服務(wù)器主動(dòng)發(fā)送信息給客戶端。有別于HTTP協(xié)議，HTTP協(xié)議只能實(shí)現(xiàn)單工通信，如圖3所示。通過微信開發(fā)文檔提供的官方API[10]，首先新建WebSocket 實(shí)例，WebSocket 對(duì)象作為一個(gè)構(gòu)造函數(shù)，將客戶端與服務(wù)器進(jìn)行連接，每次進(jìn)入聊天頁面必須調(diào)用wx.onSocketOpen（）監(jiān)聽 WebSocket 連接打開事件[11];在連接成功的回調(diào)函數(shù)里調(diào)用wx.sendSocketMessage（），通過WebSocket 連接發(fā)送數(shù)據(jù);退出聊天后，wx.onSocketClose（）監(jiān)聽 WebSocket 連接關(guān)閉事件。

3 同類產(chǎn)品比較

與藍(lán)墨云APP等同類產(chǎn)品相比，本系統(tǒng)作為一款微信小程序，具有如下優(yōu)勢(shì)：首先，該程序無需安裝，可隨時(shí)使用，操作簡單便捷;其次，系統(tǒng)無需頻繁登錄，只需首次登錄時(shí)進(jìn)行個(gè)人身份認(rèn)證，之后便能直接進(jìn)入個(gè)人管理系統(tǒng);最后，在本系統(tǒng)中高校學(xué)生和教師無需手動(dòng)添加課程，使用更加便捷。產(chǎn)品特性比較情況如表6所示。

4 主要功能模塊實(shí)現(xiàn)

4.1 上傳文件功能

該功能主要運(yùn)用微信小程序的MVC框架開發(fā)思想，以及邏輯層與視圖層的數(shù)據(jù)交互功能，通過base64將圖片顯示在wxml視圖層。

上傳文件主要步驟如下：先用微信原生接口wx.chooseMessageFile（）[12]獲取本地文件臨時(shí)路徑，再調(diào)用知曉云數(shù)據(jù)庫用于上傳文件的API，將文件添加到內(nèi)容庫中，在成功的回調(diào)函數(shù)中獲取文件網(wǎng)絡(luò)路徑，顯示在前端，關(guān)鍵代碼如下：

……

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

count： 1，? ? ? ? ? ? ? ? ? ? ?//選擇文件數(shù)量

type： ‘file，? ? ? ? ? ? ? ? ? ?//選擇文件類型

success（res） {? ? ? ? ? ? ? ? //成功的回調(diào)函數(shù)

let MyFile = new wx.BaaS.File（）? //獲取云服務(wù)對(duì)象

……

MyFile.upload（fileParams， metaData）. then（re => {? //將文件路徑添加到課件文件庫

}， err => {

// HError 對(duì)象

……

4.2 爬蟲功能

該功能主要采用Python語言實(shí)現(xiàn)，其中的Scrapy應(yīng)用框架可爬取網(wǎng)站數(shù)據(jù)，并提取結(jié)構(gòu)性數(shù)據(jù)。將其架設(shè)在阿里云服務(wù)器上，通過wx. Requeset原生接口請(qǐng)求函數(shù)計(jì)算生成的API。

利用Python語言爬取學(xué)校官網(wǎng)課表信息，在手機(jī)端模擬登錄官網(wǎng)獲取課表信息，主要步驟如下：以初始的URLRequest通過get或post方法設(shè)置回調(diào)函數(shù);當(dāng)該requeset下載完畢并返回時(shí)，生成response，并作為參數(shù)傳遞給回調(diào)函數(shù);在回調(diào)函數(shù)內(nèi)分析返回的網(wǎng)頁內(nèi)容，返回的Request對(duì)象經(jīng)過Scrapy處理，下載相應(yīng)內(nèi)容;再通過lxml、bs4、xpath、 css等方法獲取想要的內(nèi)容，生成item。關(guān)鍵代碼如下：

……

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

//需要訪問的網(wǎng)頁URL

……

page = self.client.get（url，headers=headers）? //get方法獲取該網(wǎng)頁的response

//判斷是否本學(xué)期還未注冊(cè)

if “未注冊(cè)” in page.text：

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

……

data = {? ? ?//訪問的官網(wǎng)參數(shù)

……

}

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

//需要訪問的網(wǎng)頁URL

res = self.client.post（url=url， data=data）? //利用post方法獲取該網(wǎng)頁的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 課表導(dǎo)入題庫功能

采用node.js語言，利用知曉云后臺(tái)的云函數(shù)實(shí)現(xiàn)該功能[13]。先用微信原生接口wx.chooseMessageFile（）獲取本地指定的csv表格臨時(shí)路徑，再調(diào)用知曉云數(shù)據(jù)庫用于上傳文件的API，將表格添加到內(nèi)容庫中，在成功的回調(diào)函數(shù)中獲取表格網(wǎng)絡(luò)路徑，將表格中的數(shù)據(jù)存入數(shù)據(jù)庫中，根據(jù)新添加的數(shù)據(jù)更新題庫的外鍵活動(dòng)ID，關(guān)鍵代碼如下：

……

var activity_id=event.data.activity_id? //活動(dòng)ID

let MyTable = new BaaS.TableObject（79622）? //設(shè)置活動(dòng)表對(duì)象

MyTable.importData（{dataFileUrl：event.data.url}， ‘csv）.then（res => { //上傳表格URL到內(nèi)容庫中

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

……

Product.setQuery（query）.find（）.then（res => {? //獲取新添加的數(shù)據(jù)

……

temp.forEach（（it， i） => {? //循環(huán)的新數(shù)據(jù)，添加活動(dòng)ID

……

product.update（）.then（res => { //將活動(dòng)ID更新到數(shù)據(jù)表中

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

}， err => {

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

……

5 結(jié)語

本文提出的基于微信小程序的云班課管理系統(tǒng)為高校師生創(chuàng)建了一個(gè)線上與線下相結(jié)合的學(xué)習(xí)和教學(xué)平臺(tái)，可為學(xué)生提供在線考試、課件分享、交流討論等功能，為教師提供課程創(chuàng)建、課件上傳、測(cè)試發(fā)布等功能[14]。但該平臺(tái)的不足之處是沒有直播功能，今后將對(duì)其進(jìn)一步完善。綜上所述，隨著未來教育信息化的發(fā)展，在家進(jìn)行移動(dòng)辦公學(xué)習(xí)將更加普及，幾乎所有事情都可以進(jìn)行遠(yuǎn)程操作。因此，該平臺(tái)具有較高的應(yīng)用價(jià)值，有著廣闊的發(fā)展前景。

參考文獻(xiàn)：

[1] 林鴻. 多媒體在線教育平臺(tái)的設(shè)計(jì)與實(shí)踐[J]. 科技傳播， 2018， 10（23）：78-79.

[2] 趙一博，劉俊男. 現(xiàn)代網(wǎng)絡(luò)示范中心混合式在線教育平臺(tái)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)產(chǎn)品與流通，2018（3）：146-147.

[3] 蒲在毅. 基于區(qū)域共享的智慧教育平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件，2019，40（4）：91-93.

[4] 榮蓉. 實(shí)戰(zhàn)微信小程序：JavaScript，WXML與Flexbox綜合開發(fā)[M]. 北京：電子工業(yè)出版社，2017.

[5] 劉剛. 小程序?qū)崙?zhàn)視頻課：微信小程序開發(fā)全案精講[M].? 北京：人民郵電出版社，2018

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

[7] 百度百科. 網(wǎng)絡(luò)爬蟲[EB/OL]. https：//baike.baidu.com/item/網(wǎng)絡(luò)爬蟲/5162711？fr=aladdin.

[8] 田智雁，張曉麗，梁波. 基于微信小程序的學(xué)生家校信息系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件導(dǎo)刊，2018，17 （9）： 122-124.

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

[10] 王延平. 21天精通微信小程序開發(fā)[M]. 北京：電子工業(yè)出版社，2017.

[11] 劉剛. 微信小程序開發(fā)圖解案例教程[M]. 北京：人民郵電出版社，2017.

[12] 王娟. 微信小程序在高校教學(xué)中的應(yīng)用與推廣[J]. 電腦知識(shí)與技術(shù)，2017，13（27）：147-148.

[13] 基夫·莫里斯. 基礎(chǔ)設(shè)施即代碼：云服務(wù)器管理[M]. 北京：人民郵電出版社，2018.

[14] 黃曦，沙拉依丁·蘇里坦. 微信小程序開發(fā)快速入門[M]. 北京：電子工業(yè)出版社，2017.

（責(zé)任編輯：黃 ?。?/p>