吳國棟，祝娛慧

(安徽農(nóng)業(yè)大學(xué) 信息與計(jì)算機(jī)學(xué)院,合肥 230000)

隨著互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，基于移動(dòng)終端的學(xué)習(xí)系統(tǒng)也愈來愈受到人們的重視和喜愛。目前，微信作為一種為智能終端提供即時(shí)通信服務(wù)的免費(fèi)應(yīng)用程序，已經(jīng)廣泛地應(yīng)用在智能手機(jī)上?；谖⑿判〕绦蛩_發(fā)的“C語言程序設(shè)計(jì)”精品課程教學(xué)系統(tǒng)，可滿足教師與學(xué)生對(duì)該課程不同的需求，主要利用WXML(WeiXin Markup Language)、Javascript、WXSS(WeiXin Style Sheets)等技術(shù)進(jìn)行開發(fā)。通過本系統(tǒng)，學(xué)生可以利用碎片化時(shí)間隨時(shí)隨地學(xué)習(xí)。課程學(xué)習(xí)內(nèi)容覆蓋每一個(gè)知識(shí)點(diǎn)。在內(nèi)容排版上采用文字與程序代碼圖片相結(jié)合，以適應(yīng)微信程序的界面風(fēng)格。系統(tǒng)設(shè)計(jì)了在線測(cè)試及學(xué)習(xí)過程管理等功能。微信小程序是一種即開即用、無須安裝、不占用內(nèi)存的應(yīng)用，可以在微信內(nèi)便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)[1]，緩解了老師和學(xué)生之間因時(shí)間、地點(diǎn)、區(qū)域等條件限制而產(chǎn)生的教與學(xué)障礙，增強(qiáng)師生之間的互動(dòng)，為學(xué)生提供良好的在線學(xué)習(xí)平臺(tái)。

1 需求分析

1.1 系統(tǒng)結(jié)構(gòu)分析

圖1 “C語言程序設(shè)計(jì)”課程教學(xué)系統(tǒng)結(jié)構(gòu)

整個(gè)“C語言程序設(shè)計(jì)”課程教學(xué)系統(tǒng)結(jié)構(gòu)分為前端與后端兩個(gè)部分，如圖1所示。前端主要面向?qū)W生，后端主要面向應(yīng)用不同權(quán)限的管理員，例如教師等。學(xué)生通過系統(tǒng)可以進(jìn)行查看個(gè)人信息和課程資源、在線學(xué)習(xí)、在線測(cè)試和查詢學(xué)習(xí)進(jìn)度等學(xué)習(xí)過程管理。教師端登錄系統(tǒng)可以對(duì)課程資源、學(xué)生信息、學(xué)生學(xué)習(xí)情況和論壇等進(jìn)行管理[2]。

1.2 系統(tǒng)主要功能需求

“C語言程序設(shè)計(jì)”教學(xué)管理系統(tǒng)要實(shí)現(xiàn)學(xué)生信息管理、在線學(xué)習(xí)管理、在線測(cè)試和論壇討論四大核心功能。

學(xué)生信息管理功能包括查看學(xué)生的基本信息、學(xué)習(xí)進(jìn)度和測(cè)試成績。在線學(xué)習(xí)管理功能除了要實(shí)現(xiàn)學(xué)生可以觀看課程視頻及電子講義，教師可以上傳課程資源等傳統(tǒng)教學(xué)模式，還應(yīng)具有對(duì)學(xué)生學(xué)習(xí)進(jìn)度進(jìn)行監(jiān)督的功能。在線測(cè)試功能要求系統(tǒng)能夠隨機(jī)生成一套試卷供學(xué)生測(cè)試，測(cè)試過程中限制測(cè)試時(shí)間，學(xué)生提交試卷后自動(dòng)批改生成成績。論壇討論功能實(shí)現(xiàn)學(xué)生與學(xué)生之間、學(xué)生與老師之間的互動(dòng)交流，且考慮到不同學(xué)生提出的問題會(huì)出現(xiàn)重復(fù)，教師也會(huì)有緊急事件通知每位學(xué)生，為減少教師的重復(fù)工作，系統(tǒng)在設(shè)計(jì)時(shí)應(yīng)考慮以留言通知欄等形式解決此問題。

