“C語言程序設(shè)計(jì)”課程學(xué)習(xí)平臺微信小程行研究與開發(fā)

吳國棟，祝娛慧

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

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

1 需求分析

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

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

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

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

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

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

通過對整個學(xué)習(xí)平臺的分析，設(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ā)者工具。小程序后臺用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ì)分析等。存儲管理使用由微信提供的云開發(fā)環(huán)境。

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

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

“C語言程序設(shè)計(jì)”精品課程管理系統(tǒng)主要分為用戶管理、課程管理、論壇管理。其中，用戶管理包括用戶登錄、用戶注冊、信息的查詢修改、修改密碼和權(quán)限設(shè)置。課程管理則針對學(xué)生在平臺學(xué)習(xí)功能，主要包括在線學(xué)習(xí)、在線測試、學(xué)習(xí)成績查詢和學(xué)習(xí)進(jìn)度查詢功能。論壇管理面向?qū)W生與學(xué)生之間，老師與學(xué)生之間的互動交流功能?！癈語言程序設(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ā)提供了一個 JSON 數(shù)據(jù)庫，一個數(shù)據(jù)庫可以有多個集合(相當(dāng)于關(guān)系型數(shù)據(jù)中的表)，集合可看作一個 JSON 數(shù)組，數(shù)組中的每個對象就是一條記錄，記錄的格式是 JSON 對象。數(shù)據(jù)庫中的每條記錄都是一個 JSON 格式的對象。由于直接使用微信云開發(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)；登錄失敗則會出現(xiàn)相應(yīng)錯誤提示。新用戶通過點(diǎn)擊立即注冊進(jìn)入立即注冊界面，完成注冊后會自動跳轉(zhuǎn)登錄界面。用戶登錄界面如圖4所示。

圖4 用戶登錄界面

圖5 個人用戶信息界面

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

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

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

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

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

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

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

學(xué)生在觀看每一章的課程資源時，系統(tǒng)后臺會同時進(jìn)行時間計(jì)數(shù)，達(dá)到規(guī)定觀看時間后才可以提交學(xué)習(xí)進(jìn)度，并且在個人中心查看學(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 在線測試界面

3.6 在線測試模塊

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

wx.cloud.callFunction({

name: 'question',

data:{

chapter:that.data.chapter //從數(shù)據(jù)庫里抽取對應(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ī)就可以隨時隨地學(xué)習(xí)，較于App開發(fā)來說，開發(fā)成本更便宜。本文基于微信小程序，開發(fā)了一個線上移動端的C語言教學(xué)系統(tǒng)，為學(xué)生提供了一種實(shí)時、易用、交互的全新學(xué)習(xí)環(huán)境[4]。為提高學(xué)生學(xué)習(xí)效率，提升“C語言程序設(shè)計(jì)”課程教學(xué)質(zhì)量，具有一定的價值。