基于微信小程序的云班課管理系統設計

張圣篩 梅志虎

摘 要：為了讓教育不再受到時間和空間限制，同時讓教學模式更加多樣化，互聯網與教育開始進行跨界融合，通過信息技術改變教育行業的教學方式及管理模式。設計一個基于微信小程序的云班課管理系統，前端使用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.

（責任編輯：黃 ?。?/p>