通過對(duì)整個(gè)學(xué)習(xí)平臺(tái)的分析，設(shè)計(jì)出精品課程教學(xué)系統(tǒng)數(shù)據(jù)流程圖，如圖2所示。

圖2 精品課程教學(xué)系統(tǒng)數(shù)據(jù)流程圖

1.3 微信開發(fā)技術(shù)需求

開發(fā)微信小程序需要掌握HTML、CSS、JavaScript等開發(fā)語言和微信提供的微信web開發(fā)者工具。小程序后臺(tái)用JavaScript語言編寫，前端框架用WXML構(gòu)建，結(jié)合基礎(chǔ)組件、事件系統(tǒng)構(gòu)建出頁面的結(jié)構(gòu)。前端Style用WXSS編寫,這是一種在CSS的基礎(chǔ)上擴(kuò)充了尺寸單位、樣式導(dǎo)入，用于控制WXML組件顯示的樣式語言[3]。數(shù)據(jù)庫技術(shù)基于微信小程序數(shù)據(jù)庫，實(shí)現(xiàn)用戶管理、統(tǒng)計(jì)分析等。存儲(chǔ)管理使用由微信提供的云開發(fā)環(huán)境。

2 系統(tǒng)總體結(jié)構(gòu)

2.1 系統(tǒng)功能結(jié)構(gòu)

“C語言程序設(shè)計(jì)”精品課程管理系統(tǒng)主要分為用戶管理、課程管理、論壇管理。其中，用戶管理包括用戶登錄、用戶注冊(cè)、信息的查詢修改、修改密碼和權(quán)限設(shè)置。課程管理則針對(duì)學(xué)生在平臺(tái)學(xué)習(xí)功能，主要包括在線學(xué)習(xí)、在線測(cè)試、學(xué)習(xí)成績查詢和學(xué)習(xí)進(jìn)度查詢功能。論壇管理面向?qū)W生與學(xué)生之間，老師與學(xué)生之間的互動(dòng)交流功能?！癈語言程序設(shè)計(jì)”教學(xué)系統(tǒng)功能結(jié)構(gòu)圖，如圖3所示。

圖3 “C語言程序設(shè)計(jì)”教學(xué)系統(tǒng)功能結(jié)構(gòu)圖

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

“C語言程序設(shè)計(jì)”教學(xué)系統(tǒng)采用微信云開發(fā)數(shù)據(jù)庫，云開發(fā)提供了一個(gè) JSON 數(shù)據(jù)庫，一個(gè)數(shù)據(jù)庫可以有多個(gè)集合(相當(dāng)于關(guān)系型數(shù)據(jù)中的表)，集合可看作一個(gè) JSON 數(shù)組，數(shù)組中的每個(gè)對(duì)象就是一條記錄，記錄的格式是 JSON 對(duì)象。數(shù)據(jù)庫中的每條記錄都是一個(gè) JSON 格式的對(duì)象。由于直接使用微信云開發(fā)數(shù)據(jù)庫，將系統(tǒng)所使用的數(shù)據(jù)存放在云開發(fā)數(shù)據(jù)庫中，微信小程序可以直接連接數(shù)據(jù)庫進(jìn)行數(shù)據(jù)操作。系統(tǒng)主要數(shù)據(jù)庫表有學(xué)生信息表、教師信息表、試題信息表，論壇信息表等。如表1～表4所示：

表1 學(xué)生信息表

表2 教師信息表

表3 試題信息表

表4 論壇信息表

3 系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

3.1 用戶登錄模塊

用戶登錄界面包括用戶名和密碼。用戶選擇相應(yīng)的身份后輸入用戶名和密碼，登陸成功則進(jìn)入系統(tǒng)；登錄失敗則會(huì)出現(xiàn)相應(yīng)錯(cuò)誤提示。新用戶通過點(diǎn)擊立即注冊(cè)進(jìn)入立即注冊(cè)界面，完成注冊(cè)后會(huì)自動(dòng)跳轉(zhuǎn)登錄界面。用戶登錄界面如圖4所示。

圖4 用戶登錄界面

圖5 個(gè)人用戶信息界面

3.2 系統(tǒng)管理模塊

在此模塊中，學(xué)生可以查看個(gè)人用戶信息，如姓名、學(xué)號(hào)、學(xué)院專業(yè)、考試成績記錄等，并對(duì)基本信息擁有修改的權(quán)力(除成績外)。老師除查看個(gè)人的信息外，還可以查看學(xué)生名單信息，具體包括每個(gè)學(xué)生的姓名、專業(yè)、視頻學(xué)習(xí)進(jìn)度、考試成績。個(gè)人用戶信息界面如圖5所示。

3.3 在線學(xué)習(xí)模塊

此模塊為學(xué)生學(xué)習(xí)課程所設(shè)。學(xué)生登錄系統(tǒng)后，點(diǎn)擊首頁即可看到章節(jié)目錄，進(jìn)入相應(yīng)知識(shí)章節(jié)就可在線觀看課程視頻和課程講義電子版。在線學(xué)習(xí)實(shí)現(xiàn)界面如圖6所示。

圖6 在線學(xué)習(xí)界面

圖7 學(xué)習(xí)進(jìn)度界面

3.4 學(xué)習(xí)過程管理模塊

學(xué)生在觀看每一章的課程資源時(shí)，系統(tǒng)后臺(tái)會(huì)同時(shí)進(jìn)行時(shí)間計(jì)數(shù)，達(dá)到規(guī)定觀看時(shí)間后才可以提交學(xué)習(xí)進(jìn)度，并且在個(gè)人中心查看學(xué)習(xí)進(jìn)度，可以看到自己的全部學(xué)習(xí)進(jìn)程，星星點(diǎn)亮則表示已完成該章節(jié)學(xué)習(xí)任務(wù)。學(xué)習(xí)提供界面，如圖7所示。

3.5 論壇管理模塊

該模塊主要實(shí)現(xiàn)學(xué)生與學(xué)生之間的在線交流及學(xué)生與老師之間的線上課程交流。老師可以發(fā)布通告通知學(xué)生重要事情，師生之間在論壇里通過發(fā)表留言和回復(fù)留言的形式來交流，這樣形成一種交互式的教學(xué)模式。論壇討論界面如圖8所示，論壇留言信息關(guān)鍵代碼如下：

wx.cloud.callFunction({//調(diào)用云函數(shù)獲取留言表

name: 'chatbox',

data:{ },

success(res) {

that.setData({

liuyanlist: res.result.data

})

},

})

db.collection('notice').get({//獲取通知

success(res) {

that.setData({

notice:res.data

})

wx.setStorageSync('noticeID', res.data[0]._id)

}

})

圖8 論壇討論界面

圖9 在線測(cè)試界面

3.6 在線測(cè)試模塊

學(xué)生完成課程視頻學(xué)習(xí)內(nèi)容后，可進(jìn)入在線測(cè)試完成老師指定的試卷測(cè)試，從題庫隨機(jī)抽取試題生成一份試卷，在規(guī)定時(shí)限內(nèi)提交試卷(若到時(shí)未提交則強(qiáng)制提交)，系統(tǒng)自動(dòng)完成試卷批改，學(xué)生可查看客觀題的考試分?jǐn)?shù)。在線測(cè)試界面實(shí)現(xiàn)如圖9所示，在線測(cè)試關(guān)鍵代碼如下：

wx.cloud.callFunction({

name: 'question',

data:{

chapter:that.data.chapter //從數(shù)據(jù)庫里抽取對(duì)應(yīng)章節(jié)題目

},

success(res) {

that.setData({

questionCount: res.result.data.length,

questions:res.result.data

})

},

fail: err => {

wx.showModal({

title: '提示',

content: '網(wǎng)絡(luò)異常',

showCancel: false

})

}

})

4 結(jié)語

微信小程序與基于Web的教學(xué)網(wǎng)站相比更為便捷，僅僅需要一部手機(jī)就可以隨時(shí)隨地學(xué)習(xí)，較于App開發(fā)來說，開發(fā)成本更便宜。本文基于微信小程序，開發(fā)了一個(gè)線上移動(dòng)端的C語言教學(xué)系統(tǒng)，為學(xué)生提供了一種實(shí)時(shí)、易用、交互的全新學(xué)習(xí)環(huán)境[4]。為提高學(xué)生學(xué)習(xí)效率，提升“C語言程序設(shè)計(jì)”課程教學(xué)質(zhì)量，具有一定的價(jià)值。